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

Cleanup manage styles

Browse Source
This commit is contained in:
Rob Garrison 2020-03-11 22:05:25 -05:00
parent 48b1877b44
commit 9224c7ab6c
2 changed files with 61 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
manage.html
View File

@ -30,28 +30,24 @@
<template data-id="style"> <template data-id="style">
<div class="entry hide-extra"> <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> <span class="col-label" i18n-text="genericFilterLabel"></span>
<label class="checkmate" tabindex="0"> <input class="entry-filter-toggle" type="checkbox">
<input class="entry-filter-toggle" type="checkbox"> <svg class="svg-icon checkbox"viewBox="0 0 10 10">
<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="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="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"/>
<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>
</svg> </label>
</label> <label class="entry-col entry-state checkmate" tabindex="0">
</div>
<div class="entry-col entry-state">
<span class="col-label" i18n-text="genericEnabledLabel"></span> <span class="col-label" i18n-text="genericEnabledLabel"></span>
<label class="checkmate" tabindex="0"> <input class="entry-state-toggle" type="checkbox">
<input class="entry-state-toggle" type="checkbox"> <svg class="svg-icon checkbox"viewBox="0 0 10 10">
<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="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="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"/>
<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>
</svg> </label>
</label>
</div>
<a href="#" class="entry-col entry-name"> <a href="#" class="entry-col entry-name">
<span class="col-label" i18n-text="genericName"></span> <span class="col-label" i18n-text="genericName"></span>
<span class="entry-name-text"></span> <span class="entry-name-text"></span>

69
manage/manage.css
View File

@ -8,23 +8,31 @@
--entry-height: 30px; --entry-height: 30px;
--onoffswitch-width: 60px; --onoffswitch-width: 60px;
--header-bg-color: #333; --header-bg-color: #2c2c2c;
--header-text-color: #ddd; --header-text-color: #ddd;
--header-text-hover-color: hsla(180, 100%, 20%, 1); --header-text-hover-color: #066;
--header-icon-color: #888; --header-icon-color: #888;
--header-icon-hover-color: hsla(180, 99%, 58%, 1); --header-icon-hover-color: #2afefe;
--tools-bg-color: #ccc; --tools-bg-color: #ccc;
--entry-header-bg-color: #ddd; --entry-header-bg-color: #ddd;
--entry-header-text-color: #111; --entry-header-text-color: #111;
--entry-text-hover: #007a7a;
--checked-count-bg-color: hsla(180, 100%, 20%, 1); --entry-text-disabled: #3c3c3c;
--checked-bg-color: hsla(180, 100%, 24%, 1);
--checked-mark-color: #fff;
--entry-icon-color: #666; --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; --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 { html {
@ -42,14 +50,16 @@ body {
height: 100%; height: 100%;
} }
/*
body.dark { body.dark {
background: #181818; background: #181818;
color: #ddd; color: #ddd;
} }
*/
a, a,
.disabled a:hover { .disabled a:hover {
color: #3c3c3c; color: var(--entry-text-disabled);
transition: color .5s; transition: color .5s;
} }
@ -58,7 +68,7 @@ a {
} }
a:hover { a:hover {
color: #000; color: var(--entry-text-hover);
} }
.invisible { .invisible {
@ -225,7 +235,7 @@ body.all-styles-hidden-by-filters #installed:after {
.entry { .entry {
margin: 0; margin: 0;
padding: 4px 8px; padding: 4px 8px;
border-top: 1px solid #ddd; border-top: 1px solid var(--entry-border-color);
} }
.entry-col { .entry-col {
@ -260,6 +270,10 @@ body.all-styles-hidden-by-filters #installed:after {
white-space: pre; white-space: pre;
} }
.header-state {
min-width: 65px;
}
.header-version, .header-version,
.entry-version { .entry-version {
max-width: var(--narrow-column); max-width: var(--narrow-column);
@ -328,7 +342,7 @@ body.all-styles-hidden-by-filters #installed:after {
.header-filter span:before { .header-filter span:before {
content: '►'; content: '►';
color: #666; color: var(--entry-icon-color);
position: relative; position: relative;
left: 7px; left: 7px;
} }
@ -337,13 +351,13 @@ body.all-styles-hidden-by-filters #installed:after {
.header-filter:hover .svg-icon, .header-filter:hover .svg-icon,
.header-filter.active svg { .header-filter.active svg {
transition: all .5s; transition: all .5s;
color: #000; color: var(--entry-text-hover);
fill: #000; fill: var(--entry-text-hover);
} }
.header-filter.active span:before { .header-filter.active span:before {
content: '▲'; content: '▲';
color: #000; color: var(--entry-text-hover);
} }
.targets { .targets {
@ -400,12 +414,10 @@ body.all-styles-hidden-by-filters #installed:after {
pointer-events: none; pointer-events: none;
} }
.entry.enabled .entry-name:hover .style-name { .entry.enabled:hover .entry-name,
color: hsla(180, 100%, 15%, 1);
}
.entry:hover .svg-icon:hover { .entry:hover .svg-icon:hover {
fill: #000; color: var(--entry-text-hover);
fill: var(--entry-text-hover);
} }
.header-labels { .header-labels {
@ -422,10 +434,14 @@ body.all-styles-hidden-by-filters #installed:after {
text-transform: lowercase; text-transform: lowercase;
} }
.entry-label {
margin-left: 1em;
}
.header-label[data-type="usercss"], .header-label[data-type="usercss"],
.entry-label[data-type="usercss"] { .entry-label[data-type="usercss"] {
background-color: hsla(180, 100%, 20%, 1); background-color: var(--label-usercss-bg-color);
color: white; color: var(--label-usercss-text-color);
text-transform: lowercase; text-transform: lowercase;
} }
@ -458,7 +474,7 @@ a svg, .svg-icon.sort {
/* Checkbox */ /* Checkbox */
.checkmate input:checked + svg.checkbox .filled-circle { .checkmate input:checked + svg.checkbox .filled-circle {
fill: var(--checked-bg-color); fill: var(--checkbox-bg-color);
display: block; display: block;
} }
@ -471,7 +487,7 @@ a svg, .svg-icon.sort {
} }
.checkmate input:checked + svg.checkbox .checkmark { .checkmate input:checked + svg.checkbox .checkmark {
fill: var(--checked-mark-color); fill: var(--checkbox-icon-color);
} }
.checking-update .check-update { .checking-update .check-update {
@ -854,6 +870,11 @@ a svg, .svg-icon.sort {
top: 100%; top: 100%;
} }
/* make the popup on hover a little easier to use */
.new-style {
padding-left: 20px;
}
/* sort font */ /* sort font */
@font-face { @font-face {
font-family: 'sorticon'; font-family: 'sorticon';