mirror of
https://codeberg.org/nobody/LocalCDN.git
synced 2024-12-24 17:20:49 +01:00
273 lines
3.7 KiB
CSS
273 lines
3.7 KiB
CSS
/**
|
|
* Sections
|
|
*/
|
|
|
|
body {
|
|
color: #555;
|
|
cursor: default;
|
|
font-family: 'Noto Sans', Arial, sans-serif !important;
|
|
font-size: 12px;
|
|
margin-top: -15px;
|
|
padding: 10px !important;
|
|
}
|
|
|
|
.option {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-top: 25px;
|
|
}
|
|
|
|
.notice {
|
|
border-radius: 3px;
|
|
box-sizing: border-box;
|
|
margin-top: 25px;
|
|
max-width: 470px;
|
|
padding: 14px 16px;
|
|
}
|
|
|
|
.notice-default {
|
|
background-color: #f1f1f1;
|
|
}
|
|
|
|
.notice-warning {
|
|
background-color: #ffa500;
|
|
color: #fff;
|
|
}
|
|
|
|
/**
|
|
* 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-checkbox {
|
|
margin: 0 4px 0 0;
|
|
outline: 0;
|
|
}
|
|
|
|
.input-text {
|
|
margin-left: 29px;
|
|
max-width: 320px;
|
|
}
|
|
|
|
input[type=radio] {
|
|
margin: 10px 10px 10px 0px;
|
|
}
|
|
|
|
/**
|
|
* Icons
|
|
*/
|
|
|
|
.icon {
|
|
margin-right: 3px;
|
|
}
|
|
|
|
/**
|
|
* 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;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.button:hover {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.button:active {
|
|
background-color: #dedede;
|
|
}
|
|
|
|
.button-warning {
|
|
background-color: #ea9700;
|
|
border: 1px solid #d88c00;
|
|
color: #fff;
|
|
}
|
|
|
|
.button-warning:hover {
|
|
background-color: #d88c00;
|
|
border-color: #c98200;
|
|
}
|
|
|
|
.button-warning:active {
|
|
background-color: #c07c00;
|
|
border-color: #b47400;
|
|
}
|
|
|
|
.button-notice {
|
|
margin-left: auto;
|
|
padding: 5px 9px;
|
|
}
|
|
|
|
#button-copy-rule-set {
|
|
display: none;
|
|
padding: 5px;
|
|
margin-left: 29px;
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
/**
|
|
* Links
|
|
*/
|
|
|
|
.link-text {
|
|
color: #999;
|
|
}
|
|
|
|
/**
|
|
* Miscellaneous
|
|
*/
|
|
|
|
.description-option {
|
|
color: #777;
|
|
font-style: italic;
|
|
padding-left: 29px;
|
|
}
|
|
|
|
.badge {
|
|
border-radius: 3px;
|
|
color: #fff;
|
|
font-size: 8px;
|
|
margin-left: 6px;
|
|
padding: 3px 5px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.badge-warning {
|
|
background-color: #ffa500;
|
|
}
|
|
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.label-checkbox {
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
|
|
.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 {
|
|
display: none;
|
|
margin-left: 29px;
|
|
}
|
|
|
|
.ruleset-generator {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 29px;
|
|
}
|
|
|
|
.last-update {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/**
|
|
* 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;
|
|
}
|
|
|
|
/**
|
|
* Compatibility
|
|
*/
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
|
|
body {
|
|
background-color: #202023;
|
|
color: #f9f9fa;
|
|
}
|
|
|
|
.title-option {
|
|
color: #f9f9fa;
|
|
}
|
|
|
|
.description-option {
|
|
color: #b1b1b3;
|
|
}
|
|
|
|
.badge-warning {
|
|
color: #4b3000;
|
|
}
|
|
}
|