| | |
| | | outline: none!important; |
| | | padding: 0!important; |
| | | } |
| | | |
| | | .dashboard > header { |
| | | justify-content: flex-end; |
| | | } |
| | | .dashboard > header img { |
| | | width: var(--height); |
| | | } |
| | | .dashboard h1:first-of-type { |
| | | margin-top: 0!important; |
| | | margin-top: 4rem!important; |
| | | } |
| | | main > footer { |
| | | max-width: 100%!important; |
| | |
| | | /******************************************** |
| | | GRID VIEW |
| | | ********************************************/ |
| | | .item-grid { |
| | | margin-bottom: 4rem; |
| | | } |
| | | .item-grid:has(.select-item:checked) .item { |
| | | padding: .75rem; |
| | | opacity : .8; |
| | |
| | | .controls .icon { |
| | | --w: 1.4rem; |
| | | } |
| | | .all-filters .btn + label, |
| | | .all-filters button { |
| | | height: fit-content; |
| | | padding: .5rem!important; |
| | | min-width: 0; |
| | | min-height: 0; |
| | | } |
| | | .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 |
| | | ******************************************************/ |
| | |
| | | .tab-content h2 { |
| | | display: none; |
| | | } |
| | | /*********************************************************** |
| | | CREATE ITEM |
| | | ***********************************************************/ |
| | | .create-item { |
| | | left: auto!important; |
| | | right: 1rem; |
| | | bottom: var(--offHeight)!important; |
| | | } |
| | | |
| | | /********************************************************** |
| | | HOURS |
| | | **********************************************************/ |
| | |
| | | .dash [type=submit] { |
| | | width: 90%; |
| | | } |
| | | .dashboard.dash h2 { |
| | | text-transform: none; |
| | | font-size: var(--large); |
| | | } |
| | | .dashboard.dash .replace > ul { |
| | | display: flex; |
| | | list-style: none; |
| | | align-items: flex-start; |
| | | justify-content: flex-start; |
| | | flex-wrap: wrap; |
| | | gap: .5rem; |
| | | } |
| | | .dashboard.settings nav.tabs { |
| | | --height: 3.5rem; |
| | | --x: var(--offHeight); |
| | |
| | | .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(--outerRadius); |
| | | 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; |
| | | } |
| | | |