tazpanel annotate styles/default/tweaks.css @ rev 420

network: things are now successfull: connect to Ethernet or {new or stored} Wi-Fi, re-connect Ethernet <-> Wi-Fi without previously stopping, start and stop Ethernet or Wi-Fi connections. Seems network part of TazPanel is fully workable now.
author Aleksej Bobylev <al.bobylev@gmail.com>
date Wed Mar 25 00:38:04 2015 +0200 (2015-03-25)
parents 299f204b8f1f
children 7488b357abd3
rev   line source
al@419 1 /**
al@419 2 * CSS style for TazPanel - (C) 2011-2015 SliTaz GNU/Linux
al@419 3 */
al@419 4
al@419 5
al@419 6 body.light { background: #EBEBEB; }
al@419 7 body.dark { background: #3C3C3C; }
al@419 8
al@419 9
al@419 10
al@419 11 /*********************
al@419 12 * Toolbar with menu *
al@419 13 *********************/
al@419 14
al@419 15 .dark nav {
al@419 16 background-image: -webkit-linear-gradient(#3B3B3B, #393939);
al@419 17 border-top-color: #454545; border-bottom-color: #313131; } /*ok*/
al@419 18 .light nav {
al@419 19 background-image: -webkit-linear-gradient(#EAEAEA, #E0E0E0);
al@419 20 border-top-color: #F5F5F5; border-bottom-color: #C1C1C1; } /*ok*/
al@419 21
al@419 22
al@419 23
al@419 24 .light #toolbarMenu menu { background-color: #F7F7F7; border-color: #A4A4A4;} /*ok*/
al@419 25 .dark #toolbarMenu menu { background-color: #333333; border-color: #222222;} /*ok*/
al@419 26
al@419 27
al@419 28
al@419 29 /*******************
al@419 30 * Panes, sections *
al@419 31 *******************/
al@419 32
al@419 33 .dark #sidebar, .dark section {
al@419 34 border-color: #2E2E2E; /*ok*/
al@419 35 background-color: #454545; /*ok*/
al@419 36 box-shadow: inset 0 0 0 1pt hsla(0, 0%, 100%, 0.05);
al@419 37 }
al@419 38 .light #sidebar, .light section {
al@419 39 border-color: #A3A3A3; /*ok*/
al@419 40 background-color: #F5F5F5; /*ok*/
al@419 41 box-shadow: inset 1pt 1pt 0 0 #FFF, inset -1pt -1pt 0 0 #EBEBEB; /*ok*/
al@419 42 }
al@419 43
al@419 44 .dark #sidebar, .dark section header {
al@419 45 background-image: -webkit-linear-gradient(hsla(0, 0%, 100%, 0.04), transparent); /*ok*/
al@419 46 }
al@419 47 .light #sidebar, .light section header {
al@419 48 background-image: -webkit-linear-gradient(hsla(0, 0%, 100%, 1), hsla(0, 0%, 100%, 0)); /*ok*/
al@419 49 }
al@419 50
al@419 51 .dark section footer {
al@419 52 background-image: -webkit-linear-gradient(transparent, hsla(0, 0%, 0%, 0.1)); /*ok*/
al@419 53 }
al@419 54 .light section footer {
al@419 55 background-image: -webkit-linear-gradient(transparent, hsla(0, 0%, 0%, 0.1)); /*ok*/
al@419 56 }
al@419 57
al@419 58
al@419 59
al@419 60 .dark fieldset {
al@419 61 border-color: #313131;
al@419 62 box-shadow: inset 1pt 1pt 0 0 #3E3E3E, 1pt 1pt 0 0 #3E3E3E; /*ok*/
al@419 63 }
al@419 64 .light fieldset {
al@419 65 border-color: #C1C1C1; }
al@419 66 .dark legend { background-color: #454545; }
al@419 67
al@419 68
al@419 69
al@419 70 /* Page first header */
al@419 71
al@419 72 .light h2 { color: #333; }
al@419 73 .dark h2 { color: #CCC; }
al@419 74
al@419 75
al@419 76
al@419 77 /* Additional headers (obsolete) */
al@419 78
al@419 79 .light h3 { color: hsla(0, 0%, 0%, 0.7); } /*#444*/
al@419 80 .dark h3 { color: hsla(0, 0%, 100%, 0.7); }
al@419 81 .light h4 { color: hsla(0, 0%, 0%, 0.6); } /*#666*/
al@419 82 .dark h4 { color: hsla(0, 0%, 100%, 0.6); }
al@419 83
al@419 84
al@419 85
al@419 86 /**********
al@419 87 * Tables *
al@419 88 **********/
al@419 89
al@419 90 /* Table Zebra */
al@419 91 .light .zebra tr:nth-child(odd) { background-color: #FFFFFF; } /*ok*/
al@419 92 .light .zebra tr:nth-child(even) { background-color: #ECECEC; } /*ok*/
al@419 93 .dark .zebra tr:nth-child(odd) { background-color: #4C4C4C; } /*ok*/
al@419 94 .dark .zebra tr:nth-child(even) { background-color: #484848; } /*ok*/
al@419 95 .light .zebra thead td {
al@419 96 background-image: -webkit-linear-gradient(#FFFFFF, #FFFFFF 49%, #F4F4F4 50%, #D9D9D9); /*ok*/
al@419 97 border-color: #9C9C9C hsla(0, 0%, 0%, 0.1) #B1B1B1 transparent; /*ok*/
al@419 98 box-shadow: inset 1px 0 0 hsla(0, 0%, 100%, 0.5);
al@419 99 }
al@419 100 .dark .zebra thead td {
al@419 101 background-image: -webkit-linear-gradient(#565656, #515151 49%, #484848 50%, #414141); /*ok*/
al@419 102 border-color: #282828 hsla(0, 0%, 0%, 0.1) #2F2F2F transparent; /*ok*/
al@419 103 box-shadow: inset 1px 0 0 hsla(0, 0%, 100%, 0.1);
al@419 104 }
al@419 105 .dark .zebra thead td:nth-child(1) { box-shadow: none; } /*fix*/
al@419 106
al@419 107
al@419 108
al@419 109 .light .borders.zebra td + td { border-color: #ddd; }
al@419 110 .dark .borders.zebra td + td { border-color: #383838; }
al@419 111
al@419 112 .light .borders tr { border-color: rgba(92, 92, 92, 0.1); }
al@419 113 .dark .borders tr { border-color: #111; }
al@419 114
al@419 115 .light .hborders thead tr { border-color: rgba(92, 92, 92, 0.1); }
al@419 116 .dark .hborders thead tr { border-color: #333; }
al@419 117
al@419 118
al@419 119
al@419 120 /**********************
al@419 121 * Syntax highlighter *
al@419 122 **********************/
al@419 123
al@419 124 .sh-comment, .conf-comment {font-style:italic}
al@419 125
al@419 126 .light .conf-var {color:hsl(40, 100%, 30%)} .dark .conf-var {color:hsl(40, 100%, 50%)} /*brown*/
al@419 127 .light .conf-val {color:hsl(22, 100%, 50%)} .dark .conf-val {color:hsl(22, 100%, 60%)} /*orange*/
al@419 128 .light .conf-comment {color:hsl( 0, 0%, 40%)} .dark .conf-comment {color:hsl( 0, 0%, 50%)} /*gray*/
al@419 129
al@419 130 .light .sh-var {color:hsl(40, 100%, 30%)} .dark .sh-var {color:hsl(40, 100%, 50%)} /*brown*/
al@419 131 .light .sh-val {color:hsl(22, 100%, 50%)} .dark .sh-val {color:hsl(22, 100%, 60%)} /*orange*/
al@419 132 .light .sh-comment {color:hsl( 0, 100%, 35%)} .dark .sh-comment {color:hsl( 0, 100%, 60%)} /*tomato*/
al@419 133
al@419 134
al@419 135
al@419 136 .activity-log { color: #888; }
al@419 137
al@419 138 .light .diff-rm {color:hsl( 0, 100%, 50%)} .dark .diff-rm {color:hsl( 0, 100%, 70%)} /*red*/
al@419 139 .light .diff-add{color:hsl(120, 100%, 40%)} .dark .diff-add{color:hsl(120, 100%, 40%)} /*green*/
al@419 140 .light .diff-at {color:hsl(240, 100%, 50%)} .dark .diff-at {color:hsl(240, 100%, 70%)} /*blue*/
al@419 141
al@419 142 .top { color: #00C800; font-weight: normal; }
al@419 143 .kernel-hex { color: #18A423; }
al@419 144 .kernel-id { color: #287FC7; }
al@419 145 .kernel-id2 { color: #843523; }
al@419 146 .kernel-trace { background-color: red; }
al@419 147
al@419 148 .lsusb-h, .lspci-h, .lsusb-t, .lspci-t { font-weight: bold; }
al@419 149 .light .lsusb-h, .light .lspci-h { color: #800; }
al@419 150 .dark .lsusb-h, .dark .lspci-h { color: #C66; }
al@419 151 .light .lsusb-t, .light .lspci-t { color: #448; }
al@419 152 .dark .lsusb-t, .dark .lspci-t { color: #66C; }
al@419 153
al@419 154 .xlog-timestamp { color: #287FC7; }
al@419 155 .xlog-probed, .xlog-config, .xlog-default, .xlog-cmdline, .xlog-info { color: #5A0; }
al@419 156 .xlog-notice, .xlog-warn { color: #A50; }
al@419 157 .xlog-error, .xlog-ni, .xlog-unknown { color: #F00; }
al@419 158 .xlog { cursor: help; }
al@419 159
al@419 160
al@419 161
al@419 162 /* Misc */
al@419 163
al@419 164 .dark .scroll { border-color: #2E2E2E; }
al@419 165
al@419 166
al@419 167
al@419 168 /***************
al@419 169 * Page footer *
al@419 170 ***************/
al@419 171
al@419 172 .light > footer { border-color: #C1C1C1; background-color: #EBEBEB; color: #888; }
al@419 173 .dark > footer { border-color: #313131; background-color: #3C3C3C; color: #666; }
al@419 174
al@419 175 .light > footer a { color: #666; }
al@419 176 .light > footer a:hover { color: #888; }
al@419 177
al@419 178 .dark > footer a { color: #bbb; }
al@419 179 .dark > footer a:hover { color: #555; }
al@419 180
al@419 181
al@419 182
al@419 183 /**********************
al@419 184 * Buttons with icons *
al@419 185 **********************/
al@419 186
al@419 187 .light .icon:before,
al@419 188 .light .icon2:before,
al@419 189 .light [class|="icon"]:before {
al@419 190 text-shadow: 0 1px 0 hsla(0, 0%, 100%, 0.3), 0 0 3px hsla(0, 0%, 100%, 0.7); }
al@419 191 .dark .icon:before,
al@419 192 .dark .icon2:before {
al@419 193 text-shadow: 0 0 3px hsla(0, 0%, 0%, 0.7), 0 1px 0 hsla(0, 0%, 0%, 0.3); }
al@419 194
al@419 195 .dark.nowebkit [data-icon]::before {
al@419 196 text-shadow:
al@419 197 0 1px 0 hsla(0, 0%, 0%, 0.7), 0 -1px 0 hsla(0, 0%, 0%, 0.4),
al@419 198 1px 0 0 hsla(0, 0%, 0%, 0.4), -1px 0 0 hsla(0, 0%, 0%, 0.4); }
al@419 199 .light button[data-icon]::before, button {
al@419 200 text-shadow:
al@419 201 0 1px 0 hsla(0, 0%, 100%, 0.9) /*, 0 -1px 0 hsla(0, 0%, 100%, 0.6),
al@419 202 1px 0 0 hsla(0, 0%, 100%, 0.6), -1px 0 0 hsla(0, 0%, 100%, 0.6)*/; }
al@419 203
al@419 204 .dark [data-icon]:before, .dark [data-img] {
al@419 205 /* Experimental webkit-only styles */
al@419 206 background-image: -webkit-radial-gradient(25% 25%, #fff, #777);
al@419 207 -webkit-background-clip: text;
al@419 208 -webkit-text-fill-color: transparent;
al@419 209 }
al@419 210 /*.light a[data-icon]:before { color: #333; }*/
al@419 211 a[data-icon] { white-space: pre-line; }
al@419 212
al@419 213 [data-icon="cancel"]::before, [data-icon="delete"]::before,
al@419 214 [data-icon="remove"]::before, [data-icon="stop"]::before,
al@419 215 [data-img="help"]::before, [data-img="man"]::before,
al@419 216 [data-img="off"]::before, [data-img="remove"]::before,
al@419 217 [data-img="stop"]::before {color:#dc322f} /*red*/
al@419 218
al@419 219 [data-icon="restart"]::before, [data-img="conf"]::before {color:#cb4b16} /*orange*/
al@419 220
al@419 221 [data-icon="ok"]::before, [data-icon="run"]::before,
al@419 222 [data-icon="start"]::before, [data-img="on"]::before,
al@419 223 [data-img="opt"]::before, [data-img="run"]::before {color:#859900} /*green*/
al@419 224
al@419 225 [data-img="web"]::before {color:#268bd2} /*blue*/
al@419 226
al@420 227 /* disabled buttons with gray icons */
al@420 228 [disabled][data-icon]:before { color: #888; }
al@420 229
al@419 230
al@419 231
al@419 232 /**********
al@419 233 * Inputs *
al@419 234 **********/
al@419 235
al@419 236 .dark textarea { border-color: #2E2E2E; }
al@419 237 .light textarea { border-color: #A3A3A3; }
al@419 238
al@419 239
al@419 240
al@419 241 /***********************
al@419 242 * System memory gauge *
al@419 243 ***********************/
al@419 244
al@419 245 .dark .sysmem { border-color: #2E2E2E; }
al@419 246 .light .sysmem { border-color: #A3A3A3; }
al@419 247