More work on new HTML reader.
[wolnelektury.git] / 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 }