slitaz-forge view arm/style.css @ rev 519

arm: New tiny/mobile screen CSS style and improve new standard style
author Christophe Lincoln <pankso@slitaz.org>
date Sun Apr 13 14:21:29 2014 +0200 (2014-04-13)
parents 8ff618229a20
children 67a6e6bce57e
line source
1 /* CSS style for SliTaz Network */
2
3 html { min-height: 102%; }
4 body { font: 13px sans-serif, vernada, arial; margin: 0; }
5 h1 { margin: 0; padding: 8px; color: #fff; font-size: 20px; }
6 h1 a { color: #fff; text-decoration: none; }
7 h2 { color: #444; } h3 { color: #666; font-size: 140%; }
8 h2, h3 { border-bottom: 1px dashed #afafaf; margin-bottom: 5px; }
9 a { text-decoration: underline; color: #215090; }
10 a:hover { text-decoration: none; }
11 img { border: 0pt none; vertical-align: middle; }
12 pre {
13 overflow: auto;
14 font-size: 98%;
15 padding: 10px;
16 }
17 pre img { margin: 4px 4px 4px 0px; }
18
19 /* Header */
20
21 #header {
22 background: #111 url(images/logo.png) no-repeat left;
23 min-height: 40px;
24 }
25
26 #header h1 {
27 margin: 0;
28 padding: 8px 0 8px 42px;
29 width: 280px;
30 font-size: 20px;
31 font-style: italic;
32 }
33
34 #header h1 a {
35 color: white;
36 text-decoration: none;
37 }
38
39 #header h1 a:hover {
40 color: #afafaf;
41 }
42
43 /* Header links */
44
45 #network {
46 float: right;
47 padding: 13px 5px 0;
48 }
49
50 #network a, #network span {
51 padding: 0 4px;
52 color: #fff;
53 font-weight: bold;
54 text-decoration: none;
55 }
56
57 #network a:hover, #network span { color: #afafaf; }
58
59 /* Navigation */
60
61 nav {
62 font-size: 120%;
63 min-height: 54px;
64 background: #ddd;
65 padding: 30px 6% 0;
66 text-align: center;
67 color: #222;
68 border-bottom: 1px solid #afafaf;
69 margin-bottom: 20px;
70 top: 40px;
71 }
72
73 nav ul {
74 margin: 0; padding: 0;
75 list-style: none;
76 }
77 nav li { display: inline; }
78
79 nav a {
80 text-decoration: none;
81 padding: 12px;
82 color: #fff;
83 font-weight: bold;
84 vertical-align: middle;
85 -webkit-transition: background-color 0.6s;
86 transition: background-color 0.5s;
87 }
88
89 .nav1 { background-color: #333; }
90 .nav1:hover { background-color: #128da9; }
91 .nav2 { background-color: #ab3c00; }
92 .nav2:hover { background-color: #ff9b00; }
93 .navpi { background-color: #444; }
94 .navpi:hover { background-color: #bc1142; }
95
96 /* Search */
97
98 #search {
99 position: absolute;
100 right: 20px;
101 top: 60px;
102 }
103
104 #search input[type="text"] {
105 width: 200px;
106 padding: 4px;
107 margin: 4px 0px;
108 font-size: 14px;
109 line-height: 1.2em;
110 background: #fefefe;
111 border: 2px solid #afafaf;
112 -webkit-appearance: none;
113 -webkit-padding-end: 12px;
114 -webkit-padding-start: 6px;
115 }
116
117 /* Content */
118
119 #content {
120 margin: 20px auto;
121 padding: 0 20px;
122 text-align: justify;
123 max-width: 760px;
124 }
125 #content li { list-style-type: square; line-height: 1.6em; }
126
127 .box {
128 padding: 6px;
129 margin: 4px 0px;
130 }
131
132 .box-up, .box-share, .box-rpi {
133 padding: 20px 10px 20px 54px; margin: 20px 0; }
134
135 .box-dl {
136 background: url("images/download.png") no-repeat 12px center;
137 padding: 16px 16px 16px 54px;
138 margin: 20px 60px;
139 }
140
141 .box-up {
142 background: url("images/generic.png") no-repeat 12px center;
143 }
144
145 .box-share {
146 background: url("images/share.png") no-repeat 12px center;
147 }
148
149 .box-rpi {
150 background: url("images/raspberrypi.png") no-repeat 12px center;
151 }
152
153 pre, .box, .box-dl, .box-up, .box-share, .box-rpi {
154 background-color: #efefef;
155 border: 1px solid #ddd;
156 }
157
158 .mobile { display: none !important; }
159 .error { color: red; }
160 .ok { color: green; }
161 .date { color: #666; font-size: 96%; }
162
163 /* Round corner */
164
165 pre, img, .box, .box-dl, .box-up, .box-rpi, input[type="text"],
166 #block_nav, .box-share, nav a {
167 -moz-border-radius: 4px;
168 -webkit-border-radius: 4px;
169 border-radius: 4px;
170 }
171
172 /* Footer */
173
174 #footer {
175 text-align: center;
176 padding: 20px;
177 border-top: 1px solid #ddd;
178 font-size: 90%;
179 }
180
181 #footer a { padding: 0 2px; }