MediaWiki:Modal.css: Difference between revisions

From Coral Island Wiki
Jump to navigation Jump to search
 
No edit summary
 
(One intermediate revision by the same user not shown)
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;
bottom: 0;
  height: 100%;
height: 100%;
  left: 0;
left: 0;
  position: fixed;
position: fixed;
  right: 0;
right: 0;
  top: 0;
top: 0;
  width: 100%;
width: 100%;
  z-index: -1;
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-fandomdesktop.oo-ui-windowManager-modal-active {
.skin-vector.oo-ui-windowManager-modal-active {
  margin-right: 0 !important;
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;
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;
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;
color-scheme: light dark;
}
}


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


.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame hr {
.modal-js-window .oo-ui-window-content {
  border: none;
background: var(--theme-page-background-color);
  border-bottom: 1px solid var(--theme-border-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);
}