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

Opt-out of buggy embedded options

Browse Source
This commit is contained in:
narcolepticinsomniac 2020-01-17 00:19:53 -05:00 committed by GitHub
parent 061ad266c4
commit e6b4c5beb9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 65 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
options/options.css
View File

@ -1,12 +1,9 @@
html.opera { html {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%; height: 100vh;
} background-color: hsl(170, 30%, 92%);
html.opera body {
width: auto;
} }
body { body {
@ -14,23 +11,46 @@ body {
margin: 0; margin: 0;
font-family: "Helvetica Neue", Helvetica, sans-serif; font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 12px; font-size: 12px;
min-width: 480px; display: flex;
flex-direction: column;
width: auto;
max-width: 800px; max-width: 800px;
width: max-content; max-height: calc(100vh - 32px);
overflow-x: hidden; border: 1px solid #999;
box-shadow: 0px 5px 15px 3px hsla(0, 0%, 0%, .35);
animation-name: scaleFadeIn;
animation-duration: .2s;
animation-fill-mode: both;
will-change: transform, opacity;
} }
@supports (-moz-appearance:none) { #options {
body { overflow-y: auto;
--addons-page-left-padding: 6px; }
/* compensate 'html.firefox .block' padding-left */
width: calc(100% - var(--addons-page-left-padding)); #options-title {
/* match the default FF theme */ font-weight: bold;
background-color: #f9f9fa; background-color: rgb(145, 208, 198);
} padding: .75rem 0 .75rem calc(30% + 4px);
html.firefox .block { font-size: 22px;
padding-left: var(--addons-page-left-padding); letter-spacing: .5px;
} position: relative;
min-height: 42px;
box-sizing: border-box;
border-bottom: 1px solid #999;
}
#options-title::before {
content: "";
width: 0;
height: 0;
padding: 0 32px 32px 0;
background: url(/images/icon/32.png);
position: absolute;
left: 26px;
top: 0;
bottom: 0;
margin: auto;
} }
.firefox .chromium-only, .firefox .chromium-only,
@ -152,23 +172,20 @@ input[type="color"] {
#actions { #actions {
justify-content: space-around; justify-content: space-around;
align-items: stretch; align-items: stretch;
padding: 1em; flex-wrap: wrap;
padding: .5em 1em 1em;
white-space: nowrap; white-space: nowrap;
background-color: rgba(0, 0, 0, .05); background-color: rgba(0, 0, 0, .05);
margin: 0; margin: 0;
} }
.firefox #actions,
.opera #actions {
background-color: transparent;
}
#actions button { #actions button {
width: auto; width: auto;
margin-top: .5em;
} }
#actions button:not(:last-child) { #actions button:not(:last-child) {
margin-right: 8px; margin-right: 4px;
} }
[data-cmd="check-updates"] button { [data-cmd="check-updates"] button {
@ -298,13 +315,16 @@ html:not(.firefox):not(.opera) #updates {
fill: #000; fill: #000;
} }
#message-box.note > div { #message-box.note {
max-width: calc(100vw - 6rem); align-items: center;
justify-content: center;
} }
.opera #message-box.note, #message-box.note > div {
.firefox #message-box.note { max-width: calc(100% - 5rem);
background-color: transparent; top: unset;
right: unset;
position: relative;
} }
@keyframes fadeinout { @keyframes fadeinout {
@ -336,6 +356,17 @@ html:not(.firefox):not(.opera) #updates {
text-transform: uppercase; text-transform: uppercase;
} }
.sync-options .actions { .sync-options .actions button {
padding-top: 6px; margin-top: .5em;
}
@keyframes scaleFadeIn {
0% {
opacity: 0;
transform: scale3d(.3, .3, .3)
}
50% {
opacity: 1
}
} }