Initial
This commit is contained in:
177
resources/app/public/less2/applications/applications.less
Normal file
177
resources/app/public/less2/applications/applications.less
Normal file
@@ -0,0 +1,177 @@
|
||||
|
||||
.application {
|
||||
position: absolute;
|
||||
z-index: var(--z-index-window);
|
||||
transform-origin: top left;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
min-width: 200px;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
background: var(--background);
|
||||
font-size: var(--font-size-14);
|
||||
color: var(--color-text-primary);
|
||||
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 0 10px #000;
|
||||
|
||||
&:not(.minimized) {
|
||||
min-height: calc(var(--header-height) + 1rem);
|
||||
}
|
||||
|
||||
// All Applications have window content
|
||||
.window-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
padding: 1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Closing or minimizing the Application
|
||||
&.minimizing {
|
||||
transition: max-height 0.25s ease-out, max-width 0.25s ease-out;
|
||||
}
|
||||
&.maximizing {
|
||||
transition: max-height 0.25s ease-in, max-width 0.25s ease-in;
|
||||
}
|
||||
&.minimized .window-content,
|
||||
&.minimizing .window-content,
|
||||
&.maximizing .window-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Framed applications have a window header
|
||||
.window-header {
|
||||
--button-size: 24px;
|
||||
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
flex: 0 0 var(--header-height);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 0 0.5rem;
|
||||
gap: 0.25rem;
|
||||
z-index: 1;
|
||||
cursor: grab;
|
||||
|
||||
background: var(--color-header-background);
|
||||
font-size: var(--font-size-13);
|
||||
color: var(--color-light-1);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
|
||||
.window-icon {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.window-title {
|
||||
flex: 1;
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
text-shadow: none;
|
||||
margin: 0;
|
||||
line-height: var(--header-height);
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
button.header-control {
|
||||
flex: 0 0 var(--button-size);
|
||||
height: var(--button-size);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.controls-dropdown {
|
||||
position: absolute;
|
||||
overflow: hidden auto;
|
||||
top: var(--header-height);
|
||||
right: 0;
|
||||
width: max-content;
|
||||
min-width: 100px;
|
||||
max-width: 300px;
|
||||
max-height: 0;
|
||||
z-index: 1;
|
||||
list-style: none;
|
||||
margin: 0 0.25rem;
|
||||
padding: 0;
|
||||
background: var(--background);
|
||||
border-radius: 0 0 4px 4px;
|
||||
transition: max-height 0.5s;
|
||||
pointer-events: none;
|
||||
|
||||
&.expanded {
|
||||
max-height: calc(100% - var(--header-height));
|
||||
pointer-events: all;
|
||||
box-shadow: 0 0 8px var(--color-cool-3);
|
||||
}
|
||||
.header-control {
|
||||
margin: 0.25rem;
|
||||
> button {
|
||||
--button-background-color: none;
|
||||
--button-text-color: var(--color-text-primary);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border: none;
|
||||
font-size: var(--font-size-12);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.window-resize-handle {
|
||||
position: absolute;
|
||||
inset: auto -2px -3px auto;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
cursor: nwse-resize;
|
||||
background: transparent url("../ui/resize-handle.webp") no-repeat center / contain;
|
||||
}
|
||||
|
||||
&.minimized .window-resize-handle { display: none; }
|
||||
}
|
||||
|
||||
// Dark theme backdrop filter
|
||||
.theme-dark .application {
|
||||
.window-content {
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
}
|
||||
.window-resize-handle { filter: invert(1); }
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Reduced Transparency Preferences
|
||||
*/
|
||||
@media (prefers-reduced-transparency) {
|
||||
.theme-dark .application,
|
||||
.theme-foundry .application {
|
||||
--background: var(--color-cool-5);
|
||||
}
|
||||
.application .window-content {
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
.app {
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
#tooltip, .locked-tooltip {
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
}
|
||||
581
resources/app/public/less2/applications/apps.less
Normal file
581
resources/app/public/less2/applications/apps.less
Normal file
@@ -0,0 +1,581 @@
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user