options CSS
This commit is contained in:
narcolepticinsomniac
GitHub
parent
4f45e633ac
commit
e83ff94ef7
|
|
@ -1,5 +1,11 @@
|
|||
/* On/Off FlipSwitch https://proto.io/freebies/onoff/ */
|
||||
|
||||
:root {
|
||||
--slider-enabled-bg: hsl(165, 45%, 84%);
|
||||
--slider-enabled-border: hsl(165, 45%, 82%);
|
||||
--slider-enabled-circle: hsl(171, 96%, 37%);
|
||||
}
|
||||
|
||||
.onoffswitch {
|
||||
position: relative;
|
||||
margin: 1ex 0;
|
||||
|
|
@ -33,10 +39,10 @@
|
|||
height: 12px;
|
||||
padding: 0;
|
||||
line-height: 12px;
|
||||
border: 0 solid #E3E3E3;
|
||||
border: 1px solid var(--gray-lightness-84);
|
||||
border-radius: 12px;
|
||||
background-color: #E0E0E0;
|
||||
box-shadow: inset 2px 2px 4px rgba(0,0,0,0.1);
|
||||
background-color: var(--gray-lightness-87);
|
||||
box-shadow: inset 2px 2px 4px var(--black-alpha-15);
|
||||
}
|
||||
|
||||
.onoffswitch span::before {
|
||||
|
|
@ -45,21 +51,21 @@
|
|||
width: 18px;
|
||||
height: 18px;
|
||||
margin: -3px;
|
||||
background: #efefef;
|
||||
background: var(--gray-lightness-92);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 46px;
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 3px 13px 0 rgba(0, 0, 0, 0.4);
|
||||
box-shadow: 0 3px 13px 0 var(--black-alpha-45);
|
||||
}
|
||||
|
||||
.onoffswitch input:checked + span {
|
||||
background-color: #CAEBE3;
|
||||
background-color: var(--slider-enabled-bg);
|
||||
}
|
||||
|
||||
.onoffswitch input:checked + span, .onoffswitch input:checked + span::before {
|
||||
border-color: #CAEBE3;
|
||||
border-color: var(--slider-enabled-border);
|
||||
}
|
||||
|
||||
.onoffswitch input:checked + span .onoffswitch-inner {
|
||||
|
|
@ -69,5 +75,5 @@
|
|||
.onoffswitch input:checked + span::before {
|
||||
right: 0;
|
||||
background-color: #04BA9F;
|
||||
box-shadow: 3px 6px 18px 0 rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 3px 6px 18px 0 var(--black-alpha-25);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ html.opera body {
|
|||
}
|
||||
|
||||
body {
|
||||
background: #fff;
|
||||
background: var(--main-bg);
|
||||
margin: 0;
|
||||
font-family: "Helvetica Neue", Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
|
|
@ -18,13 +18,35 @@ body {
|
|||
max-width: 800px;
|
||||
}
|
||||
|
||||
.radio-outer-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.radio-inner-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.radio-inner-wrapper label > :first-child {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.radio-title + label {
|
||||
margin-left: auto;
|
||||
margin-right: 1.25rem;
|
||||
}
|
||||
|
||||
@supports (-moz-appearance:none) {
|
||||
body {
|
||||
--addons-page-left-padding: 6px;
|
||||
--match-ff-bg: hsl(240, 9%, 98%);
|
||||
/* compensate 'html.firefox .block' padding-left */
|
||||
width: calc(100% - var(--addons-page-left-padding));
|
||||
/* match the default FF theme */
|
||||
background-color: #f9f9fa;
|
||||
background-color: var(--match-ff-bg)
|
||||
}
|
||||
html.firefox .block {
|
||||
padding-left: var(--addons-page-left-padding);
|
||||
|
|
@ -39,7 +61,7 @@ body {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
margin: 1em 0;
|
||||
border-bottom: 1px dotted #ccc;
|
||||
border-bottom: 1px dotted var(--gray-lightness-80);
|
||||
padding: 0 16px .75em;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -86,13 +108,17 @@ label > :first-child {
|
|||
flex-grow: 1;
|
||||
}
|
||||
|
||||
label:not([disabled]) > :first-child {
|
||||
cursor: default;
|
||||
label:not([disabled]),
|
||||
label:not([disabled]) * {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
label:not([disabled]) input[type=number] {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
label:not([disabled]):hover > :first-child {
|
||||
text-shadow: 0 0 0.01px rgba(0, 0, 0, .25);
|
||||
cursor: pointer;
|
||||
text-shadow: 0 0 0.01px var(--black-alpha-25);
|
||||
}
|
||||
|
||||
input[type=number],
|
||||
|
|
@ -117,8 +143,8 @@ input[type=number] {
|
|||
}
|
||||
|
||||
input[type=number]:invalid {
|
||||
background-color: rgba(255, 0, 0, 0.1);
|
||||
color: darkred;
|
||||
background-color: var(--red-alpha-1);
|
||||
color: var(--darkred);
|
||||
}
|
||||
|
||||
input[type="color"] {
|
||||
|
|
@ -143,7 +169,6 @@ input[type="color"] {
|
|||
align-items: stretch;
|
||||
padding: 1em;
|
||||
white-space: nowrap;
|
||||
background-color: rgba(0, 0, 0, .05);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
|
@ -221,7 +246,7 @@ html:not(.firefox):not(.opera) #updates {
|
|||
#advanced.collapsible h1 {
|
||||
width: unset;
|
||||
padding: 0;
|
||||
color: #333;
|
||||
color: var(--gray-lightness-20);
|
||||
transition: color .5s;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
@ -234,32 +259,91 @@ html:not(.firefox):not(.opera) #updates {
|
|||
}
|
||||
|
||||
#advanced.collapsible:not(.collapsed) h1:hover {
|
||||
color: #666;
|
||||
color: var(--gray-lightness-40);
|
||||
}
|
||||
|
||||
#advanced.collapsible.collapsed h1 {
|
||||
padding: 0;
|
||||
color: #666;
|
||||
color: var(--gray-lightness-40);
|
||||
}
|
||||
|
||||
#advanced.collapsible.collapsed:hover h1 {
|
||||
color: #333;
|
||||
color: var(--gray-lightness-20);
|
||||
}
|
||||
|
||||
.collapsible-resizer .svg-icon {
|
||||
fill: #333;
|
||||
fill: var(--gray-lightness-20);
|
||||
transition: fill .5s;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.action-elements {
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.icon-wrapper {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.action-elements input,
|
||||
.style-name-action input {
|
||||
margin: 0 3px -1px;
|
||||
}
|
||||
|
||||
.icon-wrapper.use-text {
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
.icon-wrapper.use-edit {
|
||||
margin: 0 5px 0 6px;
|
||||
}
|
||||
|
||||
.action-elements label > :first-child,
|
||||
.style-name-action label > :first-child {
|
||||
margin: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.action-elements label,
|
||||
.style-name-action label {
|
||||
width: 56px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.icon-wrapper .svg-icon {
|
||||
fill: var(--gray-lightness-40);
|
||||
transition: fill .5s;
|
||||
}
|
||||
|
||||
label:hover .icon-wrapper .svg-icon,
|
||||
input:checked + .icon-wrapper .svg-icon {
|
||||
fill: var(--black);
|
||||
}
|
||||
|
||||
.svg-icon.text,
|
||||
.svg-icon.vector {
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.svg-icon.edit {
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.svg-icon.double-toggle {
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
#advanced.collapsible.collapsed .collapsible-resizer .svg-icon,
|
||||
#advanced.collapsible:not(.collapsed) .collapsible-resizer h1:hover .svg-icon {
|
||||
fill: #666;
|
||||
fill: var(--gray-lightness-40);
|
||||
}
|
||||
|
||||
#advanced.collapsible.collapsed:hover .collapsible-resizer .svg-icon {
|
||||
fill: #333;
|
||||
fill: var(--gray-lightness-20);
|
||||
}
|
||||
|
||||
#advanced.collapsible h1 .svg-icon {
|
||||
|
|
@ -278,12 +362,12 @@ html:not(.firefox):not(.opera) #updates {
|
|||
.svg-inline-wrapper .svg-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: #666;
|
||||
fill: var(--gray-lightness-40);
|
||||
vertical-align: sub;
|
||||
}
|
||||
|
||||
.svg-inline-wrapper:hover .svg-icon {
|
||||
fill: #000;
|
||||
fill: var(--black);
|
||||
}
|
||||
|
||||
#message-box.note > div {
|
||||
|
|
@ -306,7 +390,7 @@ html:not(.firefox):not(.opera) #updates {
|
|||
.expanded-note {
|
||||
font-size: 90%;
|
||||
white-space: normal;
|
||||
color: #666;
|
||||
color: var(--gray-lightness-40);
|
||||
margin-top: .5em;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user