:target {
|
outline: none!important;
|
padding: 0!important;
|
}
|
.dashboard > header {
|
justify-content: flex-end;
|
}
|
.dashboard > header img {
|
width: var(--btn);
|
}
|
.dashboard h1:first-of-type {
|
margin-top: 4rem!important;
|
}
|
nav.dashboard-nav,
|
nav.dashboard-nav ul {
|
--dir: row;
|
}
|
nav.dashboard-nav ul {
|
touch-action: pan-x;
|
overflow: auto hidden;
|
}
|
main > footer {
|
/*max-width: 100%!important;*/
|
/*position: fixed;*/
|
/*z-index: var(--z-7);*/
|
/*bottom: 0;*/
|
/*left: 0;*/
|
/*right: 0;*/
|
/*width: 100%;*/
|
/*margin: 4rem 0 0 0!important;*/
|
/*height: var(--btn);*/
|
/*padding: 0!important;*/
|
/*background-color: var(--base);*/
|
/*box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);*/
|
padding: 0;
|
}
|
main>* {
|
max-width: min(768px, 90vw)!important;
|
margin: 0 auto!important;
|
}
|
main h1 {
|
margin: 0!important;
|
font-size: var(--txt-large);
|
}
|
|
.item-grid .item {
|
position: relative;
|
}
|
img {
|
width: 100%;
|
height: auto;
|
aspect-ratio: 1;
|
object-fit: cover;
|
}
|
|
.replace {
|
margin: 0 auto 0 var(--btn_) !important;
|
}
|
/********************************************
|
GRID VIEW
|
********************************************/
|
.item-grid {
|
margin-bottom: 4rem;
|
}
|
.item-grid:has(.select-item:checked) .item {
|
padding: .75rem;
|
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 {
|
bottom: 0;
|
right: 0;
|
}
|
.item-actions button {
|
min-height: 0;
|
width: var(--chipchip);
|
height: var(--chipchip);
|
background-color: rgba(var(--base-rgb), var(--op-45));
|
}
|
.item-actions button:hover {
|
background-color: var(--base);
|
}
|
|
.list-view h3,
|
.list-view p {
|
margin: 0!important;
|
}
|
|
@media (min-width: 768px) {
|
.grid-view {
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
}
|
}
|
@media (max-width: 768px) {
|
.bulk-controls.bulk-controls.nowrap {
|
--wrap: wrap;
|
}
|
}
|
.bulk-controls {
|
margin: 1rem 0;
|
}
|
.bulk-controls .selected-count {
|
font-weight: normal;
|
font-size: var(--txt-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(--trans-base), opacity var(--trans-base), border var(--trans-base), padding var(--trans-base);
|
}
|
.selected label:has(:checked) {
|
border-color: var(--action-0);
|
padding: 0;
|
opacity: 1;
|
filter: none;
|
transition: filter var(--trans-base), opacity var(--trans-base), border var(--trans-base), padding var(--trans-base);
|
}
|
/******************************************************
|
TABLE VIEW
|
******************************************************/
|
form.table label.select-item,
|
form.table img {
|
width: 6rem;
|
height: 6rem;
|
}
|
form.table .item-grid.preview {
|
margin: 0;
|
}
|
|
td p {
|
width: max-content;
|
}
|
|
/* Dragging state */
|
.timeline-point.is-dragging {
|
opacity: 0.4;
|
position: relative;
|
}
|
|
/* Drop indicators with gap */
|
.timeline-point.drop-above {
|
position: relative;
|
}
|
|
.timeline-point.drop-above::before {
|
content: '';
|
position: absolute;
|
top: -4px;
|
left: 0;
|
right: 0;
|
height: 8px;
|
background: var(--action-0);
|
border-radius: 4px;
|
z-index: 10;
|
animation: pulse 0.6s ease-in-out infinite;
|
}
|
|
.timeline-point.drop-below {
|
position: relative;
|
}
|
|
.timeline-point.drop-below::after {
|
content: '';
|
position: absolute;
|
bottom: -4px;
|
left: 0;
|
right: 0;
|
height: 8px;
|
background: var(--action-0);
|
border-radius: 4px;
|
z-index: 10;
|
animation: pulse 0.6s ease-in-out infinite;
|
}
|
|
@keyframes pulse {
|
0%, 100% {
|
opacity: 0.6;
|
transform: scaleY(1);
|
}
|
50% {
|
opacity: 1;
|
transform: scaleY(1.2);
|
}
|
}
|
|
/* Make space for the indicator */
|
.timeline-point.drop-above {
|
margin-top: 8px;
|
transition: margin-top 0.2s ease;
|
}
|
|
.timeline-point.drop-below {
|
margin-bottom: 8px;
|
transition: margin-bottom 0.2s ease;
|
}
|
|
/* Drag handle styling */
|
.drag-handle {
|
cursor: grab;
|
padding: 0.5rem;
|
background: transparent;
|
border: none;
|
opacity: 0.6;
|
transition: opacity 0.2s ease;
|
}
|
|
.drag-handle:hover {
|
opacity: 1;
|
}
|
|
.drag-handle:active,
|
.is-dragging .drag-handle {
|
cursor: grabbing;
|
}
|
|
/* Preview styling */
|
.drag-preview .drag-handle {
|
pointer-events: none;
|
}
|
|
/******************************************************
|
FILTERS
|
******************************************************/
|
.all-filters {
|
margin: 0;
|
padding: 1rem 0;
|
border-top: 1px solid var(--base-200);
|
border-bottom: 1px solid var(--base-200);
|
--gap: 0;
|
}
|
.all-filters .row {
|
--justify: flex-start;
|
}
|
.all-filters[open] {
|
--gap: .5rem;
|
}
|
.all-filters summary {
|
width: 100%;
|
}
|
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(--txt-small);
|
font-weight: 900;
|
width: 15vw;
|
display: inline-flex;
|
align-items: center;
|
padding-right: 2rem;
|
}
|
@media (max-width: 767px) {
|
.all-filters > .row {
|
padding: .5rem 0;
|
}
|
.all-filters span.label {
|
padding-top: .5rem;
|
width: 100%;
|
border-top: 1px solid var(--base-200);
|
}
|
}
|
.controls .icon {
|
--w: 1.4rem;
|
}
|
.all-filters .btn + label,
|
.all-filters button {
|
height: var(--chipchip);
|
padding: .5rem!important;
|
min-width: 0;
|
min-height: var(--chipchip);
|
width: var(--chipchip);
|
}
|
.all-filters .btn + label:hover,
|
.all-filters .btn + label:focus,
|
.all-filters button:hover,
|
.all-filters button:focus {
|
background-color: transparent;
|
color: var(--action-0);
|
border-color: var(--action-0);
|
}
|
/******************************************************
|
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(--trans-base), width var(--trans-base), padding var(--trans-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(--trans-base), width var(--trans-base), padding var(--trans-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;
|
}
|
|
/**********************************************************
|
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(--txt-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.dash h2 {
|
text-transform: none;
|
font-size: var(--txt-large);
|
}
|
.dashboard.dash .replace > ul {
|
display: flex;
|
list-style: none;
|
align-items: flex-start;
|
justify-content: flex-start;
|
flex-wrap: wrap;
|
gap: .5rem;
|
}
|
nav.tabs.tabs {
|
bottom: 0;
|
left: 0;
|
right: var(--btn);
|
}
|
.dashboard.settings nav.tabs.tabs {
|
--height: 3.5rem;
|
--x: var(--btn_);
|
position: fixed;
|
bottom: var(--btn);
|
left: var(--x);
|
right: var(--x);
|
z-index:99;
|
width: calc(100% - var(--x) - var(--x));
|
background-color: var(--base);
|
}
|
.jvb-seo-admin nav.tabs.tabs {
|
position: sticky;
|
padding-bottom: 0;
|
bottom: unset;
|
left: 0;
|
right: 0;
|
top: var(--btn);
|
}
|
.jvb-seo-admin nav.tabs button {
|
border: none;
|
margin: 0 .125rem;
|
background-color: var(--base-200);
|
box-shadow:var(--shdw-none);
|
}
|
.jvb-seo-admin nav.tabs button.active {
|
background-color: var(--base);
|
color: var(--action-0);
|
}
|
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(--radius-outer);
|
padding: 1rem;
|
position: relative;
|
transition: all var(--trans-base);
|
box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
|
}
|
.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(--txt-medium);
|
margin: 0;
|
}
|
.integration .meta {
|
margin-bottom: 1rem;
|
text-align: right;
|
color: var(--contrast-200);
|
font-size: var(--txt-small);
|
}
|
|
.integration .setup {
|
font-size: var(--txt-small);
|
font-weight: bold;
|
text-transform: uppercase;
|
}
|
.integration .setup .indicator {
|
font-size: var(--txt-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;
|
}
|
|
.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)}
|
}
|
|
.location.field {
|
width: 80vw;
|
}
|
.location.field > p {
|
text-align: center;
|
}
|
.location.field > p + p {
|
margin: 0 .5rem 0 0;
|
}
|
.location.field .location-map {
|
height: 20vh;
|
}
|
.location.field .location-links {
|
padding: .5rem 0;
|
display: flex;
|
justify-content: space-evenly;
|
}
|
|
.item-grid .item,
|
.field.upload [data-upload-id] {
|
touch-action: none;
|
}
|
|
.empty-state {
|
grid-column: 1/-1;
|
padding: 1rem 10vw;
|
margin: 0 10vw;
|
border-radius: var(--radius-outer);
|
background-color: var(--base-100);
|
}
|
|
/****************** TEST ***/
|
.jvb-oauth-connect {
|
position: relative;
|
transition: opacity 0.2s;
|
}
|
|
.jvb-oauth-connect.loading {
|
opacity: 0.6;
|
pointer-events: none;
|
}
|
|
.jvb-oauth-connect.loading::after {
|
content: '';
|
position: absolute;
|
right: -30px;
|
top: 50%;
|
transform: translateY(-50%);
|
width: 16px;
|
height: 16px;
|
border: 2px solid #ccc;
|
border-top-color: #0073aa;
|
border-radius: 50%;
|
animation: oauth-spin 0.8s linear infinite;
|
}
|
|
@keyframes oauth-spin {
|
to { transform: translateY(-50%) rotate(360deg); }
|
}
|
|
/* Status Messages */
|
.integration-status-message {
|
padding: 12px 16px;
|
margin: 16px 0;
|
border-radius: 4px;
|
display: none;
|
font-size: 14px;
|
line-height: 1.5;
|
}
|
|
.integration-status-message.success {
|
display: block;
|
background: #d4edda;
|
color: #155724;
|
border-left: 4px solid #28a745;
|
}
|
|
.integration-status-message.error {
|
display: block;
|
background: #f8d7da;
|
color: #721c24;
|
border-left: 4px solid #dc3545;
|
}
|
|
.integration-status-message.info {
|
display: block;
|
background: #d1ecf1;
|
color: #0c5460;
|
border-left: 4px solid #17a2b8;
|
}
|
|
/* Connection Status Indicator */
|
.connection-status {
|
display: inline-flex;
|
align-items: center;
|
gap: 8px;
|
padding: 6px 12px;
|
border-radius: 4px;
|
font-size: 13px;
|
font-weight: 500;
|
}
|
|
.connection-status.connected {
|
background: #d4edda;
|
color: #155724;
|
}
|
|
.connection-status.disconnected {
|
background: #f8d7da;
|
color: #721c24;
|
}
|
|
.status-indicator {
|
font-size: 10px;
|
line-height: 1;
|
}
|
|
.connection-status.connected .status-indicator {
|
color: #28a745;
|
}
|
|
.connection-status.disconnected .status-indicator {
|
color: #dc3545;
|
}
|
|
|
|
/*******************************************
|
REFERRAL
|
*/
|
.referral-dashboard {
|
max-width: var(--wide);
|
}
|
.card {
|
background-color: var(--base-100);
|
padding: 30px;
|
border-radius: var(--radius-outer);
|
text-align: center;
|
margin-bottom: 2rem;
|
}
|
|
.dashboard-page.referral {
|
text-align: center;
|
}
|
.referral-dashboard .empty-state {
|
padding: 3rem 7vw;
|
}
|
.referral-dashboard .empty-state h3 {
|
margin-top: 0;
|
}
|
.referral-dashboard .empty-state h3 .icon:first-of-type {
|
margin-right: 1rem;
|
}
|
.referral-dashboard .empty-state h3 .icon:last-of-type {
|
margin-left: 1rem;
|
}
|
|
.item-grid.stats .card {
|
border: 1px solid var(--base);
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
flex-direction: column;
|
}
|
.item-grid.stats .card.highlight {
|
box-shadow: var(--contrast-rgb) var(--shadow);
|
background-color: var(--action-200);
|
color: var(--action-contrast);
|
grid-column: 1/-1;
|
margin: 0 4rem 30px;
|
aspect-ratio: unset;
|
}
|
.card h4 {
|
font-size: var(--medium);
|
color: var(--contrast-200);
|
font-weight: var(--fw-b-bold);
|
margin: 0 0 .5rem;
|
}
|
.card span {
|
color: var(--action-0);
|
font-weight: var(--fw-b-bold);
|
font-size: var(--txt-xx-large);
|
}
|
.card.highlight span {
|
color: var(--action-contrast);
|
}
|
|
|
/*.referral-dashboard {*/
|
/* max-width: 1200px;*/
|
/* margin: 0 auto;*/
|
/*}*/
|
/*.referral-header {*/
|
/* text-align: center;*/
|
/* margin-bottom: 30px;*/
|
/*}*/
|
/*.referral-code-card {*/
|
/* background: var(--base-100);*/
|
/* padding: 30px;*/
|
/* border-radius: 8px;*/
|
/* text-align: center;*/
|
/* margin-bottom: 30px;*/
|
/*}*/
|
/*.code-display {*/
|
/* display: flex;*/
|
/* align-items: center;*/
|
/* justify-content: center;*/
|
/* gap: 15px;*/
|
/* margin: 20px 0;*/
|
/*}*/
|
/*.code-display .code {*/
|
/* font-size: 32px;*/
|
/* font-weight: bold;*/
|
/* letter-spacing: 2px;*/
|
/* color: var(--action-0);*/
|
/* user-select: all;*/
|
/*}*/
|
/*.stats-grid {*/
|
/* display: grid;*/
|
/* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));*/
|
/* gap: 20px;*/
|
/* margin-bottom: 30px;*/
|
/*}*/
|
/*.stat-card {*/
|
/* background: white;*/
|
/* padding: 25px;*/
|
/* border-radius: 8px;*/
|
/* border: 1px solid #ddd;*/
|
/* text-align: center;*/
|
/*}*/
|
/*.stat-card.highlight {*/
|
/* background: #d4edda;*/
|
/* border-color: #c3e6cb;*/
|
/*}*/
|
/*.stat-card h4 {*/
|
/* margin: 0 0 10px 0;*/
|
/* color: #666;*/
|
/* font-size: 14px;*/
|
/* font-weight: 600;*/
|
/* text-transform: uppercase;*/
|
/*}*/
|
/*.stat-number {*/
|
/* font-size: 36px;*/
|
/* font-weight: bold;*/
|
/* color: #2271b1;*/
|
/*}*/
|
/*.referrals-list-card {*/
|
/* background: white;*/
|
/* padding: 25px;*/
|
/* border-radius: 8px;*/
|
/* border: 1px solid #ddd;*/
|
/*}*/
|
/*.referrals-table {*/
|
/* width: 100%;*/
|
/* border-collapse: collapse;*/
|
/* margin-top: 15px;*/
|
/*}*/
|
/*.referrals-table th,*/
|
/*.referrals-table td {*/
|
/* padding: 12px;*/
|
/* text-align: left;*/
|
/* border-bottom: 1px solid #eee;*/
|
/*}*/
|
/*.referrals-table th {*/
|
/* background: #f5f5f5;*/
|
/* font-weight: 600;*/
|
/*}*/
|
/*.status-badge {*/
|
/* padding: 4px 12px;*/
|
/* border-radius: 12px;*/
|
/* font-size: 12px;*/
|
/* font-weight: 500;*/
|
/*}*/
|
/*.status-badge.pending {*/
|
/* background: #fff3cd;*/
|
/* color: #856404;*/
|
/*}*/
|
/*.status-badge.consulted {*/
|
/* background: #d1ecf1;*/
|
/* color: #0c5460;*/
|
/*}*/
|
/*.status-badge.treated {*/
|
/* background: #d4edda;*/
|
/* color: #155724;*/
|
/*}*/
|
|
nav.sidebar {
|
--wrap: nowrap;
|
position: fixed;
|
top: var(--btn);
|
bottom: 0;
|
left: 0;
|
z-index: var(--z-4);
|
height: calc(100% - var(--btn));
|
background-color: var(--base);
|
box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
|
width: var(--btn);
|
transition: var(--trans-size);
|
overflow: hidden auto;
|
}
|
nav.sidebar .icon {
|
--w: var(--chip_);
|
width: var(--btn);
|
transition: var(--trans-size), margin var(--trans-base);
|
}
|
nav.sidebar.open {
|
width: fit-content;
|
max-width: 100%;
|
}
|
nav.sidebar.open .icon {
|
--w: var(--chip);
|
margin: .75rem;
|
width: var(--w);
|
}
|
|
nav.sidebar ul {
|
height: max-content;
|
width: 100%;
|
--gap: 0;
|
}
|
nav.sidebar .title {
|
display: block;
|
}
|
/*nav.sidebar .title,*/
|
/*nav.sidebar .toggle {*/
|
/* transition: var(--trans-size);*/
|
/*}*/
|
nav.sidebar .toggle {
|
width: var(--btn);
|
height: var(--chipchip);
|
box-shadow: none;
|
background-color: transparent;
|
min-height: 0;
|
}
|
nav.sidebar .toggle:hover,
|
nav.sidebar .toggle:focus {
|
background-color:var(--action-0);
|
color: var(--action-contrast);
|
}
|
|
/*nav.sidebar:not(.open) .title,*/
|
/*nav.sidebar:not(.open) .toggle:not(.main) {*/
|
/* position: absolute;*/
|
/* left: var(--offScreen);*/
|
/* width: 0;*/
|
/* height: 0;*/
|
/* max-width: 0;*/
|
/* max-height: 0;*/
|
/*}*/
|
nav.sidebar .toggle.main {
|
position: fixed;
|
left: unset;
|
bottom: 0;
|
right: 0;
|
width: var(--btn);
|
height: var(--btn);
|
z-index: var(--z-8);
|
box-shadow: rgba(var(--base-rgb), var(--op-45)) var(--shdw);
|
}
|
|
nav.sidebar .title {
|
white-space: nowrap;
|
}
|
|
nav.sidebar li {
|
--justify: center;
|
flex-wrap: nowrap;
|
overflow: hidden;
|
align-items: flex-start;
|
}
|
nav.sidebar.open li > div {
|
width: 100%;
|
padding-right: var(--btn);
|
}
|
nav.sidebar.open li.has-submenu > div {
|
padding-right: 0;
|
}
|
nav.sidebar.open li.has-submenu > ul {
|
padding-left: var(--chip);
|
}
|
|
nav.sidebar .a {
|
color: var(--contrast-200);
|
}
|
|
nav.sidebar a,
|
nav.sidebar .a {
|
height: var(--chipchip);
|
/*width: var(--btn);*/
|
display: flex;
|
justify-content:center;
|
align-items:center;
|
transition: none;
|
padding-left: 0;
|
}
|
nav.sidebar.open a,
|
nav.sidebar.open .a {
|
width: 100%;
|
justify-content: flex-start;
|
}
|
|
nav.sidebar .has-submenu ul {
|
max-height: 0;
|
height: 0;
|
overflow:hidden;
|
transition: var(--trans-size);
|
}
|
nav.sidebar .has-submenu.open > ul {
|
height: 100%;
|
max-height: fit-content;
|
}
|
|
|
|
header .title,
|
header .title a {
|
height: var(--btn);
|
margin: 0;
|
display:block;
|
}
|
header .title {
|
margin-left: var(--btn);
|
}
|
header .title a {
|
width: var(--btn);
|
}
|
