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