LocalCDN-Firefox-Chrome-Brave/pages/options/options.css

477 lines
7.5 KiB
CSS

/**
* 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;
}
.option-buttons {
border: none;
padding: 5px 10px;
margin: 5px 10px;
background-color: transparent;
font-weight: normal;
cursor: pointer;
}
.option-buttons-active {
font-weight: bold;
border-bottom: 1px solid #555;
}
.option-buttons:hover {
background-color: #ccc;
}
.option {
display: flex;
flex-direction: column;
padding-bottom: 20px;
}
.notice {
border-radius: 3px;
box-sizing: border-box;
margin-top: 25px;
padding: 14px 16px;
}
.notice-default {
background-color: #f1f1f1;
}
.notice-warning {
background-color: #ffa500;
color: #fff;
}
#notice-locale {
background-color: #ffa500;
color: white;
}
.without-checkbox {
margin: 0px !important;
padding: 0px !important;
}
#advanced-tab, #export-import-tab, #info-tab {
display: none;
}
.btn-group {
margin-top: 2rem;
}
.footer {
text-align: center;
}
.div-selected-icon {
margin-top: 10px;
padding-right: 25px;
min-width: 113px;
}
.div-selected-icon > label {
margin-bottom: 1em;
}
.div-selected-icon > label > .b-input {
margin-top: 8px;
}
.div-selected-icon > label > img {
margin-right: 10px;
}
/**
* Fonts
*/
@font-face {
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-face {
font-family: 'Noto Sans';
font-style: italic;
font-weight: 400;
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;
color: #555;
}
/**
* Icons
*/
.options-help-icon {
display: inline-block;
cursor: pointer;
background-image: url("../../icons/info-dark.svg");
background-size: contain;
background-position: left;
background-repeat: no-repeat;
margin-left: 5px;
width: 15px;
height: 15px;
}
/**
* Buttons
*/
.button {
-moz-user-select: none;
background-color: #f5f5f5;
border-radius: 2px;
border: 1px solid #cfcfcf;
color: #5f5f5f;
cursor: pointer;
float: right;
font-size: 12px;
outline: 0;
padding: 5px 22px;
text-decoration: none;
user-select: none;
text-align: center;
}
.button-warning {
background-color: #ea9700;
border: 1px solid #d88c00;
color: #fff;
font-weight: 600;
}
.button-warning:hover {
background-color: #d88c00;
border-color: #c98200;
color: #fff !important;
}
.button-warning:active {
background-color: #c07c00;
border-color: #b47400;
}
.button-notice {
margin-left: auto;
padding: 5px 9px;
}
#html-filter-domains-title-exclude {
display: none;
}
.div-icons-badge-colors {
display: flex;
flex-wrap: nowrap;
}
.div-badge {
margin-top: 10px;
padding-left: 30px;
border-left: 1px solid #bbb;
}
#badge-preview-top {
position: relative;
width: 38px;
}
#counter-preview-badge {
position: absolute;
top: 0px;
right: -5px;
color: white;
background: black;
padding: 1px 6px;
font-size: 10px;
border-radius: 5px;
}
#pre-badged-background-color, #pre-badged-text-color {
width: 30px;
height: 30px;
margin-right: 5px;
}
#icon-badge-preview {
margin-top: 5px;
}
.colorpicker {
display: flex;
padding-bottom: 5px;
margin-top: 10px;
align-items: center;
}
.colorpicker > input {
margin-top: 0px !important;
}
div[class="color-picker:a"] {
display: none;
}
.color-error {
color: red;
}
#badged-background-color, #badged-text-color {
max-width: 150px;
}
.img-restore-color {
margin-left: 5px;
height: 15px;
cursor: pointer;
}
.import-export > input[type="button"] {
margin-bottom: 5px;
}
/**
* Miscellaneous
*/
.description-option {
color: #777;
font-style: italic;
padding-left: 25px;
font-size: 12px;
}
.badge {
border-radius: 3px;
color: #fff;
font-size: 8px;
margin-left: 6px;
padding: 3px 5px;
text-transform: uppercase;
}
.badge-warning {
background-color: #ffa500;
}
#negate-html-filter-list-warning {
margin: 10px 0px 30px 0px;
}
.hidden {
display: none !important;
}
.notice-head {
font-weight: 600;
margin-bottom: 6px;
}
.notice-body {
align-items: center;
display: flex;
}
.notice-message {
line-height: 1.3;
margin-right: 14px;
}
#generated-rules, #unsupported-frameworks {
display: none;
}
#generated-list {
margin-top: 15px;
}
.info > p {
cursor: pointer;
padding-left: 25px;
}
.ruleset-generator {
display: flex;
align-items: center;
padding: 5px 0px;
}
.last-update {
font-weight: 600;
background-color: #ffa500;
border-radius: 3px;
color: #fff;
font-size: 12px;
padding: 3px 5px !important;
text-transform: uppercase;
font-style: normal;
}
.storage-type {
margin: 5px 0px;
}
.option-disabled > .title-option > .b-contain,
.b-contain input[type="checkbox"]:disabled ~ .b-input {
cursor: default !important;
}
.option-disabled {
color: gray !important;
}
.option-disabled > .title-option > .b-contain > .b-input {
background: gray !important;
cursor: default;
}
.option-disabled > .title-option > .b-contain input:checked ~ .b-input {
background: gray !important;
border-color: gray !important;
}
#div-domains-allowlist-google-fonts {
margin-top: 1em;
}
#tf-domains-allowlist-google-fonts {
margin-top: 0px !important;
width: 100%;
box-sizing: border-box;
}
/**
* Right to Left
*/
body[dir="rtl"] .badge {
margin-left: 0;
margin-right: 6px;
}
body[dir="rtl"] .description-option {
margin-left: 0;
margin-right: 29px;
}
body[dir="rtl"] .input-checkbox {
margin: 0 0 0 4px;
}
body[dir="rtl"] .input-text {
margin-left: 0;
margin-right: 29px;
}
.option-group {
background-color: #e1e1e1;
padding: 1.5rem;
border-radius: 5px;
margin: 20px 0px;
}
.option-links {
list-style-type: disclosure-closed;
padding-top: 2rem;
margin-top: 0px;
}
.option-links > li {
padding-bottom: .5rem;
}
@media only screen and (max-width: 500px) {
.option-group {
padding: 0.7rem;
}
}
@media only screen and (max-width: 435px) {
.div-icons-badge-colors {
flex-wrap: wrap;
}
.div-badge {
border: none;
padding-left: 0px;
width: 100%;
}
}
@media (prefers-color-scheme: dark) {
body {
background-color: #202023;
}
body, .title-option {
color: #aeaeae;
}
.description-option {
color: #b1b1b3;
}
.notice-head > span, #last-mapping-update, .badge-warning, .notice-message, .button-warning {
color: #4b3000 !important;
}
.option-group {
background-color: #1d1d1d;
}
.input-text {
background-color: #434343;
color: #aeaeae !important;
}
.img-restore-color {
filter: invert(1);
}
}