There's some work on book page left.
[wolnelektury.git] / 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 }