slitaz-forge view arm/style.css @ rev 682
play.slitaz.me: use header
author | Christophe Lincoln <pankso@slitaz.org> |
---|---|
date | Sun Mar 19 01:29:50 2017 +0100 (2017-03-19) |
parents | f60b8d4347c9 |
children |
line source
1 /* CSS style for SliTaz Network */
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; padding-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; }
19 /* Header */
21 #header {
22 background: #111 url(images/logo.png) no-repeat left;
23 min-height: 40px;
24 }
26 #header h1 {
27 margin: 0;
28 padding: 8px 0 8px 42px;
29 width: 280px;
30 font-size: 20px;
31 font-style: italic;
32 }
34 #header h1 a {
35 color: white;
36 text-decoration: none;
37 }
39 #header h1 a:hover {
40 color: #afafaf;
41 }
43 /* Header links */
45 #network {
46 float: right;
47 padding: 13px 5px 0;
48 }
50 #network a, #network span {
51 padding: 0 4px;
52 color: #fff;
53 font-weight: bold;
54 text-decoration: none;
55 }
57 #network a:hover, #network span { color: #afafaf; }
59 /* Navigation */
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 }
73 nav ul {
74 margin: 0; padding: 0;
75 list-style: none;
76 }
77 nav li { display: inline; }
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.6s;
87 }
88 nav p { padding: 8px; color: #333; font-size: 92%; }
90 .nav1 { background-color: #333; }
91 .nav1:hover { background-color: #128da9; }
92 .nav2 { background-color: #ab3c00; }
93 .nav2:hover { background-color: #ff9b00; }
94 .navpi { background-color: #444; }
95 .navpi:hover { background-color: #bc1142; }
97 /* Search */
99 #search {
100 position: absolute;
101 right: 20px;
102 top: 60px;
103 }
105 #search input[type="text"] {
106 width: 200px;
107 padding: 4px;
108 margin: 4px 0px;
109 font-size: 14px;
110 line-height: 1.2em;
111 background: #fefefe;
112 border: 2px solid #afafaf;
113 -webkit-appearance: none;
114 -webkit-padding-end: 12px;
115 -webkit-padding-start: 6px;
116 }
118 /* Content */
120 #content {
121 margin: 20px auto;
122 padding: 0 20px;
123 text-align: justify;
124 max-width: 760px;
125 }
126 #content li { list-style-type: square; line-height: 1.6em; }
128 .box {
129 padding: 6px;
130 margin: 4px 0px;
131 }
133 .box-up, .box-share, .box-rpi {
134 padding: 20px 10px 20px 54px; margin: 20px 0; }
136 .box-dl {
137 background: url("images/download.png") no-repeat 12px center;
138 padding: 16px 16px 16px 54px;
139 margin: 20px 60px;
140 }
142 .box-up {
143 background: url("images/generic.png") no-repeat 12px center;
144 }
146 .box-share {
147 background: url("images/share.png") no-repeat 12px center;
148 }
150 .box-rpi {
151 background: url("images/raspberrypi.png") no-repeat 12px center;
152 }
154 pre, .box, .box-dl, .box-up, .box-share, .box-rpi {
155 background-color: #efefef;
156 border: 1px solid #ddd;
157 }
159 .mobile { display: none !important; }
160 .error { color: red; }
161 .ok { color: green; }
162 .date { color: #666; font-size: 96%; }
164 /* Round corner */
166 pre, img, .box, .box-dl, .box-up, .box-rpi, input[type="text"],
167 #block_nav, .box-share, nav a {
168 -moz-border-radius: 4px;
169 -webkit-border-radius: 4px;
170 border-radius: 4px;
171 }
173 /* Footer */
175 #footer {
176 text-align: center;
177 padding: 20px;
178 border-top: 1px solid #ddd;
179 font-size: 90%;
180 }
182 #footer a { padding: 0 2px; }