63bd8677c743cf6dffdce2a2058c12640d5456ef
[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     text-align:center;
41
42     @media screen and (min-width: 62.5em) {
43         position: relative;
44         @include size(height, 94px);
45         @include size(width, 975px);
46         margin: auto;
47     }
48
49     a {
50         color: #17CFDB;
51     }
52
53     #logo {
54         display: block;
55         @include size(height, 94px);
56
57         @media screen and (min-width: 24em) {
58             @include size(width, 173px);
59             float: left;
60         }
61     }
62
63     #tagline {
64         margin-top: 0;
65         @include size(margin-left, 5px);
66         @include size(margin-right, 5px);
67         padding-top: 0;
68         @include size(font-size, 11px);
69
70         @media screen and (min-width: 24em) {
71             @include size(padding-top, 6px);
72             @include size(font-size, 13px);
73             @include size(margin-left, 180px);
74             text-align: right;
75         }
76
77         @media screen and (min-width: 62.5em) {
78             position: absolute;
79             @include size(top, 10px);
80             @include size(left, 255px);
81             @include size(margin-left, 0px);
82         }
83     }
84
85     #user-info {
86         margin-top: 0;
87         @include size(margin-left, 5px);
88         @include size(margin-right, 5px);
89         padding-top: 0;
90         @include mono;
91         @include size(font-size, 10px);
92         position: relative;
93
94         @media screen and (min-width: 24em) {
95             @include size(padding-top, 15px);
96             @include size(margin-left, 180px);
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 }