1135 lines
24 KiB
CSS
1135 lines
24 KiB
CSS
/* =========================================================
|
|
SIG - BuscadorCatalogo
|
|
Archivo: ~/Styles/UcBuscadorCatalogo.css
|
|
========================================================= */
|
|
|
|
.ucbc {
|
|
--ucbc-primary: #337ab7;
|
|
--ucbc-primary-hover: #286090;
|
|
--ucbc-border: #cfd6dd;
|
|
--ucbc-border-focus: #66afe9;
|
|
--ucbc-background: #ffffff;
|
|
--ucbc-background-soft: #f7f9fb;
|
|
--ucbc-text: #333333;
|
|
--ucbc-text-muted: #6b7280;
|
|
--ucbc-danger: #b94a48;
|
|
--ucbc-danger-background: #fdf2f2;
|
|
--ucbc-info-background: #eef7fd;
|
|
--ucbc-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
color: var(--ucbc-text);
|
|
font-family: inherit;
|
|
}
|
|
|
|
.ucbc *,
|
|
.ucbc *::before,
|
|
.ucbc *::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.ucbc [hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
/* ---------------------------------------------------------
|
|
Entradas
|
|
--------------------------------------------------------- */
|
|
|
|
.ucbc-search,
|
|
.ucbc-selected {
|
|
height: 34px;
|
|
padding: 6px 10px;
|
|
border: 1px solid var(--ucbc-border);
|
|
border-radius: 4px;
|
|
background: var(--ucbc-background);
|
|
color: var(--ucbc-text);
|
|
font: inherit;
|
|
line-height: 20px;
|
|
outline: none;
|
|
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
|
}
|
|
|
|
.ucbc-search {
|
|
min-width: 180px;
|
|
}
|
|
|
|
.ucbc-selected {
|
|
flex: 1 1 220px;
|
|
min-width: 180px;
|
|
cursor: default;
|
|
}
|
|
|
|
.ucbc-search:focus,
|
|
.ucbc-selected:focus {
|
|
border-color: var(--ucbc-border-focus);
|
|
box-shadow: 0 0 0 2px rgba(102, 175, 233, 0.2);
|
|
}
|
|
|
|
.ucbc-selected:disabled {
|
|
opacity: 1;
|
|
color: var(--ucbc-text);
|
|
background: var(--ucbc-background-soft);
|
|
-webkit-text-fill-color: var(--ucbc-text);
|
|
}
|
|
|
|
.ucbc-search:disabled,
|
|
.ucbc-button:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* ---------------------------------------------------------
|
|
Botones
|
|
--------------------------------------------------------- */
|
|
|
|
.ucbc-button {
|
|
height: 34px;
|
|
min-width: 34px;
|
|
padding: 6px 10px;
|
|
border: 1px solid var(--ucbc-border);
|
|
border-radius: 4px;
|
|
background: var(--ucbc-background);
|
|
color: var(--ucbc-text);
|
|
font: inherit;
|
|
line-height: 20px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
outline: none;
|
|
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
|
|
}
|
|
|
|
.ucbc-button:hover:not(:disabled),
|
|
.ucbc-button:focus:not(:disabled) {
|
|
border-color: #9ca8b3;
|
|
background: #f1f4f7;
|
|
}
|
|
|
|
.ucbc-button:focus-visible {
|
|
border-color: var(--ucbc-border-focus);
|
|
box-shadow: 0 0 0 2px rgba(102, 175, 233, 0.25);
|
|
}
|
|
|
|
.ucbc-search-button {
|
|
border-color: var(--ucbc-primary);
|
|
background: var(--ucbc-primary);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.ucbc-search-button:hover:not(:disabled),
|
|
.ucbc-search-button:focus:not(:disabled) {
|
|
border-color: var(--ucbc-primary-hover);
|
|
background: var(--ucbc-primary-hover);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.ucbc-columns-button {
|
|
padding-right: 9px;
|
|
padding-left: 9px;
|
|
}
|
|
|
|
.ucbc-clear-button {
|
|
flex: 0 0 34px;
|
|
padding: 2px 8px 5px;
|
|
border-color: #d9b6b5;
|
|
color: var(--ucbc-danger);
|
|
font-size: 22px;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.ucbc-clear-button:hover:not(:disabled),
|
|
.ucbc-clear-button:focus:not(:disabled) {
|
|
border-color: var(--ucbc-danger);
|
|
background: var(--ucbc-danger-background);
|
|
color: #8a2f2d;
|
|
}
|
|
|
|
.ucbc-loading .ucbc-search-button i {
|
|
animation: ucbc-spin 0.8s linear infinite;
|
|
}
|
|
|
|
@keyframes ucbc-spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* ---------------------------------------------------------
|
|
Panel desplegable
|
|
--------------------------------------------------------- */
|
|
|
|
.ucbc-panel {
|
|
position: absolute;
|
|
top: calc(100% + 5px);
|
|
right: 0;
|
|
left: 0;
|
|
z-index: 1055;
|
|
min-width: 300px;
|
|
max-height: 430px;
|
|
overflow: visible;
|
|
border: 1px solid var(--ucbc-border);
|
|
border-radius: 5px;
|
|
background: var(--ucbc-background);
|
|
box-shadow: var(--ucbc-shadow);
|
|
}
|
|
|
|
.ucbc-status {
|
|
padding: 12px 14px;
|
|
border-bottom: 1px solid #e6eaee;
|
|
color: var(--ucbc-text-muted);
|
|
background: var(--ucbc-background-soft);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.ucbc-status-loading,
|
|
.ucbc-status-info {
|
|
color: #31708f;
|
|
background: var(--ucbc-info-background);
|
|
}
|
|
|
|
.ucbc-status-error {
|
|
color: var(--ucbc-danger);
|
|
background: var(--ucbc-danger-background);
|
|
}
|
|
|
|
.ucbc-status-empty {
|
|
color: var(--ucbc-text-muted);
|
|
background: var(--ucbc-background-soft);
|
|
}
|
|
|
|
/* ---------------------------------------------------------
|
|
Selector de columna
|
|
--------------------------------------------------------- */
|
|
|
|
.ucbc-column-menu {
|
|
position: absolute;
|
|
top: 0;
|
|
right: auto;
|
|
left: 0;
|
|
z-index: 3;
|
|
min-width: 230px;
|
|
max-width: min(340px, 100%);
|
|
padding: 6px;
|
|
border: 1px solid var(--ucbc-border);
|
|
border-radius: 5px;
|
|
background: var(--ucbc-background);
|
|
box-shadow: var(--ucbc-shadow);
|
|
}
|
|
|
|
.ucbc-column-options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.ucbc-column-option {
|
|
width: 100%;
|
|
padding: 8px 10px;
|
|
border: 0;
|
|
border-radius: 3px;
|
|
background: transparent;
|
|
color: var(--ucbc-text);
|
|
font: inherit;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ucbc-column-option:hover,
|
|
.ucbc-column-option:focus {
|
|
background: #eef3f7;
|
|
outline: none;
|
|
}
|
|
|
|
.ucbc-column-option-selected {
|
|
background: var(--ucbc-primary);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.ucbc-column-option-selected:hover,
|
|
.ucbc-column-option-selected:focus {
|
|
background: var(--ucbc-primary-hover);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.ucbc-selected-column-label {
|
|
flex-basis: 100%;
|
|
color: var(--ucbc-text-muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* ---------------------------------------------------------
|
|
Resultados
|
|
--------------------------------------------------------- */
|
|
|
|
.ucbc-results {
|
|
max-height: 330px;
|
|
overflow: auto;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
.ucbc-results-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
background: var(--ucbc-background);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.ucbc-results-table th,
|
|
.ucbc-results-table td {
|
|
padding: 9px 10px;
|
|
border-right: 1px solid #edf0f2;
|
|
border-bottom: 1px solid #e3e7ea;
|
|
text-align: left;
|
|
vertical-align: middle;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ucbc-results-table th:last-child,
|
|
.ucbc-results-table td:last-child {
|
|
border-right: 0;
|
|
}
|
|
|
|
.ucbc-results-table th {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
background: #f3f6f8;
|
|
color: #4b5563;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.ucbc-result-row {
|
|
cursor: pointer;
|
|
outline: none;
|
|
}
|
|
|
|
.ucbc-result-row:nth-child(even) {
|
|
background: #fafbfc;
|
|
}
|
|
|
|
.ucbc-result-row:hover,
|
|
.ucbc-result-row:focus {
|
|
background: #eaf4fb;
|
|
}
|
|
|
|
.ucbc-result-row:focus {
|
|
box-shadow: inset 3px 0 0 var(--ucbc-primary);
|
|
}
|
|
|
|
/* ---------------------------------------------------------
|
|
Indicador de intención de cambio de página
|
|
--------------------------------------------------------- */
|
|
|
|
.ucbc-page-intent {
|
|
position: absolute;
|
|
z-index: 6;
|
|
left: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
max-width: calc(100% - 24px);
|
|
padding: 8px 14px;
|
|
border: 1px solid rgba(51, 122, 183, 0.55);
|
|
border-radius: 18px;
|
|
background: rgba(255, 255, 255, 0.97);
|
|
color: var(--ucbc-primary);
|
|
box-shadow: 0 5px 16px rgba(0, 0, 0, 0.18);
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
white-space: nowrap;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transform: translateX(-50%) scale(0.94);
|
|
transition: opacity 0.16s ease, visibility 0.16s ease, transform 0.16s ease;
|
|
}
|
|
|
|
.ucbc-page-intent-next {
|
|
bottom: 50px;
|
|
}
|
|
|
|
.ucbc-page-intent-previous {
|
|
top: 44px;
|
|
}
|
|
|
|
.ucbc-page-intent-visible {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateX(-50%) scale(1);
|
|
}
|
|
|
|
.ucbc-page-intent-complete {
|
|
border-color: var(--ucbc-primary);
|
|
background: var(--ucbc-primary);
|
|
color: #ffffff;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.ucbc-page-intent-arrow {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 0 0 22px;
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 50%;
|
|
background: currentColor;
|
|
color: #ffffff;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.ucbc-page-intent-next
|
|
.ucbc-page-intent-arrow {
|
|
animation: ucbc-page-intent-down 0.7s ease-in-out infinite;
|
|
}
|
|
|
|
.ucbc-page-intent-previous
|
|
.ucbc-page-intent-arrow {
|
|
animation: ucbc-page-intent-up 0.7s ease-in-out infinite;
|
|
}
|
|
|
|
.ucbc-page-intent-complete
|
|
.ucbc-page-intent-arrow {
|
|
background: #ffffff;
|
|
color: var(--ucbc-primary);
|
|
}
|
|
|
|
.ucbc-page-intent-label {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.ucbc-page-intent-dots {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.ucbc-page-intent-dot {
|
|
display: block;
|
|
width: 7px;
|
|
height: 7px;
|
|
border: 1px solid currentColor;
|
|
border-radius: 50%;
|
|
opacity: 0.35;
|
|
transform: scale(0.82);
|
|
transition: opacity 0.13s ease, transform 0.13s ease, background-color 0.13s ease;
|
|
}
|
|
|
|
.ucbc-page-intent-dot-active {
|
|
background: currentColor;
|
|
opacity: 1;
|
|
transform: scale(1.16);
|
|
animation: ucbc-page-intent-dot 0.38s ease;
|
|
}
|
|
|
|
@keyframes ucbc-page-intent-down {
|
|
0%, 100% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
50% {
|
|
transform: translateY(3px);
|
|
}
|
|
}
|
|
|
|
@keyframes ucbc-page-intent-up {
|
|
0%, 100% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
50% {
|
|
transform: translateY(-3px);
|
|
}
|
|
}
|
|
|
|
@keyframes ucbc-page-intent-dot {
|
|
0% {
|
|
transform: scale(0.72);
|
|
}
|
|
|
|
55% {
|
|
transform: scale(1.42);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1.16);
|
|
}
|
|
}
|
|
|
|
/* ---------------------------------------------------------
|
|
Ordenamiento múltiple por encabezados
|
|
--------------------------------------------------------- */
|
|
|
|
.ucbc-results-table
|
|
.ucbc-sortable-header {
|
|
padding: 0;
|
|
user-select: none;
|
|
}
|
|
|
|
.ucbc-sort-header-content {
|
|
display: flex;
|
|
align-items: stretch;
|
|
min-height: 36px;
|
|
}
|
|
|
|
.ucbc-sort-title {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
padding: 9px 6px 9px 10px;
|
|
border: 0;
|
|
background: transparent;
|
|
color: inherit;
|
|
font: inherit;
|
|
font-weight: 600;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
outline: none;
|
|
}
|
|
|
|
.ucbc-sort-title:hover,
|
|
.ucbc-sort-title:focus {
|
|
background: #e8f1f8;
|
|
}
|
|
|
|
.ucbc-sort-title:focus-visible {
|
|
box-shadow: inset 0 0 0 2px var(--ucbc-border-focus);
|
|
}
|
|
|
|
.ucbc-sortable-header-active {
|
|
background: #e6f1f9 !important;
|
|
color: var(--ucbc-primary) !important;
|
|
}
|
|
|
|
.ucbc-sort-title:disabled,
|
|
.ucbc-sort-remove:disabled {
|
|
cursor: wait;
|
|
opacity: 0.65;
|
|
}
|
|
|
|
.ucbc-sort-indicators {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
flex: 0 0 auto;
|
|
min-width: 34px;
|
|
padding: 0 4px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ucbc-sort-direction {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 10px;
|
|
font-size: 10px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.ucbc-sort-priority {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 18px;
|
|
height: 18px;
|
|
padding: 0 5px;
|
|
border-radius: 9px;
|
|
background: var(--ucbc-primary);
|
|
color: #ffffff;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.ucbc-sort-remove {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 0 0 28px;
|
|
width: 28px;
|
|
min-width: 28px;
|
|
padding: 0;
|
|
border: 0;
|
|
border-left: 1px solid rgba(51, 122, 183, 0.18);
|
|
background: transparent;
|
|
color: var(--ucbc-danger);
|
|
font: inherit;
|
|
font-size: 18px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
outline: none;
|
|
}
|
|
|
|
.ucbc-sort-remove:hover,
|
|
.ucbc-sort-remove:focus {
|
|
background: var(--ucbc-danger-background);
|
|
color: #8a2f2d;
|
|
}
|
|
|
|
.ucbc-sort-remove:focus-visible {
|
|
box-shadow: inset 0 0 0 2px rgba(185, 74, 72, 0.35);
|
|
}
|
|
|
|
/* ---------------------------------------------------------
|
|
Paginación
|
|
--------------------------------------------------------- */
|
|
|
|
.ucbc-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
padding: 8px 10px;
|
|
border-top: 1px solid #e3e7ea;
|
|
background: var(--ucbc-background-soft);
|
|
}
|
|
|
|
.ucbc-page-button {
|
|
flex: 0 0 auto;
|
|
height: 30px;
|
|
min-width: 68px;
|
|
padding: 4px 10px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.ucbc-page-label {
|
|
flex: 1;
|
|
color: var(--ucbc-text-muted);
|
|
font-size: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* ---------------------------------------------------------
|
|
Responsive
|
|
--------------------------------------------------------- */
|
|
|
|
@media (max-width: 700px) {
|
|
.ucbc-search {
|
|
flex: 1 1 calc(100% - 92px);
|
|
width: auto !important;
|
|
}
|
|
|
|
.ucbc-selected {
|
|
flex: 1 1 calc(100% - 42px);
|
|
order: 4;
|
|
}
|
|
|
|
.ucbc-clear-button {
|
|
order: 5;
|
|
}
|
|
|
|
.ucbc-panel {
|
|
min-width: 100%;
|
|
}
|
|
|
|
.ucbc-footer {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.ucbc-page-label {
|
|
order: -1;
|
|
flex-basis: 100%;
|
|
}
|
|
|
|
.ucbc-page-button {
|
|
flex: 1 1 calc(50% - 10px);
|
|
}
|
|
|
|
.ucbc-page-intent {
|
|
max-width: calc(100% - 16px);
|
|
padding: 7px 10px;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.ucbc-page-intent,
|
|
.ucbc-page-intent-arrow,
|
|
.ucbc-page-intent-dot {
|
|
animation: none !important;
|
|
transition: none !important;
|
|
}
|
|
}
|
|
|
|
/* ---------------------------------------------------------
|
|
Filtros visibles para el usuario
|
|
--------------------------------------------------------- */
|
|
|
|
.ucbc-user-filters-button {
|
|
padding-right: 9px;
|
|
padding-left: 9px;
|
|
color: var(--ucbc-primary);
|
|
}
|
|
|
|
.ucbc-user-filters-button:hover:not(:disabled),
|
|
.ucbc-user-filters-button:focus:not(:disabled) {
|
|
border-color: var(--ucbc-primary);
|
|
background: var(--ucbc-info-background);
|
|
color: var(--ucbc-primary-hover);
|
|
}
|
|
|
|
.ucbc-user-filters-host {
|
|
position: static;
|
|
flex: 1 0 100%;
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.ucbc-user-filter-chips {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
width: 100%;
|
|
padding-top: 2px;
|
|
}
|
|
|
|
.ucbc-user-filter-chip {
|
|
display: inline-flex;
|
|
align-items: stretch;
|
|
min-width: 150px;
|
|
max-width: min(320px, 100%);
|
|
min-height: 48px;
|
|
overflow: hidden;
|
|
border: 1px solid #d5dce3;
|
|
border-radius: 3px;
|
|
background: #f8fafc;
|
|
}
|
|
|
|
.ucbc-user-filter-chip-edit {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
min-width: 0;
|
|
padding: 6px 10px;
|
|
border: 0;
|
|
background: transparent;
|
|
color: var(--ucbc-text);
|
|
font: inherit;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ucbc-user-filter-chip-edit:hover,
|
|
.ucbc-user-filter-chip-edit:focus {
|
|
background: #eef4f8;
|
|
outline: none;
|
|
}
|
|
|
|
.ucbc-user-filter-chip-title {
|
|
overflow: hidden;
|
|
color: #87919b;
|
|
font-size: 10px;
|
|
line-height: 14px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ucbc-user-filter-chip-value {
|
|
overflow: hidden;
|
|
color: #263442;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
line-height: 18px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ucbc-user-filter-chip-remove {
|
|
flex: 0 0 30px;
|
|
width: 30px;
|
|
padding: 0;
|
|
border: 0;
|
|
border-left: 1px solid #e1e6eb;
|
|
background: transparent;
|
|
color: #9aa4ad;
|
|
font-size: 18px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ucbc-user-filter-chip-remove:hover,
|
|
.ucbc-user-filter-chip-remove:focus {
|
|
background: var(--ucbc-danger-background);
|
|
color: var(--ucbc-danger);
|
|
outline: none;
|
|
}
|
|
|
|
.ucbc-user-filter-panel {
|
|
position: absolute;
|
|
top: 39px;
|
|
right: auto;
|
|
left: 0;
|
|
z-index: 1060;
|
|
width: 300px;
|
|
max-width: calc(100vw - 24px);
|
|
overflow: hidden;
|
|
border: 1px solid var(--ucbc-border);
|
|
border-radius: 5px;
|
|
background: var(--ucbc-background);
|
|
box-shadow: var(--ucbc-shadow);
|
|
}
|
|
|
|
.ucbc-user-filter-panel-expanded {
|
|
width: 680px;
|
|
}
|
|
|
|
.ucbc-user-filter-panel-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
min-height: 42px;
|
|
padding: 8px 12px;
|
|
border-bottom: 1px solid #e6eaee;
|
|
background: var(--ucbc-background-soft);
|
|
}
|
|
|
|
.ucbc-user-filter-panel-close {
|
|
width: 28px;
|
|
height: 28px;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 3px;
|
|
background: transparent;
|
|
color: #7d8790;
|
|
font-size: 20px;
|
|
line-height: 26px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ucbc-user-filter-panel-close:hover,
|
|
.ucbc-user-filter-panel-close:focus {
|
|
background: #e9edf1;
|
|
color: var(--ucbc-text);
|
|
outline: none;
|
|
}
|
|
|
|
.ucbc-user-filter-message {
|
|
padding: 9px 12px;
|
|
border-bottom: 1px solid #f0d8d8;
|
|
background: var(--ucbc-danger-background);
|
|
color: var(--ucbc-danger);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.ucbc-user-filter-menu-layout {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
min-height: 180px;
|
|
max-height: 430px;
|
|
}
|
|
|
|
.ucbc-user-filter-menu-layout-expanded {
|
|
grid-template-columns: 290px minmax(0, 1fr);
|
|
}
|
|
|
|
.ucbc-user-filter-fields-menu {
|
|
min-width: 0;
|
|
overflow: auto;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.ucbc-user-filter-menu-layout-expanded .ucbc-user-filter-fields-menu {
|
|
border-right: 1px solid #e5e9ed;
|
|
}
|
|
|
|
.ucbc-user-filter-menu-caption {
|
|
padding: 9px 12px 7px;
|
|
color: var(--ucbc-text-muted);
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.03em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.ucbc-user-filter-definition-menu {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0 6px 8px;
|
|
}
|
|
|
|
.ucbc-user-filter-option {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
width: 100%;
|
|
min-height: 40px;
|
|
padding: 8px 9px;
|
|
border: 0;
|
|
border-radius: 3px;
|
|
background: transparent;
|
|
color: var(--ucbc-text);
|
|
font: inherit;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ucbc-user-filter-option > i:first-child {
|
|
flex: 0 0 17px;
|
|
width: 17px;
|
|
color: var(--ucbc-primary);
|
|
text-align: center;
|
|
}
|
|
|
|
.ucbc-user-filter-option:hover,
|
|
.ucbc-user-filter-option:focus {
|
|
background: #eef4f8;
|
|
outline: none;
|
|
}
|
|
|
|
.ucbc-user-filter-option-selected {
|
|
background: #e7f1f8;
|
|
color: #235f88;
|
|
}
|
|
|
|
.ucbc-user-filter-option-text {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ucbc-user-filter-option-state {
|
|
display: inline-flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
gap: 7px;
|
|
}
|
|
|
|
.ucbc-user-filter-option-active {
|
|
color: #3c8c54;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.ucbc-user-filter-option-arrow {
|
|
color: #9aa5af;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.ucbc-user-filter-empty {
|
|
padding: 18px 14px;
|
|
color: var(--ucbc-text-muted);
|
|
font-size: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
.ucbc-user-filter-editor {
|
|
min-width: 0;
|
|
padding: 12px;
|
|
overflow: auto;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.ucbc-user-filter-back {
|
|
display: none;
|
|
margin: 0 0 10px;
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
color: var(--ucbc-primary);
|
|
font: inherit;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ucbc-user-filter-back:hover,
|
|
.ucbc-user-filter-back:focus {
|
|
color: var(--ucbc-primary-hover);
|
|
text-decoration: underline;
|
|
outline: none;
|
|
}
|
|
|
|
.ucbc-user-filter-editor-title {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.ucbc-user-filter-editor-title strong {
|
|
color: #263442;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.ucbc-user-filter-editor-title span {
|
|
color: var(--ucbc-text-muted);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.ucbc-user-filter-editor-fields {
|
|
display: grid;
|
|
grid-template-columns: minmax(145px, 0.45fr) minmax(180px, 1fr);
|
|
gap: 8px;
|
|
}
|
|
|
|
.ucbc-user-filter-operator,
|
|
.ucbc-user-filter-value {
|
|
width: 100%;
|
|
height: 34px;
|
|
padding: 6px 9px;
|
|
border: 1px solid var(--ucbc-border);
|
|
border-radius: 4px;
|
|
background: #ffffff;
|
|
color: var(--ucbc-text);
|
|
font: inherit;
|
|
outline: none;
|
|
}
|
|
|
|
.ucbc-user-filter-operator:focus,
|
|
.ucbc-user-filter-value:focus {
|
|
border-color: var(--ucbc-border-focus);
|
|
box-shadow: 0 0 0 2px rgba(102, 175, 233, 0.2);
|
|
}
|
|
|
|
.ucbc-user-filter-apply {
|
|
margin-top: 10px;
|
|
border-color: var(--ucbc-primary);
|
|
background: var(--ucbc-primary);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.ucbc-user-filter-apply:hover:not(:disabled),
|
|
.ucbc-user-filter-apply:focus:not(:disabled) {
|
|
border-color: var(--ucbc-primary-hover);
|
|
background: var(--ucbc-primary-hover);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.ucbc-user-filter-values-container {
|
|
min-width: 0;
|
|
}
|
|
|
|
.ucbc-user-filter-values-search {
|
|
position: relative;
|
|
margin-bottom: 9px;
|
|
}
|
|
|
|
.ucbc-user-filter-values-search > i {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 10px;
|
|
color: #8b97a1;
|
|
transform: translateY(-50%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ucbc-user-filter-values-search-input {
|
|
width: 100%;
|
|
height: 34px;
|
|
padding: 6px 10px 6px 30px;
|
|
border: 1px solid var(--ucbc-border);
|
|
border-radius: 4px;
|
|
background: #ffffff;
|
|
color: var(--ucbc-text);
|
|
font: inherit;
|
|
outline: none;
|
|
}
|
|
|
|
.ucbc-user-filter-values-search-input:focus {
|
|
border-color: var(--ucbc-border-focus);
|
|
box-shadow: 0 0 0 2px rgba(102, 175, 233, 0.2);
|
|
}
|
|
|
|
.ucbc-user-filter-values-menu {
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-height: 335px;
|
|
overflow-y: auto;
|
|
border: 1px solid #e1e6eb;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.ucbc-user-filter-value-option {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
width: 100%;
|
|
min-height: 38px;
|
|
padding: 8px 10px;
|
|
border: 0;
|
|
border-bottom: 1px solid #edf0f2;
|
|
background: #ffffff;
|
|
color: var(--ucbc-text);
|
|
font: inherit;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ucbc-user-filter-value-option:last-of-type {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.ucbc-user-filter-value-option:hover,
|
|
.ucbc-user-filter-value-option:focus {
|
|
background: #eef4f8;
|
|
outline: none;
|
|
}
|
|
|
|
.ucbc-user-filter-value-option > span {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ucbc-user-filter-value-option > i {
|
|
flex: 0 0 auto;
|
|
color: #3c8c54;
|
|
}
|
|
|
|
.ucbc-user-filter-value-option-selected {
|
|
background: #e7f1f8;
|
|
color: #235f88;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.ucbc-user-filter-no-matches {
|
|
border-top: 0;
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.ucbc-user-filter-panel,
|
|
.ucbc-user-filter-panel-expanded {
|
|
top: 78px;
|
|
right: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.ucbc-user-filter-menu-layout-expanded {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.ucbc-user-filter-menu-layout-expanded .ucbc-user-filter-fields-menu {
|
|
display: none;
|
|
border-right: 0;
|
|
}
|
|
|
|
.ucbc-user-filter-back {
|
|
display: inline-block;
|
|
}
|
|
|
|
.ucbc-user-filter-editor-fields {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.ucbc-user-filter-chip {
|
|
max-width: 100%;
|
|
}
|
|
}
|