tabs/resources/style/index.css

267 lines
4.3 KiB
CSS
Raw Normal View History

body {
display: flex;
flex-direction: row;
}
#navigation {
display: flex;
flex-direction: column;
height: 100%;
width: 48px;
}
#service-selector {
flex-grow: 1;
display: block;
margin: 0;
padding: 0;
overflow: hidden auto;
}
#service-selector::-webkit-scrollbar {
width: 6px;
}
#service-selector [draggable] {
user-select: none;
background-color: rgb(43, 43, 43);
}
#service-selector [draggable] img {
-webkit-user-drag: none;
user-drag: none;
}
#service-selector .drag-target button {
height: 56px;
padding-top: 88px;
}
#service-selector .drag-target button::after,
#service-last-drag-position.drag-target {
content: "";
height: 56px;
border: 1px dashed #fff;
box-sizing: border-box;
background-color: rgb(43, 43, 43);
}
2020-02-20 11:51:13 +01:00
#service-selector .drag-target button::after {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
2020-02-20 11:51:13 +01:00
#service-last-drag-position:not(.hidden):not(.drag-target) {
display: block;
padding: 16px 4px;
background-color: #fff5;
}
2020-02-20 11:51:13 +01:00
#service-last-drag-position:not(.drag-target)::after {
content: "";
display: block;
border-bottom: 1px solid #fff;
}
#service-selector .drag-target::after {
top: 75% !important;
}
*:focus {
outline-color: rgb(118, 93, 176);
}
#navigation button {
position: relative;
display: block;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
color: #fff;
border: 0;
background: transparent;
cursor: pointer;
}
#navigation button:focus {
outline-color: transparent;
background: #fff3 !important;
}
#navigation button img {
width: 24px;
}
#navigation button i {
font-size: 24px;
}
#service-selector li {
position: relative;
}
#service-selector li button,
#navigation > button {
border-radius: 0;
}
#service-selector li.active button {
background-color: #fff2;
}
#service-selector li.loaded button::before {
content: "";
display: block;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
height: 75%;
border-right: 4px solid #ffffff3e;
}
/*#service-selector li.loaded::after {*/
/* content: "";*/
/* position: absolute;*/
/* top: 50%;*/
/* right: 2px;*/
/* transform: translateY(-50%);*/
/* width: 4px;*/
/* height: 4px;*/
/* background-color: #fff;*/
/* border-radius: 100%;*/
/*}*/
#navigation button:hover {
background-color: #fff3;
}
#history {
padding: 2px;
}
#history button {
display: inline;
width: 24px;
height: 24px;
padding: initial;
font-size: 12px;
background: #fff1;
color: #fff;
cursor: pointer;
}
#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;
}
#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%;
}
2020-03-06 15:19:06 +01:00
#services > :not(.active):not(.loader):not(#url-preview) {
display: none;
}
#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;
bottom: 0;
left: 0;
display: block;
padding: 2px 5px 1px 5px;
max-width: 48%;
overflow: hidden;
text-overflow: ellipsis;
font-family: monospace;
border-width: 1px 1px 0 0;
border-color: #232323;
border-style: solid;
border-radius: 0 5px 0 0;
background: #2b2b2b;
opacity: 1;
transition: 100ms ease opacity;
transition-delay: 200ms;
}
#url-preview.right {
left: auto;
right: 0;
border-width: 1px 0 0 1px;
border-radius: 5px 0 0 0;
}
#url-preview.hidden {
opacity: 0;
}
2020-05-05 21:56:07 +02:00
#services > #empty-message {
display: flex !important;
position: absolute;
z-index: -1;
2020-05-05 21:56:07 +02:00
bottom: 0;
width: 100%;
justify-content: center;
align-items: center;
}
#services > .loader:not(.hidden) ~ #empty-message {
display: none !important;
}