tazpanel diff styles/default/tweaks.css @ rev 419
Bunch of changes. Development in progress, please note it have few known bugs.
author | Aleksej Bobylev <al.bobylev@gmail.com> |
---|---|
date | Tue Mar 24 03:39:08 2015 +0200 (2015-03-24) |
parents | |
children | a279382f786f |
line diff
1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 1.2 +++ b/styles/default/tweaks.css Tue Mar 24 03:39:08 2015 +0200 1.3 @@ -0,0 +1,244 @@ 1.4 +/** 1.5 + * CSS style for TazPanel - (C) 2011-2015 SliTaz GNU/Linux 1.6 + */ 1.7 + 1.8 + 1.9 +body.light { background: #EBEBEB; } 1.10 +body.dark { background: #3C3C3C; } 1.11 + 1.12 + 1.13 + 1.14 +/********************* 1.15 + * Toolbar with menu * 1.16 + *********************/ 1.17 + 1.18 +.dark nav { 1.19 + background-image: -webkit-linear-gradient(#3B3B3B, #393939); 1.20 + border-top-color: #454545; border-bottom-color: #313131; } /*ok*/ 1.21 +.light nav { 1.22 + background-image: -webkit-linear-gradient(#EAEAEA, #E0E0E0); 1.23 + border-top-color: #F5F5F5; border-bottom-color: #C1C1C1; } /*ok*/ 1.24 + 1.25 + 1.26 + 1.27 +.light #toolbarMenu menu { background-color: #F7F7F7; border-color: #A4A4A4;} /*ok*/ 1.28 +.dark #toolbarMenu menu { background-color: #333333; border-color: #222222;} /*ok*/ 1.29 + 1.30 + 1.31 + 1.32 +/******************* 1.33 + * Panes, sections * 1.34 + *******************/ 1.35 + 1.36 +.dark #sidebar, .dark section { 1.37 + border-color: #2E2E2E; /*ok*/ 1.38 + background-color: #454545; /*ok*/ 1.39 + box-shadow: inset 0 0 0 1pt hsla(0, 0%, 100%, 0.05); 1.40 +} 1.41 +.light #sidebar, .light section { 1.42 + border-color: #A3A3A3; /*ok*/ 1.43 + background-color: #F5F5F5; /*ok*/ 1.44 + box-shadow: inset 1pt 1pt 0 0 #FFF, inset -1pt -1pt 0 0 #EBEBEB; /*ok*/ 1.45 +} 1.46 + 1.47 +.dark #sidebar, .dark section header { 1.48 + background-image: -webkit-linear-gradient(hsla(0, 0%, 100%, 0.04), transparent); /*ok*/ 1.49 +} 1.50 +.light #sidebar, .light section header { 1.51 + background-image: -webkit-linear-gradient(hsla(0, 0%, 100%, 1), hsla(0, 0%, 100%, 0)); /*ok*/ 1.52 +} 1.53 + 1.54 +.dark section footer { 1.55 + background-image: -webkit-linear-gradient(transparent, hsla(0, 0%, 0%, 0.1)); /*ok*/ 1.56 +} 1.57 +.light section footer { 1.58 + background-image: -webkit-linear-gradient(transparent, hsla(0, 0%, 0%, 0.1)); /*ok*/ 1.59 +} 1.60 + 1.61 + 1.62 + 1.63 +.dark fieldset { 1.64 + border-color: #313131; 1.65 + box-shadow: inset 1pt 1pt 0 0 #3E3E3E, 1pt 1pt 0 0 #3E3E3E; /*ok*/ 1.66 +} 1.67 +.light fieldset { 1.68 + border-color: #C1C1C1; } 1.69 +.dark legend { background-color: #454545; } 1.70 + 1.71 + 1.72 + 1.73 +/* Page first header */ 1.74 + 1.75 +.light h2 { color: #333; } 1.76 +.dark h2 { color: #CCC; } 1.77 + 1.78 + 1.79 + 1.80 +/* Additional headers (obsolete) */ 1.81 + 1.82 +.light h3 { color: hsla(0, 0%, 0%, 0.7); } /*#444*/ 1.83 +.dark h3 { color: hsla(0, 0%, 100%, 0.7); } 1.84 +.light h4 { color: hsla(0, 0%, 0%, 0.6); } /*#666*/ 1.85 +.dark h4 { color: hsla(0, 0%, 100%, 0.6); } 1.86 + 1.87 + 1.88 + 1.89 +/********** 1.90 + * Tables * 1.91 + **********/ 1.92 + 1.93 +/* Table Zebra */ 1.94 +.light .zebra tr:nth-child(odd) { background-color: #FFFFFF; } /*ok*/ 1.95 +.light .zebra tr:nth-child(even) { background-color: #ECECEC; } /*ok*/ 1.96 +.dark .zebra tr:nth-child(odd) { background-color: #4C4C4C; } /*ok*/ 1.97 +.dark .zebra tr:nth-child(even) { background-color: #484848; } /*ok*/ 1.98 +.light .zebra thead td { 1.99 + background-image: -webkit-linear-gradient(#FFFFFF, #FFFFFF 49%, #F4F4F4 50%, #D9D9D9); /*ok*/ 1.100 + border-color: #9C9C9C hsla(0, 0%, 0%, 0.1) #B1B1B1 transparent; /*ok*/ 1.101 + box-shadow: inset 1px 0 0 hsla(0, 0%, 100%, 0.5); 1.102 +} 1.103 +.dark .zebra thead td { 1.104 + background-image: -webkit-linear-gradient(#565656, #515151 49%, #484848 50%, #414141); /*ok*/ 1.105 + border-color: #282828 hsla(0, 0%, 0%, 0.1) #2F2F2F transparent; /*ok*/ 1.106 + box-shadow: inset 1px 0 0 hsla(0, 0%, 100%, 0.1); 1.107 +} 1.108 +.dark .zebra thead td:nth-child(1) { box-shadow: none; } /*fix*/ 1.109 + 1.110 + 1.111 + 1.112 +.light .borders.zebra td + td { border-color: #ddd; } 1.113 +.dark .borders.zebra td + td { border-color: #383838; } 1.114 + 1.115 +.light .borders tr { border-color: rgba(92, 92, 92, 0.1); } 1.116 +.dark .borders tr { border-color: #111; } 1.117 + 1.118 +.light .hborders thead tr { border-color: rgba(92, 92, 92, 0.1); } 1.119 +.dark .hborders thead tr { border-color: #333; } 1.120 + 1.121 + 1.122 + 1.123 +/********************** 1.124 + * Syntax highlighter * 1.125 + **********************/ 1.126 + 1.127 +.sh-comment, .conf-comment {font-style:italic} 1.128 + 1.129 +.light .conf-var {color:hsl(40, 100%, 30%)} .dark .conf-var {color:hsl(40, 100%, 50%)} /*brown*/ 1.130 +.light .conf-val {color:hsl(22, 100%, 50%)} .dark .conf-val {color:hsl(22, 100%, 60%)} /*orange*/ 1.131 +.light .conf-comment {color:hsl( 0, 0%, 40%)} .dark .conf-comment {color:hsl( 0, 0%, 50%)} /*gray*/ 1.132 + 1.133 +.light .sh-var {color:hsl(40, 100%, 30%)} .dark .sh-var {color:hsl(40, 100%, 50%)} /*brown*/ 1.134 +.light .sh-val {color:hsl(22, 100%, 50%)} .dark .sh-val {color:hsl(22, 100%, 60%)} /*orange*/ 1.135 +.light .sh-comment {color:hsl( 0, 100%, 35%)} .dark .sh-comment {color:hsl( 0, 100%, 60%)} /*tomato*/ 1.136 + 1.137 + 1.138 + 1.139 +.activity-log { color: #888; } 1.140 + 1.141 +.light .diff-rm {color:hsl( 0, 100%, 50%)} .dark .diff-rm {color:hsl( 0, 100%, 70%)} /*red*/ 1.142 +.light .diff-add{color:hsl(120, 100%, 40%)} .dark .diff-add{color:hsl(120, 100%, 40%)} /*green*/ 1.143 +.light .diff-at {color:hsl(240, 100%, 50%)} .dark .diff-at {color:hsl(240, 100%, 70%)} /*blue*/ 1.144 + 1.145 +.top { color: #00C800; font-weight: normal; } 1.146 +.kernel-hex { color: #18A423; } 1.147 +.kernel-id { color: #287FC7; } 1.148 +.kernel-id2 { color: #843523; } 1.149 +.kernel-trace { background-color: red; } 1.150 + 1.151 +.lsusb-h, .lspci-h, .lsusb-t, .lspci-t { font-weight: bold; } 1.152 +.light .lsusb-h, .light .lspci-h { color: #800; } 1.153 +.dark .lsusb-h, .dark .lspci-h { color: #C66; } 1.154 +.light .lsusb-t, .light .lspci-t { color: #448; } 1.155 +.dark .lsusb-t, .dark .lspci-t { color: #66C; } 1.156 + 1.157 +.xlog-timestamp { color: #287FC7; } 1.158 +.xlog-probed, .xlog-config, .xlog-default, .xlog-cmdline, .xlog-info { color: #5A0; } 1.159 +.xlog-notice, .xlog-warn { color: #A50; } 1.160 +.xlog-error, .xlog-ni, .xlog-unknown { color: #F00; } 1.161 +.xlog { cursor: help; } 1.162 + 1.163 + 1.164 + 1.165 +/* Misc */ 1.166 + 1.167 +.dark .scroll { border-color: #2E2E2E; } 1.168 + 1.169 + 1.170 + 1.171 +/*************** 1.172 + * Page footer * 1.173 + ***************/ 1.174 + 1.175 +.light > footer { border-color: #C1C1C1; background-color: #EBEBEB; color: #888; } 1.176 +.dark > footer { border-color: #313131; background-color: #3C3C3C; color: #666; } 1.177 + 1.178 +.light > footer a { color: #666; } 1.179 +.light > footer a:hover { color: #888; } 1.180 + 1.181 +.dark > footer a { color: #bbb; } 1.182 +.dark > footer a:hover { color: #555; } 1.183 + 1.184 + 1.185 + 1.186 +/********************** 1.187 + * Buttons with icons * 1.188 + **********************/ 1.189 + 1.190 +.light .icon:before, 1.191 +.light .icon2:before, 1.192 +.light [class|="icon"]:before { 1.193 + text-shadow: 0 1px 0 hsla(0, 0%, 100%, 0.3), 0 0 3px hsla(0, 0%, 100%, 0.7); } 1.194 +.dark .icon:before, 1.195 +.dark .icon2:before { 1.196 + text-shadow: 0 0 3px hsla(0, 0%, 0%, 0.7), 0 1px 0 hsla(0, 0%, 0%, 0.3); } 1.197 + 1.198 +.dark.nowebkit [data-icon]::before { 1.199 + text-shadow: 1.200 + 0 1px 0 hsla(0, 0%, 0%, 0.7), 0 -1px 0 hsla(0, 0%, 0%, 0.4), 1.201 + 1px 0 0 hsla(0, 0%, 0%, 0.4), -1px 0 0 hsla(0, 0%, 0%, 0.4); } 1.202 +.light button[data-icon]::before, button { 1.203 + text-shadow: 1.204 + 0 1px 0 hsla(0, 0%, 100%, 0.9) /*, 0 -1px 0 hsla(0, 0%, 100%, 0.6), 1.205 + 1px 0 0 hsla(0, 0%, 100%, 0.6), -1px 0 0 hsla(0, 0%, 100%, 0.6)*/; } 1.206 + 1.207 +.dark [data-icon]:before, .dark [data-img] { 1.208 + /* Experimental webkit-only styles */ 1.209 + background-image: -webkit-radial-gradient(25% 25%, #fff, #777); 1.210 + -webkit-background-clip: text; 1.211 + -webkit-text-fill-color: transparent; 1.212 +} 1.213 +/*.light a[data-icon]:before { color: #333; }*/ 1.214 +a[data-icon] { white-space: pre-line; } 1.215 + 1.216 +[data-icon="cancel"]::before, [data-icon="delete"]::before, 1.217 +[data-icon="remove"]::before, [data-icon="stop"]::before, 1.218 +[data-img="help"]::before, [data-img="man"]::before, 1.219 +[data-img="off"]::before, [data-img="remove"]::before, 1.220 +[data-img="stop"]::before {color:#dc322f} /*red*/ 1.221 + 1.222 +[data-icon="restart"]::before, [data-img="conf"]::before {color:#cb4b16} /*orange*/ 1.223 + 1.224 +[data-icon="ok"]::before, [data-icon="run"]::before, 1.225 +[data-icon="start"]::before, [data-img="on"]::before, 1.226 +[data-img="opt"]::before, [data-img="run"]::before {color:#859900} /*green*/ 1.227 + 1.228 +[data-img="web"]::before {color:#268bd2} /*blue*/ 1.229 + 1.230 + 1.231 + 1.232 +/********** 1.233 + * Inputs * 1.234 + **********/ 1.235 + 1.236 +.dark textarea { border-color: #2E2E2E; } 1.237 +.light textarea { border-color: #A3A3A3; } 1.238 + 1.239 + 1.240 + 1.241 +/*********************** 1.242 + * System memory gauge * 1.243 + ***********************/ 1.244 + 1.245 +.dark .sysmem { border-color: #2E2E2E; } 1.246 +.light .sysmem { border-color: #A3A3A3; } 1.247 +