Template:Form styles.css: Difference between revisions

Latest revision as of 04:36, 20 January 2026

/* Page Forms Dark Mode Styles */
/* Fixes visibility issues for form inputs in night mode */

/* ===== LIGHT MODE BASE STYLES ===== */

/* Form table styling */
.formtable {
    background-color: #ffffff;
}

.formtable th {
    color: #333333;
}

.formtable td {
    color: #333333;
}

/* Section headers in forms */
.formtable td[style*="background:#f0f0f0"],
.formtable td[style*="background: #f0f0f0"] {
    background-color: #f0f0f0 !important;
    color: #333333 !important;
}

/* Token input fields (used for file selection) */
.pfTokens {
    background-color: #ffffff !important;
    border-color: #a2a9b1 !important;
}

.pfTokens .token {
    background-color: #f0f0f5 !important;
    color: #333333 !important;
    border-color: #c0c0c5 !important;
}

.pfTokens .token .close {
    color: #666666 !important;
}

.pfTokens input[type="text"] {
    background-color: #ffffff !important;
    color: #333333 !important;
}

/* Combobox inputs */
.pfComboBox,
.pfComboBox input {
    background-color: #ffffff !important;
    color: #333333 !important;
}

/* Standard text inputs - both inside and outside formtable */
input[type="text"],
input[type="url"],
input[type="number"],
textarea,
select {
    background-color: #ffffff;
    color: #333333;
    border-color: #a2a9b1;
}

/* Autocomplete dropdown */
.ui-autocomplete,
.ui-menu {
    background-color: #ffffff !important;
    border-color: #a2a9b1 !important;
}

.ui-autocomplete .ui-menu-item,
.ui-menu .ui-menu-item {
    color: #333333 !important;
}

.ui-autocomplete .ui-menu-item:hover,
.ui-autocomplete .ui-state-focus,
.ui-menu .ui-menu-item:hover,
.ui-menu .ui-state-focus {
    background-color: #e8e8e8 !important;
    color: #333333 !important;
}

/* ===== DARK MODE STYLES ===== */

/* User preference: night mode */
html.skin-theme-clientpref-night .formtable {
    background-color: #1e1e2e;
}

html.skin-theme-clientpref-night .formtable th {
    color: #cdd6f4;
}

html.skin-theme-clientpref-night .formtable td {
    color: #cdd6f4;
}

/* Section headers - override inline styles */
html.skin-theme-clientpref-night .formtable td[style*="background:#f0f0f0"],
html.skin-theme-clientpref-night .formtable td[style*="background: #f0f0f0"] {
    background-color: #45475a !important;
    color: #cdd6f4 !important;
}

/* Info boxes with green backgrounds */
html.skin-theme-clientpref-night div[style*="background: #e8f4e8"],
html.skin-theme-clientpref-night div[style*="background:#e8f4e8"] {
    background-color: #2d4a3e !important;
    border-color: #4a7c5a !important;
    color: #cdd6f4 !important;
}

/* Token input fields - with high specificity */
html.skin-theme-clientpref-night .pfTokens {
    background-color: #313244 !important;
    border-color: #45475a !important;
}

html.skin-theme-clientpref-night .pfTokens .token {
    background-color: #45475a !important;
    color: #cdd6f4 !important;
    border-color: #585b70 !important;
}

/* Token text - multiple selectors for specificity */
html.skin-theme-clientpref-night .pfTokens .token,
html.skin-theme-clientpref-night .pfTokens .token span,
html.skin-theme-clientpref-night .pfTokens .token a,
html.skin-theme-clientpref-night .pfTokens .token * {
    color: #cdd6f4 !important;
}

html.skin-theme-clientpref-night .pfTokens .token .close,
html.skin-theme-clientpref-night .pfTokens .token .close span {
    color: #f38ba8 !important;
}

html.skin-theme-clientpref-night .pfTokens input[type="text"] {
    background-color: #313244 !important;
    color: #cdd6f4 !important;
}

/* Token input placeholder and helper text */
html.skin-theme-clientpref-night .pfTokens input[type="text"]::placeholder {
    color: #a6adc8 !important;
    opacity: 1 !important;
}

