details.uploader .file-upload-container {
|
margin: 1rem 0;
|
max-width: 100%;
|
}
|
@media (min-width: 768px) {
|
details.uploader .file-upload-container {
|
margin: 1rem var(--mr) 1rem var(--ml);
|
max-width: var(--maxWidth);
|
}
|
}
|
|
.file-upload-wrapper {
|
border: 2px dashed var(--action-0);
|
border-radius: 4px;
|
padding: 2rem;
|
text-align: center;
|
transition: all .3s ease;
|
background: var(--action-rgb-subtle);
|
position: relative;
|
cursor: pointer;
|
}
|
.file-upload-wrapper h2 {
|
margin: 0!important;
|
font-size: var(--large);
|
}
|
|
.file-upload-wrapper:hover,
|
.dragover {
|
background: var(--action-rgb-subtle-hover);
|
border-color: var(--action-0)!important;
|
}
|
|
.file-upload-wrapper input[type="file"] {
|
position: absolute;
|
left: 0;
|
top: 0;
|
width: 100%;
|
height: 100%;
|
opacity: 0;
|
cursor: pointer;
|
}
|
|
.file-upload-text {
|
color: var(--contrast);
|
margin: 0;
|
font-family: var(--body);
|
}
|
|
.file-upload-text strong {
|
color: var(--action-0);
|
text-decoration: underline;
|
}
|
|
.field.image:has(.upload-item) .file-upload-container {
|
display: none;
|
}
|
|
.field.image {
|
position: relative;
|
}
|
.field.image:not(.uploading) .progress {
|
display: none;
|
}
|
.field.image .actions {
|
position: absolute;
|
top: 0;
|
right: 0;
|
}
|
|
dialog nav.tabs {
|
position: sticky;
|
top: 0;
|
background-color: var(--base-50);
|
z-index: var(--z-6);
|
box-shadow: var(--shadow-down);
|
margin-bottom: 2rem;
|
}
|
|
/************************************************************
|
QUILL
|
************************************************************/
|
.editor-container .ql-toolbar {
|
display: flex;
|
background-color: var(--base-50);
|
justify-content: flex-start;
|
flex-wrap: wrap;
|
padding: .25rem;
|
gap: .5rem 1rem;
|
border-top-left-radius: var(--innerRadius);
|
border-top-right-radius: var(--innerRadius);
|
border-bottom: 4px solid var(--base-50);
|
}
|
.ql-toolbar .ql-formats {
|
display: flex;
|
gap: .25rem;
|
}
|
.editor-container .ql-container {
|
--padding: 1rem;
|
background-color: var(--base);
|
border-bottom-left-radius: var(--innerRadius);
|
border-bottom-right-radius: var(--innerRadius);
|
height: fit-content;
|
padding: 2px;
|
border: 1px solid var(--base-200);
|
}
|
.editor-container .ql-container .ql-editor {
|
padding: var(--padding);
|
width: calc(100% - (var(--padding) * 2.5));
|
height: calc(100% - (var(--padding) * 2));
|
}
|
.ql-editor img {
|
max-width: 50%;
|
height: auto;
|
}
|
|
.ql-clipboard {
|
left: -100000px;
|
height: 1px;
|
overflow-y: hidden;
|
position: absolute;
|
top: 50%;
|
}
|
.ql-hidden {
|
display: none;
|
}
|
.ql-tooltip {
|
position: absolute;
|
transform: translateY(10px);
|
background-color: var(--base-100);
|
border: 1px solid var(--base);
|
box-shadow: 0px 0px 5px var(--overlay-heavy);
|
color: var(--contrast);
|
padding: 5px 12px;
|
white-space: nowrap;
|
}
|
|
/******************************************************
|
FIELDS
|
******************************************************/
|
[data-type=single] [for=select-item] {
|
display: none;
|
}
|
[data-type=single] .item-grid {
|
display: flex;
|
}
|
|
/******************************************************
|
REPEATER
|
******************************************************/
|
.repeater-row details summary::after {
|
margin-left: 0;
|
}
|
.repeater-row details summary button {
|
margin-left: auto;
|
}
|
