161 lines
No EOL
3.1 KiB
SCSS
161 lines
No EOL
3.1 KiB
SCSS
///////////////////////////////////////////
|
|
// Configuration for Theming //
|
|
/////////////////////////////////////////
|
|
|
|
:root {
|
|
--TabActiveBackground: #8FECFB;
|
|
--TabActiveText: black;
|
|
}
|
|
|
|
///////////////////////////////////////////
|
|
|
|
* {outline: none}
|
|
|
|
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;
|
|
grid-template-rows: 50px auto auto;
|
|
background: rgb(35 35 35 / 75%);
|
|
.sidebar-header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 20px;
|
|
p {
|
|
pointer-events: none;
|
|
}
|
|
img {
|
|
width: 32px;
|
|
margin-right: 16px;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
.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(--TabActiveBackground);
|
|
color: var(--TabActiveText);
|
|
}
|
|
}
|
|
|
|
// 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);
|
|
}
|
|
}
|
|
|
|
/// Tab
|
|
.active .webview-navigation#Tab {
|
|
display: grid;
|
|
}
|
|
.webview-navigation#Tab {
|
|
display: none;
|
|
grid-auto-flow: column;
|
|
position: absolute;
|
|
right: 26px;
|
|
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, var(--TabActiveBackground) 5%, var(--TabActiveBackground) 100%);
|
|
button {
|
|
aspect-ratio: 1;
|
|
height: 32px;
|
|
width: 32px;
|
|
color: white;
|
|
background: #232323;
|
|
border: none;
|
|
border-radius: 6px;
|
|
margin-left: 6px;
|
|
svg {
|
|
margin: 0px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
button:hover {
|
|
background: #4b4b4b;
|
|
}
|
|
} |