From 25a8a0499cf5b44fb699f20173f4c93ca299953a Mon Sep 17 00:00:00 2001 From: nobody Date: Wed, 17 Feb 2021 06:59:56 +0100 Subject: [PATCH] Just code style (CSS) --- .csslintrc | 7 ++ .stylelintrc | 108 ++++++++++++++++++ pages/base.css | 142 +++++++++++------------ pages/donate/donate.css | 2 +- pages/help/help.css | 4 +- pages/options/options.css | 145 +++++++++--------------- pages/popup/popup.css | 194 ++++++++++++++++---------------- pages/statistics/statistics.css | 56 +++++---- pages/style.css | 48 ++++---- pages/updates/updates.css | 6 +- 10 files changed, 396 insertions(+), 316 deletions(-) create mode 100644 .csslintrc create mode 100644 .stylelintrc diff --git a/.csslintrc b/.csslintrc new file mode 100644 index 00000000..776ecb83 --- /dev/null +++ b/.csslintrc @@ -0,0 +1,7 @@ +--ignore = bulletproof-font-face, + important, + ids, + box-sizing, + fallback-colors, + universal-selector, + box-model, diff --git a/.stylelintrc b/.stylelintrc new file mode 100644 index 00000000..9ef4c76a --- /dev/null +++ b/.stylelintrc @@ -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, + } +} diff --git a/pages/base.css b/pages/base.css index 1945373c..5b2f77ec 100644 --- a/pages/base.css +++ b/pages/base.css @@ -1,15 +1,18 @@ a { - color: #555; background: url('../../icons/link-dark.svg') no-repeat right center; background-size: 10px 10px; + color: #777; padding-right: 13px; text-decoration: underline; } a:hover { - filter: invert(0.5); - text-decoration: none; + background: url('../../icons/link-light.svg') no-repeat right center; + background-size: 10px 10px; + color: #c4c4c4; cursor: pointer; + filter: invert(0.2); + text-decoration: none; } .no-icon { @@ -17,17 +20,17 @@ a:hover { } #button-copy-rule-set, textarea { - -webkit-box-sizing: border-box; -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; } #button-copy-rule-set { display: none; - padding: 5px; font-size: 1.3em; line-height: 2; + padding: 5px; text-align: center; } @@ -50,20 +53,20 @@ textarea { } .btns { - padding: 5px 10px; background-color: #f0f0f0; - text-align: center; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; border: 1px solid #aeaeae; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; font-size: 1em; line-height: 1.5; + padding: 5px 10px; + text-align: center; } .btns:hover { - cursor: pointer; background-color: #c1c1c1; + cursor: pointer; } .btns-active { @@ -71,82 +74,78 @@ textarea { color: #515151 !important; } -/** - * Checkboxes, Radiobuttons - */ - .b-contain *, .b-contain *::before, .b-contain *::after { box-sizing: content-box !important; } .b-contain input { + opacity: 0; position: absolute; z-index: -1; - opacity: 0; } .b-contain span { - font-size: 12px; font-family: inherit; + font-size: 12px; } .b-contain { - display: table; - position: relative; - padding-left: 25px; cursor: pointer; + display: table; line-height: 1.2; + padding-left: 25px; + position: relative; } .b-contain input[type="checkbox"] ~ .b-input { - position: absolute; - top: 0; - left: 0; - height: 16px; - width: 16px; background: rgba(241, 245, 248, 1); - transition: background 250ms; border: 1px solid rgba(184, 194, 204, 1); border-radius: 2px; + height: 16px; + left: 0; + position: absolute; + top: 0; + transition: background 250ms; + width: 16px; } .b-contain input[type="radio"] ~ .b-input { - position: absolute; - top: 0; - left: 0; - height: 16px; - width: 16px; background: rgba(241, 245, 248, 1); - transition: background 250ms; border: 1px solid rgba(184, 194, 204, 1); border-radius: 10px; + height: 16px; + left: 0; + position: absolute; + top: 0; + transition: background 250ms; + width: 16px; } .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-width: 0 2px 2px 0; - transition: background 250ms; + content: ''; + display: none; + height: 10px; + left: 5px; + position: absolute; + top: 1px; transform: rotate(45deg); + transition: background 250ms; + width: 4px; } .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); + border-radius: 4px; + content: ''; + display: none; + height: 8px; + left: 4px; + position: absolute; + top: 4px; transition: background 250ms; + width: 8px; } .b-contain input:disabled ~ .b-input::after { @@ -163,7 +162,7 @@ textarea { } .b-contain input:focus ~ .b-input { - box-shadow: 0 0 0 2px rgba(52,144,220,0.5); + box-shadow: 0 0 0 2px rgba(52, 144, 220, 0.5); } .b-contain input:checked ~ .b-input { @@ -174,15 +173,15 @@ textarea { .b-contain input[type="checkbox"]:disabled ~ .b-input { background: rgba(241, 245, 248, 1); border-color: rgba(184, 194, 204, 1); - opacity: 0.6; cursor: not-allowed; + opacity: 0.6; } .b-contain input[type="radio"]:disabled ~ .b-input { background: rgba(241, 245, 248, 1); border-color: rgba(184, 194, 204, 1); - opacity: 0.6; cursor: not-allowed; + opacity: 0.6; } .b-contain input[type="radio"]:disabled ~ .b-input::after { @@ -195,21 +194,21 @@ textarea { } .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); border-radius: 2rem; - opacity: .6; - z-index: 99999; + content: ''; + display: block; + height: 3rem; + left: 0; + margin-left: -0.85rem; + margin-top: -0.85rem; + opacity: 0.6; + position: absolute; + top: 0; transform: scale(0); visibility: hidden; + width: 3rem; + z-index: 99999; } .b-contain input + .b-input::before { @@ -230,14 +229,15 @@ textarea { @media (prefers-color-scheme: dark) { a { - color: #f2f2f2; - font-weight: bold; background: url('../../icons/link-light.svg') no-repeat right center; background-size: 10px 10px; - padding-right:13px; + color: #f2f2f2; + font-weight: bold; + padding-right: 13px; } - a:hover{ - background: url('../../icons/link-dark.svg') no-repeat right center; + + a:hover { + background: url('../../icons/link-dark.svg') no-repeat right center; /* csslint allow: duplicate-background-images */ background-size: 10px 10px; } @@ -272,18 +272,18 @@ textarea { } .important > p > a { - color: #555; - 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; + color: #555; + font-weight: normal; padding-right: 13px; text-decoration: underline; - font-weight: normal; } .important > p > a:hover { color: #777; - text-decoration: none; cursor: pointer; + text-decoration: none; } .btns { diff --git a/pages/donate/donate.css b/pages/donate/donate.css index 0e8b261e..b9e006f3 100644 --- a/pages/donate/donate.css +++ b/pages/donate/donate.css @@ -11,8 +11,8 @@ } .div-donations { - border-radius: 4px; border: 1px solid lightgrey; + border-radius: 4px; line-break: anywhere; } diff --git a/pages/help/help.css b/pages/help/help.css index 837d17ec..7b8754a3 100644 --- a/pages/help/help.css +++ b/pages/help/help.css @@ -1,4 +1,4 @@ table { - border-collapse: separate; - border-spacing: 3em 1em; + border-collapse: separate; + border-spacing: 3em 1em; } diff --git a/pages/options/options.css b/pages/options/options.css index 51d3d4c9..b45217dc 100644 --- a/pages/options/options.css +++ b/pages/options/options.css @@ -1,31 +1,27 @@ -/** - * Sections - */ - body { color: #555; cursor: default; font-family: 'Noto Sans', Arial, sans-serif !important; font-size: 14px; - margin-top: -15px; - padding: 10px !important; - max-width: 800px; margin-left: auto; margin-right: auto; + margin-top: -15px; + max-width: 800px; + padding: 10px !important; } .option-buttons { - border: none; - padding: 5px 10px; - margin: 5px 10px; background-color: transparent; - font-weight: normal; + border: none; cursor: pointer; + font-weight: normal; + margin: 5px 10px; + padding: 5px 10px; } .option-buttons-active { - font-weight: bold; border-bottom: 1px solid #555; + font-weight: bold; } .option-buttons:hover { @@ -60,8 +56,8 @@ body { } .without-checkbox { - margin: 0px !important; - padding: 0px !important; + margin: 0 !important; + padding: 0 !important; } #advanced-tab, #export-import-tab, #info-tab { @@ -78,8 +74,8 @@ body { .div-selected-icon { margin-top: 10px; - padding-right: 25px; min-width: 113px; + padding-right: 25px; } .div-selected-icon > label { @@ -99,90 +95,68 @@ body { font-style: normal; } -/** - * Fonts - */ - @font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; - src: url('../../modules/noto-sans/noto-sans.woff2') - format('woff2'); + src: url('../../modules/noto-sans/noto-sans.woff2') format('woff2'); } @font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 600; - src: url('../../modules/noto-sans/noto-sans-bold.woff2') - format('woff2'); + src: url('../../modules/noto-sans/noto-sans-bold.woff2') format('woff2'); } @font-face { font-family: 'Noto Sans'; font-style: italic; font-weight: 400; - src: url('../../modules/noto-sans/noto-sans-italic.woff2') - format('woff2'); + src: url('../../modules/noto-sans/noto-sans-italic.woff2') format('woff2'); } -/** - * Titles - */ - .title-option { align-items: center; display: flex; font-weight: 600; } -/** - * Controls - */ - .input-text { - border-radius: 3px; border: 1px solid darkgrey; - padding: 5px !important; - margin-top: 10px !important; + border-radius: 3px; color: #555; + margin-top: 10px !important; + padding: 5px !important; } -/** - * Icons - */ - .options-help-icon { - display: inline-block; - cursor: pointer; background-image: url("../../icons/help-dark.svg"); - background-size: contain; background-position: left; background-repeat: no-repeat; + background-size: contain; + cursor: pointer; + display: inline-block; + height: 15px; margin-left: 5px; width: 15px; - height: 15px; } -/** - * Buttons - */ - .button { - -moz-user-select: none; background-color: #f5f5f5; - border-radius: 2px; border: 1px solid #cfcfcf; + border-radius: 2px; color: #5f5f5f; cursor: pointer; float: right; font-size: 12px; - outline: 0; padding: 5px 22px; - text-decoration: none; - user-select: none; text-align: center; + text-decoration: none; + -moz-user-select: none; + -ms-user-select: none; + -webkit-user-select: none; + user-select: none; } .button-warning { @@ -218,9 +192,9 @@ body { } .div-badge { + border-left: 1px solid #bbb; margin-top: 10px; padding-left: 30px; - border-left: 1px solid #bbb; } #badge-preview-top { @@ -229,20 +203,20 @@ body { } #counter-preview-badge { - position: absolute; - top: 0px; - right: -5px; - color: white; background: black; - padding: 1px 6px; - font-size: 10px; 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 { - width: 30px; height: 30px; margin-right: 5px; + width: 30px; } #icon-badge-preview { @@ -250,14 +224,14 @@ body { } .colorpicker { - display: flex; - padding-bottom: 5px; - margin-top: 10px; align-items: center; + display: flex; + margin-top: 10px; + padding-bottom: 5px; } .colorpicker > input { - margin-top: 0px !important; + margin-top: 0 !important; } div[class="color-picker:a"] { @@ -273,24 +247,20 @@ div[class="color-picker:a"] { } .img-restore-color { - margin-left: 5px; - height: 15px; cursor: pointer; + height: 15px; + margin-left: 5px; } .import-export > input[type="button"] { margin-bottom: 5px; } -/** - * Miscellaneous - */ - .description-option { color: #777; + font-size: 12px; font-style: italic; padding-left: 25px; - font-size: 12px; } .badge { @@ -307,7 +277,7 @@ div[class="color-picker:a"] { } #negate-html-filter-list-warning { - margin: 10px 0px 30px 0px; + margin: 10px 0 30px 0; } .hidden { @@ -343,24 +313,24 @@ div[class="color-picker:a"] { } .ruleset-generator { - display: flex; align-items: center; - padding: 5px 0px; + display: flex; + padding: 5px 0; } .last-update { - font-weight: 600; background-color: #ffa500; border-radius: 3px; color: #fff; font-size: 12px; + font-style: normal; + font-weight: 600; padding: 3px 5px !important; text-transform: uppercase; - font-style: normal; } .storage-type { - margin: 5px 0px; + margin: 5px 0; } .option-disabled > .title-option > .b-contain, @@ -387,15 +357,11 @@ div[class="color-picker:a"] { } #tf-domains-allowlist-google-fonts { - margin-top: 0px !important; - width: 100%; box-sizing: border-box; + margin-top: 0 !important; + width: 100%; } -/** - * Right to Left - */ - body[dir="rtl"] .badge { margin-left: 0; margin-right: 6px; @@ -417,19 +383,19 @@ body[dir="rtl"] .input-text { .option-group { background-color: #e1e1e1; - padding: 1.5rem; border-radius: 5px; - margin: 20px 0px; + margin: 20px 0; + padding: 1.5rem; } .option-links { list-style-type: disclosure-closed; + margin-top: 0; padding-top: 2rem; - margin-top: 0px; } .option-links > li { - padding-bottom: .5rem; + padding-bottom: 0.5rem; } @media only screen and (max-width: 500px) { @@ -442,9 +408,10 @@ body[dir="rtl"] .input-text { .div-icons-badge-colors { flex-wrap: wrap; } + .div-badge { border: none; - padding-left: 0px; + padding-left: 0; width: 100%; } } diff --git a/pages/popup/popup.css b/pages/popup/popup.css index ecd3c2fa..2b75bc42 100644 --- a/pages/popup/popup.css +++ b/pages/popup/popup.css @@ -8,32 +8,32 @@ body { font-family: 'Noto Sans', Arial, sans-serif !important; font-size: 75%; margin: 0 auto; - overflow-y: auto; - overflow-x: hidden; max-width: 348px; + overflow-x: hidden; + overflow-y: auto; } header { align-items: center; border-bottom: solid #d3d3d3 1px; display: flex; - position: relative; - padding: 8px 15px 8px 4px; justify-content: space-between; + padding: 8px 15px 8px 4px; + position: relative; } #manipulateDOM-indicator { background: url('../../icons/help-dark.svg') no-repeat right center; - color: #555; background-size: 15px 15px; + color: #555; padding-right: 20px; text-decoration: underline; } #manipulateDOM-indicator:hover { color: #777; - text-decoration: none; cursor: pointer; + text-decoration: none; } .panel { @@ -41,16 +41,16 @@ header { } .subpanel { - padding-top: 8px; max-height: 200px; overflow: auto; + padding-top: 8px; } .panel-overflow { + margin-left: 0; max-height: 300px; overflow: auto; - margin-left: 0px; - padding-left: 0px; + padding-left: 0; } .subpanel:last-child { @@ -59,15 +59,15 @@ header { } .content { - padding: 0px 15px; + padding: 0 15px; } footer { + align-items: center; + display: flex; + justify-content: space-between; overflow: hidden; padding: 8px 15px; - display: flex; - align-items: center; - justify-content: space-between; } #testing-utility { @@ -83,38 +83,35 @@ footer { * Fonts */ @font-face { - font-family: 'Noto Sans'; - font-style: normal; - font-weight: 400; - src: url('../../modules/noto-sans/noto-sans.woff2') - format('woff2'); + font-family: 'Noto Sans'; + font-style: normal; + font-weight: 400; + src: url('../../modules/noto-sans/noto-sans.woff2') format('woff2'); } @font-face { - font-family: 'Noto Sans'; - font-style: normal; - font-weight: 600; - src: url('../../modules/noto-sans/noto-sans-bold.woff2') - format('woff2'); + font-family: 'Noto Sans'; + font-style: normal; + font-weight: 600; + src: url('../../modules/noto-sans/noto-sans-bold.woff2') format('woff2'); } @font-face { - font-family: 'Noto Sans'; - font-style: italic; - font-weight: 400; - src: url('../../modules/noto-sans/noto-sans-italic.woff2') - format('woff2'); + font-family: 'Noto Sans'; + font-style: italic; + font-weight: 400; + src: url('../../modules/noto-sans/noto-sans-italic.woff2') format('woff2'); } /** * Headings */ .heading { + align-items: center; + display: flex; font-size: 14px; font-weight: 600; padding-left: 0; - display: flex; - align-items: center; } /** @@ -141,12 +138,12 @@ footer { border: 1px solid #e0e0e0; box-shadow: inset 0 2px 10px #e2e2e2; list-style: none; - padding: 0px 0px 0px 8px; + padding: 0 0 0 8px; } .sublist:last-child { border-bottom: 1px solid #e0e0e0; - margin-bottom: 0px; + margin-bottom: 0; } .sublist-item { @@ -161,15 +158,15 @@ footer { } #label-donate { - margin: 0px 5px 0px 0px; + margin: 0 5px 0 0; } #get-more-injections-btn, #label-donate { - cursor: pointer; background-color: #f0f0f0; color: #555; + cursor: pointer; font-weight: 600; - margin: 0px 5px; + margin: 0 5px; } #get-more-injections-btn:hover { @@ -191,17 +188,19 @@ footer { * Buttons */ .button { - -moz-user-select: none; - user-select: none; background-color: #f5f5f5; - border-radius: 2px; border: 1px solid #cfcfcf; + border-radius: 2px; color: #5f5f5f; cursor: pointer; float: right; font-size: 12px; - padding: 5px 22px; margin-left: 10px; + padding: 5px 22px; + -moz-user-select: none; + -ms-user-select: none; + -webkit-user-select: none; + user-select: none; } .button:hover { @@ -214,21 +213,23 @@ footer { .button-svg { background-size: cover; - width: 15px; height: 15px; + width: 15px; } /** * Donate */ #donate-button { - -moz-user-select: none; - user-select: none; color: #5f5f5f; cursor: pointer; + display: flex; float: right; 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 { @@ -251,7 +252,7 @@ footer { } #options-button:hover { - filter: contrast(.5); + filter: contrast(0.5); } /** @@ -263,7 +264,7 @@ footer { } #statistics-button:hover { - filter: contrast(.5); + filter: contrast(0.5); } #statistics-button { @@ -274,59 +275,61 @@ footer { * Toggles */ #protection-toggle, #manipulateDOM-toggle { - -moz-user-select: none; - cursor: pointer; - float: right; - user-select: none; + cursor: pointer; + float: right; + -moz-user-select: none; + -ms-user-select: none; + -webkit-user-select: none; + user-select: none; } .switch { - position: relative; - display: inline-block; - width: 40px; - height: 18px; + display: inline-block; + height: 18px; + position: relative; + width: 40px; } .switch input { - opacity: 0; - width: 0; - height: 0; + height: 0; + opacity: 0; + width: 0; } .slider, .slider-disabled { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: #b40000; - -webkit-transition: .1s; - transition: .1s; - border-radius: 34px; + background-color: #b40000; + 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 { - position: absolute; - content: ""; - height: 14px; - width: 14px; - left: 2px; - bottom: 2px; - background-color: #f9f9fa; - -webkit-transition: .3s; - transition: .3s; - border-radius: 50%; +.slider::before, .slider-disabled::before { + background-color: #f9f9fa; + border-radius: 50%; + bottom: 2px; + content: ""; + height: 14px; + left: 2px; + position: absolute; + -webkit-transition: 0.3s; + transition: 0.3s; + width: 14px; } input:checked + .slider { - background-color: #6bb798; + background-color: #6bb798; } -input:checked + .slider:before { - -webkit-transform: translateX(22px); - -ms-transform: translateX(22px); - transform: translateX(22px); +input:checked + .slider::before { + -webkit-transform: translateX(22px); + -ms-transform: translateX(22px); + transform: translateX(22px); } .slider-disabled { @@ -342,7 +345,6 @@ input:checked + .slider:hover { background-color: #4b806a; } - /** * Miscellaneous */ @@ -379,7 +381,7 @@ input:checked + .slider:hover { .label-version { color: #6aac91; font-size: 9px; - margin: 0px 0px 5px 2px; + margin: 0 0 5px 2px; } .label-domain { @@ -397,13 +399,13 @@ input:checked + .slider:hover { } #popup-incomplete-translation { - width: 100%; - color: white; - text-align: center; - font-weight: bold; background-color: #ffa500; - padding: 0px; + color: white; 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) { - body { width: 348px; } } @media (prefers-color-scheme: dark) { - /** * Sections */ @@ -435,10 +435,10 @@ input:checked + .slider:hover { #manipulateDOM-indicator { background: url('../../icons/help-light.svg') no-repeat right center; background-size: 15px 15px; - padding-right: 20px; - text-decoration: underline; color: #f2f2f2; font-weight: bold; + padding-right: 20px; + text-decoration: underline; } /** @@ -505,8 +505,8 @@ input:checked + .slider:hover { background-color: #b54b4b; } - .slider:before { - background-color: #323232; + .slider::before { + background-color: #323232; } .slider-disabled { @@ -514,14 +514,14 @@ input:checked + .slider:hover { cursor: not-allowed; } - .slider-disabled:before { + .slider-disabled::before { background-color: #323232; } #label-donate { - cursor: pointer; background-color: #404040; color: #bbb; + cursor: pointer; font-weight: 600; } diff --git a/pages/statistics/statistics.css b/pages/statistics/statistics.css index ec930cb6..0f28bbbd 100644 --- a/pages/statistics/statistics.css +++ b/pages/statistics/statistics.css @@ -20,7 +20,7 @@ td:first-child { } td > p { - margin: 0px; + margin: 0; } th:first-child { @@ -28,16 +28,14 @@ th:first-child { } select { - background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiCiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiCiAgIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIgogICB3aWR0aD0iMTUiCiAgIGhlaWdodD0iOCIKICAgdmlld0JveD0iMCAwIDMuOTY4NzQ5OSAyLjExNjY2NjgiCiAgIHZlcnNpb249IjEuMSIKICAgaWQ9InN2ZzQ1NzkiCiAgIGlua3NjYXBlOnZlcnNpb249IjAuOTIuMyAoMjQwNTU0NiwgMjAxOC0wMy0xMSkiCiAgIHNvZGlwb2RpOmRvY25hbWU9IlplaWNobnVuZ19saWdodC5zdmciPgogIDxkZWZzCiAgICAgaWQ9ImRlZnM0NTczIiAvPgogIDxzb2RpcG9kaTpuYW1lZHZpZXcKICAgICBpZD0iYmFzZSIKICAgICBwYWdlY29sb3I9IiNmZmZmZmYiCiAgICAgYm9yZGVyY29sb3I9IiM2NjY2NjYiCiAgICAgYm9yZGVyb3BhY2l0eT0iMS4wIgogICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwLjAiCiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIKICAgICBpbmtzY2FwZTp6b29tPSI0NC44IgogICAgIGlua3NjYXBlOmN4PSI3LjU4MzUxNzMiCiAgICAgaW5rc2NhcGU6Y3k9IjYuMzkwODIzOCIKICAgICBpbmtzY2FwZTpkb2N1bWVudC11bml0cz0ibW0iCiAgICAgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0ibGF5ZXIxIgogICAgIHNob3dncmlkPSJmYWxzZSIKICAgICB1bml0cz0icHgiCiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIxNjgwIgogICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9Ijk5NyIKICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMCIKICAgICBpbmtzY2FwZTp3aW5kb3cteT0iMjUiCiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMSIgLz4KICA8bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE0NTc2Ij4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZwogICAgIGlua3NjYXBlOmxhYmVsPSJFYmVuZSAxIgogICAgIGlua3NjYXBlOmdyb3VwbW9kZT0ibGF5ZXIiCiAgICAgaWQ9ImxheWVyMSIKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLC0yOTQuODgzMjkpIj4KICAgIDxwYXRoCiAgICAgICBpZD0iWE1MSURfMjI0XyIKICAgICAgIGQ9Im0gMC4wODQ1MDcyMywyOTUuMjA1NjMgMS43NzQ1MTIxNywxLjcxNDUgYyAwLjAzMzE5OCwwLjAzMiAwLjA3ODM0NywwLjA1MDIgMC4xMjU0MTM1LDAuMDUwMiAwLjA0NzA2NywwIDAuMDkyMjE1LC0wLjAxODEgMC4xMjU0MTM0LC0wLjA1MDIgbCAxLjc3NDM5NDEsLTEuNzE0NSBjIDAuMDY5MzQ3LC0wLjA2NyAwLjA2OTM0NywtMC4xNzU1IDAsLTAuMjQyNDYgLTAuMDY5MzQ3LC0wLjA2NyAtMC4xODE2NDI5LC0wLjA2NyAtMC4yNTA5MzAyLDAgbCAtMS42NDg5NTExLDEuNTkzMjYgLTEuNjQ5MDI0OTIsLTEuNTkzMjYgYyAtMC4wMzQ2NzMxLC0wLjAzMzUgLTAuMDgwMTE3MSwtMC4wNTAyIC0wLjEyNTQxMzQ4LC0wLjA1MDIgLTAuMDQ1NDQzOSwwIC0wLjA5MDg4NzksMC4wMTY4IC0wLjEyNTQxMzQ3LDAuMDUwMiAtMC4wNjkzNDYyOSwwLjA2NyAtMC4wNjkzNDYyOSwwLjE3NTUgMS40NzVlLTUsMC4yNDI0NiB6IgogICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIKICAgICAgIHN0eWxlPSJzdHJva2Utd2lkdGg6MC4wMTE2MjgxMjtmaWxsOiM1ZjVmNWY7ZmlsbC1vcGFjaXR5OjEiIC8+CiAgICA8ZwogICAgICAgaWQ9ImczIgogICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoLTAuMDEyMTY5NzMsMCwwLC0wLjAxMjAyMDU0LDMuOTMzMjg0NSwyOTYuOTg3OTkpIiAvPgogICAgPGcKICAgICAgIGlkPSJnNSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KC0wLjAxMjE2OTczLDAsMCwtMC4wMTIwMjA1NCwzLjkzMzI4NDUsMjk2Ljk4Nzk5KSIgLz4KICAgIDxnCiAgICAgICBpZD0iZzciCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgtMC4wMTIxNjk3MywwLDAsLTAuMDEyMDIwNTQsMy45MzMyODQ1LDI5Ni45ODc5OSkiIC8+CiAgICA8ZwogICAgICAgaWQ9Imc5IgogICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoLTAuMDEyMTY5NzMsMCwwLC0wLjAxMjAyMDU0LDMuOTMzMjg0NSwyOTYuOTg3OTkpIiAvPgogICAgPGcKICAgICAgIGlkPSJnMTEiCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgtMC4wMTIxNjk3MywwLDAsLTAuMDEyMDIwNTQsMy45MzMyODQ1LDI5Ni45ODc5OSkiIC8+CiAgICA8ZwogICAgICAgaWQ9ImcxMyIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KC0wLjAxMjE2OTczLDAsMCwtMC4wMTIwMjA1NCwzLjkzMzI4NDUsMjk2Ljk4Nzk5KSIgLz4KICAgIDxnCiAgICAgICBpZD0iZzE1IgogICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoLTAuMDEyMTY5NzMsMCwwLC0wLjAxMjAyMDU0LDMuOTMzMjg0NSwyOTYuOTg3OTkpIiAvPgogICAgPGcKICAgICAgIGlkPSJnMTciCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgtMC4wMTIxNjk3MywwLDAsLTAuMDEyMDIwNTQsMy45MzMyODQ1LDI5Ni45ODc5OSkiIC8+CiAgICA8ZwogICAgICAgaWQ9ImcxOSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KC0wLjAxMjE2OTczLDAsMCwtMC4wMTIwMjA1NCwzLjkzMzI4NDUsMjk2Ljk4Nzk5KSIgLz4KICAgIDxnCiAgICAgICBpZD0iZzIxIgogICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoLTAuMDEyMTY5NzMsMCwwLC0wLjAxMjAyMDU0LDMuOTMzMjg0NSwyOTYuOTg3OTkpIiAvPgogICAgPGcKICAgICAgIGlkPSJnMjMiCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgtMC4wMTIxNjk3MywwLDAsLTAuMDEyMDIwNTQsMy45MzMyODQ1LDI5Ni45ODc5OSkiIC8+CiAgICA8ZwogICAgICAgaWQ9ImcyNSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KC0wLjAxMjE2OTczLDAsMCwtMC4wMTIwMjA1NCwzLjkzMzI4NDUsMjk2Ljk4Nzk5KSIgLz4KICAgIDxnCiAgICAgICBpZD0iZzI3IgogICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoLTAuMDEyMTY5NzMsMCwwLC0wLjAxMjAyMDU0LDMuOTMzMjg0NSwyOTYuOTg3OTkpIiAvPgogICAgPGcKICAgICAgIGlkPSJnMjkiCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgtMC4wMTIxNjk3MywwLDAsLTAuMDEyMDIwNTQsMy45MzMyODQ1LDI5Ni45ODc5OSkiIC8+CiAgICA8ZwogICAgICAgaWQ9ImczMSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KC0wLjAxMjE2OTczLDAsMCwtMC4wMTIwMjA1NCwzLjkzMzI4NDUsMjk2Ljk4Nzk5KSIgLz4KICA8L2c+Cjwvc3ZnPgo="); - background-repeat: no-repeat; - background-position-x: 95%; - background-position-y: 50%; - -webkit-appearance: none; -moz-appearance: none; + -webkit-appearance: none; + background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiCiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiCiAgIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIgogICB3aWR0aD0iMTUiCiAgIGhlaWdodD0iOCIKICAgdmlld0JveD0iMCAwIDMuOTY4NzQ5OSAyLjExNjY2NjgiCiAgIHZlcnNpb249IjEuMSIKICAgaWQ9InN2ZzQ1NzkiCiAgIGlua3NjYXBlOnZlcnNpb249IjAuOTIuMyAoMjQwNTU0NiwgMjAxOC0wMy0xMSkiCiAgIHNvZGlwb2RpOmRvY25hbWU9IlplaWNobnVuZ19saWdodC5zdmciPgogIDxkZWZzCiAgICAgaWQ9ImRlZnM0NTczIiAvPgogIDxzb2RpcG9kaTpuYW1lZHZpZXcKICAgICBpZD0iYmFzZSIKICAgICBwYWdlY29sb3I9IiNmZmZmZmYiCiAgICAgYm9yZGVyY29sb3I9IiM2NjY2NjYiCiAgICAgYm9yZGVyb3BhY2l0eT0iMS4wIgogICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwLjAiCiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIKICAgICBpbmtzY2FwZTp6b29tPSI0NC44IgogICAgIGlua3NjYXBlOmN4PSI3LjU4MzUxNzMiCiAgICAgaW5rc2NhcGU6Y3k9IjYuMzkwODIzOCIKICAgICBpbmtzY2FwZTpkb2N1bWVudC11bml0cz0ibW0iCiAgICAgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0ibGF5ZXIxIgogICAgIHNob3dncmlkPSJmYWxzZSIKICAgICB1bml0cz0icHgiCiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIxNjgwIgogICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9Ijk5NyIKICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMCIKICAgICBpbmtzY2FwZTp3aW5kb3cteT0iMjUiCiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMSIgLz4KICA8bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE0NTc2Ij4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZwogICAgIGlua3NjYXBlOmxhYmVsPSJFYmVuZSAxIgogICAgIGlua3NjYXBlOmdyb3VwbW9kZT0ibGF5ZXIiCiAgICAgaWQ9ImxheWVyMSIKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLC0yOTQuODgzMjkpIj4KICAgIDxwYXRoCiAgICAgICBpZD0iWE1MSURfMjI0XyIKICAgICAgIGQ9Im0gMC4wODQ1MDcyMywyOTUuMjA1NjMgMS43NzQ1MTIxNywxLjcxNDUgYyAwLjAzMzE5OCwwLjAzMiAwLjA3ODM0NywwLjA1MDIgMC4xMjU0MTM1LDAuMDUwMiAwLjA0NzA2NywwIDAuMDkyMjE1LC0wLjAxODEgMC4xMjU0MTM0LC0wLjA1MDIgbCAxLjc3NDM5NDEsLTEuNzE0NSBjIDAuMDY5MzQ3LC0wLjA2NyAwLjA2OTM0NywtMC4xNzU1IDAsLTAuMjQyNDYgLTAuMDY5MzQ3LC0wLjA2NyAtMC4xODE2NDI5LC0wLjA2NyAtMC4yNTA5MzAyLDAgbCAtMS42NDg5NTExLDEuNTkzMjYgLTEuNjQ5MDI0OTIsLTEuNTkzMjYgYyAtMC4wMzQ2NzMxLC0wLjAzMzUgLTAuMDgwMTE3MSwtMC4wNTAyIC0wLjEyNTQxMzQ4LC0wLjA1MDIgLTAuMDQ1NDQzOSwwIC0wLjA5MDg4NzksMC4wMTY4IC0wLjEyNTQxMzQ3LDAuMDUwMiAtMC4wNjkzNDYyOSwwLjA2NyAtMC4wNjkzNDYyOSwwLjE3NTUgMS40NzVlLTUsMC4yNDI0NiB6IgogICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIKICAgICAgIHN0eWxlPSJzdHJva2Utd2lkdGg6MC4wMTE2MjgxMjtmaWxsOiM1ZjVmNWY7ZmlsbC1vcGFjaXR5OjEiIC8+CiAgICA8ZwogICAgICAgaWQ9ImczIgogICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoLTAuMDEyMTY5NzMsMCwwLC0wLjAxMjAyMDU0LDMuOTMzMjg0NSwyOTYuOTg3OTkpIiAvPgogICAgPGcKICAgICAgIGlkPSJnNSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KC0wLjAxMjE2OTczLDAsMCwtMC4wMTIwMjA1NCwzLjkzMzI4NDUsMjk2Ljk4Nzk5KSIgLz4KICAgIDxnCiAgICAgICBpZD0iZzciCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgtMC4wMTIxNjk3MywwLDAsLTAuMDEyMDIwNTQsMy45MzMyODQ1LDI5Ni45ODc5OSkiIC8+CiAgICA8ZwogICAgICAgaWQ9Imc5IgogICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoLTAuMDEyMTY5NzMsMCwwLC0wLjAxMjAyMDU0LDMuOTMzMjg0NSwyOTYuOTg3OTkpIiAvPgogICAgPGcKICAgICAgIGlkPSJnMTEiCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgtMC4wMTIxNjk3MywwLDAsLTAuMDEyMDIwNTQsMy45MzMyODQ1LDI5Ni45ODc5OSkiIC8+CiAgICA8ZwogICAgICAgaWQ9ImcxMyIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KC0wLjAxMjE2OTczLDAsMCwtMC4wMTIwMjA1NCwzLjkzMzI4NDUsMjk2Ljk4Nzk5KSIgLz4KICAgIDxnCiAgICAgICBpZD0iZzE1IgogICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoLTAuMDEyMTY5NzMsMCwwLC0wLjAxMjAyMDU0LDMuOTMzMjg0NSwyOTYuOTg3OTkpIiAvPgogICAgPGcKICAgICAgIGlkPSJnMTciCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgtMC4wMTIxNjk3MywwLDAsLTAuMDEyMDIwNTQsMy45MzMyODQ1LDI5Ni45ODc5OSkiIC8+CiAgICA8ZwogICAgICAgaWQ9ImcxOSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KC0wLjAxMjE2OTczLDAsMCwtMC4wMTIwMjA1NCwzLjkzMzI4NDUsMjk2Ljk4Nzk5KSIgLz4KICAgIDxnCiAgICAgICBpZD0iZzIxIgogICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoLTAuMDEyMTY5NzMsMCwwLC0wLjAxMjAyMDU0LDMuOTMzMjg0NSwyOTYuOTg3OTkpIiAvPgogICAgPGcKICAgICAgIGlkPSJnMjMiCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgtMC4wMTIxNjk3MywwLDAsLTAuMDEyMDIwNTQsMy45MzMyODQ1LDI5Ni45ODc5OSkiIC8+CiAgICA8ZwogICAgICAgaWQ9ImcyNSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KC0wLjAxMjE2OTczLDAsMCwtMC4wMTIwMjA1NCwzLjkzMzI4NDUsMjk2Ljk4Nzk5KSIgLz4KICAgIDxnCiAgICAgICBpZD0iZzI3IgogICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoLTAuMDEyMTY5NzMsMCwwLC0wLjAxMjAyMDU0LDMuOTMzMjg0NSwyOTYuOTg3OTkpIiAvPgogICAgPGcKICAgICAgIGlkPSJnMjkiCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgtMC4wMTIxNjk3MywwLDAsLTAuMDEyMDIwNTQsMy45MzMyODQ1LDI5Ni45ODc5OSkiIC8+CiAgICA8ZwogICAgICAgaWQ9ImczMSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KC0wLjAxMjE2OTczLDAsMCwtMC4wMTIwMjA1NCwzLjkzMzI4NDUsMjk2Ljk4Nzk5KSIgLz4KICA8L2c+Cjwvc3ZnPgo="); + background-position: 95% 50%; + background-repeat: no-repeat; border-radius: 2px; - outline: 0; - padding-left: 5px !important; cursor: pointer; + padding-left: 5px !important; } #btn-delete:hover { @@ -47,18 +45,18 @@ select { } select, #btn-delete { + background-color: #fafafa; + border: 1px solid #5f5f5f; + border-radius: 2px; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; - height: 30px; - width: 40%; - padding: 0px; - margin: 0px; - background-color: #fafafa; - border-radius: 2px; - border: 1px solid #5f5f5f; color: #5f5f5f; font-size: 14px; + height: 30px; + margin: 0; + padding: 0; + width: 40%; } #statistics-overview { @@ -66,9 +64,9 @@ select, #btn-delete { } .container { - width: 300px; margin-left: auto; margin-right: auto; + width: 300px; } .overview { @@ -78,17 +76,18 @@ select, #btn-delete { } .button { - -moz-user-select: none; - cursor: pointer; - float: right; - outline: 0; - text-decoration: none; - user-select: none; - text-align: center; - background: none; - display: flex; - justify-content: center; align-items: center; + background: none; + cursor: pointer; + display: flex; + float: right; + justify-content: center; + text-align: center; + text-decoration: none; + -moz-user-select: none; + -ms-user-select: none; + -webkit-user-select: none; + user-select: none; } #btn-statistics { @@ -104,16 +103,15 @@ select, #btn-delete { } @media (prefers-color-scheme: dark) { - select:hover { background-color: #434343; } select { - border: 1px solid #323232; background-color: #3c3c3c; - color: #bbb; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiCiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiCiAgIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIgogICB3aWR0aD0iMTUiCiAgIGhlaWdodD0iOCIKICAgdmlld0JveD0iMCAwIDMuOTY4NzQ5OSAyLjExNjY2NjgiCiAgIHZlcnNpb249IjEuMSIKICAgaWQ9InN2ZzQ1NzkiCiAgIGlua3NjYXBlOnZlcnNpb249IjAuOTIuMyAoMjQwNTU0NiwgMjAxOC0wMy0xMSkiCiAgIHNvZGlwb2RpOmRvY25hbWU9IlplaWNobnVuZ19kYXJrLnN2ZyI+CiAgPGRlZnMKICAgICBpZD0iZGVmczQ1NzMiIC8+CiAgPHNvZGlwb2RpOm5hbWVkdmlldwogICAgIGlkPSJiYXNlIgogICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJjb2xvcj0iIzY2NjY2NiIKICAgICBib3JkZXJvcGFjaXR5PSIxLjAiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAuMCIKICAgICBpbmtzY2FwZTpwYWdlc2hhZG93PSIyIgogICAgIGlua3NjYXBlOnpvb209IjQ0LjgiCiAgICAgaW5rc2NhcGU6Y3g9IjcuNTgzNTE3MyIKICAgICBpbmtzY2FwZTpjeT0iNi4zOTA4MjM4IgogICAgIGlua3NjYXBlOmRvY3VtZW50LXVuaXRzPSJtbSIKICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJsYXllcjEiCiAgICAgc2hvd2dyaWQ9ImZhbHNlIgogICAgIHVuaXRzPSJweCIKICAgICBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjE2ODAiCiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iOTk3IgogICAgIGlua3NjYXBlOndpbmRvdy14PSIwIgogICAgIGlua3NjYXBlOndpbmRvdy15PSIyNSIKICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIiAvPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTQ1NzYiPgogICAgPHJkZjpSREY+CiAgICAgIDxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj4KICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4KICAgICAgICA8ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+CiAgICAgICAgPGRjOnRpdGxlPjwvZGM6dGl0bGU+CiAgICAgIDwvY2M6V29yaz4KICAgIDwvcmRmOlJERj4KICA8L21ldGFkYXRhPgogIDxnCiAgICAgaW5rc2NhcGU6bGFiZWw9IkViZW5lIDEiCiAgICAgaW5rc2NhcGU6Z3JvdXBtb2RlPSJsYXllciIKICAgICBpZD0ibGF5ZXIxIgogICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTI5NC44ODMyOSkiPgogICAgPHBhdGgKICAgICAgIGlkPSJYTUxJRF8yMjRfIgogICAgICAgZD0ibSAwLjA4NDUwNzIzLDI5NS4yMDU2MyAxLjc3NDUxMjE3LDEuNzE0NSBjIDAuMDMzMTk4LDAuMDMyIDAuMDc4MzQ3LDAuMDUwMiAwLjEyNTQxMzUsMC4wNTAyIDAuMDQ3MDY3LDAgMC4wOTIyMTUsLTAuMDE4MSAwLjEyNTQxMzQsLTAuMDUwMiBsIDEuNzc0Mzk0MSwtMS43MTQ1IGMgMC4wNjkzNDcsLTAuMDY3IDAuMDY5MzQ3LC0wLjE3NTUgMCwtMC4yNDI0NiAtMC4wNjkzNDcsLTAuMDY3IC0wLjE4MTY0MjksLTAuMDY3IC0wLjI1MDkzMDIsMCBsIC0xLjY0ODk1MTEsMS41OTMyNiAtMS42NDkwMjQ5MiwtMS41OTMyNiBjIC0wLjAzNDY3MzEsLTAuMDMzNSAtMC4wODAxMTcxLC0wLjA1MDIgLTAuMTI1NDEzNDgsLTAuMDUwMiAtMC4wNDU0NDM5LDAgLTAuMDkwODg3OSwwLjAxNjggLTAuMTI1NDEzNDcsMC4wNTAyIC0wLjA2OTM0NjI5LDAuMDY3IC0wLjA2OTM0NjI5LDAuMTc1NSAxLjQ3NWUtNSwwLjI0MjQ2IHoiCiAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIgogICAgICAgc3R5bGU9InN0cm9rZS13aWR0aDowLjAxMTYyODEyO2ZpbGw6I2JiYmJiYjtmaWxsLW9wYWNpdHk6MSIgLz4KICAgIDxnCiAgICAgICBpZD0iZzMiCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgtMC4wMTIxNjk3MywwLDAsLTAuMDEyMDIwNTQsMy45MzMyODQ1LDI5Ni45ODc5OSkiIC8+CiAgICA8ZwogICAgICAgaWQ9Imc1IgogICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoLTAuMDEyMTY5NzMsMCwwLC0wLjAxMjAyMDU0LDMuOTMzMjg0NSwyOTYuOTg3OTkpIiAvPgogICAgPGcKICAgICAgIGlkPSJnNyIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KC0wLjAxMjE2OTczLDAsMCwtMC4wMTIwMjA1NCwzLjkzMzI4NDUsMjk2Ljk4Nzk5KSIgLz4KICAgIDxnCiAgICAgICBpZD0iZzkiCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgtMC4wMTIxNjk3MywwLDAsLTAuMDEyMDIwNTQsMy45MzMyODQ1LDI5Ni45ODc5OSkiIC8+CiAgICA8ZwogICAgICAgaWQ9ImcxMSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KC0wLjAxMjE2OTczLDAsMCwtMC4wMTIwMjA1NCwzLjkzMzI4NDUsMjk2Ljk4Nzk5KSIgLz4KICAgIDxnCiAgICAgICBpZD0iZzEzIgogICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoLTAuMDEyMTY5NzMsMCwwLC0wLjAxMjAyMDU0LDMuOTMzMjg0NSwyOTYuOTg3OTkpIiAvPgogICAgPGcKICAgICAgIGlkPSJnMTUiCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgtMC4wMTIxNjk3MywwLDAsLTAuMDEyMDIwNTQsMy45MzMyODQ1LDI5Ni45ODc5OSkiIC8+CiAgICA8ZwogICAgICAgaWQ9ImcxNyIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KC0wLjAxMjE2OTczLDAsMCwtMC4wMTIwMjA1NCwzLjkzMzI4NDUsMjk2Ljk4Nzk5KSIgLz4KICAgIDxnCiAgICAgICBpZD0iZzE5IgogICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoLTAuMDEyMTY5NzMsMCwwLC0wLjAxMjAyMDU0LDMuOTMzMjg0NSwyOTYuOTg3OTkpIiAvPgogICAgPGcKICAgICAgIGlkPSJnMjEiCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgtMC4wMTIxNjk3MywwLDAsLTAuMDEyMDIwNTQsMy45MzMyODQ1LDI5Ni45ODc5OSkiIC8+CiAgICA8ZwogICAgICAgaWQ9ImcyMyIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KC0wLjAxMjE2OTczLDAsMCwtMC4wMTIwMjA1NCwzLjkzMzI4NDUsMjk2Ljk4Nzk5KSIgLz4KICAgIDxnCiAgICAgICBpZD0iZzI1IgogICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoLTAuMDEyMTY5NzMsMCwwLC0wLjAxMjAyMDU0LDMuOTMzMjg0NSwyOTYuOTg3OTkpIiAvPgogICAgPGcKICAgICAgIGlkPSJnMjciCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgtMC4wMTIxNjk3MywwLDAsLTAuMDEyMDIwNTQsMy45MzMyODQ1LDI5Ni45ODc5OSkiIC8+CiAgICA8ZwogICAgICAgaWQ9ImcyOSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KC0wLjAxMjE2OTczLDAsMCwtMC4wMTIwMjA1NCwzLjkzMzI4NDUsMjk2Ljk4Nzk5KSIgLz4KICAgIDxnCiAgICAgICBpZD0iZzMxIgogICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoLTAuMDEyMTY5NzMsMCwwLC0wLjAxMjAyMDU0LDMuOTMzMjg0NSwyOTYuOTg3OTkpIiAvPgogIDwvZz4KPC9zdmc+Cg=="); + border: 1px solid #323232; + color: #bbb; } #btn-delete { diff --git a/pages/style.css b/pages/style.css index 6714dc97..97229531 100644 --- a/pages/style.css +++ b/pages/style.css @@ -6,19 +6,19 @@ html { body { 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; color: #555; font-size: 14px; + height: unset !important; margin: 0 auto; max-width: 982px; min-height: 100%; min-width: 256px; 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 { @@ -29,27 +29,27 @@ h1 { } hr { - display: block; - height: 1px; border: 0; border-top: 1px solid #ccc; + display: block; + height: 1px; margin: 1em 0; padding: 0; } .btn-panel { cursor: default; + display: flex; font-family: 'Noto Sans', Arial, sans-serif; + justify-content: center; margin: auto; max-width: 750px; - display: flex; - justify-content: center; } .topic-badge { background-color: #fcfcfc; - border-radius: 100px; border: 4px solid #e6e6e6; + border-radius: 100px; color: #5a8f79; display: inline-block; font-size: 48px; @@ -88,19 +88,19 @@ hr { } .btn { - color: #fff !important; - font-weight: 600; - margin: 15px; - padding: 11px 17px; - text-decoration: none; - text-align: center; - width: 100px; + background: 0 0; border-radius: 4px; border-style: solid; border-width: 1px; -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; - background: 0 0; + color: #fff !important; + font-weight: 600; + margin: 15px; + padding: 11px 17px; + text-align: center; + text-decoration: none; + width: 100px; } .btn:hover { @@ -108,10 +108,10 @@ hr { } .btn-text { - display: inline-flex; align-items: center; - min-height: 40px; + display: inline-flex; justify-content: center; + min-height: 40px; } .btn-gitlab { @@ -170,10 +170,10 @@ hr { } .uncle-sam, .we-need-you-title { + display: block; margin-left: auto; margin-right: auto; text-align: center; - display: block; } .uncle-sam { @@ -206,15 +206,15 @@ hr { } .btn { - padding: 13px 18px 12px; - width: 100%; margin-bottom: 10px; max-width: 733px; + padding: 13px 18px 12px; + width: 100%; } .btn-text { - width: 100%; min-height: unset; + width: 100%; } } diff --git a/pages/updates/updates.css b/pages/updates/updates.css index 5b133ce4..58847684 100644 --- a/pages/updates/updates.css +++ b/pages/updates/updates.css @@ -3,7 +3,7 @@ */ .release-date { - font-weight: bold; + font-weight: bold; } ul { @@ -16,7 +16,7 @@ ul { */ input[type=radio] { - margin: 0px; + margin: 0; } label { @@ -28,8 +28,8 @@ input[type=radio], label { } .ruleset-generator { - margin-top: 10px; display: inline-flex; + margin-top: 10px; width: 100%; }