BHLトグルサイドバー
このページはコンポーネントページです
Wiki内で使用されているコンポーネントページです。このページを編集することはできません。
編集が必要だと思われる場合は、このページのディスカッションか、サイトスタッフまでご連絡ください。
編集が必要だと思われる場合は、このページのディスカッションか、サイトスタッフまでご連絡ください。
詳しくはカテゴリ運用ポリシーを参照してください。
rev.51
[フレーム]
[フレーム]
評価: 0
これは何
サイトのモバイル版と同様に、サイドバーをデフォルトで非表示にしてコーナーボタンで開閉できるようにします。
- Sigma-9では機能しません。これはBlack Highlighterのみで機能します。
- Sigma-9で使用する場合は、代わりにEstrellaYoshteによるこのコンポーネントを使用して下さい
- 必要に応じて、BHLとSigma-9の両方で機能する折りたたみサイドバーもあります。
折りたたみサイドバーはクリックではなくホバーで機能し、トグルサイドバーよりもわずかに見やすくなっています。
使い方
1. 下記のコードをコピー。
2. Black Highlighterと他のテーマのincludeの後、記事にペースト。
[[include :scp-jp:component:toggle-sidebar-bhl]]
3. (オプション) テーマを使用する場合、トグルボタンのスタイル調整。
必要に応じて、ボタンのスタイルを設定するための5つのCSS変数もあります。
色については、こちらにある利用可能なBHLのCSS変数を使用することを強く推奨します。
:root {
--toggle-button-bg: hex/rgb/hsl color;
--toggle-border-color: hex/rgb/hsl color;
--toggle-border-width: px/rem/em;
--toggle-icon-color: hex/rgb/hsl color;
--toggle-roundness: percentage;
}
@supports(display: grid) { :root{ --sidebar-width-on-desktop: calc((var(--base-font-size) * (14 / 15)) * 19); --body-width-on-desktop:45.75rem; } @mediaonlyscreenand (min-width:769px) { #side-bar .close-menu { display: block; position:fixed; top: unset; bottom:0.5rem; left:0.5rem; width:3rem; height:3rem opacity: 1; pointer-events:all; z-index: -1; }#side-bar.close-menuimg{color:transparent; }#side-bar.close-menu::before, #side-bar.close-menu::after{content: ""; box-sizing: border-box; position:fixed; display:block; top: unset; bottom:0.5rem; left:0.5rem; width:3rem; height:3rem; padding:0; margin:0; text-align:center; pointer-events:all; cursor:pointer; transition: opacity var(--sidebar-transition-timing); }#side-bar.close-menu::before{ --mask:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='Hamburger' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='003232' xml:space='preserve'%3E%3Cpath d='M4 10h24c1.102-.92-2s-.9-2-2-2H4c-1.10-2.9-22s.9222zm24 4H4c-1.10-2.9-22s.9222h24c1.102-.92-2s-.9-2-2-2zm0 8H4c-1.10-2.9-22s.9222h24c1.102-.92-2s-.9-2-2-2z'/%3E%3C/svg%3E"); z-index: -1; background-color: var(--toggle-icon-color, rgb(var(--sidebar-links-text))) !important; -webkit-mask: var(--mask); mask: var(--mask); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:50%50%; mask-position:50%50%; -webkit-mask-size:60%; mask-size:60%; }#side-bar.close-menu::after{z-index: -2; background-color: var(--toggle-button-bg, rgb(var(--sidebar-bg-color))) !important; border-radius: var(--toggle-roundness, 50%); border: var(--toggle-border-color, rgb(var(--sidebar-links-text))) var(--toggle-border-width, 0.25rem) solid; }#side-bar:focus-within.close-menu, #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover.close-menu{pointer-events:none; }#side-bar:focus-within.close-menu::before, #side-bar:focus-within.close-menu::after{opacity:0; pointer-events:none; }#side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover.close-menu::before, #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover.close-menu::after{opacity:0; pointer-events:none; }#side-bar{display:block; position:fixed; top:0; left: calc(var(--sidebar-width-on-desktop)*-1); z-index:10; transition:left500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; height:100%; overflow-y:auto; overflow-x:hidden; margin-top:0; }#side-bar:focus-within{left:0; }#side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover{left: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; }#main-content::before{content: ""; display:block; position:fixed; top:0; right:0; z-index: -1; opacity:0; transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms, width 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; margin-left: var(--sidebar-width-on-desktop); background: rgba(var(--swatch-menubg-black-color), .3) 1px1pxrepeat; padding-right:0; width:100%; height:100vh; pointer-events:none; z-index:99; }#side-bar:focus-within ~ #main-content::before{width: calc(100% - var(--sidebar-width-on-desktop)); opacity:1; pointer-events:all; }#side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover ~ #main-content::before{width: calc(100% - var(--sidebar-width-on-desktop)); opacity:1; pointer-events:all; }@supports (-moz-appearance:none) and (background-attachment:local) and (not (-moz-osx-font-smoothing:auto)) {#side-bar{padding:inherit; }}#content-wrap{display: flex; flex-direction: row; width: calc(100vw - (100vw - 100%)); min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem))); flex-grow:2; height:auto; position:relative; margin:0auto; max-width:inherit; }#main-content{width:100%; position: initial; max-height:100%; padding:2rem 1rem; width: var(--body-width-on-desktop, 45.75rem); max-width: var(--body-width-on-desktop, 45.75rem); margin:0auto; }#page-content{max-width: min(90vw, var(--body-width-on-desktop, 45.75rem)); }@supports (-webkit-hyphens:none) {#side-bar{transition:left500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms, padding-right 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms, background-color 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; padding-right:0; background-color: rgb(0, 0, 0, 0); pointer-events:all; overflow-x:visible; overflow-y:visible; z-index:999; }#side-bar::-webkit-scrollbar{opacity:0; -webkit-transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; }#side-bar.close-menu::before{z-index:999; }#side-bar.close-menu::after{z-index:998; }#side-bar:hover.close-menu::before, #side-bar:hover.close-menu::after{opacity:0; }#side-bar:hover{left:0; background-color: rgba(var(--swatch-menubg-color), 1); padding-right:0; }#side-bar:hover::-webkit-scrollbar { opacity: 1; }#side-bar:hover~#main-content::before{width: calc(100% - var(--sidebar-width-on-desktop)); opacity:1; pointer-events:all; } } } } }
ページリビジョン: 15, 最終更新: 18 Jan 2023 11:59