tabs/frontend/sass/index.scss

356 lines
5.1 KiB
SCSS
Raw Normal View History

:root {
--nav-width: 48px;
}
body {
display: flex;
flex-direction: row;
}
#service-buttons {
flex-grow: 1;
overflow: hidden auto;
}
*:focus {
outline-color: rgb(118, 93, 176);
}
#navigation {
display: flex;
flex-direction: column;
height: 100%;
width: var(--nav-width);
body.fullscreen & {
display: none;
}
> :not(#service-buttons) {
flex-shrink: 0;
}
button {
position: relative;
display: block;
width: var(--nav-width);
height: var(--nav-width);
margin: 0;
padding: 0;
color: #fff;
border: 0;
background: transparent;
cursor: pointer;
border-radius: 0;
&:focus {
outline: none;
background: #fff3 !important;
}
&:hover {
background-color: #fff3;
}
i {
font-size: calc(var(--nav-width) / 2);
}
img {
width: calc(var(--nav-width) / 2);
}
}
}
#service-selector {
display: block;
margin: 0;
padding: 0;
list-style: none;
&::-webkit-scrollbar {
width: 6px;
}
li {
position: relative;
button {
border-radius: 0;
}
&.active button {
background-color: #fff2;
}
&.loading, &.loaded {
button::before {
content: "";
display: block;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
height: 75%;
border-right: 4px solid #ffffff3e;
}
}
&.loading button::before {
animation: loading-button-after linear 500ms infinite alternate;
height: 45%;
@keyframes loading-button-after {
from {
opacity: 0.1;
}
to {
opacity: 0.5;
}
}
}
}
[draggable] {
user-select: none;
background-color: rgb(43, 43, 43);
img {
-webkit-user-drag: none;
user-drag: none;
}
}
.drag-target-self button::after {
height: var(--nav-width);
border: 1px dashed #fff;
transform: none;
}
.drag-target button::after {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
.drag-target::after {
top: 75% !important;
}
}
#service-selector .drag-target button::after,
#service-last-drag-position.drag-target {
content: "";
height: 4px;
transform: translateY(-50%);
border: 0;
box-sizing: border-box;
background: #fff9;
}
#history {
display: flex;
flex-direction: column;
align-items: center;
padding: 2px;
}
#history button,
#history .status {
display: inline;
width: calc(var(--nav-width) / 2);
height: calc(var(--nav-width) / 2);
margin: 2px;
padding: initial;
font-size: calc(var(--nav-width) / 4);
background: #fff1;
color: #fff;
cursor: pointer;
border-radius: 3px;
}
#history button i {
font-size: inherit;
}
#history button.disabled {
color: #888;
border: transparent;
background: transparent;
cursor: initial;
}
#history button:focus,
#history button:hover {
outline: none;
border-color: #fff9;
}
#history button:hover:not(.disabled) {
outline: none;
background-color: #fff2;
}
#history button:active:not(.disabled) {
background-color: #fff4;
}
#history #status {
background: transparent;
}
2020-05-19 07:23:27 +02:00
#history #status .unknown,
#history #status .file {
color: #888;
}
#history #status .https {
color: #009800;
}
#history #status .http {
color: #e20000;
}
#history #status > :not(.active) {
display: none;
}
#history #status > * .tip {
position: absolute;
2020-06-15 16:24:04 +02:00
z-index: 30;
left: 100%;
top: 50%;
transform: translateY(-50%);
display: none;
margin-left: 8px;
background-color: #000;
padding: 8px;
border-radius: 4px;
white-space: nowrap;
color: #fff;
text-transform: none;
font-family: sans-serif;
font-size: 16px;
font-weight: 100;
}
#history #status > * .tip::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translate(-100%, -50%);
display: inline-block;
width: 0;
height: 0;
border: 0 solid transparent;
border-top-width: 4px;
border-bottom-width: 4px;
border-right: 7px solid black;
}
#history #status:focus > * .tip {
display: block;
}
#navigation #add-button:not(:hover) {
opacity: 0.75;
}
#services {
position: relative;
flex-grow: 1;
}
2020-03-06 15:19:06 +01:00
#services > *:not(.loader):not(#url-preview) {
height: 100%;
}
#services > :not(.active):not(.loader):not(#url-preview):not(webview) {
display: none;
}
#services > webview {
position: absolute;
width: 100%;
height: 100%;
z-index: 10;
background-color: rgb(43, 43, 43);
}
#services > webview.active {
z-index: 20;
}
#services > .loader {
width: 64px;
height: 64px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: -1;
2020-02-20 11:51:13 +01:00
}
2020-03-06 15:19:06 +01:00
#url-preview {
position: absolute;
2020-07-10 14:08:31 +02:00
z-index: 10000;
bottom: 0;
left: 0;
display: block;
padding: 2px 5px 1px 5px;
2020-03-06 15:19:06 +01:00
max-width: 48%;
overflow: hidden;
text-overflow: ellipsis;
2020-03-06 15:19:06 +01:00
font-family: monospace;
2020-03-06 15:19:06 +01:00
border-width: 1px 1px 0 0;
border-color: #232323;
border-style: solid;
border-radius: 0 5px 0 0;
2020-03-06 15:19:06 +01:00
background: #2b2b2b;
2020-03-06 15:19:06 +01:00
opacity: 1;
transition: 100ms ease opacity;
transition-delay: 200ms;
2020-03-06 15:19:06 +01:00
}
#url-preview.right {
left: auto;
right: 0;
2020-03-06 15:19:06 +01:00
border-width: 1px 0 0 1px;
border-radius: 5px 0 0 0;
2020-03-06 15:19:06 +01:00
}
2020-07-10 14:08:31 +02:00
#url-preview.invisible {
opacity: 0;
2020-03-06 15:19:06 +01:00
}
2020-05-05 21:56:07 +02:00
#services > #empty-message {
display: flex !important;
position: absolute;
z-index: -1;
bottom: 0;
width: 100%;
justify-content: center;
align-items: center;
2020-05-05 21:56:07 +02:00
}
#services > .loader:not(.hidden) ~ #empty-message {
display: none !important;
2020-05-05 21:56:07 +02:00
}