apps/wolnelektury_core/static/css/main/header.scss

   1 @import "tools";
   2
   3 $header_bg: #191919;
   4
   5
   6 #header-wrapper {
   7     position: relative;
   8
   9     /* Upper-half both sides dark background */
  10     &:before {
  11         content: " ";
  12         display: block;
  13         z-index: -1;
  14         position: absolute;
  15         top: 0;
  16         @include size-px(bottom, 45);
  17         left: 0;
  18         width: 100%;
  19         background-color: $header_bg;
  20     }
  21
  22     /* Left-side dark background */
  23     &:after {
  24         content: " ";
  25         display: block;
  26         z-index: -1;
  27         position: absolute;
  28         top: 0;
  29         bottom: 0;
  30         left: 0;
  31         width: 50%;
  32         background-color: $header_bg;
  33     }
  34 }
  35
  36
  37 header#main {
  38     @include size-px(line-height, 20); /* Make links easier to click when wrapped. */
  39     background-color: $header_bg;
  40     color: #bbb;
  41
  42     @media screen and (min-width: 62.5em) {
  43         position: relative;
  44         @include size-px(height, 94);
  45         @include size-px(width, 975);
  46         margin: auto;
  47     }
  48
  49     a {
  50         color: #17CFDB;
  51     }
  52
  53     #logo {
  54         display: block;
  55         @include size-px(height, 94);
  56         @include size-px(width, 94);
  57
  58         @media screen and (min-width: 24em) {
  59             float: left;
  60         }
  61
  62         img {
  63             display: block;
  64         }
  65     }
  66
  67     #tagline {
  68         margin-top: 0;
  69         @include size-px(margin-left, 5);
  70         @include size-px(margin-right, 5);
  71         padding-top: 0;
  72         @include size-px(font-size, 13);
  73
  74         @media screen and (min-width: 24em) {
  75             @include size-px(padding-top, 6);
  76             text-align: right;
  77         }
  78
  79         @media screen and (min-width: 62.5em) {
  80             position: absolute;
  81             @include size-px(top, 10);
  82             @include size-px(left, 255);
  83             @include size-px(margin-left, 0);
  84         }
  85     }
  86
  87     #user-info {
  88         margin-top: 0;
  89         @include size-px(margin-left, 5);
  90         @include size-px(margin-right, 5);
  91         padding-top: 0;
  92         @include mono;
  93         @include size-px(font-size, 10);
  94
  95         @media screen and (min-width: 24em) {
  96             @include size-px(padding-top, 15);
  97             text-align: right;
  98         }
  99         @media screen and (min-width: 62.5em) {
 100             position: absolute;
 101             top: 0;
 102             right: 0;
 103             @include size-px(margin-left, 0);
 104         }
 105
 106         #user-menu {
 107             display: none;
 108         }
 109     }
 110
 111     form#search-area {
 112         position: relative;
 113         clear: both;
 114         @include size-px(height, 45);
 115         background: #444444;
 116         color: white;
 117
 118         @media screen and (min-width: 62.5em) {
 119             position: absolute;
 120             @include size-px(top, 49);
 121             @include size-px(left, 240);
 122             @include size-px(right, 0);
 123         }
 124
 125         #search-field {
 126             position: absolute;
 127             @include size-px(top, 5);
 128             @include size-px(left, 5);
 129             @include size-px(right, 113);
 130
 131             label {
 132                 @include hidden-label;
 133             }
 134             input#search {
 135                 z-index: 200;
 136                 position: relative;
 137                 @include size-px(height, 33);
 138                 width: 100%;
 139                 padding: 0;
 140                 @include size-px(padding-left, 13);
 141                 @include size-px(line-height, 32.5);
 142
 143                 border: none;
 144                 @include size-px(border-radius, 5);
 145                 box-shadow: 0 0 0.5em #444444 inset;
 146
 147                 font-family: Georgia;
 148                 @include size-px(font-size, 13);
 149                 background-color: white;
 150                 color: black;
 151
 152                 /* styling search placeholder */
 153                 &::placeholder
 154                 {
 155                     font-family: Georgia;
 156                     font-style: italic;
 157                     color: #767676;
 158                 }
 159                 &::-webkit-input-placeholder
 160                 {
 161                     font-family: Georgia;
 162                     font-style: italic;
 163                     color: #767676;
 164                 }
 165                 &::-moz-placeholder
 166                 {
 167                     font-family: Georgia;
 168                     font-style: italic;
 169                     color: #767676;
 170                 }
 171             }
 172         }
 173         button {
 174             display: inline-block;
 175             position: absolute;
 176             top: 0;
 177             right: 0;
 178             @include size-px(height, 45);
 179             @include size-px(width, 94);
 180             margin: 0;
 181             padding: 0;
 182
 183             border: none;
 184
 185             @include mono;
 186             @include size-px(font-size, 11);
 187             background: #018189;
 188             color: white;
 189         }
 190     }
 191 }