Cleanup manage styles
This commit is contained in:
Rob Garrison
parent
48b1877b44
commit
9224c7ab6c
36
manage.html
36
manage.html
|
|
@ -30,28 +30,24 @@
|
|||
|
||||
<template data-id="style">
|
||||
<div class="entry hide-extra">
|
||||
<div class="entry-col entry-filter">
|
||||
<label class="entry-col entry-filter checkmate" tabindex="0">
|
||||
<span class="col-label" i18n-text="genericFilterLabel"></span>
|
||||
<label class="checkmate" tabindex="0">
|
||||
<input class="entry-filter-toggle" type="checkbox">
|
||||
<svg class="svg-icon checkbox"viewBox="0 0 10 10">
|
||||
<path class="filled-circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86z"/>
|
||||
<path class="circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86zm0 7.5a3.36 3.36 0 1 1 0-6.72 3.36 3.36 0 0 1 0 6.72z"/>
|
||||
<path class="checkmark" d="M6.86 3.21L4.14 5.93 3.07 4.86l-.57.57 1.64 1.71L7.5 3.8l-.64-.58z"/>
|
||||
</svg>
|
||||
</label>
|
||||
</div>
|
||||
<div class="entry-col entry-state">
|
||||
<input class="entry-filter-toggle" type="checkbox">
|
||||
<svg class="svg-icon checkbox"viewBox="0 0 10 10">
|
||||
<path class="filled-circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86z"/>
|
||||
<path class="circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86zm0 7.5a3.36 3.36 0 1 1 0-6.72 3.36 3.36 0 0 1 0 6.72z"/>
|
||||
<path class="checkmark" d="M6.86 3.21L4.14 5.93 3.07 4.86l-.57.57 1.64 1.71L7.5 3.8l-.64-.58z"/>
|
||||
</svg>
|
||||
</label>
|
||||
<label class="entry-col entry-state checkmate" tabindex="0">
|
||||
<span class="col-label" i18n-text="genericEnabledLabel"></span>
|
||||
<label class="checkmate" tabindex="0">
|
||||
<input class="entry-state-toggle" type="checkbox">
|
||||
<svg class="svg-icon checkbox"viewBox="0 0 10 10">
|
||||
<path class="filled-circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86z"/>
|
||||
<path class="circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86zm0 7.5a3.36 3.36 0 1 1 0-6.72 3.36 3.36 0 0 1 0 6.72z"/>
|
||||
<path class="checkmark" d="M6.86 3.21L4.14 5.93 3.07 4.86l-.57.57 1.64 1.71L7.5 3.8l-.64-.58z"/>
|
||||
</svg>
|
||||
</label>
|
||||
</div>
|
||||
<input class="entry-state-toggle" type="checkbox">
|
||||
<svg class="svg-icon checkbox"viewBox="0 0 10 10">
|
||||
<path class="filled-circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86z"/>
|
||||
<path class="circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86zm0 7.5a3.36 3.36 0 1 1 0-6.72 3.36 3.36 0 0 1 0 6.72z"/>
|
||||
<path class="checkmark" d="M6.86 3.21L4.14 5.93 3.07 4.86l-.57.57 1.64 1.71L7.5 3.8l-.64-.58z"/>
|
||||
</svg>
|
||||
</label>
|
||||
<a href="#" class="entry-col entry-name">
|
||||
<span class="col-label" i18n-text="genericName"></span>
|
||||
<span class="entry-name-text"></span>
|
||||
|
|
|
|||
|
|
@ -8,23 +8,31 @@
|
|||
--entry-height: 30px;
|
||||
--onoffswitch-width: 60px;
|
||||
|
||||
--header-bg-color: #333;
|
||||
--header-bg-color: #2c2c2c;
|
||||
--header-text-color: #ddd;
|
||||
--header-text-hover-color: hsla(180, 100%, 20%, 1);
|
||||
--header-text-hover-color: #066;
|
||||
--header-icon-color: #888;
|
||||
--header-icon-hover-color: hsla(180, 99%, 58%, 1);
|
||||
--header-icon-hover-color: #2afefe;
|
||||
|
||||
--tools-bg-color: #ccc;
|
||||
|
||||
--entry-header-bg-color: #ddd;
|
||||
--entry-header-text-color: #111;
|
||||
|
||||
--checked-count-bg-color: hsla(180, 100%, 20%, 1);
|
||||
--checked-bg-color: hsla(180, 100%, 24%, 1);
|
||||
--checked-mark-color: #fff;
|
||||
--entry-text-hover: #007a7a;
|
||||
--entry-text-disabled: #3c3c3c;
|
||||
--entry-icon-color: #666;
|
||||
--entry-icon-hover-color: hsla(180, 100%, 24%, 1);
|
||||
--entry-icon-hover-color: #007a7a;
|
||||
--entry-border-color: #ddd;
|
||||
--delete-icon-hover-color: #d40000;
|
||||
|
||||
--label-usercss-bg-color: #066;
|
||||
--label-usercss-text-color: #fff;
|
||||
|
||||
--checked-count-bg-color: #066;
|
||||
--checked-count-text-color: #fff;
|
||||
|
||||
--checkbox-bg-color: #007a7a;
|
||||
--checkbox-icon-color: #fff;
|
||||
}
|
||||
|
||||
html {
|
||||
|
|
@ -42,14 +50,16 @@ body {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
body.dark {
|
||||
background: #181818;
|
||||
color: #ddd;
|
||||
}
|
||||
*/
|
||||
|
||||
a,
|
||||
.disabled a:hover {
|
||||
color: #3c3c3c;
|
||||
color: var(--entry-text-disabled);
|
||||
transition: color .5s;
|
||||
}
|
||||
|
||||
|
|
@ -58,7 +68,7 @@ a {
|
|||
}
|
||||
|
||||
a:hover {
|
||||
color: #000;
|
||||
color: var(--entry-text-hover);
|
||||
}
|
||||
|
||||
.invisible {
|
||||
|
|
@ -225,7 +235,7 @@ body.all-styles-hidden-by-filters #installed:after {
|
|||
.entry {
|
||||
margin: 0;
|
||||
padding: 4px 8px;
|
||||
border-top: 1px solid #ddd;
|
||||
border-top: 1px solid var(--entry-border-color);
|
||||
}
|
||||
|
||||
.entry-col {
|
||||
|
|
@ -260,6 +270,10 @@ body.all-styles-hidden-by-filters #installed:after {
|
|||
white-space: pre;
|
||||
}
|
||||
|
||||
.header-state {
|
||||
min-width: 65px;
|
||||
}
|
||||
|
||||
.header-version,
|
||||
.entry-version {
|
||||
max-width: var(--narrow-column);
|
||||
|
|
@ -328,7 +342,7 @@ body.all-styles-hidden-by-filters #installed:after {
|
|||
|
||||
.header-filter span:before {
|
||||
content: '►';
|
||||
color: #666;
|
||||
color: var(--entry-icon-color);
|
||||
position: relative;
|
||||
left: 7px;
|
||||
}
|
||||
|
|
@ -337,13 +351,13 @@ body.all-styles-hidden-by-filters #installed:after {
|
|||
.header-filter:hover .svg-icon,
|
||||
.header-filter.active svg {
|
||||
transition: all .5s;
|
||||
color: #000;
|
||||
fill: #000;
|
||||
color: var(--entry-text-hover);
|
||||
fill: var(--entry-text-hover);
|
||||
}
|
||||
|
||||
.header-filter.active span:before {
|
||||
content: '▲';
|
||||
color: #000;
|
||||
color: var(--entry-text-hover);
|
||||
}
|
||||
|
||||
.targets {
|
||||
|
|
@ -400,12 +414,10 @@ body.all-styles-hidden-by-filters #installed:after {
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
.entry.enabled .entry-name:hover .style-name {
|
||||
color: hsla(180, 100%, 15%, 1);
|
||||
}
|
||||
|
||||
.entry.enabled:hover .entry-name,
|
||||
.entry:hover .svg-icon:hover {
|
||||
fill: #000;
|
||||
color: var(--entry-text-hover);
|
||||
fill: var(--entry-text-hover);
|
||||
}
|
||||
|
||||
.header-labels {
|
||||
|
|
@ -422,10 +434,14 @@ body.all-styles-hidden-by-filters #installed:after {
|
|||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.entry-label {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.header-label[data-type="usercss"],
|
||||
.entry-label[data-type="usercss"] {
|
||||
background-color: hsla(180, 100%, 20%, 1);
|
||||
color: white;
|
||||
background-color: var(--label-usercss-bg-color);
|
||||
color: var(--label-usercss-text-color);
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
|
|
@ -458,7 +474,7 @@ a svg, .svg-icon.sort {
|
|||
|
||||
/* Checkbox */
|
||||
.checkmate input:checked + svg.checkbox .filled-circle {
|
||||
fill: var(--checked-bg-color);
|
||||
fill: var(--checkbox-bg-color);
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
@ -471,7 +487,7 @@ a svg, .svg-icon.sort {
|
|||
}
|
||||
|
||||
.checkmate input:checked + svg.checkbox .checkmark {
|
||||
fill: var(--checked-mark-color);
|
||||
fill: var(--checkbox-icon-color);
|
||||
}
|
||||
|
||||
.checking-update .check-update {
|
||||
|
|
@ -854,6 +870,11 @@ a svg, .svg-icon.sort {
|
|||
top: 100%;
|
||||
}
|
||||
|
||||
/* make the popup on hover a little easier to use */
|
||||
.new-style {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
/* sort font */
|
||||
@font-face {
|
||||
font-family: 'sorticon';
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user