mirror of
https://shylinux.com/x/volcanos
synced 2025-04-25 08:48:06 +08:00
add cssvar
This commit is contained in:
parent
d276fb2efd
commit
029cbf5de9
106
index.css
106
index.css
@ -147,54 +147,21 @@ fieldset.float>form.option>div.text>span.value { padding:7px; height:32px; max-w
|
||||
fieldset:not(.float)>form.option>div.text>span.value { display:none; }
|
||||
body.mobile:not(.landscape) fieldset.float>form.option>div.text>span.value { display:none; }
|
||||
/* svg */
|
||||
body { --svg-stroke-width:2; }
|
||||
svg text { font-size:24px; font-family:monospace; }
|
||||
svg rect { stroke-width:2; }
|
||||
svg line { stroke-width:2; }
|
||||
svg path { stroke-width:2; }
|
||||
svg g[font-size] text { font-size:unset; }
|
||||
svg g[stroke-width] rect { stroke-width:unset; }
|
||||
svg g[stroke-width] line { stroke-width:unset; }
|
||||
svg g[stroke-width] path { stroke-width:unset; }
|
||||
svg text { stroke:black; fill:black; }
|
||||
svg rect { stroke:black; fill:white; }
|
||||
svg line { stroke:black; }
|
||||
svg path { stroke:black; }
|
||||
svg g[fill] text { fill:unset; }
|
||||
svg g[fill] rect { fill:unset; }
|
||||
svg rect { stroke-width:var(--svg-stroke-width); }
|
||||
svg line { stroke-width:var(--svg-stroke-width); }
|
||||
svg path { stroke-width:var(--svg-stroke-width); }
|
||||
svg text { stroke:var(--body-fg-color); fill:var(--body-fg-color); }
|
||||
svg rect { stroke:var(--body-fg-color); fill:var(--output-bg-color); }
|
||||
svg line { stroke:var(--body-fg-color); }
|
||||
svg path { stroke:var(--body-fg-color);; }
|
||||
svg g[stroke] text { stroke:unset; }
|
||||
svg g[stroke] rect { stroke:unset; }
|
||||
svg g[stroke] line { stroke:unset; }
|
||||
svg g[stroke] path { stroke:unset; }
|
||||
body.dark svg text { stroke:silver; fill:silver; }
|
||||
body.dark svg rect { stroke:silver; fill:black; }
|
||||
body.dark svg line { stroke:silver; }
|
||||
body.dark svg path { stroke:silver; }
|
||||
body.dark svg g[fill] text { fill:unset; }
|
||||
body.dark svg g[fill] rect { fill:unset; }
|
||||
body.dark svg g[stroke] text { stroke:unset; }
|
||||
body.dark svg g[stroke] rect { stroke:unset; }
|
||||
body.dark svg g[stroke] line { stroke:unset; }
|
||||
body.dark svg g[stroke] path { stroke:unset; }
|
||||
body.black svg text { stroke:cyan; fill:cyan; }
|
||||
body.black svg rect { stroke:cyan; fill:transparent; }
|
||||
body.black svg line { stroke:cyan; }
|
||||
body.black svg path { stroke:cyan; }
|
||||
body.black svg g[fill] text { fill:unset; }
|
||||
body.black svg g[fill] rect { fill:unset; }
|
||||
body.black svg g[stroke] text { stroke:unset; }
|
||||
body.black svg g[stroke] rect { stroke:unset; }
|
||||
body.black svg g[stroke] line { stroke:unset; }
|
||||
body.black svg g[stroke] path { stroke:unset; }
|
||||
body.white svg text { stroke:black; fill:black; }
|
||||
body.white svg rect { stroke:black; fill:transparent; }
|
||||
body.white svg line { stroke:black; }
|
||||
body.white svg path { stroke:black; }
|
||||
body.white svg g[fill] text { fill:unset; }
|
||||
body.white svg g[fill] rect { fill:unset; }
|
||||
body.white svg g[stroke] text { stroke:unset; }
|
||||
body.white svg g[stroke] rect { stroke:unset; }
|
||||
body.white svg g[stroke] line { stroke:unset; }
|
||||
body.white svg g[stroke] path { stroke:unset; }
|
||||
svg g[fill] text { fill:unset; }
|
||||
svg g[fill] rect { fill:unset; }
|
||||
/* output */
|
||||
div.project div.list { margin-left:10px; clear:both; }
|
||||
div.project div.item { padding:2px 10px; }
|
||||
@ -241,6 +208,59 @@ fieldset.plug div.output table.content { width:100%; }
|
||||
div.carte.select.float>div.item { text-align:center; }
|
||||
legend, select, input[type=button], th, table.content td, h1, h2, h3, div.item, div.tabs { cursor:pointer; }
|
||||
div.story[data-type=spark] { cursor:copy; }
|
||||
/* theme */
|
||||
body { background-color:var(--body-bg-color); color:var(--body-fg-color); }
|
||||
body legend { background-color:var(--legend-bg-color); border-radius:var(--input-radius); }
|
||||
body legend:hover { color:var(--hover-fg-color) }
|
||||
body select { border-radius:var(--input-radius); }
|
||||
body input { background-color:var(--input-bg-color); color:var(--input-fg-color); border-radius:var(--input-radius); }
|
||||
body input:hover { color:var(--hover-fg-color) }
|
||||
body input:not([type=button]) { border-radius:0; }
|
||||
body input:not([type=button]):hover { border:var(--input-border); }
|
||||
body input:not([type=button]):focus { border:var(--input-border); outline:none; }
|
||||
body textarea { background-color:var(--input-bg-color); color:var(--input-fg-color); }
|
||||
body table.content tr:hover { background-color:var(--tr-hover-bg-color); color:var(--hover-fg-color); }
|
||||
body table.content th { background-color:var(--th-bg-color); color:var(--th-fg-color); }
|
||||
body table.content td:hover { background-color:var(--td-hover-bg-color); }
|
||||
body table.content td.select { background-color:var(--td-hover-bg-color); }
|
||||
body table.content.action td:last-child { background-color:var(--th-bg-color); }
|
||||
body h1:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); }
|
||||
body h2:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); }
|
||||
body h3:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); }
|
||||
body div.item:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); }
|
||||
body div.item.select { background-color:var(--hover-bg-color); color:var(--hover-fg-color); }
|
||||
body span.item:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); }
|
||||
body span.item.select { background-color:var(--hover-bg-color); color:var(--hover-fg-color); }
|
||||
body div.action div.tabs:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); }
|
||||
body div.action div.tabs.select { background-color:var(--hover-bg-color); color:var(--hover-fg-color); }
|
||||
body div.output { background-color:var(--output-bg-color); }
|
||||
body fieldset>div.status { border-top:var(--status-border); }
|
||||
body fieldset:not(.panel) { background-color:var(--plugin-bg-color); border-radius:var(--plugin-radius); }
|
||||
body fieldset.panel:not(.main) { background-color:var(--panel-bg-color); color:var(--panel-fg-color); }
|
||||
body fieldset.panel:not(.main)>div.output { background-color:var(--panel-output-bg-color); color:var(--panel-output-fg-color); }
|
||||
body fieldset.input div.output { background-color:var(--plugin-bg-color); }
|
||||
body fieldset.input tr:hover { background-color:var(--tr-hover-bg-color); }
|
||||
body fieldset.input td:hover { background-color:var(--td-hover-bg-color); }
|
||||
body div.float { background-color:var(--float-bg-color); }
|
||||
body div.carte div.item { background-color:var(--carte-bg-color); }
|
||||
body div.carte div.item:hover { background-color:var(--hover-bg-color); }
|
||||
body div.zone>div.item { background-color:var(--th-bg-color); }
|
||||
body div.zone>div.list>div.zone>div.item { background-color:var(--th-bg-color); }
|
||||
body div.tabs div { background-color:var(--plugin-bg-color); }
|
||||
body div.tabs div:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); }
|
||||
body div.tabs div.select { background-color:var(--hover-bg-color); color:var(--hover-fg-color); }
|
||||
body div.plug legend { background-color:var(--output-bg-color); }
|
||||
body div.plug legend.select { background-color:var(--plugin-bg-color); }
|
||||
body div.complete>table { background-color:var(--plugin-bg-color); }
|
||||
|
||||
body.light fieldset.panel:not(.main)>div.output div.state:hover { background-color:var(--panel-hover-bg-color); color:var(--panel-hover-fg-color); }
|
||||
body.light fieldset.panel:not(.main)>div.output div.title:hover { background-color:var(--panel-hover-bg-color); color:var(--panel-hover-fg-color); }
|
||||
body.light fieldset.panel:not(.main)>div.output div.menu:hover { background-color:var(--panel-hover-bg-color); color:var(--panel-hover-fg-color); }
|
||||
body.light fieldset.panel:not(.main):not(.auto) div.item:hover { background-color:var(--panel-hover-bg-color); color:var(--panel-hover-fg-color); }
|
||||
body.light fieldset.panel:not(.main):not(.auto) div.item.select { background-color:var(--panel-hover-bg-color); color:var(--panel-hover-fg-color); }
|
||||
body.light fieldset.panel:not(.main):not(.auto) input { background-color:var(--panel-input-bg-color); color:var(--panel-input-fg-color); border-radius:var(--input-radius); }
|
||||
body.light fieldset.panel:not(.main)>div.output>div.item>input::placeholder { background-color:var(--panel-input-bg-color); color:var(--panel-fg-color); }
|
||||
body.light fieldset.panel:not(.main) label { color:var(--panel-fg-color); }
|
||||
/* print */
|
||||
body.print { -webkit-filter: grayscale(100%); }
|
||||
body.print { background-color:white; color:black; }
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user