mirror of
https://github.com/gorhill/uBlock.git
synced 2026-03-11 09:04:36 +00:00
5bee33253f
As per email feedback from Mozilla's https://github.com/brampitoyo This is yet another incremental step toward redesigning the UI, much more is left to do. The idea is to align uBO's UI to that of Firefox Preview. Additionally, code has been added to reset the new popup panel to vertical layout should the viewport be not wide enough to accomodate the horizontal layout. Related feedback: - https://www.reddit.com/r/uBlockOrigin/comments/g4ufvi/
207 lines
4.4 KiB
CSS
207 lines
4.4 KiB
CSS
/* https://protocol.mozilla.org/assets/docs/css/protocol.css */
|
|
@charset "UTF-8";
|
|
@font-face {
|
|
font-display: block;
|
|
font-family: Inter;
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
src: url('fonts/Inter/Inter-Regular.woff2') format('woff2');
|
|
}
|
|
@font-face {
|
|
font-family: Inter;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
src: url('fonts/Inter/Inter-SemiBold.woff2') format('woff2');
|
|
}
|
|
@font-face {
|
|
font-family: Metropolis;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
src: url('fonts/Metropolis/Metropolis-SemiBold.woff2') format('woff2');
|
|
}
|
|
|
|
/* Usage of FontAwesome is deprecated and will be removed eventually */
|
|
@font-face {
|
|
font-family: FontAwesome;
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
src: url('fonts/fontawesome-webfont.ttf') format('truetype');
|
|
}
|
|
|
|
/* Common uBO styles */
|
|
body {
|
|
background-color: var(--default-surface);
|
|
border: 0;
|
|
box-sizing: border-box;
|
|
color: var(--fg-0);
|
|
fill: var(--fg-0);
|
|
font-family: Inter, sans-serif;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.fa {
|
|
display: inline-block;
|
|
font-family: FontAwesome;
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
line-height: 1;
|
|
user-select: none;
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
}
|
|
a {
|
|
color: var(--link-ink);
|
|
}
|
|
code {
|
|
background-color: var(--bg-code);
|
|
padding: 0 0.25em;
|
|
}
|
|
hr {
|
|
border: 0;
|
|
border-top: 1px solid var(--hor-separator-color);
|
|
margin: 1em 0;
|
|
}
|
|
textarea {
|
|
font-size: 90%;
|
|
}
|
|
button {
|
|
align-items: center;
|
|
appearance: none;
|
|
border: 1px solid transparent;
|
|
border-radius: 4px;
|
|
background-color: var(--button-surface);
|
|
color: var(--button-ink);
|
|
display: inline-flex;
|
|
fill: var(--button-ink);
|
|
font-family: Metropolis, sans-serif;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
justify-content: center;
|
|
letter-spacing: 0.5px;
|
|
min-height: 36px;
|
|
padding: 0 16px;
|
|
-moz-appearance: none;
|
|
-webkit-appearance: none;
|
|
}
|
|
button.vflex {
|
|
height: 100%;
|
|
min-height: unset;
|
|
padding-bottom: 0;
|
|
padding-top: 0;
|
|
}
|
|
button:hover {
|
|
background-color: var(--button-surface-hover);
|
|
}
|
|
button.important {
|
|
background-color: var(--bg-button-important);
|
|
}
|
|
button.important:hover {
|
|
background-color: var(--bg-button-important-hover);
|
|
}
|
|
button.disabled,
|
|
button[disabled],
|
|
button.important.disabled,
|
|
button.important[disabled] {
|
|
background-color: var(--bg-button-disabled);
|
|
color: var(--fg-button-disabled);
|
|
pointer-events: none;
|
|
}
|
|
button.iconifiable > .fa,
|
|
button.iconifiable > .fa-icon {
|
|
padding-left: 0;
|
|
padding-right: 0.4em;
|
|
}
|
|
button.iconifiable > .fa-icon {
|
|
font-size: 120%;
|
|
}
|
|
body[dir="rtl"] button.iconifiable > .fa,
|
|
body[dir="rtl"] button.iconifiable > .fa-icon {
|
|
padding-left: 0.5em;
|
|
}
|
|
.hidden {
|
|
display: none;
|
|
height: 0;
|
|
visibility: hidden;
|
|
width: 0;
|
|
}
|
|
label {
|
|
align-items: center;
|
|
display: inline-flex;
|
|
}
|
|
input[type="checkbox"] {
|
|
margin: 0;
|
|
margin-inline-start: 0.4em;
|
|
-webkit-margin-start: 0.4em;
|
|
margin-inline-end: 0.4em;
|
|
-webkit-margin-end: 0.4em;
|
|
}
|
|
.fieldset {
|
|
margin: 1em 0.5em;
|
|
}
|
|
.fieldset-header {
|
|
color: var(--fieldset-header-ink);
|
|
font-family: Metropolis, sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
.ul {
|
|
margin: 1em 0;
|
|
}
|
|
.li {
|
|
align-items: center;
|
|
display: flex;
|
|
margin: 12px 0;
|
|
}
|
|
.liul {
|
|
margin: 0.5em 0;
|
|
margin-inline-start: 2em;
|
|
-webkit-margin-start: 2em;
|
|
}
|
|
@media (max-width: 640px) {
|
|
button.iconifiable > .fa,
|
|
button.iconifiable > .fa-icon {
|
|
font-size: 1.2rem;
|
|
padding: 0;
|
|
}
|
|
button.iconifiable > [data-i18n] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.ubo-icon {
|
|
align-items: center;
|
|
background-color: transparent;
|
|
border: 0;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
margin: 0;
|
|
padding: 0.1em;
|
|
position: relative;
|
|
}
|
|
.ubo-icon > * {
|
|
pointer-events: none;
|
|
}
|
|
.ubo-icon.disabled,
|
|
.disabled > .ubo-icon,
|
|
.ubo-icon[disabled],
|
|
[disabled] > .ubo-icon {
|
|
color: var(--fg-button-disabled);
|
|
fill: var(--fg-button-disabled);
|
|
stroke: var(--fg-button-disabled);
|
|
pointer-events: none;
|
|
}
|
|
.ubo-icon > svg {
|
|
height: 1em;
|
|
width: 1em;
|
|
}
|
|
|
|
/* touch-screen devices */
|
|
:root.mobile body {
|
|
font-size: 16px;
|
|
}
|
|
:root.mobile label {
|
|
flex-grow: 1
|
|
}
|