cookutils: a40d41d389d3 lighttpd/cooker-terminal.css

cookutils view lighttpd/cooker-terminal.css @ rev 1069

lighttpd/index.cgi: tiny edits

author	Aleksej Bobylev <al.bobylev@gmail.com>
date	Wed Jun 06 13:36:05 2018 +0300 (2018-06-06)
parents
children	77291d41f21a

line source

1 /* CSS style for SliTaz Cooker */

3 *{font:14px/18px monospace;margin:0;padding:0}

4 html,body{height:100%;color:#888;background-color:#000}

5 #container {

6 position: relative;

7 min-height: 100%;

8 margin: 0 auto;

12 /* HEADER */

14 header,body>h2{background-color:#333}

15 header h1{display:inline-block;padding:18px 0}

16 header h1,body>h2{white-space:nowrap}

17 body>h2{padding:1rem 0}

18 header h1::before{content:'#! '}

19 header a,body>h2{color:#CCC}

20 .network{float:right}

21 .network a{padding:18px 8px 18px 0}

22 header select, header option {

23 background-color: transparent;

24 color: inherit;

25 border: none;

29 /* FOOTER */

31 footer, div.foot {

32 padding: 18px 0;

33 clear: both;

34 text-align: center;

35 color: #CCC;

36 background-color: #333;

38 position: absolute;

39 bottom: 0;

40 width: 100%;

42 footer a+a::before {

43 display: inline-block;

44 content: ' • ';

45 color: #E81;

49 /* CONTENT */

51 h2,h3{font-weight:bold;background-color:#333}

52 h2::before,h3::before{content:'#'}

53 h2{color:#F0F}

54 h3{color:#FF0}

55 a{display:inline-block;text-decoration:none;color:#00F}

56 a:hover,body>h2:hover{text-decoration:underline}

57 pre {

58 background-color: rgba(0,0,0,0.03);

59 border: 1px solid rgba(0,0,0,0.1);

60 margin: 18px 0 0;

61 overflow: auto;

62 font: 13px/18px monospace;

64 li::before{content:' * '}

65 p{margin-top:18px}

67 main{margin:auto;padding:0 0 54px}

68 section{margin-bottom:18px}

69 #content2, div.list {

70 width: 100%; box-sizing: border-box;

71 max-width: 700px;

72 margin: auto;

73 padding: 18px 0;

75 #info{margin:18px 0}

77 .btnList{margin-bottom:18px}

79 .span-ok { color: #0a0; }

80 .span-red { color: red; }

81 .span-sky { color: blue; }

82 .span-no { color: #d90; }

83 .span-line { color: #888; }

84 .log-date { color: #666; font-size: 95%; }

85 .sh-comment { color: #a00; }

86 .sh-val { color: #e50; font-weight: bold; }

87 .var { color: #05a; }

90 /* Colored log */

92 .log b { font-weight: normal; color: red; }

93 .log u { text-decoration: none; color: darkorange; }

94 .log i { font-style: normal; color: green; }

95 .log em { font-style: normal; background-color: lightsteelblue; font-weight: bold; display: inline-block; width: 100%; }

99 /* Buttons */

101 .button,button{color:#888}

102 .button::before,button::before{content:'['}

103 .button::after,button::after{content:']'}

104 .button.active {

105 color: inherit;

106 border: none;

107 text-decoration: none;

109 .button:hover, button:hover, input:hover {

110 color: #FFF;

111 text-decoration: none;

113 .button[data-acc]::before {

114 content: attr(data-acc);

115 padding:0 8px;

116 background-color: orange;

117 color: #000;

118 display: inline-block;

119 text-transform: uppercase;

121 .btnList .button::after{content:''}

124 /* Search box */

126 .search input{font-size:inherit;font-family:inherit;color:inherit;border:none;height:inherit}

127 .search button{border:0;height:inherit;float:right;background:transparent;cursor:pointer}

133 .log a[name]{text-decoration:none;color:#666}

134 .log a[name]:hover{color:#FFF}

136 .r{float:right}

138 [class*="bigicon-"] {

139 margin: 0.5rem 0;

140 padding: 1rem 0.8rem 1rem 3rem;

141 background-color: hsla(0,0%,100%,0.8);

142 box-shadow: 0 0 3px rgba(0,0,0,0.4);

146 a:target { background-color: yellow; }

149 /* Table */

151 table{width:100%;box-sizing:border-box;border-collapse:collapse}

152 td{vertical-align:top}

153 td:first-child{white-space:nowrap;width:5rem}

154 td+td,th+th { border-left: 1px solid rgba(0,0,0,0.1); }

155 .activity td:first-child, .cooknotes td:first-child, td.m { color: #444; }

156 table td:nth-child(2)::before{content:': '}

157 .activity .r.c20::after{content:' '}

159 div.list td, div.list th { padding: 5px 2px; }

161 .texinfo pre { display: none; }

162 .texinfo pre:target { display: block; }

165 /* HTML5 progress */

167 .meter{height:18px}

168 .meter progress {

169 height: inherit;

170 width: 100%;

171 display: inline-block;

172 vertical-align: middle;

173 border: none;

175 progress {

176 border: 1px solid rgba(0,0,0,0.2);

177 background-color: hsla(0,0%,100%,0.6);

178 box-shadow: inset 0 0 4px rgba(0,0,0,0.1);

179 -webkit-transition: all .5s; transition: all .5s;

181 progress::-webkit-progress-bar {

182 background-color: hsla(0,0%,100%,0.6);

183 box-shadow: inset 0 0 4px rgba(0,0,0,0.1);

185 progress::-webkit-progress-value {

186 background-color: hsla(100,100%,40%,0.7);

187 -webkit-transition: all .5s; transition: all .5s;

189 progress::-moz-progress-bar {

190 background-color: hsla(100,100%,40%,0.7);

191 transition: all .5s;

193 .meter span {

194 display: block;

195 white-space: nowrap;

196 position: relative;

197 margin-top: -18px;

198 text-align: center;

199 color: #000;

205 /* Documents iframe */

207 iframe {

208 border: none;

212 /* Terminal colors */

214 pre.files { background-color: hsla(0,0%,0%,0.8); color: hsla(0,0%,100%,0.9); }

215 pre.files a { text-decoration: none; }

216 .c00 { color: #d3d7cf; } .c01 { color: #555753; }

217 .c10 { color: #cc0000; } .c11 { color: #ef2929; }

218 .c20 { color: #4e9a06; } .c21 { color: #8ae234; }

219 .c30 { color: #c4a000; } .c31 { color: #fce94f; }

220 .c40 { color: #3465a4; } .c41 { color: #729fcf; }

221 .c50 { color: #75507b; } .c51 { color: #ad7fa8; }

222 .c60 { color: #06989a; } .c61 { color: #34e2e2; }

223 .c70 { color: #2e3436; } .c71 { color: #eeeeec; }

224 .c01,.c11,.c21,.c31,.c41,.c51,.c61,.c71 { font-weight: bold; }

226 /* Old webkit-gtk compatibility */

228 header, footer, main {

229 display: block;

233 /* FOLLOWING CSS HAS SOME CHANGES FOR SLITAZ COOKER! */

235 /* http://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript+asciidoc+bash+c+css-extras+diff+ini+markdown+perl+python */

237 * okaidia theme for JavaScript, CSS and HTML

238 * Loosely based on Monokai textmate theme by http://www.monokai.nl/

239 * @author ocodia

241 code[class*="language-"], pre[class*="language-"] {

242 color: #f8f8f2;

243 background: none;

244 text-shadow: 0 1px rgba(0,0,0,0.3);

245 text-align: left;

246 white-space: pre;

247 word-spacing: normal;

248 word-break: normal;

249 word-wrap: normal;

250 -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4;

251 -webkit-hyphens: none; -moz-hyphens: none; hyphens: none;

253 /* Code blocks */

254 pre[class*="language-"] {

255 padding: 1em;

256 margin: .5em 0;

257 overflow: auto;

259 :not(pre) > code[class*="language-"], pre[class*="language-"] {

260 background: #272822;

262 /* Inline code */

263 :not(pre) > code[class*="language-"] {

264 padding: .1em;

265 white-space: normal;

267 .token.comment,.token.prolog,.token.doctype,.token.cdata{color:slategray;}

268 .token.punctuation{color:#f8f8f2;}

269 .namespace{opacity:.7;}

270 .token.property,.token.tag,.token.constant,.token.symbol,.token.deleted{color:#f92672;}

271 .token.boolean,.token.number,.token.coord{color:#ae81ff;}

272 .token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#a6e22e;}

273 .token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.variable{color:#f8f8f2;}

274 .token.atrule,.token.attr-value,.token.function{color:#e6db74;}

275 .token.keyword{color:#66d9ef;}

276 .token.regex,.token.important{color:#fd971f;}

277 .token.important,.token.bold{font-weight:bold;}

278 .token.italic{font-style:italic;}

279 .token.entity{cursor:help;}