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; }