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

Light grey theme

Browse Source
This commit is contained in:
narcolepticinsomniac 2018-07-18 20:37:59 -04:00 committed by GitHub
parent a3f35fb1d2
commit 88fab41d79
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 96 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
popup/popup.css
View File

@ -12,23 +12,27 @@ html {
/* Chrome 66-?? adds a gap equal to the scrollbar width, /* Chrome 66-?? adds a gap equal to the scrollbar width,
which looks like a bug, see https://crbug.com/821143 */ which looks like a bug, see https://crbug.com/821143 */
overflow: overlay; overflow: overlay;
max-height: 600px;
} }
html, body { html, body {
height: min-content; height: min-content;
max-height: 600px;
} }
body { body {
width: 252px; width: 252px;
max-height: 596px;
font-size: 12px; font-size: 12px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
margin: 0; margin: 0 0 1px;
color: hsl(0, 0%, 20%);
background-color: hsl(0, 0%, 88%);
border: 1px solid hsl(0, 0%, 80%);
box-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, .4);
} }
.firefox body { body.blocked {
color: #000; background-color: hsl(0, 0%, 90%);
background-color: #fff;
} }
body > div:not(#installed):not(#message-box):not(.colorpicker-popup) { body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
@ -41,14 +45,12 @@ body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
} }
/************ checkbox ************/ /************ checkbox ************/
.style-name:hover input[type="checkbox"]:checked { .style-name:hover input[type="checkbox"] {
border-color: hsl(0, 0%, 32%); border-color: hsl(0, 0%, 10%);
background-color: hsl(0, 0%, 82%);
} }
.style-name:hover input[type="checkbox"] { .style-name:hover input[type="checkbox"]:checked + .svg-icon.checked {
border-color: hsl(0, 0%, 32%); fill: hsl(0, 0%, 0%);
background-color: hsl(0, 0%, 82%);
} }
#disable-all-wrapper input[type="checkbox"]:not(.slider):checked + .svg-icon.checked { #disable-all-wrapper input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
@ -59,11 +61,11 @@ body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
} }
#installed.disabled + .actions #disableAll:checked + .svg-icon.checked { #installed.disabled + .actions #disableAll:checked + .svg-icon.checked {
fill: hsl(0, 68%, 42%); fill: hsl(0, 100%, 36%);
} }
#installed.disabled + .actions #disableAll:checked { #installed.disabled + .actions #disableAll:checked {
border-color: hsl(0, 68%, 50%); border-color: hsl(0, 100%, 36%);
} }
#installed.disabled + .actions #disableAll:checked:hover + .svg-icon.checked { #installed.disabled + .actions #disableAll:checked:hover + .svg-icon.checked {
@ -71,17 +73,16 @@ body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
} }
#disableAll:hover { #disableAll:hover {
border-color: hsl(0, 68%, 50%); border-color: hsl(0, 100%, 36%);
background-color: hsl(20, 70%, 75%);
} }
#disableAll-label:hover { #disableAll-label:hover {
color: hsl(0, 68%, 42%); color: hsl(0, 100%, 36%);
} }
#installed.disabled + .actions #disableAll:checked:hover { #installed.disabled + .actions #disableAll:checked:hover {
border-color: hsl(0, 50%, 56%); border-color: hsl(0, 100%, 36%);
background-color: hsl(0, 50%, 56%); background-color: hsl(0, 100%, 36%);
} }
#installed .style-name .checker, #installed .style-name .checker,
@ -109,8 +110,11 @@ body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
} }
#no-styles { #no-styles {
background-color: hsl(0, 0%, 91%);
padding: 4px var(--outer-padding) 6px; padding: 4px var(--outer-padding) 6px;
font-weight: bold; font-weight: bold;
border-bottom: 1px solid hsl(0, 0%, 80%);
box-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, .4);
} }
#find-styles-link { #find-styles-link {
@ -146,13 +150,13 @@ body.blocked > DIV {
} }
#installed { #installed {
border-bottom: 1px solid black;
padding-bottom: 2px;
padding-top: 2px;
max-height: 445px; max-height: 445px;
overflow-y: auto; overflow-y: auto;
counter-reset: style-number; counter-reset: style-number;
position: relative; position: relative;
background-color: hsl(0, 0%, 88%);
border-bottom: 1px solid hsl(0, 0%, 80%);
box-shadow: 0 1px 0 0 hsla(0, 0%, 100%, .4);
} }
#installed.disabled .style-name { #installed.disabled .style-name {
@ -161,7 +165,7 @@ body.blocked > DIV {
#installed.disabled + .actions #disableAll-label { #installed.disabled + .actions #disableAll-label {
font-weight: bold; font-weight: bold;
color: firebrick; color: hsl(0, 100%, 36%);
} }
#installed .actions { #installed .actions {
@ -179,12 +183,17 @@ body.blocked > DIV {
display: flex; display: flex;
align-items: center; align-items: center;
height: 26px; height: 26px;
padding: 0 14px 0 0; padding: 0 13px 0 0;
position: relative; position: relative;
box-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, .4);
}
.entry:not(:last-of-type) {
border-bottom: 1px solid hsl(0, 0%, 80%);
} }
html[style] .entry { html[style] .entry {
padding: 0 16px 0 0; padding: 0 15px 0 0;
} }
#no-styles.entry { #no-styles.entry {
@ -193,6 +202,9 @@ html[style] .entry {
.entry .actions { .entry .actions {
display: inline-flex; display: inline-flex;
height: 100%;
align-items: center;
justify-content: center;
} }
.style-name { .style-name {
@ -215,7 +227,7 @@ html[style] .entry {
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, hsla(0, 0%, 50%, 0.2), hsla(0, 0%, 50%, 0.05) 50%, transparent);
pointer-events: none; pointer-events: none;
opacity: 0; opacity: 0;
transition: opacity .1s; transition: opacity .1s;
@ -235,8 +247,20 @@ html[style] .entry {
padding-right: 5px; padding-right: 5px;
} }
.entry:nth-child(odd) {
background-color: hsl(0, 0%, 91%);
}
.entry:nth-child(even) { .entry:nth-child(even) {
background-color: rgba(0, 0, 0, 0.05); background-color: hsl(0, 0%, 88%);
}
.reverse-stripe .entry:nth-child(even) {
background-color: hsl(0, 0%, 91%);
}
.reverse-stripe .entry:nth-child(odd) {
background-color: hsl(0, 0%, 88%);
} }
.entry:nth-child(-n+10):before, .entry:nth-child(-n+10):before,
@ -259,15 +283,12 @@ html[style*="border"] .entry:nth-child(11):before {
right: 7px; right: 7px;
} }
.entry .actions {
margin-left: -1px;
margin-right: -1px;
}
.entry .actions > * { .entry .actions > * {
display: inline-block; display: inline-flex;
padding: 0 1px; height: 18px;
margin: 0 1px; width: 18px;
align-items: center;
justify-content: center;
} }
.not-applied .checker, .not-applied .checker,
@ -342,13 +363,29 @@ html[style*="border"] .entry:nth-child(11):before {
.svg-icon { .svg-icon {
pointer-events: none; pointer-events: none;
transition: fill .5s; transition: fill .5s;
width: 14px; width: 16px;
height: 16px; height: 16px;
fill: #666; fill: hsl(0, 0%, 54%);
} }
a:hover .svg-icon { .entry .actions .svg-icon.config {
fill: #000; height: 15px;
width: 15px;
margin-left: -2px;
}
.entry .actions .svg-icon.edit {
width: 14px;
}
.entry .actions .svg-icon.remove {
width: 12px;
margin-left: -2px;
}
a:hover .svg-icon,
#message-box-close-icon:hover .svg-icon {
fill: hsl(0, 0%, 10%);
} }
body > .actions { body > .actions {
@ -460,7 +497,7 @@ body.blocked .actions > .main-controls {
#popup-options { #popup-options {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding: var(--outer-padding) 1px; padding: var(--outer-padding) 1px 8px;
} }
#popup-options button { #popup-options button {
@ -516,10 +553,11 @@ body.blocked .actions > .main-controls {
max-height: 80%; max-height: 80%;
min-height: 6em; min-height: 6em;
padding: 1em; padding: 1em;
background-color: #fff; background-color: hsl(0, 0%, 92%);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border: solid 2px rgba(0, 0, 0, 0.5); border: solid 1px hsl(0, 0%, 40%);
box-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, 1);
} }
#confirm > div > *:not(:last-child) { #confirm > div > *:not(:last-child) {
@ -593,12 +631,14 @@ body.blocked .actions > .main-controls {
cursor: auto; cursor: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-left: 2px solid white; border: 1px solid hsl(0, 0%, 80%);
box-shadow: 0 0 90px rgba(0, 0, 0, .5); box-shadow: inset 0 0 0 1px hsla(0, 0%, 80%, .4), 0 0 90px rgba(0, 0, 0, .5);
z-index: 5; z-index: 5;
} }
#hotkey-info div:first-child { #hotkey-info div:first-child {
background-color: hsl(0, 0%, 90%);
box-shadow: inset 0 0 0 1px hsla(0, 0%, 80%, .4);
flex-grow: 1; flex-grow: 1;
padding: 0 1em; padding: 0 1em;
font-size: 11px; font-size: 11px;
@ -607,12 +647,11 @@ body.blocked .actions > .main-controls {
#hotkey-info div { #hotkey-info div {
padding: 1em; padding: 1em;
border-top: 1px solid #ddd;
background-color: white;
} }
#hotkey-info div:last-child { #hotkey-info div:last-child {
box-shadow: 0 0 90px rgba(0, 0, 0, .25); box-shadow: 0 0 90px rgba(0, 0, 0, .25);
background-color: hsl(0, 0%, 80%);
position: relative; position: relative;
} }

12
popup/popup.js
View File

@ -241,6 +241,11 @@ function showStyles(styles) {
} }
window.dispatchEvent(new Event('showStyles:done')); window.dispatchEvent(new Event('showStyles:done'));
}); });
var reverseZebra = $('.entry:last-child:nth-of-type(odd)');
if (typeof(reverseZebra) !== 'undefined' && reverseZebra !== null) {
$('#installed').classList.add('reverse-stripe');
}
} }
@ -474,6 +479,13 @@ function handleDelete(id) {
if (!$('.entry')) { if (!$('.entry')) {
installed.appendChild(template.noStyles.cloneNode(true)); installed.appendChild(template.noStyles.cloneNode(true));
} }
var reverseZebra = $('.entry:last-child:nth-of-type(odd)');
if (typeof(reverseZebra) !== 'undefined' && reverseZebra !== null) {
$('#installed').classList.add('reverse-stripe');
} else {
$('#installed').classList.remove('reverse-stripe');
}
} }