582 lines
11 KiB
Plaintext
582 lines
11 KiB
Plaintext
|
|
||
|
|
/* ---------------------------------------- */
|
||
|
|
/* Applications */
|
||
|
|
/* ---------------------------------------- */
|
||
|
|
|
||
|
|
.app {
|
||
|
|
max-height: 100%;
|
||
|
|
max-width: 100%;
|
||
|
|
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
flex-wrap: nowrap;
|
||
|
|
justify-content: flex-start;
|
||
|
|
|
||
|
|
background: var(--background);
|
||
|
|
box-shadow: 0 0 20px black;
|
||
|
|
backdrop-filter: blur(4px);
|
||
|
|
-webkit-backdrop-filter: blur(4px);
|
||
|
|
|
||
|
|
border-radius: 8px;
|
||
|
|
z-index: var(--z-index-app);
|
||
|
|
transform-origin: top left;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Pop-Out Window Application
|
||
|
|
*/
|
||
|
|
.window-app {
|
||
|
|
--headerHeight: 30px;
|
||
|
|
--paddingX: 1.5rem;
|
||
|
|
--paddingY: 1rem;
|
||
|
|
|
||
|
|
position: fixed;
|
||
|
|
z-index: var(--z-index-window);
|
||
|
|
border: 2px solid var(--color-border);
|
||
|
|
|
||
|
|
.window-header {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: nowrap;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0.5rem;
|
||
|
|
flex: 0 0 calc(var(--headerHeight) + 0.5rem);
|
||
|
|
overflow: hidden;
|
||
|
|
padding: 0 1rem;
|
||
|
|
border-bottom: 2px groove var(--color-cool-4);
|
||
|
|
cursor: pointer;
|
||
|
|
|
||
|
|
.window-title {
|
||
|
|
margin: 0;
|
||
|
|
font-size: var(--font-size-16);
|
||
|
|
white-space: nowrap;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.document-id-link {
|
||
|
|
opacity: 0.5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header-button {
|
||
|
|
flex: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.window-content {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
flex-wrap: nowrap;
|
||
|
|
justify-content: flex-start;
|
||
|
|
padding: var(--paddingY) var(--paddingX);
|
||
|
|
overflow: hidden auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.zhover {
|
||
|
|
z-index: calc(var(--z-index-window) + 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Minimized
|
||
|
|
&.minimized {
|
||
|
|
> * {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.window-header {
|
||
|
|
display: flex;
|
||
|
|
border: none;
|
||
|
|
> * {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.window-title, .close {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ----------------------------------------- */
|
||
|
|
/* World Configuration */
|
||
|
|
/* ----------------------------------------- */
|
||
|
|
|
||
|
|
#world-config {
|
||
|
|
.editor {
|
||
|
|
height: 300px;
|
||
|
|
}
|
||
|
|
.form-fields {
|
||
|
|
flex: 4;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* ----------------------------------------- */
|
||
|
|
/* File Picker */
|
||
|
|
/* ----------------------------------------- */
|
||
|
|
|
||
|
|
.filepicker {
|
||
|
|
.filepicker-header {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 1rem;
|
||
|
|
.current-dir {
|
||
|
|
button {
|
||
|
|
flex: 0 0 32px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.filter-dir {
|
||
|
|
label {
|
||
|
|
flex: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.display-modes {
|
||
|
|
a {
|
||
|
|
color: var(--color-light-4);
|
||
|
|
}
|
||
|
|
a.active {
|
||
|
|
color: var(--color-light-1);
|
||
|
|
text-shadow: 0 0 4px var(--color-warm-1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.filepicker-body {
|
||
|
|
font-size: var(--font-size-13);
|
||
|
|
border-bottom: 1px solid var(--color-light-3);
|
||
|
|
border-top: 1px solid var(--color-light-3);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Directory View
|
||
|
|
.directory {
|
||
|
|
list-style: none;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
max-height: 600px;
|
||
|
|
overflow: hidden auto;
|
||
|
|
|
||
|
|
// Directories and Files
|
||
|
|
> li {
|
||
|
|
cursor: pointer;
|
||
|
|
padding: 0.5rem;
|
||
|
|
margin: 0;
|
||
|
|
word-break: break-all;
|
||
|
|
overflow: hidden;
|
||
|
|
> i {
|
||
|
|
margin-right: 0.25rem;
|
||
|
|
}
|
||
|
|
&.picked {
|
||
|
|
color: var(--color-light-1);
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Files
|
||
|
|
> li.file {
|
||
|
|
border-bottom: 1px solid var(--color-light-5);
|
||
|
|
&:last-child {
|
||
|
|
border-bottom: none;
|
||
|
|
}
|
||
|
|
&:hover {
|
||
|
|
color: var(--color-light-1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Directories
|
||
|
|
> li.dir {
|
||
|
|
background: var(--color-cool-4);
|
||
|
|
border: 1px solid var(--color-cool-5);
|
||
|
|
border-radius: 4px;
|
||
|
|
transition: 0.25s;
|
||
|
|
&:hover {
|
||
|
|
border-color: var(--color-cool-3);
|
||
|
|
color: var(--color-light-1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Details View
|
||
|
|
.details-list {
|
||
|
|
img {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Thumbnail View
|
||
|
|
.thumbs-list {
|
||
|
|
img {
|
||
|
|
flex: 0 0 48px;
|
||
|
|
object-fit: cover;
|
||
|
|
object-position: 50% 50%;
|
||
|
|
margin-right: 1rem;
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Tiles View
|
||
|
|
.tiles-list {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(5, 100px);
|
||
|
|
li {
|
||
|
|
padding: 0;
|
||
|
|
border: 1px solid transparent;
|
||
|
|
border-right: 1px solid var(--color-light-5);
|
||
|
|
border-bottom: 1px solid var(--color-light-5);
|
||
|
|
img {
|
||
|
|
border: none;
|
||
|
|
margin: 0;
|
||
|
|
object-fit: contain;
|
||
|
|
}
|
||
|
|
&.picked {
|
||
|
|
background: var(--color-cool-5);
|
||
|
|
outline: 1px solid var(--color-warm-1);
|
||
|
|
box-shadow: 0 0 4px var(--color-warm-1) inset;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Images View
|
||
|
|
.images-list {
|
||
|
|
li {
|
||
|
|
position: relative;
|
||
|
|
height: 200px;
|
||
|
|
padding: 0;
|
||
|
|
img {
|
||
|
|
width: 100%;
|
||
|
|
height: 200px;
|
||
|
|
object-fit: contain;
|
||
|
|
object-position: 50% 50%;
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
span.filename {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
width: 400px;
|
||
|
|
padding: 0.5rem 0;
|
||
|
|
left: calc(50% - 200px);
|
||
|
|
background: var(--color-cool-5-75);
|
||
|
|
border-radius: 0 0 6px 6px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// Private Directories
|
||
|
|
.private button.privacy {
|
||
|
|
background: rgba(115, 49, 255, 0.05);
|
||
|
|
box-shadow: 0 0 4px #7331FF inset;
|
||
|
|
}
|
||
|
|
.private .directory,
|
||
|
|
.public .private.dir {
|
||
|
|
background: rgba(115, 49, 255, 0.05);
|
||
|
|
}
|
||
|
|
|
||
|
|
.upload-file label,
|
||
|
|
.selected-file label {
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
button[type="submit"] {
|
||
|
|
flex: 0 0 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---------------------------------------- */
|
||
|
|
/* Category Filter Application */
|
||
|
|
/* ---------------------------------------- */
|
||
|
|
|
||
|
|
.category-filter {
|
||
|
|
.window-content {
|
||
|
|
flex: 0.5rem;
|
||
|
|
gap: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.disabled {
|
||
|
|
color: var(--color-light-5);
|
||
|
|
}
|
||
|
|
|
||
|
|
section.body {
|
||
|
|
flex: 1;
|
||
|
|
align-items: flex-start;
|
||
|
|
flex-wrap: nowrap;
|
||
|
|
gap: 1rem;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Category Filters
|
||
|
|
nav.categories {
|
||
|
|
height: 100%;
|
||
|
|
flex: 0 0 220px;
|
||
|
|
gap: 0.5rem;
|
||
|
|
padding-right: 1rem;
|
||
|
|
border-right: 1px solid var(--color-cool-4);
|
||
|
|
font-size: var(--font-size-14);
|
||
|
|
label {
|
||
|
|
font-weight: bold;
|
||
|
|
line-height: var(--input-height);
|
||
|
|
border-bottom: 1px solid var(--color-cool-4);
|
||
|
|
padding-bottom: 0.5rem;
|
||
|
|
margin-bottom: 0.5rem;
|
||
|
|
}
|
||
|
|
.category {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.category.active {
|
||
|
|
color: var(--color-warm-1);
|
||
|
|
text-shadow: 0 0 4px black;
|
||
|
|
&.disabled { color: var(--color-light-5); }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Visibility Filters
|
||
|
|
nav.visibilities {
|
||
|
|
flex: 0 0 var(--input-height);
|
||
|
|
gap: 1rem;
|
||
|
|
justify-content: flex-end;
|
||
|
|
padding-bottom: 0.5rem;
|
||
|
|
border-bottom: 1px solid var(--color-cool-4);
|
||
|
|
font-size: var(--font-size-14);
|
||
|
|
label {
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
a.button {
|
||
|
|
height: var(--input-height);
|
||
|
|
flex: none;
|
||
|
|
}
|
||
|
|
a.button.active {
|
||
|
|
background: var(--button-hover-background-color);
|
||
|
|
color: var(--button-hover-text-color);
|
||
|
|
border-color: var(--button-hover-border-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.visibility-toggle {
|
||
|
|
flex: none;
|
||
|
|
|
||
|
|
a {
|
||
|
|
border-radius: 0;
|
||
|
|
|
||
|
|
&:first-child {
|
||
|
|
border-right: none;
|
||
|
|
border-top-left-radius: 4px;
|
||
|
|
border-bottom-left-radius: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:last-child {
|
||
|
|
border-left: none;
|
||
|
|
border-top-right-radius: 4px;
|
||
|
|
border-bottom-right-radius: 4px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Bulk Actions
|
||
|
|
.bulk-actions {
|
||
|
|
flex: 0 0 var(--input-height);
|
||
|
|
padding-bottom: .5rem;
|
||
|
|
border-bottom: 1px solid var(--color-cool-4);
|
||
|
|
font-size: var(--font-size-14);
|
||
|
|
justify-content: space-between;
|
||
|
|
|
||
|
|
.button {
|
||
|
|
height: var(--input-height);
|
||
|
|
flex: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
label.checkbox {
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: var(--font-size-14);
|
||
|
|
gap: 1rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Checkbox Rows
|
||
|
|
.checkbox-row {
|
||
|
|
gap: 1rem;
|
||
|
|
border-bottom: 1px solid var(--color-cool-4);
|
||
|
|
align-items: start;
|
||
|
|
|
||
|
|
> input[type=checkbox] {
|
||
|
|
flex: none;
|
||
|
|
position: relative;
|
||
|
|
top: -5px;
|
||
|
|
}
|
||
|
|
> .entry {
|
||
|
|
border: none;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Entries List
|
||
|
|
.entries {
|
||
|
|
height: 100%;
|
||
|
|
overflow: visible hidden;
|
||
|
|
gap: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.entry-list {
|
||
|
|
width: 100%;
|
||
|
|
overflow: hidden auto;
|
||
|
|
padding-right: 0.75rem;
|
||
|
|
gap: 0.5rem;
|
||
|
|
flex: 1;
|
||
|
|
|
||
|
|
// Loading Progress
|
||
|
|
&.loading {
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
.progress {
|
||
|
|
width: 60%;
|
||
|
|
margin: 0 auto;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Individual Entries
|
||
|
|
.entry {
|
||
|
|
padding-bottom: 0.5rem;
|
||
|
|
border-bottom: 1px solid var(--color-cool-4);
|
||
|
|
gap: .5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.entry-title {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0.5rem;
|
||
|
|
> h3 {
|
||
|
|
flex: 1;
|
||
|
|
margin: 0;
|
||
|
|
font-size: var(--font-size-16);
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
a.control {
|
||
|
|
color: var(--color-light-5);
|
||
|
|
}
|
||
|
|
button {
|
||
|
|
font-size: var(--font-size-12);
|
||
|
|
> span {
|
||
|
|
line-height: 1.5rem;
|
||
|
|
font-weight: normal;
|
||
|
|
font-family: var(--font-body);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
> * {
|
||
|
|
line-height: 1.5rem;
|
||
|
|
flex: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.entry-description {
|
||
|
|
font-size: var(--font-size-12);
|
||
|
|
margin: 0;
|
||
|
|
br { display: none; }
|
||
|
|
}
|
||
|
|
|
||
|
|
.entry-metadata {
|
||
|
|
font-size: var(--font-size-12);
|
||
|
|
gap: 0.25rem;
|
||
|
|
justify-content: end;
|
||
|
|
.tag {
|
||
|
|
padding: 2px 0.5rem;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Manifest Installation
|
||
|
|
form.install {
|
||
|
|
label.hint,
|
||
|
|
button[type="submit"] {
|
||
|
|
flex: 0 0 160px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---------------------------------------- */
|
||
|
|
/* Tours */
|
||
|
|
/* ---------------------------------------- */
|
||
|
|
|
||
|
|
.tour-fadeout {
|
||
|
|
box-shadow: rgba(33, 33, 33, 0.8) 0px 0px 1px 2px, rgba(33, 33, 33, 0.6) 0px 0px 0px 5000px;
|
||
|
|
border-radius: 4px;
|
||
|
|
transition: all .3s ease-out;
|
||
|
|
z-index: calc(var(--z-index-tooltip) - 2);
|
||
|
|
position: fixed;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tour-overlay {
|
||
|
|
position: fixed;
|
||
|
|
inset: 0px;
|
||
|
|
box-sizing: content-box;
|
||
|
|
transition: all .3s ease-out;
|
||
|
|
z-index: calc(var(--z-index-tooltip) - 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.tour-center-step {
|
||
|
|
position: fixed;
|
||
|
|
width: max-content;
|
||
|
|
max-width: 400px;
|
||
|
|
padding: 0.25rem 0.5rem;
|
||
|
|
background: rgba(0, 0, 0, 0.95);
|
||
|
|
border-radius: 3px;
|
||
|
|
box-shadow: 0 0 4px #000;
|
||
|
|
z-index: var(--z-index-tooltip);
|
||
|
|
}
|
||
|
|
|
||
|
|
.tour {
|
||
|
|
[data-action="exit"] {
|
||
|
|
position: absolute;
|
||
|
|
right: 0.5rem;
|
||
|
|
top: 1rem;
|
||
|
|
> i {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.step-title {
|
||
|
|
text-align: center;
|
||
|
|
margin-top: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.step-header:after {
|
||
|
|
width: 100%;
|
||
|
|
content: "";
|
||
|
|
--webkit-mask-image: linear-gradient(90deg, transparent 0%, black 30%, black 70%, transparent 100%);
|
||
|
|
mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 30%, transparent 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.step-button {
|
||
|
|
> i {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.content {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.step-controls {
|
||
|
|
|
||
|
|
.step-button {
|
||
|
|
flex: 0;
|
||
|
|
> i {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-action="previous"] {
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
.progress {
|
||
|
|
text-align: center;
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-action="next"] {
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|