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