Implemented themes
This commit is contained in:
@@ -3,25 +3,27 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium"
|
||||
|
||||
yu { display:block; }
|
||||
|
||||
:root { --background: "#222"; --f_high: "#fff";--f_med: "#777";--f_low: "#444";--f_inv: "#000";--b_high: "#000";--b_med: "#affec7";--b_low: "#000";--b_inv: "#affec7"; }
|
||||
|
||||
#cursor { z-index:899; position: absolute; }
|
||||
#guide { z-index:810;position: absolute; transition: opacity 250ms; opacity: 0}
|
||||
#above { z-index:800; position: absolute; }
|
||||
#below { z-index:799; position: absolute; }
|
||||
|
||||
#ronin { background-color:#ccc; height: 100vh; width:100vw; background-image:url(../media/assets/grid.svg);}
|
||||
#ronin { background:var(--b_low); height: 100vh; width:100vw; background-image:url(../media/assets/grid.svg);}
|
||||
#commander, #hint { width: 100vw;line-height: 40px;-webkit-user-select: none;-webkit-app-region: drag;z-index: 900;height: 40px; font-size:11px; cursor: default;}
|
||||
#commander { z-index: 9000;background: #000;bottom: 0px;position: relative; transition: top 150ms; }
|
||||
#commander input { background: transparent;width: calc(100vw - 30px);display: block;line-height: 40px;font-size: 11px;color: white; margin-left:20px; z-index: 9000;position: relative; }
|
||||
#commander input { background: transparent;width: calc(100vw - 30px);display: block;line-height: 40px;font-size: 11px;color: var(--f_low); margin-left:20px; z-index: 9000;position: relative; }
|
||||
|
||||
#commander.hidden { top:-40px; }
|
||||
#commander.visible { top:0px; }
|
||||
|
||||
#hint { color:#666; padding-left:20px; position: absolute;top: 0px;}
|
||||
#hint b { font-family: 'input_mono_regular'; color:#999;}
|
||||
#hint { color:var(--f_med); padding-left:20px; position: absolute;top: 0px;}
|
||||
#hint b { font-family: 'input_mono_regular'; color:var(--f_low);}
|
||||
#hint i { font-style: italic; }
|
||||
#hint .autocomplete { background:white; color:black; }
|
||||
#hint .autocomplete { background:var(--b_high); color:var(--f_low); }
|
||||
|
||||
#commander #cursor_hint { position: fixed;top: 0px;right: 10px;color: white; padding: 0px 10px; color:#555; font-size:11px; padding-right: 40px; }
|
||||
#commander #cursor_hint { position: fixed;top: 0px;right: 10px;color: var(--f_med); padding: 0px 10px; font-size:11px; padding-right: 40px; }
|
||||
#commander #cursor_hint .mode {}
|
||||
#commander #cursor_hint .zoom::after { content:"*"; }
|
||||
#commander #cursor_hint .pick::after { content:"#"; }
|
||||
@@ -30,10 +32,10 @@ yu { display:block; }
|
||||
#commander #cursor_hint .drag::after { content:"/"; }
|
||||
#commander #cursor_hint .target_above::after { content:"^"; }
|
||||
#commander #cursor_hint .target_below::after { content:"v"; }
|
||||
#commander icon.brush { display: block;width: 40px;height: 40px;position: absolute;top: 0px;right: 0px; }
|
||||
#commander icon.brush icon.primary { display: block;width: 6px;height: 20px;border-radius: 20px;border-style: solid;top: 10px;left: 16px;position: absolute;background: pink;transform: rotate(23deg);}
|
||||
#commander icon.brush icon.secondary { display: block;width: 6px;height: 20px;border-radius: 20px;border-style: solid;top: 10px;left: 24px;position: absolute;background: pink;transform: rotate(23deg);}
|
||||
|
||||
surface { display: block; background:pink; position: absolute; top:0px; transition: all 100ms; }
|
||||
#commander #swatch { background:red; display: block; position:fixed; top:10px; right:10px; width:20px; height:20px; border-radius:10px; }
|
||||
#commander #swatch .primary { background: red;display: block;position: fixed;top: 20px;right: 20px;width: 20px;height: 20px;border-radius: 10px; }
|
||||
|
||||
surface { display: block; background:var(--background); position: absolute; top:0px; transition: all 100ms; }
|
||||
surface .layer { border-radius: 4px; overflow: hidden; width:100%; height:100%;}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user