slitaz-forge diff people/slitaz.css @ rev 678

Small up to pangolin web interface
author Christophe Lincoln <pankso@slitaz.org>
date Thu Mar 16 22:33:19 2017 +0100 (2017-03-16)
parents c1ac675db867
children 5091de3dc58d
line diff
     1.1 --- a/people/slitaz.css	Mon Jan 05 16:42:02 2015 +0100
     1.2 +++ b/people/slitaz.css	Thu Mar 16 22:33:19 2017 +0100
     1.3 @@ -16,11 +16,13 @@
     1.4  }
     1.5  
     1.6  a { text-decoration: underline; color: #215090; }
     1.7 -a:hover { text-decoration: none; color: blue; }
     1.8 +a:hover { text-decoration: none; }
     1.9  img { border: 0pt none; vertical-align: middle; }
    1.10 -h2 { color: #444; }
    1.11 +h2 { color: #444; font-size: 180%; }
    1.12  h3 { color: #666; font-size: 140%; }
    1.13  h4 { color: #888; font-size: 120%; }
    1.14 +h2, h3 { border-bottom: 1px dashed #afafaf; padding-bottom: 5px; }
    1.15 +li { list-style-type: square; }
    1.16  pre { 
    1.17  	background-color: #f8f8f8; 
    1.18  	border: 1px solid #ddd; 
    1.19 @@ -31,26 +33,32 @@
    1.20  
    1.21  #header { 
    1.22  	height: 40px; 
    1.23 -	background: #222;
    1.24 +	background: #111 url(images/logo.png) no-repeat left;
    1.25  }
    1.26  
    1.27  #header h1 {
    1.28  	margin: 0;
    1.29 -	padding: 8px 0 0 42px;
    1.30 -	width: 250px;
    1.31 +	padding: 8px 0 8px 42px;
    1.32 +	width: 280px;
    1.33 +	font-size: 20px;
    1.34 +	font-style: italic;
    1.35  }
    1.36  
    1.37  #header h1 a { 
    1.38  	color: white; 
    1.39  	text-decoration: none;
    1.40 -	font-size: 20px;
    1.41 -	font-style: italic;
    1.42  }
    1.43  
    1.44  #header h1 a:hover, #network a:hover, #network span { 
    1.45  	color: #afafaf;
    1.46  }
    1.47  
    1.48 +#searchbtn {
    1.49 +	position: absolute;
    1.50 +	right: 8px;
    1.51 +	top: 48px;
    1.52 +}
    1.53 +
    1.54  /* Logo */
    1.55  
    1.56  #logo {
    1.57 @@ -131,16 +139,72 @@
    1.58  	padding: 0;
    1.59  }
    1.60  
    1.61 +.dlbutton { 
    1.62 +	display: inline-block;
    1.63 +	margin: 0.5ex;
    1.64 +	background: #333 url("/images/download-30.png") no-repeat 4px center;
    1.65 +	padding-left: 38px;
    1.66 +	-webkit-transition: background-color 0.6s;
    1.67 +	transition: background-color 0.5s;
    1.68 +}
    1.69 +.dldiv { margin: 30px 0; text-align: center; }
    1.70 +
    1.71 +/* 
    1.72 + * 
    1.73 + * 
    1.74 + * Navigation NG 
    1.75 + * 
    1.76 + * 
    1.77 + * */
    1.78 +
    1.79 +nav {
    1.80 +	font-size: 120%;
    1.81 +	min-height: 100px;
    1.82 +	background: #ddd; 
    1.83 +	padding: 56px 6% 0;
    1.84 +	text-align: center;
    1.85 +	color: #222;
    1.86 +	border-bottom: 1px solid #afafaf;
    1.87 +	top: 40px;
    1.88 +}
    1.89 +
    1.90 +nav ul {
    1.91 +    margin: 0; padding: 0;
    1.92 +    list-style: none;
    1.93 +}
    1.94 +nav li { display: inline; }
    1.95 +
    1.96 +nav a, .dlbutton { 
    1.97 +	text-decoration: none;
    1.98 +	padding: 12px;
    1.99 +	color: #fff; 
   1.100 +	font-weight: bold;
   1.101 +	vertical-align: middle;
   1.102 +	-webkit-transition: background-color 0.6s;
   1.103 +	transition: background-color 0.5s;
   1.104 +}
   1.105 +nav p { padding: 8px; color: #333; font-size: 92%; }
   1.106 +
   1.107 +.nav1 { background-color: #333; }
   1.108 +.nav1:hover { background-color: #128da9; }
   1.109 +.nav2 { background-color: #ab3c00; }
   1.110 +.nav2:hover { background-color: #ff9b00; }
   1.111 +.navpi { background-color: #444; }
   1.112 +.navpi:hover { background-color: #bc1142; }
   1.113 +
   1.114  /* Languages */
   1.115  
   1.116  #lang {
   1.117 -	padding: 6px;
   1.118 -	font-size: 11px;
   1.119 +	padding: 8px;
   1.120 +	font-size: 12px;
   1.121  	position: absolute;
   1.122  	right: 0px;
   1.123 +	color: #666;
   1.124  }
   1.125 +#lang .flag { font-size: 14px; }
   1.126 +#lang .flag:hover { text-decoration: none; }
   1.127  
   1.128 -#lang a {
   1.129 +#lang a, #lang strong,  #lang span {
   1.130  	text-decoration: none;
   1.131  	padding: 0 2px;
   1.132  }
   1.133 @@ -158,9 +222,9 @@
   1.134  	padding: 30px 80px;
   1.135  	text-align: justify;
   1.136  }
   1.137 +#content li { line-height: 1.6em; }
   1.138  
   1.139  .news li {
   1.140 -	list-style-type: square;
   1.141  	border-bottom: 1px dotted #BEBEBE;
   1.142  	margin-left: -25px;
   1.143  	padding: 4px 0px 4px 0px;
   1.144 @@ -177,14 +241,16 @@
   1.145  	background-color: #fbfbfb;
   1.146  	border: 2px solid #ddd;
   1.147  	width: 200px;
   1.148 -	height: 160px;
   1.149 +	height: 140px;
   1.150  	float: right;
   1.151  	text-align: center;
   1.152 -	margin: 10px 0px 20px 20px;
   1.153 +	margin: 20px 0px 20px 20px;
   1.154  }
   1.155  
   1.156  /* Classes */
   1.157  
   1.158 +.mobile { display: none !important; }
   1.159 +
   1.160  .right_box { width: 48%; float: right; }
   1.161  .left_box { width: 48%; float: left; }
   1.162  
   1.163 @@ -196,19 +262,25 @@
   1.164  }
   1.165  
   1.166  .box-dl, .box-up {
   1.167 -	margin: 20px 60px;
   1.168 -	padding: 12px 12px 12px 66px;
   1.169 +	margin: 20px 0;
   1.170  	min-height: 48px;
   1.171  	border: 1px solid #ddd;
   1.172  	vertical-align: middle;
   1.173  }
   1.174  .box-dl {
   1.175 -	background: url("/images/download.png") no-repeat 12px 12px #efefef;
   1.176 +	background: url("/images/download.png") no-repeat 12px center;
   1.177 +	padding: 16px 16px 16px 72px;
   1.178  }
   1.179  .box-up {
   1.180 -	background: url("/images/update.png") no-repeat  center left #efefef;
   1.181 +	background: url("/images/update.png") no-repeat 12px center;
   1.182 +	padding: 16px 16px 16px 62px;
   1.183  }
   1.184 -.box-dl p { color: #456; }
   1.185 +.box-dl a { font-weight: bold; text-decoration: none; }
   1.186 +.dlbutton { padding-left: 38px; }
   1.187 +pre, .box, .box-dl, .box-up, .box-share, .box-rpi {
   1.188 +	background-color: #efefef;
   1.189 +	border: 1px solid #ddd;
   1.190 +}
   1.191  
   1.192  .searchbox { 
   1.193  	margin: 20px 80px; 
   1.194 @@ -229,8 +301,8 @@
   1.195  .activity div { padding: 5px 10px; background: #fff; margin-top: 5px; }
   1.196  .activity p { margin: 0; padding: 5px 10px; font-weight: bold; }
   1.197  .activity a { text-decoration: none; }
   1.198 -.activity ul { list-style-type: none; 
   1.199 -	margin: 4px 0; padding: 0 4px; line-height: 150%; }
   1.200 +.activity ul { margin: 4px 0; padding: 0 4px; line-height: 150%; }
   1.201 +.activity li { list-style-type: none; }
   1.202  .activity_more { text-align: right;  }
   1.203  .activity_more a { font-weight: normal; color: #000; padding: 0 4px; }
   1.204  .activity_more a:hover { text-decoration: underline; }
   1.205 @@ -259,8 +331,8 @@
   1.206  
   1.207  /* Round corner */
   1.208  
   1.209 -#block_nav, pre, .box, .box-dl, .box-up, .searchbox, .button a, #twitter, .activity,
   1.210 -.activity div, #sponsor {
   1.211 +#block_nav, pre, .box, .box-dl, .box-up, .searchbox, .button a, 
   1.212 +#twitter, .activity, .activity div, #sponsor, nav a, .dlbutton {
   1.213  	-moz-border-radius: 4px;
   1.214  	-webkit-border-radius: 4px;
   1.215  	border-radius: 4px;
   1.216 @@ -316,7 +388,7 @@
   1.217  
   1.218  .year:after {
   1.219  	/* content: "2007-2015"; */
   1.220 -	content: "2015";
   1.221 +	content: "2017";
   1.222  }
   1.223  
   1.224  p, li {
   1.225 @@ -325,7 +397,6 @@
   1.226  	hyphens: auto;
   1.227  }
   1.228  
   1.229 -
   1.230  /* --- SEARCH --- */
   1.231  
   1.232  input.gsc-search-button {
   1.233 @@ -364,7 +435,7 @@
   1.234  	border-radius: 12px;
   1.235  	padding-bottom: 8px;
   1.236  	margin: 12px auto;
   1.237 -	webkit-box-shadow: 0 0 6px rgba(0,0,0,0.5);
   1.238 +	-webkit-box-shadow: 0 0 6px rgba(0,0,0,0.5);
   1.239  	-moz-box-shadow: 0 0 6px rgba(0,0,0,0.5);
   1.240  	box-shadow: 0 0 6px rgba(0,0,0,0.5);
   1.241  }