slitaz-configs view rootfs/usr/share/webhome/app/design/theme.css @ rev 277
Tiny edits
| author | Aleksej Bobylev <al.bobylev@gmail.com> |
|---|---|
| date | Wed Mar 30 01:30:27 2016 +0300 (2016-03-30) |
| parents | 29b1d93039e2 |
| children | d8fd29500d7f |
line source
1 @charset "UTF-8";
2 /* File: theme.css | Layout Design */
4 html,body {
5 background:#0D0E0F;
6 color:#AEAFAF;
7 }
8 a {
9 color:#DB4D23;
10 }
11 .header {
12 background:url(img/cover.jpg) 50% 100% no-repeat;
13 background-size:cover;
14 }
15 .header-bar {
16 color:#FFF;
17 margin:0 10px;
18 }
19 .header-bar:after,.menu-list:after {
20 content:"";
21 display:table;
22 width:100%;
23 clear:both;
24 }
25 .header-bar * {
26 line-height:1;
27 }
28 .header-l,.header-r {
29 float:left;
30 font-size:18px;
31 font-weight:bold;
32 width:50%;
33 padding:4px 0;
34 }
35 .header-l p {
36 display:table;
37 margin:0;
38 border-bottom:4px double #FFF;
39 }
40 .header-r p {
41 text-align:right;
42 padding:12px 0;
43 }
44 .header-r p a {
45 display:inline-table;
46 background:#DB4D23;
47 color:#FFF;
48 font-weight:bold;
49 text-align:center;
50 line-height:2.1em;
51 letter-spacing:4px;
52 width:50px;
53 height:40px;
54 border-radius:4px;
55 }
56 .header-r p a:hover {
57 background:#000;
58 }
59 .header-title {
60 text-align:center;
61 line-height:0;
62 padding:0;
63 }
64 .header-title img {
65 background:#000;
66 padding:10px;
67 margin:0 0 60px 0;
68 border-radius:100%;
69 }
71 p.banner {
72 background:RGBA(0,0,0,.8);
73 color:#FFF;
74 width:70%;
75 margin:0 auto;
76 border-left:20px double #DB4D23;
77 }
79 /* @search */
80 .search {
81 background:#181818;
82 }
83 .search-box {
84 background:url(img/lupa.png) 0 50% no-repeat;
85 color:#FFF;
86 font-family:"Monospace", monospace;
87 font-size:20px;
88 text-indent:50px;
89 padding:40px;
90 width:90%;
91 margin:0 auto;
92 outline:0;
93 overflow-x:hidden;
94 }
95 .search-box:focus {
96 background:#DB4D23 url(img/duckduckgo.png) 95% 50% no-repeat;
97 color:#FFF;
98 text-indent:0;
99 padding:40px 10px;
100 }
102 .footer {
103 padding:4% 0 0 0;
104 }
105 .footer p {
106 color:#555;
107 text-align:center;
108 padding:4px 0;
109 margin:0 auto;
110 }
112 /* menu */
114 aside.menu,
115 aside.social {
116 position:fixed;
117 top:0;right:0;
118 background:#181818;
119 color:#777;
120 width:100%;
121 height:100%;
122 min-height:100%;
123 overflow-x:hidden;
124 overflow-y:scroll;
125 }
126 aside.menu > .body,
127 aside.social > .body {
128 padding:2% 4%;
129 }
130 aside.menu > .body h1,
131 .advanced-features h2 {
132 color:#FFF;
133 padding:10px;
134 margin-bottom:14px;
135 border-bottom:1px solid #DB4D23;
136 }
137 aside.menu > .body h1 small {
138 display:inline-table;
139 background:#222;
140 font-size:10px;
141 vertical-align:middle;
142 padding:4px 10px;
143 border:1px solid #333;
144 }
145 aside.menu > .body > p.sponsor {
146 background:#000;
147 color:#FFF;
148 padding:20px;
149 border:1px dashed #333;
150 }
152 .menu-l,.menu-r {
153 float:left;
154 width:50%;
155 padding:10px 0;
156 }
157 .menu-title {
158 background:#111;
159 margin:0 10px 10px 10px;
160 border:1px dashed #DB4D23;
161 }
162 .menu-items {
163 padding:0;
164 margin:0 11px;
165 }
166 .menu-items li {
167 list-style-type:none;
168 padding:0;
169 }
170 .menu-items li a {
171 display:block;
172 text-align:left;
173 padding:12px 4px;
174 border-bottom:1px solid #000;
175 }
176 .menu-items li a small {
177 display:block;
178 color:#CCC;
179 }
180 .menu-items li a:hover small {
181 color:#000;
182 padding-left:20px;
183 }
184 .menu-items li a:focus,
185 .menu-items li a:hover {
186 background:#DB4D23;
187 color:#FFF;
188 }
189 .menu-items li a:focus:before,
190 .menu-items li a:hover:before {
191 content:"\2771\ ";
192 color:#FFF;
193 margin-right:6px;
194 }
195 .advanced-features {
196 padding:20px;
197 }
199 .button {
200 display:inline-table;
201 background:#DB4D23;
202 color:#FFF;
203 padding:8px;
204 }
205 .closebtn {
206 float:right;
207 background:#DB4D23;
208 color:#FFF;
209 padding:10px;
210 }
211 .closebtn:after {
212 content:" ";
213 display:table;
214 width:100%;
215 clear:both;
216 }
218 /* sponsor */
219 aside.sponsor {
220 position:fixed;
221 top:0;left:0;
222 background:#DB4D23;
223 color:#FFF;
224 width:100%;
225 height:100%;
226 min-height:100%;
227 overflow-x:hidden;
228 overflow-y:scroll;
229 }
230 aside.sponsor > .body {
231 padding:2% 4%;
232 }
233 aside.sponsor > .body h2 {
234 color:#F1B3A0;
235 font-size:42px;
236 padding:20px 10px;
237 margin-bottom:14px;
238 border-bottom:1px solid #DB4D23;
239 }
240 aside.sponsor > .body blockquote {
241 font-size:18px;
242 text-align:left;
243 line-height:2;
244 padding:4%;
245 margin:4% auto 8% auto;
246 border:4px dashed #E9714D;
247 border:2px dashed RGBA(0,0,0,.2);
248 }
249 aside.sponsor a {
250 display:inline-table;
251 background:#E27453;
252 color:#FFF;
253 font-size:14px;
254 padding:10px 20px;
255 margin:0 4px;
256 border:1px solid RGBA(255,255,255,.3);
257 }
258 aside.sponsor a:focus,
259 aside.sponsor a:hover {
260 opacity:.8;
261 }
263 /* Small Desktop | SliTaz ARM | RPI | Mobile */
265 @media all and (max-width:740px){
266 .mobile {
267 display:none;
268 }
269 aside.menu {
270 overflow-x:hidden;
271 overflow-y:scroll;
272 }
273 .menu-l,.menu-r {
274 float:none;
275 width:100%;
276 }
277 [role="button"] {
278 display:block;
279 text-align:left;
280 width:95%;
281 margin:4px auto;
282 }
283 }
285 /* @extra */
286 .border {
287 padding:2px 4px;
288 border:1px solid;
289 }
290 .rights {
291 display:table;
292 margin:10px auto 0 auto!important;
293 border-top:1px solid;
294 }
295 .sharelove {
296 color:#FFF;
297 font-size:20px;
298 text-align:left;
299 line-height:1.3em;
300 }
301 .sharelove:before {
302 padding-right:20px;
303 }
304 .sharelove:after {
305 padding-left:20px;
306 }
307 .sharelove:before,.sharelove:after {
308 color:#DB4D23;
309 content:" // ";
310 }