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/
101 lines
2.2 KiB
CSS
101 lines
2.2 KiB
CSS
html, body {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
#dashboard-nav {
|
|
background-color: var(--default-surface);
|
|
border: 0;
|
|
box-shadow: var(--dashboard-bar-shadow);
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
overflow-x: hidden;
|
|
padding: 0;
|
|
position: sticky;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 10;
|
|
}
|
|
#dashboard-nav .logo {
|
|
align-items: center;
|
|
display: inline-flex;
|
|
padding: 0 0.5em;
|
|
width: 1.25em;
|
|
}
|
|
#dashboard-nav .logo > img {
|
|
width: 100%;
|
|
}
|
|
.tabButton {
|
|
border: 0;
|
|
border-bottom: 3px solid var(--bg-1);
|
|
border-top: 3px solid transparent;
|
|
color: var(--dashboard-tab-ink);
|
|
fill: var(--dashboard-tab-ink);
|
|
font-family: Metropolis, sans-serif;
|
|
font-weight: 600;
|
|
letter-spacing: 0.5px;
|
|
padding: 0.5em 1.4em calc(0.5em - 3px);
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
}
|
|
.tabButton:focus {
|
|
outline: 0;
|
|
}
|
|
.tabButton.selected {
|
|
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;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
}
|
|
#unsavedWarning {
|
|
box-shadow: rgba(128,128,128,0.4) 0 4px 4px;
|
|
display: none;
|
|
left: 0;
|
|
position: absolute;
|
|
width: 100%;
|
|
z-index: 20;
|
|
}
|
|
#unsavedWarning.on {
|
|
display: initial;
|
|
}
|
|
#unsavedWarning > div:first-of-type {
|
|
background-color: var(--bg-transient-notice);
|
|
padding: 0.5em;
|
|
}
|
|
#unsavedWarning > div:last-of-type {
|
|
height: 100vh;
|
|
position: absolute;
|
|
width: 100vw;
|
|
}
|
|
|
|
body:not(.canUpdateShortcuts) .tabButton[data-pane="shortcuts.html"] {
|
|
display: none;
|
|
}
|
|
|
|
/* 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-surface-hover);
|
|
border-bottom-color: var(--dashboard-tab-surface-hover);
|
|
}
|
|
|
|
/* touch-screen devices */
|
|
:root.mobile #dashboard-nav {
|
|
flex-wrap: nowrap;
|
|
overflow-x: auto;
|
|
}
|
|
:root.mobile #dashboard-nav .logo {
|
|
display: none;
|
|
}
|