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

Better icons

Browse Source
This commit is contained in:
narcolepticinsomniac 2017-08-22 22:14:53 -04:00 committed by GitHub
parent 0cfecc19af
commit bef23ae767
1 changed files with 56 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
popup/popup.css
View File

@ -8,11 +8,6 @@ body {
background-color: #fff; background-color: #fff;
} }
body > div:not(#installed) {
margin-left: 0.75em;
margin-right: 0.75em;
}
.firefox .chromium-only { .firefox .chromium-only {
display: none; display: none;
} }
@ -92,10 +87,10 @@ body.blocked > DIV {
#installed .actions a { #installed .actions a {
display: inline-flex; display: inline-flex;
height: 24px;
width: 23px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 18px;
width: 18px;
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
} }
@ -192,70 +187,72 @@ body.blocked > DIV {
.svg-icon { .svg-icon {
pointer-events: none; pointer-events: none;
transition: fill .5s; transition: fill .5s;
width: 14px;
height: 16px;
fill: #666; fill: #666;
} }
.svg-icon.on, .svg-icon.off { .svg-icon.on, .svg-icon.off {
width: 23px;
height: 20px;
}
a:hover .svg-icon.on, .svg-icon.off {
fill: #999;
}
a:hover .svg-icon.off {
fill: #666;
}
.svg-icon.remove {
width: 18px; width: 18px;
height: 18px; height: 18px;
} }
.svg-icon.find-styles, .svg-icon.open-manager, .svg-icon.open-options, .svg-icon.open-shortcuts { .svg-icon.write-style {
fill: #000;
width: 20px;
height: 20px;
}
.svg-icon.open-manager {
width: 20px;
height: 20px;
}
.svg-icon.open-options {
width: 18px; width: 18px;
height: 18px; height: 18px;
fill: hsl(0, 0%, 28%);
} }
.svg-icon.on { .svg-icon.find-styles {
fill: hsl(0, 0%, 28%); width: 20px;
height: 20px;
} }
.svg-icon.off { .svg-icon.open-shortcuts {
fill: hsl(0, 100%, 45%); width: 24px;
height: 24px;
} }
#installed.disabled .svg-icon.on { #installed .actions a.enable .svg-icon {
fill: hsl(45, 100%, 38%); transform: matrix(-1, 0, 0, 1, 0, 0);
} }
#disableAll-label { #disableAll-label {
cursor: pointer; cursor: pointer;
} }
#disableAll-label:hover .svg-icon.all-off, #disable-all-wrapper input[type="checkbox"]:checked + .main-controls #disableAll-label:hover .svg-icon.all-off, #installed.disabled a:hover .svg-icon.on { #disableAll-label .svg-icon.disable-all {
fill: hsl(0, 0%, 0%);
}
#disableAll-label .svg-icon.all-off {
height: 18px; height: 18px;
width: 18px; width: 18px;
fill: hsl(0, 0%, 28%);
} }
#disable-all-wrapper input[type="checkbox"]:checked + .main-controls .svg-icon.all-off { #disable-all-wrapper input[type="checkbox"]:not(:checked) + .main-controls .svg-icon.disable-all.all-off {
width: 18px; display: none;
fill: hsl(0, 100%, 45%);
} }
#disableAll-label::before { #disable-all-wrapper input[type="checkbox"]:checked + .main-controls .svg-icon.disable-all.all-on {
content: ""; display: none;
border-radius: 3px;
display: inline-flex;
width: 16px;
height: 16px;
background: #000 url(/images/icon/16.png)no-repeat center;
border: #000 solid;
border-width: 1px 0;
box-shadow: 0 0 3px #000, 0 0 3px hsla(0, 0%, 0%, .5);
margin: 0 4px 0 0;
transition: background .3s, border .3s, box-shadow .3s;
}
#disable-all-wrapper input[type="checkbox"]:checked + .main-controls #disableAll-label::before {
background: #000 url(/images/icon/16x.png)no-repeat center;
} }
#installed .actions a.delete .svg-icon { #installed .actions a.delete .svg-icon {
@ -263,13 +260,18 @@ body.blocked > DIV {
} }
#installed .actions a.enable, #installed .actions a.disable { #installed .actions a.enable, #installed .actions a.disable {
margin: 0 2px; margin: 0 4px;
} }
a:hover .svg-icon { a:hover .svg-icon, #disableAll-label:hover .svg-icon {
fill: #000; fill: #000;
} }
.style-name:hover {
color: #000;
text-decoration: underline;
}
body > .actions { body > .actions {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -279,15 +281,22 @@ body > .actions {
body > .actions > .actions-inner { body > .actions > .actions-inner {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding-left: 6px;
} }
body > .actions > .actions-inner > div[id] { body > .actions > .actions-inner > div[id] {
margin-right: 14px; margin-right: 14px;
height: 24px;
width: 24px;
} }
body > .actions > .actions-inner #disableAll-label, body > .actions > .actions-inner a{ body > .actions > .actions-inner #disableAll-label, body > .actions > .actions-inner a{
display: inline-flex; display: inline-flex;
cursor: pointer; cursor: pointer;
height: 24px;
width: 24px;
justify-content: center;
align-items: center;
} }
.actions > div { .actions > div {
@ -326,7 +335,7 @@ body.blocked .actions > .left-gutter {
} }
#write-style-for { #write-style-for {
margin-right: .6ex margin: 0 4px 0 10px;
} }
.write-style-link { .write-style-link {
@ -342,6 +351,7 @@ body.blocked .actions > .left-gutter {
display: block; display: block;
flex-grow: 9; flex-grow: 9;
min-width: 200px; min-width: 200px;
line-height: 20px;
} }
/* "breadcrumbs" 'new style' links */ /* "breadcrumbs" 'new style' links */