Add files via upload

web/static/css/c2.css

@@ -179,6 +179,156 @@ html[data-theme="dark"] .c2-session-main-empty__icon {
     padding-right: 14px;
 }
 
+.c2-modal select.form-control.c2-native-select {
+    appearance: auto;
+    -webkit-appearance: menulist-button;
+    background-image: none;
+    padding-right: 14px;
+}
+
+.c2-form-native-select {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+.c2-form-select-ui {
+    position: relative;
+    width: 100%;
+    min-width: 0;
+}
+
+.c2-form-select-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    width: 100%;
+    min-width: 0;
+    min-height: 40px;
+    padding: 10px 14px;
+    border: 1px solid var(--c2-border);
+    border-radius: var(--c2-radius-sm);
+    background: var(--c2-surface);
+    color: var(--c2-text);
+    font-size: 14px;
+    line-height: 1.25;
+    cursor: pointer;
+    font-family: inherit;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.c2-form-select-trigger:hover:not(:disabled) {
+    border-color: var(--c2-accent);
+}
+
+.c2-form-select-ui.open .c2-form-select-trigger {
+    border-color: var(--c2-accent);
+    box-shadow: 0 0 0 2px var(--c2-accent-dim);
+}
+
+.c2-form-select-ui.open {
+    z-index: 120;
+}
+
+.c2-form-select-ui.is-disabled .c2-form-select-trigger {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.c2-form-select-value {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: left;
+}
+
+.c2-form-select-caret {
+    flex-shrink: 0;
+    color: var(--c2-text-muted);
+    transition: transform 0.15s ease;
+}
+
+.c2-form-select-ui.open .c2-form-select-caret {
+    transform: rotate(180deg);
+}
+
+.c2-form-select-dropdown {
+    display: none;
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    right: 0;
+    z-index: 200;
+    max-height: 280px;
+    overflow-y: auto;
+    padding: 4px;
+    background: var(--c2-surface);
+    border: 1px solid var(--c2-border);
+    border-radius: var(--c2-radius-sm);
+    box-shadow: var(--c2-shadow-lg);
+}
+
+.c2-form-select-ui.open .c2-form-select-dropdown {
+    display: block;
+}
+
+.c2-form-select-option {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    padding: 8px 10px;
+    border: none;
+    border-radius: var(--c2-radius-xs);
+    background: transparent;
+    color: var(--c2-text);
+    font-size: 13px;
+    font-family: inherit;
+    cursor: pointer;
+    text-align: left;
+    transition: background 0.12s ease, color 0.12s ease;
+}
+
+.c2-form-select-option:hover {
+    background: var(--c2-surface-alt);
+}
+
+.c2-form-select-option.is-selected {
+    background: var(--c2-accent-dim);
+    color: var(--c2-accent);
+    font-weight: 600;
+}
+
+.c2-form-select-check {
+    width: 14px;
+    flex-shrink: 0;
+    visibility: hidden;
+    color: var(--c2-accent);
+    font-size: 12px;
+    line-height: 1;
+}
+
+.c2-form-select-option.is-selected .c2-form-select-check {
+    visibility: visible;
+}
+
+.c2-form-select-label {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
 #page-c2-payloads textarea.form-control,
 .c2-modal textarea.form-control {
     resize: vertical;