almost functional
This commit is contained in:
Matt Batchelder
@@ -161,7 +161,7 @@ body {
|
||||
grid-template-columns: 20px 1fr;
|
||||
align-items: center;
|
||||
column-gap: 12px;
|
||||
padding: 8px 12px;
|
||||
padding: 6px 10px;
|
||||
color: #c8d5ee;
|
||||
text-decoration: none;
|
||||
transition: all var(--transition-fast);
|
||||
@@ -1191,12 +1191,13 @@ body .panel .panel-heading,
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
/* Filter card - modern container */
|
||||
.ots-filter-card {
|
||||
background: linear-gradient(180deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.92));
|
||||
border: 1px solid rgba(148, 163, 184, 0.22);
|
||||
box-shadow: 0 18px 34px rgba(8, 15, 30, 0.32);
|
||||
background: linear-gradient(135deg, rgba(15, 23, 42, 0.4), rgba(15, 23, 42, 0.2));
|
||||
border: none;
|
||||
box-shadow: 0 4px 20px rgba(6, 10, 20, 0.15);
|
||||
margin-bottom: 0;
|
||||
border-radius: 12px;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -1205,109 +1206,260 @@ body .panel .panel-heading,
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.2);
|
||||
background: rgba(15, 23, 42, 0.3);
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.ots-filter-title {
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
color: var(--color-text-primary);
|
||||
font-size: 14px;
|
||||
letter-spacing: 0.03em;
|
||||
text-transform: uppercase;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ots-filter-toggle {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
background: rgba(59, 130, 246, 0.08);
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 6px;
|
||||
transition: all var(--transition-fast);
|
||||
border-radius: 10px;
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
.ots-filter-toggle:hover {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
background: rgba(59, 130, 246, 0.16);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.ots-filter-content {
|
||||
padding: 16px;
|
||||
max-height: 600px;
|
||||
overflow: hidden;
|
||||
padding: 0 16px 12px 16px;
|
||||
max-height: none;
|
||||
min-height: auto;
|
||||
overflow: visible;
|
||||
transition: max-height 300ms ease-out, padding 300ms ease-out;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ots-filter-content.collapsed {
|
||||
max-height: 0;
|
||||
min-height: 0;
|
||||
padding: 0 16px;
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ots-filter-card .nav-tabs {
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.2);
|
||||
gap: 8px;
|
||||
margin-bottom: 14px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ots-filter-card .nav-tabs .nav-link {
|
||||
color: var(--color-text-secondary);
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
padding: 10px 14px;
|
||||
background: transparent;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
transition: all var(--transition-fast);
|
||||
.ots-filter-card .tab-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ots-filter-card .nav-tabs .nav-link.active,
|
||||
.ots-filter-card .nav-tabs .nav-link:hover {
|
||||
color: var(--color-text-primary);
|
||||
background: rgba(59, 130, 246, 0.12);
|
||||
.ots-filter-card .tab-pane {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ots-filter-card .tab-pane.active,
|
||||
.ots-filter-card .tab-pane.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ots-filter-card .form-inline {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: 12px;
|
||||
align-items: flex-end;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.ots-filter-card .form-inline .form-group,
|
||||
.ots-filter-card .form-inline .input-group {
|
||||
margin-right: 16px;
|
||||
margin-bottom: 12px;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
flex: 0 0 auto;
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.ots-filter-card .form-control,
|
||||
.ots-filter-card select,
|
||||
.ots-filter-card .select2-selection,
|
||||
.ots-filter-card .input-group-addon {
|
||||
background: var(--color-surface) !important;
|
||||
border: 1px solid var(--color-border) !important;
|
||||
.ots-filter-card .input-group-addon,
|
||||
.ots-filter-card .input-group-text {
|
||||
background: linear-gradient(180deg, rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.65)) !important;
|
||||
border: 1px solid rgba(148, 163, 184, 0.25) !important;
|
||||
color: var(--color-text-primary) !important;
|
||||
border-radius: 6px !important;
|
||||
padding: 8px 12px !important;
|
||||
font-size: 13px !important;
|
||||
transition: all var(--transition-fast) !important;
|
||||
height: 36px !important;
|
||||
border-radius: 10px !important;
|
||||
padding: 12px 14px !important;
|
||||
font-size: 15px !important;
|
||||
font-family: inherit !important;
|
||||
transition: border 150ms ease, box-shadow 150ms ease !important;
|
||||
height: 48px !important;
|
||||
line-height: 1.4 !important;
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 6px 16px rgba(6, 10, 20, 0.18) !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.ots-filter-card .input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.ots-filter-card .input-group > .form-control,
|
||||
.ots-filter-card .input-group > .custom-select,
|
||||
.ots-filter-card .input-group > .select2-container {
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.ots-filter-card .form-control:focus,
|
||||
.ots-filter-card select:focus {
|
||||
border-color: var(--color-primary) !important;
|
||||
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1) !important;
|
||||
background: var(--color-surface) !important;
|
||||
.ots-filter-card select:focus,
|
||||
.ots-filter-card .select2-selection:focus {
|
||||
border-color: rgba(96, 165, 250, 0.7) !important;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2), 0 10px 24px rgba(6, 10, 20, 0.25) !important;
|
||||
background: rgba(15, 23, 42, 0.9) !important;
|
||||
}
|
||||
|
||||
.ots-filter-card label {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 4px;
|
||||
color: var(--color-text-tertiary);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
margin-bottom: 2px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ots-filter-card .select2-selection__rendered {
|
||||
color: var(--color-text-primary) !important;
|
||||
line-height: 20px !important;
|
||||
}
|
||||
|
||||
.ots-filter-card .select2-container--default .select2-selection--single,
|
||||
.ots-filter-card .select2-container--default .select2-selection--multiple {
|
||||
background: linear-gradient(180deg, rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.65)) !important;
|
||||
border: 1px solid rgba(148, 163, 184, 0.25) !important;
|
||||
border-radius: 10px !important;
|
||||
min-height: 44px !important;
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 6px 16px rgba(6, 10, 20, 0.18) !important;
|
||||
}
|
||||
|
||||
.ots-filter-card .select2-container--default .select2-selection--multiple .select2-search__field {
|
||||
color: var(--color-text-primary) !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.ots-filter-card .select2-container--default .select2-selection--multiple .select2-selection__choice {
|
||||
background: rgba(59, 130, 246, 0.2) !important;
|
||||
border: 1px solid rgba(59, 130, 246, 0.4) !important;
|
||||
color: var(--color-text-primary) !important;
|
||||
border-radius: 999px !important;
|
||||
}
|
||||
|
||||
.ots-filter-card .bootstrap-tagsinput,
|
||||
.ots-filter-card .tagsinput {
|
||||
background: linear-gradient(180deg, rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.65)) !important;
|
||||
border: 1px solid rgba(148, 163, 184, 0.25) !important;
|
||||
border-radius: 10px !important;
|
||||
color: var(--color-text-primary) !important;
|
||||
min-height: 44px !important;
|
||||
padding: 6px 10px !important;
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 6px 16px rgba(6, 10, 20, 0.18) !important;
|
||||
}
|
||||
|
||||
.ots-filter-card .bootstrap-tagsinput input,
|
||||
.ots-filter-card .tagsinput input {
|
||||
background: transparent !important;
|
||||
color: var(--color-text-primary) !important;
|
||||
}
|
||||
|
||||
.ots-filter-card .select2-selection__arrow b {
|
||||
border-color: var(--color-text-secondary) transparent transparent transparent !important;
|
||||
}
|
||||
|
||||
.ots-filter-card .input-group {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.ots-filter-card .input-group .form-control {
|
||||
border-top-right-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
}
|
||||
|
||||
.ots-filter-card .input-group-append .input-group-text,
|
||||
.ots-filter-card .input-group-addon {
|
||||
border-top-left-radius: 0 !important;
|
||||
border-bottom-left-radius: 0 !important;
|
||||
font-weight: 600;
|
||||
height: 44px !important;
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
padding: 0 12px !important;
|
||||
}
|
||||
|
||||
.ots-filter-card .input-group .input-group-prepend .input-group-text,
|
||||
.ots-filter-card .input-group .input-group-append .input-group-text {
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
||||
.ots-filter-card .input-group .btn,
|
||||
.ots-filter-card .input-group .btn.btn-secondary {
|
||||
height: 44px;
|
||||
padding: 0 14px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.25);
|
||||
background: rgba(30, 41, 59, 0.55);
|
||||
color: var(--color-text-primary);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.ots-filter-card input::placeholder,
|
||||
.ots-filter-card textarea::placeholder {
|
||||
color: rgba(148, 163, 184, 0.7) !important;
|
||||
}
|
||||
|
||||
.ots-filter-card select {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
background-image: linear-gradient(45deg, transparent 50%, rgba(148, 163, 184, 0.7) 50%),
|
||||
linear-gradient(135deg, rgba(148, 163, 184, 0.7) 50%, transparent 50%);
|
||||
background-position: calc(100% - 16px) 17px, calc(100% - 12px) 17px;
|
||||
background-size: 4px 4px, 4px 4px;
|
||||
background-repeat: no-repeat;
|
||||
padding-right: 28px !important;
|
||||
}
|
||||
|
||||
.ots-filter-card .form-check-input {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.35);
|
||||
background: rgba(15, 23, 42, 0.65);
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
.ots-filter-card .form-check-input:checked {
|
||||
background: var(--color-primary);
|
||||
border-color: rgba(96, 165, 250, 0.8);
|
||||
}
|
||||
|
||||
.ots-grid-with-folders {
|
||||
display: grid;
|
||||
grid-template-columns: 260px 1fr;
|
||||
@@ -2251,17 +2403,34 @@ legend {
|
||||
/* Dropdowns, modals, and popovers */
|
||||
.dropdown-menu,
|
||||
.dropdown-toggle,
|
||||
.popover,
|
||||
.modal,
|
||||
.modal-content,
|
||||
.modal-header,
|
||||
.modal-body,
|
||||
.modal-footer {
|
||||
.popover {
|
||||
background-color: var(--color-surface) !important;
|
||||
color: var(--color-text-primary) !important;
|
||||
border: 1px solid var(--color-border) !important;
|
||||
}
|
||||
|
||||
.modal,
|
||||
.modal-body,
|
||||
.modal-footer {
|
||||
background-color: transparent !important;
|
||||
color: var(--color-text-primary) !important;
|
||||
border: 1px solid var(--color-border) !important;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: var(--color-surface) !important;
|
||||
color: var(--color-text-primary) !important;
|
||||
border: 1px solid var(--color-border) !important;
|
||||
}
|
||||
|
||||
.modal-backdrop,
|
||||
.modal-backdrop.show,
|
||||
.modal-backdrop.in {
|
||||
background-color: rgba(0, 0, 0, 0.3) !important;
|
||||
backdrop-filter: blur(4px) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background-color: var(--color-surface-elevated) !important;
|
||||
border-bottom: 1px solid var(--color-border) !important;
|
||||
@@ -3070,6 +3239,22 @@ textarea:focus {
|
||||
|
||||
.modal-content {
|
||||
border-radius: var(--ots-radius-lg);
|
||||
background-color: var(--ots-surface-2) !important;
|
||||
}
|
||||
|
||||
.modal,
|
||||
.modal-header,
|
||||
.modal-body,
|
||||
.modal-footer {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.modal-backdrop,
|
||||
.modal-backdrop.show,
|
||||
.modal-backdrop.in {
|
||||
background-color: rgba(0, 0, 0, 0.3) !important;
|
||||
backdrop-filter: blur(4px) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
|
||||
Reference in New Issue
Block a user