titleをnavbarに固定するUserCSS
OBSOLETE: 公式にこのスタイルが採用されたため不要です。 (2024-04-17)
/icons/hr.icon
ただしどの環境でもいい感じに表示されるように工夫を施す
モバイル環境とかPWA環境とか
参考:
/icons/hr.icon
.containerにかかっているstyleをクリアする
code:style.css
.container:has(.quick-launch) {
width: 100%;
max-width: unset;
padding: unset;
margin: unset;
}
.flex-boxにかかっているstyleをクリアする
code:style.css
.quick-launch .flex-box {
display: unset;
}
.flex-itemにかかっているstyleをクリアする
code:style.css
.quick-launch .flex-box .flex-item {
min-width: unset;
}
.left-boxを持つ.flex-itemを.navbarに重ねるように配置する
container化してcontainer queryで画面幅を取得できるようにする
vwだとスクロールバーの横幅が含まれる問題があるので
code:style.css
.quick-launch .flex-box .flex-item:has(.left-box) {
container-type: inline-size;
position: fixed;
top: 0;
z-index: 1000;
width: 100%;
height: 40px;
pointer-events: none;
}
.right-boxを持つ.flex-itemにもともと.containerにかかっていたsytleを適用する
code:style.css
.quick-launch .flex-box .flex-item:has(.right-box) {
padding-right: 8px;
padding-left: 8px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.quick-launch .flex-box .flex-item:has(.right-box) {
width: 736px;
}
}
@media (min-width: 992px) {
.quick-launch .flex-box .flex-item:has(.right-box) {
width: 956px;
}
}
@media (min-width: 1200px) {
.quick-launch .flex-box .flex-item:has(.right-box) {
width: 1156px;
}
}
@media (min-width: 992px) {
.quick-launch .flex-box .flex-item:has(.right-box) {
width: calc(100% - 60px);
max-width: 1200px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.quick-launch .flex-box .flex-item:has(.right-box) {
width: calc(100% - 30px);
}
}
.left-boxの中身を適切な場所に配置する
code:style.css
.quick-launch .left-box { /* <なし; 下矢印なし */
--padding: 16px;
--history-back-button: 46px;
--brand-icon: 32px;
--kamon-caret-down: 24px;
--width-ratio: 0.3;
--col-brand: calc((100cqw - var(--padding) * 2) * var(--width-ratio));
--col-brand-contents: var(--brand-icon);
--toggle-button: 24px;
--page-menu: calc(158px + var(--toggle-button));
--mobile-edit-tools: calc(280px + var(--toggle-button));
width: var(--col-brand);
padding-left: var(--col-brand-contents);
margin-left: var(--padding);
}
@media (max-width: 767px) {
.quick-launch .left-box {
--padding: 8px;
--width-ratio: 0.7;
}
}
.app:has(.navbar .kamon-caret-down) .quick-launch .left-box { /* <なし; 下矢印あり */
--col-brand-contents: calc(var(--brand-icon) + var(--kamon-caret-down));
}
.app:has(.navbar .history-back-button) .quick-launch .left-box { /* <あり; 下矢印なし */
--col-brand-contents: calc(var(--history-back-button) - var(--padding) + var(--brand-icon));
}
.app:has(.navbar .history-back-button):has(.navbar .kamon-caret-down) .quick-launch .left-box { /* <あり; 下矢印あり */
--col-brand-contents: calc(var(--history-back-button) - var(--padding) + var(--brand-icon) + var(--kamon-caret-down));
}
.left-box以下の要素はclickableにする
code:style.css
.quick-launch .left-box > * {
pointer-events: auto;
}
.project-homeのmin-heightとborderの指定をクリアし、paddingを狭める
code:style.css
.quick-launch .project-home {
min-height: unset;
padding: 0 6px;
border: unset;
}
下矢印が表示されない場合に.project-homeの左に余白を設ける
code:style.css
.app:not(:has(.navbar .kamon-caret-down)) .quick-launch .project-home {
margin-left: 2px;
}
モバイル環境で表示される.expandable-menuが.left-boxより後ろに表示されるのでclipする
.expandable-menuのz-indexは1001なので、.left-boxはその後ろに表示されることを期待したいが、そもそもstacking contextが違うので結局.left-boxが手前に表示されてしまう
code:style.css
@media (max-width: 767px) {
.app:has(.page-menu.xs) .quick-launch .left-box {
--expandable-menu: var(--page-menu);
clip-path: inset(0 max(var(--padding) + var(--col-brand) - (100cqw - var(--expandable-menu)), 0px) 0 0);
}
.app:has(.page-menu.xs.mobile-edit-tools) .quick-launch .left-box {
--expandable-menu: var(--mobile-edit-tools);
}
}
/icons/hr.icon
import用
code:css
@import url("/api/code/per-terra/titleをnavbarに固定する/style.css");