/* 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 */ .formtable input[type="text"], .formtable input[type="url"], .formtable input[type="number"], .formtable textarea, .formtable select {
background-color: #ffffff; color: #333333; border-color: #a2a9b1;
}
/* Dropdown/select styling */ .formtable select {
background-color: #ffffff; color: #333333;
}
/* 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;
}
/* Token input fields */ 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;
}
html.skin-theme-clientpref-night .pfTokens .token .close {
color: #bac2de !important;
}
html.skin-theme-clientpref-night .pfTokens input[type="text"] {
background-color: #313244 !important; color: #cdd6f4 !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 */ html.skin-theme-clientpref-night .formtable input[type="text"], html.skin-theme-clientpref-night .formtable input[type="url"], html.skin-theme-clientpref-night .formtable input[type="number"], html.skin-theme-clientpref-night .formtable textarea, html.skin-theme-clientpref-night .formtable select {
background-color: #313244 !important; color: #cdd6f4 !important; border-color: #45475a !important;
}
/* Dropdown/select styling */ html.skin-theme-clientpref-night .formtable select {
background-color: #313244 !important; color: #cdd6f4 !important;
}
html.skin-theme-clientpref-night .formtable 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 .formtable label {
color: #cdd6f4;
}
/* Small help text */ html.skin-theme-clientpref-night .formtable small {
color: #a6adc8;
}
/* 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 */ html.skin-theme-clientpref-night .formtable input::placeholder, html.skin-theme-clientpref-night .formtable textarea::placeholder {
color: #6c7086 !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 .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 .close {
color: #bac2de !important;
}
html.skin-theme-clientpref-os .pfTokens input[type="text"] {
background-color: #313244 !important;
color: #cdd6f4 !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 .formtable input[type="text"],
html.skin-theme-clientpref-os .formtable input[type="url"],
html.skin-theme-clientpref-os .formtable input[type="number"],
html.skin-theme-clientpref-os .formtable textarea,
html.skin-theme-clientpref-os .formtable select {
background-color: #313244 !important;
color: #cdd6f4 !important;
border-color: #45475a !important;
}
html.skin-theme-clientpref-os .formtable 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 .formtable label {
color: #cdd6f4;
}
html.skin-theme-clientpref-os .formtable small {
color: #a6adc8;
}
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 .formtable input::placeholder,
html.skin-theme-clientpref-os .formtable textarea::placeholder {
color: #6c7086 !important;
}
}
