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

Add prism.js syntax highlighter; now files can be edited "in place" without page reloading; allow ANY characters in the Wi-Fi password (bug 126); change web-app layout: main window isn't scrollable, with scrollable contents.
author Aleksej Bobylev <al.bobylev@gmail.com>
date Fri Apr 24 16:00:14 2015 +0300 (2015-04-24)
parents d0dbe11a2060
children 470ab4241de5
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@437 60 .dark fieldset, .dark .scroll {
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@437 64 .light fieldset, .light .scroll {
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@463 187 /*.light a[data-icon]:not([disabled])::before,
al@463 188 .light button[data-icon]:not([disabled])::before
al@463 189 { color: #333; }*/
al@462 190
al@426 191 .light button[data-icon]::before {
al@426 192 text-shadow: 0 1px 0 hsla(0, 0%, 100%, 0.9); }
al@419 193
al@426 194 .dark [data-icon]:not([disabled])::before, .dark [data-img] {
al@419 195 /* Experimental webkit-only styles */
al@419 196 background-image: -webkit-radial-gradient(25% 25%, #fff, #777);
al@419 197 -webkit-background-clip: text;
al@419 198 -webkit-text-fill-color: transparent;
al@419 199 }
al@462 200
al@419 201 a[data-icon] { white-space: pre-line; }
al@419 202
al@419 203 [data-icon="cancel"]::before, [data-icon="delete"]::before,
al@426 204 [data-icon="remove"]::before, [data-icon="stop"]:not([disabled])::before,
al@419 205 [data-img="help"]::before, [data-img="man"]::before,
al@419 206 [data-img="off"]::before, [data-img="remove"]::before,
al@462 207 [data-img="stop"]::before, [data-icon="pkgib"]::before
al@462 208 {color:#dc322f!important} /*red*/
al@419 209
al@437 210 [data-icon="restart"]:not([disabled])::before, [data-img="conf"]::before,
al@462 211 [data-img="slitaz"]::before
al@462 212 {color:#cb4b16!important} /*orange*/
al@419 213
al@419 214 [data-icon="ok"]::before, [data-icon="run"]::before,
al@426 215 [data-icon="start"]:not([disabled])::before, [data-img="on"]::before,
al@437 216 [data-img="opt"]::before, [data-img="run"]::before, [data-icon="pkgi"]::before,
al@462 217 [data-img="user"]::before {color:#859900!important} /*green*/
al@419 218
al@462 219 [data-img="web"]::before, [data-icon="pkg"]::before
al@462 220 {color:#268bd2!important} /*blue*/
al@419 221
al@420 222 /* disabled buttons with gray icons */
al@426 223 /*.light [disabled][data-icon]::before {color:#888}
al@426 224 .dark [disabled][data-icon]::before {color:#222}*/
al@420 225
al@419 226
al@419 227
al@419 228 /**********
al@419 229 * Inputs *
al@419 230 **********/
al@419 231
al@419 232 .dark textarea { border-color: #2E2E2E; }
al@419 233 .light textarea { border-color: #A3A3A3; }
al@419 234
al@419 235
al@419 236
al@419 237 /***********************
al@419 238 * System memory gauge *
al@419 239 ***********************/
al@419 240
al@419 241 .dark .sysmem { border-color: #2E2E2E; }
al@419 242 .light .sysmem { border-color: #A3A3A3; }
al@419 243
al@437 244
al@437 245 /* Disable some links to root actions */
al@437 246 .light.user [data-root] { color: #999 !important; }
al@437 247 .dark.user [data-root] { color: #666 !important; }
al@437 248 .dark.user [data-root]:before {
al@437 249 color: #666 !important; background: transparent; -webkit-text-fill-color: #666; }