html.skin-theme-clientpref-night .pfTokens input::placeholder {
    color: #a6adc8 !important;
    opacity: 1 !important;
}

/* Combobox inputs */
html.skin-theme-clientpref-night .pfComboBox,
html.skin-theme-clientpref-night .pfComboBox input {
    background-color: #313244 !important;
    color: #cdd6f4 !important;
    border-color: #45475a !important;
}

/* Standard text inputs - global for form pages */
html.skin-theme-clientpref-night input[type="text"],
html.skin-theme-clientpref-night input[type="url"],
html.skin-theme-clientpref-night input[type="number"],
html.skin-theme-clientpref-night textarea,
html.skin-theme-clientpref-night select {
    background-color: #313244 !important;
    color: #cdd6f4 !important;
    border-color: #45475a !important;
}

html.skin-theme-clientpref-night select option {
    background-color: #313244;
    color: #cdd6f4;
}

/* Autocomplete dropdown */
html.skin-theme-clientpref-night .ui-autocomplete,
html.skin-theme-clientpref-night .ui-menu {
    background-color: #313244 !important;
    border-color: #45475a !important;
}

html.skin-theme-clientpref-night .ui-autocomplete .ui-menu-item,
html.skin-theme-clientpref-night .ui-menu .ui-menu-item {
    color: #cdd6f4 !important;
}

html.skin-theme-clientpref-night .ui-autocomplete .ui-menu-item:hover,
html.skin-theme-clientpref-night .ui-autocomplete .ui-state-focus,
html.skin-theme-clientpref-night .ui-menu .ui-menu-item:hover,
html.skin-theme-clientpref-night .ui-menu .ui-state-focus {
    background-color: #45475a !important;
    color: #cdd6f4 !important;
}

/* Checkboxes and radio buttons labels */
html.skin-theme-clientpref-night label {
    color: #cdd6f4;
}

/* Small help text - general */
html.skin-theme-clientpref-night small {
    color: #a6adc8;
}

/* Help text with specific color */
html.skin-theme-clientpref-night div[style*="color: #666"],
html.skin-theme-clientpref-night span[style*="color: #666"] {
    color: #a6adc8 !important;
}

/* Links in forms */
html.skin-theme-clientpref-night .formtable a {
    color: #89b4fa;
}

/* Form buttons */
html.skin-theme-clientpref-night input[type="submit"],
html.skin-theme-clientpref-night button {
    background-color: #45475a;
    color: #cdd6f4;
    border-color: #585b70;
}

html.skin-theme-clientpref-night input[type="submit"]:hover,
html.skin-theme-clientpref-night button:hover {
    background-color: #585b70;
}

/* Placeholder text - all inputs */
html.skin-theme-clientpref-night input::placeholder,
html.skin-theme-clientpref-night textarea::placeholder {
    color: #a6adc8 !important;
    opacity: 1 !important;
}

/* Multiple instance templates (Add input, Add output buttons) */
html.skin-theme-clientpref-night .multipleTemplateStarter,
html.skin-theme-clientpref-night .multipleTemplateAdder {
    background-color: #313244;
    border-color: #45475a;
}

html.skin-theme-clientpref-night .multipleTemplateAdder a {
    color: #89b4fa !important;
}

/* ===== OS DARK MODE PREFERENCE ===== */

