Jump to content

MediaWiki:Common.css: Difference between revisions

From Drifters Almanac
No edit summary
No edit summary
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* CSS placed here will be applied to all skins */


/* Match input fields to the native skin's gray input box look */
input,
textarea,
select {
  background-color: #2a2a2a !important;
  color: #d1d1d1 !important;
  border: 1px solid #555 !important;
}


/* Dark theme for tokens (Select2 multi-selection input) */
/* Match the Select2 (tokens input) to the rest of the form */
.select2-container--default .select2-selection--multiple {
.select2-container--default .select2-selection--multiple {
   background-color: #111 !important;
   background-color: #2a2a2a !important;
   color: #ccc !important;
   color: #d1d1d1 !important;
   border: 1px solid #444 !important;
   border: 1px solid #555 !important;
}
}


/* Style individual tokens */
/* Token styling inside the multi-value field */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
.select2-container--default .select2-selection--multiple .select2-selection__choice {
   background-color: #333 !important;
   background-color: #3a3a3a !important;
   color: #eee !important;
   color: #eee !important;
   border: 1px solid #555 !important;
   border: 1px solid #666 !important;
}
}


/* Style input text inside the token field */
/* Dropdown suggestion list (autocompletion) */
.select2-container--default .select2-selection--multiple .select2-search__field {
.select2-container--default .select2-results > .select2-results__options {
   color: #ccc !important;
   background-color: #2a2a2a !important;
   background-color: #111 !important;
   color: #d1d1d1 !important;
  border: 1px solid #444;
}
}


/* Dark background and text for suggestion dropdown */
/* Highlighted option in suggestions */
.select2-container--default .select2-results > .select2-results__options {
.select2-container--default .select2-results__option--highlighted[aria-selected] {
   background-color: #111 !important;
   background-color: #3d553d !important;
   color: #ccc !important;
   color: #fff !important;
  border: 1px solid #444;
}
}


/* Individual result items */
.select2-container--default .select2-selection--multiple .select2-search__field {
.select2-container--default .select2-results__option {
   background-color: #2a2a2a !important;
   background-color: #111;
   color: #d1d1d1 !important;
   color: #ccc;
}
}


/* Hovered/selected result */
.select2-container--default .select2-results__option {
.select2-container--default .select2-results__option--highlighted[aria-selected] {
   background-color: #2a2a2a;
   background-color: #2e4e2e !important;
   color: #d1d1d1;
   color: #fff !important;
}
}

Revision as of 14:28, 12 May 2025

/* CSS placed here will be applied to all skins */

/* Match input fields to the native skin's gray input box look */
input,
textarea,
select {
  background-color: #2a2a2a !important;
  color: #d1d1d1 !important;
  border: 1px solid #555 !important;
}

/* Match the Select2 (tokens input) to the rest of the form */
.select2-container--default .select2-selection--multiple {
  background-color: #2a2a2a !important;
  color: #d1d1d1 !important;
  border: 1px solid #555 !important;
}

/* Token styling inside the multi-value field */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #3a3a3a !important;
  color: #eee !important;
  border: 1px solid #666 !important;
}

/* Dropdown suggestion list (autocompletion) */
.select2-container--default .select2-results > .select2-results__options {
  background-color: #2a2a2a !important;
  color: #d1d1d1 !important;
  border: 1px solid #444;
}

/* Highlighted option in suggestions */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #3d553d !important;
  color: #fff !important;
}

.select2-container--default .select2-selection--multiple .select2-search__field {
  background-color: #2a2a2a !important;
  color: #d1d1d1 !important;
}

.select2-container--default .select2-results__option {
  background-color: #2a2a2a;
  color: #d1d1d1;
}