EveryCRT Wiki

Template:Form styles.css: Difference between revisions

Add dark mode support for Page Forms inputs (via create-page on MediaWiki MCP Server)
 
Fix token text and helper text visibility in dark mode with higher specificity selectors (via update-page on MediaWiki MCP Server)
 
(2 intermediate revisions by 2 users not shown)
Line 52: Line 52:
}
}


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


Line 111: Line 105:
}
}


/* Token input fields */
/* 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 {
html.skin-theme-clientpref-night .pfTokens {
     background-color: #313244 !important;
     background-color: #313244 !important;
Line 123: Line 125:
}
}


html.skin-theme-clientpref-night .pfTokens .token .close {
/* Token text - multiple selectors for specificity */
     color: #bac2de !important;
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;
}
}


Line 130: Line 141:
     background-color: #313244 !important;
     background-color: #313244 !important;
     color: #cdd6f4 !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;
}
}


Line 140: Line 162:
}
}


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


/* Dropdown/select styling */
html.skin-theme-clientpref-night select option {
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;
     background-color: #313244;
     color: #cdd6f4;
     color: #cdd6f4;
Line 183: Line 199:


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


/* Small help text */
/* Small help text - general */
html.skin-theme-clientpref-night .formtable small {
html.skin-theme-clientpref-night small {
     color: #a6adc8;
     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;
}
}


Line 210: Line 232:
}
}


/* Placeholder text */
/* Placeholder text - all inputs */
html.skin-theme-clientpref-night .formtable input::placeholder,
html.skin-theme-clientpref-night input::placeholder,
html.skin-theme-clientpref-night .formtable textarea::placeholder {
html.skin-theme-clientpref-night textarea::placeholder {
     color: #6c7086 !important;
     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;
}
}


Line 234: Line 268:
     html.skin-theme-clientpref-os .formtable td[style*="background: #f0f0f0"] {
     html.skin-theme-clientpref-os .formtable td[style*="background: #f0f0f0"] {
         background-color: #45475a !important;
         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;
         color: #cdd6f4 !important;
     }
     }
Line 248: Line 289:
     }
     }


     html.skin-theme-clientpref-os .pfTokens .token .close {
    html.skin-theme-clientpref-os .pfTokens .token,
         color: #bac2de !important;
    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;
     }
     }


Line 255: Line 304:
         background-color: #313244 !important;
         background-color: #313244 !important;
         color: #cdd6f4 !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;
     }
     }


Line 264: Line 319:
     }
     }


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


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


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


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


Line 322: Line 382:
     }
     }


     html.skin-theme-clientpref-os .formtable input::placeholder,
     html.skin-theme-clientpref-os input::placeholder,
     html.skin-theme-clientpref-os .formtable textarea::placeholder {
     html.skin-theme-clientpref-os textarea::placeholder {
         color: #6c7086 !important;
         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;
     }
     }
}
}
Retrieved from "https://wiki.everycrt.com/wiki/Template:Form_styles.css"
MediaWiki Appliance - Powered by TurnKey Linux