MediaWiki:Modal.css

From Coral Island Wiki
Revision as of 03:58, 10 July 2024 by Mikevoir (talk | contribs) (Created page with "→‎** @title Modal styles ** @description Provides some layout improvements to modals. ** @author Polymeric ** @license CC-BY-SA 3.0 ** @note Please install Modal.js for complete functionality.: →‎Add new invisible backdrop that will handle the close event when clicked.: .oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-backdrop { bottom: 0; height: 100%; left: 0; position: fixed; right: 0; top: 0; width: 100%;...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/*
** @title         Modal styles
** @description   Provides some layout improvements to modals.
** @author        Polymeric
** @license       CC-BY-SA 3.0
** @note          Please install Modal.js for complete functionality.
*/

/* Add new invisible backdrop that will handle the close event when clicked. */
.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-backdrop {
  bottom: 0;
  height: 100%;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: -1;
}

/* Fixing page losing a bit of width when oppening a modal. */
.skin-fandomdesktop.oo-ui-windowManager-modal-active {
  margin-right: 0 !important;
}

/* Preventing modal footer from overlapping the header. */
.oo-ui-windowManager-modal.oo-ui-windowManager-floating > .oo-ui-dialog > .oo-ui-window-frame {
  min-height: 148px;
}

/* Add some horizontal padding to the modal body. */
.oo-ui-window-content.oo-ui-processDialog-content .oo-ui-window-body {
  padding: 8px 19px;
}

/* Other styles. */
/** Change input colors to match that of the wiki's theme. **/
.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame {
  color-scheme: light dark;
}

.theme-fandomdesktop-dark .oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame {
  color-scheme: dark light;
}

.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame hr {
  border: none;
  border-bottom: 1px solid var(--theme-border-color);
}