wok-6.x view turbine/stuff/res/theme/design @ rev 20046

Add Turbine v1.0 by The SliTaz DevTeam.
author Leonardo Laporte <hackdorte@yandex.com>
date Thu Aug 31 05:31:36 2017 -0300 (2017-08-31)
parents
children
line source
1 @charset "UTF-8";
2 /* ---------------------------------------------------------------------------
3 * Provided By The SliTaz Development Team.
4 * Copyright (C) 2017 The SliTaz Association.
5 *
6 * This program is free software: you can redistribute it and/or modify
7 * it under the terms of the GNU General Public License as published by
8 * the Free Software Foundation, either version 3 of the License, or
9 * (at your option) any later version.
10 *
11 * This program is distributed in the hope that it will be useful,
12 * but WITHOUT ANY WARRANTY; without even the implied warranty of
13 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
14 * GNU General Public License for more details.
15 *
16 * You should have received a copy of the GNU General Public License
17 * along with this program. If not, see <http://www.gnu.org/licenses/>.
18 *
19 * ---------------------------------------------------------------------------
20 *
21 * @@ Turbine Stylesheet.
22 *
23 * !! YAD with HTML widget support uses only webkit (-webkit-*).
24 * Other options are disposable here. (-o, -moz, -ms ...).
25 *
26 */
28 * {
29 /* Reset Rules */
30 border-width:00px;
31 font-weight:normal;
32 margin:00px auto;
33 outline-style:none;
34 outline-width:00px;
35 padding:00px 00px;
36 text-align:center;
37 text-decoration:none;
38 -webkit-box-sizing:border-box;
39 }
41 a {color:orange;}
42 a:focus, a:hover {color:black;}
44 *:before {
45 content:attr(data-icon);
46 }
48 html, body {
49 background:-webkit-linear-gradient(#D2691E, #B85C1A);
50 color:#FFD3B2;
51 font-family:"monospace", monospace;
52 font-size:12px;
53 letter-spacing:normal;
54 line-height:normal;
55 overflow:hidden;
56 }
58 body {
59 height:519px;
60 position:relative;
61 text-shadow:00px 01px 01px #803F12;
62 width:759px;
63 }
65 br {
66 clear:both;
67 }
69 hr {
70 border-bottom:01px solid #B55B1A;
71 margin:05px auto;
72 width:80%;
73 }
75 table {
76 width:80%;
77 text-align:left;
78 }
79 table td {
80 border-bottom:01px solid #B55B1A;
81 padding:02px 00px;
82 text-align:left;
83 }
85 /* @scheme */
87 header {
88 background-color:#2B3137;
89 border:04px solid #803F12;
90 border-bottom-width:00px;
91 border-radius:100px;
92 margin-top:20px;
93 width:70%;
94 }
96 header, footer {
97 padding:20px 00px;
98 }
100 div#display {
101 border-bottom:04px double RGBA(0,0,0,0.1);
102 border-top:04px double RGBA(0,0,0,0.1);
103 padding-bottom:20px;
104 }
106 aside.l, aside.r {
107 margin-top:20px;
108 width:40%;
109 }
110 aside.l, aside.panel {
111 float:left;
112 }
113 aside.r {
114 float:right;
115 }
116 aside.panel {
117 margin-top:15px;
118 width:32.9%;
119 }
121 [data=center]{
122 background-color:#1C2024;
123 border-bottom:01px solid #CC661D;
124 border-radius:04px;
125 box-shadow:inset 00px 04px 04px 00px #121417;
126 text-shadow:00px 01px 01px #1A1E21;
127 }
128 [data=center] form {
129 padding:10px 00px;
130 }
131 [data=center] form button {
132 background-color:RGBA(255,255,255,0.1);
133 border:04px solid RGBA(255,255,255,0.2);
134 border-radius:100px;
135 color:#FFFFFF;
136 cursor:pointer;
137 font-size:12px;
138 font-weight:bold;
139 margin:07px auto;
140 padding:04% 08%;
141 }
143 [data=center] form button:hover {
144 background-color:RGBA(255,255,255,0.2);
145 border:04px solid RGBA(255,255,255,0.1);
146 }
148 section {
149 margin:10px auto;
150 position:relative;
151 }
152 section#pc {
153 margin:00px auto;
154 padding:02% 04%;
155 width:80%;
156 }
158 footer {
159 bottom:00px;
160 left:00px;
161 letter-spacing:0.50px;
162 line-height:01.125001em;
163 position:absolute;
164 width:759px;
165 }
167 /* @typography */
169 p#user-id {
170 background-color:transparent;
171 border:02px solid RGBA(255,255,255,0.1);
172 border-radius:100px;
173 color:floralwhite;
174 font-size:10px;
175 font-weight:bold;
176 left:04px;
177 padding:04px 08px;
178 position:absolute;
179 text-shadow:none;
180 top:00px;
181 }
182 p#reload {
183 line-height:30px;
184 padding:00px;
185 position:absolute;
186 right:40px;
187 top:00px;
188 width:40px;
189 }
190 p#reload a {
191 color:RGBA(255,255,255,0.5);
192 font-size:30px;
193 text-shadow:none;
194 }
195 p#reload a:focus, p#reload a:hover {
196 color:RGBA(255,255,255,1);
197 }
199 header h1 {
200 background:url("turbine.svg") 50% 50% no-repeat;
201 }
203 header h1, footer h4 {
204 color:#FFFFFF;
205 font-family:"sans";
206 font-weight:bold;
207 }
208 section#pc h1 {
209 font-size:12px;
210 font-weight:bold;
211 }
212 footer h4 {
213 font-size:11px;
214 }
215 footer h5 {
216 font-size:09px;
217 }
219 form#close {
220 line-height:0;
221 position:absolute;
222 top:00px;
223 right:08px;
224 }
225 form#close button {
226 background-color:#2B3137;
227 border:02px solid #803F12;
228 border-bottom-width:00px;
229 border-radius:100%;
230 color:#FFFFFF;
231 cursor:pointer;
232 display:table;
233 font-size:14px;
234 font-weight:bold;
235 height:30px;
236 line-height:29px;
237 width:30px;
238 }
240 /* @extra */
242 .date {
243 color:black;
244 text-shadow:none;
245 }
247 header h1 img {
248 margin-right:04px;
249 vertical-align:text-top;
250 }
252 .rs:after {
253 color:#FFFFFF;
254 content:"KB";
255 font-size:10px;
256 margin-left:02px;
257 vertical-align:middle;
258 }
259 .tr {
260 color:#FFFFFF;
261 text-align:right;
262 }
263 .info * {
264 border:01px solid RGBA(255,255,255,0.1);
265 border-radius:100px;
266 color:#FFFFFF;
267 display:table;
268 font-size:10px;
269 font-weight:bolder;
270 letter-spacing:00.100001em;
271 margin-bottom:-10px;
272 padding:04px 16px;
273 }
274 .textup {
275 text-transform:uppercase;
276 }
278 /* @animation */
280 .anibox {
281 background-color:#1C2024;
282 border:06px solid #4C260B;
283 border-radius:100%;
284 box-shadow:00px 12px 20px 00px #4C260B;
285 height:220px;
286 margin-top:60px;
287 position:relative;
288 width:220px;
289 }
291 .ani {
292 left:03px;
293 position:absolute;
294 top:03px;
295 width:200px;
296 }
297 .gear {
298 left:03.5px;
299 position:absolute;
300 top:03.5px;
301 width:200px;
302 }
303 .fix {
304 left:03px;
305 position:absolute;
306 top:03px;
307 width:200px;
308 }
310 .spin {-webkit-animation:spin 0.5s linear infinite;}
311 @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }