slitaz-forge diff pangolin/web/HEADER.html @ 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 | |
children | 17ab49508a9f |
line diff
1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 1.2 +++ b/pangolin/web/HEADER.html Thu Mar 16 22:33:19 2017 +0100 1.3 @@ -0,0 +1,252 @@ 1.4 +<!DOCTYPE html> 1.5 +<html lang="en"> 1.6 +<head> 1.7 + <meta charset="utf-8" /> 1.8 + <title>SliTaz Pizza</title> 1.9 +<style type="text/css"> 1.10 +<!-- 1.11 + 1.12 +/* CSS style for SliTaz Pizza */ 1.13 + 1.14 +html { height: 102%; } 1.15 +body { font: 13px sans-serif, vernada, arial; margin: 0; } 1.16 +h1 { margin: 0; padding: 8px; color: #fff; font-size: 20px; } 1.17 +h1 a { color: #fff; text-decoration: none; } 1.18 +h2 { color: #444; } h3 { color: #666; font-size: 130%; } 1.19 +a { text-decoration: underline; color: #215090; } 1.20 +a:hover { text-decoration: none; } 1.21 +img { vertical-align: middle; } 1.22 +h2 img { padding: 0px 6px 6px 0px; } 1.23 +pre img { margin: 2px 0px; } 1.24 + 1.25 +pre { 1.26 + background-color: #f8f8f8; 1.27 + border: 1px solid #ddd; 1.28 + padding: 10px; 1.29 + overflow: auto; 1.30 + font-size: 98%; 1.31 +} 1.32 +table { 1.33 + background-color: #f8f8f8; 1.34 + border: 1px solid #ddd; 1.35 + width: 100%; 1.36 + margin: 0px 0px 20px 0px; 1.37 + padding: 10px; 1.38 +} 1.39 +/* HTML 5 dont allow size="40" but it's buggy on FF 1.40 + * input[type="file"] { width: 240px; margin: 0 5px; } */ 1.41 + 1.42 +/* Header */ 1.43 + 1.44 +#header { 1.45 + background: #351a0a; 1.46 + height: 40px; 1.47 + border-bottom: 8px solid #ffad02; 1.48 + /*border-bottom: 8px solid #d66018;*/ 1.49 +} 1.50 + 1.51 +#header h1 { 1.52 + margin: 0; 1.53 + padding: 8px 0 0 42px; 1.54 + width: 250px; 1.55 +} 1.56 + 1.57 +#header h1 a { 1.58 + color: white; 1.59 + text-decoration: none; 1.60 + font-size: 20px; 1.61 + font-style: italic; 1.62 +} 1.63 + 1.64 +#header h1 a:hover { 1.65 + color: #d66018; 1.66 +} 1.67 + 1.68 +/* Logo */ 1.69 + 1.70 +#logo { 1.71 + background: url(/images/logo.png) no-repeat left; 1.72 + position: absolute; 1.73 + float: left; 1.74 + left: 0px; 1.75 + top: 0px; 1.76 + width: 40px; 1.77 + height: 40px; 1.78 +} 1.79 + 1.80 +/* Header links */ 1.81 + 1.82 +#network { 1.83 + float: right; 1.84 + padding: 12px 5px 0; 1.85 + font-size: 12px; 1.86 +} 1.87 + 1.88 +#network a { 1.89 + padding: 0 4px; 1.90 + color: #fff; 1.91 + font-weight: bold; 1.92 + text-decoration: none; 1.93 +} 1.94 +#network a:hover { color: #cfcfcf; } 1.95 + 1.96 +/* Notification box */ 1.97 + 1.98 +#notify { 1.99 + /*font-weight: bold;*/ 1.100 + background-color: #351a0a; 1.101 + border: 1px solid #ffad02; 1.102 + color: #fff; 1.103 + cursor: help; 1.104 + position: absolute; 1.105 + top: 58px; 1.106 + right: 10px; 1.107 + width: auto; 1.108 + padding: 6px 12px; 1.109 +} 1.110 +#notify img { margin-right: 10px; } 1.111 + 1.112 +/* Content */ 1.113 + 1.114 +#content { 1.115 + margin: 40px auto; 1.116 + text-align: justify; 1.117 + width: 740px; 1.118 +} 1.119 + 1.120 +.note { 1.121 + margin: 20px; 1.122 + padding: 20px; 1.123 + background-color: #eaeaea; 1.124 + border: 2px solid #ccc; 1.125 +} 1.126 + 1.127 +.box { margin: 20px 0; } 1.128 +.next { float: right; } 1.129 + 1.130 +.span-ok { color: green; } 1.131 +.span-red { color: red; } 1.132 +.log-date { color: #666; font-size: 95%; } 1.133 + 1.134 +#packages { 1.135 + width: 100%; 1.136 + height: 260px; 1.137 + overflow: auto; 1.138 + border: 1px solid #ddd; 1.139 + background-color: #f8f8f8; 1.140 +} 1.141 + 1.142 +#packages table { 1.143 + border: 0px solid #fff; 1.144 +} 1.145 + 1.146 +#pkgs-search { 1.147 + width: 100%; 1.148 + max-height: 180px; 1.149 + overflow: auto; 1.150 +} 1.151 + 1.152 +/* Form */ 1.153 + 1.154 +form { display: inline; } 1.155 +input[type="submit"], input[type="text"], textarea, select { 1.156 + color: #444444; 1.157 + border: 1px solid #cccccc; 1.158 + padding: 4px; 1.159 + margin: 4px 0px; 1.160 + font-size: 14px; 1.161 + line-height: 1.2em; 1.162 + background-image: -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5); 1.163 + background-image: -moz-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5); 1.164 + -webkit-appearance: none; 1.165 + -webkit-padding-end: 12px; 1.166 + -webkit-padding-start: 6px; 1.167 +} 1.168 + 1.169 +input[type="text"] { background: #fefefe; border: 2px solid #ccc; 1.170 + width: 460px; } 1.171 +/*input[type="file"] { border: 2px solid #ddd; }*/ 1.172 +/*input[type="checkbox"] { background: #fefefe; }*/ 1.173 + 1.174 +/* Be compatible with old FF and Webkit version. */ 1.175 +input[type="submit"] { 1.176 + -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); 1.177 + -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); 1.178 + box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); 1.179 +} 1.180 + 1.181 +input[type="submit"]:hover { 1.182 + cursor: pointer; 1.183 + color: black; 1.184 +} 1.185 + 1.186 +select { 1.187 + background-image: url(images/down.png), 1.188 + -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5); 1.189 + background-position: center right; 1.190 + background-repeat: no-repeat; 1.191 +} 1.192 + 1.193 +input[type="file"] { 1.194 + width: 576px; 1.195 + z-index: -1; 1.196 + vertical-align: middle; 1.197 + cursor: pointer; 1.198 + margin: 0; 1.199 +} 1.200 + 1.201 +.inputhide { overflow: hidden; width: 420px; } 1.202 + 1.203 +.inputfile { 1.204 + width: 462px; 1.205 + background: #f8f8f8 url(images/open.png) no-repeat center right; 1.206 + z-index: 2; 1.207 + border: 1px solid #ccc; 1.208 + padding: 3px 0px 0px 2px; 1.209 + height: 25px; 1.210 + float: left; 1.211 + margin-top: 4px; 1.212 +} 1.213 + 1.214 +input[type="file"]::-webkit-file-upload-button { 1.215 + float: right; 1.216 +} 1.217 + 1.218 +/* Round corner */ 1.219 + 1.220 +img, pre, table, input, textarea, select, .note, .box, #notify, 1.221 +#packages, #pkgs-search, .inputfile { 1.222 + -moz-border-radius: 4px; 1.223 + -webkit-border-radius: 4px; 1.224 + border-radius: 4px; 1.225 +} 1.226 + 1.227 +/* Footer */ 1.228 + 1.229 +#footer { 1.230 + text-align: center; 1.231 + margin-top: 80px; 1.232 + padding: 20px; 1.233 + /*border-top: 1px solid #ddd;*/ 1.234 + font-size: 90%; 1.235 +} 1.236 + 1.237 +#footer a { padding: 0 2px; } 1.238 +--> 1.239 +</style> 1.240 +</head> 1.241 +<body> 1.242 + 1.243 +<div id="header"> 1.244 + <div id="logo"></div> 1.245 + <div id="network"> 1.246 + <a href="http://www.slitaz.org/">Home</a> 1.247 + <a href="http://scn.slitaz.org/">Community</a> 1.248 + <a href="http://forum.slitaz.org/">Forum</a> 1.249 + <a href="http://pizza.slitaz.me">Pizza</a> 1.250 + </div> 1.251 + <h1><a href="/">SliTaz Pangolin</a></h1> 1.252 +</div> 1.253 + 1.254 +<div id="content"> 1.255 +