mirror of
https://github.com/gorhill/uBlock.git
synced 2026-03-11 09:04:36 +00:00
5c92d95143
Related discussion: - https://github.com/uBlockOrigin/uAssets/discussions/16939 Various feedback of people trying to interact with uBO's dashboard at browser launch, before uBO's main process is fully initialized, causing confusion, and potential loss of data.
115 lines
2.5 KiB
CSS
115 lines
2.5 KiB
CSS
html, body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
justify-content: stretch;
|
|
overflow: hidden;
|
|
position: relative;
|
|
width: 100vw;
|
|
}
|
|
body.notReady {
|
|
display: none;
|
|
}
|
|
#dashboard-nav {
|
|
border: 0;
|
|
border-bottom: 1px solid var(--border-1);
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
flex-wrap: wrap;
|
|
overflow-x: hidden;
|
|
padding: 0;
|
|
position: sticky;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 10;
|
|
}
|
|
.tabButton {
|
|
background-color: transparent;
|
|
border: 0;
|
|
border-bottom: 3px solid transparent;
|
|
border-radius: 0;
|
|
color: var(--dashboard-tab-ink);
|
|
fill: var(--dashboard-tab-ink);
|
|
font-family: var(--font-family);
|
|
font-size: var(--font-size);
|
|
padding: 0.7em 1.4em calc(0.7em - 3px);
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
}
|
|
.tabButton:focus {
|
|
outline: 0;
|
|
}
|
|
/*
|
|
* TODO: support keyboard-driven navigation
|
|
*
|
|
.tabButton:not(:active):focus {
|
|
background-color: var(--dashboard-tab-focus-surface);
|
|
}
|
|
*/
|
|
.tabButton.selected {
|
|
background-color: var(--dashboard-tab-active-surface);
|
|
border-bottom: 3px solid var(--dashboard-tab-active-ink);
|
|
color: var(--dashboard-tab-active-ink);
|
|
fill: var(--dashboard-tab-active-ink);
|
|
}
|
|
iframe {
|
|
background-color: transparent;
|
|
border: 0;
|
|
flex-grow: 1;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
}
|
|
#unsavedWarning {
|
|
display: none;
|
|
left: 0;
|
|
position: absolute;
|
|
width: 100%;
|
|
z-index: 20;
|
|
}
|
|
#unsavedWarning.on {
|
|
display: initial;
|
|
}
|
|
#unsavedWarning > div:first-of-type {
|
|
padding: 0.5em;
|
|
}
|
|
#unsavedWarning > div:last-of-type {
|
|
height: 100vh;
|
|
position: absolute;
|
|
width: 100vw;
|
|
}
|
|
|
|
body .tabButton[data-pane="no-dashboard.html"] {
|
|
display: none;
|
|
}
|
|
body.noDashboard #dashboard-nav {
|
|
display: none;
|
|
}
|
|
|
|
/* high dpi devices */
|
|
:root.hidpi .tabButton {
|
|
font-family: Metropolis, sans-serif;
|
|
font-weight: 600;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
/* hover-able devices */
|
|
:root.desktop .tabButton {
|
|
cursor: default;
|
|
}
|
|
:root.desktop .tabButton:not(.selected) {
|
|
cursor: pointer;
|
|
}
|
|
:root.desktop .tabButton:not(.selected):hover {
|
|
background-color: var(--dashboard-tab-hover-surface);
|
|
border-bottom-color: var(--dashboard-tab-hover-border);
|
|
}
|
|
|
|
/* touch-screen devices */
|
|
:root.mobile #dashboard-nav {
|
|
flex-wrap: nowrap;
|
|
overflow-x: auto;
|
|
}
|
|
:root.mobile #dashboard-nav .logo {
|
|
display: none;
|
|
}
|