@media (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .formtable {
        background-color: #1e1e2e;
    }

    html.skin-theme-clientpref-os .formtable th {
        color: #cdd6f4;
    }

    html.skin-theme-clientpref-os .formtable td {
        color: #cdd6f4;
    }

    html.skin-theme-clientpref-os .formtable td[style*="background:#f0f0f0"],
    html.skin-theme-clientpref-os .formtable td[style*="background: #f0f0f0"] {
        background-color: #45475a !important;
        color: #cdd6f4 !important;
    }

    html.skin-theme-clientpref-os div[style*="background: #e8f4e8"],
    html.skin-theme-clientpref-os div[style*="background:#e8f4e8"] {
        background-color: #2d4a3e !important;
        border-color: #4a7c5a !important;
        color: #cdd6f4 !important;
    }

    html.skin-theme-clientpref-os .pfTokens {
        background-color: #313244 !important;
        border-color: #45475a !important;
    }

    html.skin-theme-clientpref-os .pfTokens .token {
        background-color: #45475a !important;
        color: #cdd6f4 !important;
        border-color: #585b70 !important;
    }

    html.skin-theme-clientpref-os .pfTokens .token,
    html.skin-theme-clientpref-os .pfTokens .token span,
    html.skin-theme-clientpref-os .pfTokens .token a,
    html.skin-theme-clientpref-os .pfTokens .token * {
        color: #cdd6f4 !important;
    }

    html.skin-theme-clientpref-os .pfTokens .token .close,
    html.skin-theme-clientpref-os .pfTokens .token .close span {
        color: #f38ba8 !important;
    }

    html.skin-theme-clientpref-os .pfTokens input[type="text"] {
        background-color: #313244 !important;
        color: #cdd6f4 !important;
    }

    html.skin-theme-clientpref-os .pfTokens input[type="text"]::placeholder,
    html.skin-theme-clientpref-os .pfTokens input::placeholder {
        color: #a6adc8 !important;
        opacity: 1 !important;
    }

    html.skin-theme-clientpref-os .pfComboBox,
    html.skin-theme-clientpref-os .pfComboBox input {
        background-color: #313244 !important;
        color: #cdd6f4 !important;
        border-color: #45475a !important;
    }

    html.skin-theme-clientpref-os input[type="text"],
    html.skin-theme-clientpref-os input[type="url"],
    html.skin-theme-clientpref-os input[type="number"],
    html.skin-theme-clientpref-os textarea,
    html.skin-theme-clientpref-os select {
        background-color: #313244 !important;
        color: #cdd6f4 !important;
        border-color: #45475a !important;
    }

    html.skin-theme-clientpref-os select option {
        background-color: #313244;
        color: #cdd6f4;
    }

    html.skin-theme-clientpref-os .ui-autocomplete,
    html.skin-theme-clientpref-os .ui-menu {
        background-color: #313244 !important;
        border-color: #45475a !important;
    }

    html.skin-theme-clientpref-os .ui-autocomplete .ui-menu-item,
    html.skin-theme-clientpref-os .ui-menu .ui-menu-item {
        color: #cdd6f4 !important;
    }

    html.skin-theme-clientpref-os .ui-autocomplete .ui-menu-item:hover,
    html.skin-theme-clientpref-os .ui-autocomplete .ui-state-focus,
    html.skin-theme-clientpref-os .ui-menu .ui-menu-item:hover,
    html.skin-theme-clientpref-os .ui-menu .ui-state-focus {
        background-color: #45475a !important;
        color: #cdd6f4 !important;
    }

    html.skin-theme-clientpref-os label {
        color: #cdd6f4;
    }

    html.skin-theme-clientpref-os small {
        color: #a6adc8;
    }

    html.skin-theme-clientpref-os div[style*="color: #666"],
    html.skin-theme-clientpref-os span[style*="color: #666"] {
        color: #a6adc8 !important;
    }

    html.skin-theme-clientpref-os .formtable a {
        color: #89b4fa;
    }

    html.skin-theme-clientpref-os input[type="submit"],
    html.skin-theme-clientpref-os button {
        background-color: #45475a;
        color: #cdd6f4;
        border-color: #585b70;
    }

    html.skin-theme-clientpref-os input[type="submit"]:hover,
    html.skin-theme-clientpref-os button:hover {
        background-color: #585b70;
    }

    html.skin-theme-clientpref-os input::placeholder,
    html.skin-theme-clientpref-os textarea::placeholder {
        color: #a6adc8 !important;
        opacity: 1 !important;
    }

    html.skin-theme-clientpref-os .multipleTemplateStarter,
    html.skin-theme-clientpref-os .multipleTemplateAdder {
        background-color: #313244;
        border-color: #45475a;
    }

    html.skin-theme-clientpref-os .multipleTemplateAdder a {
        color: #89b4fa !important;
    }
}