「MediaWiki:Vector.css」の版間の差分

2022年6月5日 (日) 03:00時点における最新版

/* Responsive for legacy vector */
body {
	-webkit-text-size-adjust: 100%;
}
img {
	-webkit-touch-callout: none;
	pointer-events: none;
}
.mw-body, .parsoid-body {
	color: #000000;
}
.mw-body {
	contain: content;
}
.vector-menu-dropdown .vector-menu-content {
	contain: content;
}
#mw-page-base,
#mw-head-base {
	contain: strict;
}
#mw-navigation, .mw-footer {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.mw-footer:after {
	clear: both;
	display: block;
	content: '';
}
@media screen and (any-pointer: coarse) {
	#mw-panel {
		font-size: 150%;
	}
	#mw-panel,
	#p-logo,
	#p-logo a {
		width: 6.66666667em;
	}
	.vector-menu-portal {
		margin-left: 0.4em;
		margin-right: 0.46666667em;
	}
}
@media screen and (min-width: 982px) and (any-pointer: coarse) {
	#mw-panel {
		padding-left: 0.33333333em;
	}
}
@supports (top: constant(safe-area-inset-top)) {
	@media screen {
		.mw-body,
		.parsoid-body {
			padding-right: calc(1em + constant(safe-area-inset-right));
		}
		#p-personal {
			right: calc(.75em + constant(safe-area-inset-right));
		}
		.mw-body,
		#mw-data-after-content,
		#mw-head-base,
		#left-navigation,
		.mw-footer {
			margin-left: calc(10em + constant(safe-area-inset-left));
		}
		#right-navigation,
		.mw-footer {
			margin-right: constant(safe-area-inset-right);
		}
		#mw-panel {
			left: constant(safe-area-inset-left);
		}
		.mw-footer {
			margin-bottom: constant(safe-area-inset-bottom);
		}
	}
	@media screen and (min-width: 982px) {
		.mw-body,
		#mw-head-base,
		#left-navigation,
		#mw-data-after-content,
		.mw-footer {
			margin-left: calc(11em + constant(safe-area-inset-left));
		}
		.mw-body {
			padding-right: calc(1.5em + constant(safe-area-inset-right));
		}
		.mw-footer {
			padding-right: calc(1.25em + constant(safe-area-inset-right));
		}
		#p-personal {
			right: calc(1em + constant(safe-area-inset-right));
		}
	}
}
@supports (top: env(safe-area-inset-top)) {
	@media screen {
		.mw-body,
		.parsoid-body {
			padding-right: calc(1em + env(safe-area-inset-right));
		}
		#p-personal {
			right: calc(.75em + env(safe-area-inset-right));
		}
		.mw-body,
		#mw-data-after-content,
		#mw-head-base,
		#left-navigation,
		.mw-footer {
			margin-left: calc(10em + env(safe-area-inset-left));
		}
		#right-navigation,
		.mw-footer {
			margin-right: env(safe-area-inset-right);
		}
		#mw-panel {
			left: env(safe-area-inset-left);
		}
		.mw-footer {
			margin-bottom: env(safe-area-inset-bottom);
		}
	}
	@media screen and (min-width: 982px) {
		.mw-body,
		#mw-head-base,
		#left-navigation,
		#mw-data-after-content,
		.mw-footer {
			margin-left: calc(11em + env(safe-area-inset-left));
		}
		.mw-body {
			padding-right: calc(1.5em + env(safe-area-inset-right));
		}
		.mw-footer {
			padding-right: calc(1.25em + env(safe-area-inset-right));
		}
		#p-personal {
			right: calc(1em + env(safe-area-inset-right));
		}
	}
}
@media screen and (max-width: 799px), screen and (max-height: 439px) {
  #mw-head {
    position: static !important;
    /* stylelint-disable-line declaration-no-important */
  
    margin-top: 0.5em;
  }
	/* Move the panel to the bottom and display it as in-line lists */
	#mw-panel {
		position: static;
		margin-left: 1.5em;
		margin-right: 1.5em;
		width: auto;
	}
	#mw-panel .portal {
		display: block;
		margin-left: 0;
		margin-right: 0;
	}
  /* Rearrange the logo */
  #p-logo {
  	position: absolute;
  	top: -6px;
  	left: 6px;
	left: calc(6px + constant(safe-area-inset-left));
	left: calc(6px + env(safe-area-inset-left));
  	width: 60px;
  	height: 60px;
  }
  #p-logo a {
  	width: 60px;
  	height: 60px;
  	background-size: cover;
  }
  /* Rearrange various page elements to fill the now-available space */
  .mw-footer {
    margin-left: 0;
    padding: 1em 1.5em 0;
    /* don't need these in the footer either... */
  
  }
  #p-personal {
    display: table;
    position: relative;
    width: 100%;
    top: inherit;
    left: inherit;
    right: inherit;
  }
  #p-personal ul {
    padding-left: 0;
  }
  #left-navigation,
  #right-navigation {
    position: absolute;
    top: inherit;
  }
  #left-navigation {
	left: constant(safe-area-inset-left);
	left: env(safe-area-inset-left);
  	margin-left: 0;
  }
  #right-navigation { right: 0 }
  #p-cactions {
    float: right;
  }
  #p-search {
    position: absolute;
    top: -2.5em;
    right: 6px;
    width: calc(100vw - 78px);
    margin: 0;
  }
  #simpleSearch {
    margin-left: auto;
    padding: 0;
    width: 100%;
    max-width: 360px;
  }
  #left-navigation .vector-menu-tabs { padding-left: 0 }
  .vector-menu-dropdown .vector-menu-content {
    left: inherit;
    right: 0;
	border-right-width: 0;
  }
  #mw-head .vector-menu-dropdown .vector-menu-heading {
    margin-right: 0;
    background-image: none;
  }
	.vector-menu-portal .vector-menu-heading {
		margin-left: 0;
	}
	.vector-menu-portal .vector-menu-content {
		margin-left: 0;
	}
	.mw-body {
		margin-left: 0;
		border-left: 0; /* Hide the 1px blue border on the left side */
		padding-left: calc(1em + constant(safe-area-inset-left));
		padding-left: calc(1em + env(safe-area-inset-left));
	}
	#mw-data-after-content {
		margin-left: 0;
	}
	#mw-navigation {
		margin-right: constant(safe-area-inset-right);
		margin-right: env(safe-area-inset-right);
	}
	#mw-navigation, .mw-footer {
		margin-left: constant(safe-area-inset-left);
		margin-left: env(safe-area-inset-left);
	}
}
@media screen and (max-width: 799px) and (any-pointer: coarse), screen and (max-height: 439px) and (any-pointer: coarse) {
	#mw-panel {
		margin-left: 1em;
		margin-right: 1em;
		font-size: 150%;
	}
}
@media screen and (min-width: 481px) and (max-width: 799px),
       screen and (min-width: 481px) and (max-height: 439px) {
  .vector-menu-portal .vector-menu-content ul {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
    -webkit-column-gap: .5em;
       -moz-column-gap: .5em;
            column-gap: .5em;
  }
}

