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

2021年8月24日 (火) 14:09時点における版

/* 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;
}
#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)) {
	.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 (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)) {
	.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 (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;
  	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;
  }
  #right-navigation {
    position: absolute;
    top: inherit;
    right: 0;
    margin-top: 0;
  }
  #left-navigation {
    position: absolute;
    top: inherit;
    margin: 0;
  }
  #p-namespaces,
  #p-views,
  #p-variants {
    position: relative;
    top: 2.5em;
  }
  #p-namespaces {
    padding-left: 0;
  }
  #p-cactions {
    top: 2.5em;
    float: right;
  }
  #p-search {
    position: absolute;
    right: 6px;
    width: calc(100vw - 78px);
    margin: 0;
  }
  #simpleSearch {
    margin-left: auto;
    padding: 0;
    width: 100%;
    max-width: 360px;
  }
  .vector-menu-dropdown .vector-menu-content {
    left: inherit;
    right: 0;
	border-right-width: 0;
  }
  #mw-head .vector-menu-dropdown h3 {
    margin-right: 0;
    background-image: none;
  }
	.vector-menu-portal h3 {
		margin-left: 0;
	}
	.vector-menu-portal .vector-menu-content {
		margin-left: 0;
	}
  .mw-body {
    /* Hide the 1px blue border on the left side */
  
    border-left: 0;
    margin-left: 0;
  }
  #mw-data-after-content {
    margin-left: 0;
  }
}
@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%;
	}
}
@supports (left: constant(safe-area-inset-left)) {
	@media screen and (max-width: 799px), screen and (max-height: 439px) {
		#mw-navigation {
			margin-left: constant(safe-area-inset-left);
			margin-right: constant(safe-area-inset-right);
		}
		#p-logo {
			left: calc(6px + constant(safe-area-inset-left));
		}
		.mw-footer {
			margin-left: constant(safe-area-inset-left);
		}
		#left-navigation {
			left: constant(safe-area-inset-left);
		}
		.mw-body {
			padding-left: calc(1em + constant(safe-area-inset-left));
		}
	}
}
@supports (left: env(safe-area-inset-left)) {
	@media screen and (max-width: 799px), screen and (max-height: 439px) {
		#mw-navigation {
			margin-left: env(safe-area-inset-left);
			margin-right: env(safe-area-inset-right);
		}
		#p-logo {
			left: calc(6px + env(safe-area-inset-left));
		}
		.mw-footer {
			margin-left: env(safe-area-inset-left);
		}
		#left-navigation {
			left: env(safe-area-inset-left);
		}
		.mw-body {
			padding-left: calc(1em + env(safe-area-inset-left));
		}
	}
}
@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;
  }
}

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