利用者:JuthaDDA/newVector/headerAndSidebarPositionFixed.css

お知らせ: 保存した後、ブラウザのキャッシュをクリアしてページを再読み込みする必要があります。
多くの Windows や Linux のブラウザ
Ctrl を押しながら F5 を押す。
Mac における Safari
⇧ Shift を押しながら、更新ボタンをクリックする。
Mac における Chrome や Firefox
⌘ Cmd と ⇧ Shift を押しながら R を押す。
@charset "UTF-8";
/**
 * @see [[利用者:JuthaDDA/newVector/headerAndSidebarPositionFixed]]
 * @author [[:w:ja:User:JuthaDDA]]
 * @license CC-BY-SA 3.0
**/
/* [[User:JuthaDDA/SetClientSizeToCss.js]]用変数 */
:root {
	--clientWidth: calc( 100vw - 10px );
	--clientHeight: 100vh;
}
.vector-sticky-header {
	display: none;
}

@media screen and ( min-width: 720px ) {
	/* スクロール位置はエディタを考慮 */
	.client-js.vector-sticky-header-enabled {
		scroll-padding-top: 150px;
	}

	/* ヘッダーを固定 */
	.mw-header {
		position: fixed;
		inset: 0 auto auto 0;
		margin-top: 0;
		padding-top: 12px;
		padding-inline: 30px;
		background-color: #fff;
		box-shadow: 0 0 2px #808080;
	}

	/* サイドバーを固定 */
	#mw-navigation {
		position: fixed;
		z-index: 3;
		top: 64px;
	}

	#mw-panel {
		height: calc( var( --clientHeight ) - 64px );
		overflow-y: auto;
		box-shadow: 1px 0 10px -6px #808080;
		scrollbar-width: 4px;
		/* for FireFox */
	}

	#mw-panel::-webkit-scrollbar {
		width: 4px;
	}

	/* 記事ツールバーを固定 */
	#mw-head {
		background-color: #fff;
		box-shadow: 0 11px 18px -16px #808080;
	}

	/* ヘッダー、ツールバーの分、記事本体を下げる */
	.mw-workspace-container:not( .mw-footer-container ) > .mw-content-container {
		padding-top: 104px;
	}

	/* 編集ツールバーを固定 */
	.ve-init-mw-desktopArticleTarget-toolbar-opened > .oo-ui-toolbar-bar {
		position: fixed;
		z-index: 2;
		top: 104px;
		/* stylelint-disable-next-line declaration-no-important */
		right: auto !important;
		/* stylelint-disable-next-line declaration-no-important */
		left: auto !important;
		width: min( 60rem, calc( var( --clientWidth ) - 60px ) );
	}

	/* widenedTable用 */
	.skin-vector--table-widened .ve-init-mw-desktopArticleTarget-toolbar-opened > .oo-ui-toolbar-bar,
	.skin-vector--source-editor-widened .ve-init-mw-desktopArticleTarget-toolbar-opened > .oo-ui-toolbar-bar {
		/* stylelint-disable-next-line declaration-no-important */
		left: 50% !important;
		-webkit-transform: translateX( -50% );
		transform: translateX( -50% );
	}

	.skin-vector--table-widened .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .ve-init-mw-desktopArticleTarget-toolbar-opened > .oo-ui-toolbar-bar,
	.skin-vector--source-editor-widened .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .ve-init-mw-desktopArticleTarget-toolbar-opened > .oo-ui-toolbar-bar {
		-webkit-transform: translateX( calc( -50% + 5.5rem ) );
		transform: translateX( calc( -50% + 5.5rem ) );
	}
}

@media screen and ( min-width: 60rem ) {
	.skin-vector--table-widened .oo-ui-toolbar-position-top > .oo-ui-toolbar-bar,
	.skin-vector--source-editor-widened .oo-ui-toolbar-position-top > .oo-ui-toolbar-bar {
		border-bottom: 0;
		box-shadow: none;
	}

	.skin-vector--table-widened .ve-init-mw-desktopArticleTarget-toolbar-opened,
	.skin-vector--source-editor-widened .ve-init-mw-desktopArticleTarget-toolbar-opened {
		position: fixed;
		z-index: 2;
		top: 85px;
		left: 0;
		width: 100vw;
		/* stylelint-disable-next-line declaration-no-important */
		height: 81px !important;
		border-bottom: 1px solid #c8ccd1;
		background-color: #fff;
		box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, 0.1 );
	}
}

@media screen and ( min-width: 720px ) and ( max-width: 999px ) {
	.mw-header,
	#mw-navigation {
		width: calc( 100% - 30px );
	}

	.ve-init-mw-desktopArticleTarget-toolbar-opened > .oo-ui-toolbar-bar {
		width: min( 60rem, calc( var( --clientWidth ) - 30px ) );
	}

	.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .ve-init-mw-desktopArticleTarget-toolbar-opened > .oo-ui-toolbar-bar {
		width: min( 60rem, calc( var( --clientWidth ) - 30px - 11rem ) );
	}
}

@media screen and ( min-width: 1000px ) {
	.mw-header,
	#mw-navigation {
		width: calc( 100% - 60px );
	}

	.ve-init-mw-desktopArticleTarget-toolbar-opened > .oo-ui-toolbar-bar {
		width: min( 60rem, calc( var( --clientWidth ) - 60px ) );
	}

	.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .ve-init-mw-desktopArticleTarget-toolbar-opened > .oo-ui-toolbar-bar {
		width: min( 60rem, calc( var( --clientWidth ) - 60px - 11rem ) );
	}
}
/* 編集ツールバーが開いたら、記事を下げる */
@media screen and ( min-width: 800px ) {
	.ve-init-mw-desktopArticleTarget-toolbar-opened + .ve-init-mw-desktopArticleTarget-originalContent {
		margin-top: 62px;
	}
}

@media screen and ( min-width: 720px ) and ( max-width: 799px ) {
	.ve-init-mw-desktopArticleTarget-toolbar-opened + .ve-init-mw-desktopArticleTarget-originalContent {
		margin-top: 104px;
	}
}