Add files via upload
This commit is contained in:
narcolepticinsomniac
GitHub
parent
856d95b3f1
commit
c0f8a8dd79
|
|
@ -120,7 +120,7 @@ var hotkeys = (() => {
|
|||
const container = $('#hotkey-info');
|
||||
let title;
|
||||
container.onclick = ({target}) => {
|
||||
if (target.localName === 'button') {
|
||||
if (target.localName === 'button' || target.id === 'popup-confirm-icon') {
|
||||
close();
|
||||
} else if (!container.dataset.active) {
|
||||
open();
|
||||
|
|
@ -174,10 +174,11 @@ var hotkeys = (() => {
|
|||
}));
|
||||
[
|
||||
linesToElements(t('popupHotkeysInfo')),
|
||||
$create('button', t('confirmOK')),
|
||||
$create('button', {className: 'classicUI-el', id: 'confirm-button'}, t('confirmOK')),
|
||||
].forEach(child => {
|
||||
container.appendChild($create('div', child));
|
||||
});
|
||||
$('#confirm-button').insertAdjacentElement('afterend', template.confirmHotkey)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
716
popup/popup.css
716
popup/popup.css
|
|
@ -24,6 +24,8 @@ body {
|
|||
font-size: 12px;
|
||||
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.firefox body {
|
||||
|
|
@ -31,7 +33,7 @@ body {
|
|||
background-color: #fff;
|
||||
}
|
||||
|
||||
body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
|
||||
#confirm {
|
||||
margin-left: var(--outer-padding);
|
||||
margin-right: var(--outer-padding);
|
||||
}
|
||||
|
|
@ -58,15 +60,15 @@ body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
#installed.disabled + .actions #disableAll:checked + .svg-icon.checked {
|
||||
body.disabled #disableAll:checked + .svg-icon.checked {
|
||||
fill: hsl(0, 68%, 42%);
|
||||
}
|
||||
|
||||
#installed.disabled + .actions #disableAll:checked {
|
||||
body.disabled #disableAll:checked {
|
||||
border-color: hsl(0, 68%, 50%);
|
||||
}
|
||||
|
||||
#installed.disabled + .actions #disableAll:checked:hover + .svg-icon.checked {
|
||||
body.disabled #disableAll:checked:hover + .svg-icon.checked {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
|
|
@ -79,7 +81,7 @@ body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
|
|||
color: hsl(0, 68%, 42%);
|
||||
}
|
||||
|
||||
#installed.disabled + .actions #disableAll:checked:hover {
|
||||
body.disabled #disableAll:checked:hover {
|
||||
border-color: hsl(0, 50%, 56%);
|
||||
background-color: hsl(0, 50%, 56%);
|
||||
}
|
||||
|
|
@ -132,34 +134,308 @@ a:hover {
|
|||
color: #666;
|
||||
}
|
||||
|
||||
.actions > .main-controls {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.main-controls {
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
body > DIV:last-of-type,
|
||||
body.blocked > DIV {
|
||||
body > div:last-of-type,
|
||||
body.blocked > div {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
body > div:not(#installed):not(#search-results-error) {
|
||||
background: hsl(0, 0%, 95%);
|
||||
}
|
||||
|
||||
#search-results {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
#installed {
|
||||
border-bottom: 1px solid black;
|
||||
padding-bottom: 2px;
|
||||
padding-top: 2px;
|
||||
border-bottom: 1px solid hsl(0, 0%, 80%);
|
||||
max-height: 445px;
|
||||
overflow-y: auto;
|
||||
counter-reset: style-number;
|
||||
position: relative;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
#installed.disabled .style-name {
|
||||
#write-styles-wrapper,
|
||||
.classicUI #disable-all-wrapper {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
body.disabled .toggle-all-off,
|
||||
body:not(.disabled) .toggle-all-on {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#popup-write-style-icon {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
#write-styles-wrapper {
|
||||
padding: var(--outer-padding);
|
||||
}
|
||||
|
||||
.action-wrapper {
|
||||
display: inline-flex;
|
||||
flex-shrink: 1;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#popup-manage-wrapper {
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
#disable-all-wrapper {
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
#find-styles-wrapper.action-wrapper {
|
||||
flex-grow: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* accessibility */
|
||||
.main-controls .style-edit-link-accessibility {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
pointer-events: none
|
||||
}
|
||||
|
||||
.style-edit-link-accessibility:not([data-focused-via-click]):focus + .style-name,
|
||||
.entry .actions > a:not([data-focused-via-click]):focus {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
#popup-manage-icon,
|
||||
#popup-options-icon,
|
||||
#popup-wiki-icon,
|
||||
#disable-all-icon,
|
||||
#popup-confirm-icon {
|
||||
display: inline-flex;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#popup-wiki-icon .svg-icon,
|
||||
#find-styles-icon .svg-icon {
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
}
|
||||
|
||||
#find-inline-icon {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
#popup-confirm-icon {
|
||||
cursor: pointer;
|
||||
margin: -5px 0;
|
||||
}
|
||||
|
||||
#popup-options-icon .svg-icon,
|
||||
#popup-confirm-icon .svg-icon {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
#disable-all-icon .svg-icon {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
#write-style-for .svg-icon {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
#find-external-icon,
|
||||
#find-external-icon-noclick,
|
||||
#find-inline-icon {
|
||||
height: 20px;
|
||||
padding-top: 3px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#popup-manage-icon .svg-icon,
|
||||
#find-external-icon .svg-icon,
|
||||
#find-external-icon-noclick .svg-icon,
|
||||
#find-inline-icon .svg-icon,
|
||||
a[target="_blank"] .svg-icon.config {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
#popup-manage-icon .svg-icon {
|
||||
stroke: #666;
|
||||
fill: transparent;
|
||||
transition: stroke .5s;
|
||||
}
|
||||
|
||||
#popup-manage-icon:hover .svg-icon {
|
||||
stroke: #000;
|
||||
}
|
||||
|
||||
#find-styles-link,
|
||||
#write-style-for {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
#write-style-wrapper {
|
||||
flex-basis: 100%;
|
||||
padding: var(--outer-padding);
|
||||
}
|
||||
|
||||
#find-styles {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#find-styles-inline-group input[type="checkbox"] ~ #find-external-icon,
|
||||
.search-results-shown #find-external-icon-noclick,
|
||||
.error-shown #find-external-icon-noclick,
|
||||
#find-styles-icon {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
#find-styles-inline-group input[type="checkbox"]:checked ~ #find-external-icon,
|
||||
#find-styles-inline-group input[type="checkbox"]:not(:checked) ~ #find-inline-icon,
|
||||
#find-external-icon-noclick {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-results-shown #find-external-icon,
|
||||
.search-results-shown #find-inline-icon,
|
||||
.error-shown #find-external-icon,
|
||||
.error-shown #find-inline-icon {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#find-styles-inline-group,
|
||||
#find-inline-icon {
|
||||
display: inline-flex;
|
||||
height: min-content;
|
||||
}
|
||||
|
||||
#find-styles-inline-group label {
|
||||
display: inline-flex;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#find-inline-icon,
|
||||
#find-external-icon {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.svg-icon.write-style path:first-child {
|
||||
stroke: #666;
|
||||
stroke-width: 1px;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.svg-icon.toggled-on,
|
||||
.svg-icon.toggled-off {
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
}
|
||||
|
||||
.svg-icon.toggled-on path,
|
||||
.svg-icon.toggled-off path {
|
||||
transition: fill .5s, stroke .5s;
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
}
|
||||
|
||||
.svg-icon.toggled-on path:first-child,
|
||||
.svg-icon.toggled-on path:nth-child(2) {
|
||||
fill: hsl(0, 0%, 94%);
|
||||
}
|
||||
|
||||
a:hover .svg-icon.toggled-on path:first-child,
|
||||
a:hover .svg-icon.toggled-on path:nth-child(2) {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.svg-icon.toggled-off path:first-child,
|
||||
.svg-icon.toggled-off path:nth-child(2) {
|
||||
fill: hsl(0, 0%, 84%);
|
||||
}
|
||||
|
||||
a:hover .svg-icon.toggled-off path:first-child,
|
||||
a:hover .svg-icon.toggled-off path:nth-child(2) {
|
||||
fill: hsl(0, 0%, 90%);
|
||||
}
|
||||
|
||||
.svg-icon.toggled-on path:nth-child(2),
|
||||
.svg-icon.toggled-off path:nth-child(2) {
|
||||
stroke: hsl(0, 0%, 50%);
|
||||
stroke-width: 1px;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
a:hover .svg-icon.toggled-on path:nth-child(2),
|
||||
a:hover .svg-icon.toggled-off path:nth-child(2) {
|
||||
stroke: #000;
|
||||
}
|
||||
|
||||
a:hover .svg-icon.toggled-on path:nth-child(3),
|
||||
a:hover .svg-icon.toggled-off path:nth-child(3) {
|
||||
fill: #000;
|
||||
}
|
||||
|
||||
|
||||
.svg-icon.toggled-on path:nth-child(3),
|
||||
.svg-icon.toggled-off path:nth-child(3) {
|
||||
fill: hsl(0, 0%, 30%);
|
||||
}
|
||||
|
||||
.entry.disabled .actions > .enable,
|
||||
.entry.enabled .actions > .disable {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.entry.disabled .actions > .disable,
|
||||
.entry.enabled .actions > .enable,
|
||||
.toggleUI .entry.disabled .actions > .enable,
|
||||
.toggleUI .entry.enabled .actions > .disable,
|
||||
.toggleUI .directLinkUI-el {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.classicUI #find-styles-inline-group label {
|
||||
position: relative;
|
||||
padding-left: 16px;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.toggleUI .style-name {
|
||||
padding-left: 26px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.iconUI .classicUI-el,
|
||||
.classicUI .iconUI-el,
|
||||
.directLinkUI .toggleUI-el,
|
||||
.toggleUI .editUI-el {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.iconUI #disable-all-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body.disabled .style-name {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
#installed.disabled + .actions #disableAll-label {
|
||||
body.disabled + .actions #disableAll-label {
|
||||
font-weight: bold;
|
||||
color: firebrick;
|
||||
}
|
||||
|
|
@ -204,8 +480,14 @@ html[style] .entry {
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding-left: 26px;
|
||||
padding-left: var(--outer-padding);
|
||||
position: relative;
|
||||
transition: color .1s, opacity 1s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.style-name:hover {
|
||||
color: hsl(180, 100%, 20%);
|
||||
}
|
||||
|
||||
.entry .style-name::before {
|
||||
|
|
@ -218,6 +500,7 @@ html[style] .entry {
|
|||
background: linear-gradient(to right, hsla(180, 50%, 30%, 0.2), hsla(180, 20%, 10%, 0.05) 50%, transparent);
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
transition: opacity .1s;
|
||||
will-change: opacity;
|
||||
}
|
||||
|
|
@ -226,16 +509,66 @@ html[style] .entry {
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
.entry.disabled .style-name,
|
||||
.entry.disabled .actions > a,
|
||||
.entry.regexp-partial .style-name,
|
||||
.entry.regexp-partial .actions > a,
|
||||
.unreachable .entry .style-name,
|
||||
.unreachable .entry .actions > a {
|
||||
opacity: .35;
|
||||
transition: opacity .1s;
|
||||
}
|
||||
|
||||
/***** adjust disabled opacity on zebra-striping *****/
|
||||
|
||||
#installed:not(.reverse-stripe) .entry.disabled:nth-child(even) .style-name,
|
||||
#installed:not(.reverse-stripe) .entry.disabled:nth-child(even) .actions > a,
|
||||
#installed:not(.reverse-stripe) .entry.regexp-partial:nth-child(even) .style-name,
|
||||
#installed:not(.reverse-stripe) .entry.regexp-partial:nth-child(even) .actions > a,
|
||||
#installed:not(.reverse-stripe) .unreachable .entry:nth-child(even) .style-name,
|
||||
#installed:not(.reverse-stripe) .unreachable .entry:nth-child(even) .actions > a,
|
||||
.reverse-stripe .entry.disabled:nth-child(odd) .style-name,
|
||||
.reverse-stripe .entry.disabled:nth-child(odd) .actions > a,
|
||||
.reverse-stripe .entry.regexp-partial:nth-child(odd) .style-name,
|
||||
.reverse-stripe .entry.regexp-partial:nth-child(odd) .actions > a,
|
||||
.reverse-stripe .unreachable .entry:nth-child(odd) .style-name,
|
||||
.reverse-stripe .unreachable .entry:nth-child(odd) .actions > a {
|
||||
opacity: .3;
|
||||
}
|
||||
|
||||
.entry.disabled:before,
|
||||
.entry.regexp-partial:before,
|
||||
.unreachable .entry:before {
|
||||
opacity: .6;
|
||||
transition: opacity .1s;
|
||||
}
|
||||
|
||||
.entry:hover .style-name,
|
||||
.entry:hover .actions > a,
|
||||
.entry:hover:before {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.entry .main-controls {
|
||||
height: 100%;
|
||||
display: inline-flex;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
padding-right: 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.entry:nth-child(even) {
|
||||
.entry .actions {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.entry:nth-child(odd),
|
||||
.reverse-stripe .entry:nth-child(even) {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.entry:nth-child(even),
|
||||
.reverse-stripe .entry:nth-child(odd) {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
|
|
@ -265,9 +598,24 @@ html[style*="border"] .entry:nth-child(11):before {
|
|||
}
|
||||
|
||||
.entry .actions > * {
|
||||
display: inline-block;
|
||||
padding: 0 1px;
|
||||
margin: 0 1px;
|
||||
height: 26px;
|
||||
width: 20px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.entry .actions > .enable,
|
||||
.entry .actions > .disable {
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.entry .actions > .configure {
|
||||
padding-right: 1px;
|
||||
}
|
||||
|
||||
.entry .actions > .configure[target="_blank"] {
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
.not-applied .checker,
|
||||
|
|
@ -301,6 +649,7 @@ html[style*="border"] .entry:nth-child(11):before {
|
|||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
font-size: 90%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.regexp-partial .actions,
|
||||
|
|
@ -342,15 +691,55 @@ html[style*="border"] .entry:nth-child(11):before {
|
|||
.svg-icon {
|
||||
pointer-events: none;
|
||||
transition: fill .5s;
|
||||
width: 14px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: #666;
|
||||
}
|
||||
|
||||
a:hover .svg-icon {
|
||||
a:hover .svg-icon,
|
||||
.actions a:hover .svg-icon,
|
||||
#find-styles:hover a:hover .svg-icon.external:not(.noclick),
|
||||
#find-styles:hover a:hover .svg-icon.inline,
|
||||
a:hover .svg-icon.search {
|
||||
fill: #000;
|
||||
}
|
||||
|
||||
.svg-icon.external,
|
||||
.svg-icon.inline {
|
||||
fill: hsl(0, 0%, 65%);
|
||||
}
|
||||
|
||||
.actions .svg-icon,
|
||||
.svg-icon.options {
|
||||
fill: hsl(0, 0%, 50%);
|
||||
}
|
||||
|
||||
.svg-icon.search,
|
||||
#find-styles:hover .svg-icon.external:not(.noclick),
|
||||
#find-styles:hover .svg-icon.inline {
|
||||
fill: hsl(0, 0%, 45%);
|
||||
}
|
||||
|
||||
.svg-icon.remove {
|
||||
height: 16px;
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
#disable-all-icon {
|
||||
transition: transform .5s;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
#disable-all-icon:hover .svg-icon,
|
||||
body.disabled #disable-all-icon .svg-icon {
|
||||
fill: hsl(0, 100%, 42%);
|
||||
}
|
||||
|
||||
body.disabled #disable-all-icon {
|
||||
transform: rotate(180deg);
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
|
||||
body > .actions {
|
||||
margin-top: 0.5em;
|
||||
/* raise the actions above the hotkey-info */
|
||||
|
|
@ -369,15 +758,19 @@ body > .actions {
|
|||
}
|
||||
|
||||
body.blocked #installed > *,
|
||||
body.blocked .actions > .main-controls {
|
||||
body.blocked #find-styles-wrapper,
|
||||
body.blocked #write-style-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Never shown, but can be enabled with a style */
|
||||
.iconUI body.blocked #popup-options-wrapper {
|
||||
flex-grow: 1;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.entry .actions > .enable,
|
||||
.entry .actions > .disable {
|
||||
display: none;
|
||||
.iconUI body.blocked #popup-wiki-wrapper {
|
||||
flex-grow: 1;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* 'New style' links */
|
||||
|
|
@ -385,11 +778,11 @@ body.blocked .actions > .main-controls {
|
|||
#write-style {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
#write-style-for {
|
||||
margin-right: .6ex
|
||||
margin-right: .2rem;
|
||||
}
|
||||
|
||||
.write-style-link {
|
||||
|
|
@ -401,10 +794,17 @@ body.blocked .actions > .main-controls {
|
|||
}
|
||||
|
||||
#match {
|
||||
overflow-wrap: break-word;
|
||||
display: block;
|
||||
flex-grow: 9;
|
||||
min-width: 200px;
|
||||
display: inline-flex;
|
||||
flex-grow: 1;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
#match > .breadcrumbs {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
#match > .breadcrumbs > * {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* "breadcrumbs" 'new style' links */
|
||||
|
|
@ -457,27 +857,18 @@ body.blocked .actions > .main-controls {
|
|||
|
||||
/* action buttons */
|
||||
|
||||
#popup-options {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: var(--outer-padding) 1px;
|
||||
}
|
||||
|
||||
#popup-options button {
|
||||
#popup-manage-wrapper button,
|
||||
#popup-options-wrapper button,
|
||||
#popup-wiki-wrapper button {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 2px 4px;
|
||||
margin-right: 4px;
|
||||
/* several languages have labels of wildly different lengths so we try to maintain the proportion */
|
||||
flex: 1 1 auto;
|
||||
min-width: 2em;
|
||||
}
|
||||
|
||||
#popup-options button:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* confirm */
|
||||
|
||||
#confirm {
|
||||
|
|
@ -516,9 +907,9 @@ body.blocked .actions > .main-controls {
|
|||
max-height: 80%;
|
||||
min-height: 6em;
|
||||
padding: 1em;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: hsl(0, 0%, 95%);
|
||||
border: solid 2px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
|
|
@ -526,10 +917,35 @@ body.blocked .actions > .main-controls {
|
|||
padding-bottom: .5em;
|
||||
}
|
||||
|
||||
#confirm > div > div {
|
||||
#confirm > div > div.classicUI-el {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#confirm > div > div.iconUI-el {
|
||||
display: flex;
|
||||
flex-basis: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.iconUI #confirm > div {
|
||||
padding-bottom: .25em
|
||||
}
|
||||
|
||||
#popup-delete-icon.action-wrapper,
|
||||
#popup-cancel-icon.action-wrapper {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#popup-delete-icon {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
#popup-cancel-icon {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.non-windows #confirm > div > div {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
|
|
@ -541,12 +957,8 @@ body.blocked .actions > .main-controls {
|
|||
margin: 0 .25em .25em 0;
|
||||
}
|
||||
|
||||
.unreachable .entry {
|
||||
opacity: .25;
|
||||
}
|
||||
|
||||
.unreachable .blocked-info {
|
||||
border-bottom: 1px solid black;
|
||||
border-bottom: 1px solid hsl(0, 0%, 80%);
|
||||
}
|
||||
|
||||
.blocked-info {
|
||||
|
|
@ -554,13 +966,13 @@ body.blocked .actions > .main-controls {
|
|||
}
|
||||
|
||||
.blocked-info label {
|
||||
padding: 5px 0;
|
||||
padding: 5px var(--outer-padding);
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.blocked-info p {
|
||||
padding: 1px 0 var(--outer-padding);
|
||||
padding: 1px var(--outer-padding) var(--outer-padding);
|
||||
display: block;
|
||||
font-size: 90%;
|
||||
margin: 0;
|
||||
|
|
@ -608,10 +1020,11 @@ body.blocked .actions > .main-controls {
|
|||
#hotkey-info div {
|
||||
padding: 1em;
|
||||
border-top: 1px solid #ddd;
|
||||
background-color: white;
|
||||
background-color: hsl(0, 0%, 95%);
|
||||
}
|
||||
|
||||
#hotkey-info div:last-child {
|
||||
background-color: hsl(0, 0%, 85%);
|
||||
box-shadow: 0 0 90px rgba(0, 0, 0, .25);
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -636,6 +1049,187 @@ body.blocked .actions > .main-controls {
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/***** icon UI actions on top *****/
|
||||
|
||||
.actions-top #confirm {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.actions-top #installed {
|
||||
order: 8;
|
||||
border-top: 1px solid hsl(0, 0%, 80%);
|
||||
}
|
||||
|
||||
.actions-top body:not(.search-results-shown) #installed {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.actions-top #popup-manage-wrapper {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.actions-top #popup-options-wrapper {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.actions-top #find-styles-wrapper {
|
||||
order: 4;
|
||||
}
|
||||
|
||||
.actions-top #popup-wiki-wrapper {
|
||||
order: 5;
|
||||
}
|
||||
|
||||
.actions-top #disable-all-wrapper {
|
||||
order: 6;
|
||||
}
|
||||
|
||||
.actions-top #write-style-wrapper {
|
||||
order: 7;
|
||||
}
|
||||
|
||||
.actions-top #search-results-error {
|
||||
order: 9;
|
||||
}
|
||||
|
||||
.actions-top #search-results {
|
||||
order: 10;
|
||||
}
|
||||
|
||||
/***** classic UI *****/
|
||||
|
||||
.classicUI #confirm {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.classicUI #installed {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.classicUI #popup-manage-wrapper {
|
||||
order: 6;
|
||||
}
|
||||
|
||||
.classicUI #popup-options-wrapper {
|
||||
order: 7;
|
||||
}
|
||||
|
||||
.classicUI #find-styles-wrapper {
|
||||
order: 4;
|
||||
}
|
||||
|
||||
.classicUI #popup-wiki-wrapper {
|
||||
order: 8;
|
||||
}
|
||||
|
||||
.classicUI #disable-all-wrapper {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.classicUI #write-style-wrapper {
|
||||
order: 5;
|
||||
}
|
||||
|
||||
.classicUI #search-results-error {
|
||||
order: 9;
|
||||
}
|
||||
|
||||
.classicUI #search-results {
|
||||
order: 10;
|
||||
}
|
||||
|
||||
.classicUI #write-style {
|
||||
flex-wrap: wrap;
|
||||
padding: 0 4px 0 16px;
|
||||
}
|
||||
|
||||
.classicUI #find-styles-wrapper {
|
||||
align-items: baseline;
|
||||
justify-content: flex-start;
|
||||
padding: 0 4px 0 25px;
|
||||
}
|
||||
|
||||
.classicUI #disable-all-wrapper {
|
||||
padding: .6rem var(--outer-padding) .45rem;
|
||||
}
|
||||
|
||||
.classicUI #find-styles-link {
|
||||
font-size: 12px;
|
||||
margin-right: .55rem;
|
||||
}
|
||||
|
||||
.classicUI #write-style-for {
|
||||
font-size: 12px;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.classicUI #popup-manage-wrapper,
|
||||
.classicUI #popup-options-wrapper,
|
||||
.classicUI #popup-wiki-wrapper {
|
||||
flex-grow: 1;
|
||||
padding-bottom: var(--outer-padding);
|
||||
}
|
||||
|
||||
.classicUI #popup-manage-wrapper {
|
||||
padding-left: var(--outer-padding);
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.classicUI #popup-wiki-wrapper {
|
||||
padding-left: 4px;
|
||||
padding-right: var(--outer-padding);
|
||||
}
|
||||
|
||||
.toggleUI .style-name:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.toggleUI .entry .style-name::before {
|
||||
background: linear-gradient(to right, hsla(0, 0%, 0%, 0.15), hsla(0, 0%, 0%, 0.05) 50%, transparent);
|
||||
}
|
||||
|
||||
/***** classic UI actions on top *****/
|
||||
|
||||
.classicUI.actions-top #confirm {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.classicUI.actions-top #installed {
|
||||
order: 8;
|
||||
}
|
||||
|
||||
.classicUI.actions-top #popup-manage-wrapper {
|
||||
order: 5;
|
||||
}
|
||||
|
||||
.classicUI.actions-top #popup-options-wrapper {
|
||||
order: 6;
|
||||
}
|
||||
|
||||
.classicUI.actions-top #find-styles-wrapper {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.classicUI.actions-top #popup-wiki-wrapper {
|
||||
order: 7;
|
||||
}
|
||||
|
||||
.classicUI.actions-top #disable-all-wrapper {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.classicUI.actions-top #write-style-wrapper {
|
||||
order: 4;
|
||||
}
|
||||
|
||||
.classicUI.actions-top #search-results-error {
|
||||
order: 9;
|
||||
}
|
||||
|
||||
.classicUI.actions-top #search-results {
|
||||
order: 10;
|
||||
}
|
||||
|
||||
/******************************************/
|
||||
|
||||
@keyframes lights-off {
|
||||
|
|
|
|||
|
|
@ -11,6 +11,22 @@ const ENTRY_ID_PREFIX = '#' + ENTRY_ID_PREFIX_RAW;
|
|||
|
||||
toggleSideBorders();
|
||||
|
||||
if (prefs.get('popupui') === 1) {
|
||||
document.documentElement.classList.add('classicUI');
|
||||
} else {
|
||||
document.documentElement.classList.add('iconUI');
|
||||
}
|
||||
|
||||
if (prefs.get('popupclick') === 1) {
|
||||
document.documentElement.classList.add('toggleUI');
|
||||
} else {
|
||||
document.documentElement.classList.add('directLinkUI');
|
||||
}
|
||||
|
||||
if (!prefs.get('popup.stylesFirst')) {
|
||||
document.documentElement.classList.add('actions-top');
|
||||
}
|
||||
|
||||
getActiveTab().then(tab =>
|
||||
FIREFOX && tab.url === 'about:blank' && tab.status === 'loading'
|
||||
? getTabRealURLFirefox(tab)
|
||||
|
|
@ -81,8 +97,17 @@ function initPopup() {
|
|||
|
||||
// action buttons
|
||||
$('#disableAll').onchange = function () {
|
||||
installed.classList.toggle('disabled', this.checked);
|
||||
document.body.classList.toggle('disabled', this.checked);
|
||||
};
|
||||
|
||||
$('#disable-all-icon').onclick = () => {
|
||||
$('#disableAll').click();
|
||||
};
|
||||
|
||||
$('#find-styles-icon').onclick = () => {
|
||||
$('#find-styles-link').click();
|
||||
};
|
||||
|
||||
setupLivePrefs();
|
||||
|
||||
Object.assign($('#popup-manage-button'), {
|
||||
|
|
@ -91,18 +116,35 @@ function initPopup() {
|
|||
oncontextmenu: handleEvent.openManager,
|
||||
});
|
||||
|
||||
Object.assign($('#popup-manage-icon'), {
|
||||
onclick: handleEvent.openManager,
|
||||
onmouseup: handleEvent.openManager,
|
||||
oncontextmenu: handleEvent.openManager,
|
||||
});
|
||||
|
||||
$('#find-external-icon').onclick = () => {
|
||||
event.preventDefault();
|
||||
$('input.toggle-inline').click()
|
||||
};
|
||||
|
||||
$('#find-inline-icon').onclick = () => {
|
||||
event.preventDefault();
|
||||
$('input.toggle-inline').click()
|
||||
};
|
||||
|
||||
$('#popup-options-button').onclick = () => {
|
||||
chrome.runtime.openOptionsPage();
|
||||
window.close();
|
||||
};
|
||||
|
||||
$('#popup-options-icon').onclick = () => {
|
||||
chrome.runtime.openOptionsPage();
|
||||
window.close();
|
||||
};
|
||||
|
||||
$('#popup-wiki-button').onclick = handleEvent.openURLandHide;
|
||||
|
||||
if (!prefs.get('popup.stylesFirst')) {
|
||||
document.body.insertBefore(
|
||||
$('body > .actions'),
|
||||
installed);
|
||||
}
|
||||
$('#popup-wiki-icon').onclick = handleEvent.openURLandHide;
|
||||
|
||||
if (!tabURL) {
|
||||
document.body.classList.add('blocked');
|
||||
|
|
@ -241,6 +283,11 @@ function showStyles(styles) {
|
|||
}
|
||||
window.dispatchEvent(new Event('showStyles:done'));
|
||||
});
|
||||
|
||||
var reverseZebra = $('.entry:last-child:nth-of-type(odd)');
|
||||
if (typeof(reverseZebra) !== 'undefined' && reverseZebra !== null) {
|
||||
$('#installed').classList.add('reverse-stripe');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -272,6 +319,12 @@ function createStyleElement({
|
|||
onclick: handleEvent.openLink,
|
||||
});
|
||||
|
||||
const editLinkAccess = $('.style-edit-link-accessibility', entry);
|
||||
Object.assign(editLinkAccess, {
|
||||
href: editLinkAccess.getAttribute('href') + style.id,
|
||||
onclick: handleEvent.openLink,
|
||||
});
|
||||
|
||||
const styleName = $('.style-name', entry);
|
||||
Object.assign(styleName, {
|
||||
htmlFor: ENTRY_ID_PREFIX_RAW + style.id,
|
||||
|
|
@ -323,7 +376,11 @@ Object.assign(handleEvent, {
|
|||
},
|
||||
|
||||
name(event) {
|
||||
this.checkbox.dispatchEvent(new MouseEvent('click'));
|
||||
if (prefs.get('popupclick') === 1) {
|
||||
this.checkbox.dispatchEvent(new MouseEvent('click'));
|
||||
} else {
|
||||
$('.style-edit-link').click();
|
||||
}
|
||||
event.preventDefault();
|
||||
},
|
||||
|
||||
|
|
@ -341,9 +398,12 @@ Object.assign(handleEvent, {
|
|||
box.dataset.display = true;
|
||||
box.style.cssText = '';
|
||||
$('b', box).textContent = $('.style-name', entry).textContent;
|
||||
$('[data-cmd="ok"]', box).focus();
|
||||
$('[data-cmd="ok"]', box).onclick = () => confirm(true);
|
||||
$('[data-cmd="cancel"]', box).onclick = () => confirm(false);
|
||||
$('button[data-cmd="ok"]', box).focus();
|
||||
$('button[data-cmd="ok"]', box).onclick = () => confirm(true);
|
||||
$('button[data-cmd="cancel"]', box).onclick = () => confirm(false);
|
||||
$('a[data-cmd="ok"]', box).focus();
|
||||
$('a[data-cmd="ok"]', box).onclick = () => confirm(true); event.preventDefault();
|
||||
$('a[data-cmd="cancel"]', box).onclick = () => confirm(false); event.preventDefault();
|
||||
window.onkeydown = event => {
|
||||
const keyCode = event.keyCode || event.which;
|
||||
if (!event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey
|
||||
|
|
@ -429,7 +489,7 @@ Object.assign(handleEvent, {
|
|||
event.preventDefault();
|
||||
getActiveTab()
|
||||
.then(activeTab => API.openURL({
|
||||
url: this.href || this.dataset.href,
|
||||
url: this.hasAttribute('href') && this.hasAttribute('data-href') === true ? this.dataset.href : this.href || this.dataset.href,
|
||||
index: activeTab.index + 1,
|
||||
message: tryJSONparse(this.dataset.sendMessage),
|
||||
}))
|
||||
|
|
@ -474,6 +534,13 @@ function handleDelete(id) {
|
|||
if (!$('.entry')) {
|
||||
installed.appendChild(template.noStyles.cloneNode(true));
|
||||
}
|
||||
|
||||
var reverseZebra = $('.entry:last-child:nth-of-type(odd)');
|
||||
if (typeof(reverseZebra) !== 'undefined' && reverseZebra !== null) {
|
||||
$('#installed').classList.add('reverse-stripe');
|
||||
} else {
|
||||
$('#installed').classList.remove('reverse-stripe');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -18,15 +18,17 @@ body.search-results-shown {
|
|||
|
||||
#search-results {
|
||||
position: relative;
|
||||
margin-top: -1em;
|
||||
}
|
||||
|
||||
#search-results-error {
|
||||
background-color: rgba(255, 0, 0, 0.4);
|
||||
flex-basis: 100%;
|
||||
background-color: hsla(0, 100%, 30%, .8);
|
||||
color: #fff;
|
||||
text-shadow: 2px 1px 1px #000;
|
||||
font-weight: bold;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
margin: 0 0 var(--outer-padding);
|
||||
margin: 0 var(--outer-padding) var(--outer-padding);
|
||||
}
|
||||
|
||||
#search-results-list {
|
||||
|
|
@ -49,6 +51,10 @@ body.search-results-shown {
|
|||
background-color: #eee;
|
||||
}
|
||||
|
||||
.search-result:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.search-result:hover {
|
||||
border-color: #000;
|
||||
background-color: #fff;
|
||||
|
|
@ -227,8 +233,7 @@ body.search-results-shown {
|
|||
}
|
||||
|
||||
.search-results-nav[data-type="bottom"] {
|
||||
margin-top: -1em;
|
||||
margin-bottom: 1em;
|
||||
margin: 1.25rem 0 .5rem;
|
||||
}
|
||||
|
||||
#search-results .search-results-nav button {
|
||||
|
|
@ -252,11 +257,6 @@ body.search-results-shown {
|
|||
text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
#find-styles-inline-group label {
|
||||
position: relative;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
/* spinner: https://github.com/loadingio/css-spinner */
|
||||
.lds-spinner {
|
||||
-webkit-user-select: none;
|
||||
|
|
|
|||
|
|
@ -94,7 +94,9 @@ window.addEventListener('showStyles:done', function _() {
|
|||
function init() {
|
||||
setTimeout(() => document.body.classList.add(BODY_CLASS));
|
||||
|
||||
$('#find-styles-inline-group').classList.add('hidden');
|
||||
if (prefs.get('popupui') === 1) {
|
||||
$('#find-styles-inline-group').classList.add('hidden');
|
||||
}
|
||||
|
||||
dom.container = $('#search-results');
|
||||
dom.container.dataset.empty = '';
|
||||
|
|
@ -207,6 +209,7 @@ window.addEventListener('showStyles:done', function _() {
|
|||
dom.error.classList.remove('hidden');
|
||||
dom.container.classList.toggle('hidden', !processedResults.length);
|
||||
document.body.classList.toggle('search-results-shown', processedResults.length > 0);
|
||||
document.documentElement.classList.add('error-shown');
|
||||
if (dom.error.getBoundingClientRect().bottom < 0) {
|
||||
dom.error.scrollIntoView({behavior: 'smooth', block: 'start'});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user