mirror of
https://github.com/neocities/neocities.git
synced 2025-04-24 17:22:35 +02:00
456 lines
8.1 KiB
SCSS
456 lines
8.1 KiB
SCSS
// ----------------------------------------------------------------
|
|
// Project Specific: Header Area
|
|
// ----------------------------------------------------------------
|
|
|
|
// Apply to header for styling
|
|
.header-Base{
|
|
background:#65a0ad;
|
|
border-bottom:6px solid #e93250;
|
|
min-height:42px;
|
|
overflow:hidden;
|
|
}
|
|
.hp .header-Base {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.row.header-Content.content {
|
|
padding-bottom:27px;
|
|
}
|
|
|
|
.header-Content{
|
|
@media(max-device-width:480px), screen and (max-width:800px){
|
|
padding:0;
|
|
}
|
|
}
|
|
.blurb{background:#fff}
|
|
|
|
.header-Intro{
|
|
background:url(/img/neocity.png) 95% bottom no-repeat;
|
|
background-size: 734px;
|
|
min-height:214px;
|
|
|
|
@media (max-device-width:480px), screen and (max-width:800px){
|
|
@include vendor(background-size, cover);
|
|
min-height:2px;
|
|
}
|
|
}
|
|
|
|
.header-Outro{
|
|
background:#30424b -moz-linear-gradient(top, #2b3c43 0%, #354751 100%); /* FF3.6+ */
|
|
background:#30424b -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2b3c43), color-stop(100%,#354751)); /* Chrome,Safari4+ */
|
|
background:#30424b -webkit-linear-gradient(top, #2b3c43 0%,#354751 100%); /* Chrome10+,Safari5.1+ */
|
|
background:#30424b -o-linear-gradient(top, #2b3c43 0%,#354751 100%); /* Opera 11.10+ */
|
|
background:#30424b -ms-linear-gradient(top, #2b3c43 0%,#354751 100%); /* IE10+ */
|
|
background:#30424b linear-gradient(to bottom, #2b3c43 0%,#354751 100%); /* W3C */
|
|
@include box-shadow($outroShadow);
|
|
color:#fafafa;
|
|
}
|
|
.hp {
|
|
.header-Outro {
|
|
.row>.col {
|
|
padding-left: 0;
|
|
}
|
|
.col.intro {
|
|
width: 53%;
|
|
}
|
|
.col.signup-Area {
|
|
width: 45%;
|
|
}
|
|
.signup-Area {
|
|
float: right;
|
|
}
|
|
.intro-text {
|
|
color: #B8D375;
|
|
font-size: .9em;
|
|
margin-bottom: 1.8em;
|
|
|
|
a {
|
|
color: #B8D375;
|
|
border-bottom: 1px solid rgba(184, 211, 117, 0.5);
|
|
line-height: 97%;
|
|
display: inline-block;
|
|
}
|
|
a:hover {
|
|
text-decoration: none;
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
h2.section-header {
|
|
font-size: 2.2em;
|
|
margin-top: .4em;
|
|
margin-bottom: 0.2em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.intro-List{
|
|
@extend %kill-List;
|
|
@media (max-device-width:480px), screen and (max-width:800px){
|
|
margin-bottom:20px;
|
|
padding:20px!important;
|
|
}
|
|
|
|
li{
|
|
padding-left:$spacing*9;
|
|
padding-right:$spacing*3;
|
|
margin-bottom:20px;
|
|
}
|
|
|
|
h2{
|
|
margin-bottom: 0px;
|
|
font-size: 1.725em;
|
|
}
|
|
|
|
p {
|
|
color:#B2BCC1;
|
|
line-height: 170%;
|
|
}
|
|
}
|
|
|
|
.intro-Icon{
|
|
background:url(/img/icons.png) no-repeat;
|
|
display:block;
|
|
height:37px;
|
|
left:-10px;
|
|
position:absolute;
|
|
top:2px;
|
|
width:37px;
|
|
}
|
|
|
|
.intro-Tools{position:relative}
|
|
.intro-Question{
|
|
position:relative;
|
|
|
|
.intro-Icon{
|
|
background-position:0 -40px;
|
|
}
|
|
}
|
|
.intro-Social {
|
|
position:relative;
|
|
|
|
.intro-Icon {
|
|
background-position: 0 -80px;
|
|
}
|
|
}
|
|
|
|
.signup-Area{
|
|
min-height:100px;
|
|
position:relative
|
|
}
|
|
|
|
.header-Outro .signup-Form{
|
|
background:#354751;
|
|
border-radius:4px 4px 0 0;
|
|
@include box-shadow($signupShadow);
|
|
height:700%;
|
|
position:absolute;
|
|
top: -40px;
|
|
|
|
@media (max-device-width:480px), screen and (max-width:800px){
|
|
height:auto;
|
|
margin:0;
|
|
overflow:visible;
|
|
padding-bottom:20px;
|
|
position:static;
|
|
width:auto;
|
|
}
|
|
|
|
h2{
|
|
margin-bottom:0;
|
|
text-shadow:0 1px 1px rgba(0,0,0,.5);
|
|
font-size: 1.8em;
|
|
}
|
|
|
|
hr{
|
|
border-bottom:1px solid #4a6677;
|
|
border-top:1px solid #1d282d;
|
|
margin:4px 0 26px;
|
|
}
|
|
|
|
fieldset{
|
|
background:url(/img/sign-up-bg.png) repeat-x center top;
|
|
padding: 25px 33px;
|
|
}
|
|
|
|
label{
|
|
color:#81b8c6;
|
|
@media (max-device-width:480px), screen and (max-width:800px){
|
|
font-size:70%
|
|
}
|
|
}
|
|
|
|
label#domain-name {
|
|
display: inline;
|
|
vertical-align: 51%;
|
|
color: #C2CFD4;
|
|
}
|
|
|
|
.input-Area{
|
|
background:#29383f;
|
|
border:0 solid black;
|
|
@include box-shadow($inputAreaShadow);
|
|
color:#C2CFD4;
|
|
margin-bottom:27px;
|
|
margin-right:$spacing;
|
|
padding: 10px 10px 7px 10px;
|
|
width:100%;
|
|
|
|
// &:focus{color:#eee}
|
|
}
|
|
.input-Area#create-Input {
|
|
width:62%;
|
|
}
|
|
.col.col-50 {
|
|
margin-left: 0;
|
|
position: static;
|
|
}
|
|
.tooltip {
|
|
&.left .tooltip-arrow {
|
|
border-left-color: #971D31;
|
|
}
|
|
.tooltip-inner {
|
|
background-color: #971D31;
|
|
}
|
|
}
|
|
.btn-Action{
|
|
padding:10px 25px;
|
|
margin-top: 2em;
|
|
font-size: 1em;
|
|
}
|
|
}
|
|
|
|
.small-Nav{
|
|
background:#30424B;
|
|
display:none;
|
|
position:fixed;
|
|
right:0;
|
|
top:0;
|
|
width:50px;
|
|
z-index:9999;
|
|
|
|
@media (max-device-width:480px), screen and (max-width:800px){
|
|
display:block
|
|
}
|
|
}
|
|
|
|
|
|
// Top nav area
|
|
.header-Nav{
|
|
background:#5e95a1;
|
|
border-bottom:1px solid #92B4BD;
|
|
|
|
@include vendor(transition, all 0.35s);
|
|
|
|
@media (max-device-width:480px), screen and (max-width:800px){
|
|
position:fixed;
|
|
top:-900px!important;
|
|
}
|
|
|
|
&.show-Nav{
|
|
top:0!important;
|
|
}
|
|
|
|
a, a:visited{
|
|
color:#fff;
|
|
padding:$spacing*2 $spacing*3;
|
|
text-decoration:none;
|
|
|
|
@media (max-device-width:480px), screen and (max-width:800px){
|
|
display:block;
|
|
}
|
|
|
|
&:hover{background:#528995; text-decoration:underline}
|
|
&.selected, &:active{background:#528995; text-decoration:underline}
|
|
}
|
|
|
|
.notification-value {
|
|
background: $c-Brand-1;
|
|
padding: 2px 5px;
|
|
@include border-radius(4px);
|
|
}
|
|
|
|
.dropdown {
|
|
height: 2.6em; //not sure why I need this :/
|
|
|
|
a {
|
|
width:100%;
|
|
}
|
|
.info {
|
|
float:right;
|
|
margin-left: 10px;
|
|
|
|
.fa-caret-down {
|
|
margin-left:10px;
|
|
}
|
|
}
|
|
}
|
|
.dropdown-menu {
|
|
right: -1px;
|
|
left: auto;
|
|
background-color:#4C818C;
|
|
min-width: 13em;
|
|
@include border-radius(0px 0px 6px 6px);
|
|
@include box-shadow(0 2px 7px rgba(0,0,0,0.2));
|
|
|
|
li {
|
|
width:100%;
|
|
|
|
a {
|
|
float:left;
|
|
}
|
|
a:hover, a:focus {
|
|
background:#3C6670;
|
|
}
|
|
}
|
|
.divider {
|
|
border-bottom: 1px solid #5e95a1;
|
|
margin: 5px 0px;
|
|
}
|
|
.notification-value {
|
|
float:right;
|
|
padding: 0px 5px;
|
|
}
|
|
}
|
|
.dropdown-submenu {
|
|
float: left;
|
|
|
|
&:hover > a, &:focus > a {
|
|
background:#3C6670;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
width: 100%;
|
|
margin-left: -1px;
|
|
margin-top: -1px;
|
|
|
|
li {
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
>a:after {
|
|
border-left-color: #fff;
|
|
}
|
|
}
|
|
}
|
|
.constant-Nav{
|
|
float:left;
|
|
position:relative;
|
|
|
|
@media (max-device-width:480px), screen and (max-width:800px){
|
|
float:none;
|
|
|
|
li{float:none;}
|
|
}
|
|
}
|
|
|
|
.status-Nav{
|
|
float:right;
|
|
|
|
@media (max-device-width:480px), screen and (max-width:800px){
|
|
float:none;
|
|
}
|
|
|
|
li{
|
|
float:left;
|
|
@media (max-device-width:480px), screen and (max-width:800px){
|
|
float:none
|
|
}
|
|
}
|
|
}
|
|
|
|
// hp CSS
|
|
.hp .header-Base{
|
|
padding-top:46px;
|
|
}
|
|
.hp .header-Nav{
|
|
left:0;
|
|
position:fixed;
|
|
top:0;
|
|
width:100%;
|
|
z-index:3
|
|
}
|
|
|
|
.hp .hp-Logo{
|
|
left:-90px;
|
|
position:fixed;
|
|
@include vendor(transition, all 0.35s);
|
|
|
|
|
|
&.in-View{
|
|
left:0!important;
|
|
z-index:99;
|
|
|
|
@media (max-device-width:480px), screen and (max-width:800px){
|
|
left:-90px!important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.hp .logo{
|
|
padding-top:45px;
|
|
|
|
@media (max-device-width:480px), screen and (max-width:800px){
|
|
padding-left:20px;
|
|
padding-right:20px;
|
|
}
|
|
}
|
|
|
|
.constant-Nav{
|
|
margin-left:-88px;
|
|
@include vendor(transition, all 0.35s);
|
|
@media (max-device-width:480px), screen and (max-width:800px){
|
|
margin-left:0;
|
|
}
|
|
|
|
&.in-View{
|
|
margin-left:0;
|
|
padding-left:70px;
|
|
|
|
@media (max-device-width:480px), screen and (max-width:800px){
|
|
padding-left:0
|
|
}
|
|
}
|
|
}
|
|
|
|
.add-Stripe{
|
|
border-bottom:6px solid #E93250;
|
|
@media (max-device-width:480px), screen and (max-width:800px){
|
|
border:0;
|
|
}
|
|
}
|
|
|
|
// Interior CSS
|
|
.interior .page{
|
|
padding-top: 22px;
|
|
float: left;
|
|
width: 100%;
|
|
}
|
|
.interior .signup-Form {
|
|
top: 0;
|
|
}
|
|
.interior .header-Base{
|
|
left:0;
|
|
overflow:visible;
|
|
position:fixed;
|
|
top:0;
|
|
width:100%;
|
|
z-index:2000;
|
|
}
|
|
|
|
.int-Logo{
|
|
left:0;
|
|
position:absolute;
|
|
top:0;
|
|
width:70px;
|
|
z-index:9;
|
|
}
|
|
|
|
.interior .header-Nav{
|
|
padding-left:70px;
|
|
@media (max-device-width:480px), screen and (max-width:800px){
|
|
width:100%;
|
|
}
|
|
}
|
|
|
|
.interior .constant-Nav{margin:0}
|