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             text-align: right;
  76         }
  77
  78         @media screen and (min-width: 62.5em) {
  79             position: absolute;
  80             @include size(top, 10px);
  81             @include size(left, 255px);
  82             @include size(margin-left, 0px);
  83         }
  84     }
  85
  86     #user-info {
  87         margin-top: 0;
  88         @include size(margin-left, 5px);
  89         @include size(margin-right, 5px);
  90         padding-top: 0;
  91         @include mono;
  92         @include size(font-size, 10px);
  93         position: relative;
  94
  95         @media screen and (min-width: 24em) {
  96             @include size(padding-top, 15px);
  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(margin-left, 0);
 104             @include size(margin-right, 0);
 105         }
 106
 107         /* We want submenu on far left on small screens. */
 108         .hidden-box-wrapper {
 109             position: static;
 110             @media screen and (min-width: 24em) {
 111                 position: relative;
 112             }
 113         }
 114
 115         #user-menu {
 116             display: none;
 117
 118             text-align: left;
 119             line-height:1.6em;
 120             left: 0;
 121             right: 0;
 122             top: 2em;
 123
 124             @media screen and (min-width: 15em) {
 125                 right: auto;
 126                 width: 15em;
 127             }
 128
 129             a {
 130                 color: #0D7E85;
 131             }
 132         }
 133     }
 134
 135     form#search-area {
 136         position: relative;
 137         clear: both;
 138         @include size(height, 45px);
 139         background: #444444;
 140         color: white;
 141
 142         @media screen and (min-width: 62.5em) {
 143             position: absolute;
 144             @include size(top, 49px);
 145             @include size(left, 240px);
 146             @include size(right, 0);
 147         }
 148
 149         #search-field {
 150             position: absolute;
 151             @include size(top, 5px);
 152             @include size(left, 5px);
 153             @include size(right, 113px);
 154
 155             label {
 156                 @include hidden-label;
 157             }
 158             input#search {
 159                 z-index: 200;
 160                 position: relative;
 161                 @include size(height, 33px);
 162                 width: 100%;
 163                 padding: 0;
 164                 @include size(padding-left, 13px);
 165                 @include size(line-height, 32.5px);
 166
 167                 border: none;
 168                 @include size(border-radius, 5px);
 169                 @include box-shadow(0 0 6.5px #444444 inset);
 170
 171                 font-family: Georgia;
 172                 @include size(font-size, 13px);
 173                 background-color: white;
 174                 color: black;
 175
 176                 /* styling search placeholder */
 177                 &::placeholder
 178                 {
 179                     font-family: Georgia;
 180                     font-style: italic;
 181                     color: #767676;
 182                 }
 183                 &::-webkit-input-placeholder
 184                 {
 185                     font-family: Georgia;
 186                     font-style: italic;
 187                     color: #767676;
 188                 }
 189                 &::-moz-placeholder
 190                 {
 191                     font-family: Georgia;
 192                     font-style: italic;
 193                     color: #767676;
 194                 }
 195             }
 196         }
 197         button {
 198             display: inline-block;
 199             position: absolute;
 200             top: 0;
 201             right: 0;
 202             @include size(height, 45px);
 203             @include size(width, 94px);
 204             margin: 0;
 205             padding: 0;
 206
 207             border: none;
 208
 209             @include mono;
 210             @include size(font-size, 11px);
 211             background: #018189;
 212             color: white;
 213         }
 214     }
 215 }