cookutils diff web/style.css @ rev 891
web/*: update look&feel
author | Aleksej Bobylev <al.bobylev@gmail.com> |
---|---|
date | Fri Mar 17 01:20:30 2017 +0200 (2017-03-17) |
parents | 166a91b87ac8 |
children | 2ff4c8d701d3 |
line diff
1.1 --- a/web/style.css Sat Jul 02 23:45:01 2016 +0300 1.2 +++ b/web/style.css Fri Mar 17 01:20:30 2017 +0200 1.3 @@ -1,46 +1,67 @@ 1.4 /* CSS style for SliTaz Cooker */ 1.5 1.6 -html { min-height: 102%; } 1.7 -body { font: 13px sans-serif, vernada, arial; margin: 0; } 1.8 -h1 { margin: 0; padding: 8px; color: #fff; font-size: 20px; } 1.9 -h1 a { color: #fff; text-decoration: none; } 1.10 -h2 { color: #444; } 1.11 +body { 1.12 + font-family: sans-serif; 1.13 + font-size: 13px; 1.14 + margin: 0; 1.15 + min-height: 100%; 1.16 +/* position: absolute;*/ 1.17 + left: 0; 1.18 + right: 0; 1.19 +} 1.20 +#content2 h2 { 1.21 + color: #444; 1.22 + border-bottom: 2px solid #CCC; 1.23 + height: 100%; 1.24 +} 1.25 h3 { color: #666; font-size: 140%; } 1.26 -a { text-decoration: underline; color: #215090; } 1.27 -a:hover { text-decoration: none; } 1.28 -hr { margin: 0; border: 1px solid #cfcfcf; } 1.29 +a { text-decoration: none; color: #215090; } 1.30 +a:hover { text-decoration: underline; } 1.31 +.files a { text-decoration: none; color: inherit; } 1.32 +.files a:hover { text-decoration: underline; } 1.33 +hr { margin: 0; border: 1px solid #CFCFCF; } 1.34 pre { 1.35 - background-color: #f8f8f8; 1.36 - border: 1px solid #ddd; 1.37 - padding: 10px; 1.38 + background-color: #F8F8F8; 1.39 + border: 1px solid #DDD; 1.40 + padding: 8px; 1.41 overflow: auto; 1.42 - font-size: 96%; 1.43 } 1.44 1.45 /* Header */ 1.46 1.47 #header { 1.48 - color: #fff; 1.49 + color: #FFF; 1.50 background: #222; 1.51 height: 40px; 1.52 - border-bottom: 4px solid #afafaf; 1.53 + border-bottom: 3px solid #AAA; 1.54 } 1.55 1.56 #header h1 { 1.57 margin: 0; 1.58 - /* padding: 8px 0 0 42px; */ 1.59 + padding: 8px 0 0 42px; 1.60 + color: #FFF; 1.61 + font-size: 20px; 1.62 width: 250px; 1.63 } 1.64 +#logo { 1.65 + background: url(/images/logo.png) no-repeat left; 1.66 + position: absolute; 1.67 + float: left; 1.68 + left: 0px; 1.69 + top: 0px; 1.70 + width: 40px; 1.71 + height: 40px; 1.72 +} 1.73 1.74 #header h1 a { 1.75 - color: #fff; 1.76 + color: #FFF; 1.77 text-decoration: none; 1.78 font-size: 20px; 1.79 font-style: italic; 1.80 } 1.81 1.82 #header h1 a:hover, #network a:hover { 1.83 - color: #afafaf; 1.84 + color: #AFAFAF; 1.85 } 1.86 1.87 /* Header links */ 1.88 @@ -53,7 +74,7 @@ 1.89 1.90 #network a { 1.91 padding: 0 4px; 1.92 - color: #fff; 1.93 + color: #FFF; 1.94 font-weight: bold; 1.95 text-decoration: none; 1.96 } 1.97 @@ -61,26 +82,33 @@ 1.98 /* Content */ 1.99 1.100 #content { 1.101 - margin: 40px 80px; 1.102 - text-align: justify; 1.103 + margin: auto; 1.104 + padding: 0.5em; 1.105 +} 1.106 +#content2 { 1.107 + width: 100%; 1.108 + max-width: 700px; 1.109 + margin: auto; 1.110 + padding: 0.5em; 1.111 } 1.112 1.113 -.span-ok { color: #0a0; } 1.114 + 1.115 +.span-ok { color: #0A0; } 1.116 .span-red { color: red; } 1.117 .span-sky { color: blue; } 1.118 -.span-no { color: #d90; } 1.119 +.span-no { color: #D90; } 1.120 .span-line { color: #888; } 1.121 .log-date { color: #666; font-size: 95%; } 1.122 -.sh-comment { color: #a00; } 1.123 -.sh-val { color: #e50; font-weight: bold; } 1.124 -.var { color: #05a; } 1.125 +.sh-comment { color: #A00; } 1.126 +.sh-val { color: #E50; font-weight: bold; } 1.127 +.var { color: #05A; } 1.128 1.129 /* Buttons */ 1.130 1.131 .button { 1.132 - cursor: pointer; 1.133 + display: inline-block; 1.134 padding: 4px; 1.135 - margin: 4px 0px; 1.136 + margin: 2px 0; 1.137 } 1.138 1.139 a.button, .pctbar { 1.140 @@ -88,39 +116,81 @@ 1.141 color: #666; 1.142 } 1.143 1.144 +.pct { 1.145 + background: #9DFF4A; 1.146 + background-image: -webkit-linear-gradient(#CDFFA3, #9DFF4A 40%, #87DB40); 1.147 + background-image: -moz-linear-gradient(#CDFFA3, #9DFF4A 40%, #87DB40); 1.148 + padding: 2px 4px; 1.149 +} 1.150 +.pctbar { overflow: hidden; } 1.151 + 1.152 +.button { 1.153 + text-decoration: none; 1.154 + color: #444; 1.155 + border: 1px solid #666; 1.156 + font-size: 14px; 1.157 + line-height: 1.2em; 1.158 +} 1.159 .button:hover { 1.160 - border: 1px solid #999; 1.161 + color: #000; 1.162 + border-color: #000; 1.163 +} 1.164 +.button.active { 1.165 + /*outline: 1px solid #999; 1.166 + outline-offset: 1px;*/ 1.167 + color: #000; 1.168 + border-color: #000; 1.169 } 1.170 1.171 -.pct { background: #9dff4a; padding: 2px 4px; } 1.172 -.pctbar { overflow: hidden; } 1.173 - 1.174 -.button, .pctbar { 1.175 - border: 1px solid #cccccc; 1.176 +.pctbar { 1.177 + border: 1px solid #AAA; 1.178 font-size: 14px; 1.179 line-height: 1.2em; 1.180 - background-image: -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5); 1.181 - background-image: -moz-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5); 1.182 - -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); 1.183 - -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); 1.184 - box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); 1.185 + background-image: -webkit-linear-gradient(#E5E5E5, #F4F4F4 40%, #FAFAFA); 1.186 + background-image: -moz-linear-gradient(#E5E5E5, #F4F4F4 40%, #FAFAFA); 1.187 } 1.188 - 1.189 /* Round corner */ 1.190 1.191 pre, .button, .pctbar { 1.192 - -moz-border-radius: 4px; 1.193 - -webkit-border-radius: 4px; 1.194 - border-radius: 4px; 1.195 + border-radius: 2px; 1.196 } 1.197 1.198 /* Footer */ 1.199 1.200 #footer { 1.201 text-align: center; 1.202 - padding: 20px; 1.203 - border-top: 1px solid #ddd; 1.204 + padding: 20px 0; 1.205 + border-top: 1px solid #DDD; 1.206 font-size: 90%; 1.207 +/* position: absolute;*/ 1.208 + bottom: 0; 1.209 + left: 0; 1.210 + right: 0; 1.211 } 1.212 1.213 #footer a { padding: 0 2px; } 1.214 + 1.215 +.log a { text-decoration: none; color: #666; } 1.216 +.log a:hover { color: #000; } 1.217 + 1.218 +.activity { padding-left: 0.5em; } 1.219 +.activity li { list-style-type: none; } 1.220 +.activity li::before { color: #666; content: "•"; padding-right: 0.5em; } 1.221 + 1.222 +.r { float: right; } 1.223 + 1.224 +.zebra tr:nth-child(odd) { background-color: #FFFFFF; } 1.225 +.zebra tr:nth-child(even) { background-color: #ECECEC; } 1.226 + 1.227 +.gray { background-color: lightgray; } 1.228 +.gold { background-color: gold; } 1.229 +.green { background-color: greenyellow; } 1.230 +.sky { background-color: skyblue; } 1.231 +.plum { background-color: plum; } 1.232 +.yellow { background-color: yellow; } 1.233 +.khaki { background-color: khaki; } 1.234 +.brown { background-color: sandybrown; } 1.235 + 1.236 +a:target {background-color: yellow; } 1.237 + 1.238 +pre.info { color: #FFF; background-color: #272822; }