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;
|
||||
}
|
||||
}
|
||||
}
|
||||
303
resources/app/public/less2/blocks/basic.less
Normal file
303
resources/app/public/less2/blocks/basic.less
Normal file
@@ -0,0 +1,303 @@
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Flexbox */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
.flexrow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
> * { flex: 1; }
|
||||
}
|
||||
|
||||
.flexcol {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
> * { flex: none }
|
||||
}
|
||||
|
||||
.flexrow, .flexcol {
|
||||
> .flex0 { flex: 0; }
|
||||
> .flex1 { flex: 1; }
|
||||
> .flex2 { flex: 2; }
|
||||
> .flex3 { flex: 3; }
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Global Classes */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
.disabled {
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/** Scrollable Containers */
|
||||
.scrollable {
|
||||
--scroll-margin: 0.75rem;
|
||||
margin-right: calc(-1 * var(--scroll-margin)) !important;
|
||||
padding-right: var(--scroll-margin) !important;
|
||||
overflow: hidden auto;
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Global Notifications */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
#notifications {
|
||||
--position-top: 2rem;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: var(--position-top);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
list-style: none;
|
||||
z-index: var(--z-index-notification);
|
||||
pointer-events: none;
|
||||
|
||||
.notification {
|
||||
position: relative;
|
||||
width: 95%;
|
||||
max-width: 1200px;
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
|
||||
// Single Notification
|
||||
.notification {
|
||||
background: rgb(0 0 0 / 50%);
|
||||
padding: 0.5rem 1rem;
|
||||
line-height: 1rem;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 10px black;
|
||||
color: var(--color-light-1);
|
||||
font-size: var(--font-size-14);
|
||||
filter: drop-shadow(0 0 2px black);
|
||||
|
||||
// Close Button
|
||||
.close {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: -6px;
|
||||
}
|
||||
|
||||
// Notification Icons
|
||||
&::before {
|
||||
font-family: var(--font-awesome);
|
||||
font-weight: 900;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
&.info {
|
||||
background: var(--color-level-info-bg);
|
||||
border: 1px solid var(--color-level-info-border);
|
||||
&::before { content: "\f05a"; }
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background: var(--color-level-warning-bg);
|
||||
border: 1px solid var(--color-level-warning-border);
|
||||
&::before { content: "\f071"; }
|
||||
}
|
||||
|
||||
&.error {
|
||||
background: var(--color-level-error-bg);
|
||||
border: 1px solid var(--color-level-error-border);
|
||||
&::before { content: "\f06a"; }
|
||||
}
|
||||
|
||||
&.stable {
|
||||
background: rgba(138, 211, 4, 0.4);
|
||||
&::before { content: "\f6d9"; }
|
||||
}
|
||||
|
||||
&.testing {
|
||||
background: rgba(211, 192, 4, 0.4);
|
||||
&::before { content: "\f0ad"; }
|
||||
}
|
||||
|
||||
&.development {
|
||||
background: rgba(211, 119, 4, 0.4);
|
||||
&::before { content: "\f6e3"; }
|
||||
}
|
||||
|
||||
&.prototype {
|
||||
background: rgba(211, 20, 4, 0.4);
|
||||
&::before { content: "\f1e2"; }
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Tabbed Navigation */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
nav.tabs {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: var(--color-light-3);
|
||||
cursor: pointer;
|
||||
i {
|
||||
font-size: var(--font-size-24);
|
||||
}
|
||||
&.active {
|
||||
color: var(--color-light-1);
|
||||
text-shadow: 0 0 8px var(--color-warm-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab[data-tab] {
|
||||
&:not(.active) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------------------- */
|
||||
/* Context Dropdown Menu
|
||||
/* ----------------------------------------- */
|
||||
|
||||
#context-menu {
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
min-width: 150px;
|
||||
max-width: 360px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
background: var(--color-cool-5);
|
||||
border: 1px solid var(--color-cool-3);
|
||||
border-radius: 5px;
|
||||
color: var(--color-text-light-1);
|
||||
z-index: calc(var(--z-index-app) + 1);
|
||||
|
||||
&.expand-down {
|
||||
top: calc(100% + 2px);
|
||||
}
|
||||
|
||||
&.expand-up {
|
||||
bottom: calc(100% + 2px);
|
||||
}
|
||||
|
||||
ol.context-items, li.context-group > ol {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li.context-group {
|
||||
border-bottom: 1px solid var(--color-cool-4);
|
||||
&:last-child { border: none; }
|
||||
}
|
||||
|
||||
li.context-item {
|
||||
border: 1px solid transparent;
|
||||
padding: 0.25rem 0.5rem;
|
||||
line-height: 32px;
|
||||
cursor: pointer;
|
||||
transition: 0.1s;
|
||||
> i {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
&:hover {
|
||||
border: 1px solid var(--color-cool-4);
|
||||
background: black;
|
||||
color: var(--color-light-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.window-app {
|
||||
#context-menu {
|
||||
z-index: calc(var(--z-index-window) + 1);
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------------------- */
|
||||
/* Dialog Windows
|
||||
/* ----------------------------------------- */
|
||||
|
||||
.dialog {
|
||||
.dialog-content {
|
||||
font-size: var(--font-size-14);
|
||||
}
|
||||
.dialog-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
button {
|
||||
flex: 2;
|
||||
height: 40px;
|
||||
&.default {
|
||||
flex: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Global Tooltip */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
#tooltip, .locked-tooltip {
|
||||
position: fixed;
|
||||
width: max-content;
|
||||
max-width: 320px;
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--color-cool-5-90);
|
||||
font-family: var(--font-primary);
|
||||
font-size: var(--font-size-14);
|
||||
line-height: var(--font-size-16);
|
||||
color: var(--color-light-1);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 4px #000;
|
||||
z-index: var(--z-index-tooltip);
|
||||
pointer-events: none;
|
||||
overflow-wrap: break-word;
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
&.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
// Transition visibility
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: visibility 0s 500ms, opacity 500ms;
|
||||
&.active {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: opacity 500ms;
|
||||
}
|
||||
&.tour {
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
|
||||
.locked-tooltip {
|
||||
pointer-events: all;
|
||||
border: 1px solid var(--color-warm-2);
|
||||
}
|
||||
10
resources/app/public/less2/blocks/dialog.less
Normal file
10
resources/app/public/less2/blocks/dialog.less
Normal file
@@ -0,0 +1,10 @@
|
||||
/* ---------------------------------- */
|
||||
/* Dialog V2 */
|
||||
/* ---------------------------------- */
|
||||
|
||||
.application.dialog {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
&:not([open]) { display: none; }
|
||||
.standard-form .form-footer { flex-wrap: nowrap; }
|
||||
}
|
||||
179
resources/app/public/less2/blocks/forms.less
Normal file
179
resources/app/public/less2/blocks/forms.less
Normal file
@@ -0,0 +1,179 @@
|
||||
.standard-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
gap: 1rem;
|
||||
|
||||
/** Tabs */
|
||||
.tab {
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
gap: 1rem;
|
||||
&.active {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
/** Fieldsets */
|
||||
fieldset {
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
gap: 1rem;
|
||||
border-color: var(--color-fieldset-border);
|
||||
border-radius: 8px;
|
||||
legend {
|
||||
font-size: var(--font-size-15);
|
||||
font-weight: bold;
|
||||
}
|
||||
&:disabled {
|
||||
.form-group {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
fieldset.input-grid {
|
||||
--grid-cols: 2;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--grid-cols), 1fr);
|
||||
gap: .5rem;
|
||||
}
|
||||
|
||||
/** Buttons */
|
||||
button {
|
||||
height: var(--input-height);
|
||||
}
|
||||
|
||||
/* Icon Inputs */
|
||||
label.icon:has(> input) {
|
||||
background: var(--input-background-color);
|
||||
border: 1px solid var(--input-border-color);
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .25rem;
|
||||
padding: .125rem .5rem;
|
||||
|
||||
&:has(> input:disabled) { border: none; }
|
||||
&:focus-within { outline: 2px solid var(--input-focus-outline-color); }
|
||||
|
||||
> input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
width: unset;
|
||||
padding: 0;
|
||||
background: none;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
> i { flex: none; }
|
||||
}
|
||||
|
||||
/** Form Groups */
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
gap: 0.5rem;
|
||||
|
||||
// Flex form inputs
|
||||
> * {
|
||||
flex: 2;
|
||||
}
|
||||
> input[type=checkbox] {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
// Labels
|
||||
> label {
|
||||
flex: 1;
|
||||
color: var(--color-form-label);
|
||||
font-weight: bold;
|
||||
line-height: var(--input-height);
|
||||
> i {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
> input {
|
||||
font-weight: initial;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon-Only Labels
|
||||
> label.icon {
|
||||
flex: 0 0 1rem;
|
||||
> i {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Stacked form groups, label is on its own line
|
||||
&.stacked {
|
||||
> * {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Form group hover behavior
|
||||
&:hover {
|
||||
> label {
|
||||
color: var(--color-form-label-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-fields {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
> * {
|
||||
flex: 1;
|
||||
}
|
||||
> input[type="checkbox"],
|
||||
> label {
|
||||
flex: none;
|
||||
}
|
||||
&.flexcol {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
/** Hint Text */
|
||||
.hint {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-14);
|
||||
color: var(--color-form-hint);
|
||||
}
|
||||
.form-group .hint {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
.form-group:hover .hint {
|
||||
color: var(--color-form-hint-hover);
|
||||
}
|
||||
|
||||
/** Form Footers */
|
||||
.form-footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
> button,
|
||||
a.button {
|
||||
flex: 1;
|
||||
height: calc(1.25 * var(--input-height));
|
||||
min-width: 180px;
|
||||
}
|
||||
}
|
||||
}
|
||||
156
resources/app/public/less2/elements/custom.less
Normal file
156
resources/app/public/less2/elements/custom.less
Normal file
@@ -0,0 +1,156 @@
|
||||
/* ----------------------------------------- */
|
||||
/* Common Sub-Elements */
|
||||
/* ----------------------------------------- */
|
||||
|
||||
.tags.input-element-tags {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
.tag {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
align-items: center;
|
||||
padding: 1px 0.25rem;
|
||||
font-size: var(--font-size-12);
|
||||
border: 1px solid var(--color-border-dark-3);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------------------- */
|
||||
/* ColorPicker Element */
|
||||
/* ----------------------------------------- */
|
||||
|
||||
color-picker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
> input[type=text] {
|
||||
flex: 1;
|
||||
}
|
||||
> input[type=color] {
|
||||
flex: 0 0 40px;
|
||||
height: 40px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------------------- */
|
||||
/* MultiSelect Element */
|
||||
/* ----------------------------------------- */
|
||||
|
||||
multi-select {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
multi-checkbox {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* ----------------------------------------- */
|
||||
/* ProseMirror Editor Element */
|
||||
/* ----------------------------------------- */
|
||||
|
||||
prose-mirror {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
min-height: 150px;
|
||||
.editor-content {
|
||||
flex: 1;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
button.toggle {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
width: var(--form-field-height);
|
||||
height: var(--form-field-height);
|
||||
line-height: var(--form-field-height);
|
||||
padding: 0;
|
||||
}
|
||||
&.inactive:hover button.toggle {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------------------- */
|
||||
/* RangePicker Element */
|
||||
/* ----------------------------------------- */
|
||||
|
||||
range-picker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
> input[type=range] {
|
||||
flex: 1;
|
||||
}
|
||||
> input[type=number] {
|
||||
flex: 0 0 40px;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------------------- */
|
||||
/* Tags Elements */
|
||||
/* ----------------------------------------- */
|
||||
|
||||
document-tags,
|
||||
string-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
margin: 0;
|
||||
> input {
|
||||
flex: 1;
|
||||
}
|
||||
> button {
|
||||
margin: -2px 0;
|
||||
padding: 0;
|
||||
flex: 0 0 36px;
|
||||
line-height: var(--form-field-height);
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------------------- */
|
||||
/* FilePicker Element */
|
||||
/* ----------------------------------------- */
|
||||
|
||||
file-picker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
margin: 0;
|
||||
> button {
|
||||
margin: -2px 0;
|
||||
padding: 0;
|
||||
flex: 0 0 36px;
|
||||
line-height: var(--form-field-height);
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------------------- */
|
||||
/* Content Links */
|
||||
/* ----------------------------------------- */
|
||||
|
||||
.content-link, .inline-roll {
|
||||
--content-link-background: rgb(0 0 0 / 10%);
|
||||
background: var(--content-link-background);
|
||||
}
|
||||
351
resources/app/public/less2/elements/forms.less
Normal file
351
resources/app/public/less2/elements/forms.less
Normal file
@@ -0,0 +1,351 @@
|
||||
/* ---------------------------------------- */
|
||||
/* Text Input Fields */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
input[type="text"],
|
||||
input[type="number"],
|
||||
input[type="password"],
|
||||
input[type="date"],
|
||||
input[type="time"],
|
||||
input[type="search"],
|
||||
input[type="file"],
|
||||
select {
|
||||
width: 100%;
|
||||
height: var(--input-height);
|
||||
line-height: var(--input-height);
|
||||
padding: 0 0.5rem;
|
||||
background: var(--input-background-color);
|
||||
border: 1px solid var(--input-border-color);
|
||||
border-radius: 4px;
|
||||
outline: 1px solid transparent;
|
||||
color: var(--input-text-color);
|
||||
user-select: text;
|
||||
font-size: var(--font-size-14);
|
||||
transition: outline-color 0.5s;
|
||||
|
||||
// Focused
|
||||
&:focus {
|
||||
outline: 2px solid var(--input-focus-outline-color);
|
||||
}
|
||||
|
||||
// Disabled
|
||||
&:disabled {
|
||||
opacity: 1.0; // browser sets 0.7
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Text input specifically
|
||||
input[readonly] {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Select specifically
|
||||
select {
|
||||
user-select: none;
|
||||
option {
|
||||
background: var(--color-select-option-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/** Browser Time/Date Icons */
|
||||
::-webkit-calendar-picker-indicator {
|
||||
display: none
|
||||
}
|
||||
|
||||
/** Placeholder Text */
|
||||
::placeholder {
|
||||
color: var(--input-placeholder-color);
|
||||
}
|
||||
|
||||
/** Icon Decorated Inputs */
|
||||
label.username,
|
||||
label.password,
|
||||
label.search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> input {
|
||||
padding-right: 30px; // Space for icon
|
||||
}
|
||||
&::after {
|
||||
flex: 0 0 30px;
|
||||
margin-left: -30px;
|
||||
display: inline-block;
|
||||
line-height: var(--input-height);
|
||||
font-size: 12px;
|
||||
font-family: var(--font-awesome);
|
||||
font-weight: 900;
|
||||
text-align: center;
|
||||
color: var(--color-light-5);
|
||||
}
|
||||
}
|
||||
label.username::after {
|
||||
content: "\F007";
|
||||
}
|
||||
label.password::after {
|
||||
content: "\F084";
|
||||
}
|
||||
label.search::after {
|
||||
content: "\F002";
|
||||
}
|
||||
|
||||
/** Search Fields */
|
||||
input[type="search"]::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-left: 0.5rem;
|
||||
background: linear-gradient(45deg, transparent 0%, transparent 43%, var(--color-light-5) 45%, var(--color-light-5) 55%, transparent 57%,transparent 100%),
|
||||
linear-gradient(135deg, transparent 0%, transparent 43%, var(--color-light-5) 45%, var(--color-light-5) 55%, transparent 57%, transparent 100%);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/** Number Fields */
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
/** File Input Fields */
|
||||
input[type="file"] {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/** Hint Icons in Labels */
|
||||
label.hint {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
> i {
|
||||
cursor: pointer;
|
||||
transition: 0.5s;
|
||||
}
|
||||
> i:hover {
|
||||
color: var(--color-warm-1);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Checkboxes */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
input[type="checkbox"] {
|
||||
--checkbox-size: 20px;
|
||||
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
|
||||
&:disabled, &[readonly] {
|
||||
cursor: initial;
|
||||
}
|
||||
&:focus {
|
||||
color: inherit;
|
||||
outline: none;
|
||||
}
|
||||
&:focus-visible::before {
|
||||
outline: 2px solid var(--input-focus-outline-color);
|
||||
}
|
||||
&:checked:focus-visible::before {
|
||||
outline: 2px solid var(--input-focus-outline-color);
|
||||
}
|
||||
&::before, &::after {
|
||||
width: var(--checkbox-size);
|
||||
height: var(--checkbox-size);
|
||||
font-size: var(--checkbox-size);
|
||||
line-height: var(--checkbox-size);
|
||||
border-radius: 3px;
|
||||
}
|
||||
&::before {
|
||||
font-family: var(--font-awesome);
|
||||
font-weight: var(--checkbox-font-weight);
|
||||
color: var(--checkbox-background-color);
|
||||
content: "\f0c8";
|
||||
outline: 1px solid transparent;
|
||||
transition: outline-color .5s;
|
||||
}
|
||||
&:checked {
|
||||
position: relative;
|
||||
&::before, &::after { font-family: var(--font-awesome-duotone); }
|
||||
|
||||
&::after {
|
||||
color: var(--checkbox-checked-color);
|
||||
content: "\f14a\f14a";
|
||||
}
|
||||
|
||||
&::before {
|
||||
color: var(--checkbox-checkmark-color);
|
||||
content: "\f14a";
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
&:disabled::before, &[readonly]::before {
|
||||
color: var(--checkbox-disabled-color);
|
||||
}
|
||||
}
|
||||
|
||||
/** Labeled Checkboxes */
|
||||
label.checkbox {
|
||||
flex: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: var(--font-size-12);
|
||||
|
||||
> input[type="checkbox"] {
|
||||
--checkbox-size: 16px;
|
||||
flex: none;
|
||||
// FIXME the below rules are combating theme v1 label.checkbox styles and should eventually be removed
|
||||
top: 0;
|
||||
margin: 0;
|
||||
width: var(--checkbox-size);
|
||||
height: var(--checkbox-size);
|
||||
}
|
||||
}
|
||||
|
||||
/* Text Areas */
|
||||
textarea {
|
||||
--color-text-selection-bg: var(--color-cool-3);
|
||||
|
||||
min-height: 50px;
|
||||
padding: 1rem;
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-cool-4);
|
||||
border-radius: 4px;
|
||||
font-family: var(--font-monospace);
|
||||
font-size: var(--font-size-14);
|
||||
color: var(--input-text-color);
|
||||
user-select: text;
|
||||
resize: vertical;
|
||||
&:focus {
|
||||
box-shadow: 0 0 6px var(--color-warm-1);
|
||||
outline: 1px solid transparent;
|
||||
}
|
||||
&:read-only {
|
||||
color: var(--color-light-4);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Range Inputs */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
input[type=range] {
|
||||
--thumb-size: 12px;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
background: transparent;
|
||||
height: 20px;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
|
||||
.range-track() {
|
||||
width: 100%;
|
||||
height: calc(var(--thumb-size) / 2);
|
||||
background: var(--range-track-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.range-thumb() {
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
height: var(--thumb-size);
|
||||
width: var(--thumb-size);
|
||||
background: var(--range-thumb-background-color);
|
||||
border: 1px solid var(--range-thumb-border-color);
|
||||
}
|
||||
|
||||
&::-webkit-slider-runnable-track { .range-track(); }
|
||||
&::-webkit-slider-thumb { .range-thumb(); }
|
||||
&::-moz-range-track { .range-track(); }
|
||||
&::-moz-range-thumb { .range-thumb(); }
|
||||
|
||||
&:disabled, &[readonly] {
|
||||
pointer-events: none;
|
||||
filter: grayscale(1) opacity(.33);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Buttons */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
a.button,
|
||||
button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 0.5rem;
|
||||
background: var(--button-background-color);
|
||||
border: 1px solid var(--button-border-color);
|
||||
border-radius: 4px;
|
||||
color: var(--button-text-color);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
font-size: var(--font-size-14);
|
||||
|
||||
// Button Icons
|
||||
> i {
|
||||
pointer-events: none;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
// Button Labels
|
||||
> label {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Disabled Buttons
|
||||
&:disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Hovered Buttons
|
||||
&:hover {
|
||||
background: var(--button-hover-background-color);
|
||||
color: var(--button-hover-text-color);
|
||||
border-color: var(--button-hover-border-color);
|
||||
transition: background-color 0.5s, border-color 0.5s;
|
||||
}
|
||||
|
||||
// Focused Buttons
|
||||
&:focus {
|
||||
outline: 1px solid var(--button-focus-outline-color);
|
||||
box-shadow: 0 0 4px var(--button-focus-outline-color);
|
||||
}
|
||||
|
||||
// Icon-Only
|
||||
&.icon {
|
||||
> i {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Active Buttons - appear as focused
|
||||
&.active {
|
||||
outline: 1px solid var(--button-focus-outline-color);
|
||||
box-shadow: 0 0 4px var(--button-focus-outline-color);
|
||||
}
|
||||
}
|
||||
|
||||
/** Bright Buttons */
|
||||
a.button.bright,
|
||||
button.bright {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
70
resources/app/public/less2/elements/media.less
Normal file
70
resources/app/public/less2/elements/media.less
Normal file
@@ -0,0 +1,70 @@
|
||||
|
||||
/* Images */
|
||||
img, iframe, video {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Figures */
|
||||
figure {
|
||||
width: 100%;
|
||||
margin: 1rem 0;
|
||||
|
||||
img, iframe, video {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
clear: both;
|
||||
border: 1px solid var(--color-cool-4);
|
||||
box-shadow: 0 0 4px #000;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
margin: 1rem 0 0;
|
||||
color: var(--color-light-1);
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.video {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
padding-bottom: calc(100% * 9/16 + 1.75rem);
|
||||
}
|
||||
|
||||
iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: calc(100% - 1.75rem);
|
||||
}
|
||||
|
||||
figcaption {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Alignment */
|
||||
figure, img, iframe, video {
|
||||
&.left {
|
||||
clear: left;
|
||||
float: left;
|
||||
max-width: 30%;
|
||||
margin: 0 1rem 1rem 0;
|
||||
}
|
||||
|
||||
&.right {
|
||||
clear: right;
|
||||
float: right;
|
||||
max-width: 30%;
|
||||
margin: 0 0 1rem 1rem;
|
||||
}
|
||||
|
||||
&.noborder {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
306
resources/app/public/less2/elements/typography.less
Normal file
306
resources/app/public/less2/elements/typography.less
Normal file
@@ -0,0 +1,306 @@
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Headers */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 2rem 0 1rem;
|
||||
line-height: 1;
|
||||
text-shadow: 1px 1px 4px #000;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: var(--font-h1);
|
||||
font-size: var(--font-h1-size);
|
||||
color: var(--color-light-1);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: var(--font-h2);
|
||||
font-size: var(--font-h2-size);
|
||||
color: var(--color-light-1);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: var(--font-h3);
|
||||
font-size: var(--font-h3-size);
|
||||
color: var(--color-light-1);
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-family: var(--font-h4);
|
||||
font-size: var(--font-h4-size);
|
||||
color: var(--color-light-2);
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-family: var(--font-h5);
|
||||
font-size: var(--font-h5-size);
|
||||
color: var(--color-light-2);
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-family: var(--font-h6);
|
||||
font-size: var(--font-h6-size);
|
||||
color: var(--color-light-2);
|
||||
}
|
||||
|
||||
/** Bordered Header */
|
||||
h1.border,
|
||||
h2.border,
|
||||
h3.border,
|
||||
h4.border {
|
||||
clear: both;
|
||||
padding: 1rem 0 0.6rem;
|
||||
position: relative;
|
||||
text-indent: 0.5rem;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
border-top: 2px solid var(--color-warm-2);
|
||||
border-bottom: 2px solid var(--color-warm-2);
|
||||
-webkit-mask-image: linear-gradient(90deg, transparent 0%, black 50%, transparent 100%);
|
||||
mask-image: linear-gradient(90deg, transparent 0%, black 50%, transparent 100%);
|
||||
}
|
||||
}
|
||||
|
||||
h3.border,
|
||||
h4.border {
|
||||
&::before {
|
||||
border-top: 2px solid var(--color-warm-3);
|
||||
border-bottom: 2px solid var(--color-warm-3);
|
||||
}
|
||||
}
|
||||
|
||||
/** Divider Header */
|
||||
h1.divider,
|
||||
h2.divider,
|
||||
h3.divider,
|
||||
h4.divider {
|
||||
clear: both;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
border: none;
|
||||
&::before {
|
||||
content: "";
|
||||
width: 50%;
|
||||
margin-right: 0.5rem;
|
||||
border-top: 2px ridge var(--color-warm-1);
|
||||
-webkit-mask-image: linear-gradient(90deg, transparent 0%, black 100%);
|
||||
mask-image: linear-gradient(90deg, transparent 0%, black 100%);
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
width: 50%;
|
||||
margin-left: 0.5rem;
|
||||
border-top: 2px ridge var(--color-warm-1);
|
||||
-webkit-mask-image: linear-gradient(270deg, transparent 0%, black 100%);
|
||||
mask-image: linear-gradient(270deg, transparent 0%, black 100%);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Text */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
p {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
p.inactive {
|
||||
color: var(--color-light-5);
|
||||
}
|
||||
|
||||
span.highlight {
|
||||
color: var(--color-warm-1);
|
||||
}
|
||||
|
||||
// Text Selection
|
||||
::selection {
|
||||
background: var(--color-text-selection-bg);
|
||||
color: var(--color-text-selection);
|
||||
}
|
||||
|
||||
// Overflow with Ellipsis
|
||||
.ellipsis {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Blockquotes */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
blockquote {
|
||||
margin: 0;
|
||||
padding: 0.5rem 1rem;
|
||||
font-family: var(--font-blockquote);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Lists */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
ul, ol {
|
||||
margin: 1rem 0;
|
||||
padding: 0 0 0 1.25rem;
|
||||
li {
|
||||
margin-bottom: 0.25rem;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin: 0.25rem 0 0;
|
||||
li {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** Lists without list style */
|
||||
ul.plain, ol.plain {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
dl {
|
||||
dt {
|
||||
display: inline-block;
|
||||
color: var(--color-light-2);
|
||||
text-shadow: 1px 1px #000;
|
||||
margin: 0 0 0.25rem;
|
||||
}
|
||||
dd {
|
||||
margin: 0 0 1rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Links */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
a[href] {
|
||||
color: var(--color-warm-1);
|
||||
overflow-wrap: break-word;
|
||||
&:hover {
|
||||
text-shadow: 0 0 8px var(--color-warm-2);
|
||||
}
|
||||
}
|
||||
|
||||
// Control Buttons
|
||||
a.control {
|
||||
cursor: pointer;
|
||||
> i {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
&:hover {
|
||||
color: var(--color-light-2);
|
||||
text-shadow: 0 0 8px var(--color-warm-2);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Tables */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
table {
|
||||
margin: 1rem;
|
||||
background: var(--table-background-color);
|
||||
border-spacing: 0;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
th, td {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
thead {
|
||||
background: var(--color-cool-4);
|
||||
font-size: 1.1em;
|
||||
color: var(--color-light-1);
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
th {
|
||||
line-height: 1.5;
|
||||
border-bottom: 1px solid var(--color-cool-4);
|
||||
}
|
||||
}
|
||||
|
||||
tfoot {
|
||||
background: var(--color-cool-4);
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
color: var(--color-light-1);
|
||||
td {
|
||||
line-height: 1.5;
|
||||
border-top: 1px solid var(--color-cool-4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Dividers */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
hr {
|
||||
clear: both;
|
||||
border: 0;
|
||||
height: 2px;
|
||||
margin: 1rem 0;
|
||||
color: var(--color-light-3);
|
||||
background-image: linear-gradient(90deg, transparent 0%, rgb(231, 209, 177) 50%, transparent 100%);
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Code Blocks */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
/* Inline Code Blocks */
|
||||
p, li, span {
|
||||
code {
|
||||
display: inline-block;
|
||||
padding: 1px 0.25rem;
|
||||
margin: -1px 0;
|
||||
font-size: var(--font-size-14);
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
// Code Blocks
|
||||
code {
|
||||
display: block;
|
||||
padding: 0.5rem;
|
||||
color: var(--color-light-2);
|
||||
background: var(--color-cool-4);
|
||||
border: 1px solid var(--color-cool-3);
|
||||
border-radius: 3px;
|
||||
user-select: text;
|
||||
--color-text-selection-bg: var(--color-cool-3);
|
||||
}
|
||||
|
||||
// Button References
|
||||
span.reference {
|
||||
flex: none;
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: var(--font-size-14);
|
||||
color: #c5dbe3;
|
||||
border: 1px solid #def7ff;
|
||||
border-radius: 3px;
|
||||
}
|
||||
269
resources/app/public/less2/exceptions/prosemirror.less
Normal file
269
resources/app/public/less2/exceptions/prosemirror.less
Normal file
@@ -0,0 +1,269 @@
|
||||
@import (inline) "../../node_modules/prosemirror-view/style/prosemirror.css";
|
||||
@import (inline) "../../node_modules/prosemirror-gapcursor/style/gapcursor.css";
|
||||
|
||||
.prosemirror {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
--color-control-bg: #d9d8c8;
|
||||
--color-hover-bg: #f0f0e0;
|
||||
--height-button: 28px;
|
||||
|
||||
menu {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0.25rem;
|
||||
background: var(--color-cool-4);
|
||||
border-radius: 6px;
|
||||
|
||||
> li {
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.source-code {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.concurrent-users {
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 6px;
|
||||
background: var(--color-control-bg);
|
||||
border: 1px solid var(--color-shadow-highlight);
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 4px var(--color-shadow-highlight);
|
||||
i {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
i {
|
||||
margin: 0;
|
||||
}
|
||||
&.source-code-action {
|
||||
background: var(--color-control-bg);
|
||||
}
|
||||
&:hover, &.active {
|
||||
box-shadow: none;
|
||||
background: var(--color-hover-bg);
|
||||
color: var(--color-cool-5);
|
||||
}
|
||||
}
|
||||
|
||||
.pm-dropdown {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-radius: 4px;
|
||||
text-align: left;
|
||||
|
||||
> span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 5em;
|
||||
font-size: var(--font-size-12);
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
.html {
|
||||
display: none;
|
||||
}
|
||||
|
||||
i.fa-chevron-down {
|
||||
color: var(--color-text-light-7);
|
||||
font-size: var(--font-size-11);
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.editor-container {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
border: 1px dashed var(--color-light-4);
|
||||
border-radius: 4px;
|
||||
.editor-content {
|
||||
outline: 0 solid transparent;
|
||||
height: unset;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: 1rem 0.5rem 1rem 1rem;
|
||||
padding: 0 0.5rem 0 0;
|
||||
overflow: hidden scroll;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.collaborating menu {
|
||||
.source-code-edit {
|
||||
display: none;
|
||||
}
|
||||
.concurrent-users {
|
||||
display: flex;
|
||||
|
||||
.scene-player {
|
||||
width: 14px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
margin-right: -3px;
|
||||
line-height: var(--line-height-12);
|
||||
font-size: .625rem;
|
||||
text-align: center;
|
||||
color: black;
|
||||
font-weight: 700;
|
||||
|
||||
&:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------------------- */
|
||||
/* Source Code Editing */
|
||||
/* ----------------------------------------- */
|
||||
|
||||
.prosemirror.editing-source {
|
||||
menu {
|
||||
.text { display: none; }
|
||||
.html { display: initial; }
|
||||
.right { margin-left: auto; }
|
||||
.right ~ .right { margin-left: unset; }
|
||||
}
|
||||
|
||||
.editor-container {
|
||||
display: none
|
||||
}
|
||||
|
||||
textarea {
|
||||
flex: 1;
|
||||
border: 1px dashed var(--color-light-4);
|
||||
border-radius: 4px;
|
||||
white-space: pre-wrap;
|
||||
tab-size: 4;
|
||||
resize: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------------------- */
|
||||
/* Drop-downs */
|
||||
/* ----------------------------------------- */
|
||||
|
||||
#prosemirror-dropdown {
|
||||
--color-control-bg: var(--color-cool-4);
|
||||
--color-hover-bg: #f0f0e0;
|
||||
position: fixed;
|
||||
z-index: var(--z-index-tooltip);
|
||||
color: var(--color-light-3);
|
||||
|
||||
.html { display: none; }
|
||||
|
||||
ul {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
min-width: 90px;
|
||||
padding: 6px;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
background: var(--color-control-bg);
|
||||
border-radius: 3px;
|
||||
border: 1px solid var(--color-cool-3);
|
||||
font-size: var(--font-size-12);
|
||||
line-height: var(--font-size-24);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
> ul { display: block; }
|
||||
|
||||
li {
|
||||
padding: 1px 6px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
|
||||
i { font-size: var(--font-size-14); }
|
||||
|
||||
&.divider {
|
||||
pointer-events: none;
|
||||
margin-bottom: 4px;
|
||||
border-bottom: 1px solid #999;
|
||||
}
|
||||
|
||||
&.level1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
&.level2 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
&.level3 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
&.level5 {
|
||||
font-size: .83em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.level6 {
|
||||
font-size: .67em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--color-hover-bg);
|
||||
|
||||
ul { display: block; }
|
||||
> :is(span, i) { color: black; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------------------- */
|
||||
/* Insertion Dialogs */
|
||||
/* ----------------------------------------- */
|
||||
|
||||
.prosemirror.menu-dialog {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: transparent;
|
||||
|
||||
form {
|
||||
width: 400px;
|
||||
position: fixed;
|
||||
background: var(--color-control-bg);
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
box-shadow: 0 0 8px 0 var(--color-shadow-dark);
|
||||
}
|
||||
}
|
||||
117
resources/app/public/less2/foundry2.less
Normal file
117
resources/app/public/less2/foundry2.less
Normal file
@@ -0,0 +1,117 @@
|
||||
/* ---------------------------------------- */
|
||||
/* Cascade Layers Declaration */
|
||||
/* Reference https://css-tricks.com/css-cascade-layers/
|
||||
/* ---------------------------------------- */
|
||||
|
||||
@layer reset, // 1. Browser reset styles
|
||||
variables, // 2. Declare framework variables
|
||||
elements, // 3. HTML elements and typography
|
||||
blocks, // 4. Block styles which are used across applications
|
||||
applications, // 5. Application-specific rules
|
||||
layouts, // 6. Page layouts
|
||||
system, // 7. Default game system styles
|
||||
modules, // 8. Default module styles
|
||||
exceptions; // 9. Special exceptions
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Browser Reset */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
@layer reset {
|
||||
@import "reset.less";
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Variable Declaration */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
@layer variables {
|
||||
@import "variables.less";
|
||||
@import "themes/fantasy.less";
|
||||
@import "themes/scifi.less";
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Typography */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
@layer elements.typography {
|
||||
@import "elements/typography.less";
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Media Elements */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
@layer elements.media {
|
||||
@import "elements/media.less";
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Forms and Form Elements */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
@layer elements.forms {
|
||||
@import "elements/forms.less";
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Custom Elements */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
@layer elements.custom {
|
||||
@import "elements/custom.less";
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Block-Specific Rules */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
@layer blocks.basic {
|
||||
@import "blocks/basic.less";
|
||||
}
|
||||
@layer blocks.forms {
|
||||
@import "blocks/forms.less";
|
||||
}
|
||||
@layer blocks.dialog {
|
||||
@import "blocks/dialog.less";
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Application-Specific Rules */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
@layer applications {
|
||||
@import "applications/apps.less"; // Application v1
|
||||
@import "applications/applications.less"; // ApplicationV2
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Page Layouts */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
@layer layouts.full {
|
||||
@import "layouts/full.less";
|
||||
}
|
||||
|
||||
@layer layouts.views {
|
||||
@import "views/auth.less";
|
||||
@import "views/setup.less";
|
||||
@import "views/join.less";
|
||||
@import "views/players.less";
|
||||
}
|
||||
|
||||
@layer layouts.responsive {
|
||||
@import "layouts/1440.less";
|
||||
@import "layouts/960.less";
|
||||
@import "layouts/720.less";
|
||||
@import "layouts/480.less";
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Special Exceptions */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
@layer exceptions.prosemirror {
|
||||
@import "exceptions/prosemirror.less";
|
||||
}
|
||||
34
resources/app/public/less2/layouts/1440.less
Normal file
34
resources/app/public/less2/layouts/1440.less
Normal file
@@ -0,0 +1,34 @@
|
||||
@media (max-width: 1440px) {
|
||||
body {
|
||||
&.setup { height: unset; }
|
||||
&.auth { min-height: 100vh; }
|
||||
}
|
||||
|
||||
#setup {
|
||||
display: unset;
|
||||
overflow: unset;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
#setup-packages {
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
#setup-sidebar {
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
margin: 1rem auto 0;
|
||||
container: unset;
|
||||
|
||||
#setup-sidebar-news,
|
||||
#setup-sidebar-featured {
|
||||
flex: 0 0 400px;
|
||||
}
|
||||
|
||||
#news-articles {
|
||||
position: unset;
|
||||
.news { flex: 0 0 100px; }
|
||||
}
|
||||
}
|
||||
}
|
||||
40
resources/app/public/less2/layouts/480.less
Normal file
40
resources/app/public/less2/layouts/480.less
Normal file
@@ -0,0 +1,40 @@
|
||||
@media (max-width: 480px) {
|
||||
|
||||
:root {
|
||||
|
||||
// Font Sizing
|
||||
--font-size-10: .5rem; // 8px
|
||||
--font-size-11: .625rem; // 10px
|
||||
--font-size-12: .625rem; // 10px
|
||||
--font-size-13: .75rem; // 12px
|
||||
--font-size-14: .75rem; // 12px
|
||||
--font-size-15: .875rem; // 14px
|
||||
--font-size-16: .875rem; // 14px
|
||||
--font-size-18: 1rem; // 16px
|
||||
--font-size-20: 1.125rem; // 18px
|
||||
--font-size-24: 1.25rem; // 20px
|
||||
--font-size-28: 1.5rem; // 24px
|
||||
--font-size-32: 1.75rem; // 28px
|
||||
--font-size-36: 2rem; // 32px
|
||||
--font-size-48: 2.25rem; // 36px
|
||||
--font-size-64: 2.5rem; // 40px
|
||||
--font-size-80: 3rem; // 48px
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* classes.less */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
#notifications {
|
||||
--position-top: 0.5rem;
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* views/auth.less */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
body.auth {
|
||||
--header-size: 100px;
|
||||
--form-padding: 1rem;
|
||||
}
|
||||
}
|
||||
5
resources/app/public/less2/layouts/720.less
Normal file
5
resources/app/public/less2/layouts/720.less
Normal file
@@ -0,0 +1,5 @@
|
||||
@media (max-width: 720px) {
|
||||
#setup-packages .tabs .tab-icon + .tab-title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
16
resources/app/public/less2/layouts/960.less
Normal file
16
resources/app/public/less2/layouts/960.less
Normal file
@@ -0,0 +1,16 @@
|
||||
@media (max-width: 960px) {
|
||||
#setup-packages .tabs h2.divider {
|
||||
&::before, &::after { content: unset; }
|
||||
}
|
||||
|
||||
#setup-sidebar {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tour-center-step { top: 1rem; }
|
||||
}
|
||||
|
||||
@media (max-height: 960px) {
|
||||
#main-header { --header-size: 80px; }
|
||||
.tour-center-step { top: 1rem; }
|
||||
}
|
||||
52
resources/app/public/less2/layouts/full.less
Normal file
52
resources/app/public/less2/layouts/full.less
Normal file
@@ -0,0 +1,52 @@
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Body Container */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
body {
|
||||
overflow: hidden auto;
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
background: black;
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--font-size-15);
|
||||
color: var(--color-light-3);
|
||||
}
|
||||
|
||||
#main-background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--background-url) no-repeat;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
opacity: 0.5;
|
||||
z-index: var(--z-index-background);
|
||||
}
|
||||
|
||||
/* ----------------------------------------- */
|
||||
/* Scrollbar */
|
||||
/* ----------------------------------------- */
|
||||
|
||||
// Chrome and Edge
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
outline: 1px solid transparent;
|
||||
border-radius: 2px;
|
||||
background: var(--color-scrollbar);
|
||||
border: 1px solid var(--color-scrollbar-border);
|
||||
}
|
||||
|
||||
// Firefox
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--color-scrollbar) var(--color-scrollbar-track);
|
||||
}
|
||||
55
resources/app/public/less2/reset.less
Normal file
55
resources/app/public/less2/reset.less
Normal file
@@ -0,0 +1,55 @@
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box; // Box-sizing always
|
||||
user-select: none; // Prevent text selection except as opt-in
|
||||
}
|
||||
|
||||
// Body sizing
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
text-rendering: optimizeSpeed;
|
||||
line-height: 1.25;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
// Remove element margins
|
||||
body,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
p,
|
||||
figure,
|
||||
blockquote,
|
||||
dl,
|
||||
dd {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// No list style for lists with a "list" role
|
||||
ul[role="list"],
|
||||
ol[role="list"] {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
// Prefer smooth scrolling
|
||||
html:focus-within {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
// Image sizing
|
||||
img {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Inputs and buttons should inherit font choices
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
51
resources/app/public/less2/themes/fantasy.less
Normal file
51
resources/app/public/less2/themes/fantasy.less
Normal file
@@ -0,0 +1,51 @@
|
||||
body.theme-fantasy {
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Colors */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
--color-warm-1: #ee9b3a;
|
||||
--color-warm-2: #603032;
|
||||
--color-warm-3: #372021;
|
||||
|
||||
--color-cool-3: #251a1c;
|
||||
--color-cool-4: #0c0609;
|
||||
--color-cool-5: #0b090a;
|
||||
|
||||
--color-cool-5-25: rgb(11 9 10 / 25%);
|
||||
--color-cool-5-50: rgb(11 9 10 / 50%);
|
||||
--color-cool-5-75: rgb(11 9 10 / 75%);
|
||||
--color-cool-5-90: rgb(11 9 10 / 90%);
|
||||
|
||||
//--color-light-1 TODO undefined
|
||||
--color-light-2: #ede9de;
|
||||
//--color-light-3 TODO undefined
|
||||
--color-light-4: #c9b793;
|
||||
//--color-light-5 TODO undefined
|
||||
//--color-light-6 TODO undefined
|
||||
|
||||
--color-scrollbar: var(--color-warm-2);
|
||||
--color-scrollbar-border: var(--color-warm-2);
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Forms and Form Elements */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
input,
|
||||
select {
|
||||
--input-background-color: var(--color-warm-3);
|
||||
}
|
||||
|
||||
input[type=checkbox] {
|
||||
--checkbox-background-color: var(--color-warm-3);
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Packages */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
#setup-packages header.controls .filter input {
|
||||
--input-background-color: var(--color-cool-3);
|
||||
}
|
||||
}
|
||||
|
||||
107
resources/app/public/less2/themes/light.less
Normal file
107
resources/app/public/less2/themes/light.less
Normal file
@@ -0,0 +1,107 @@
|
||||
.theme-light {
|
||||
--color-text-selection: var(--color-light-1);
|
||||
--color-text-selection-bg: var(--color-dark-6);
|
||||
|
||||
.application {
|
||||
--background: url("../ui/parchment.jpg") repeat;
|
||||
--color-text-primary: var(--color-dark-1);
|
||||
--color-header-background: var(--color-dark-3);
|
||||
--color-fieldset-border: var(--color-light-2);
|
||||
--color-form-label: var(--color-dark-2);
|
||||
--color-form-label-hover: var(--color-dark-1);
|
||||
--color-form-hint: var(--color-dark-4);
|
||||
--color-form-hint-hover: var(--color-dark-2);
|
||||
--color-select-option-bg: var(--color-light-1);
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Forms and Form Elements */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
input,
|
||||
select {
|
||||
--input-background-color: rgb(0 0 0 / 10%);
|
||||
--input-border-color: var(--color-dark-6);
|
||||
--input-text-color: var(--color-dark-2);
|
||||
--input-placeholder-color: var(--color-dark-3);
|
||||
--input-focus-outline-color: var(--color-warm-2);
|
||||
|
||||
// Focused
|
||||
&:focus {
|
||||
--input-text-color: var(--color-dark-1);
|
||||
}
|
||||
|
||||
// Disabled
|
||||
&:disabled {
|
||||
--input-background-color: rgb(0 0 0 / 20%);
|
||||
--input-border-color: transparent;
|
||||
--input-text-color: var(--color-dark-3);
|
||||
}
|
||||
}
|
||||
|
||||
// Checkboxes
|
||||
input[type=checkbox] {
|
||||
--checkbox-font-weight: unset;
|
||||
--checkbox-background-color: var(--color-dark-6);
|
||||
--checkbox-checked-color: var(--color-warm-1);
|
||||
--checkbox-checkmark-color: var(--color-dark-1);
|
||||
|
||||
&:disabled, &[readonly] {
|
||||
--checkbox-font-weight: bold;
|
||||
--checkbox-disabled-color: var(--color-dark-6);
|
||||
--checkbox-checked-color: var(--color-dark-6);
|
||||
&:checked { --checkbox-disabled-color: transparent; }
|
||||
}
|
||||
}
|
||||
|
||||
label.icon {
|
||||
--input-background-color: rgb(0 0 0 / 10%);
|
||||
--input-border-color: var(--color-dark-6);
|
||||
--input-text-color: var(--color-dark-2);
|
||||
--input-focus-outline-color: var(--color-warm-2);
|
||||
|
||||
&:focus-within {
|
||||
--input-text-color: var(--color-dark-1);
|
||||
}
|
||||
|
||||
&:has(> input:disabled) {
|
||||
--input-background-color: rgb(0 0 0 / 20%);
|
||||
--input-border-color: transparent;
|
||||
--input-text-color: var(--color-dark-3);
|
||||
}
|
||||
}
|
||||
|
||||
// Readonly Text Input
|
||||
input[readonly] {
|
||||
--input-background-color: rgb(0 0 0 / 20%);
|
||||
--input-border-color: transparent;
|
||||
--input-text-color: var(--color-dark-3);
|
||||
}
|
||||
|
||||
// Buttons
|
||||
a.button,
|
||||
button {
|
||||
--button-background-color: rgba(0 0 0 / 10%);
|
||||
--button-border-color: var(--color-dark-5);
|
||||
--button-text-color: var(--color-dark-1);
|
||||
--button-focus-outline-color: var(--color-warm-2);
|
||||
--button-hover-background-color: var(--color-warm-2);
|
||||
--button-hover-text-color: var(--color-light-1);
|
||||
|
||||
// Disabled
|
||||
&:disabled {
|
||||
--button-background-color: rgba(0 0 0 / 20%);
|
||||
--button-border-color: transparent;
|
||||
--button-text-color: var(--color-dark-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Tables */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
table {
|
||||
--table-background-color: none;
|
||||
thead, tfoot { background: var(--color-cool-5); }
|
||||
}
|
||||
91
resources/app/public/less2/themes/scifi.less
Normal file
91
resources/app/public/less2/themes/scifi.less
Normal file
@@ -0,0 +1,91 @@
|
||||
body.theme-scifi {
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Backgrounds */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
--background-url: url("../ui/backgrounds/setup-scifi.webp");
|
||||
--main-logo: url("../icons/logo-scifi-blank.png");
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Colors */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
--color-warm-1: #3a9bee;
|
||||
--color-warm-2: #303260;
|
||||
--color-warm-3: #202137;
|
||||
|
||||
--color-cool-3: #202137;
|
||||
--color-cool-4: #15151e;
|
||||
--color-cool-5: #0b090a;
|
||||
|
||||
--color-cool-5-25: rgb(11 9 10 / 25%);
|
||||
--color-cool-5-50: rgb(11 9 10 / 50%);
|
||||
--color-cool-5-75: rgb(11 9 10 / 75%);
|
||||
--color-cool-5-90: rgb(11 9 10 / 90%);
|
||||
|
||||
--color-light-1: #f3f7f7;
|
||||
--color-light-2: #dee9ed;
|
||||
--color-light-3: #c2daea;
|
||||
--color-light-4: #899fad;
|
||||
--color-light-5: #79849b;
|
||||
--color-light-6: #6c7288;
|
||||
|
||||
--color-scrollbar: #303260;
|
||||
--color-scrollbar-border: #3a9bee;
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Typography */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
--font-h1: "Bruno Ace SC", serif;
|
||||
--font-h2: "Bruno Ace", serif;
|
||||
--font-h3: "Bruno Ace", serif;
|
||||
--font-h4: "Bruno Ace", serif;
|
||||
--font-h5: "Bruno Ace", serif;
|
||||
--font-h6: "Bruno Ace", serif;
|
||||
--font-h1-size: var(--font-size-64);
|
||||
--font-h3-size: var(--font-size-20);
|
||||
--font-h4-size: var(--font-size-20);
|
||||
--font-h6-size: var(--font-size-18);
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Applications */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
.app,
|
||||
.application {
|
||||
--color-border: #303260;
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Forms and Form Elements */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
input, select {
|
||||
--input-background-color: #202137;
|
||||
--input-focus-outline-color: #3a9bee;
|
||||
}
|
||||
|
||||
// Checkboxes Specifically
|
||||
input[type="checkbox"] {
|
||||
--checkbox-checked-color: #3a9bee;
|
||||
--checkbox-background-color: #202137;
|
||||
}
|
||||
|
||||
button.bright {
|
||||
--button-hover-background-color: #42a5fc;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Setup Specifically */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
body.auth.theme-scifi {
|
||||
--header-font-size: var(--font-size-64);
|
||||
.app,
|
||||
.application {
|
||||
--color-border: #3a9bee;
|
||||
}
|
||||
}
|
||||
340
resources/app/public/less2/variables.less
Normal file
340
resources/app/public/less2/variables.less
Normal file
@@ -0,0 +1,340 @@
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Font Declarations */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
// Modesto
|
||||
@font-face {
|
||||
font-family: 'Modesto Condensed';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('../fonts/modesto-condensed/modesto-condensed.woff2') format('woff2');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Modesto Condensed';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url('../fonts/modesto-condensed/modesto-condensed-bold.woff2') format('woff2');
|
||||
}
|
||||
|
||||
// Amiri
|
||||
@font-face {
|
||||
font-family: 'Amiri';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url("../fonts/amiri/amiri-regular.woff2") format('woff2');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Amiri';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url("../fonts/amiri/amiri-bold.woff2") format('woff2');
|
||||
}
|
||||
|
||||
// Signika
|
||||
@font-face {
|
||||
font-family: 'Signika';
|
||||
src: url('../fonts/signika/signika-regular.woff2') format('woff2');
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Signika';
|
||||
src: url('../fonts/signika/signika-bold.woff2') format('woff2');
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
// Bruno Ace
|
||||
@font-face {
|
||||
font-family: 'Bruno Ace';
|
||||
src: url('../fonts/bruno-ace/bruno-ace.woff2') format('woff2');
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
// Bruno Ace SC
|
||||
@font-face {
|
||||
font-family: 'Bruno Ace SC';
|
||||
src: url('../fonts/bruno-ace/bruno-ace-sc.woff2') format('woff2');
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Colors */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
body {
|
||||
|
||||
// Warm Color Spectrum
|
||||
--color-warm-1: #ee9b3a;
|
||||
--color-warm-2: #c9593f;
|
||||
--color-warm-3: #5d142b;
|
||||
|
||||
// Cool Color Spectrum
|
||||
--color-cool-3: #584a75;
|
||||
--color-cool-4: #302831;
|
||||
--color-cool-5: #0b0a13;
|
||||
--color-cool-5-25: rgb(11 10 19 / 25%);
|
||||
--color-cool-5-50: rgb(11 10 19 / 50%);
|
||||
--color-cool-5-75: rgb(11 10 19 / 75%);
|
||||
--color-cool-5-90: rgb(11 10 19 / 90%);
|
||||
|
||||
// Light Color Spectrum
|
||||
--color-light-1: #f7f3e8;
|
||||
--color-light-2: #efe6d8;
|
||||
--color-light-3: #e7d1b1;
|
||||
--color-light-4: #d0b8a3;
|
||||
--color-light-5: #9f8475;
|
||||
--color-light-6: #816b66;
|
||||
|
||||
// Dark Color Spectrum
|
||||
--color-dark-1: #111;
|
||||
--color-dark-2: #222;
|
||||
--color-dark-3: #444;
|
||||
--color-dark-4: #555;
|
||||
--color-dark-5: #666;
|
||||
--color-dark-6: #777;
|
||||
|
||||
// Notification Levels
|
||||
--color-level-error: #ce0707;
|
||||
--color-level-error-bg: rgb(105 0 8 / 80%);
|
||||
--color-level-error-border: #750003;
|
||||
|
||||
--color-level-info: #59a1f6;
|
||||
--color-level-info-bg: rgb(47 80 132 / 80%);
|
||||
--color-level-info-border: #5c87b9;
|
||||
|
||||
--color-level-success: #26b231;
|
||||
--color-level-success-bg: rgba(26, 107, 34, 0.8);
|
||||
--color-level-success-border: #1b8f23;
|
||||
|
||||
--color-level-warning: #ee9b3a;
|
||||
--color-level-warning-bg: rgb(214 150 0 / 80%);
|
||||
--color-level-warning-border: #b18404;
|
||||
|
||||
--color-scrollbar: #5d142b;
|
||||
--color-scrollbar-track: transparent;
|
||||
--color-scrollbar-border: #8d151b;
|
||||
|
||||
--color-text-selection: #f7f3e8;
|
||||
--color-text-selection-bg: #584a75;
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Typography */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
body {
|
||||
|
||||
// Font Families
|
||||
--font-body: "Signika", "Palatino Linotype", sans-serif;
|
||||
--font-awesome: "Font Awesome 6 Pro";
|
||||
--font-awesome-duotone: "Font Awesome 6 Duotone";
|
||||
--font-monospace: monospace;
|
||||
--font-blockquote: "Signika", "Palatino Linotype", sans-serif;
|
||||
|
||||
// Font Sizing
|
||||
--font-size-10: .625rem; // 10px
|
||||
--font-size-11: .6875rem; // 11px
|
||||
--font-size-12: .75rem; // 12px
|
||||
--font-size-13: .8125rem; // 13px
|
||||
--font-size-14: .875rem; // 14px
|
||||
--font-size-15: .9375rem; // 15px
|
||||
--font-size-16: 1rem; // 16px
|
||||
--font-size-18: 1.125rem; // 18px
|
||||
--font-size-20: 1.25rem; // 20px
|
||||
--font-size-24: 1.5rem; // 24px
|
||||
--font-size-28: 1.75rem; // 28px
|
||||
--font-size-32: 2rem; // 32px
|
||||
--font-size-36: 2.25rem; // 36px
|
||||
--font-size-48: 3rem; // 48px
|
||||
--font-size-64: 4rem; // 64px
|
||||
--font-size-80: 5rem; // 80px
|
||||
|
||||
// Header Fonts
|
||||
--font-h1: "Modesto Condensed", serif;
|
||||
--font-h2: "Amiri", serif;
|
||||
--font-h3: "Signika", "Palatino Linotype", sans-serif;
|
||||
--font-h4: "Amiri", serif;
|
||||
--font-h5: "Signika", "Palatino Linotype", sans-serif;
|
||||
--font-h6: "Modesto Condensed", serif;
|
||||
|
||||
// Header Sizing
|
||||
--font-h1-size: var(--font-size-48);
|
||||
--font-h2-size: var(--font-size-32);
|
||||
--font-h3-size: var(--font-size-24);
|
||||
--font-h4-size: var(--font-size-24);
|
||||
--font-h5-size: var(--font-size-20);
|
||||
--font-h6-size: var(--font-size-24);
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Layout */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
body {
|
||||
--input-height: 2rem;
|
||||
|
||||
// Z-indices
|
||||
--z-index-background: -1;
|
||||
--z-index-main: 0;
|
||||
--z-index-canvas: 0;
|
||||
--z-index-app: 30;
|
||||
--z-index-ui: 60;
|
||||
--z-index-window: 100;
|
||||
--z-index-tooltip: 9999;
|
||||
--z-index-notification: 99999;
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Aesthetics */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
body {
|
||||
--background-url: url("../ui/backgrounds/setup.webp");
|
||||
--main-logo: url("../icons/vtt-512.png");
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Applications */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
// Application V1 and V2
|
||||
.window-app,
|
||||
.application {
|
||||
--header-height: 36px;
|
||||
--minimized-width: 200px;
|
||||
--background: var(--color-cool-5-90);
|
||||
|
||||
--color-text-primary: var(--color-light-2);
|
||||
--color-header-background: rgb(0 0 0 / 50%);
|
||||
--color-border: var(--color-cool-4);
|
||||
--color-fieldset-border: var(--color-light-6);
|
||||
--color-form-hint: var(--color-light-5);
|
||||
--color-form-hint-hover: var(--color-light-4);
|
||||
--color-form-label: var(--color-light-4);
|
||||
--color-form-label-hover: var(--color-light-2);
|
||||
--color-select-option-bg: transparent;
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Forms and Form Elements */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
input,
|
||||
select {
|
||||
--input-background-color: var(--color-cool-4);
|
||||
--input-border-color: transparent;
|
||||
--input-text-color: var(--color-light-3);
|
||||
--input-placeholder-color: var(--color-light-4);
|
||||
--input-focus-outline-color: var(--color-cool-3);
|
||||
|
||||
// Focused
|
||||
&:focus {
|
||||
--input-text-color: var(--color-light-1);
|
||||
}
|
||||
|
||||
// Disabled
|
||||
&:disabled {
|
||||
--input-background-color: var(--color-cool-5);
|
||||
--input-border-color: var(--color-cool-4);
|
||||
--input-text-color: var(--color-light-4);
|
||||
}
|
||||
}
|
||||
|
||||
.standard-form label.icon {
|
||||
--input-background-color: var(--color-cool-4);
|
||||
--input-border-color: transparent;
|
||||
--input-text-color: var(--color-light-3);
|
||||
--input-focus-outline-color: var(--color-cool-3);
|
||||
|
||||
&:focus-within {
|
||||
--input-text-color: var(--color-light-1);
|
||||
}
|
||||
|
||||
&:has(> input:disabled) {
|
||||
--input-background-color: var(--color-cool-5);
|
||||
--input-border-color: var(--color-cool-4);
|
||||
--input-text-color: var(--color-light-4);
|
||||
}
|
||||
}
|
||||
|
||||
// Readonly Text Input
|
||||
input[readonly] {
|
||||
--input-background-color: var(--color-cool-5);
|
||||
--input-border-color: var(--color-cool-4);
|
||||
--input-text-color: var(--color-light-4);
|
||||
}
|
||||
|
||||
// Checkboxes Specifically
|
||||
input[type="checkbox"] {
|
||||
--checkbox-checked-color: var(--color-warm-1);
|
||||
--checkbox-disabled-color: var(--color-cool-4);
|
||||
--checkbox-background-color: var(--color-cool-4);
|
||||
--checkbox-checkmark-color: transparent;
|
||||
--checkbox-font-weight: bold;
|
||||
}
|
||||
|
||||
// Range Inputs
|
||||
input[type=range] {
|
||||
--range-track-color: var(--input-background-color);
|
||||
--range-thumb-background-color: rgb(11 10 19 / 90%);
|
||||
--range-thumb-border-color: var(--color-warm-1);
|
||||
}
|
||||
|
||||
// Buttons
|
||||
a.button,
|
||||
button {
|
||||
--button-background-color: var(--color-cool-5-50);
|
||||
--button-border-color: var(--color-light-5);
|
||||
--button-text-color: var(--color-light-3);
|
||||
--button-focus-outline-color: var(--color-warm-2);
|
||||
--button-hover-background-color: var(--color-warm-2);
|
||||
--button-hover-border-color: var(--color-light-3);
|
||||
--button-hover-text-color: var(--color-light-1);
|
||||
|
||||
// Disabled
|
||||
&:disabled {
|
||||
--button-background-color: var(--color-cool-5);
|
||||
--button-border-color: transparent;
|
||||
--button-text-color: var(--color-light-5);
|
||||
}
|
||||
}
|
||||
|
||||
// Bright buttons
|
||||
a.button.bright,
|
||||
button.bright {
|
||||
--button-background-color: var(--color-warm-1);
|
||||
--button-border-color: var(--color-cool-5);
|
||||
--button-text-color: var(--color-cool-5);
|
||||
--button-hover-background-color: #fda948;
|
||||
--button-hover-border-color: var(--color-warm-3);;
|
||||
--button-hover-text-color: #000000;
|
||||
|
||||
// Disabled Bright Buttons
|
||||
&:disabled {
|
||||
--button-background-color: var(--color-cool-4);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Setup Views Specifically */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
body.auth {
|
||||
--header-size: 160px;
|
||||
--header-font-size: var(--font-size-80);
|
||||
--form-padding: 1.5rem;
|
||||
--max-width: 600px;
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Tables */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
table {
|
||||
--table-background-color: var(--color-cool-5-50);
|
||||
}
|
||||
87
resources/app/public/less2/views/auth.less
Normal file
87
resources/app/public/less2/views/auth.less
Normal file
@@ -0,0 +1,87 @@
|
||||
/* ---------------------------------------- */
|
||||
/* Setup Authentication Views */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
body.auth {
|
||||
gap: 1rem;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
|
||||
// Main Header
|
||||
#main-header {
|
||||
height: var(--header-size);
|
||||
flex: none;
|
||||
justify-content: center;
|
||||
background: var(--main-logo) 50% 50% no-repeat;
|
||||
background-size: var(--header-size) var(--header-size);
|
||||
width: 100%;
|
||||
|
||||
h1 {
|
||||
flex: none;
|
||||
margin: 0;
|
||||
font-size: var(--header-font-size);
|
||||
text-align: center;
|
||||
filter: drop-shadow(0 0 4px black);
|
||||
}
|
||||
}
|
||||
|
||||
// Authentication
|
||||
.application.framed {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: var(--max-width);
|
||||
padding: var(--form-padding);
|
||||
h2 {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Footer
|
||||
#watermark {
|
||||
flex: none;
|
||||
#software-version {
|
||||
flex: none;
|
||||
margin: 0;
|
||||
font-family: var(--font-h2);
|
||||
font-size: var(--font-size-24);
|
||||
font-weight: bold;
|
||||
color: var(--color-light-4);
|
||||
text-align: center;
|
||||
filter: drop-shadow(0 0 4px black);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* EULA Application */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
#eula {
|
||||
max-height: 90vh;
|
||||
z-index: calc(var(--z-index-notification) - 1);
|
||||
|
||||
#eula-content {
|
||||
h1, h2 {
|
||||
text-align: center;
|
||||
}
|
||||
.terms li {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.copyright {
|
||||
margin-top: 2rem;
|
||||
font-size: var(--font-size-14);
|
||||
color: var(--color-light-5);
|
||||
}
|
||||
}
|
||||
|
||||
#eula-form {
|
||||
margin-top: 2rem;
|
||||
h2 {
|
||||
margin: 0;
|
||||
}
|
||||
button#sign {
|
||||
flex: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
63
resources/app/public/less2/views/join.less
Normal file
63
resources/app/public/less2/views/join.less
Normal file
@@ -0,0 +1,63 @@
|
||||
/* ---------------------------------------- */
|
||||
/* Join Game View */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
// Note that this view also uses body.auth
|
||||
body.join {
|
||||
--max-width: 1040px;
|
||||
|
||||
// Background.
|
||||
#main-background { background-position: center; }
|
||||
|
||||
// Outer form
|
||||
#join-game {
|
||||
width: 100%;
|
||||
max-width: var(--max-width);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: min-content min-content 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
#join-game-details {
|
||||
.form-group > label {
|
||||
flex: 2;
|
||||
}
|
||||
.form-fields > span {
|
||||
flex: none;
|
||||
}
|
||||
}
|
||||
|
||||
#join-game-world {
|
||||
grid-row: 1 / span 3;
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
#world-description {
|
||||
max-height: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
// Minimal Join Theme
|
||||
body.join.join-theme-minimal {
|
||||
--max-width: 460px;
|
||||
|
||||
#main-header {
|
||||
background: none;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#join-game {
|
||||
flex: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
h2 {
|
||||
display: none;
|
||||
}
|
||||
#join-game-setup {
|
||||
p { display: none; }
|
||||
}
|
||||
}
|
||||
|
||||
#watermark { display: none; }
|
||||
}
|
||||
100
resources/app/public/less2/views/players.less
Normal file
100
resources/app/public/less2/views/players.less
Normal file
@@ -0,0 +1,100 @@
|
||||
/* ---------------------------------------- */
|
||||
/* User Management View */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
// Note that this view also uses body.auth
|
||||
body.players {
|
||||
--max-width: 720px;
|
||||
|
||||
// User Management App
|
||||
#manage-players {
|
||||
width: 100%;
|
||||
max-width: var(--max-width);
|
||||
|
||||
header.player {
|
||||
margin-bottom: -0.5rem;
|
||||
}
|
||||
|
||||
#player-list {
|
||||
display: flex;
|
||||
max-height: calc(100vh - 400px);
|
||||
overflow-y: auto;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
margin: -0.75rem;
|
||||
padding: 0.75rem;
|
||||
li {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.show {
|
||||
flex: 0 0 32px;
|
||||
text-align: center;
|
||||
> i {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.controls {
|
||||
flex: 0 0 24px;
|
||||
justify-content: flex-end;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
// Permissions Configuration
|
||||
#permissions-config {
|
||||
header {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
.index {
|
||||
flex: 0 0 200px;
|
||||
text-align: left;
|
||||
}
|
||||
.permissions-list { padding: 0; }
|
||||
.permission { border-bottom: 2px ridge var(--color-cool-3); }
|
||||
.form-fields { justify-content: space-around; }
|
||||
|
||||
// TODO: Only needed until we can unify styles between in-game permissions dialog and user management permissions
|
||||
// dialog.
|
||||
button {
|
||||
height: calc(1.25 * var(--input-height));
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------------------- */
|
||||
/* Permissions Config */
|
||||
/* ----------------------------------------- */
|
||||
|
||||
#permissions-config {
|
||||
header.table-header {
|
||||
background: var(--color-cool-4);
|
||||
padding: 0.5rem;
|
||||
color: var(--color-text-light-highlight);
|
||||
border: 1px solid var(--color-cool-4);
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
ul.permissions-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-height: 600px;
|
||||
overflow: hidden auto;
|
||||
}
|
||||
li.permission {
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-bottom: 1px solid var(--color-border-dark-4);
|
||||
.form-fields {
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
.index {
|
||||
flex: 0 0 200px;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
848
resources/app/public/less2/views/setup.less
Normal file
848
resources/app/public/less2/views/setup.less
Normal file
@@ -0,0 +1,848 @@
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Setup Layout */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
body.setup {
|
||||
--max-width: 1200px;
|
||||
--sidebarWidth: 480px;
|
||||
padding: 1rem 0;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
#setup {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
padding: 0 2rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Setup Menu */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
#setup-menu {
|
||||
--button-size: 40px;
|
||||
--pip-size: 16px;
|
||||
|
||||
position: fixed;
|
||||
top: 2rem;
|
||||
right: 2rem;
|
||||
width: 320px;
|
||||
|
||||
#setup-menu-buttons {
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
padding: 0.5rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
button {
|
||||
position: relative;
|
||||
flex: 0 0 var(--button-size);
|
||||
height: var(--button-size);
|
||||
font-size: var(--font-size-20);
|
||||
.pip {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -4px;
|
||||
width: var(--pip-size);
|
||||
height: var(--pip-size);
|
||||
font-size: var(--font-size-10);
|
||||
line-height: var(--pip-size);
|
||||
text-align: center;
|
||||
color: black;
|
||||
border: 1px solid black;
|
||||
border-radius: calc(var(--pip-size) / 2);
|
||||
&.warning {
|
||||
background: var(--color-warm-1);
|
||||
}
|
||||
&.error {
|
||||
background: #ec0f0f;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Setup Sidebar */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
#setup-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
flex: 0 0 var(--sidebarWidth);
|
||||
container: setup-sidebar / size;
|
||||
|
||||
#setup-sidebar-news,
|
||||
#setup-sidebar-featured {
|
||||
position: relative;
|
||||
padding: var(--form-padding);
|
||||
gap: 1rem;
|
||||
border-radius: 8px;
|
||||
h2 {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#setup-sidebar-news {
|
||||
flex: 1;
|
||||
.container {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
}
|
||||
#news-articles {
|
||||
gap: 1rem;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#setup-sidebar-featured {
|
||||
height: 320px;
|
||||
background-size: cover;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.news {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-height: 60px;
|
||||
justify-content: center;
|
||||
|
||||
border: 1px solid var(--color-cool-4);
|
||||
border-radius: 4px;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
> img {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
filter: brightness(0.75);
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
> h3 {
|
||||
margin: 1rem;
|
||||
text-align: center;
|
||||
text-shadow: none;
|
||||
filter: drop-shadow(0 0 4px black);
|
||||
}
|
||||
|
||||
.caption {
|
||||
background: var(--color-cool-5-75);
|
||||
backdrop-filter: blur(4px);
|
||||
margin: 1rem;
|
||||
padding: 1rem;
|
||||
border: 1px solid #000;
|
||||
border-radius: 3px;
|
||||
font-size: var(--font-size-12);
|
||||
color: var(--color-light-2);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color-warm-1);
|
||||
box-shadow: 0 0 4px var(--color-warm-1);
|
||||
> img {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@container setup-sidebar (max-height: 850px) {
|
||||
#setup-sidebar #setup-sidebar-featured {
|
||||
height: 200px;
|
||||
.news .caption {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@container setup-sidebar (max-height: 580px) {
|
||||
#setup-sidebar #setup-sidebar-featured {
|
||||
height: 100px;
|
||||
> h2 { display: none; }
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Setup Packages */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
#setup-packages {
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
gap: 0;
|
||||
|
||||
nav.tabs {
|
||||
padding: var(--form-padding);
|
||||
padding-bottom: 0;
|
||||
.item {
|
||||
font-size: var(--font-size-24);
|
||||
&.disabled { color: var(--color-light-5); }
|
||||
}
|
||||
}
|
||||
|
||||
section.tab {
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
padding: var(--form-padding);
|
||||
gap: 1rem;
|
||||
overflow: hidden;
|
||||
&.active {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
header.controls {
|
||||
--control-height: 40px;
|
||||
--view-mode-height: 32px;
|
||||
gap: 1rem;
|
||||
.filter {
|
||||
flex: 2 1 380px;
|
||||
input {
|
||||
height: var(--control-height);
|
||||
}
|
||||
}
|
||||
button {
|
||||
height: var(--control-height);
|
||||
flex: 1 1 120px;
|
||||
}
|
||||
button#moduleCreate {
|
||||
flex: 0 0 var(--control-height);
|
||||
}
|
||||
.view-modes {
|
||||
flex: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
button {
|
||||
height: var(--view-mode-height);
|
||||
width: var(--view-mode-height);
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** No filter results found */
|
||||
.no-results {
|
||||
font-style: italic;
|
||||
.button.search-packages {
|
||||
display: inline-block;
|
||||
line-height: 32px;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/** Locked */
|
||||
.locked {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
h3 { width: 50%; }
|
||||
i { font-size: var(--font-size-28); }
|
||||
}
|
||||
|
||||
/** Single Package */
|
||||
.package {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 1rem;
|
||||
border: 1px solid var(--color-cool-4);
|
||||
border-radius: 3px;
|
||||
|
||||
// Status Icons
|
||||
.status-icons {
|
||||
position: absolute;
|
||||
top: -0.25rem;
|
||||
right: -0.25rem;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
font-size: var(--font-size-14);
|
||||
color: var(--color-light-2);
|
||||
text-shadow: 0 0 4px black;
|
||||
}
|
||||
|
||||
// Package Title
|
||||
.package-title {
|
||||
width: 100%;
|
||||
margin: 1rem 0;
|
||||
padding: 1rem;
|
||||
font-size: var(--font-size-20);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Thumbnail
|
||||
img.thumbnail {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
object-fit: cover;
|
||||
filter: brightness(0.25);
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
/** Package Tags */
|
||||
.tags {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap-reverse;
|
||||
gap: 0.25rem;
|
||||
position: absolute;
|
||||
bottom: 0.5rem;
|
||||
left: 0.5rem;
|
||||
&.left {
|
||||
max-width: 50%;
|
||||
}
|
||||
&.right {
|
||||
max-width: 50%;
|
||||
left: auto;
|
||||
right: 0.5rem;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
// Play button
|
||||
.play {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// Package Hover
|
||||
&:hover, &.loading {
|
||||
border-color: var(--color-warm-1);
|
||||
box-shadow: 0 0 4px var(--color-warm-2);
|
||||
|
||||
.package-title::after {
|
||||
border-color: var(--color-light-1);
|
||||
}
|
||||
img.thumbnail {
|
||||
filter: none;
|
||||
}
|
||||
.tags .tag {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** Gallery View */
|
||||
.package-list.gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
grid-auto-rows: max-content;
|
||||
grid-gap: 1rem;
|
||||
.package {
|
||||
height: 200px;
|
||||
.package-title {
|
||||
background: linear-gradient(transparent 0%, rgb(0 0 0 / 50%) 25%, rgb(0 0 0 / 50%) 75%, transparent 100%);
|
||||
&::after {
|
||||
display: block;
|
||||
content: "";
|
||||
width: 80%;
|
||||
margin: 0.5rem auto 0;
|
||||
border-top: 2px solid var(--color-light-4);
|
||||
-webkit-mask-image: linear-gradient(270deg, transparent 0%, black 50%, transparent 100%);
|
||||
mask-image: linear-gradient(270deg, transparent 0%, black 50%, transparent 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** Tile View */
|
||||
.package-list.tiles {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||||
grid-auto-rows: max-content;
|
||||
grid-gap: 1rem;
|
||||
.package {
|
||||
height: 68px;
|
||||
background: var(--color-cool-5);
|
||||
.package-title {
|
||||
margin: 0;
|
||||
padding: 0.5rem;
|
||||
text-align: left;
|
||||
font-size: var(--font-size-16);
|
||||
}
|
||||
.tags.left {
|
||||
max-width: 25%;
|
||||
}
|
||||
.tags.right {
|
||||
flex-wrap: nowrap;
|
||||
overflow: hidden;
|
||||
max-width: 75%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** Details View */
|
||||
.package-list.details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
.package {
|
||||
flex: 0 0 180px;
|
||||
height: 180px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0;
|
||||
.package-thumbnail {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 0 0 320px;
|
||||
height: 100%;
|
||||
border-right: 1px solid var(--color-cool-4);
|
||||
}
|
||||
.package-content {
|
||||
flex: 1;
|
||||
gap: 0.5rem;
|
||||
height: 100%;
|
||||
font-size: var(--font-size-14);
|
||||
}
|
||||
.package-description {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
.package-footer {
|
||||
position: relative;
|
||||
flex: 0 0 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// All View Modes
|
||||
.package-list {
|
||||
height: 100%;
|
||||
min-height: 400px;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0.25rem 0 1rem; // allow for lock icon overflow
|
||||
&.empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Featured Play Button
|
||||
.package-list.gallery,
|
||||
.package-list.details {
|
||||
.play {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
visibility: hidden;
|
||||
font-size: var(--font-size-48);
|
||||
color: var(--color-light-5);
|
||||
filter: drop-shadow(0 0 4px black);
|
||||
transition: 0.5s;
|
||||
&:hover {
|
||||
color: var(--color-light-1);
|
||||
text-shadow: 0 0 8px var(--color-warm-1);
|
||||
}
|
||||
}
|
||||
.package:hover .play {
|
||||
visibility: visible;
|
||||
}
|
||||
.package.loading .play {
|
||||
visibility: visible;
|
||||
color: var(--color-light-1);
|
||||
text-shadow: 0 0 8px var(--color-warm-1);
|
||||
}
|
||||
}
|
||||
|
||||
// Progress Bar
|
||||
#progress {
|
||||
--color-progress-background: #5D49FF;
|
||||
--color-progress-border: #B2C3FF;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 1rem;
|
||||
gap: 1rem;
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
flex: 0 0 16px;
|
||||
width: 100%;
|
||||
background: black;
|
||||
border: 1px solid var(--color-cool-3);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.bar {
|
||||
position: relative;
|
||||
height: 10px;
|
||||
margin: 2px;
|
||||
display: block;
|
||||
background: var(--color-progress-background);
|
||||
border: 1px solid var(--color-progress-border);
|
||||
border-radius: 2px;
|
||||
max-width: calc(100% - 4px);
|
||||
transition: 0.25s;
|
||||
|
||||
line-height: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.pct {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
left: -3px;
|
||||
padding: 1px 5px;
|
||||
color: var(--color-light-1);
|
||||
text-shadow: 1px 1px 4px black;
|
||||
background: var(--color-cool-5-75);
|
||||
border: 1px solid black;
|
||||
border-radius: 2px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
a.launch-tour {
|
||||
color: var(--color-warm-1);
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** Tags */
|
||||
.tags .tag {
|
||||
flex: none;
|
||||
height: 24px;
|
||||
padding: 0 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
background: var(--color-cool-4);
|
||||
border: 1px solid var(--color-cool-3);
|
||||
border-radius: 2px;
|
||||
font-size: var(--font-size-12);
|
||||
color: var(--color-light-2);
|
||||
opacity: 0.75;
|
||||
|
||||
&.error {
|
||||
color: var(--color-light-2);
|
||||
background: var(--color-level-error-bg);
|
||||
border-color: var(--color-level-error-border);
|
||||
}
|
||||
&.warning {
|
||||
color: var(--color-light-2);
|
||||
background: var(--color-level-warning-bg);
|
||||
border-color: var(--color-level-warning-border);
|
||||
}
|
||||
&.success {
|
||||
color: var(--color-light-2);
|
||||
background: var(--color-level-success-bg);
|
||||
border-color: var(--color-level-success-border);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Setup Package Warnings */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
#setup-warnings {
|
||||
#setup-warnings-packages {
|
||||
gap: 2rem;
|
||||
section.flexcol {
|
||||
gap: 2rem;
|
||||
}
|
||||
h2.divider {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.package {
|
||||
gap: 1rem;
|
||||
header {
|
||||
justify-content: flex-end;
|
||||
gap: 1rem;
|
||||
h4 {
|
||||
flex: 3;
|
||||
font-size: var(--font-size-20);
|
||||
margin: 0;
|
||||
}
|
||||
.reference {
|
||||
flex: 1;
|
||||
}
|
||||
button {
|
||||
flex: none;
|
||||
padding: .25rem .5rem;
|
||||
}
|
||||
}
|
||||
code {
|
||||
max-height: 250px;
|
||||
overflow: auto;
|
||||
white-space: pre;
|
||||
border: 2px solid;
|
||||
&.warnings {
|
||||
border-color: var(--color-level-warning);
|
||||
}
|
||||
&.errors {
|
||||
border-color: var(--color-level-error);
|
||||
}
|
||||
}
|
||||
.control {
|
||||
flex: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Application Configuration */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
#setup-configuration {
|
||||
.form-group.ssl {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.form-group.highlight {
|
||||
label {
|
||||
&::after {
|
||||
font-family: var(--font-awesome);
|
||||
font-weight: 900;
|
||||
margin-left: 0.5rem;
|
||||
content: "\f071";
|
||||
color: var(--color-level-warning);
|
||||
}
|
||||
}
|
||||
p.hint {
|
||||
color: var(--color-level-warning);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Miscellaneous */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
#confirm-code {
|
||||
margin: 1rem 0;
|
||||
span {
|
||||
display: block;
|
||||
font-size: var(--font-size-24);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
#delete-confirm {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Updated Table
|
||||
.updated-packages {
|
||||
margin: 0;
|
||||
.header > div {
|
||||
line-height: 1.5;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid var(--color-cool-4);
|
||||
font-size: 1.1em;
|
||||
}
|
||||
:is(.header, .result) > div {
|
||||
padding: .5rem 1rem;
|
||||
}
|
||||
.package { flex: 0 0 200px; }
|
||||
.action {
|
||||
flex: 0 0 110px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.description { overflow-wrap: anywhere; }
|
||||
.warning {
|
||||
color: yellow;
|
||||
> i::before { content: "\f071"; }
|
||||
}
|
||||
.error {
|
||||
color: red;
|
||||
> i::before { content: "\f06a"; }
|
||||
}
|
||||
.success {
|
||||
color: limegreen;
|
||||
> i::before { content: "\f05a"; }
|
||||
}
|
||||
}
|
||||
|
||||
// Dependencies Dialog
|
||||
.dependencies-info {
|
||||
align-items: unset;
|
||||
|
||||
> .automatic {
|
||||
border-right: 2px var(--color-cool-4) solid;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
> .manual {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.hint {
|
||||
line-height: 1rem;
|
||||
color: var(--color-light-5);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Backups */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
#backup-manager {
|
||||
.categories footer {
|
||||
margin-top: auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.backup-list {
|
||||
form { gap: 1rem; }
|
||||
}
|
||||
|
||||
#create-backup {
|
||||
font-size: var(--font-size-14);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
> input { top: -8px; }
|
||||
}
|
||||
|
||||
.snapshot-dialog {
|
||||
.disk-space {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Compatibility Checker */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
#compatibility-checker aside {
|
||||
height: 100%;
|
||||
flex: 0 0 220px;
|
||||
padding-right: 1rem;
|
||||
border-right: 1px solid var(--color-cool-4);
|
||||
|
||||
nav.categories {
|
||||
height: unset;
|
||||
flex: unset;
|
||||
padding-right: unset;
|
||||
border-right: unset;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.summary {
|
||||
flex: none;
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
font-size: var(--font-size-14);
|
||||
|
||||
> li {
|
||||
&.understated { opacity: .75; }
|
||||
> i { margin-right: .375rem; }
|
||||
&.success > i { color: var(--color-level-success); }
|
||||
&.warning > i { color: var(--color-level-warning); }
|
||||
&.error > i { color: var(--color-level-error); }
|
||||
&.neutral > i { color: var(--color-cool-3); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Software Update View */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
body.update {
|
||||
--max-width: 960px;
|
||||
|
||||
#update-progress {
|
||||
--color-progress-background: #5D49FF;
|
||||
--color-progress-border: #B2C3FF;
|
||||
|
||||
display: none;
|
||||
flex: 0 0 16px;
|
||||
width: 100%;
|
||||
background: black;
|
||||
border: 1px solid var(--color-cool-3);
|
||||
border-radius: 4px;
|
||||
|
||||
.bar {
|
||||
position: relative;
|
||||
height: 10px;
|
||||
margin: 2px;
|
||||
display: block;
|
||||
background: var(--color-progress-background);
|
||||
border: 1px solid var(--color-progress-border);
|
||||
border-radius: 2px;
|
||||
max-width: calc(100% - 4px);
|
||||
transition: 0.25s;
|
||||
|
||||
line-height: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.pct {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
right: -3px;
|
||||
padding: 1px 5px;
|
||||
color: var(--color-light-1);
|
||||
text-shadow: 1px 1px 4px black;
|
||||
background: var(--color-cool-5-75);
|
||||
border: 1px solid black;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#update-notes {
|
||||
max-height: 80vh;
|
||||
article {
|
||||
padding-right: 0.75rem;
|
||||
margin-right: -0.75rem;
|
||||
overflow: hidden auto;
|
||||
}
|
||||
footer {
|
||||
margin-top: 1rem;
|
||||
border-top: 1px solid var(--color-cool-4);
|
||||
.buttons { gap: .5rem; }
|
||||
}
|
||||
button {
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#module-create {
|
||||
.tabs {
|
||||
margin: 0 -1.5rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 2px ridge var(--color-cool-4);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user