uBlock/src/css/dashboard.css
Raymond Hill 453f5450b6
First pass to Re-design the dashboard
This is a first pass in which only the dashboard
navigation widget and the "Settings" pane have
been revisited.

Reference work:
- https://app.abstract.com/share/54f1465e-8d1c-4e7b-9ae4-f37e21bef7fe
2020-04-05 15:19:07 -04:00

90 lines
1.7 KiB
CSS

html, body {
border: 0;
font: 16px/24px sans-serif;
height: 100%;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
width: 100%;
}
#dashboard-nav {
background-color: #f9f9fb;
border: 0;
border-bottom: 1px solid rgba(14, 13, 26, 0.12);
display: flex;
flex-wrap: wrap;
overflow-x: hidden;
padding: 0;
position: sticky;
top: 0;
width: 100%;
z-index: 10;
}
#dashboard-nav > span {
align-items: center;
display: inline-flex;
padding: 0 0.5em;
width: 1.25em;
}
#dashboard-nav > span > img {
width: 100%;
}
.tabButton {
border: 0;
border-bottom: 3px solid #f9f9fb;
box-sizing: border-box;
color: #20123a;
cursor: pointer;
padding: 0.5em 1.5em;
text-decoration: none;
white-space: nowrap;
}
.tabButton:focus {
outline: 0;
}
.tabButton:active,.tabButton:visited {
color: #20123a;
}
.tabButton.selected {
border-bottom: 3px solid #592acb;
color: #592acb;
}
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: #ffffcc;
padding: 0.5em;
}
#unsavedWarning > div:last-of-type {
height: 100vh;
position: absolute;
width: 100vw;
}
body:not(.canUpdateShortcuts) .tabButton[href="#shortcuts.html"] {
display: none;
}
@media (pointer: coarse) {
#dashboard-nav {
flex-wrap: nowrap;
overflow-x: auto;
}
}