manage CSS
This commit is contained in:
narcolepticinsomniac
GitHub
parent
525030c15d
commit
6474eb178a
|
|
@ -5,13 +5,28 @@
|
|||
--name-padding-right: 40px;
|
||||
--actions-width: 75px;
|
||||
--onoffswitch-width: 60px;
|
||||
--manage-zebra-alpha-bg: hsla(0, 0%, 50%, .07);
|
||||
--styles-hidden: hsla(180, 40%, 45%, .3);
|
||||
--usercss-label: hsl(180, 100%, 20%);
|
||||
--exit-filters: hsla(180, 50%, 27%, .5);
|
||||
--exit-filters-hover: hsl(180, 50%, 27%);
|
||||
--tooltip-default-border: hsl(52, 52%, 73%);
|
||||
--tooltip-default-bg: hsl(54, 100%, 92%);
|
||||
--tooltip-action-complete-border: hsl(179, 38%, 66%);
|
||||
--tooltip-action-complete-bg: hsl(166, 100%, 88%);
|
||||
--palered: hsl(0, 81%, 67%);
|
||||
--lightred: hsl(0, 98%, 62%);
|
||||
--red: hsl(0, 100%, 50%);
|
||||
--stylename-manage-hover-text: hsl(180, 100%, 15%);
|
||||
--stylename-hover-garadient-left: hsla(180, 50%, 30%, 0.2);
|
||||
--stylename-hover-garadient-middle: hsla(180, 20%, 10%, 0.05);
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
/* Firefox: fill the entire page for drag'n'drop to work */
|
||||
display: flex;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
#header:lang(ja) h1 {
|
||||
|
|
@ -22,7 +37,7 @@ body.all-styles-hidden-by-filters:before,
|
|||
body.all-styles-hidden-by-filters:after {
|
||||
position: absolute;
|
||||
left: calc(3rem + var(--header-width));
|
||||
color: hsla(180, 40%, 45%, .3);
|
||||
color: var(--styles-hidden);
|
||||
animation: fadein 3s;
|
||||
}
|
||||
|
||||
|
|
@ -38,25 +53,15 @@ body.all-styles-hidden-by-filters:after {
|
|||
top: 3rem;
|
||||
}
|
||||
|
||||
a, .disabled a:hover {
|
||||
color: #000;
|
||||
transition: color .5s;
|
||||
text-decoration-skip: ink;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#header {
|
||||
width: var(--header-width);
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
padding: 1rem;
|
||||
border-right: 1px dashed #AAA;
|
||||
-webkit-box-shadow: 0 0 50px -18px black;
|
||||
box-shadow: 0 0 50px -18px black;
|
||||
border-right: 1px dashed var(--gray-lightness-66);
|
||||
-webkit-box-shadow: 0 0 50px -18px var(--black);
|
||||
box-shadow: 0 0 50px -18px var(--black);
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
z-index: 9;
|
||||
|
|
@ -71,11 +76,6 @@ a:hover {
|
|||
max-width: calc(100% - 30px);
|
||||
}
|
||||
|
||||
#check-all-updates-force {
|
||||
white-space: normal;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#header h1 {
|
||||
margin-top: 0;
|
||||
margin-bottom: .3em;
|
||||
|
|
@ -103,7 +103,7 @@ a:hover {
|
|||
}
|
||||
|
||||
#add-style-as-usercss-wrapper:not(:hover) input:not(:checked) ~ a svg {
|
||||
fill: #aaa;
|
||||
fill: var(--gray-lightness-66);
|
||||
}
|
||||
|
||||
#add-style-as-usercss-wrapper input {
|
||||
|
|
@ -127,7 +127,7 @@ a:hover {
|
|||
.entry {
|
||||
margin: 0;
|
||||
padding: 1.25em 2em;
|
||||
border-top: 1px solid #ddd;
|
||||
border-top: 1px solid var(--gray-lightness-86);
|
||||
}
|
||||
|
||||
.entry:first-child {
|
||||
|
|
@ -140,11 +140,11 @@ a:hover {
|
|||
transition: fill .5s;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: #666;
|
||||
fill: var(--gray-lightness-40);
|
||||
}
|
||||
|
||||
.svg-icon:hover {
|
||||
fill: #000;
|
||||
fill: var(--black);
|
||||
}
|
||||
|
||||
.svg-icon.info {
|
||||
|
|
@ -209,7 +209,7 @@ a:hover {
|
|||
}
|
||||
|
||||
.applies-to .target:hover {
|
||||
background-color: rgba(128, 128, 128, .15);
|
||||
background-color: var(--truegray-alpha-15);
|
||||
}
|
||||
|
||||
.applies-to-extra:not([open]) {
|
||||
|
|
@ -239,7 +239,7 @@ a:hover {
|
|||
font-weight: normal;
|
||||
font-size: 11px;
|
||||
text-transform: lowercase;
|
||||
background: rgba(128, 128, 128, .2);
|
||||
background: var(--truegray-alpha-2);
|
||||
padding: 2px 5px 3px;
|
||||
border-radius: 4px;
|
||||
margin-left: 1ex;
|
||||
|
|
@ -250,8 +250,8 @@ a:hover {
|
|||
|
||||
.entry.usercss .style-name-link::after {
|
||||
content: "usercss";
|
||||
background-color: hsla(180, 100%, 20%, 1);
|
||||
color: white;
|
||||
background-color: var(--usercss-label);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.disabled h2 .style-name-link,
|
||||
|
|
@ -292,8 +292,8 @@ a:hover {
|
|||
padding-top: .1rem;
|
||||
}
|
||||
|
||||
#options-buttons button,
|
||||
#backup-buttons button {
|
||||
#options-buttons > *,
|
||||
#backup-buttons > * {
|
||||
margin: 0 .2rem .5rem 0;
|
||||
}
|
||||
|
||||
|
|
@ -330,7 +330,7 @@ a:hover {
|
|||
}
|
||||
|
||||
#header summary:hover h2 {
|
||||
border-color: #bbb;
|
||||
border-color: var(--gray-lightness-73);
|
||||
}
|
||||
|
||||
/* compact layout */
|
||||
|
|
@ -352,7 +352,7 @@ a:hover {
|
|||
}
|
||||
|
||||
.newUI .entry.odd {
|
||||
background-color: rgba(128, 128, 128, 0.05);
|
||||
background-color: var(--manage-zebra-alpha-bg);
|
||||
}
|
||||
|
||||
.newUI .entry > * {
|
||||
|
|
@ -405,6 +405,8 @@ a:hover {
|
|||
}
|
||||
|
||||
.filter-selection select {
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
height: 18px;
|
||||
border: none;
|
||||
max-width: 100%;
|
||||
|
|
@ -412,6 +414,10 @@ a:hover {
|
|||
padding-right: 14px;
|
||||
}
|
||||
|
||||
.filter-selection select option {
|
||||
background-color: var(--main-bg)
|
||||
}
|
||||
|
||||
.filter-selection .select-arrow {
|
||||
margin-top: 2px;
|
||||
top: 0;
|
||||
|
|
@ -434,7 +440,7 @@ a:hover {
|
|||
|
||||
#filters label:hover,
|
||||
#filters .filter-selection:hover {
|
||||
background-color: hsla(0, 0%, 50%, .2);
|
||||
background-color: var(--truegray-alpha-2);
|
||||
}
|
||||
|
||||
.checkmate {
|
||||
|
|
@ -463,7 +469,7 @@ a:hover {
|
|||
|
||||
.newUI .entry .svg-icon.checked,
|
||||
.newUI .entry:hover .svg-icon.checked {
|
||||
fill: #000;
|
||||
fill: var(--black);
|
||||
}
|
||||
|
||||
.newUI .entry input[type="checkbox"]:not(.slider) {
|
||||
|
|
@ -479,19 +485,26 @@ a:hover {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.newUI .entry .style-name:hover::before {
|
||||
.newUI .entry .style-name::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(to right, hsla(180, 50%, 30%, 0.2), hsla(180, 20%, 10%, 0.05) 50%, transparent);
|
||||
background: linear-gradient(to right, var(--stylename-hover-garadient-left), var(--stylename-hover-garadient-middle) 50%, transparent);
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity .1s;
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
.newUI .entry .style-name:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.newUI .entry.enabled .style-name:hover .style-name-link {
|
||||
color: hsla(180, 100%, 15%, 1);
|
||||
color: var(--stylename-manage-hover-text);
|
||||
}
|
||||
|
||||
.newUI .style-name:after {
|
||||
|
|
@ -526,15 +539,15 @@ a:hover {
|
|||
}
|
||||
|
||||
.newUI .entry .svg-icon {
|
||||
fill: #999;
|
||||
fill: var(--gray-lightness-60);
|
||||
}
|
||||
|
||||
.newUI .entry:hover .svg-icon {
|
||||
fill: #666;
|
||||
fill: var(--gray-lightness-40);
|
||||
}
|
||||
|
||||
.newUI .entry:hover .svg-icon:hover {
|
||||
fill: #000;
|
||||
fill: var(--black);
|
||||
}
|
||||
|
||||
.newUI .checking-update .check-update {
|
||||
|
|
@ -570,17 +583,17 @@ a:hover {
|
|||
|
||||
.newUI .can-update[data-details$="locally edited"] .update svg,
|
||||
.newUI .update-problem .check-update svg {
|
||||
fill: #ef6969;
|
||||
fill: var(--palered);
|
||||
}
|
||||
|
||||
.newUI .can-update[data-details$="locally edited"]:hover .update svg,
|
||||
.newUI .entry.update-problem:hover .check-update svg {
|
||||
fill: #fd4040;
|
||||
fill: var(--lightred);
|
||||
}
|
||||
|
||||
.newUI .can-update[data-details$="locally edited"]:hover .update svg:hover,
|
||||
.newUI .entry.update-problem:hover .check-update svg:hover {
|
||||
fill: red;
|
||||
fill: var(--red);
|
||||
}
|
||||
|
||||
.newUI .actions {
|
||||
|
|
@ -593,19 +606,19 @@ a:hover {
|
|||
margin-top: 18px;
|
||||
margin-left: -36px;
|
||||
padding: 1ex 1.5ex;
|
||||
border: 1px solid #ded597;
|
||||
background-color: #fffbd6;
|
||||
border: 1px solid var(--tooltip-default-border);
|
||||
background-color: var(--tooltip-default-bg);
|
||||
border-radius: 4px;
|
||||
box-shadow: 2px 3px 10px rgba(0,0,0,.25);
|
||||
box-shadow: 2px 3px 10px var(--black-alpha-25);
|
||||
font-size: 90%;
|
||||
animation: fadeout 10s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.newUI .update-problem .check-update:after {
|
||||
background-color: red;
|
||||
border: 1px solid #d40000;
|
||||
color: white;
|
||||
background-color: var(--red);
|
||||
border: 1px solid var(--darker-red);
|
||||
color: var(--white);
|
||||
animation: none;
|
||||
}
|
||||
|
||||
|
|
@ -614,8 +627,8 @@ a:hover {
|
|||
}
|
||||
|
||||
.newUI .can-update:not([data-details$="locally edited"]) .update:after {
|
||||
background-color: #c0fff0;
|
||||
border: 1px solid #89cac9;
|
||||
background-color: var(--tooltip-action-complete-bg);
|
||||
border: 1px solid var(--tooltip-action-complete-border);
|
||||
}
|
||||
|
||||
.newUI .applies-to {
|
||||
|
|
@ -721,8 +734,7 @@ a:hover {
|
|||
height: 14px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
#newUIoptions [data-toggle-on-click] > svg {
|
||||
|
|
@ -815,15 +827,6 @@ input[id^="manage.newUI"] {
|
|||
margin-top: 1ex;
|
||||
}
|
||||
|
||||
#update-all-no-updates[data-skipped-edited="true"] {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#update-all-no-updates[data-skipped-edited="true"]::after {
|
||||
font-weight: normal;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* highlight updated/added styles */
|
||||
.highlight {
|
||||
animation: highlight 10s cubic-bezier(0,.82,.47,.98);
|
||||
|
|
@ -834,7 +837,7 @@ input[id^="manage.newUI"] {
|
|||
|
||||
@keyframes highlight {
|
||||
from {
|
||||
background-color: rgba(128, 128, 128, .5);
|
||||
background-color: var(--truegray-alpha-5);
|
||||
}
|
||||
to {
|
||||
background-color: none;
|
||||
|
|
@ -859,7 +862,7 @@ input[id^="manage.newUI"] {
|
|||
}
|
||||
|
||||
#filters > label:hover {
|
||||
background-color: hsla(0, 0%, 50%, .4);
|
||||
background-color: var(--truegray-alpha-4);
|
||||
}
|
||||
|
||||
#filters {
|
||||
|
|
@ -867,9 +870,9 @@ input[id^="manage.newUI"] {
|
|||
}
|
||||
|
||||
.active #filters-stats {
|
||||
background-color: darkcyan;
|
||||
border-color: darkcyan;
|
||||
color: white;
|
||||
background-color: var(--darkcyan);
|
||||
border-color: var(--darkcyan);
|
||||
color: var(--white);
|
||||
font-size: 0.7rem;
|
||||
font-weight: normal;
|
||||
padding: 2px 5px;
|
||||
|
|
@ -891,8 +894,17 @@ input[id^="manage.newUI"] {
|
|||
margin-top: 4px
|
||||
}
|
||||
|
||||
.favicon-label-wrapper {
|
||||
display: inline-flex;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.favicon-label-wrapper a:hover .svg-icon {
|
||||
fill: var(--black);
|
||||
}
|
||||
|
||||
#reset-filters svg {
|
||||
fill: hsla(180, 50%, 27%, .5);
|
||||
fill: var(--exit-filters);
|
||||
width: 24px; /* widen the click area a bit */
|
||||
height: 20px;
|
||||
padding: 2px;
|
||||
|
|
@ -900,7 +912,7 @@ input[id^="manage.newUI"] {
|
|||
}
|
||||
|
||||
#reset-filters:hover svg {
|
||||
fill: hsla(180, 50%, 27%, 1);
|
||||
fill: var(--exit-filters-hover);
|
||||
}
|
||||
|
||||
#filters summary:not(.active) #reset-filters,
|
||||
|
|
@ -932,16 +944,20 @@ input[id^="manage.newUI"] {
|
|||
|
||||
#search {
|
||||
max-width: calc(100% - 30px);
|
||||
background-color: var(--gray-lightness-93);
|
||||
border: 1px solid var(--gray-lightness-60);
|
||||
transition: border-color .25s;
|
||||
}
|
||||
|
||||
#search[data-focused-via-click]:focus {
|
||||
border-color: var(--focus-outline);
|
||||
}
|
||||
|
||||
#search, #manage\.newUI\.sort {
|
||||
flex-grow: 1;
|
||||
background: #fff;
|
||||
height: 20px;
|
||||
box-sizing: border-box;
|
||||
padding: 3px 3px 3px 4px;
|
||||
color: #000;
|
||||
border: 1px solid hsl(0, 0%, 66%);
|
||||
}
|
||||
|
||||
#manage\.newUI\.sort {
|
||||
|
|
@ -970,12 +986,12 @@ input[id^="manage.newUI"] {
|
|||
}
|
||||
|
||||
.help-text mark {
|
||||
background-color: rgba(128, 128, 128, .15);
|
||||
background-color: var(--truegray-alpha-15);
|
||||
color: currentColor;
|
||||
padding: 2px 6px;
|
||||
font-weight: bold;
|
||||
font-family: Consolas, monospace;
|
||||
border: 1px solid rgba(128, 128, 128, .25);
|
||||
border: 1px solid var(--truegray-alpha-25);
|
||||
display: inline-block;
|
||||
margin: 2px;
|
||||
}
|
||||
|
|
@ -998,15 +1014,15 @@ input[id^="manage.newUI"] {
|
|||
}
|
||||
|
||||
#import pre {
|
||||
background: #eee;
|
||||
background: var(--main-bg);
|
||||
overflow: auto;
|
||||
margin: 0 0 .5em 0;
|
||||
}
|
||||
|
||||
/* drag-n-drop on import button */
|
||||
.dropzone:after {
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
color: white;
|
||||
background-color: var(--black-alpha-7);
|
||||
color: var(--white);
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
@ -1015,7 +1031,7 @@ input[id^="manage.newUI"] {
|
|||
position: fixed;
|
||||
padding: calc(50vh - 3em) calc(50vw - 5em);
|
||||
content: attr(dragndrop-hint);
|
||||
text-shadow: 1px 1px 10px black;
|
||||
text-shadow: 1px 1px 10px var(--black);
|
||||
font-size: xx-large;
|
||||
text-align: center;
|
||||
animation: fadein 1s cubic-bezier(.03, .67, .08, .94);
|
||||
|
|
@ -1029,7 +1045,7 @@ input[id^="manage.newUI"] {
|
|||
|
||||
/* post-import report */
|
||||
#message-box details:not([data-id="invalid"]) div:hover {
|
||||
background-color: rgba(128, 128, 128, .3);
|
||||
background-color: var(--truegray-alpha-3);
|
||||
}
|
||||
|
||||
#message-box details:not(:last-child) {
|
||||
|
|
@ -1141,7 +1157,7 @@ input[id^="manage.newUI"] {
|
|||
width: 100%;
|
||||
position: static;
|
||||
border-right: none;
|
||||
border-bottom: 1px dashed #AAA;
|
||||
border-bottom: 1px dashed var(--gray-lightness-66);
|
||||
}
|
||||
|
||||
#manage-settings {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user