107 lines
No EOL
1.8 KiB
SCSS
107 lines
No EOL
1.8 KiB
SCSS
:root {
|
|
--accent: #343434;
|
|
}
|
|
|
|
body {
|
|
background: transparent;
|
|
color: white;
|
|
font-family: arial;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
background: #232323;
|
|
width: 12px;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 24px;
|
|
border: 4px #232323 solid;
|
|
}
|
|
|
|
// WebViews and iFrames
|
|
.fullview {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
}
|
|
.with-controls {
|
|
top: 44px;
|
|
height: calc(100% - 44px);
|
|
}
|
|
|
|
// Sidebar
|
|
.sidebar {
|
|
position: fixed;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 240px;
|
|
height: 100%;
|
|
padding: 0px 20px;
|
|
display: grid;
|
|
.sidebar-top {
|
|
padding-top: 24px;
|
|
}
|
|
.sidebar-bottom {
|
|
padding-bottom: 24px;
|
|
align-self: end;
|
|
}
|
|
li {
|
|
cursor: pointer;
|
|
color: white;
|
|
display: flex;
|
|
width: 100%;
|
|
border-radius: 6px;
|
|
margin-bottom: 6px;
|
|
align-items: center;
|
|
padding: 12px 0px;
|
|
p {margin: 0px}
|
|
svg {margin: 0px 16px}
|
|
}
|
|
li:hover {
|
|
background: rgba(51, 51, 51, 0.5);
|
|
}
|
|
li.active {
|
|
background: var(--accent);
|
|
}
|
|
}
|
|
|
|
// Content
|
|
.pages {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 280px;
|
|
width: calc(100% - 280px);
|
|
max-width: calc(100% - 280px);
|
|
height: 100%;
|
|
background: #232323;
|
|
.page {
|
|
display: none;
|
|
&.active {display: block}
|
|
background: #232323;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// Webview Navigation
|
|
/// Top Bar
|
|
.webview-navigation#TopBar {
|
|
background: black;
|
|
padding: 6px;
|
|
cursor: default;
|
|
button {
|
|
color: white;
|
|
background: #202020;
|
|
border: none;
|
|
aspect-ratio: 1;
|
|
width: 32px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
}
|
|
button:hover {
|
|
background: var(--accent);
|
|
}
|
|
} |