a185b6b182
* Another popup mockup This is a fraction of what I want to do with the popup, but these are improvements that can be made to the existing version without a complete overhaul. Should be no difference appearance-wise, only some simple enhancements to existing functionality in terms of click area and stylability. Eliminates ill-conceived `.left-gutter` altogether. Checkboxes and labels are now either parent/child or siblings, with no weird spaces between them, and their hovers can therefore be styled together. `entry` checkbox/label `.style-name` now occupies the entire height/width of the `.entry` to the left of the `.actions` icons, so no more errant clicks. * Another popup mockup * Delete popup.css * Another popup mockup * Custom checkboxes * Custom checkboxes * Subtlety >an animated checkbox needlessly draws attention to itself But... I feel the need. Drawing attention to the checkbox is intentional to indicate click action. >In case the entire row is highlighted there will be no distraction Clickable area isn't the entire row, it's everything left of action icons. Hovering background on part of the row will look odd, and it's also a less obvious indicator of click action IMO. Didn't change "disable all" yet. It's a special kinda function, so maybe slightly more drastic is warranted, but I can tone that down too.
698 lines
12 KiB
CSS
698 lines
12 KiB
CSS
html, body {
|
|
height: min-content;
|
|
}
|
|
|
|
body {
|
|
width: 252px;
|
|
font-size: 12px;
|
|
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
|
|
margin: 0;
|
|
}
|
|
|
|
.firefox body {
|
|
background-color: #fff;
|
|
color: #000;
|
|
}
|
|
|
|
body > div:not(#installed) {
|
|
margin-left: 9px;
|
|
margin-right: 9px;
|
|
}
|
|
|
|
.firefox .chromium-only {
|
|
display: none;
|
|
}
|
|
|
|
.svg-icon.checked {
|
|
position: absolute;
|
|
height: 8px;
|
|
width: 8px;
|
|
display: none;
|
|
fill: #000;
|
|
margin: 2px 0 0 2px;
|
|
}
|
|
|
|
input[type="checkbox"]:checked + .svg-icon.checked {
|
|
display: inline-flex;
|
|
transition: fill .25s;
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
-moz-appearance: none;
|
|
-webkit-appearance: none;
|
|
border: 1px solid hsl(0, 0%, 46%);
|
|
height: 12px;
|
|
width: 12px;
|
|
display: inline-flex;
|
|
border-radius: 2px;
|
|
background-color: hsl(0, 0%, 94%);
|
|
outline: none;
|
|
margin: 0;
|
|
transition: background-color .25s, border-color .25s;
|
|
}
|
|
|
|
input[type="checkbox"]:checked:hover, .style-name:hover input[type="checkbox"]:checked {
|
|
border-color: hsl(0, 0%, 32%);
|
|
background-color: hsl(0, 0%, 82%);
|
|
}
|
|
|
|
input[type="checkbox"]:hover, .style-name:hover input[type="checkbox"],
|
|
.entry.disabled .style-name:hover input[type="checkbox"] {
|
|
border-color: hsl(0, 0%, 32%);
|
|
background-color: hsl(0, 0%, 82%);
|
|
}
|
|
|
|
#installed.disabled + .actions #disableAll:checked + .svg-icon.checked {
|
|
fill: hsl(0, 68%, 42%);
|
|
}
|
|
|
|
#installed.disabled + .actions #disableAll:checked {
|
|
border-color: hsl(0, 68%, 50%);
|
|
}
|
|
|
|
#installed.disabled + .actions #disableAll:checked:hover + .svg-icon.checked {
|
|
fill: #fff;
|
|
}
|
|
|
|
#disableAll:hover {
|
|
border-color: hsl(0, 68%, 50%);
|
|
background-color: hsl(20, 70%, 75%);
|
|
}
|
|
|
|
#disableAll:hover + .svg-icon + label {
|
|
color: hsl(0, 68%, 42%);
|
|
}
|
|
|
|
#installed.disabled + .actions #disableAll:checked:hover {
|
|
border-color: hsl(0, 50%, 56%);
|
|
background-color: hsl(0, 50%, 56%);
|
|
}
|
|
|
|
.style-name .checker,
|
|
.style-name .svg-icon.checked {
|
|
position: absolute;
|
|
top: 7px;
|
|
left: 9px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#disable-all-wrapper .main-controls .svg-icon.checked {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
label {
|
|
transition: color .25s;
|
|
}
|
|
|
|
#disable-all-wrapper {
|
|
padding: 0.3em 0 0.6em;
|
|
}
|
|
|
|
#disable-all-wrapper .main-controls {
|
|
display: flex;
|
|
position: relative;
|
|
}
|
|
|
|
#disable-all-wrapper .main-controls label {
|
|
font-size: 12px;
|
|
padding-left: 4px;
|
|
}
|
|
|
|
#no-styles {
|
|
font-style: italic;
|
|
}
|
|
|
|
.checker {
|
|
display: inline;
|
|
}
|
|
|
|
a {
|
|
color: #000;
|
|
transition: color .5s;
|
|
text-decoration-skip: ink;
|
|
}
|
|
|
|
a:hover {
|
|
color: #666;
|
|
}
|
|
|
|
.actions > .main-controls {
|
|
padding-left: 16px;
|
|
}
|
|
|
|
.main-controls {
|
|
display: table-cell;
|
|
}
|
|
|
|
body > DIV:last-of-type,
|
|
body.blocked > DIV {
|
|
border-bottom: none;
|
|
}
|
|
|
|
#installed {
|
|
border-bottom: 1px solid black;
|
|
padding-bottom: 2px;
|
|
padding-top: 2px;
|
|
max-height: 445px;
|
|
overflow-y: auto;
|
|
counter-reset: style-number;
|
|
}
|
|
|
|
#installed.disabled .style-name {
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
#installed.disabled + .actions #disableAll-label {
|
|
font-weight: bold;
|
|
color: firebrick;
|
|
}
|
|
|
|
#installed .actions {
|
|
cursor: default;
|
|
}
|
|
|
|
#installed .actions a {
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* entry */
|
|
|
|
.entry {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 26px;
|
|
padding: 0 14px 0 0;
|
|
position: relative;
|
|
}
|
|
|
|
html[style] .entry {
|
|
padding: 0 16px 0 0;
|
|
}
|
|
|
|
html[style] .entry:nth-child(-n+10):before,
|
|
html[style] .entry:nth-child(10):before {
|
|
right: 7px;
|
|
}
|
|
|
|
.entry .actions {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.style-name {
|
|
height: 100%;
|
|
width: 100%;
|
|
line-height: 28px;
|
|
cursor: default;
|
|
font-weight: bold;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
padding-left: 26px;
|
|
position: relative;
|
|
}
|
|
|
|
.entry .main-controls {
|
|
height: 100%;
|
|
display: inline-flex;
|
|
flex-grow: 1;
|
|
overflow: hidden;
|
|
align-items: center;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.entry:nth-child(even) {
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.entry:nth-child(-n+10):before,
|
|
.entry:nth-child(10):before {
|
|
counter-increment: style-number;
|
|
content: counter(style-number);
|
|
position: absolute;
|
|
top: .9ex;
|
|
right: 5px;
|
|
color: #aaa;
|
|
}
|
|
|
|
.entry:nth-child(10):before {
|
|
content: "0";
|
|
}
|
|
|
|
.entry .style-edit-link {
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.entry .style-edit-link,
|
|
.entry .delete {
|
|
display: inline-block;
|
|
padding: 0 1px 0;
|
|
}
|
|
|
|
.not-applied .checker,
|
|
.not-applied .style-name,
|
|
.not-applied .actions > * {
|
|
opacity: .2;
|
|
transition: opacity .5s ease-in-out .25s, color .5s ease-in-out .25s;
|
|
}
|
|
|
|
.not-applied:hover .checker,
|
|
.not-applied:hover .style-name,
|
|
.not-applied:hover .actions > * {
|
|
opacity: 1;
|
|
}
|
|
|
|
.not-applied:hover .style-name {
|
|
color: darkred;
|
|
}
|
|
|
|
.regexp-problem-indicator {
|
|
background-color: #d00;
|
|
width: 14px;
|
|
height: 14px;
|
|
line-height: 15px;
|
|
border-radius: 8px;
|
|
margin-right: 6px;
|
|
margin-left: 6px;
|
|
text-align: center;
|
|
color: white;
|
|
font-weight: bold;
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
font-size: 90%;
|
|
}
|
|
|
|
.regexp-partial .actions,
|
|
.regexp-invalid .actions {
|
|
order: 2;
|
|
}
|
|
|
|
#regexp-explanation {
|
|
position: fixed;
|
|
background-color: white;
|
|
left: 0;
|
|
right: 0;
|
|
padding: .5rem;
|
|
font-size: 90%;
|
|
border-top: 2px solid black;
|
|
border-bottom: 2px solid black;
|
|
box-shadow: 0 0 100px black;
|
|
display: flex;
|
|
flex-direction: column;
|
|
z-index: 999999;
|
|
}
|
|
|
|
#regexp-explanation > div {
|
|
display: none;
|
|
list-style-type: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.regexp-partial #regexp-partial,
|
|
.regexp-invalid #regexp-invalid {
|
|
display: block;
|
|
}
|
|
|
|
#regexp-explanation > div:not(:last-child) {
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
.svg-icon {
|
|
pointer-events: none;
|
|
transition: fill .5s;
|
|
width: 14px;
|
|
height: 16px;
|
|
fill: #666;
|
|
}
|
|
|
|
a:hover .svg-icon {
|
|
fill: #000;
|
|
}
|
|
|
|
body > .actions {
|
|
margin-top: 0.5em;
|
|
/* raise the actions above the hotkey-info */
|
|
position: relative;
|
|
z-index: 4;
|
|
}
|
|
|
|
.actions > div:not(:last-child):not(#disable-all-wrapper),
|
|
.actions > .main-controls > div:not(:last-child) {
|
|
margin-bottom: 0.75em;
|
|
}
|
|
|
|
.actions input,
|
|
.actions label {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
body.blocked #installed > *,
|
|
body.blocked .actions > .main-controls {
|
|
display: none;
|
|
}
|
|
|
|
/* Never shown, but can be enabled with a style */
|
|
|
|
.enable,
|
|
.disable {
|
|
display: none;
|
|
}
|
|
|
|
/* 'New style' links */
|
|
|
|
#write-style {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
#write-style-for {
|
|
margin-right: .6ex
|
|
}
|
|
|
|
.write-style-link {
|
|
margin-left: .6ex
|
|
}
|
|
|
|
.write-style-link::before {
|
|
content: "\00ad"; /* "soft" hyphen */
|
|
}
|
|
|
|
#match {
|
|
overflow-wrap: break-word;
|
|
display: block;
|
|
flex-grow: 9;
|
|
min-width: 200px;
|
|
}
|
|
|
|
/* "breadcrumbs" 'new style' links */
|
|
.breadcrumbs > .write-style-link {
|
|
margin-left: 0
|
|
}
|
|
|
|
.breadcrumbs:hover a {
|
|
color: #bbb;
|
|
text-decoration: none
|
|
}
|
|
|
|
/* "dot" after each subdomain name */
|
|
.breadcrumbs > .write-style-link[subdomain]::after {
|
|
content: "."
|
|
}
|
|
|
|
/* no "dot" after top-level domain */
|
|
.breadcrumbs > .write-style-link:nth-last-child(2)::after {
|
|
content: none
|
|
}
|
|
|
|
/* "forward slash" before path ("this URL") */
|
|
.breadcrumbs > .write-style-link:last-child::before {
|
|
content: "\200b/"
|
|
}
|
|
|
|
.breadcrumbs > .write-style-link:last-child:first-child::before,
|
|
.breadcrumbs > .write-style-link[subdomain=""] + .write-style-link::before {
|
|
content: none
|
|
}
|
|
|
|
/* suppress TLD-only link */
|
|
.breadcrumbs > .write-style-link[subdomain=""] {
|
|
display: none
|
|
}
|
|
|
|
/* :hover style */
|
|
.breadcrumbs.url\(\) > .write-style-link,
|
|
|
|
/* :hover or :focus on "this URL" sets class="url()" */
|
|
.breadcrumbs > .write-style-link:hover,
|
|
.breadcrumbs > .write-style-link:focus,
|
|
.breadcrumbs > .write-style-link:hover ~ .write-style-link[subdomain],
|
|
.breadcrumbs > .write-style-link:focus ~ .write-style-link[subdomain] {
|
|
color: inherit;
|
|
text-decoration: underline;
|
|
text-decoration-skip: ink;
|
|
}
|
|
|
|
/* action buttons */
|
|
|
|
#popup-options {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
padding: 1.2em 1px;
|
|
}
|
|
|
|
#popup-options button {
|
|
width: 32%;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.firefox #popup-options button {
|
|
width: 49%;
|
|
}
|
|
|
|
/* confirm */
|
|
|
|
#confirm {
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 2147483647;
|
|
display: none;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0 !important;
|
|
box-sizing: border-box;
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
animation: lights-off .5s cubic-bezier(.03, .67, .08, .94);
|
|
animation-fill-mode: both;
|
|
}
|
|
|
|
#confirm.lights-on {
|
|
animation: lights-on .25s ease-in-out;
|
|
animation-fill-mode: both;
|
|
}
|
|
|
|
#confirm.lights-on,
|
|
#confirm.lights-on > div {
|
|
display: none;
|
|
}
|
|
|
|
#confirm[data-display=true] {
|
|
display: flex;
|
|
}
|
|
|
|
#confirm > div {
|
|
width: 80%;
|
|
max-height: 80%;
|
|
min-height: 6em;
|
|
padding: 1em;
|
|
background-color: #fff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: solid 2px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
#confirm > div > *:not(:last-child) {
|
|
padding-bottom: .5em;
|
|
}
|
|
|
|
#confirm > div > div {
|
|
text-align: center;
|
|
}
|
|
|
|
.non-windows #confirm > div > div {
|
|
direction: rtl;
|
|
text-align: right;
|
|
}
|
|
|
|
#confirm > button {
|
|
/* add a gap between buttons both for horizontal
|
|
or vertical (when the label is wide) layout */
|
|
margin: 0 .25em .25em 0;
|
|
}
|
|
|
|
.unreachable .entry {
|
|
opacity: .25;
|
|
}
|
|
|
|
.unreachable .blocked-info {
|
|
border-bottom: 1px solid black;
|
|
}
|
|
|
|
.blocked-info {
|
|
hyphens: auto;
|
|
}
|
|
|
|
.blocked-info label {
|
|
padding: 5px 0;
|
|
display: block;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.blocked-info p {
|
|
padding: 1px 0 9px;
|
|
display: block;
|
|
font-size: 90%;
|
|
margin: 0;
|
|
}
|
|
|
|
/******************************************/
|
|
|
|
#hotkey-info {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 16px;
|
|
cursor: help;
|
|
margin: 0;
|
|
padding: 0;
|
|
z-index: 1;
|
|
hyphens: auto;
|
|
}
|
|
|
|
#hotkey-info:not([data-active]) > * {
|
|
display: none;
|
|
}
|
|
|
|
#hotkey-info[data-active] {
|
|
left: 6ex;
|
|
width: auto;
|
|
cursor: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-left: 2px solid white;
|
|
box-shadow: 0 0 90px rgba(0, 0, 0, .5);
|
|
z-index: 5;
|
|
}
|
|
|
|
#hotkey-info div:first-child {
|
|
flex-grow: 1;
|
|
padding: 0 1em;
|
|
font-size: 11px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
#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);
|
|
position: relative;
|
|
}
|
|
|
|
#hotkey-info p {
|
|
text-indent: -3px;
|
|
}
|
|
|
|
#hotkey-info p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
#hotkey-info mark {
|
|
display: inline-block;
|
|
background: linear-gradient(#ccc, #fff);
|
|
padding: 1px 6px 0;
|
|
margin: 2px;
|
|
border: 1px solid white;
|
|
border-radius: 4px;
|
|
box-shadow: 1px 1px 4px rgba(0, 0, 0, .3);
|
|
font-weight: bold;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/******************************************/
|
|
|
|
@keyframes lights-off {
|
|
from {
|
|
background-color: transparent;
|
|
}
|
|
to {
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
}
|
|
}
|
|
|
|
@keyframes lights-on {
|
|
from {
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
}
|
|
to {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
/* Popup adjustments for common zoom levels */
|
|
|
|
@media (-webkit-min-device-pixel-ratio: 1.05) {
|
|
#installed {
|
|
max-height: 420px;
|
|
}
|
|
}
|
|
@media (-webkit-min-device-pixel-ratio: 1.1) {
|
|
#installed {
|
|
max-height: 393px;
|
|
}
|
|
}
|
|
@media (-webkit-min-device-pixel-ratio: 1.15) {
|
|
#installed {
|
|
max-height: 371px;
|
|
}
|
|
}
|
|
@media (-webkit-min-device-pixel-ratio: 1.2) {
|
|
#installed {
|
|
max-height: 348px;
|
|
}
|
|
}
|
|
@media (-webkit-min-device-pixel-ratio: 1.25) {
|
|
#installed {
|
|
max-height: 326px;
|
|
}
|
|
}
|
|
@media (-webkit-min-device-pixel-ratio: 1.30) {
|
|
#installed {
|
|
max-height: 306px;
|
|
}
|
|
}
|
|
@media (-webkit-min-device-pixel-ratio: 1.35) {
|
|
#installed {
|
|
max-height: 288px;
|
|
}
|
|
}
|
|
@media (-webkit-min-device-pixel-ratio: 1.4) {
|
|
#installed {
|
|
max-height: 271px;
|
|
}
|
|
}
|
|
@media (-webkit-min-device-pixel-ratio: 1.45) {
|
|
#installed {
|
|
max-height: 256px;
|
|
}
|
|
}
|
|
@media (-webkit-min-device-pixel-ratio: 1.5) {
|
|
#installed {
|
|
max-height: 244px;
|
|
}
|
|
}
|
|
@media (-webkit-min-device-pixel-ratio: 1.55) {
|
|
#installed {
|
|
max-height: 199px;
|
|
}
|
|
}
|
|
@media (-webkit-min-device-pixel-ratio: 1.75) {
|
|
#installed {
|
|
max-height: 144px;
|
|
}
|
|
}
|