open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

manage CSS

Browse Source
This commit is contained in:
narcolepticinsomniac 2018-10-12 16:28:28 -04:00 committed by GitHub
parent 525030c15d
commit 6474eb178a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 96 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

176
manage/manage.css
View File

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