Files
GIA/core/static/css/gia-theme.css

843 lines
16 KiB
CSS

:root {
--gia-navbar-height: 3.25rem;
--gia-page-bg: #edf2f8;
--gia-surface-1: rgba(255, 255, 255, 0.86);
--gia-surface-2: #ffffff;
--gia-surface-3: #f5f7fb;
--gia-border: rgba(15, 23, 42, 0.12);
--gia-border-strong: rgba(15, 23, 42, 0.2);
--gia-text: #0f172a;
--gia-text-muted: #526277;
--gia-text-soft: #748399;
--gia-hover: rgba(29, 78, 216, 0.08);
--gia-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
--gia-brand-surface: rgba(255, 255, 255, 0.92);
--gia-brand-border: rgba(15, 23, 42, 0.08);
--gia-brand-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
--bulma-body-background-color: var(--gia-page-bg);
--bulma-body-color: var(--gia-text);
--bulma-background: var(--gia-page-bg);
--bulma-text: var(--gia-text);
--bulma-text-strong: var(--gia-text);
--bulma-text-weak: var(--gia-text-muted);
--bulma-border: var(--gia-border);
--bulma-scheme-main: var(--gia-surface-2);
--bulma-scheme-main-bis: var(--gia-surface-3);
--bulma-scheme-main-ter: #e9eef6;
--bulma-link: #1d4ed8;
--bulma-link-light: #e8f0ff;
}
[data-theme="dark"] {
--gia-page-bg: #0b1220;
--gia-surface-1: rgba(15, 23, 42, 0.9);
--gia-surface-2: #111827;
--gia-surface-3: #182235;
--gia-border: rgba(148, 163, 184, 0.22);
--gia-border-strong: rgba(148, 163, 184, 0.34);
--gia-text: #e5edf8;
--gia-text-muted: #b8c5d7;
--gia-text-soft: #94a3b8;
--gia-hover: rgba(148, 163, 184, 0.12);
--gia-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
--gia-brand-surface: rgba(17, 24, 39, 0.94);
--gia-brand-border: rgba(148, 163, 184, 0.24);
--gia-brand-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
--bulma-body-background-color: var(--gia-page-bg);
--bulma-body-color: var(--gia-text);
--bulma-background: var(--gia-page-bg);
--bulma-text: var(--gia-text);
--bulma-text-strong: #f8fbff;
--bulma-text-weak: var(--gia-text-muted);
--bulma-border: var(--gia-border);
--bulma-scheme-main: var(--gia-surface-2);
--bulma-scheme-main-bis: var(--gia-surface-3);
--bulma-scheme-main-ter: #1d293d;
--bulma-link: #93c5fd;
--bulma-link-light: rgba(59, 130, 246, 0.18);
}
html,
body {
min-height: 100%;
background-color: var(--gia-page-bg);
color: var(--gia-text);
}
body,
body .title,
body .subtitle,
body .label,
body .content,
body .table,
body .panel-heading,
body .menu-label,
body .modal-card-title,
body .navbar-item,
body .navbar-link {
color: var(--gia-text);
}
body .help,
body .has-text-grey,
body .has-text-grey-dark,
body .has-text-grey-light {
color: var(--gia-text-muted) !important;
}
.box,
.card,
.panel,
.dropdown-content,
.modal-card,
.modal-card-head,
.modal-card-body,
.modal-card-foot,
.tabs a,
.menu-list a,
.pagination-link,
.pagination-next,
.pagination-previous,
.button.is-light,
.button.is-white {
background-color: var(--gia-surface-2);
border-color: var(--gia-border);
color: var(--gia-text);
}
.tabs.is-boxed a,
.tabs.is-boxed li a,
.tabs.is-boxed li:first-child a,
.tabs.is-boxed li:last-child a {
border-radius: 0 !important;
border-start-start-radius: 0 !important;
border-start-end-radius: 0 !important;
border-end-start-radius: 0 !important;
border-end-end-radius: 0 !important;
}
.modal-card-head,
.modal-card-foot,
.panel-heading {
background-color: var(--gia-surface-3);
}
.message.is-light .message-body,
.table-container,
.floating-window .panel {
background-color: var(--gia-surface-2) !important;
border-color: var(--gia-border) !important;
color: var(--gia-text);
}
.input,
.textarea,
.select select {
background-color: var(--gia-surface-2);
color: var(--gia-text);
border-color: var(--gia-border-strong);
box-shadow: none;
}
.input::placeholder,
.textarea::placeholder {
color: var(--gia-text-soft);
opacity: 1;
}
.icon { border-bottom: 0 !important; }
.wrap {
word-wrap: break-word;
}
.nowrap-parent {
white-space: nowrap;
}
.nowrap-child {
display: inline-block;
}
.htmx-indicator {
opacity: 0;
transition: opacity 500ms ease-in;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
opacity: 1;
}
.tooltiptext {
visibility: hidden;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
}
.rounded-tooltip:hover .tooltiptext {
visibility: visible;
}
.table {
background: transparent !important;
color: var(--gia-text);
}
tr {
transition: all 0.2s ease-in-out;
}
a.panel-block {
transition: all 0.2s ease-in-out;
}
tr:hover,
a.panel-block:hover {
cursor: pointer;
background-color: var(--gia-hover) !important;
}
.has-background-grey-lighter {
background-color: rgba(219, 219, 219, 0.5) !important;
}
.navbar {
background-color: var(--gia-surface-1) !important;
border-bottom: 1px solid var(--gia-border);
backdrop-filter: blur(10px);
}
.gia-brand-shell {
display: inline-flex;
align-items: center;
}
.gia-brand-logo {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.45rem 0.75rem;
border-radius: 16px;
background: var(--gia-brand-surface);
border: 1px solid var(--gia-brand-border);
box-shadow: var(--gia-brand-shadow);
color: var(--gia-text);
transition:
transform 0.15s ease,
box-shadow 0.15s ease,
background-color 0.15s ease,
border-color 0.15s ease;
}
.gia-brand-logo img {
display: block;
}
.section > .container.gia-page-shell,
.section > .container {
max-width: 1340px;
}
.gia-standard-page-shell {
min-width: 0;
}
.gia-page-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.gia-page-header .title,
.gia-page-header .subtitle {
max-width: 72ch;
}
.gia-page-header .subtitle {
margin-bottom: 0;
}
.table thead th {
position: sticky;
top: 0;
background: var(--gia-surface-3) !important;
color: var(--gia-text) !important;
backdrop-filter: blur(6px);
z-index: 1;
}
.table td,
.table th {
vertical-align: top;
}
.help {
max-width: 78ch;
}
.button.is-light {
border-color: var(--gia-border-strong);
}
.input:focus,
.textarea:focus,
.select select:focus {
border-color: rgba(27, 99, 214, 0.8);
box-shadow: 0 0 0 0.125em rgba(27, 99, 214, 0.14);
}
.panel {
display: flex !important;
flex-direction: column !important;
overflow: hidden;
}
html.gia-has-workspace-root,
body.gia-has-workspace {
height: 100dvh;
overflow: hidden;
}
body.gia-has-workspace {
display: flex;
flex-direction: column;
}
body.gia-has-workspace > .navbar {
flex: 0 0 auto;
}
body.gia-has-workspace > .section.gia-workspace-page {
flex: 1 1 auto;
min-height: 0;
}
.section.gia-workspace-page {
box-sizing: border-box;
min-height: 0;
overflow: hidden;
padding: 0.85rem 1rem 0.7rem;
}
.gia-workspace-shell {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.gia-workspace-main {
flex: 1 1 auto;
min-height: 0;
display: flex;
gap: 0.75rem;
align-items: stretch;
}
.gia-workspace-grid-column {
flex: 1 1 auto;
min-width: 0;
min-height: 0;
}
.gia-workspace-grid {
height: 100%;
min-height: 0;
overflow: hidden;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.gia-snap-assistant {
flex: 0 0 19rem;
min-width: 19rem;
min-height: 0;
margin: 0;
border-radius: 1rem;
border: 1px solid var(--gia-border);
background: var(--gia-surface-2);
box-shadow: var(--gia-shadow);
}
.gia-snap-assistant.is-hidden,
.gia-taskbar.is-hidden {
display: none !important;
}
.gia-snap-assistant-heading {
display: flex;
align-items: center;
gap: 0.5rem;
justify-content: space-between;
}
.gia-snap-assistant-body {
flex: 1 1 auto;
min-height: 0;
align-items: stretch;
}
.gia-snap-assistant-options {
width: 100%;
margin: 0;
display: flex;
flex-direction: column;
align-items: stretch;
}
.gia-snap-assistant-options .button {
width: 100%;
justify-content: space-between;
}
.gia-taskbar {
flex: 0 0 auto;
margin: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
overflow-x: auto;
overflow-y: hidden;
padding: 0 0.35rem;
}
.gia-workspace-tabs {
margin: 0;
}
.gia-workspace-tabs ul {
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
justify-content: flex-start;
}
.gia-workspace-tabs li {
flex: 0 0 auto;
}
.gia-workspace-tabs a {
display: flex;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
border-radius: 0 !important;
border-start-start-radius: 0 !important;
border-start-end-radius: 0 !important;
border-end-start-radius: 0 !important;
border-end-end-radius: 0 !important;
}
.gia-workspace-launcher {
display: flex;
flex-direction: column;
gap: 0.35rem;
height: 100%;
}
.gia-taskbar li.is-active a {
background: var(--bulma-link-light);
color: var(--bulma-link);
}
.gia-taskbar li.is-minimized a {
opacity: 0.7;
}
body.gia-has-workspace {
overflow: hidden;
}
html.gia-has-workspace-root {
overflow: hidden;
}
.grid-stack-item-content,
.floating-window {
display: flex !important;
flex-direction: column !important;
overflow-x: hidden !important;
overflow-y: hidden !important;
}
.gia-widget-panel {
height: 100%;
margin-bottom: 0;
display: flex;
flex-direction: column;
border-radius: 0.9rem;
border: 1px solid var(--gia-border);
background: var(--gia-surface-2);
box-shadow: var(--gia-shadow);
overflow: hidden;
}
.gia-widget-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
padding: 0.5rem 0.75rem;
line-height: 1.2;
border-bottom: 1px solid var(--gia-border);
background: var(--gia-surface-3);
}
.gia-widget-heading-main {
display: inline-flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
flex: 1 1 auto;
}
.gia-widget-heading-icon {
flex: 0 0 auto;
}
.gia-widget-title {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 600;
}
.gia-widget-actions {
margin: 0;
flex-wrap: nowrap;
}
.gia-widget-actions .button {
padding-left: 0.55rem;
padding-right: 0.55rem;
}
.gia-widget-body {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
padding: 0.75rem;
display: flex;
align-items: stretch;
}
.gia-widget-control {
flex: 1 1 auto;
height: 100%;
min-height: 0;
overflow: auto;
}
.gia-widget-control.gia-widget-control-no-scroll {
display: flex;
flex-direction: column;
overflow: hidden;
}
.gia-widget-control.gia-widget-control-no-scroll > * {
flex: 1 1 auto;
min-height: 0;
}
.grid-stack-item.is-gia-active .gia-widget-panel {
border-color: rgba(50, 115, 220, 0.45);
box-shadow: 0 0 0 2px rgba(50, 115, 220, 0.16);
}
.floating-window {
max-height: 300px;
z-index: 9000;
position: absolute;
top: 50px;
left: 50px;
}
.floating-window .panel {
background-color: var(--gia-surface-2) !important;
}
.float-right {
float: right;
padding: 0 5px;
}
.grid-stack-item:hover .ui-resizable-handle {
display: block !important;
}
.ui-resizable-handle {
z-index: 39 !important;
}
.osint-table-shell {
border: 1px solid var(--gia-border);
border-radius: 14px;
padding: 0.9rem;
background: var(--gia-surface-1);
}
.osint-table-toolbar {
margin-bottom: 0.75rem;
}
.osint-results-table-wrap {
border-radius: 10px;
overflow: auto;
}
.gia-badge,
.task-ui-badge {
border: 1px solid var(--gia-border) !important;
color: var(--gia-text) !important;
}
.gia-badge.is-light,
.task-ui-badge {
background: var(--gia-surface-3) !important;
}
.gia-badge.is-white {
background: var(--gia-surface-2) !important;
}
.gia-badge.is-dark {
background: var(--gia-text) !important;
color: var(--gia-surface-2) !important;
}
.task-ui-badge {
font-size: 0.75rem;
line-height: 1.5;
padding: 0.25em 0.75em;
font-weight: 500;
}
.gia-tag-ribbon {
display: inline-flex;
width: 100%;
margin: 0;
white-space: nowrap;
}
.gia-tag-ribbon > .tag {
margin: 0;
}
.gia-tag-ribbon-main {
flex: 1 1 auto;
min-width: 0;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding-left: 0.7rem;
padding-right: 0.7rem;
}
[data-theme="dark"] .tag.is-white {
background: var(--gia-surface-2) !important;
color: var(--gia-text) !important;
border: 1px solid var(--gia-border) !important;
}
[data-theme="dark"] .tag.is-dark {
background: var(--gia-surface-3) !important;
color: var(--gia-text) !important;
border: 1px solid var(--gia-border) !important;
}
[data-theme="dark"] .tag.is-light:not(.is-primary):not(.is-link):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):not(.is-dark):not(.is-white):not(.is-black) {
background: var(--gia-surface-3) !important;
color: var(--gia-text) !important;
border: 1px solid var(--gia-border) !important;
}
.osint-results-table th {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.osint-sort-link {
color: inherit;
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.osint-sort-link:hover {
color: #3273dc;
}
.navbar-dropdown .navbar-item.is-current-route {
background-color: var(--bulma-link-light) !important;
color: var(--bulma-link) !important;
font-weight: 600;
}
.theme-toggle-button {
display: inline-flex;
align-items: center;
justify-content: center;
}
.brand-theme-toggle {
min-width: 0;
padding: 0.45rem 0.75rem;
line-height: 1;
width: auto;
height: auto;
cursor: pointer;
}
.brand-theme-toggle:hover,
.brand-theme-toggle:focus-visible {
transform: translateY(-1px);
}
.brand-theme-toggle:focus-visible {
outline: 2px solid var(--bulma-link);
outline-offset: 2px;
}
.brand-theme-logo {
display: block;
width: 5.4rem;
height: auto;
shape-rendering: geometricPrecision;
text-rendering: geometricPrecision;
}
.brand-theme-stroke {
stroke: var(--gia-text);
}
.security-page-tabs a {
transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.gia-settings-nav .tabs ul {
flex-wrap: wrap;
}
.gia-settings-nav .tabs li {
margin-bottom: 0.2rem;
}
.gia-settings-nav .tabs a {
white-space: nowrap;
}
.gia-send-composer {
margin: 0;
padding: 0.75rem;
border: 1px solid var(--bulma-border, #dbdbdb);
border-radius: 0.875rem;
background: var(--bulma-scheme-main-bis, #f7f8fa);
}
.gia-send-composer-row {
align-items: stretch;
margin-bottom: 0;
}
.gia-send-composer-input-wrap {
display: flex;
}
.gia-send-composer-input {
min-height: 2.75rem;
max-height: 8rem;
resize: none;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.gia-send-composer-action {
display: flex;
}
.gia-send-composer-button {
height: 100%;
min-height: 2.75rem;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.navbar-dropdown.gia-navbar-dropdown {
max-width: min(24rem, calc(100vw - 1rem));
max-height: min(80vh, 34rem) !important;
overflow-y: auto !important;
}
@media print, screen and (min-width: 1024px) {
.navbar-end .has-dropdown > .navbar-dropdown.gia-navbar-dropdown {
left: auto !important;
right: 0 !important;
inset-inline-start: auto !important;
inset-inline-end: 0 !important;
}
}
@media (max-width: 768px) {
.section.gia-workspace-page {
padding: 0.75rem;
}
.gia-workspace-main {
flex-direction: column;
}
.gia-snap-assistant {
min-width: 0;
flex-basis: auto;
}
.gia-widget-heading {
align-items: flex-start;
}
.gia-widget-actions {
width: 100%;
flex-wrap: wrap;
justify-content: flex-end;
}
.gia-send-composer-row {
display: block;
}
.gia-send-composer-input {
border-radius: var(--bulma-radius, 0.375rem);
}
.gia-send-composer-action {
display: block;
margin-top: 0.75rem;
margin-left: 0 !important;
}
.gia-send-composer-button {
width: 100%;
border-radius: var(--bulma-radius, 0.375rem);
}
}
.reduced-motion,
.reduced-motion * {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}