1
0
Fork 0
mirror of https://github.com/kkapsner/CanvasBlocker synced 2025-07-04 20:46:39 +02:00

Unified action pages and fixed display issues

For #341
This commit is contained in:
kkapsner 2019-05-03 23:17:35 +02:00
parent c870fb6720
commit 6ffd537a58
19 changed files with 69 additions and 143 deletions

View file

@ -62,4 +62,46 @@ input[type=checkbox]:checked::before {
height: 100%;
width: 100%;
vertical-align: top;
}
/* Input stack */
.stackedInputs > * {
display: block;
padding: 0.5em;
margin: 0;
background-color: transparent;
background-image: none;
border: 1px solid var(--stacked-inputs-border-color);
cursor: pointer;
width: 100%;
text-align: left;
height: auto;
z-index: 1;
position: relative;
white-space: nowrap;
color: currentColor;
}
.stackedInputs > * + * {
border-top-width: 0;
}
.stackedInputs > *:first-child {
border-radius: 3px 3px 0 0;
}
.stackedInputs > *:last-child {
border-radius: 0 0 3px 3px;
}
.stackedInputs > *:active, .stackedInputs > *:hover, .stackedInputs > *:focus {
z-index: 10;
background-color: var(--stacked-inputs-focus-color);
}
.stackedInputs > input {
box-sizing: border-box;
cursor: initial;
background-color: var(--input-background-color);
}

View file

@ -1,7 +0,0 @@
.action {
border-color: rgb(255, 0, 255);
}
.action:active, .action:hover, .action:focus {
background-color: rgb(255, 196, 0);
}

View file

@ -4,4 +4,6 @@ body {
--text-color: rgb(102, 42, 34);
--link-color: rgb(5, 197, 188);
--button-background-image: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.1) 100%);
--stacked-inputs-border-color: rgb(255, 0, 255);
--stacked-inputs-focus-color: rgb(255, 196, 0);
}

View file

@ -8,12 +8,4 @@
.hasHiddenActions:hover, .hasHiddenActions .actions {
background-color: rgb(208, 255, 0);
}
.modal button {
border-color: rgb(208, 255, 0);
}
.modal button:active, .modal button:hover, .modal button:focus {
background-color: rgb(208, 255, 0);
}

View file

@ -1,7 +0,0 @@
.action {
border-color: rgb(92, 92, 97);
}
.action:active, .action:hover, .action:focus {
background-color: rgb(92, 92, 97);
}

View file

@ -4,4 +4,6 @@ body {
--text-color: rgb(249, 249, 250);
--link-color: lightblue;
--button-background-image: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.1) 100%);
--stacked-inputs-border-color: rgb(92, 92, 97);
--stacked-inputs-focus-color: rgb(92, 92, 97);
}

View file

@ -8,12 +8,4 @@
.hasHiddenActions:hover, .hasHiddenActions .actions {
background-color: rgb(92, 92, 97);
}
.modal button {
border-color: rgb(92, 92, 97);
}
.modal button:active, .modal button:hover, .modal button:focus {
background-color: rgb(92, 92, 97);
}

View file

@ -1,7 +0,0 @@
.action {
border-color: rgb(185, 185, 185);
}
.action:active, .action:hover, .action:focus {
background-color: rgb(236, 237, 236);
}

View file

@ -4,4 +4,6 @@ body {
--link-color: blue;
--input-background-color: rgb(255, 255, 255);
--button-background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.1) 100%);
--stacked-inputs-border-color: rgb(185, 185, 185);
--stacked-inputs-focus-color: rgb(236, 237, 236);
}

View file

@ -8,12 +8,4 @@
.hasHiddenActions:hover, .hasHiddenActions .actions {
background-color: rgb(236, 237, 236);
}
.modal button {
border-color: rgb(236, 237, 236);
}
.modal button:active, .modal button:hover, .modal button:focus {
background-color: rgb(236, 237, 236);
}

View file

@ -1,7 +0,0 @@
.action {
border-color: rgb(222, 222, 222);
}
.action:active, .action:hover, .action:focus {
background-color: rgb(240, 240, 240);
}

View file

@ -4,4 +4,6 @@ body {
--text-color: rgb(12, 12, 13);
--link-color: blue;
--button-background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.1) 100%);
--stacked-inputs-border-color: rgb(222, 222, 222);
--stacked-inputs-focus-color: rgb(240, 240, 240);
}

View file

@ -8,12 +8,4 @@
.hasHiddenActions:hover, .hasHiddenActions .actions {
background-color: rgb(240, 240, 240);
}
.modal button {
border-color: rgb(240, 240, 240);
}
.modal button:active, .modal button:hover, .modal button:focus {
background-color: rgb(240, 240, 240);
}