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

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