WhiteStyle Theme
クレジット
タイトル: WhiteStyle Theme
著者: ©︎teruteru_5, RuRItech does not match any existing user name
作成年: 2022
テーマ名: WhiteStyle Theme
作成者:teruteru_5, RuRItech does not match any existing user name
このテーマを使用するには、次のコードをページに貼り付けてください。
[[include :pseudo-scp-jp:ruristyle]]
このテーマは、RuRItech does not match any existing user name及びteruteru_5が自分の記事に使用するために作成したものであり、以下のコンポーネント及び既存CSSテーマから引用されたコードが含まれています:
- Collapsible Sidebar
- Fade In
- Basalt Theme (table構文の挙動、ロゴマーク等)
ご利用は自己責任でお願いします。
使用例
分割線は5個のハイフン(-----)で作ることができ、何かの中でない限り(例えば引用ブロック)ページ全体に展開されます。この文章を区切る線が分割線です。
見出しは行の先頭に1から6個のプラス(+)を置くことで作れます。
これはタブです。
これは引用ブロックです。各行の先頭に大なり記号と半角スペース(> )を置くことで作れます。
追加の文章
分割線
入れ子になった引用ブロック
これは | テーブルです |
---|---|
もう既に | 作り方は |
知っていますね |
@import url("http://scp-jp.wikidot.com/component:fade-in/code/1"); @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap'); /* WhiteStyle Theme by RuRItech & teruteru_5, 2022 */ .anom-bar-container{ filter: sepia(80%) hue-rotate(180deg) saturate(60%); } .anom-bar-container *{ font-family: 'Noto Sans JP', sans-serif !important; } blockquote, div.blockquote { border: 2px double #444444 !important; background: #DDDDDD !important; } @media screen and (max-width:768px) { #side-bar { background: #FFFFFF; } .side-block { border-radius: 0px !important; background: rgba(255, 255, 255, .6); } } a { color: #2d2c81; } a.newpage { color: #4dAcA1; } .menu-item img { filter: grayscale(100%); } @media screen and (min-width:768px) { #top-bar>.top-bar { display: flex; } #top-bar>.top-bar>ul { display: flex; width: 80%; margin: 0 auto; } #top-bar>.top-bar>ul>li { flex: 1; } } .hovertip { background: #000000 !important; color: #FFFFFF; font-family: 'Noto Sans JP', sans-serif !important; border: none !important; } h1 { color: #000000; font-weight: 700; } ::selection { color: #FFFFFF; background-color: #455765; } div#side-bar div.side-block { border: 2px solid #455765 !important; } div#side-bar div.side-block div.heading, div#side-bar div.collapsible-block-unfolded-link, div#side-bar div.collapsible-block-unfolded-link div.collapsible-block-link { color: #2e2930; border-color: #2e2930; } a.collapsible-block-link { font-weight: 700 !important } div#side-bar * { font-family: 'Noto Sans JP', sans-serif !important; } div.yui-navset div.yui-content { background: #c8c2c6; } div.yui-navset ul.yui-nav a, div.yui-navset div.yui-navset-top ul.yui-nav a { background: #dcd6d9; color: #485859; border: solid #a3a3a3; } div.yui-navset ul.yui-nav a:hover, div.yui-navset ul.yui-nav a:focus { background: #6c848d; color: #485859; } div.yui-navset ul.yui-nav .selected a, div.yui-navset ul.yui-nav .selected a:focus, div.yui-navset ul.yui-nav .selected a:hover { background: #393f4c; color: #e7e7eb; border: solid #243356; } div.page-rate-widget-box { border-radius: 0px !important; } div.page-rate-widget-box, div.page-rate-widget-box span.rate-points, div.page-rate-widget-box span.cancel { background-color: #455765 !important; border: solid #455765 1px !important; } div.page-rate-widget-box span.rateup, div.page-rate-widget-box span.ratedown { border: solid #455765 !important; border-width: 1px 0 !important; } div.page-rate-widget-box span.rate-points, div.page-rate-widget-box span.cancel a, div.page-rate-widget-box span.cancel a:hover { color: #d3cfd9; } div.page-rate-widget-box span.rateup, div.page-rate-widget-box span.ratedown { background-color: #455765 !important; } div.page-rate-widget-box span.rateup a, div.page-rate-widget-box span.ratedown a { color: #d3cfd9 !important; } div.page-rate-widget-box span.cancel a:hover, div.page-rate-widget-box span.rateup a:hover, div.page-rate-widget-box span.ratedown a:hover { background: transparent !important; color: transparent !important; } .creditbutton { background-color: #455765 !important; color: #d3cfd9 !important; } #page-title { color: #000000; font-weight: 700; font-family: 'Noto Sans JP', sans-serif; } #login-status * { color: #4d4c61 !important; } #search-top-box-input { background-color: #000000 !important; color: #FFF !important; border-radius: 0px; } #search-top-box-form .btn { background: #000000 !important; color: #FFF !important; border-radius: 0px !important; border: none !important; } #top-bar ul li a { font-weight: 700; } #top-bar ul li a::before { content: "["; } #top-bar ul li.sfhover a { color: #4d4c61 !important; } #top-bar ul li a::after { content: "]"; } .top-bar * { font-family: 'Noto Sans JP', sans-serif !important; } div#header h1 a span { font-size: 0px; } div#header h1 a:before { content: "SCP Foundation"; color: #000000; text-shadow: transparent 0px 0px; font-weight: 700; font-family: 'Noto Sans JP', sans-serif; } div#header h2 span { font-size: 0px; padding: 4px; } div#header h2:after { content: "Secure Contain Protect"; font-weight: bold; color: #000000; text-shadow: transparent 0px 0px; padding: 19px 0; white-space: pre; font-weight: 700; font-family: 'Noto Sans JP', sans-serif; } div#container-wrap { background: url(http://scp-jp-storage.wikidot.com/local--files/file:7178014-55-ztdp/unknown-3.png) top left repeat-x; } div#header { background: url(http://scp-jp-storage.wikidot.com/local--files/file:7178014-56-39ro/1652613263733.png) 10px 40px no-repeat; background-position: 0.5em 3.3em; background-size: 100px 100px; } #page-content .wiki-content-table tr td { border: 1px #000 solid; } #page-content .wiki-content-table tr td { border: 1px #000 solid; } #page-content .table1 tr th { background-color: #D7EFE7 !important; } #page-content .table1 .st { color: #D7EFE7; } #page-content .table2 tr th { background-color: #D8ECF4; } #page-content .table2 .st { color: #D8ECF4; } #page-content .table3 tr th { background-color: #FDF6D7; } #page-content .table3 .st { color: #FDF6D7; } #page-content .table4 tr th { background-color: #FFDABF; } #page-content .table4 .st { color: #FFDABF; } .blockquote { display: block; color: #524348; background-color: #c8c2be; border: dashed 1px #544a47; padding: 0 1em; float: center; margin: 1em 40px; } .modal { padding: 15px; box-shadow: rgb(192, 198, 201 / 30%) 0px 0px 3px; width: auto; margin: auto; background: #c0c6c9; border: 2px solid #5D5D5D; } .danger-diamond .newpage{ color:transparent !important; } .smallmodal { padding: 15px; box-shadow: rgb(192, 198, 201 / 30%) 0px 0px 3px; width: 75%; margin: auto; background: #c0c6c9; border: 2px solid #5D5D5D; } #page-content .table5 tr th { background-color: #F5D8E0; } #page-content .table5 .st { color: #F5D8E0; } #page-content .table6 tr th { background-color: rgba(146, 0, 255, 0.2); } #page-content .table6 .st { color: rgb(146, 0, 255); } .tableb .wiki-content-table { border-collapse: separate; border-spacing: 5px; padding-left: -100px; } /* Copy from Collapsible sidebar https://scp-wiki.wikidot.com/component:collapsible-sidebar */ @media only screen and (min-width: 769px) { #content-wrap { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-pack: center; width: -webkit-calc(100vw - (100vw - 100%)); width: -moz-calc(100vw - (100vw - 100%)); width: calc(100vw - (100vw - 100%)); min-height: -webkit-calc(100vh - -webkit-calc(var(--final-header-height-on-desktop, 10.125rem))); min-height: -moz-calc(100vh - -moz-calc(var(--final-header-height-on-desktop, 10.125rem))); min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem))); -webkit-box-flex: 2; -webkit-flex-grow: 2; -moz-box-flex: 2; -ms-flex-positive: 2; flex-grow: 2; height: auto; position: initial; margin: 0 auto; max-width: inherit; margin-left: -11em; margin-left: -webkit-calc(var(--sidebar-width-on-desktop, 15.5em) * -1 / 2 - 2rem); margin-left: -moz-calc(var(--sidebar-width-on-desktop, 15.5em) * -1 / 2 - 2rem); margin-left: calc(var(--sidebar-width-on-desktop, 15.5em) * -1 / 2 - 2rem); } #main-content { width: 100%; position: initial; max-height: 100%; padding: 2rem 1rem; width: 45.8rem; max-width: 45.8rem; margin: 0 auto; } #sidebar::-webkit-scrollbar { width: 0; -webkit-transition: width 300ms 50ms cubic-bezier(0.4, 0.0, 0.2, 1); -o-transition: width 300ms 50ms cubic-bezier(0.4, 0.0, 0.2, 1); -moz-transition: width 300ms 50ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: width 300ms 50ms cubic-bezier(0.4, 0.0, 0.2, 1); } #sidebar:hover::-webkit-scrollbar, #sidebar:active::-webkit-scrollbar, #sidebar:focus-within::-webkit-scrollbar { width: 0.5rem; -webkit-transition: width 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -o-transition: width 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -moz-transition: width 300ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: width 300ms cubic-bezier(0.4, 0.0, 0.2, 1); } #side-bar { -webkit-transform: translateX(-14.6rem); -moz-transform: translateX(-14.6rem); -ms-transform: translateX(-14.6rem); -o-transform: translateX(-14.6rem); transform: translateX(-14.6rem); -webkit-transform: translateX(-webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem)); -moz-transform: translateX(-moz-calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem)); -ms-transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem)); -o-transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem)); transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem)); -webkit-transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), padding 300ms linear, margin 300ms linear, -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), padding 300ms linear, margin 300ms linear, -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -o-transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), padding 300ms linear, margin 300ms linear, -o-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -moz-transition: transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), padding 300ms linear, margin 300ms linear, -moz-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), padding 300ms linear, margin 300ms linear; transition: transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), padding 300ms linear, margin 300ms linear, -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1), -moz-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1), -o-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1); width: var(--sidebar-width-on-desktop, 13.6rem) !important; min-width: var(--sidebar-width-on-desktop, 13.6rem) !important; grid-area: side-bar; -ms-grid-row: 1; -ms-grid-column: 1; padding-right: 2rem; background-color: transparent; background-color: rgba(var(--swatch-menubg-color, 255, 255, 255), 0); top: 1rem; max-height: 100vh; position: -webkit-sticky; position: sticky; left: 0.5rem; padding-left: 1rem; scrollbar-width: thin; -ms-scroll-chaining: none; overscroll-behavior: contain; scrollbar-color: rgba(170, 170, 170, 0) rgba(170, 170, 170, 0); } #side-bar::-webkit-scrollbar-track { width: 0; background-color: rgba(170, 170, 170, 0); } #side-bar::-webkit-scrollbar-thumb { width: 0; background-color: rgba(170, 170, 170, 0); } #side-bar:hover, #side-bar:active { background-color: white; background-color: rgba(var(--swatch-menubg-color, 255, 255, 255), 1); padding-right: 0; margin-right: 2rem; -webkit-transform: translateX(-0.5rem); -moz-transform: translateX(-0.5rem); -ms-transform: translateX(-0.5rem); -o-transform: translateX(-0.5rem); transform: translateX(-0.5rem); -webkit-transform: translateX(-webkit-calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem) - 2rem)); -moz-transform: translateX(-moz-calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem) - 2rem)); -ms-transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem) - 2rem)); -o-transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem) - 2rem)); transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem) - 2rem)); overflow-y: auto; overflow-x: hidden; scrollbar-color: rgba(170, 170, 170, 1) rgba(252, 252, 252, 1); } #side-bar:focus-within { background-color: white; background-color: rgba(var(--swatch-menubg-color, 255, 255, 255), 1); padding-right: 0; margin-right: 2rem; -webkit-transform: translateX(-0.5rem); -moz-transform: translateX(-0.5rem); -ms-transform: translateX(-0.5rem); -o-transform: translateX(-0.5rem); transform: translateX(-0.5rem); -webkit-transform: translateX(-webkit-calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem) - 2rem)); -moz-transform: translateX(-moz-calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem) - 2rem)); -ms-transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem) - 2rem)); -o-transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem) - 2rem)); transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem) - 2rem)); overflow-y: auto; overflow-x: hidden; scrollbar-color: rgba(170, 170, 170, 1) rgba(252, 252, 252, 1); } #side-bar:hover::-webkit-scrollbar-track { width: 0.5rem; background-color: rgba(252, 252, 252, 1); } #side-bar:hover::-webkit-scrollbar-thumb { width: 0.375rem; background-color: rgba(170, 170, 170, 1); } #main-content::after { content: " "; position: fixed; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 1rem; height: 100%; max-height: 100%; top: 0; -webkit-transition: left 300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -o-transition: left 300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -moz-transition: left 300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: left 300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1); left: 1rem; background: url("http://scp-wiki.wdfiles.com/local--files/component%3Acollapsible-sidebar/sidebar-tab.svg"); background-repeat: no-repeat; background-position: center left 1rem; background-attachment: fixed; -webkit-background-size: 1rem 12.875rem; -moz-background-size: 1rem 12.875rem; -o-background-size: 1rem 12.875rem; background-size: 1rem 12.875rem; pointer-events: none; } #side-bar:hover + #main-content::after, #side-bar:active + #main-content::after { left: -17em; left: -webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1); left: -moz-calc(var(--sidebar-width-on-desktop, 17em) * -1); left: calc(var(--sidebar-width-on-desktop, 17em) * -1); background-position: center left -17em; background-position: center left -webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1); background-position: center left -moz-calc(var(--sidebar-width-on-desktop, 17em) * -1); background-position: center left calc(var(--sidebar-width-on-desktop, 17em) * -1); -webkit-transition: left 300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -o-transition: left 300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -moz-transition: left 300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: left 300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1); opacity: 0; width: 0rem; font-size: 0em; } #side-bar:focus-within + #main-content::after { left: -17em; left: -webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1); left: -moz-calc(var(--sidebar-width-on-desktop, 17em) * -1); left: calc(var(--sidebar-width-on-desktop, 17em) * -1); background-position: center left -17em; background-position: center left -webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1); background-position: center left -moz-calc(var(--sidebar-width-on-desktop, 17em) * -1); background-position: center left calc(var(--sidebar-width-on-desktop, 17em) * -1); -webkit-transition: left 300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -o-transition: left 300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -moz-transition: left 300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: left 300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1); opacity: 0; width: 0rem; font-size: 0em; } #main-content::before { --not-ie: absolute; content: " "; background-color: black; background-color: rgb(var(--black-monochrome, 0, 0, 0)); position: fixed; position: var(--not-ie); top: 0; top: var(--final-header-height-on-desktop, 0); left: 0; -webkit-transform: translateX(-12.6rem); -moz-transform: translateX(-12.6rem); -ms-transform: translateX(-12.6rem); -o-transform: translateX(-12.6rem); transform: translateX(-12.6rem); -webkit-transform: translateX(-webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem)); -moz-transform: translateX(-moz-calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem)); -ms-transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem)); -o-transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem)); transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem)); width: 17em; width: var(--sidebar-width-on-desktop, 17em); height: -webkit-calc(100% - 3rem); height: -moz-calc(100% - 3rem); height: calc(100% - 3rem); height: -webkit-calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem); height: -moz-calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem); height: calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem); -webkit-transition: opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -o-transition: opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1), -o-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -moz-transition: transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1), -moz-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1), -moz-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1), -o-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1); opacity: 0.5; pointer-events: none; z-index: 9; margin-bottom: 0; margin-bottom: -webkit-calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem); margin-bottom: -moz-calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem); margin-bottom: calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem); } #side-bar:hover + #main-content::before, #side-bar:active + #main-content::before { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 0; } #side-bar:focus-within + #main-content::before { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 0; } #side-bar .side-block { margin-top: 1rem; background-color: rgb(0,0,0,0); border-radius: 0; border-left-width: 0px; border-right-width: 0px; } @supports (-ms-ime-align: auto) { #side-bar { overflow-y: hidden; overflow-x: hidden; -webkit-transform: translateX(-90%) !important; -moz-transform: translateX(-90%) !important; -ms-transform: translateX(-90%) !important; -o-transform: translateX(-90%) !important; transform: translateX(-90%) !important; } #side-bar:hover, #side-bar:active { overflow-y: auto; -webkit-transform: translateX(0) !important; -moz-transform: translateX(0) !important; -ms-transform: translateX(0) !important; -o-transform: translateX(0) !important; transform: translateX(0) !important; margin-left: -0.5rem; } #side-bar:focus-within { overflow-y: auto; -webkit-transform: translateX(0) !important; -moz-transform: translateX(0) !important; -ms-transform: translateX(0) !important; -o-transform: translateX(0) !important; transform: translateX(0) !important; margin-left: -0.5rem; } #main-content::before { left: 1rem; -webkit-transform: translateX(-100%) !important; -moz-transform: translateX(-100%) !important; -ms-transform: translateX(-100%) !important; -o-transform: translateX(-100%) !important; transform: translateX(-100%) !important; } } }
ページリビジョン: 119, 最終更新: 12 Jun 2022 14:54