Just code style (CSS)
This commit is contained in:
nobody
parent
a6b03e177b
commit
25a8a0499c
|
|
@ -0,0 +1,7 @@
|
||||||
|
--ignore = bulletproof-font-face,
|
||||||
|
important,
|
||||||
|
ids,
|
||||||
|
box-sizing,
|
||||||
|
fallback-colors,
|
||||||
|
universal-selector,
|
||||||
|
box-model,
|
||||||
|
|
@ -0,0 +1,108 @@
|
||||||
|
{
|
||||||
|
"rules": {
|
||||||
|
"at-rule-empty-line-before": [
|
||||||
|
"always",
|
||||||
|
{
|
||||||
|
except: ["blockless-after-same-name-blockless", "first-nested"],
|
||||||
|
ignore: ["after-comment"],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
"at-rule-name-case": "lower",
|
||||||
|
"at-rule-name-space-after": "always-single-line",
|
||||||
|
"at-rule-semicolon-newline-after": "always",
|
||||||
|
"block-closing-brace-empty-line-before": "never",
|
||||||
|
"block-closing-brace-newline-after": "always",
|
||||||
|
"block-closing-brace-newline-before": "always-multi-line",
|
||||||
|
"block-closing-brace-space-before": "always-single-line",
|
||||||
|
"block-opening-brace-newline-after": "always-multi-line",
|
||||||
|
"block-opening-brace-space-after": "always-single-line",
|
||||||
|
"block-opening-brace-space-before": "always",
|
||||||
|
"color-hex-case": "lower",
|
||||||
|
"color-hex-length": "short",
|
||||||
|
"comment-empty-line-before": [
|
||||||
|
"always",
|
||||||
|
{
|
||||||
|
except: ["first-nested"],
|
||||||
|
ignore: ["stylelint-commands"],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
"comment-whitespace-inside": "always",
|
||||||
|
"custom-property-empty-line-before": [
|
||||||
|
"always",
|
||||||
|
{
|
||||||
|
except: ["after-custom-property", "first-nested"],
|
||||||
|
ignore: ["after-comment", "inside-single-line-block"],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
"declaration-bang-space-after": "never",
|
||||||
|
"declaration-bang-space-before": "always",
|
||||||
|
"declaration-block-semicolon-newline-after": "always-multi-line",
|
||||||
|
"declaration-block-semicolon-space-after": "always-single-line",
|
||||||
|
"declaration-block-semicolon-space-before": "never",
|
||||||
|
"declaration-block-single-line-max-declarations": 1,
|
||||||
|
"declaration-block-trailing-semicolon": "always",
|
||||||
|
"declaration-colon-newline-after": "always-multi-line",
|
||||||
|
"declaration-colon-space-after": "always-single-line",
|
||||||
|
"declaration-colon-space-before": "never",
|
||||||
|
"declaration-empty-line-before": [
|
||||||
|
"always",
|
||||||
|
{
|
||||||
|
except: ["after-declaration", "first-nested"],
|
||||||
|
ignore: ["after-comment", "inside-single-line-block"],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
"function-comma-newline-after": "always-multi-line",
|
||||||
|
"function-comma-space-after": "always-single-line",
|
||||||
|
"function-comma-space-before": "never",
|
||||||
|
"function-max-empty-lines": 0,
|
||||||
|
"function-name-case": "lower",
|
||||||
|
"function-parentheses-newline-inside": "always-multi-line",
|
||||||
|
"function-parentheses-space-inside": "never-single-line",
|
||||||
|
"function-whitespace-after": "always",
|
||||||
|
indentation: 4,
|
||||||
|
"length-zero-no-unit": true,
|
||||||
|
"max-empty-lines": 1,
|
||||||
|
"media-feature-colon-space-after": "always",
|
||||||
|
"media-feature-colon-space-before": "never",
|
||||||
|
"media-feature-name-case": "lower",
|
||||||
|
"media-feature-parentheses-space-inside": "never",
|
||||||
|
"media-feature-range-operator-space-after": "always",
|
||||||
|
"media-feature-range-operator-space-before": "always",
|
||||||
|
"media-query-list-comma-newline-after": "always-multi-line",
|
||||||
|
"media-query-list-comma-space-after": "always-single-line",
|
||||||
|
"media-query-list-comma-space-before": "never",
|
||||||
|
"no-eol-whitespace": true,
|
||||||
|
"no-missing-end-of-source-newline": true,
|
||||||
|
"number-leading-zero": "always",
|
||||||
|
"number-no-trailing-zeros": true,
|
||||||
|
"property-case": "lower",
|
||||||
|
"rule-empty-line-before": [
|
||||||
|
"always-multi-line",
|
||||||
|
{
|
||||||
|
except: ["first-nested"],
|
||||||
|
ignore: ["after-comment"],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
"selector-attribute-brackets-space-inside": "never",
|
||||||
|
"selector-attribute-operator-space-after": "never",
|
||||||
|
"selector-attribute-operator-space-before": "never",
|
||||||
|
"selector-combinator-space-after": "always",
|
||||||
|
"selector-combinator-space-before": "always",
|
||||||
|
"selector-descendant-combinator-no-non-space": true,
|
||||||
|
"selector-list-comma-newline-after": "always-multi-line",
|
||||||
|
"selector-list-comma-space-after": "always-single-line",
|
||||||
|
"selector-list-comma-space-before": "never",
|
||||||
|
"selector-max-empty-lines": 0,
|
||||||
|
"selector-pseudo-class-case": "lower",
|
||||||
|
"selector-pseudo-class-parentheses-space-inside": "never",
|
||||||
|
"selector-pseudo-element-case": "lower",
|
||||||
|
"selector-pseudo-element-colon-notation": "double",
|
||||||
|
"selector-type-case": "lower",
|
||||||
|
"unit-case": "lower",
|
||||||
|
"value-keyword-case": "lower",
|
||||||
|
"value-list-comma-newline-after": "always-multi-line",
|
||||||
|
"value-list-comma-space-after": "always-single-line",
|
||||||
|
"value-list-comma-space-before": "never",
|
||||||
|
"value-list-max-empty-lines": 0,
|
||||||
|
}
|
||||||
|
}
|
||||||
136
pages/base.css
136
pages/base.css
|
|
@ -1,15 +1,18 @@
|
||||||
a {
|
a {
|
||||||
color: #555;
|
|
||||||
background: url('../../icons/link-dark.svg') no-repeat right center;
|
background: url('../../icons/link-dark.svg') no-repeat right center;
|
||||||
background-size: 10px 10px;
|
background-size: 10px 10px;
|
||||||
|
color: #777;
|
||||||
padding-right: 13px;
|
padding-right: 13px;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
filter: invert(0.5);
|
background: url('../../icons/link-light.svg') no-repeat right center;
|
||||||
text-decoration: none;
|
background-size: 10px 10px;
|
||||||
|
color: #c4c4c4;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
filter: invert(0.2);
|
||||||
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-icon {
|
.no-icon {
|
||||||
|
|
@ -17,17 +20,17 @@ a:hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
#button-copy-rule-set, textarea {
|
#button-copy-rule-set, textarea {
|
||||||
-webkit-box-sizing: border-box;
|
|
||||||
-moz-box-sizing: border-box;
|
-moz-box-sizing: border-box;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#button-copy-rule-set {
|
#button-copy-rule-set {
|
||||||
display: none;
|
display: none;
|
||||||
padding: 5px;
|
|
||||||
font-size: 1.3em;
|
font-size: 1.3em;
|
||||||
line-height: 2;
|
line-height: 2;
|
||||||
|
padding: 5px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -50,20 +53,20 @@ textarea {
|
||||||
}
|
}
|
||||||
|
|
||||||
.btns {
|
.btns {
|
||||||
padding: 5px 10px;
|
|
||||||
background-color: #f0f0f0;
|
background-color: #f0f0f0;
|
||||||
text-align: center;
|
|
||||||
-webkit-box-sizing: border-box;
|
|
||||||
-moz-box-sizing: border-box;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border: 1px solid #aeaeae;
|
border: 1px solid #aeaeae;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
|
padding: 5px 10px;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btns:hover {
|
.btns:hover {
|
||||||
cursor: pointer;
|
|
||||||
background-color: #c1c1c1;
|
background-color: #c1c1c1;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btns-active {
|
.btns-active {
|
||||||
|
|
@ -71,82 +74,78 @@ textarea {
|
||||||
color: #515151 !important;
|
color: #515151 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Checkboxes, Radiobuttons
|
|
||||||
*/
|
|
||||||
|
|
||||||
.b-contain *, .b-contain *::before, .b-contain *::after {
|
.b-contain *, .b-contain *::before, .b-contain *::after {
|
||||||
box-sizing: content-box !important;
|
box-sizing: content-box !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.b-contain input {
|
.b-contain input {
|
||||||
|
opacity: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
opacity: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.b-contain span {
|
.b-contain span {
|
||||||
font-size: 12px;
|
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.b-contain {
|
.b-contain {
|
||||||
display: table;
|
|
||||||
position: relative;
|
|
||||||
padding-left: 25px;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
display: table;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
|
padding-left: 25px;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.b-contain input[type="checkbox"] ~ .b-input {
|
.b-contain input[type="checkbox"] ~ .b-input {
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
height: 16px;
|
|
||||||
width: 16px;
|
|
||||||
background: rgba(241, 245, 248, 1);
|
background: rgba(241, 245, 248, 1);
|
||||||
transition: background 250ms;
|
|
||||||
border: 1px solid rgba(184, 194, 204, 1);
|
border: 1px solid rgba(184, 194, 204, 1);
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
|
height: 16px;
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
transition: background 250ms;
|
||||||
|
width: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.b-contain input[type="radio"] ~ .b-input {
|
.b-contain input[type="radio"] ~ .b-input {
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
height: 16px;
|
|
||||||
width: 16px;
|
|
||||||
background: rgba(241, 245, 248, 1);
|
background: rgba(241, 245, 248, 1);
|
||||||
transition: background 250ms;
|
|
||||||
border: 1px solid rgba(184, 194, 204, 1);
|
border: 1px solid rgba(184, 194, 204, 1);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
height: 16px;
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
transition: background 250ms;
|
||||||
|
width: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.b-contain input[type="checkbox"] ~ .b-input::after {
|
.b-contain input[type="checkbox"] ~ .b-input::after {
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
display: none;
|
|
||||||
left: 5px;
|
|
||||||
top: 1px;
|
|
||||||
width: 4px;
|
|
||||||
height: 10px;
|
|
||||||
border: solid rgba(255, 255, 255, 1);
|
border: solid rgba(255, 255, 255, 1);
|
||||||
border-width: 0 2px 2px 0;
|
border-width: 0 2px 2px 0;
|
||||||
transition: background 250ms;
|
content: '';
|
||||||
|
display: none;
|
||||||
|
height: 10px;
|
||||||
|
left: 5px;
|
||||||
|
position: absolute;
|
||||||
|
top: 1px;
|
||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
|
transition: background 250ms;
|
||||||
|
width: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.b-contain input[type="radio"] ~ .b-input::after {
|
.b-contain input[type="radio"] ~ .b-input::after {
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
display: none;
|
|
||||||
left: 4px;
|
|
||||||
top: 4px;
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: rgba(255, 255, 255, 1);
|
background: rgba(255, 255, 255, 1);
|
||||||
|
border-radius: 4px;
|
||||||
|
content: '';
|
||||||
|
display: none;
|
||||||
|
height: 8px;
|
||||||
|
left: 4px;
|
||||||
|
position: absolute;
|
||||||
|
top: 4px;
|
||||||
transition: background 250ms;
|
transition: background 250ms;
|
||||||
|
width: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.b-contain input:disabled ~ .b-input::after {
|
.b-contain input:disabled ~ .b-input::after {
|
||||||
|
|
@ -174,15 +173,15 @@ textarea {
|
||||||
.b-contain input[type="checkbox"]:disabled ~ .b-input {
|
.b-contain input[type="checkbox"]:disabled ~ .b-input {
|
||||||
background: rgba(241, 245, 248, 1);
|
background: rgba(241, 245, 248, 1);
|
||||||
border-color: rgba(184, 194, 204, 1);
|
border-color: rgba(184, 194, 204, 1);
|
||||||
opacity: 0.6;
|
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
|
opacity: 0.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.b-contain input[type="radio"]:disabled ~ .b-input {
|
.b-contain input[type="radio"]:disabled ~ .b-input {
|
||||||
background: rgba(241, 245, 248, 1);
|
background: rgba(241, 245, 248, 1);
|
||||||
border-color: rgba(184, 194, 204, 1);
|
border-color: rgba(184, 194, 204, 1);
|
||||||
opacity: 0.6;
|
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
|
opacity: 0.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.b-contain input[type="radio"]:disabled ~ .b-input::after {
|
.b-contain input[type="radio"]:disabled ~ .b-input::after {
|
||||||
|
|
@ -195,21 +194,21 @@ textarea {
|
||||||
}
|
}
|
||||||
|
|
||||||
.b-contain .b-input::before {
|
.b-contain .b-input::before {
|
||||||
content: '';
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 3rem;
|
|
||||||
height: 3rem;
|
|
||||||
margin-left: -0.85rem;
|
|
||||||
margin-top: -0.85rem;
|
|
||||||
background: rgba(0, 130, 243, 1);
|
background: rgba(0, 130, 243, 1);
|
||||||
border-radius: 2rem;
|
border-radius: 2rem;
|
||||||
opacity: .6;
|
content: '';
|
||||||
z-index: 99999;
|
display: block;
|
||||||
|
height: 3rem;
|
||||||
|
left: 0;
|
||||||
|
margin-left: -0.85rem;
|
||||||
|
margin-top: -0.85rem;
|
||||||
|
opacity: 0.6;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
transform: scale(0);
|
transform: scale(0);
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
|
width: 3rem;
|
||||||
|
z-index: 99999;
|
||||||
}
|
}
|
||||||
|
|
||||||
.b-contain input + .b-input::before {
|
.b-contain input + .b-input::before {
|
||||||
|
|
@ -230,14 +229,15 @@ textarea {
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
a {
|
a {
|
||||||
color: #f2f2f2;
|
|
||||||
font-weight: bold;
|
|
||||||
background: url('../../icons/link-light.svg') no-repeat right center;
|
background: url('../../icons/link-light.svg') no-repeat right center;
|
||||||
background-size: 10px 10px;
|
background-size: 10px 10px;
|
||||||
|
color: #f2f2f2;
|
||||||
|
font-weight: bold;
|
||||||
padding-right: 13px;
|
padding-right: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
background: url('../../icons/link-dark.svg') no-repeat right center;
|
background: url('../../icons/link-dark.svg') no-repeat right center; /* csslint allow: duplicate-background-images */
|
||||||
background-size: 10px 10px;
|
background-size: 10px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -272,18 +272,18 @@ textarea {
|
||||||
}
|
}
|
||||||
|
|
||||||
.important > p > a {
|
.important > p > a {
|
||||||
color: #555;
|
background: url('../../icons/link-dark.svg') no-repeat right center; /* csslint allow: duplicate-background-images */
|
||||||
background: url('../../icons/link-dark.svg') no-repeat right center;
|
|
||||||
background-size: 10px 10px;
|
background-size: 10px 10px;
|
||||||
|
color: #555;
|
||||||
|
font-weight: normal;
|
||||||
padding-right: 13px;
|
padding-right: 13px;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
font-weight: normal;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.important > p > a:hover {
|
.important > p > a:hover {
|
||||||
color: #777;
|
color: #777;
|
||||||
text-decoration: none;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btns {
|
.btns {
|
||||||
|
|
|
||||||
|
|
@ -11,8 +11,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.div-donations {
|
.div-donations {
|
||||||
border-radius: 4px;
|
|
||||||
border: 1px solid lightgrey;
|
border: 1px solid lightgrey;
|
||||||
|
border-radius: 4px;
|
||||||
line-break: anywhere;
|
line-break: anywhere;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,31 +1,27 @@
|
||||||
/**
|
|
||||||
* Sections
|
|
||||||
*/
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
color: #555;
|
color: #555;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
font-family: 'Noto Sans', Arial, sans-serif !important;
|
font-family: 'Noto Sans', Arial, sans-serif !important;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
margin-top: -15px;
|
|
||||||
padding: 10px !important;
|
|
||||||
max-width: 800px;
|
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
|
margin-top: -15px;
|
||||||
|
max-width: 800px;
|
||||||
|
padding: 10px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.option-buttons {
|
.option-buttons {
|
||||||
border: none;
|
|
||||||
padding: 5px 10px;
|
|
||||||
margin: 5px 10px;
|
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
font-weight: normal;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
font-weight: normal;
|
||||||
|
margin: 5px 10px;
|
||||||
|
padding: 5px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.option-buttons-active {
|
.option-buttons-active {
|
||||||
font-weight: bold;
|
|
||||||
border-bottom: 1px solid #555;
|
border-bottom: 1px solid #555;
|
||||||
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.option-buttons:hover {
|
.option-buttons:hover {
|
||||||
|
|
@ -60,8 +56,8 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.without-checkbox {
|
.without-checkbox {
|
||||||
margin: 0px !important;
|
margin: 0 !important;
|
||||||
padding: 0px !important;
|
padding: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#advanced-tab, #export-import-tab, #info-tab {
|
#advanced-tab, #export-import-tab, #info-tab {
|
||||||
|
|
@ -78,8 +74,8 @@ body {
|
||||||
|
|
||||||
.div-selected-icon {
|
.div-selected-icon {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
padding-right: 25px;
|
|
||||||
min-width: 113px;
|
min-width: 113px;
|
||||||
|
padding-right: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div-selected-icon > label {
|
.div-selected-icon > label {
|
||||||
|
|
@ -99,90 +95,68 @@ body {
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Fonts
|
|
||||||
*/
|
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Noto Sans';
|
font-family: 'Noto Sans';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
src: url('../../modules/noto-sans/noto-sans.woff2')
|
src: url('../../modules/noto-sans/noto-sans.woff2') format('woff2');
|
||||||
format('woff2');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Noto Sans';
|
font-family: 'Noto Sans';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
src: url('../../modules/noto-sans/noto-sans-bold.woff2')
|
src: url('../../modules/noto-sans/noto-sans-bold.woff2') format('woff2');
|
||||||
format('woff2');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Noto Sans';
|
font-family: 'Noto Sans';
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
src: url('../../modules/noto-sans/noto-sans-italic.woff2')
|
src: url('../../modules/noto-sans/noto-sans-italic.woff2') format('woff2');
|
||||||
format('woff2');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Titles
|
|
||||||
*/
|
|
||||||
|
|
||||||
.title-option {
|
.title-option {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Controls
|
|
||||||
*/
|
|
||||||
|
|
||||||
.input-text {
|
.input-text {
|
||||||
border-radius: 3px;
|
|
||||||
border: 1px solid darkgrey;
|
border: 1px solid darkgrey;
|
||||||
padding: 5px !important;
|
border-radius: 3px;
|
||||||
margin-top: 10px !important;
|
|
||||||
color: #555;
|
color: #555;
|
||||||
|
margin-top: 10px !important;
|
||||||
|
padding: 5px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Icons
|
|
||||||
*/
|
|
||||||
|
|
||||||
.options-help-icon {
|
.options-help-icon {
|
||||||
display: inline-block;
|
|
||||||
cursor: pointer;
|
|
||||||
background-image: url("../../icons/help-dark.svg");
|
background-image: url("../../icons/help-dark.svg");
|
||||||
background-size: contain;
|
|
||||||
background-position: left;
|
background-position: left;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
height: 15px;
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
width: 15px;
|
width: 15px;
|
||||||
height: 15px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Buttons
|
|
||||||
*/
|
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
-moz-user-select: none;
|
|
||||||
background-color: #f5f5f5;
|
background-color: #f5f5f5;
|
||||||
border-radius: 2px;
|
|
||||||
border: 1px solid #cfcfcf;
|
border: 1px solid #cfcfcf;
|
||||||
|
border-radius: 2px;
|
||||||
color: #5f5f5f;
|
color: #5f5f5f;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
float: right;
|
float: right;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
outline: 0;
|
|
||||||
padding: 5px 22px;
|
padding: 5px 22px;
|
||||||
text-decoration: none;
|
|
||||||
user-select: none;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-warning {
|
.button-warning {
|
||||||
|
|
@ -218,9 +192,9 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.div-badge {
|
.div-badge {
|
||||||
|
border-left: 1px solid #bbb;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
padding-left: 30px;
|
padding-left: 30px;
|
||||||
border-left: 1px solid #bbb;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#badge-preview-top {
|
#badge-preview-top {
|
||||||
|
|
@ -229,20 +203,20 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
#counter-preview-badge {
|
#counter-preview-badge {
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
right: -5px;
|
|
||||||
color: white;
|
|
||||||
background: black;
|
background: black;
|
||||||
padding: 1px 6px;
|
|
||||||
font-size: 10px;
|
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
color: white;
|
||||||
|
font-size: 10px;
|
||||||
|
padding: 1px 6px;
|
||||||
|
position: absolute;
|
||||||
|
right: -5px;
|
||||||
|
top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#pre-badged-background-color, #pre-badged-text-color {
|
#pre-badged-background-color, #pre-badged-text-color {
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
height: 30px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
|
width: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#icon-badge-preview {
|
#icon-badge-preview {
|
||||||
|
|
@ -250,14 +224,14 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.colorpicker {
|
.colorpicker {
|
||||||
display: flex;
|
|
||||||
padding-bottom: 5px;
|
|
||||||
margin-top: 10px;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 10px;
|
||||||
|
padding-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.colorpicker > input {
|
.colorpicker > input {
|
||||||
margin-top: 0px !important;
|
margin-top: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
div[class="color-picker:a"] {
|
div[class="color-picker:a"] {
|
||||||
|
|
@ -273,24 +247,20 @@ div[class="color-picker:a"] {
|
||||||
}
|
}
|
||||||
|
|
||||||
.img-restore-color {
|
.img-restore-color {
|
||||||
margin-left: 5px;
|
|
||||||
height: 15px;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
height: 15px;
|
||||||
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.import-export > input[type="button"] {
|
.import-export > input[type="button"] {
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Miscellaneous
|
|
||||||
*/
|
|
||||||
|
|
||||||
.description-option {
|
.description-option {
|
||||||
color: #777;
|
color: #777;
|
||||||
|
font-size: 12px;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
padding-left: 25px;
|
padding-left: 25px;
|
||||||
font-size: 12px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.badge {
|
.badge {
|
||||||
|
|
@ -307,7 +277,7 @@ div[class="color-picker:a"] {
|
||||||
}
|
}
|
||||||
|
|
||||||
#negate-html-filter-list-warning {
|
#negate-html-filter-list-warning {
|
||||||
margin: 10px 0px 30px 0px;
|
margin: 10px 0 30px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hidden {
|
.hidden {
|
||||||
|
|
@ -343,24 +313,24 @@ div[class="color-picker:a"] {
|
||||||
}
|
}
|
||||||
|
|
||||||
.ruleset-generator {
|
.ruleset-generator {
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 5px 0px;
|
display: flex;
|
||||||
|
padding: 5px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.last-update {
|
.last-update {
|
||||||
font-weight: 600;
|
|
||||||
background-color: #ffa500;
|
background-color: #ffa500;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
padding: 3px 5px !important;
|
padding: 3px 5px !important;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-style: normal;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.storage-type {
|
.storage-type {
|
||||||
margin: 5px 0px;
|
margin: 5px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.option-disabled > .title-option > .b-contain,
|
.option-disabled > .title-option > .b-contain,
|
||||||
|
|
@ -387,15 +357,11 @@ div[class="color-picker:a"] {
|
||||||
}
|
}
|
||||||
|
|
||||||
#tf-domains-allowlist-google-fonts {
|
#tf-domains-allowlist-google-fonts {
|
||||||
margin-top: 0px !important;
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
margin-top: 0 !important;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Right to Left
|
|
||||||
*/
|
|
||||||
|
|
||||||
body[dir="rtl"] .badge {
|
body[dir="rtl"] .badge {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
margin-right: 6px;
|
margin-right: 6px;
|
||||||
|
|
@ -417,19 +383,19 @@ body[dir="rtl"] .input-text {
|
||||||
|
|
||||||
.option-group {
|
.option-group {
|
||||||
background-color: #e1e1e1;
|
background-color: #e1e1e1;
|
||||||
padding: 1.5rem;
|
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
margin: 20px 0px;
|
margin: 20px 0;
|
||||||
|
padding: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.option-links {
|
.option-links {
|
||||||
list-style-type: disclosure-closed;
|
list-style-type: disclosure-closed;
|
||||||
|
margin-top: 0;
|
||||||
padding-top: 2rem;
|
padding-top: 2rem;
|
||||||
margin-top: 0px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.option-links > li {
|
.option-links > li {
|
||||||
padding-bottom: .5rem;
|
padding-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 500px) {
|
@media only screen and (max-width: 500px) {
|
||||||
|
|
@ -442,9 +408,10 @@ body[dir="rtl"] .input-text {
|
||||||
.div-icons-badge-colors {
|
.div-icons-badge-colors {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div-badge {
|
.div-badge {
|
||||||
border: none;
|
border: none;
|
||||||
padding-left: 0px;
|
padding-left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -8,32 +8,32 @@ body {
|
||||||
font-family: 'Noto Sans', Arial, sans-serif !important;
|
font-family: 'Noto Sans', Arial, sans-serif !important;
|
||||||
font-size: 75%;
|
font-size: 75%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
overflow-y: auto;
|
|
||||||
overflow-x: hidden;
|
|
||||||
max-width: 348px;
|
max-width: 348px;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-bottom: solid #d3d3d3 1px;
|
border-bottom: solid #d3d3d3 1px;
|
||||||
display: flex;
|
display: flex;
|
||||||
position: relative;
|
|
||||||
padding: 8px 15px 8px 4px;
|
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
padding: 8px 15px 8px 4px;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
#manipulateDOM-indicator {
|
#manipulateDOM-indicator {
|
||||||
background: url('../../icons/help-dark.svg') no-repeat right center;
|
background: url('../../icons/help-dark.svg') no-repeat right center;
|
||||||
color: #555;
|
|
||||||
background-size: 15px 15px;
|
background-size: 15px 15px;
|
||||||
|
color: #555;
|
||||||
padding-right: 20px;
|
padding-right: 20px;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
#manipulateDOM-indicator:hover {
|
#manipulateDOM-indicator:hover {
|
||||||
color: #777;
|
color: #777;
|
||||||
text-decoration: none;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel {
|
.panel {
|
||||||
|
|
@ -41,16 +41,16 @@ header {
|
||||||
}
|
}
|
||||||
|
|
||||||
.subpanel {
|
.subpanel {
|
||||||
padding-top: 8px;
|
|
||||||
max-height: 200px;
|
max-height: 200px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
padding-top: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-overflow {
|
.panel-overflow {
|
||||||
|
margin-left: 0;
|
||||||
max-height: 300px;
|
max-height: 300px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
margin-left: 0px;
|
padding-left: 0;
|
||||||
padding-left: 0px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.subpanel:last-child {
|
.subpanel:last-child {
|
||||||
|
|
@ -59,15 +59,15 @@ header {
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
padding: 0px 15px;
|
padding: 0 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding: 8px 15px;
|
padding: 8px 15px;
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#testing-utility {
|
#testing-utility {
|
||||||
|
|
@ -86,35 +86,32 @@ footer {
|
||||||
font-family: 'Noto Sans';
|
font-family: 'Noto Sans';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
src: url('../../modules/noto-sans/noto-sans.woff2')
|
src: url('../../modules/noto-sans/noto-sans.woff2') format('woff2');
|
||||||
format('woff2');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Noto Sans';
|
font-family: 'Noto Sans';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
src: url('../../modules/noto-sans/noto-sans-bold.woff2')
|
src: url('../../modules/noto-sans/noto-sans-bold.woff2') format('woff2');
|
||||||
format('woff2');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Noto Sans';
|
font-family: 'Noto Sans';
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
src: url('../../modules/noto-sans/noto-sans-italic.woff2')
|
src: url('../../modules/noto-sans/noto-sans-italic.woff2') format('woff2');
|
||||||
format('woff2');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Headings
|
* Headings
|
||||||
*/
|
*/
|
||||||
.heading {
|
.heading {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -141,12 +138,12 @@ footer {
|
||||||
border: 1px solid #e0e0e0;
|
border: 1px solid #e0e0e0;
|
||||||
box-shadow: inset 0 2px 10px #e2e2e2;
|
box-shadow: inset 0 2px 10px #e2e2e2;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding: 0px 0px 0px 8px;
|
padding: 0 0 0 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sublist:last-child {
|
.sublist:last-child {
|
||||||
border-bottom: 1px solid #e0e0e0;
|
border-bottom: 1px solid #e0e0e0;
|
||||||
margin-bottom: 0px;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sublist-item {
|
.sublist-item {
|
||||||
|
|
@ -161,15 +158,15 @@ footer {
|
||||||
}
|
}
|
||||||
|
|
||||||
#label-donate {
|
#label-donate {
|
||||||
margin: 0px 5px 0px 0px;
|
margin: 0 5px 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#get-more-injections-btn, #label-donate {
|
#get-more-injections-btn, #label-donate {
|
||||||
cursor: pointer;
|
|
||||||
background-color: #f0f0f0;
|
background-color: #f0f0f0;
|
||||||
color: #555;
|
color: #555;
|
||||||
|
cursor: pointer;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin: 0px 5px;
|
margin: 0 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#get-more-injections-btn:hover {
|
#get-more-injections-btn:hover {
|
||||||
|
|
@ -191,17 +188,19 @@ footer {
|
||||||
* Buttons
|
* Buttons
|
||||||
*/
|
*/
|
||||||
.button {
|
.button {
|
||||||
-moz-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
background-color: #f5f5f5;
|
background-color: #f5f5f5;
|
||||||
border-radius: 2px;
|
|
||||||
border: 1px solid #cfcfcf;
|
border: 1px solid #cfcfcf;
|
||||||
|
border-radius: 2px;
|
||||||
color: #5f5f5f;
|
color: #5f5f5f;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
float: right;
|
float: right;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
padding: 5px 22px;
|
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
|
padding: 5px 22px;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button:hover {
|
.button:hover {
|
||||||
|
|
@ -214,21 +213,23 @@ footer {
|
||||||
|
|
||||||
.button-svg {
|
.button-svg {
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
width: 15px;
|
|
||||||
height: 15px;
|
height: 15px;
|
||||||
|
width: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Donate
|
* Donate
|
||||||
*/
|
*/
|
||||||
#donate-button {
|
#donate-button {
|
||||||
-moz-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
color: #5f5f5f;
|
color: #5f5f5f;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
float: right;
|
float: right;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
display: flex;
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#donate-button:hover #donate-button-svg {
|
#donate-button:hover #donate-button-svg {
|
||||||
|
|
@ -251,7 +252,7 @@ footer {
|
||||||
}
|
}
|
||||||
|
|
||||||
#options-button:hover {
|
#options-button:hover {
|
||||||
filter: contrast(.5);
|
filter: contrast(0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -263,7 +264,7 @@ footer {
|
||||||
}
|
}
|
||||||
|
|
||||||
#statistics-button:hover {
|
#statistics-button:hover {
|
||||||
filter: contrast(.5);
|
filter: contrast(0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
#statistics-button {
|
#statistics-button {
|
||||||
|
|
@ -274,56 +275,58 @@ footer {
|
||||||
* Toggles
|
* Toggles
|
||||||
*/
|
*/
|
||||||
#protection-toggle, #manipulateDOM-toggle {
|
#protection-toggle, #manipulateDOM-toggle {
|
||||||
-moz-user-select: none;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
float: right;
|
float: right;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.switch {
|
.switch {
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 40px;
|
|
||||||
height: 18px;
|
height: 18px;
|
||||||
|
position: relative;
|
||||||
|
width: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.switch input {
|
.switch input {
|
||||||
|
height: 0;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.slider, .slider-disabled {
|
.slider, .slider-disabled {
|
||||||
position: absolute;
|
|
||||||
cursor: pointer;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background-color: #b40000;
|
background-color: #b40000;
|
||||||
-webkit-transition: .1s;
|
|
||||||
transition: .1s;
|
|
||||||
border-radius: 34px;
|
border-radius: 34px;
|
||||||
|
bottom: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
-webkit-transition: 0.1s;
|
||||||
|
transition: 0.1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slider:before, .slider-disabled:before {
|
.slider::before, .slider-disabled::before {
|
||||||
position: absolute;
|
background-color: #f9f9fa;
|
||||||
|
border-radius: 50%;
|
||||||
|
bottom: 2px;
|
||||||
content: "";
|
content: "";
|
||||||
height: 14px;
|
height: 14px;
|
||||||
width: 14px;
|
|
||||||
left: 2px;
|
left: 2px;
|
||||||
bottom: 2px;
|
position: absolute;
|
||||||
background-color: #f9f9fa;
|
-webkit-transition: 0.3s;
|
||||||
-webkit-transition: .3s;
|
transition: 0.3s;
|
||||||
transition: .3s;
|
width: 14px;
|
||||||
border-radius: 50%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input:checked + .slider {
|
input:checked + .slider {
|
||||||
background-color: #6bb798;
|
background-color: #6bb798;
|
||||||
}
|
}
|
||||||
|
|
||||||
input:checked + .slider:before {
|
input:checked + .slider::before {
|
||||||
-webkit-transform: translateX(22px);
|
-webkit-transform: translateX(22px);
|
||||||
-ms-transform: translateX(22px);
|
-ms-transform: translateX(22px);
|
||||||
transform: translateX(22px);
|
transform: translateX(22px);
|
||||||
|
|
@ -342,7 +345,6 @@ input:checked + .slider:hover {
|
||||||
background-color: #4b806a;
|
background-color: #4b806a;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Miscellaneous
|
* Miscellaneous
|
||||||
*/
|
*/
|
||||||
|
|
@ -379,7 +381,7 @@ input:checked + .slider:hover {
|
||||||
.label-version {
|
.label-version {
|
||||||
color: #6aac91;
|
color: #6aac91;
|
||||||
font-size: 9px;
|
font-size: 9px;
|
||||||
margin: 0px 0px 5px 2px;
|
margin: 0 0 5px 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label-domain {
|
.label-domain {
|
||||||
|
|
@ -397,13 +399,13 @@ input:checked + .slider:hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
#popup-incomplete-translation {
|
#popup-incomplete-translation {
|
||||||
width: 100%;
|
|
||||||
color: white;
|
|
||||||
text-align: center;
|
|
||||||
font-weight: bold;
|
|
||||||
background-color: #ffa500;
|
background-color: #ffa500;
|
||||||
padding: 0px;
|
color: white;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 0;
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -411,14 +413,12 @@ input:checked + .slider:hover {
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@media screen and (-webkit-min-device-pixel-ratio: 0) {
|
@media screen and (-webkit-min-device-pixel-ratio: 0) {
|
||||||
|
|
||||||
body {
|
body {
|
||||||
width: 348px;
|
width: 348px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Sections
|
* Sections
|
||||||
*/
|
*/
|
||||||
|
|
@ -435,10 +435,10 @@ input:checked + .slider:hover {
|
||||||
#manipulateDOM-indicator {
|
#manipulateDOM-indicator {
|
||||||
background: url('../../icons/help-light.svg') no-repeat right center;
|
background: url('../../icons/help-light.svg') no-repeat right center;
|
||||||
background-size: 15px 15px;
|
background-size: 15px 15px;
|
||||||
padding-right: 20px;
|
|
||||||
text-decoration: underline;
|
|
||||||
color: #f2f2f2;
|
color: #f2f2f2;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
padding-right: 20px;
|
||||||
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -505,7 +505,7 @@ input:checked + .slider:hover {
|
||||||
background-color: #b54b4b;
|
background-color: #b54b4b;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slider:before {
|
.slider::before {
|
||||||
background-color: #323232;
|
background-color: #323232;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -514,14 +514,14 @@ input:checked + .slider:hover {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slider-disabled:before {
|
.slider-disabled::before {
|
||||||
background-color: #323232;
|
background-color: #323232;
|
||||||
}
|
}
|
||||||
|
|
||||||
#label-donate {
|
#label-donate {
|
||||||
cursor: pointer;
|
|
||||||
background-color: #404040;
|
background-color: #404040;
|
||||||
color: #bbb;
|
color: #bbb;
|
||||||
|
cursor: pointer;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -6,19 +6,19 @@ html {
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: #fafafa;
|
background-color: #fafafa;
|
||||||
|
-khtml-box-shadow: 10px 10px 60px #111;
|
||||||
|
-moz-box-shadow: 10px 10px 60px #111;
|
||||||
|
-webkit-box-shadow: 10px 10px 60px #111;
|
||||||
|
box-shadow: 10px 10px 60px #111;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
color: #555;
|
color: #555;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
height: unset !important;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
max-width: 982px;
|
max-width: 982px;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
min-width: 256px;
|
min-width: 256px;
|
||||||
padding: 33px 18px;
|
padding: 33px 18px;
|
||||||
height: unset !important;
|
|
||||||
-moz-box-shadow: 10px 10px 60px #111;
|
|
||||||
-webkit-box-shadow: 10px 10px 60px #111;
|
|
||||||
-khtml-box-shadow: 10px 10px 60px #111;
|
|
||||||
box-shadow: 10px 10px 60px #111;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
|
|
@ -29,27 +29,27 @@ h1 {
|
||||||
}
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
display: block;
|
|
||||||
height: 1px;
|
|
||||||
border: 0;
|
border: 0;
|
||||||
border-top: 1px solid #ccc;
|
border-top: 1px solid #ccc;
|
||||||
|
display: block;
|
||||||
|
height: 1px;
|
||||||
margin: 1em 0;
|
margin: 1em 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-panel {
|
.btn-panel {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
|
display: flex;
|
||||||
font-family: 'Noto Sans', Arial, sans-serif;
|
font-family: 'Noto Sans', Arial, sans-serif;
|
||||||
|
justify-content: center;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
max-width: 750px;
|
max-width: 750px;
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.topic-badge {
|
.topic-badge {
|
||||||
background-color: #fcfcfc;
|
background-color: #fcfcfc;
|
||||||
border-radius: 100px;
|
|
||||||
border: 4px solid #e6e6e6;
|
border: 4px solid #e6e6e6;
|
||||||
|
border-radius: 100px;
|
||||||
color: #5a8f79;
|
color: #5a8f79;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 48px;
|
font-size: 48px;
|
||||||
|
|
@ -88,19 +88,19 @@ hr {
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
color: #fff !important;
|
background: 0 0;
|
||||||
font-weight: 600;
|
|
||||||
margin: 15px;
|
|
||||||
padding: 11px 17px;
|
|
||||||
text-decoration: none;
|
|
||||||
text-align: center;
|
|
||||||
width: 100px;
|
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
-webkit-box-shadow: 0 5px 30px -5px rgba(0, 0, 0, 0.5), 0 5px 5px -5px #000;
|
-webkit-box-shadow: 0 5px 30px -5px rgba(0, 0, 0, 0.5), 0 5px 5px -5px #000;
|
||||||
box-shadow: 0 5px 30px -5px rgba(0, 0, 0, 0.5), 0 5px 5px -5px #000;
|
box-shadow: 0 5px 30px -5px rgba(0, 0, 0, 0.5), 0 5px 5px -5px #000;
|
||||||
background: 0 0;
|
color: #fff !important;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 15px;
|
||||||
|
padding: 11px 17px;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
width: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn:hover {
|
.btn:hover {
|
||||||
|
|
@ -108,10 +108,10 @@ hr {
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-text {
|
.btn-text {
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
min-height: 40px;
|
display: inline-flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
min-height: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-gitlab {
|
.btn-gitlab {
|
||||||
|
|
@ -170,10 +170,10 @@ hr {
|
||||||
}
|
}
|
||||||
|
|
||||||
.uncle-sam, .we-need-you-title {
|
.uncle-sam, .we-need-you-title {
|
||||||
|
display: block;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
display: block;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.uncle-sam {
|
.uncle-sam {
|
||||||
|
|
@ -206,15 +206,15 @@ hr {
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
padding: 13px 18px 12px;
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
max-width: 733px;
|
max-width: 733px;
|
||||||
|
padding: 13px 18px 12px;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-text {
|
.btn-text {
|
||||||
width: 100%;
|
|
||||||
min-height: unset;
|
min-height: unset;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@ ul {
|
||||||
*/
|
*/
|
||||||
|
|
||||||
input[type=radio] {
|
input[type=radio] {
|
||||||
margin: 0px;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
|
|
@ -28,8 +28,8 @@ input[type=radio], label {
|
||||||
}
|
}
|
||||||
|
|
||||||
.ruleset-generator {
|
.ruleset-generator {
|
||||||
margin-top: 10px;
|
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
|
margin-top: 10px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue