usercss
This commit is contained in:
narcolepticinsomniac
GitHub
parent
586ad8aad7
commit
b2af8770ee
|
|
@ -1,18 +1,17 @@
|
|||
:root{
|
||||
--install-btn-default: hsl(176, 50%, 35%);
|
||||
--install-btn-default-hover: hsl(176, 50%, 40%);
|
||||
--install-btn-update: hsl(140, 100%, 13%);
|
||||
--install-btn-update-hover: hsl(140, 100%, 18%);
|
||||
--warning-border: hsl(0, 28%, 60%);
|
||||
--warnings-bg: hsl(0, 100%, 94%);
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
font: 12px arial, sans-serif;
|
||||
background: white;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
transition: color .5s;
|
||||
text-decoration-skip: ink;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #666;
|
||||
background: var(--main-bg);
|
||||
}
|
||||
|
||||
img.icon,
|
||||
|
|
@ -23,16 +22,16 @@ img.icon,
|
|||
|
||||
.svg-icon {
|
||||
margin-left: 2px;
|
||||
fill: #000;
|
||||
fill: var(--black);
|
||||
transition: fill .5s;
|
||||
}
|
||||
|
||||
a:hover .svg-icon {
|
||||
fill: #666;
|
||||
fill: var(--gray-lightness-40);
|
||||
}
|
||||
|
||||
input:disabled + span {
|
||||
color: rgb(128, 128, 128);
|
||||
color: var(--truegray);
|
||||
}
|
||||
|
||||
.container {
|
||||
|
|
@ -45,8 +44,8 @@ input:disabled + span {
|
|||
flex: 0 0 280px;
|
||||
box-sizing: border-box;
|
||||
padding: 1rem;
|
||||
border-right: 1px dashed #aaa;
|
||||
box-shadow: 0 0 50px -18px black;
|
||||
border-right: 1px dashed var(--gray-lightness-66);
|
||||
box-shadow: 0 0 50px -18px var(--black);
|
||||
overflow-wrap: break-word;
|
||||
overflow-y: auto;
|
||||
z-index: 100;
|
||||
|
|
@ -60,9 +59,9 @@ input:disabled + span {
|
|||
display: none;
|
||||
padding-bottom: 0;
|
||||
flex-basis: auto;
|
||||
background: #ffe2e2;
|
||||
background: var(--warnings-bg);
|
||||
border-right: none;
|
||||
border-bottom: 1px dashed #aaa;
|
||||
border-bottom: 1px dashed var(--gray-lightness-66);
|
||||
}
|
||||
|
||||
.has-warnings .warnings {
|
||||
|
|
@ -111,19 +110,19 @@ h1 small {
|
|||
.install {
|
||||
font-family: Arial, "DejaVu Sans", Verdana, Geneva, sans-serif;
|
||||
font-size: 14px;
|
||||
background-color: hsl(0, 0%, 33%);
|
||||
color: #eee;
|
||||
background-color: var(--gray-lightness-33);
|
||||
color: var(--gray-lightness-93);
|
||||
border-radius: 4px;
|
||||
padding: 4px 38px 4px 10px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
text-shadow: 1px 1px 1px #333;
|
||||
text-shadow: 1px 1px 1px var(--gray-lightness-20);
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
border-style: none;
|
||||
margin-bottom: 1ex;
|
||||
cursor: pointer;
|
||||
box-shadow: inset 0 -1px 0 0 hsl(0, 0%, 24%), inset 0 1px 0 0 hsl(0, 0%, 30%), inset 1px 0 0 0 hsl(0, 0%, 24%);
|
||||
box-shadow: inset 0 -1px 0 0 var(--gray-lightness-24), inset 0 1px 0 0 var(--gray-lightness-30), inset 1px 0 0 0 var(--gray-lightness-24);
|
||||
transition: color .25s, background-color .25s;
|
||||
}
|
||||
|
||||
|
|
@ -135,8 +134,8 @@ h1 small {
|
|||
}
|
||||
|
||||
.install:hover:not(:disabled) {
|
||||
background-color: hsl(0, 0%, 38%);
|
||||
color: #fff;
|
||||
background-color: var(--gray-lightness-38);
|
||||
color: var(--white);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
|
|
@ -154,8 +153,8 @@ h1 small {
|
|||
}
|
||||
|
||||
.install:before {
|
||||
border-left: 1px solid rgba(0, 0, 0, .3);
|
||||
box-shadow: inset 0 -1px 0 0 hsl(0, 0%, 24%), inset 0 1px 0 0 hsl(0, 0%, 30%), inset -1px 0 0 0 hsl(0, 0%, 38%);
|
||||
border-left: 1px solid var(--black-alpha-3);
|
||||
box-shadow: inset 0 -1px 0 0 var(--gray-lightness-24), inset 0 1px 0 0 var(--gray-lightness-30), inset -1px 0 0 0 var(--gray-lightness-38);
|
||||
padding: 5px 8px;
|
||||
transition: background-color .25s;
|
||||
}
|
||||
|
|
@ -163,11 +162,11 @@ h1 small {
|
|||
.install:before,
|
||||
.install:active:before,
|
||||
.install:active:hover:before {
|
||||
background-color: hsl(176, 50%, 35%);
|
||||
background-color: var(--install-btn-default);
|
||||
}
|
||||
|
||||
.install:hover:before {
|
||||
background-color: hsl(176, 50%, 40%);
|
||||
background-color: var(--install-btn-default-hover);
|
||||
}
|
||||
|
||||
.install:active,
|
||||
|
|
@ -179,7 +178,7 @@ h1 small {
|
|||
|
||||
.install:active,
|
||||
.install:active:hover {
|
||||
background-color: hsl(0, 0%, 33%);
|
||||
background-color: var(--gray-lightness-33);
|
||||
}
|
||||
|
||||
.install:after {
|
||||
|
|
@ -190,7 +189,7 @@ h1 small {
|
|||
|
||||
.install:disabled {
|
||||
opacity: .25;
|
||||
color: white;
|
||||
color: var(--white);
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
|
|
@ -201,25 +200,25 @@ h1 small {
|
|||
.install.reinstall:before,
|
||||
.install.reinstall:active:before,
|
||||
.install.reinstall:active:hover:before {
|
||||
background-color: hsl(0, 0%, 20%);
|
||||
background-color: var(--gray-lightness-20);
|
||||
}
|
||||
|
||||
.install.reinstall:hover:before {
|
||||
background-color: hsl(0, 0%, 25%);
|
||||
background-color: var(--gray-lightness-25);
|
||||
}
|
||||
|
||||
.install.reinstall:hover:before {
|
||||
background-color: #444;
|
||||
background-color: var(--gray-lightness-27);
|
||||
}
|
||||
|
||||
.install.update:before,
|
||||
.install.update:active:before,
|
||||
.install.update:active:hover:before {
|
||||
background-color: hsl(140, 100%, 13%);
|
||||
background-color: var(--install-btn-update);
|
||||
}
|
||||
|
||||
.install.update:hover:before {
|
||||
background-color: hsl(140, 100%, 18%);
|
||||
background-color: var(--install-btn-update-hover);
|
||||
}
|
||||
|
||||
.install.update:after {
|
||||
|
|
@ -281,6 +280,19 @@ li {
|
|||
border: none;
|
||||
}
|
||||
|
||||
/************ CM default ************/
|
||||
.CodeMirror.cm-s-default {
|
||||
background: var(--gray-lightness-93) !important;
|
||||
}
|
||||
|
||||
.CodeMirror.cm-s-default .CodeMirror-gutters {
|
||||
background-color: var(--truegray-alpha-1) !important;
|
||||
border-right: 1px solid var(--truegray-alpha-2) !important;
|
||||
}
|
||||
|
||||
.CodeMirror {
|
||||
outline: none !important;
|
||||
}
|
||||
/* spinner-related */
|
||||
|
||||
#header {
|
||||
|
|
@ -457,7 +469,7 @@ label:not(.unavailable) {
|
|||
#header {
|
||||
flex: 0 1 auto;
|
||||
border-right: none;
|
||||
border-bottom: 1px dashed #AAA;
|
||||
border-bottom: 1px dashed var(--gray-lightness-66);
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
padding: 0;
|
||||
|
|
@ -530,7 +542,7 @@ label:not(.unavailable) {
|
|||
max-height: 20%;
|
||||
}
|
||||
.warning:not(:last-child) {
|
||||
border-bottom: 1px dashed #b57c7c;
|
||||
border-bottom: 1px dashed var(--warning-border);
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
ul.applies-to,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user