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, 11);
  73
  74         @media screen and (min-width: 24em) {
  75             @include size-px(padding-top, 6);
  76             @include size-px(font-size, 13);
  77             text-align: right;
  78         }
  79
  80         @media screen and (min-width: 62.5em) {
  81             position: absolute;
  82             @include size-px(top, 10);
  83             @include size-px(left, 255);
  84             @include size-px(margin-left, 0);
  85         }
  86     }
  87
  88     #user-info {
  89         margin-top: 0;
  90         @include size-px(margin-left, 5);
  91         @include size-px(margin-right, 5);
  92         padding-top: 0;
  93         @include mono;
  94         @include size-px(font-size, 10);
  95         position: relative;
  96
  97         @media screen and (min-width: 24em) {
  98             @include size-px(padding-top, 15);
  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-px(margin-left, 0);
 106             @include size-px(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-px(height, 45);
 141         background: #444444;
 142         color: white;
 143
 144         @media screen and (min-width: 62.5em) {
 145             position: absolute;
 146             @include size-px(top, 49);
 147             @include size-px(left, 240);
 148             @include size-px(right, 0);
 149         }
 150
 151         #search-field {
 152             position: absolute;
 153             @include size-px(top, 5);
 154             @include size-px(left, 5);
 155             @include size-px(right, 113);
 156
 157             label {
 158                 @include hidden-label;
 159             }
 160             input#search {
 161                 z-index: 200;
 162                 position: relative;
 163                 @include size-px(height, 33);
 164                 width: 100%;
 165                 padding: 0;
 166                 @include size-px(padding-left, 13);
 167                 @include size-px(line-height, 32.5);
 168
 169                 border: none;
 170                 @include size-px(border-radius, 5);
 171                 box-shadow: 0 0 0.5em #444444 inset;
 172
 173                 font-family: Georgia;
 174                 @include size-px(font-size, 13);
 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-px(height, 45);
 205             @include size-px(width, 94);
 206             margin: 0;
 207             padding: 0;
 208
 209             border: none;
 210
 211             @include mono;
 212             @include size-px(font-size, 11);
 213             background: #018189;
 214             color: white;
 215         }
 216     }
 217 }