MediaWiki:Modal.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
Line 9: | Line 9: | ||
/* Add new invisible backdrop that will handle the close event when clicked. */ | /* Add new invisible backdrop that will handle the close event when clicked. */ | ||
.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-backdrop { | .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. */ | /* Fixing page losing a bit of width when oppening a modal. */ | ||
.skin-vector.oo-ui-windowManager-modal-active { | .skin-vector.oo-ui-windowManager-modal-active { | ||
margin-right: 0 !important; | |||
} | } | ||
/* Preventing modal footer from overlapping the header. */ | /* Preventing modal footer from overlapping the header. */ | ||
.oo-ui-windowManager-modal.oo-ui-windowManager-floating > .oo-ui-dialog > .oo-ui-window-frame { | .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. */ | /* Add some horizontal padding to the modal body. */ | ||
.oo-ui-window-content.oo-ui-processDialog-content .oo-ui-window-body { | .oo-ui-window-content.oo-ui-processDialog-content .oo-ui-window-body { | ||
padding: 8px 19px; | |||
} | } | ||
Line 37: | Line 37: | ||
/** Change input colors to match that of the wiki's theme. **/ | /** Change input colors to match that of the wiki's theme. **/ | ||
.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame { | .oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame { | ||
color-scheme: light dark; | |||
} | } | ||
.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame hr { | .oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame hr { | ||
border: none; | |||
border-bottom: 1px solid var(--theme-border-color); | |||
} | |||
.modal-js-window .oo-ui-window-content { | |||
background: var(--theme-page-background-color); | |||
color: var(--theme-page-text-color); | |||
} | } |
Latest revision as of 03:04, 19 July 2024
/*
** @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-vector.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;
}
.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame hr {
border: none;
border-bottom: 1px solid var(--theme-border-color);
}
.modal-js-window .oo-ui-window-content {
background: var(--theme-page-background-color);
color: var(--theme-page-text-color);
}