/* mw-sidebar-collapsible-button */
@-webkit-keyframes show-sidebar {
	0% { opacity: 0; }
	40% {
		display: block;
		opacity: 0;
	}
	100% { opacity: 1; }
}
@keyframes show-sidebar {
	0% { opacity: 0; }
	40% {
		display: block;
		opacity: 0;
	}
	100% { opacity: 1; }
}
#mw-sidebar-collapsible-button { display: none; }
@media screen and (min-width: 800px) and (min-height: 440px) {
	.mw-sidebar-collapsed .mw-body {
		margin-left: 0;
		border-left-width: 0;
	}
	.mw-sidebar-collapsed .mw-footer {
		margin-left: constant(safe-area-inset-left);
		margin-left: env(safe-area-inset-left);
	}
	.mw-sidebar-collapsed #p-logo {
		margin-left: 1rem;
		width: 5rem;
		height: 80px;
	}
	.mw-sidebar-collapsed #p-logo a {
		width: 5rem;
		height: 80px;
		background-size: cover;
	}

	.mw-sidebar-animatable #mw-panel > .mw-portlet {
		-webkit-animation: 333ms show-sidebar;
		animation: 333ms show-sidebar;
	}
	.mw-sidebar-collapsed #mw-panel > .mw-portlet {
		display: none;
		opacity: 0;
	}

	#mw-sidebar-collapsible-button {
		display: block;
		position: absolute;
		top: 6rem;
		left: calc(10rem - 12px);
		left: calc(constant(safe-area-inset-left) + 10rem - 12px);
		left: calc(env(safe-area-inset-left) + 10rem - 12px);
		border: 1px solid #a7d7f9;
		border-radius: 4px;
		width: 22px;
		height: 34px;
		background-color: #ffffff;
		font-size: 20px;
		line-height: 32px;
		text-align: center;
		cursor: pointer;
	}
	.mw-sidebar-collapsed #mw-sidebar-collapsible-button {
		top: calc(5rem - 12px);
		left: 1rem;
		left: calc(constant(safe-area-inset-left) + 1rem);
		left: calc(env(safe-area-inset-left) + 1rem);
		width: 34px;
		height: 22px;
		line-height: 20px;
	}
	#mw-sidebar-collapsible-button:before { content: '‹'; }
	.mw-sidebar-collapsed #mw-sidebar-collapsible-button:before { content: '›'; }
}
@media screen and (min-width: 982px) and (min-height: 440px) {
	#mw-sidebar-collapsible-button {
		top: 6.25rem;
		left: calc(11rem - 12px);
	}
	.mw-sidebar-collapsed #mw-sidebar-collapsible-button {
		left: 1.5rem;
	}
}

/* ここに記述したCSSはベクター外装の利用者に影響します */
.wikitable > caption {
	margin-bottom: .2em;
	font-size: 110%;
}