diff --git a/popup.css b/popup.css deleted file mode 100644 index 51307bff..00000000 --- a/popup.css +++ /dev/null @@ -1,623 +0,0 @@ -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; -} - -input[type=checkbox] { - margin: 0; - outline: none; -} - -#disable-all-wrapper { - padding: 0.3em 0 0.6em; -} - -#disable-all-wrapper .main-controls { - display: flex; -} - -#disable-all-wrapper .main-controls label{ - 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 .checker { - position: absolute; - top: 7px; - left: 9px; - pointer-events: none; -} - -.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; - } -}