:target {
|
outline: none!important;
|
padding: 0!important;
|
}
|
|
.dashboard h1:first-of-type {
|
margin-top: 0!important;
|
}
|
main > footer {
|
max-width: 100%!important;
|
position: fixed;
|
z-index: var(--z-top);
|
bottom: 0;
|
left: 0;
|
right: 0;
|
width: 100%;
|
margin: 4rem 0 0 0!important;
|
height: var(--height);
|
padding: 0!important;
|
background-color: var(--base);
|
box-shadow: var(--shadow);
|
}
|
main>* {
|
max-width: min(768px, 90vw)!important;
|
margin: 0 auto!important;
|
}
|
main h1 {
|
margin: 0!important;
|
font-size: var(--large);
|
}
|
|
.item-grid .item {
|
position: relative;
|
}
|
img {
|
width: 100%;
|
height: auto;
|
aspect-ratio: 1;
|
object-fit: cover;
|
}
|
|
.replace {
|
margin-bottom: var(--offHeight)!important;
|
}
|
/********************************************
|
GRID VIEW
|
********************************************/
|
.item-grid:has(.select-item:checked) .item {
|
padding: 2rem;
|
opacity : .8;
|
filter: var(--filter);
|
}
|
.item-grid .item:has(.select-item:checked) {
|
padding: .5rem;
|
filter: none;
|
opacity: 1;
|
background-color: var(--action-0);
|
}
|
|
.grid-view .item > input[type=checkbox]:not(.label-button) + label {
|
padding-left: 0;
|
margin: 0;
|
}
|
.grid-view .item > input[type=checkbox] + label::before {
|
transform: unset;
|
top: .5rem;
|
left: .5rem;
|
}
|
.grid-view .item > input[type=checkbox] + label::after {
|
top: .5rem;
|
left: .75rem;
|
transform: translateY(20%) rotate(45deg);
|
}
|
|
.grid-view .item .item-actions {
|
position: absolute;
|
bottom: 0;
|
right: 0;
|
}
|
|
.list-view h3,
|
.list-view p {
|
margin: 0!important;
|
}
|
|
@media (min-width: 768px) {
|
.grid-view {
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
}
|
.grid-view .item .item-actions {
|
bottom: unset;
|
top: 0;
|
}
|
}
|
.bulk-controls {
|
margin: 1rem 0;
|
}
|
.bulk-controls .selected-count {
|
font-weight: normal;
|
font-size: var(--small);
|
text-transform: none;
|
font-style: italic;
|
display: flex;
|
gap: .25rem;
|
margin-left: 2rem;
|
}
|
.selected-count::before {
|
content: '{';
|
}
|
.selected-count::after {
|
content: '}';
|
}
|
|
.bulk-edit-form .selected {
|
display: grid;
|
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
gap: 4px;
|
}
|
.selected label {
|
padding: .5rem;
|
opacity: .6;
|
filter: var(--filter);
|
border: 2px solid transparent;
|
transition: filter var(--transition-base), opacity var(--transition-base), border var(--transition-base), padding var(--transition-base);
|
}
|
.selected label:has(:checked) {
|
border-color: var(--action-0);
|
padding: 0;
|
opacity: 1;
|
filter: none;
|
transition: filter var(--transition-base), opacity var(--transition-base), border var(--transition-base), padding var(--transition-base);
|
}
|
/******************************************************
|
TABLE VIEW
|
******************************************************/
|
form.table img {
|
max-height: 4rem;
|
}
|
|
/******************************************************
|
FILTERS
|
******************************************************/
|
.all-filters {
|
margin: 2rem 0;
|
padding: 1rem 0;
|
border-top: 1px solid var(--base-200);
|
border-bottom: 1px solid var(--base-200);
|
}
|
details.uploader + .items-list .all-filters {
|
border-top: none;
|
}
|
.all-filters .filters{
|
width: 100%;
|
}
|
.filters.row.start,
|
.controls .radio-options {
|
--align: center;
|
--justify: flex-start;
|
--gap: .5rem;
|
}
|
.all-filters span.label {
|
text-transform: uppercase;
|
font-size: var(--small);
|
font-weight: 900;
|
width: 15vw;
|
display: inline-flex;
|
align-items: center;
|
padding-right: 2rem;
|
}
|
.controls .icon {
|
--w: 1.4rem;
|
}
|
/******************************************************
|
SEARCH
|
******************************************************/
|
|
.search-container:not(.open) input[type=search],
|
.search-container:not(.open) .clear-search {
|
transform: scaleX(0);
|
transform-origin: left;
|
width: 0;
|
padding: 0;
|
transition: transform var(--transition-base), width var(--transition-base), padding var(--transition-base);
|
}
|
.search-container button {
|
padding: .5rem;
|
}
|
.search-container .icon {
|
--w: 1.5rem;
|
}
|
.search-container.open input[type=search],
|
.search-container.open .clear-search {
|
transform: scaleX(1);
|
transform-origin: left;
|
transition: transform var(--transition-base), width var(--transition-base), padding var(--transition-base);
|
}
|
.all-filters > .search,
|
input[type=search],
|
.search-container {
|
width: 100%;
|
}
|
|
/***********************************************************
|
TABLE FIELDS
|
***********************************************************/
|
form.table textarea {
|
width: 250px;
|
padding: .5rem;
|
}
|
|
.multi-select summary {
|
--gap: 2rem;
|
padding-right: 2.5rem;
|
}
|
|
/************************************************************
|
TABS
|
************************************************************/
|
dialog.edit[open],
|
dialog.bulk-edit[open],
|
dialog.create[open] {
|
height: 85vh;
|
top: 5vh;
|
}
|
.tab-content h2 {
|
display: none;
|
}
|
/***********************************************************
|
CREATE ITEM
|
***********************************************************/
|
.create-item {
|
left: auto!important;
|
right: 1rem;
|
bottom: var(--offHeight)!important;
|
}
|
/**********************************************************
|
HOURS
|
**********************************************************/
|
.group-fields.hours .group-fields,
|
.group-fields.hours .group-fields .field {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
.group-fields.hours .group-fields {
|
padding: 1rem .5rem;
|
gap: 1rem;
|
}
|
.group-fields.hours .group-fields:nth-of-type(2n+1) {
|
background-color: var(--base);
|
}
|
.group-fields.hours .group-fields .field {
|
margin: 0;
|
}
|
|
.group-fields.hours .true-false {
|
flex: 1;
|
}
|
.group-fields.hours .time {
|
position: relative;
|
}
|
.group-fields.hours .time label {
|
margin: 0;
|
font-size: var(--small);
|
position: absolute;
|
top: -1rem;
|
left: 0;
|
color: var(--contrast-200);
|
}
|
/************************************************************
|
TODAY HOURS, specific to North'eh
|
************************************************************/
|
.today_hours {
|
width: min(500px, 90vw);
|
}
|
.today_hours .group-fields {
|
width: 100%;
|
padding: 0;
|
display: flex;
|
justify-content: center;
|
gap: .5rem;
|
}
|
@media (min-width: 768px) {
|
.today_hours .group-fields {
|
padding: 2rem;
|
}
|
}
|
.today_hours .field {
|
margin: 0;
|
}
|
.dash .true-false {
|
margin: 0;
|
}
|
.dash [type=submit] {
|
width: 90%;
|
}
|
.dashboard.settings nav.tabs {
|
--height: 3.5rem;
|
--x: var(--offHeight);
|
position: fixed;
|
bottom: var(--height);
|
left: var(--x);
|
right: var(--x);
|
z-index:99;
|
width: calc(100% - var(--x) - var(--x));
|
background-color: var(--base);
|
}
|
nav.integrations ul,
|
nav.integrations li,
|
nav.integrations a,
|
nav.integrations {
|
height: auto;
|
}
|
|
/***************************************
|
|
***************************************/
|
.replace {
|
overflow: hidden;
|
}
|
body.dash form#options {
|
display: flex;
|
flex-flow: column nowrap;
|
justify-content: center;
|
align-items: center;
|
}
|
|
/***************************************
|
INTEGRATIONS
|
***************************************/
|
.item-grid.integrations {
|
grid-template-columns: repeat(2, 1fr);
|
gap: 2rem;
|
}
|
.integration {
|
background: var(--base);
|
border: 2px solid var(--base-200);
|
border-radius: var(--outerRadius);
|
padding: 1rem;
|
position: relative;
|
transition: all var(--transition-base);
|
box-shadow: var(--shadow);
|
}
|
.integration.connected {
|
border-color: var(--success);
|
}
|
.integration.error,
|
.integration.disconnected {
|
border-color: var(--error);
|
}
|
.integration.hasChanges {
|
border-color: var(--warning);
|
}
|
.integration .header {
|
margin-bottom: .75rem;
|
padding-bottom: .75rem;
|
border-bottom: 2px solid var(--base-200);
|
}
|
.integration h3 {
|
letter-spacing: 1px;
|
font-size: var(--medium);
|
margin: 0;
|
}
|
.integration .meta {
|
margin-bottom: 1rem;
|
text-align: right;
|
color: var(--contrast-200);
|
font-size: var(--small);
|
}
|
|
.integration .setup {
|
font-size: var(--small);
|
font-weight: bold;
|
text-transform: uppercase;
|
}
|
.integration .setup .indicator {
|
font-size: var(--medium);
|
}
|
.integration .connected .indicator,
|
.integration .setup .connected {
|
color: var(--success);
|
}
|
.integration .disconnected .indicator,
|
.integration .setup .disconnected {
|
color: var(--error);
|
}
|
.integration.hasChanges .disconnected {
|
color: var(--warning);
|
}
|
|
.connection-status.connected {
|
background-color: var(--successBack);
|
color: var(--successText);
|
}
|
.connection-status.disconnected {
|
background-color: var(--errorBack);
|
color: var(--errorText);
|
}
|
|
.integration code {
|
display: inline-block;
|
width: 90%;
|
margin: 0 .5rem;
|
user-select: all;
|
padding: .75rem;
|
border: 2px solid var(--base);
|
background-color: var(--base-200);
|
word-break: break-all;
|
}
|
.integration details + details {
|
margin-top: 1rem;
|
}
|
.integration .actions {
|
margin-top: 1rem;
|
}
|
|
.hint {
|
line-height: 1.2;
|
font-style: italic;
|
font-size: var(--small);
|
}
|
|
.hasChanges button[data-action=save_credentials] {
|
border-color: var(--warning);
|
animation: pulse-color 1s infinite;
|
animation-delay: 1s;
|
}
|
|
.flash {
|
animation: flash .5s;
|
}
|
.flash.connected {
|
--b: var(--success);
|
}
|
.flash.disconnected {
|
--b: var(--error);
|
}
|
.flash.syncing {
|
--b: var(--success);
|
}
|
.flash.hasChanges,
|
.flash.error {
|
--b: var(--warning);
|
}
|
|
@keyframes flash {
|
0%, 100% {border-color: inherit}
|
50% {border-color: var(--b)}
|
}
|
