Spaces:
Sleeping
Sleeping
| /* Vedangsoft dev UI — extends style.css */ | |
| .dda-app { | |
| max-width: 1600px; | |
| margin: 0 auto; | |
| display: flex; | |
| align-items: flex-start; | |
| min-height: 100vh; | |
| } | |
| /* --- Left sidebar navigation --- */ | |
| .dda-sidebar-nav { | |
| position: sticky; | |
| top: 0; | |
| flex: 0 0 252px; | |
| width: 252px; | |
| height: 100vh; | |
| overflow-y: auto; | |
| overflow-x: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1.75rem; | |
| padding: 1.5rem 1.15rem; | |
| border-right: 1px solid var(--border); | |
| background: var(--bg-surface); | |
| transition: flex-basis var(--transition), width var(--transition); | |
| } | |
| .dda-sidebar-brand { display: flex; align-items: center; gap: 0.65rem; padding: 0 0.15rem; } | |
| .dda-sidebar-toggle { | |
| margin-left: auto; | |
| flex-shrink: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 28px; | |
| height: 28px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| background: transparent; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| } | |
| .dda-sidebar-toggle:hover { background: var(--bg-hover); color: var(--text); } | |
| /* Collapsed state: icon-only rail, like the LMS reference sidebar. */ | |
| .dda-sidebar-nav.collapsed { flex-basis: 72px; width: 72px; padding-left: 0.6rem; padding-right: 0.6rem; } | |
| .dda-sidebar-nav.collapsed .dda-sidebar-brand { justify-content: center; } | |
| .dda-sidebar-nav.collapsed .dda-sidebar-brand-text { display: none; } | |
| .dda-sidebar-nav.collapsed .dda-sidebar-toggle { margin-left: 0; } | |
| .dda-sidebar-nav.collapsed .dda-tab { justify-content: center; padding: 0.65rem; } | |
| .dda-sidebar-nav.collapsed .dda-tab span, | |
| .dda-sidebar-nav.collapsed .dda-sidebar-chevron, | |
| .dda-sidebar-nav.collapsed .dda-notify-btn span, | |
| .dda-sidebar-nav.collapsed .dda-notify-badge, | |
| .dda-sidebar-nav.collapsed .dda-user-wrap #dda-user-email { display: none; } | |
| .dda-sidebar-nav.collapsed .dda-sidebar-submenu { display: none; } | |
| .dda-sidebar-nav.collapsed .dda-notify-wrap, | |
| .dda-sidebar-nav.collapsed .dda-user-wrap { justify-content: center; } | |
| .dda-sidebar-brand > svg { flex-shrink: 0; color: var(--grad-start); } | |
| .dda-sidebar-brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } | |
| .dda-sidebar-brand-name { | |
| font-weight: 700; | |
| font-size: 1.02rem; | |
| background: var(--gradient); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .dda-sidebar-brand-sub { | |
| font-size: 0.72rem; | |
| color: var(--text-dim); | |
| display: flex; | |
| align-items: center; | |
| gap: 0.4rem; | |
| } | |
| .dda-tabs { display: flex; flex-direction: column; gap: 0.25rem; } | |
| .dda-tab { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.7rem; | |
| padding: 0.65rem 0.8rem; | |
| border: 1px solid transparent; | |
| border-radius: var(--radius-sm); | |
| background: transparent; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| font-size: 0.9rem; | |
| text-decoration: none; | |
| transition: all var(--transition); | |
| } | |
| .dda-tab svg { flex-shrink: 0; opacity: 0.85; } | |
| .dda-tab:hover { background: var(--bg-hover); color: var(--text); } | |
| .dda-tab.active { | |
| background: linear-gradient(135deg, rgba(46,51,197,0.10), rgba(207,32,64,0.07)); | |
| color: var(--grad-start); | |
| font-weight: 600; | |
| } | |
| .dda-tab.active svg { opacity: 1; } | |
| /* Collapsible sidebar group (e.g. "Configuration" > Roles & Users / App | |
| Modules / Menu Management) — native <details>/<summary>, no JS needed. */ | |
| .dda-sidebar-group { border: none; } | |
| .dda-sidebar-group > summary.dda-tab-group { | |
| list-style: none; | |
| justify-content: flex-start; | |
| } | |
| .dda-sidebar-group > summary.dda-tab-group::-webkit-details-marker { display: none; } | |
| .dda-sidebar-group > summary.dda-tab-group::marker { content: ""; } | |
| .dda-sidebar-chevron { margin-left: auto; flex-shrink: 0; opacity: 0.6; transition: transform var(--transition); } | |
| .dda-sidebar-group[open] > summary .dda-sidebar-chevron { transform: rotate(90deg); } | |
| .dda-sidebar-submenu { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.2rem; | |
| margin: 0.2rem 0 0.15rem 0.95rem; | |
| padding-left: 0.85rem; | |
| border-left: 1px solid var(--border); | |
| } | |
| .dda-subtab { padding: 0.5rem 0.7rem; font-size: 0.86rem; } | |
| .dda-sidebar-footer { | |
| margin-top: auto; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.6rem; | |
| padding-top: 1rem; | |
| border-top: 1px solid var(--border); | |
| } | |
| .dda-user-wrap { display: flex; align-items: center; gap: 0.55rem; font-size: 0.82rem; } | |
| .dda-user-avatar { | |
| flex-shrink: 0; | |
| width: 26px; | |
| height: 26px; | |
| border-radius: 50%; | |
| background: var(--gradient); | |
| color: #fff; | |
| font-size: 0.72rem; | |
| font-weight: 700; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .dda-user-wrap #dda-user-email { | |
| flex: 1 1 auto; | |
| min-width: 0; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| /* User menu — click the avatar/email row to reveal My Profile / Sign out. | |
| Native <details>/<summary>, same zero-JS pattern as the sidebar's | |
| "Configuration" group. */ | |
| .dda-user-menu { border: none; } | |
| .dda-user-menu > summary.dda-user-wrap { list-style: none; cursor: pointer; } | |
| .dda-user-menu > summary.dda-user-wrap::-webkit-details-marker { display: none; } | |
| .dda-user-menu > summary.dda-user-wrap::marker { content: ""; } | |
| .dda-user-menu-panel { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.15rem; | |
| margin-top: 0.5rem; | |
| padding-top: 0.5rem; | |
| border-top: 1px solid var(--border); | |
| } | |
| .dda-user-menu-link { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.55rem; | |
| padding: 0.5rem 0.6rem; | |
| border: none; | |
| border-radius: var(--radius-sm); | |
| background: transparent; | |
| color: var(--text-muted); | |
| font-size: 0.85rem; | |
| text-decoration: none; | |
| cursor: pointer; | |
| width: 100%; | |
| text-align: left; | |
| } | |
| .dda-user-menu-link:hover { background: var(--bg-hover); color: var(--text); } | |
| .dda-user-menu-link.active { color: var(--grad-start); font-weight: 600; } | |
| .dda-user-menu-danger { color: var(--danger); } | |
| .dda-user-menu-danger:hover { background: rgba(207, 32, 64, 0.08); color: var(--danger); } | |
| /* Collapsed rail: the panel can't render inline at 72px, so it escapes as a | |
| fixed-position flyout instead — same reasoning as the notification panel | |
| (overflow-x:hidden on the sidebar would otherwise clip it). */ | |
| .dda-sidebar-nav.collapsed .dda-user-menu-panel { | |
| position: fixed; | |
| left: 84px; | |
| bottom: 1.25rem; | |
| width: 190px; | |
| margin-top: 0; | |
| padding: 0.5rem; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| background: var(--bg-surface); | |
| box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); | |
| z-index: 30; | |
| } | |
| /* Main content column, to the right of the sidebar */ | |
| .dda-main-col { flex: 1 1 auto; min-width: 0; padding: 1.75rem 2rem 3rem; } | |
| .dda-hero { margin-bottom: 1.5rem; } | |
| .dda-hero h1 { margin-bottom: 0.35rem; } | |
| .dda-panel { display: none; } | |
| .dda-panel.active { display: block; } | |
| .dda-home-cards { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); | |
| gap: 1.1rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .dda-home-card { | |
| display: block; | |
| text-decoration: none; | |
| color: inherit; | |
| transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition); | |
| } | |
| .dda-home-card:hover { | |
| border-color: var(--grad-start); | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 28px rgba(46, 51, 197, 0.1); | |
| } | |
| .dda-home-card-icon { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 40px; | |
| height: 40px; | |
| border-radius: var(--radius-sm); | |
| background: linear-gradient(135deg, rgba(46,51,197,0.12), rgba(207,32,64,0.08)); | |
| color: var(--grad-start); | |
| margin-bottom: 0.75rem; | |
| } | |
| .dda-home-card h3 { margin-bottom: 0.35rem; } | |
| /* Collapse the sidebar into a horizontal top bar on narrow viewports */ | |
| @media (max-width: 900px) { | |
| .dda-app { flex-direction: column; } | |
| .dda-sidebar-nav { | |
| position: static; | |
| width: 100%; | |
| height: auto; | |
| flex-direction: row; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| border-right: none; | |
| border-bottom: 1px solid var(--border); | |
| gap: 1rem; | |
| } | |
| .dda-tabs { flex-direction: row; flex-wrap: wrap; } | |
| .dda-tab span { display: none; } | |
| .dda-tab { padding: 0.55rem; } | |
| .dda-sidebar-footer { | |
| margin-top: 0; | |
| margin-left: auto; | |
| flex-direction: row; | |
| align-items: center; | |
| border-top: none; | |
| padding-top: 0; | |
| } | |
| .dda-notify-wrap { width: auto; } | |
| .dda-notify-btn { width: auto; } | |
| .dda-notify-btn span { display: none; } | |
| .dda-user-wrap #dda-user-email { display: none; } | |
| .dda-main-col { padding: 1.25rem 1.25rem 2rem; } | |
| .dda-sidebar-toggle { display: none; } | |
| } | |
| .dda-layout { | |
| display: grid; | |
| grid-template-columns: minmax(220px, 280px) 1fr; | |
| gap: 1rem; | |
| align-items: start; | |
| } | |
| @media (max-width: 900px) { | |
| .dda-layout { grid-template-columns: 1fr; } | |
| } | |
| /* Library page: the upload form's fields flow into as few rows as fit | |
| (instead of a rigid 2-up grid that wraps to 3 rows) and the storage-path | |
| help text collapses behind <details> — together these keep the upload | |
| card short so the page reads as three compact sections, not four tall | |
| stacked cards. */ | |
| .dda-upload-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } | |
| /* Detect page: manual-mode pairs + library grid split into their own cards | |
| (same pattern as the Library page) instead of nesting inside the main | |
| setup card — #dda-manual-compare is a plain wrapper, not a card, so its | |
| own spacing has to be set explicitly (the .card + .card rule only fires | |
| between adjacent .card elements). */ | |
| #dda-manual-compare { display: flex; flex-direction: column; gap: 1.25rem; margin: 1.25rem 0; } | |
| /* Reports page: paginated table (10/page — see reports.js) instead of | |
| letting the page grow with every past run. The search box + Refresh | |
| button live in their own no-wrap toolbar so they stay on one line next | |
| to the heading instead of the search stretching full-width and dropping | |
| Refresh to its own row. */ | |
| .dda-reports-toolbar { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.6rem; | |
| flex-shrink: 0; | |
| } | |
| .dda-reports-toolbar .dda-search { | |
| width: 220px; | |
| flex: none; | |
| margin-bottom: 0; | |
| } | |
| .dda-reports-toolbar .btn { flex-shrink: 0; } | |
| .dda-storage-info { margin-top: 0.85rem; border-top: 1px solid var(--border); padding-top: 0.6rem; } | |
| .dda-storage-info summary { | |
| cursor: pointer; | |
| font-size: 0.82rem; | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| list-style: none; | |
| } | |
| .dda-storage-info summary::-webkit-details-marker { display: none; } | |
| .dda-storage-info summary::before { content: '▸ '; } | |
| .dda-storage-info[open] summary::before { content: '▾ '; } | |
| .dda-storage-info summary:hover { color: var(--grad-start); } | |
| .dda-storage-info .sub { margin-top: 0.5rem; } | |
| /* Fill down to the bottom of the viewport instead of stopping at a fixed | |
| 70vh and leaving a dead gap below the card when the tree list is short | |
| relative to the page's other content. `.dda-layout` uses align-items:start | |
| so grid items sit at their content height by default — align-self:stretch | |
| opts this one item back into matching the row's (taller, main-column) | |
| height, which max-height then caps at the viewport. */ | |
| .dda-sidebar { | |
| position: sticky; | |
| top: 1rem; | |
| align-self: stretch; | |
| max-height: calc(100vh - 2rem); | |
| overflow: auto; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .dda-sidebar #lib-tree, | |
| .dda-sidebar #compare-tree { flex: 1 1 auto; overflow-y: auto; } | |
| .dda-search { | |
| width: 100%; | |
| margin-bottom: 0.75rem; | |
| padding: 0.45rem 0.65rem; | |
| border: 1px solid var(--border); | |
| border-radius: 6px; | |
| background: var(--bg); | |
| color: var(--text); | |
| font-size: 0.88rem; | |
| } | |
| .dda-tree { font-size: 0.88rem; } | |
| .dda-tree-year { | |
| display: block; | |
| width: 100%; | |
| text-align: left; | |
| padding: 0.4rem 0.55rem; | |
| margin-bottom: 0.2rem; | |
| border: none; | |
| background: transparent; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| border-radius: 6px; | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| } | |
| .dda-tree-year:hover, .dda-tree-year.active { | |
| background: var(--bg-hover); | |
| color: var(--grad-start); | |
| } | |
| .dda-sidebar-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; } | |
| .dda-tree-all, .dda-tree-node-btn { | |
| display: block; | |
| width: 100%; | |
| text-align: left; | |
| padding: 0.35rem 0.5rem; | |
| margin-bottom: 0.2rem; | |
| border: none; | |
| background: transparent; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| border-radius: 6px; | |
| font-size: 0.88rem; | |
| } | |
| .dda-tree-all:hover, .dda-tree-all.active, | |
| .dda-tree-node-btn:hover, .dda-tree-node-btn.active { | |
| background: var(--bg-hover); | |
| color: var(--grad-start); | |
| } | |
| .dda-tree-node-wrap { margin-bottom: 0.15rem; } | |
| .dda-tree-node-summary { list-style: none; cursor: pointer; } | |
| .dda-tree-node-summary .dda-tree-node-btn { display: inline; width: auto; } | |
| .dda-tree-children { padding-left: 0.65rem; border-left: 1px solid var(--border); margin-left: 0.35rem; } | |
| .dda-tree-leaf { padding-left: 0.75rem; } | |
| .dda-crumb { font-size: 0.78rem; line-height: 1.3; } | |
| .dda-manage-panel { max-width: 640px; width: 100%; } | |
| .dda-manage-section { margin-bottom: 1rem; } | |
| .dda-manage-section h4 { margin: 0 0 0.5rem; font-size: 0.9rem; } | |
| .dda-manage-section .location-row { flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; } | |
| .dda-folder-path { | |
| font-size: 0.78rem; | |
| margin-bottom: 0.6rem; | |
| word-break: break-all; | |
| } | |
| .dda-path-code { | |
| background: var(--bg); | |
| border: 1px solid var(--border); | |
| border-radius: 6px; | |
| padding: 0.6rem 0.75rem; | |
| font-size: 0.8rem; | |
| overflow-x: auto; | |
| margin: 0.5rem 0 0; | |
| } | |
| .dda-instructions .sub code { | |
| font-size: 0.85em; | |
| background: var(--bg); | |
| padding: 0.1rem 0.35rem; | |
| border-radius: 4px; | |
| } | |
| .card-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 0.5rem; | |
| flex-wrap: wrap; | |
| } | |
| .dda-tree-zone > button { | |
| width: 100%; | |
| text-align: left; | |
| padding: 0.35rem 0.5rem; | |
| border: none; | |
| background: transparent; | |
| color: var(--text); | |
| cursor: pointer; | |
| border-radius: 4px; | |
| font-weight: 600; | |
| } | |
| .dda-tree-zone > button:hover { background: var(--bg-hover); } | |
| .dda-tree-villages { padding-left: 0.75rem; display: none; } | |
| .dda-tree-zone.open .dda-tree-villages { display: block; } | |
| .dda-tree-village { | |
| display: block; | |
| width: 100%; | |
| text-align: left; | |
| padding: 0.3rem 0.5rem; | |
| border: none; | |
| background: transparent; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| border-radius: 4px; | |
| font-size: 0.85rem; | |
| } | |
| .dda-tree-village:hover, .dda-tree-village.active { | |
| background: var(--bg-hover); | |
| color: var(--grad-start); | |
| } | |
| .dda-grid { | |
| display: grid; | |
| /* minmax(150px, 1fr) with auto-fill (not auto-fit): column tracks are | |
| shared across every row, so all rows stay evenly sized regardless of | |
| how many cards the last row has — auto-fit was the thing that caused | |
| uneven stretching, not minmax itself. This fills the row's full width | |
| instead of leaving a fixed-150px grid short of the container edge. */ | |
| grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); | |
| gap: 0.75rem; | |
| min-height: 80px; | |
| align-content: start; | |
| } | |
| .dda-card-img { | |
| position: relative; | |
| display: flex; | |
| flex-direction: column; | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| overflow: hidden; | |
| background: var(--bg-elevated); | |
| cursor: pointer; | |
| transition: border-color var(--transition); | |
| } | |
| .dda-card-img[draggable="true"] { cursor: grab; } | |
| .dda-card-img:hover { border-color: var(--grad-start); } | |
| .dda-card-img img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; pointer-events: none; } | |
| .dda-card-delete-btn { | |
| position: absolute; | |
| top: 6px; | |
| right: 6px; | |
| z-index: 2; | |
| width: 26px; | |
| height: 26px; | |
| border: none; | |
| border-radius: 6px; | |
| background: rgba(0, 0, 0, 0.62); | |
| color: #fff; | |
| font-size: 1.1rem; | |
| line-height: 1; | |
| cursor: pointer; | |
| opacity: 0; | |
| transition: opacity var(--transition), background var(--transition); | |
| } | |
| .dda-card-img:hover .dda-card-delete-btn, | |
| .dda-card-delete-btn:focus { opacity: 1; } | |
| .dda-card-delete-btn:hover { background: var(--danger, #dc2626); } | |
| .dda-card-img .meta { | |
| padding: 0.4rem 0.5rem; | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| line-height: 1.3; | |
| /* Fixed height regardless of path length — the variable-length crumb | |
| text (folder path + filename) was the other source of uneven card | |
| heights, wrapping to 1-3 lines depending on the image. */ | |
| height: 2.6em; | |
| overflow: hidden; | |
| } | |
| .dda-card-img .meta .dda-crumb { | |
| display: block; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .dda-compare-slots { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 1rem; | |
| margin: 1rem 0; | |
| } | |
| .dda-slot { | |
| border: 2px dashed var(--border); | |
| border-radius: 10px; | |
| padding: 1rem; | |
| min-height: 120px; | |
| text-align: center; | |
| } | |
| .dda-image-select { | |
| width: 100%; | |
| margin: 0.5rem 0; | |
| padding: 0.45rem 0.55rem; | |
| border: 1px solid var(--border); | |
| border-radius: 6px; | |
| background: var(--bg); | |
| color: var(--text); | |
| font-size: 0.88rem; | |
| } | |
| .dda-slot-preview-wrap { min-height: 48px; margin: 0.35rem 0; } | |
| .dda-slot .dda-slot-pick { margin-top: 0.35rem; } | |
| .dda-slot.filled { border-style: solid; border-color: var(--grad-start); } | |
| .dda-slot.drag-over { border-color: var(--grad-start); background: rgba(45,212,191,0.06); } | |
| .dda-slot-label { display: block; font-weight: 600; margin-bottom: 0.5rem; } | |
| .dda-compare-library { margin: 1rem 0; } | |
| .dda-compare-assign .btn { | |
| pointer-events: auto; | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .dda-compare-grid { min-height: 120px; } | |
| .dda-compare-card { position: relative; } | |
| .dda-compare-card.selected-t1 { border-color: #2dd4bf; box-shadow: 0 0 0 2px rgba(45,212,191,0.35); } | |
| .dda-compare-card.selected-t2 { border-color: #60a5fa; box-shadow: 0 0 0 2px rgba(96,165,250,0.35); } | |
| .dda-compare-assign { | |
| display: flex; | |
| gap: 0.35rem; | |
| padding: 0.45rem 0.5rem 0.55rem; | |
| border-top: 1px solid var(--border); | |
| } | |
| .dda-compare-assign .btn { flex: 1; font-size: 0.75rem; padding: 0.3rem 0.4rem; } | |
| .dda-reports-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 0.85rem; | |
| margin-top: 0.5rem; | |
| } | |
| .dda-reports-table th, .dda-reports-table td { | |
| border: 1px solid var(--border); | |
| padding: 0.4rem 0.55rem; | |
| text-align: left; | |
| } | |
| .dda-status { font-size: 0.78rem; font-weight: 600; text-transform: capitalize; } | |
| .dda-status-completed { color: var(--success, #16a34a); } | |
| .dda-status-running, .dda-status-queued { color: #ca8a04; } | |
| .dda-status-failed { color: var(--danger, #dc2626); } | |
| .dda-slot-preview { | |
| width: 100%; | |
| max-height: 160px; | |
| object-fit: contain; | |
| border-radius: 6px; | |
| margin: 0.5rem 0; | |
| background: var(--bg); | |
| } | |
| .dda-slot-meta { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 0.5rem; } | |
| .dda-detect-options { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| align-items: flex-end; | |
| margin-bottom: 1rem; | |
| } | |
| .dda-detect-options .form-group { margin: 0; min-width: 160px; } | |
| .dda-check { display: flex; align-items: center; gap: 0.35rem; font-size: 0.88rem; color: var(--text-muted); } | |
| .dda-modal { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 1300; | |
| background: rgba(0, 0, 0, 0.55); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 1rem; | |
| } | |
| .dda-modal.hidden { display: none; } | |
| .dda-modal-panel { | |
| width: min(720px, 100%); | |
| max-height: 80vh; | |
| overflow: auto; | |
| } | |
| .dda-picker-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); | |
| gap: 0.65rem; | |
| padding: 0.5rem 0; | |
| } | |
| .dda-picker-item { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: stretch; | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| background: var(--bg-elevated); | |
| cursor: pointer; | |
| padding: 0; | |
| overflow: hidden; | |
| text-align: left; | |
| color: var(--text); | |
| } | |
| .dda-picker-item:hover { border-color: var(--grad-start); } | |
| .dda-picker-item img { width: 100%; aspect-ratio: 1; object-fit: cover; } | |
| .dda-picker-item span { padding: 0.4rem 0.5rem; font-size: 0.75rem; } | |
| .dda-preflight-panel { width: min(560px, 100%); } | |
| .dda-preflight-list { | |
| list-style: none; | |
| margin: 0 0 1rem; | |
| padding: 0; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| } | |
| .dda-preflight-list li { | |
| padding: 0.65rem 0.85rem; | |
| border-radius: 6px; | |
| background: #fef3c7; | |
| color: #92400e; | |
| font-size: 0.88rem; | |
| line-height: 1.4; | |
| } | |
| .dda-preflight-list li.fail { | |
| background: #fef2f2; | |
| border: 1px solid #fecaca; | |
| color: #dc2626; | |
| } | |
| .dda-image-viewer-panel { | |
| width: min(1200px, 96vw); | |
| max-height: 92vh; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .dda-image-viewer-actions { | |
| display: flex; | |
| gap: 0.5rem; | |
| align-items: center; | |
| } | |
| .dda-image-viewer-body { | |
| padding: 0 1rem 1rem; | |
| overflow: auto; | |
| } | |
| .dda-image-viewer-wrap { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: 200px; | |
| background: var(--bg); | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| padding: 0.5rem; | |
| } | |
| #dda-image-viewer-img { | |
| max-width: 100%; | |
| max-height: 72vh; | |
| object-fit: contain; | |
| display: block; | |
| } | |
| .dda-image-viewer-status { min-height: 1.2rem; margin: 0 0 0.5rem; } | |
| .dda-image-viewer-status.dda-viewer-error { color: var(--danger, #dc2626); } | |
| .dda-viewer-mode-bar { | |
| display: flex; | |
| gap: 0.35rem; | |
| margin: 0 0 0.65rem; | |
| } | |
| .dda-map-pane { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| min-height: 420px; | |
| } | |
| .dda-map-pane.hidden { display: none; } | |
| .dda-map-toolbar { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 0.65rem 0.9rem; | |
| padding: 0.55rem 0.7rem; | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| } | |
| .dda-map-field { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.4rem; | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| } | |
| .dda-map-field span { white-space: nowrap; } | |
| .dda-map-field select, | |
| .dda-map-xyz { | |
| min-width: 180px; | |
| padding: 0.28rem 0.45rem; | |
| border: 1px solid var(--border); | |
| border-radius: 6px; | |
| background: var(--bg-card); | |
| color: var(--text); | |
| font-size: 0.82rem; | |
| } | |
| .dda-map-xyz { min-width: 260px; flex: 1; } | |
| .dda-map-opacity input[type="range"] { width: 110px; vertical-align: middle; } | |
| .dda-map-opacity em { font-style: normal; color: var(--text); font-variant-numeric: tabular-nums; } | |
| .dda-map-status { min-height: 1.1rem; margin: 0; font-size: 0.8rem; } | |
| .dda-map-canvas { | |
| height: min(62vh, 640px); | |
| min-height: 360px; | |
| width: 100%; | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| background: #1a1a2e; | |
| z-index: 1; | |
| } | |
| .dda-map-canvas.leaflet-container { | |
| height: min(62vh, 640px); | |
| } | |
| .dda-map-canvas .leaflet-ddaRaster-pane { | |
| z-index: 450; | |
| pointer-events: none; | |
| } | |
| .dda-map-canvas .leaflet-image-layer, | |
| .dda-map-canvas .dda-raster-overview { | |
| max-width: none ; | |
| max-height: none ; | |
| } | |
| #dda-result-map-pane .dda-map-canvas { height: min(58vh, 560px); } | |
| #dda-result-map-pane .dda-map-canvas.leaflet-container { height: min(58vh, 560px); } | |
| /* "Hide Details" collapses the stats row above the map — let the map grow | |
| into that freed space instead of leaving it blank. */ | |
| .result-modal.stats-hidden #dda-result-map-pane .dda-map-canvas, | |
| .result-modal.stats-hidden #dda-result-map-pane .dda-map-canvas.leaflet-container { | |
| height: min(80vh, 900px); | |
| } | |
| .dda-result-overlay { margin: 1rem 0; } | |
| .dda-result-img { max-width: 100%; border-radius: 8px; border: 1px solid var(--border); } | |
| .dda-regions-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 0.85rem; | |
| margin-top: 0.75rem; | |
| } | |
| .dda-regions-table th, .dda-regions-table td { | |
| border: 1px solid var(--border); | |
| padding: 0.35rem 0.5rem; | |
| text-align: left; | |
| } | |
| .dda-upload-form .location-row { margin-bottom: 0.5rem; } | |
| .dda-upload-progress { margin: 0.75rem 0 1rem; } | |
| .dda-progress-bar { | |
| height: 8px; | |
| background: var(--bg); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| border: 1px solid var(--border); | |
| margin-bottom: 0.35rem; | |
| } | |
| .dda-progress-fill { | |
| height: 100%; | |
| width: 0%; | |
| background: linear-gradient(90deg, var(--grad-start), var(--grad-end, #10b981)); | |
| transition: width 0.15s ease; | |
| } | |
| .dda-hierarchy-wrap { | |
| margin-top: 1rem; | |
| padding-top: 0.75rem; | |
| border-top: 1px solid var(--border); | |
| } | |
| .dda-hierarchy-title { | |
| font-size: 0.75rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| margin: 0 0 0.5rem; | |
| color: var(--text-muted, #888); | |
| } | |
| .dda-hierarchy-zone { margin-bottom: 0.35rem; } | |
| .dda-hierarchy-zone summary { | |
| cursor: pointer; | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| padding: 0.2rem 0; | |
| } | |
| .dda-hierarchy-list { | |
| list-style: none; | |
| margin: 0.25rem 0 0.5rem 0.75rem; | |
| padding: 0; | |
| font-size: 0.8rem; | |
| } | |
| .dda-hierarchy-village { padding: 0.15rem 0; } | |
| .regions-table tr.region-selected { background: rgba(16, 185, 129, 0.12); } | |
| .regions-table tr { cursor: pointer; } | |
| .dda-notify-wrap { position: relative; width: 100%; } | |
| .dda-notify-btn { | |
| position: relative; | |
| width: 100%; | |
| background: transparent; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| padding: 0.5rem 0.7rem; | |
| cursor: pointer; | |
| color: var(--text-muted); | |
| display: flex; | |
| align-items: center; | |
| gap: 0.6rem; | |
| font-size: 0.85rem; | |
| transition: all var(--transition); | |
| } | |
| .dda-notify-btn:hover { background: var(--bg-hover); color: var(--text); } | |
| .dda-notify-badge { | |
| position: absolute; | |
| top: 4px; | |
| left: 22px; | |
| min-width: 16px; | |
| height: 16px; | |
| padding: 0 4px; | |
| border-radius: 999px; | |
| background: var(--danger, #dc2626); | |
| color: #fff; | |
| font-size: 10px; | |
| font-weight: 700; | |
| line-height: 16px; | |
| text-align: center; | |
| } | |
| .dda-notify-panel { | |
| /* position (fixed) + left/top/right/bottom are set inline by notifications.js | |
| so the panel anchors to the bell button's on-screen position — it must | |
| NOT rely on being positioned relative to .dda-sidebar-nav, which clips | |
| overflow for its own scrollbar. */ | |
| position: fixed; | |
| width: min(380px, 92vw); | |
| max-height: min(70vh, 480px); | |
| overflow-y: auto; | |
| background: var(--card, #fff); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| box-shadow: 0 16px 40px rgba(0,0,0,0.18); | |
| z-index: 300; | |
| padding: 0.35rem; | |
| } | |
| /* Dims the page while the panel is open so it reads as a floating overlay | |
| rather than a layout glitch — the panel can land on top of a page's own | |
| secondary sidebar (e.g. the Library/Detect folder tree) since it opens | |
| near the nav sidebar regardless of what else is on screen. */ | |
| .dda-notify-backdrop { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(0, 0, 0, 0.25); | |
| z-index: 290; | |
| } | |
| .dda-notify-item { | |
| display: block; | |
| width: 100%; | |
| text-align: left; | |
| border: none; | |
| background: transparent; | |
| padding: 0.55rem 0.65rem; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| color: inherit; | |
| } | |
| .dda-notify-item:hover { background: rgba(0,0,0,0.04); } | |
| .dda-notify-item.unread { background: rgba(46, 51, 197, 0.06); } | |
| .dda-notify-item-title { display: block; font-size: 0.85rem; font-weight: 600; } | |
| .dda-notify-item-meta { display: block; font-size: 0.75rem; color: var(--text-muted, #888); margin-top: 0.15rem; } | |
| .dda-notify-empty { padding: 0.75rem; margin: 0; font-size: 0.85rem; } | |
| .dda-notify-email { margin-top: 0.35rem; width: 100%; max-width: 280px; } | |
| .dda-report-actions-cell { white-space: nowrap; } | |
| .dda-report-actions-cell .btn, .dda-report-actions-cell a.btn { margin-right: 0.25rem; margin-bottom: 0.25rem; } | |
| /* Standalone report page has no sidebar nav — override the sidebar-shell flex layout. */ | |
| .dda-report-page { display: block; max-width: 960px; margin: 0 auto; padding: 1rem; } | |
| .dda-header { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 1rem; | |
| margin-bottom: 1.25rem; | |
| } | |
| .dda-report-header { justify-content: space-between; } | |
| .dda-report-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } | |
| .dda-report-stats { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-top: 0.75rem; } | |
| .dda-stat .label { display: block; font-size: 0.75rem; color: var(--text-muted, #888); } | |
| .dda-stat .value { font-size: 1.25rem; font-weight: 700; } | |
| .dda-report-overlay { max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--border); } | |
| .dda-report-email-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; } | |
| .dda-report-email-row input { flex: 1; min-width: 200px; } | |
| .dda-view-toolbar { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 0.35rem; | |
| margin: 0.5rem 0 0.75rem; | |
| } | |
| .dda-view-label { font-size: 0.8rem; color: var(--text-muted, #888); margin-right: 0.25rem; } | |
| .dda-view-btn { | |
| font-size: 0.78rem; | |
| padding: 0.25rem 0.55rem; | |
| border: 1px solid var(--border); | |
| border-radius: 6px; | |
| background: transparent; | |
| cursor: pointer; | |
| color: inherit; | |
| } | |
| .dda-view-btn.active { | |
| background: var(--grad-start, #2e33c5); | |
| color: #fff; | |
| border-color: transparent; | |
| } | |
| .dda-mode-slider .compare-handle { display: block; } | |
| .dda-mode-t1 .compare-handle, | |
| .dda-mode-t2 .compare-handle, | |
| .dda-mode-overlay .compare-handle { pointer-events: none; } | |
| .dda-review-bar { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 0.5rem; | |
| margin: 0.75rem 0; | |
| padding: 0.5rem 0; | |
| border-top: 1px solid var(--border); | |
| } | |
| .dda-review-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; } | |
| .dda-review-btns { white-space: nowrap; } | |
| .dda-review-btns .btn { padding: 0.15rem 0.4rem; margin-right: 0.15rem; } | |
| .dda-review-btns .btn-review-ok.is-active { | |
| background: #15803d; | |
| border-color: #15803d; | |
| color: #fff; | |
| } | |
| .dda-review-btns .btn-review-fp.is-active { | |
| background: #b91c1c; | |
| border-color: #b91c1c; | |
| color: #fff; | |
| } | |
| .review-badge { | |
| font-size: 0.72rem; | |
| font-weight: 600; | |
| text-transform: capitalize; | |
| padding: 0.1rem 0.35rem; | |
| border-radius: 4px; | |
| } | |
| .review-pending { background: rgba(0,0,0,0.06); color: #666; } | |
| .review-confirmed { background: rgba(22, 163, 74, 0.15); color: #15803d; } | |
| .review-false-positive { background: rgba(220, 38, 38, 0.12); color: #b91c1c; } | |
| .review-submitted { background: rgba(46, 51, 197, 0.12); color: #2e33c5; } | |
| .highlight-pulse { animation: dda-pulse 1.2s ease-in-out 2; } | |
| @keyframes dda-pulse { | |
| 0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); } | |
| 50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); } | |
| } | |
| .regions-table-wrap { | |
| overflow-x: auto; | |
| max-width: 100%; | |
| } | |
| .regions-table-wrap .regions-table { | |
| min-width: 960px; | |
| } | |
| @media (max-width: 768px) { | |
| .dda-compare-slots { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| /* ROI (region-of-interest) draw tool on the T2 preview */ | |
| #slot-t2-preview { position: relative; } | |
| #slot-t2-preview img.dda-slot-preview { cursor: crosshair; user-select: none; -webkit-user-drag: none; } | |
| .dda-roi-rect { | |
| position: absolute; | |
| border: 2px solid #ff3b3b; | |
| background: rgba(255, 59, 59, 0.15); | |
| box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6); | |
| pointer-events: none; | |
| z-index: 5; | |
| border-radius: 2px; | |
| } | |
| .dda-roi-controls { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin: 6px 0; | |
| flex-wrap: wrap; | |
| } | |
| /* Polygon footprint layer over the compare viewer (sits under the bbox highlight) */ | |
| .region-polygon-layer { | |
| position: absolute; | |
| pointer-events: none; | |
| z-index: 4; | |
| overflow: visible; | |
| } | |
| /* Area chip shown when a region is located/selected on the compare viewer */ | |
| .region-area-label { | |
| position: absolute; | |
| z-index: 6; | |
| padding: 2px 6px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| line-height: 1.3; | |
| color: #fff; | |
| background: rgba(20, 20, 20, 0.82); | |
| border-radius: 3px; | |
| white-space: nowrap; | |
| pointer-events: none; | |
| } | |
| /* Polygon / Box region-shape toggle in the detect options */ | |
| .dda-shape-toggle { | |
| display: inline-flex; | |
| border: 1px solid var(--border, #d0d5dd); | |
| border-radius: 6px; | |
| overflow: hidden; | |
| } | |
| .dda-shape-btn { | |
| padding: 6px 14px; | |
| font-size: 0.85rem; | |
| border: 0; | |
| background: transparent; | |
| color: inherit; | |
| cursor: pointer; | |
| transition: background 0.15s, color 0.15s; | |
| } | |
| .dda-shape-btn + .dda-shape-btn { border-left: 1px solid var(--border, #d0d5dd); } | |
| .dda-shape-btn:hover { background: rgba(46, 84, 150, 0.08); } | |
| .dda-shape-btn.is-active { background: #2e5496; color: #fff; } | |
| #tab-detect.dda-mode-automatic #dda-manual-compare, | |
| #tab-detect.dda-mode-automatic .dda-image-select, | |
| #tab-detect.dda-mode-automatic .dda-slot-pick { display: none; } | |
| #tab-detect.dda-mode-manual #dda-auto-compare { display: none; } | |
| .dda-mode-toggle { | |
| display: inline-flex; | |
| border: 1px solid var(--border); | |
| border-radius: 6px; | |
| overflow: hidden; | |
| } | |
| .dda-mode-btn { | |
| padding: 6px 14px; | |
| font-size: 0.85rem; | |
| border: 0; | |
| background: transparent; | |
| color: inherit; | |
| cursor: pointer; | |
| } | |
| .dda-mode-btn + .dda-mode-btn { border-left: 1px solid var(--border); } | |
| .dda-mode-btn:hover { background: rgba(46, 84, 150, 0.08); } | |
| .dda-mode-btn.is-active { background: #2e5496; color: #fff; } | |
| .dda-auto-compare { | |
| display: grid; | |
| grid-template-columns: minmax(220px, 1fr); | |
| gap: 0.35rem; | |
| margin: 0.75rem 0 0.25rem; | |
| } | |
| .dda-auto-compare select { | |
| width: 100%; | |
| max-width: 420px; | |
| padding: 0.35rem 0.5rem; | |
| border: 1px solid var(--border); | |
| border-radius: 6px; | |
| background: var(--bg-card); | |
| color: var(--text); | |
| } | |
| .dda-auto-schedule { | |
| margin: 0.15rem 0 0.5rem; | |
| font-size: 0.85rem; | |
| line-height: 1.35; | |
| } | |
| .dda-auto-schedule-controls { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: flex-end; | |
| gap: 0.65rem 1rem; | |
| margin: 0.5rem 0 0.25rem; | |
| } | |
| .dda-auto-field { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.2rem; | |
| font-size: 0.85rem; | |
| } | |
| .dda-auto-field input { | |
| min-width: 7rem; | |
| padding: 0.3rem 0.45rem; | |
| border: 1px solid var(--border); | |
| border-radius: 6px; | |
| background: var(--bg-card); | |
| color: var(--text); | |
| } | |
| .dda-shape-btn:hover { background: rgba(46, 84, 150, 0.08); } | |
| .dda-shape-btn.is-active { background: #2e5496; color: #fff; } | |
| .dda-area-pairs { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.75rem; | |
| max-height: 42vh; | |
| overflow-y: auto; | |
| } | |
| .dda-compare-pairs { max-height: 28vh; margin: 0.75rem 0 1rem; } | |
| .dda-area-pair { | |
| display: grid; | |
| grid-template-columns: minmax(140px, 1.2fr) 1fr 1fr auto; | |
| gap: 0.65rem 0.85rem; | |
| align-items: end; | |
| padding: 0.7rem 0.8rem; | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| background: var(--bg-elevated); | |
| } | |
| .dda-area-pair-title { | |
| margin: 0; | |
| font-size: 0.92rem; | |
| font-weight: 600; | |
| } | |
| .dda-area-pair-meta { margin: 0.15rem 0 0; font-size: 0.78rem; } | |
| .dda-area-pair label { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.2rem; | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| } | |
| .dda-area-pair select { | |
| width: 100%; | |
| padding: 0.28rem 0.4rem; | |
| border: 1px solid var(--border); | |
| border-radius: 6px; | |
| background: var(--bg-card); | |
| color: var(--text); | |
| font-size: 0.8rem; | |
| } | |
| .dda-area-pair-overridden { font-size: 0.72rem; color: var(--grad-start); } | |
| @media (max-width: 900px) { | |
| .dda-area-pair { | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| .dda-area-pair-head { grid-column: 1 / -1; } | |
| .dda-area-pair-actions { grid-column: 1 / -1; } | |
| } | |
| /* --------------------------------------------------------------------- | |
| Admin pages: Roles & Users, App Modules, Menu Management | |
| --------------------------------------------------------------------- */ | |
| .dda-admin-2col { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 1rem; | |
| align-items: start; | |
| } | |
| @media (max-width: 1100px) { | |
| .dda-admin-2col { grid-template-columns: 1fr; } | |
| } | |
| /* Roles & Users gets its own ratio — role hierarchy narrower, users table | |
| wider, so the table has real room to breathe on a full-width page. */ | |
| .dda-admin-2col-roles { grid-template-columns: 0.85fr 1.3fr; } | |
| @media (max-width: 1100px) { | |
| .dda-admin-2col-roles { grid-template-columns: 1fr; } | |
| } | |
| /* Dynamic role permissions — elements gated via shared.js's | |
| applyPermissionGating() against the Roles & Users permission matrix. | |
| Hidden elements reuse the existing global .hidden utility; this is just | |
| the "still visible but blocked" state for data-permission-mode="disable". */ | |
| .perm-disabled { opacity: 0.5; cursor: not-allowed; } | |
| /* My Profile page */ | |
| .dda-profile-summary { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.3rem; padding: 0.5rem 0 0.25rem; } | |
| .dda-profile-avatar { | |
| width: 72px; | |
| height: 72px; | |
| border-radius: 50%; | |
| background: var(--gradient); | |
| color: #fff; | |
| font-size: 1.7rem; | |
| font-weight: 700; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 0.4rem; | |
| } | |
| .dda-profile-badge { | |
| display: inline-block; | |
| margin: 0.35rem 0 0.9rem; | |
| padding: 0.25rem 0.75rem; | |
| border-radius: 999px; | |
| background: linear-gradient(135deg, rgba(46,51,197,0.12), rgba(207,32,64,0.08)); | |
| color: var(--grad-start); | |
| font-size: 0.78rem; | |
| font-weight: 600; | |
| } | |
| .dda-profile-meta { | |
| width: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.7rem; | |
| padding-top: 0.9rem; | |
| border-top: 1px solid var(--border); | |
| } | |
| .dda-profile-meta > div { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; } | |
| .dda-profile-meta-label { color: var(--text-dim); } | |
| .dda-profile-meta-value { font-weight: 600; } | |
| /* Admin pages (Roles & Users / App Modules / Menu Management) use the full | |
| viewport width instead of the app's normal 1600px cap, so the wider | |
| tables/panels have as much room as the LMS reference layout does. */ | |
| .dda-app-full { max-width: none; } | |
| .dda-role-list { display: flex; flex-direction: column; gap: 0.65rem; } | |
| .dda-role-card { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 0.75rem; | |
| padding: 0.75rem 0.9rem; | |
| border: 1px solid var(--border); | |
| border-left: 3px solid var(--grad-start); | |
| border-radius: 8px; | |
| background: var(--bg-elevated); | |
| flex-wrap: wrap; | |
| } | |
| .dda-role-card-info { min-width: 0; } | |
| .dda-role-card-name { font-weight: 600; text-transform: capitalize; } | |
| .dda-role-card-name .dda-badge-system { | |
| margin-left: 0.4rem; | |
| font-size: 0.65rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| color: var(--text-dim); | |
| border: 1px solid var(--border); | |
| border-radius: 4px; | |
| padding: 0.05rem 0.35rem; | |
| } | |
| .dda-role-card-desc { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.1rem; } | |
| .dda-role-card-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; } | |
| .dda-role-card-name .dda-status-badge { margin-left: 0.4rem; vertical-align: middle; } | |
| .dda-role-card.is-inactive { opacity: 0.6; border-left-color: var(--text-dim); } | |
| .dda-perm-matrix { width: 100%; border-collapse: collapse; font-size: 0.85rem; } | |
| .dda-perm-matrix th, .dda-perm-matrix td { | |
| border: 1px solid var(--border); | |
| padding: 0.45rem 0.6rem; | |
| text-align: center; | |
| } | |
| .dda-perm-matrix th:first-child, .dda-perm-matrix td:first-child { text-align: left; } | |
| .dda-perm-matrix input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; } | |
| .dda-menu-list { display: flex; flex-direction: column; gap: 0.5rem; } | |
| .dda-menu-item-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| padding: 0.6rem 0.75rem; | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| background: var(--bg-elevated); | |
| } | |
| .dda-menu-item-order { display: flex; flex-direction: column; gap: 0.15rem; } | |
| .dda-menu-item-order button { | |
| width: 22px; | |
| height: 18px; | |
| border: 1px solid var(--border); | |
| border-radius: 4px; | |
| background: var(--bg-card); | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| font-size: 0.7rem; | |
| line-height: 1; | |
| } | |
| .dda-menu-item-order button:hover:not(:disabled) { color: var(--grad-start); border-color: var(--grad-start); } | |
| .dda-menu-item-order button:disabled { opacity: 0.35; cursor: default; } | |
| .dda-menu-item-info { flex: 1 1 auto; min-width: 0; } | |
| .dda-menu-item-label { font-weight: 600; } | |
| .dda-menu-item-meta { font-size: 0.78rem; color: var(--text-muted); } | |
| .dda-menu-item-meta code { background: var(--bg); padding: 0.05rem 0.3rem; border-radius: 4px; } | |
| .dda-menu-item-actions { display: flex; gap: 0.35rem; flex-shrink: 0; } | |
| .dda-status-badge { | |
| font-size: 0.72rem; | |
| font-weight: 600; | |
| padding: 0.1rem 0.45rem; | |
| border-radius: 999px; | |
| } | |
| .dda-status-badge.is-active { background: rgba(16,185,129,0.12); color: #0d9488; } | |
| .dda-status-badge.is-inactive { background: rgba(220,38,38,0.1); color: var(--danger); } | |
| .dda-perm-matrix-actions { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; } | |
| .dda-menu-item-row.is-child { margin-left: 2.25rem; } | |
| .dda-menu-item-icon { font-size: 1.1rem; margin-right: 0.3rem; } | |
| .dda-admin-side-panel { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; } | |
| .dda-admin-side-panel strong { color: var(--text); } | |
| .dda-admin-side-panel code { | |
| background: var(--bg); | |
| padding: 0.05rem 0.35rem; | |
| border-radius: 4px; | |
| color: var(--grad-start); | |
| } | |
| .dda-module-keys { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.82rem; } | |
| .dda-module-keys code { background: var(--bg); padding: 0.15rem 0.5rem; border-radius: 4px; align-self: flex-start; } | |
| .dda-table-toolbar { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.75rem; } | |
| .dda-table-toolbar select { padding: 0.25rem 0.4rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); color: var(--text); } | |
| /* --- Filters, dates, dropzone, folders master, run bar --- */ | |
| .dda-filter-bar { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: flex-end; | |
| gap: 0.65rem 0.85rem; | |
| margin: 0 0 1rem; | |
| padding: 0.75rem 0.85rem; | |
| border: 1px solid var(--border); | |
| border-radius: 10px; | |
| background: var(--bg); | |
| } | |
| .dda-filter-field { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.25rem; | |
| font-size: 0.78rem; | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| } | |
| .dda-filter-field .dda-search, | |
| .dda-filter-field select, | |
| .dda-date-input { | |
| min-width: 9.5rem; | |
| margin-bottom: 0; | |
| padding: 0.4rem 0.55rem; | |
| border: 1px solid var(--border); | |
| border-radius: 6px; | |
| background: var(--bg-card); | |
| color: var(--text); | |
| font-size: 0.88rem; | |
| font-weight: 500; | |
| } | |
| .dda-filter-field .dda-search { min-width: 14rem; } | |
| .dda-filter-meta { font-size: 0.85rem; white-space: nowrap; } | |
| time.dda-date { | |
| font-variant-numeric: tabular-nums; | |
| white-space: nowrap; | |
| } | |
| .dda-dropzone { | |
| margin-top: 0.75rem; | |
| padding: 1.15rem 1rem; | |
| border: 1.5px dashed var(--border); | |
| border-radius: 10px; | |
| background: var(--bg); | |
| text-align: center; | |
| transition: border-color 0.15s, background 0.15s; | |
| } | |
| .dda-dropzone.is-dragover { | |
| border-color: var(--grad-start); | |
| background: rgba(46, 84, 150, 0.08); | |
| } | |
| .dda-dropzone-title { margin: 0 0 0.25rem; font-weight: 650; } | |
| .dda-dropzone-actions { | |
| display: flex; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| gap: 0.5rem; | |
| margin: 0.75rem 0 0.35rem; | |
| } | |
| .dda-file-btn { | |
| position: relative; | |
| overflow: hidden; | |
| display: inline-flex; | |
| align-items: center; | |
| cursor: pointer; | |
| } | |
| .dda-file-btn input[type="file"] { | |
| position: absolute; | |
| inset: 0; | |
| opacity: 0; | |
| cursor: pointer; | |
| font-size: 0; | |
| } | |
| .dda-upload-summary { margin: 0.35rem 0 0; } | |
| .dda-tree-hint { font-size: 0.78rem; margin: 0 0 0.45rem; line-height: 1.35; } | |
| .dda-tree-node-btn.is-drop-target { | |
| outline: 2px dashed var(--grad-start); | |
| background: rgba(46, 84, 150, 0.1); | |
| color: var(--grad-start); | |
| } | |
| .dda-tree-menu { | |
| position: fixed; | |
| z-index: 80; | |
| min-width: 190px; | |
| padding: 0.3rem; | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| background: var(--bg-card); | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); | |
| } | |
| .dda-tree-menu button { | |
| display: block; | |
| width: 100%; | |
| text-align: left; | |
| border: none; | |
| background: transparent; | |
| color: var(--text); | |
| padding: 0.4rem 0.6rem; | |
| border-radius: 6px; | |
| font-size: 0.86rem; | |
| cursor: pointer; | |
| } | |
| .dda-tree-menu button:hover { background: var(--bg-hover); } | |
| .dda-manage-panel { max-width: 640px; } | |
| .dda-run-bar { | |
| position: sticky; | |
| bottom: 0.6rem; | |
| z-index: 6; | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 0.85rem 1.25rem; | |
| margin: 0.25rem 0 0.5rem; | |
| padding: 0.9rem 1.1rem; | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| background: var(--bg-card); | |
| box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08); | |
| } | |
| .dda-run-bar-title { margin: 0 0 0.15rem; font-weight: 700; } | |
| .dda-run-bar .dim { margin: 0; } | |
| @media (max-width: 720px) { | |
| .dda-filter-field .dda-search, | |
| .dda-filter-field select, | |
| .dda-date-input, | |
| .dda-datewrap { min-width: 100%; } | |
| .dda-run-bar { position: static; } | |
| } | |
| /* --- Dashboard (Home) --- */ | |
| .dda-hero-row { | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: space-between; | |
| gap: 1rem; | |
| flex-wrap: wrap; | |
| } | |
| .dda-dash-hero-actions { display: flex; align-items: center; gap: 0.75rem; } | |
| .dda-dash-updated { font-size: 0.8rem; white-space: nowrap; } | |
| .dda-dash-kpi-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: 0.75rem; | |
| } | |
| a.stat-box.dda-dash-kpi { | |
| display: flex; | |
| flex-direction: column; | |
| text-decoration: none; | |
| transition: border-color 0.15s ease, transform 0.15s ease; | |
| } | |
| a.stat-box.dda-dash-kpi:hover { border-color: var(--accent); transform: translateY(-1px); } | |
| .dda-dash-latest-row { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; } | |
| .dda-dash-latest-thumb { | |
| width: 160px; | |
| height: 120px; | |
| object-fit: cover; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--border); | |
| flex-shrink: 0; | |
| } | |
| .dda-dash-latest-info h4 { margin: 0 0 0.25rem; } | |
| .dda-dash-latest-stats { display: flex; gap: 1.25rem; margin: 0.5rem 0 0.85rem; font-size: 0.88rem; color: var(--text-muted); } | |
| .dda-dash-latest-stats strong { color: var(--text); } | |
| .dda-dash-row-clickable { cursor: pointer; } | |
| .dda-dash-row-clickable:hover { background: var(--bg-hover, var(--bg-elevated)); } | |
| .dda-dash-row-active { background: var(--accent-glow); } | |
| .dda-dash-chart-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| .dda-dash-chart-box h4 { margin: 0 0 0.6rem; font-size: 0.9rem; color: var(--text-muted); } | |
| .dda-dash-compare-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 1rem; | |
| margin: 0.75rem 0 1.25rem; | |
| padding: 1rem; | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| } | |
| .dda-dash-compare-col span.dim { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.35rem; } | |
| .dda-dash-compare-col h4 { margin: 0 0 0.2rem; } | |
| .dda-dash-compare-col p { margin: 0 0 0.35rem; } | |
| .dda-dash-delta { font-weight: 700; font-family: var(--font-mono); } | |
| .dda-dash-history-title { margin: 0 0 0.6rem; font-size: 0.95rem; } | |
| @media (max-width: 720px) { | |
| .dda-dash-latest-row { flex-direction: column; } | |
| .dda-dash-latest-thumb { width: 100%; height: 160px; } | |
| } | |
| /* Styled calendar date picker */ | |
| .dda-datewrap { | |
| position: relative; | |
| min-width: 11.5rem; | |
| overflow: visible; | |
| } | |
| .dda-date-native { | |
| position: absolute; | |
| width: 1px; | |
| height: 1px; | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .dda-date-trigger { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| width: 100%; | |
| min-height: 2.35rem; | |
| padding: 0.4rem 0.7rem; | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| background: var(--bg-card); | |
| color: var(--text); | |
| font: inherit; | |
| font-size: 0.88rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| text-align: left; | |
| } | |
| .dda-date-trigger:hover { border-color: var(--border-hover); } | |
| .dda-datewrap.is-open .dda-date-trigger { | |
| border-color: var(--border-focus); | |
| box-shadow: 0 0 0 3px var(--accent-glow); | |
| } | |
| .dda-date-placeholder { color: var(--text-dim); font-weight: 450; } | |
| .dda-date-clear { | |
| margin-left: auto; | |
| color: var(--text-dim); | |
| font-size: 1.1rem; | |
| line-height: 1; | |
| padding: 0 0.15rem; | |
| } | |
| .dda-date-clear:hover { color: var(--danger); } | |
| .dda-cal { | |
| display: none; | |
| position: fixed; | |
| z-index: 400; | |
| width: 280px; | |
| padding: 0.75rem; | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| background: var(--bg-card); | |
| box-shadow: 0 16px 40px rgba(26, 26, 46, 0.14); | |
| } | |
| .dda-datewrap.is-open .dda-cal { display: block; } | |
| .dda-cal-head { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 0.35rem; | |
| margin-bottom: 0.55rem; | |
| } | |
| .dda-cal-title { font-weight: 650; font-size: 0.92rem; } | |
| .dda-cal-period { | |
| display: flex; | |
| gap: 0.3rem; | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .dda-cal-month, .dda-cal-year { | |
| min-width: 0; | |
| flex: 1; | |
| height: 32px; | |
| padding: 0 0.35rem; | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| background: var(--bg-card); | |
| color: var(--text); | |
| font: inherit; | |
| font-size: 0.82rem; | |
| font-weight: 600; | |
| } | |
| .dda-cal-nav { | |
| width: 32px; | |
| height: 32px; | |
| border: none; | |
| border-radius: 8px; | |
| background: var(--bg-surface); | |
| color: var(--text); | |
| font-size: 1.15rem; | |
| cursor: pointer; | |
| } | |
| .dda-cal-nav:hover { background: var(--bg-hover); } | |
| .dda-cal-dow, .dda-cal-grid { | |
| display: grid; | |
| grid-template-columns: repeat(7, 1fr); | |
| gap: 2px; | |
| text-align: center; | |
| } | |
| .dda-cal-dow { | |
| margin-bottom: 0.2rem; | |
| font-size: 0.68rem; | |
| font-weight: 650; | |
| color: var(--text-dim); | |
| letter-spacing: 0.04em; | |
| text-transform: uppercase; | |
| } | |
| .dda-cal-day { | |
| height: 32px; | |
| border: none; | |
| border-radius: 8px; | |
| background: transparent; | |
| color: var(--text); | |
| font-size: 0.82rem; | |
| cursor: pointer; | |
| } | |
| .dda-cal-day:hover:not(.is-empty) { background: var(--bg-hover); } | |
| .dda-cal-day.is-empty { cursor: default; } | |
| .dda-cal-day.is-today { box-shadow: inset 0 0 0 1.5px var(--grad-start); } | |
| .dda-cal-day.is-selected { | |
| background: var(--gradient); | |
| color: #fff; | |
| font-weight: 650; | |
| } | |
| .dda-cal-foot { display: flex; justify-content: flex-end; margin-top: 0.45rem; } | |
| .dda-cal-today { | |
| border: none; | |
| background: none; | |
| color: var(--grad-start); | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| } | |
| #dda-auto-run-at { | |
| min-width: 8.5rem; | |
| padding: 0.4rem 0.55rem; | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| background: var(--bg-card); | |
| color: var(--text); | |
| font: inherit; | |
| font-size: 0.88rem; | |
| } | |
| /* Logs */ | |
| .dda-logs-wrap { overflow: auto; max-height: min(70vh, 720px); } | |
| .dda-logs-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 0.82rem; | |
| } | |
| .dda-logs-table th, .dda-logs-table td { | |
| padding: 0.45rem 0.55rem; | |
| border-bottom: 1px solid var(--border); | |
| vertical-align: top; | |
| text-align: left; | |
| } | |
| .dda-logs-table th { color: var(--text-muted); font-size: 0.75rem; position: sticky; top: 0; background: var(--bg-card); } | |
| .dda-log-logger { color: var(--text-muted); white-space: nowrap; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; } | |
| .dda-log-msg { font-family: var(--font-mono); font-size: 0.75rem; white-space: pre-wrap; word-break: break-word; } | |
| .dda-log-level { | |
| display: inline-block; | |
| min-width: 4.6rem; | |
| padding: 0.1rem 0.4rem; | |
| border-radius: 999px; | |
| font-size: 0.7rem; | |
| font-weight: 700; | |
| text-align: center; | |
| letter-spacing: 0.03em; | |
| } | |
| .dda-log-row.is-info .dda-log-level { background: rgba(46, 51, 197, 0.1); color: var(--grad-start); } | |
| .dda-log-row.is-warn .dda-log-level { background: rgba(217, 119, 6, 0.12); color: #b45309; } | |
| .dda-log-row.is-error .dda-log-level { background: var(--danger-glow); color: var(--danger); } | |
| .dda-log-row.is-debug .dda-log-level { background: var(--bg-hover); color: var(--text-dim); } | |
| /* Audit Log / Exception Log */ | |
| .dda-stat-cards { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); | |
| gap: 0.85rem; | |
| margin: 0 0 1rem; | |
| } | |
| .dda-stat-card { | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| background: var(--bg-card); | |
| padding: 0.9rem 1rem; | |
| text-align: center; | |
| } | |
| .dda-stat-card .dda-stat-icon { font-size: 1.1rem; line-height: 1; margin-bottom: 0.3rem; } | |
| .dda-stat-card .dda-stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.15; } | |
| .dda-stat-card .dda-stat-label { margin-top: 0.2rem; font-size: 0.76rem; color: var(--text-muted); } | |
| .dda-stat-card.is-danger .dda-stat-value { color: var(--danger); } | |
| .dda-stat-card.is-warn .dda-stat-value { color: #b45309; } | |
| .dda-badge { | |
| display: inline-block; | |
| padding: 0.1rem 0.5rem; | |
| border-radius: 999px; | |
| font-size: 0.72rem; | |
| font-weight: 700; | |
| letter-spacing: 0.02em; | |
| white-space: nowrap; | |
| } | |
| .dda-badge.is-ok { background: rgba(16, 130, 90, 0.12); color: #0f7a56; } | |
| .dda-badge.is-danger { background: var(--danger-glow); color: var(--danger); } | |
| .dda-badge.is-neutral { background: var(--bg-hover); color: var(--text-dim); } | |
| .dda-action-cell { font-family: var(--font-mono); font-size: 0.78rem; } | |
| .dda-otp-input, | |
| .dda-totp-input { | |
| letter-spacing: 0.28em; | |
| font-size: 1.15rem; | |
| font-weight: 650; | |
| font-variant-numeric: tabular-nums; | |
| text-align: center; | |
| } | |
| .dda-totp-qr { | |
| display: block; | |
| width: 180px; | |
| height: 180px; | |
| margin: 0.75rem 0; | |
| border-radius: 8px; | |
| border: 1px solid var(--border); | |
| } | |
| .dda-totp-secret code { | |
| font-size: 0.85rem; | |
| letter-spacing: 0.08em; | |
| } | |
| .dda-totp-form { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.65rem; } | |
| /* --- Sign-in method tabs (Password / Mobile OTP) --------------------------- */ | |
| .dda-auth-tabs { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 0.25rem; | |
| padding: 0.25rem; | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| margin-bottom: 1.25rem; | |
| } | |
| .dda-auth-tab { | |
| appearance: none; | |
| border: 0; | |
| background: transparent; | |
| color: var(--text-muted); | |
| font: inherit; | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| padding: 0.55rem 0.75rem; | |
| border-radius: calc(var(--radius-sm) - 3px); | |
| cursor: pointer; | |
| transition: background var(--transition), color var(--transition), box-shadow var(--transition); | |
| } | |
| .dda-auth-tab:hover { color: var(--text); } | |
| .dda-auth-tab.is-active { | |
| background: var(--bg-card); | |
| color: var(--text); | |
| box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); | |
| } | |
| /* --- Phone-number input: country code + local number, one seamless field --- */ | |
| .dda-phone-input { | |
| display: flex; | |
| align-items: stretch; | |
| gap: 0; | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| transition: border-color var(--transition), box-shadow var(--transition); | |
| overflow: hidden; | |
| } | |
| .dda-phone-input:focus-within { | |
| border-color: var(--border-focus); | |
| box-shadow: 0 0 0 3px rgba(46, 51, 197, 0.18); | |
| } | |
| .dda-phone-input .dda-country-select, | |
| .dda-phone-input input[type="tel"] { | |
| border: 0; | |
| border-radius: 0; | |
| background: transparent; | |
| box-shadow: none; | |
| padding: 0.7rem 0.75rem; | |
| color: var(--text); | |
| font-family: var(--font-sans); | |
| font-size: 0.95rem; | |
| } | |
| .dda-phone-input .dda-country-select:focus, | |
| .dda-phone-input input[type="tel"]:focus { | |
| outline: none; | |
| box-shadow: none; | |
| border: 0; | |
| } | |
| .dda-phone-input .dda-country-select { | |
| flex: 0 0 auto; | |
| width: auto; | |
| min-width: 92px; | |
| max-width: 130px; | |
| padding-right: 0.4rem; | |
| border-right: 1px solid var(--border); | |
| background-color: transparent; | |
| font-variant-numeric: tabular-nums; | |
| cursor: pointer; | |
| } | |
| .dda-phone-input input[type="tel"] { | |
| flex: 1 1 auto; | |
| min-width: 0; | |
| letter-spacing: 0.02em; | |
| } | |
| .dda-phone-input.is-invalid { border-color: var(--danger); } | |