6e1ee3f6df
I don't install usercss styles much, but I just noticed that the regular button active state was being applied on click. Figured I'd give it its own active state, so I restyled them to use the same transparent background-image method for a gradient. This way, they can have regular transitioned hover states with color/background-color instead of a filter on the whole button, which was kinda odd. Also used the same vertically inverted background-image for active state, similar to what we use for regular buttons. The goal was to fix active state and use different CSS in general, while making them look pretty much the same as they did. I think they're good, but I'm open to any suggestions. Also not sure about disabled state. I see some code for it, but the three states seem like they cover all possible states to me. Not sure why it'd ever really be disabled.
530 lines
10 KiB
CSS
530 lines
10 KiB
CSS
body {
|
|
margin: 0;
|
|
font: 12px arial, sans-serif;
|
|
background: white;
|
|
}
|
|
|
|
a {
|
|
color: #000;
|
|
transition: color .5s;
|
|
text-decoration-skip: ink;
|
|
}
|
|
|
|
a:hover {
|
|
color: #666;
|
|
}
|
|
|
|
img.icon,
|
|
.svg-icon {
|
|
height: 1.4em;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.svg-icon {
|
|
margin-left: 2px;
|
|
fill: #000;
|
|
transition: fill .5s;
|
|
}
|
|
|
|
a:hover .svg-icon {
|
|
fill: #666;
|
|
}
|
|
|
|
input:disabled + span {
|
|
color: rgb(128, 128, 128);
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
height: 100vh;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.header,
|
|
.warnings {
|
|
flex: 0 0 280px;
|
|
box-sizing: border-box;
|
|
padding: 15px;
|
|
border-right: 1px dashed #aaa;
|
|
box-shadow: 0 0 50px -18px black;
|
|
overflow-wrap: break-word;
|
|
overflow-y: auto;
|
|
z-index: 100;
|
|
}
|
|
|
|
.header.meta-init-error {
|
|
display: none;
|
|
}
|
|
|
|
.warnings {
|
|
display: none;
|
|
padding-bottom: 0;
|
|
flex-basis: auto;
|
|
background: #ffe2e2;
|
|
border-right: none;
|
|
border-bottom: 1px dashed #aaa;
|
|
}
|
|
|
|
.has-warnings .warnings {
|
|
display: initial;
|
|
}
|
|
|
|
.warning {
|
|
font-weight: bold;
|
|
font-size: 125%;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.warning pre {
|
|
overflow-wrap: break-word;
|
|
white-space: pre-wrap;
|
|
margin: 1ex 0 0;
|
|
font-weight: normal;
|
|
font-size: 80%;
|
|
}
|
|
|
|
h1 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
h1 small {
|
|
font-size: 0.6em;
|
|
}
|
|
|
|
.meta-version::before {
|
|
content: " v";
|
|
}
|
|
|
|
.actions {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.actions label {
|
|
max-width: -moz-fit-content;
|
|
max-width: fit-content;
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 0.5em 0;
|
|
}
|
|
|
|
.install {
|
|
font-family: Arial, "DejaVu Sans", Verdana, Geneva, sans-serif;
|
|
font-size: 14px;
|
|
background-color: hsl(0, 0%, 33%);
|
|
color: #eee;
|
|
border-radius: 4px;
|
|
padding: 4px 38px 4px 10px;
|
|
position: relative;
|
|
display: inline-block;
|
|
text-shadow: 1px 1px 1px #333;
|
|
-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%);
|
|
transition: color .25s, background-color .25s;
|
|
}
|
|
|
|
.install,
|
|
.install:before {
|
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAeCAYAAAAGos/EAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gINFiccyZ2qfAAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAb0lEQVQY012OwQ3CUAzFnNeMAfsv1hk4VDTm0H6ByMmyLL2U+lRowKobwAVFEEWbwqKIIGDXBTQqBU3VbWYk0CTLIAxNEHI1s5oAYXAYm2AIfZ64Ab1ta4s/yHv908twHB5gqf0Tvyg1l9l3efC9Dw0XRC2vHIXXAAAAAElFTkSuQmCC);
|
|
background-size: 100% 100%;
|
|
background-repeat: repeat-x;
|
|
}
|
|
|
|
.install:hover:not(:disabled) {
|
|
background-color: hsl(0, 0%, 38%);
|
|
color: #fff;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.install:before,
|
|
.install:after {
|
|
content: "";
|
|
vertical-align: middle;
|
|
box-sizing: border-box;
|
|
border-radius: 0 4px 4px 0;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 30px;
|
|
}
|
|
|
|
.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%);
|
|
padding: 5px 8px;
|
|
transition: background-color .25s;
|
|
}
|
|
|
|
.install:before,
|
|
.install:active:before,
|
|
.install:active:hover:before {
|
|
background-color: hsl(176, 50%, 35%);
|
|
}
|
|
|
|
.install:hover:before {
|
|
background-color: hsl(176, 50%, 40%);
|
|
}
|
|
|
|
.install:active,
|
|
.install:active:before {
|
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAeCAYAAAAGos/EAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gINFioX6+ENuQAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAc0lEQVQY003OwQ0CQQxD0edsRBX03xg9cFjBhMPuSOT0ZdmxuS/zesWTzExBI7xlZhrKeeYkmZkH1Icg3Rfs1D98v3Kgj+NSypJlpZWU0tbKKlpVCm0JSyuxPbbnqpiJ0JLr8+w9sbtGxqRFInvYbLiVGX46ECZMv8VvjwAAAABJRU5ErkJggg==);
|
|
background-size: 100% 100%;
|
|
background-repeat: repeat-x;
|
|
}
|
|
|
|
.install:active,
|
|
.install:active:hover {
|
|
background-color: hsl(0, 0%, 33%);
|
|
}
|
|
|
|
.install:after {
|
|
background-image: url(../images/icon/16.png);
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
}
|
|
|
|
.install:disabled {
|
|
opacity: .25;
|
|
color: white;
|
|
cursor: auto;
|
|
}
|
|
|
|
.install.reinstall:after {
|
|
filter: grayscale(100%);
|
|
}
|
|
|
|
.install.reinstall:before,
|
|
.install.reinstall:active:before,
|
|
.install.reinstall:active:hover:before {
|
|
background-color: hsl(0, 0%, 20%);
|
|
}
|
|
|
|
.install.reinstall:hover:before {
|
|
background-color: hsl(0, 0%, 25%);
|
|
}
|
|
|
|
.install.reinstall:hover:before {
|
|
background-color: #444;
|
|
}
|
|
|
|
.install.update:before,
|
|
.install.update:active:before,
|
|
.install.update:active:hover:before {
|
|
background-color: hsl(140, 100%, 13%);
|
|
}
|
|
|
|
.install.update:hover:before {
|
|
background-color: hsl(140, 100%, 18%);
|
|
}
|
|
|
|
.install.update:after {
|
|
filter: hue-rotate(-18deg) brightness(.7) contrast(2);
|
|
}
|
|
|
|
.install.installed,
|
|
h2.installed {
|
|
display: none;
|
|
}
|
|
|
|
h2.installed.active {
|
|
display: inline-block;
|
|
font-weight: bold;
|
|
margin-bottom: 1ex;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.actions label input {
|
|
margin: 0 0.5em 0 0;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.actions label span {
|
|
min-width: 0;
|
|
}
|
|
|
|
.set-update-url {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.set-update-url p {
|
|
word-break: break-all;
|
|
opacity: .5;
|
|
width: 100%;
|
|
margin: .25em 0 .25em;
|
|
}
|
|
|
|
.external {
|
|
text-align: center;
|
|
}
|
|
|
|
.external > * {
|
|
margin: 0 7.5px;
|
|
}
|
|
|
|
li {
|
|
margin-left: -2em;
|
|
}
|
|
|
|
.main {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.main .CodeMirror {
|
|
height: auto;
|
|
border: none;
|
|
}
|
|
|
|
/* spinner-related */
|
|
|
|
.header {
|
|
position: relative;
|
|
}
|
|
|
|
.header:not(.meta-init) > *:not(.lds-spinner),
|
|
.header.meta-init > .lds-spinner {
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
}
|
|
|
|
.header.meta-init > * {
|
|
opacity: 1;
|
|
transition: opacity .5s;
|
|
-webkit-user-select: auto;
|
|
-moz-user-select: auto;
|
|
-ms-user-select: auto;
|
|
user-select: auto;
|
|
}
|
|
|
|
label {
|
|
padding-left: 16px;
|
|
position: relative;
|
|
}
|
|
/* spinner: https://github.com/loadingio/css-spinner */
|
|
|
|
@keyframes lds-spinner {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@-webkit-keyframes lds-spinner {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.lds-spinner {
|
|
position: absolute;
|
|
width: 200px;
|
|
height: 200px;
|
|
top: 50px;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
opacity: .2;
|
|
transition: opacity .5s;
|
|
}
|
|
.lds-spinner div {
|
|
left: 94px;
|
|
top: 23px;
|
|
position: absolute;
|
|
-webkit-animation: lds-spinner linear 1s infinite;
|
|
animation: lds-spinner linear 1s infinite;
|
|
background: currentColor;
|
|
width: 12px;
|
|
height: 34px;
|
|
border-radius: 20%;
|
|
-webkit-transform-origin: 6px 77px;
|
|
transform-origin: 6px 77px;
|
|
}
|
|
.lds-spinner div:nth-child(1) {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
-webkit-animation-delay: -0.916666666666667s;
|
|
animation-delay: -0.916666666666667s;
|
|
}
|
|
.lds-spinner div:nth-child(2) {
|
|
-webkit-transform: rotate(30deg);
|
|
transform: rotate(30deg);
|
|
-webkit-animation-delay: -0.833333333333333s;
|
|
animation-delay: -0.833333333333333s;
|
|
}
|
|
.lds-spinner div:nth-child(3) {
|
|
-webkit-transform: rotate(60deg);
|
|
transform: rotate(60deg);
|
|
-webkit-animation-delay: -0.75s;
|
|
animation-delay: -0.75s;
|
|
}
|
|
.lds-spinner div:nth-child(4) {
|
|
-webkit-transform: rotate(90deg);
|
|
transform: rotate(90deg);
|
|
-webkit-animation-delay: -0.666666666666667s;
|
|
animation-delay: -0.666666666666667s;
|
|
}
|
|
.lds-spinner div:nth-child(5) {
|
|
-webkit-transform: rotate(120deg);
|
|
transform: rotate(120deg);
|
|
-webkit-animation-delay: -0.583333333333333s;
|
|
animation-delay: -0.583333333333333s;
|
|
}
|
|
.lds-spinner div:nth-child(6) {
|
|
-webkit-transform: rotate(150deg);
|
|
transform: rotate(150deg);
|
|
-webkit-animation-delay: -0.5s;
|
|
animation-delay: -0.5s;
|
|
}
|
|
.lds-spinner div:nth-child(7) {
|
|
-webkit-transform: rotate(180deg);
|
|
transform: rotate(180deg);
|
|
-webkit-animation-delay: -0.416666666666667s;
|
|
animation-delay: -0.416666666666667s;
|
|
}
|
|
.lds-spinner div:nth-child(8) {
|
|
-webkit-transform: rotate(210deg);
|
|
transform: rotate(210deg);
|
|
-webkit-animation-delay: -0.333333333333333s;
|
|
animation-delay: -0.333333333333333s;
|
|
}
|
|
.lds-spinner div:nth-child(9) {
|
|
-webkit-transform: rotate(240deg);
|
|
transform: rotate(240deg);
|
|
-webkit-animation-delay: -0.25s;
|
|
animation-delay: -0.25s;
|
|
}
|
|
.lds-spinner div:nth-child(10) {
|
|
-webkit-transform: rotate(270deg);
|
|
transform: rotate(270deg);
|
|
-webkit-animation-delay: -0.166666666666667s;
|
|
animation-delay: -0.166666666666667s;
|
|
}
|
|
.lds-spinner div:nth-child(11) {
|
|
-webkit-transform: rotate(300deg);
|
|
transform: rotate(300deg);
|
|
-webkit-animation-delay: -0.083333333333333s;
|
|
animation-delay: -0.083333333333333s;
|
|
}
|
|
.lds-spinner div:nth-child(12) {
|
|
-webkit-transform: rotate(330deg);
|
|
transform: rotate(330deg);
|
|
-webkit-animation-delay: 0s;
|
|
animation-delay: 0s;
|
|
}
|
|
@-webkit-keyframes load3 {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
@keyframes load3 {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/************ reponsive layouts ************/
|
|
|
|
@media (max-width:10in) {
|
|
.container {
|
|
flex-direction: column;
|
|
}
|
|
.header {
|
|
flex-basis: auto;
|
|
border-right: none;
|
|
border-bottom: 1px dashed #AAA;
|
|
max-height: 50%;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
}
|
|
.has-warnings .header {
|
|
min-height: 4em;
|
|
max-height: 20%;
|
|
}
|
|
.warnings {
|
|
max-height: 20%;
|
|
}
|
|
.warning:not(:last-child) {
|
|
border-bottom: 1px dashed #b57c7c;
|
|
padding-bottom: 1em;
|
|
}
|
|
.header,
|
|
.warning {
|
|
-webkit-column-count: 3;
|
|
-moz-column-count: 3;
|
|
column-count: 3;
|
|
}
|
|
h1 {
|
|
-webkit-column-span: all;
|
|
column-span: all;
|
|
margin-bottom: .5em;
|
|
}
|
|
.actions {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
.install {
|
|
margin-right: 1em;
|
|
}
|
|
}
|
|
|
|
@media (max-width:7in) {
|
|
.header,
|
|
.warning {
|
|
-webkit-column-count: 2;
|
|
-moz-column-count: 2;
|
|
column-count: 2;
|
|
}
|
|
}
|
|
|
|
@media (max-width:4in) {
|
|
.header {
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
max-height: 100%;
|
|
}
|
|
.header,
|
|
.warning {
|
|
-webkit-column-count: 1;
|
|
-moz-column-count: 1;
|
|
column-count: 1;
|
|
}
|
|
.warning {
|
|
border: none;
|
|
padding-bottom: unset;
|
|
}
|
|
}
|
|
|
|
/* Retina-specific stuff here */
|
|
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
|
|
.install:after {
|
|
background-image: url(../images/icon/32.png);
|
|
background-size: 16px 16px;
|
|
}
|
|
}
|