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 +