settings
色んな方のcssを参考にしています
@import
code:style.css
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Noto+Serif+JP:wght@200..900&display=swap');
---
全体調整
色
code:style.css
body {
--search-form-icon-color: #1B1B1B;
--page-link-color: #1F75BC;
--page-link-hover-color: #1F75BC;
--card-description-link-color: #1F75BC;
--relation-label-links-bg: #1F75BC;
--empty-page-link-color: #CC2954;
--empty-page-link-hover-color: #CC2954;
--relation-label-empty-bg: #CC2954;
--line-title-color: #1B1B1B;
--tool-color: #1B1B1B;
--telomere-border: #ccc;
--telomere-unread: #1F75BC;
--telomere-updated: #1B1B1B;
}
body {
background-color: #fff;
}
.project-home {
color: #1B1B1B !important;
pointer-events: auto;
height: 30px;
margin-top: 2px;
background-color: transparent !important;
}
.kamon-caret-down {
color: #fff !important;
}
.page {
background-color: #fff !important;
}
::selection {
color: #fff;
background-color: #000;
}
.selections .selection {
position: absolute;
z-index: 100;
pointer-events: none;
top: 0;
left: 0;
opacity: 1;
background-color: rgba(0, 0, 0, 0);
backdrop-filter: grayscale(1) invert(1);
}
html:not(data-display-style*=window-has-focus) .selections .selection {
background-color: rgba(0, 0, 0, 0);
}
.line.permalink {
background-color: #000;
color: #E4E4E4;
}
.line.permalink .page-linktype="link", .line.permalink .link {
color: #E4E4E4;
}
.line.permalink .page-linktype="link" {
color: #E4E4E4;
}
フォント
code:style.css
.lines, textarea, contenteditable="true", .editor textarea, .editor contenteditable="true", .text-input, .description, .dropdown-menu, .grid li.relation-label a .title, strong, b, em {
font-family: Helvetica, 'Inter', 'Noto Sans JP', 'Noto Sans SC', sans-serif;
font-optical-sizing: auto;
font-kerning: auto;
font-style: normal;
letter-spacing: .03em;
}
.lines, textarea, contenteditable="true", .editor textarea, .editor contenteditable="true", .text-input {
color: #1B1B1B !important;
line-height: 2.25em !important;
font-size: 14px !important;
font-style: normal;
}
.line-title {
font-family: 'Inter', 'Noto Sans JP', 'Noto Sans SC', sans-serif;
font-size: 1.73em !important;
line-height: 1.5em !important;
font-weight: 600;
font-feature-settings: "palt" 1;
}
.line .line-title .text {
padding: 0 !important;
margin-bottom: 30px;
}
.grid li.page-list-item a .description {
line-height: 2.08 !important;
font-size: 11px !important;
font-style: normal;
}
.related-page-list .grid li.page-list-item a .description {
line-height: 1.84 !important;
font-size: 11px !important;
font-style: normal;
}
.dropdown-menu, .grid li.relation-label a .title {
font-size: 13px !important;
font-style: normal;
}
.line .quote {
font-family: "Noto Serif JP", serif;
font-weight: 500;
}
strong, b {
font-weight: 600 !important;
}
em {
font-style: italic !important;
}
.line a.page-link {
text-decoration: underline;
/* text-underline-offset: 3px;*/
text-decoration-thickness: from-font;
}
.line a.page-link:hover:not(type="hashTag") {
color: #ccc;
}
data-hover-visible .line a.link:hover {
color: #ccc;
}
.grid li.page-list-item a {
word-break: break-all;
line-height: 12px;
}
.project-home, .project-home .title {
font-family: Helvetica, sans-serif;
font-size: 11px;
letter-spacing: .03em;
font-weight: 400;
font-kerning: auto;
text-transform: uppercase;
}
.project-home:hover .title {
text-decoration: underline;
}
.line spandata-char="_" {
position: relative;
top: -0.1em;
}
.line a.link {
text-decoration-thickness: from-font;
}
キャプション記法の追加
code:style.css
.line:has(.deco-\|) {
font-size: 12px !important;
line-height: 1.5em !important;
color: #1B1B1B;
background-color: #F2F2F2;
padding: 2px 8px 2px 8px;
position: relative;
}
.line:has(.deco-\|)::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: #BBB;
}
カーソルを点滅させる
code:style.css
@keyframes blink {
0% { opacity: 0; }
49% { opacity: 0; }
50% { opacity: 1; }
}
.cursor {
animation: blink 1s infinite
}
スクロールバー
code:style.css
::-webkit-scrollbar-track{
background-color: white;
}
::-webkit-scrollbar{
width: 8px;
}
::-webkit-scrollbar-thumb{
background-color: #cccccc;
border-radius: 0px;
}
---
page-list系
ページリストの調整
code:style.css
.container {
max-width: none !important;
/* display: flex !important; */
justify-content: center !important;
width: 1300px !important;
margin-top: 45px
}
.links-container {
width: 862px !important;
}
.related-page-list {
margin-top: 0;
}
.related-page-list .links-container {
gap: 60px;
}
.page-column {
margin: 0 !important;
}
.page {
padding-top: 0;
}
li.pin:not(:has(~ li.pin)) {
margin-bottom: 30px;
}
.page-list::before {
content: "";
position: absolute;
width: 1300px;
height: 1px;
background-color: #1b1b1b;
top: 380px;
left: 50%;
transform: translateX(-50%);
z-index: 1;
pointer-events: none;
}
.page-list {
position: relative;
}
.page-list-itemdata-page-title="zahyou" .title {
display: none !important;
}
ul.grid li.page-list-item {
& a .content:has(.description) {
height: 100%;
margin: 0;
padding-top: 0;
}
& a .content:has(.description) .header {
padding: 0 0 16px;
text-align: right;
}
& a:hover .content:has(.description) .title {
text-decoration: underline;
}
}
ピンの装飾を消す
code:style.css
.grid li.page-list-item a .pin {
background-color: transparent; background-image: none
}
ul.grid li.page-list-item a:hover {
box-shadow: none !important;
border-bottom: none !important;
}
がついているページを隠す
code:style.css
.page-list-itemdata-page-links*="'private'",
.stream .pagedata-page-links*="'private'" {
display: none;
}
code:style.css
.grid li.relation-label a .icon-lg {
width: 36px;
height: 24px !important;
line-height: 36px;
font-size: 24px;
display: inline-block;
}
---
page系
page
code:style.css
.page {
padding-left: 0;
padding-right: 0;
}
page下セパレータ追加
code:style.css
.editor {
border-bottom: 1px solid #000 !important; /* 下に1pxのボーダーラインを追加 */
}
page-titleの上下余白を30pxに合わせる
code:style.css
.line.line-title .text {
padding-bottom: 30px;
}
page検索欄/random jump消す
code:style.css
.related-page-list-search {
display: none !important;
}
.random-jump-button {
display: none !important;
}
toolber整理
code:style.css
.related-page-list .toolbar{
margin-bottom: 0px;
}
テロメア消去
code:style.css
.telomere {
display: none;
}
テロメア復活
code:style.css
.line .telomere .telomere-border {
border-width: 0 0 0 1px !important;
left: -30px;
}
page内の見た目調整
自分の環境だと上にずれて配置されるので一部調整（/scrasobox/箇条書きを控えめにする）
code:style.css
.app .line .indent-mark .dot {
height: 2px;
width: 8px;
background-color: rgb(204,204,204);
border-radius: 0;
display: inline-block;
vertical-align: middle;
margin-top: 0.3em;
right: 7px;
top: 11px;
}
.line.number-list .dot, .line.quote-line .dot {
top: 12.5px !important;
height: 2px !important;
border-radius: unset !important;
background-color: black !important;
}
画像並べたときに隙間を開ける
code:style.css
.text > span > span:not(:first-child) .image, .indent > span:not(:first-child) .image, .quote > span:has(.modal-image):nth-child(n+3) .image {
margin-left: 5px;
}
.line:not(.cursor-line).image-line-2 .image, .line:not(.cursor-line).image-line-2 .strong-image {
max-width: 49.67%;
}
.line:not(.cursor-line).image-line-2 .quote .image, .line:not(.cursor-line).image-line-2 .quote .strong-image {
max-width: 49.1%;
}
.line:not(.cursor-line).image-line-3 .image, .line:not(.cursor-line).image-line-3 .strong-image, .line:not(.cursor-line).image-line-3 .quote .image, .line:not(.cursor-line).image-line-3 .quote .strong-image {
max-width: 32.91%;
}
.line:not(.cursor-line).image-line-4 .image, .line:not(.cursor-line).image-line-4 .strong-image, .line:not(.cursor-line).image-line-4 .quote .image, .line:not(.cursor-line).image-line-4 .quote .strong-image {
max-width: 24.53%;
}
画像あれこれ
code:style.css
.full-content-modal .modal-body .full-content {
display: inline-block;
pointer-events: none !important;
height: 80vh;
width: auto;
object-fit: contain;
}
.full-content-modal .modal-body img.full-content, .full-content-modal .modal-body svg.full-content {
background: none !important;
}
button.btn.btn-primary.draw-button {
display: none;
}
/*modalのtransitionを無効化*/
.modal-backdrop.fade {
opacity:0;
}
.fade {
transition:opacity 0s linear;
}
.modal.fade .modal-dialog {
transition:transform 0s ease-out;
}
アイコン
code:style.css
.line img.icon {
top: -0.1em;
}
16:9の画像がpage幅に沿うように
画像並べたときに隙間を開けるとの幅を均一に
code:style.css
.line .image {
margin: 2.5px 0;
max-width: 100%;
max-height: 485px;
display: inline-block;
vertical-align: top;
}
~ 'text' でセパレータを追加するやつ（テキスト消去ver.）/per-terra/セパレーター記法
必要なくなったけど一応残しておく
code:style.css
.line:not(.cursor-line) .deco:has(.deco-\~) {
display: flex;
align-items: center;
text-align: center;
color: transparent;
&::before, &::after {
flex-grow: 1;
min-width: 30px;
content: "";
border-top: 1px solid #000;
margin-top: auto;
margin-bottom: auto;
}
&::before {
margin-right: -50px;
}
&::after {
margin-left: -50px;
}
&:has(.deco-\-) {
&::before, &::after {
border-style: dashed none none;
}
}
.deco-\- {
text-decoration: none;
color: transparent;
}
}
/yozba/行頭に---を入れるだけでセパレーターになるUserCSS
良く分からないけどcss調整しまくってたら使えるようになってた
なんで今まで動作しなかったのか分からないし、なんで急に使えるようになったのかも分からない
本当になんで？
code:style.css
.line:has(span.char-index.c-0data-char="-"):has(span.char-index.c-1data-char="-"):has(span.char-index.c-2data-char="-"){
&{
display: flex;
align-items: center;
text-align: center;
}
&:not(.cursor-line):after{
flex-grow: 1;
content: "";
border-top: 1px solid #000;
}
&:not(.cursor-line){
height:28px;
}
}
.line:not(.cursor-line):has(.c-0data-char="-"):has(.c-1data-char="-"):has(.c-2data-char="-") span.char-index{
&.c-0data-char="-",
&.c-1data-char="-",
&.c-2data-char="-"{
display:none;
}
}
ハッシュタグの見た目
#test
code:style.css
atype="hashTag".page-link {
background-color: #EDEFF2;
color: #333;
border-radius: 2px;
padding: 2px 6px;
margin: 0 2px;
text-decoration: none;
border: 1px solid #D2D5DA;
}
atype="hashTag".empty-page-link {
background-color: #EDEFF2;
color: #888;
border-radius: 2px;
padding: 2px 6px;
margin: 0 2px;
text-decoration: none;
border: 1px solid #D2D5DA;
}
data-hover-visible atype="hashTag":hover {
background-color: #DFE2E6;
color: #1B1B1B !important;
border-color: #B0B4BA;
}
atype="hashTag" > span.char-indexdata-char="#"::after {
content: '';
display: inline-block;
width: 0.5em;
}
tableの座布団
code:style.css
.table-block .table-block-start {
background-color: rgba(0, 0, 0, 0.1);
}
強調記法で画像大きく
これも要らない可能性大
code:style.css
.level-1 img { width: 100%; max-height: none !important; }
.level-2 img { width: 60%; max-height: none !important; }
.level-3 img { width: 70%; max-height: none !important; }
.level-4 img { width: 80%; max-height: none !important; }
.level-5 img { width: 90%; max-height: none !important; }
.level-6 img { width: 100%; max-height: none !important; }
[[この強調]]にマーカーを付ける
code:style.css
.line strong:not(class) {
background: linear-gradient(transparent 60%, #ffc414 0%);
}
/yozba/インデントに縦線を表示するUserCSS
code:style.css
.lines .line .indent-mark {
height: 100%;
}
.lines .line .table-block .indent-mark {
height: auto; /*tableは除外する*/
}
.indent-mark .pad {
height: 100% !important;
width: 1.5em !important;
overflow: unset !important;
}
.indent-mark span:not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
border-right: 1px solid #a0a0a0;
}
.line .quote {
margin-left: -.5px;
background-color: var(--quote-bg-color, rgba(0, 0, 0, 0.05));
padding-left: 1.2em;
}
画像クリックでページがカクつかないように
code:style.css
body{padding-right: unset !important}
/customize/外部リンクを区別するUserCSS#60e369fe1280f000008e0587
code:style.css
.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon)::after {
font-family: Material Symbols Sharp;
font-style: normal;
font-weight: 400;
text-transform: none;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
content: "arrow_outward";
vertical-align: middle;
display: inline-block;
}
iframeをpageいっぱいに
code:style.css
.iframe-video-player iframe {
display: inline-block;
vertical-align: middle;
width: 100%;
height: 485px;
max-height: 40vw;
border: 0;
}
---
navber系
ライン消す
code:style.css
.navbar {
box-shadow: none !important;
border-bottom: none !important;
}
右上のボタン群消す
code:style.css
.btn.tool-btn.dropdown-toggle {
display: none !important;
}
ページメニューが.navberにめり込むのを直す
code:style.css
.page-menu {
position: sticky !important;
/*transform: translate(8px, 0px);*/
top: 145px; /* navbar の高さ分だけ調整 */
}
検索欄周りの整理
code:style.css
.navbar {
background-color: rgba(255,255,255,.8) !important;
/* backdrop-filter: none; */
/* pointer-events: none; */
}
.row {
background-color: transparent !important;
max-width: none !important;
width: 1300px !important;
height: 145px !important;
padding-bottom: 30px;
padding-top: 75px;
margin: 0 auto !important;
}
.kamon-caret-down {
color: #000 !important;
}
ul.dropdown-menu {
max-width: none !important;
width: 100%;
box-shadow: none;
border: none;
border-radius: unset;
pointer-events: auto;
}
ul.global-menu.dropdown-menu {
min-width: max-content;
box-shadow:none;
}
.navbar .dropdown-menu-right {
box-shadow:none;
}
.navbar .navbar-brand .kamon-caret-down {
color: #000 !important;
}
.search-form .form-group input {
background-color: transparent !important;
border-radius: 0;
border: none;
border-bottom: 1px solid #000 !important;
height: 30px;
pointer-events: auto;
}
.navbar .navbar-menu>li {
pointer-events: auto;
min-width: 30px;
}
.navbar .navbar-menu>li .dropdown-toggle>.icon {
border: none;
border-radius: 0;
width: 30px;
height: 30px;
}
.brand-icon {
border: none !important;
border-radius: 0 !important;
display: none;
}
ハンバーガーメニューアイコン
code:style.css
div.col-brand.dropdown.global-menu-button a.navbar-brand {
justify-content: left;
display: inline;
margin-right: 18px;
pointer-events: auto;
}
div.col-brand.dropdown.global-menu-button a.navbar-brand span.kamon.kamon-caret-down {
background: #000 !important;
border: none !important;
box-shadow: none !important;
width: 20px;
height: 1px;
display: inline-block;
position: relative;
cursor: pointer;
vertical-align: middle;
margin-right: 0;
padding: 0;
box-sizing: border-box;
transform: none !important;
transition: background-color 0.15s ease-in-out, transform 0.15s ease-in-out, width 0.15s ease-in-out;
}
/* 上下の線 */
div.col-brand.dropdown.global-menu-button a.navbar-brand span.kamon.kamon-caret-down::before,
div.col-brand.dropdown.global-menu-button a.navbar-brand span.kamon.kamon-caret-down::after {
content: "";
position: absolute;
left: 0;
width: 20px;
height: 1px;
background-color: #000;
transform: none !important;
transform-origin: center;
transition: transform 0.15s ease-in-out, top 0.15s ease-in-out, bottom 0.15s ease-in-out;
}
div.col-brand.dropdown.global-menu-button a.navbar-brand span.kamon.kamon-caret-down::before {
top: -6px;
}
div.col-brand.dropdown.global-menu-button a.navbar-brand span.kamon.kamon-caret-down::after {
bottom: -6px;
}
div.col-brand.dropdown.global-menu-button.open a.navbar-brand span.kamon.kamon-caret-down {
background-color: transparent !important;
transform: none !important;
}
div.col-brand.dropdown.global-menu-button.open a.navbar-brand span.kamon.kamon-caret-down::before {
top: 0 !important;
height: .5px !important;
transform: rotate(45deg) !important;
}
div.col-brand.dropdown.global-menu-button.open a.navbar-brand span.kamon.kamon-caret-down::after {
bottom: 0 !important;
height: .5px !important;
transform: rotate(-45deg) !important;
}
new-button
code:style.css
.new-button .horizontal-line,
.new-button .vertical-line {
display: none;
}
.new-button::after {
content: "page";
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-family: Helvetica, sans-serif;
font-weight: 400 !important;
letter-spacing: .03em !important;
font-size: 11px;
color: #1B1B1B;
pointer-events: auto;
text-align: center;
line-height: normal;
white-space: nowrap;
}
.new-button {
background-color: transparent !important;
margin-right: 18px;
}
.new-button:hover::after {
text-decoration: underline;
}
---
雑多
code:style.css
.grid li.page-list-item.pin::after {
display: none;
}
.page {
box-shadow: none !important;
border: none !important;
}
.app {
padding-top: 0 !important;
}
.container {
padding-left: 0 !important;
padding-right: 0 !important;
margin-top: 0 !important;
padding-top: 145px !important;
}
body {
text-underline-offset: 2px;
}
iframe.vimeo{
background:black
}
.col-page {
width: 862px;
transform: translateX(30px);
}
.global-menu li a.updated, .global-menu li a.highlight, .user-menu li a.updated, .user-menu li a.highlight {
border-left: 2px solid var(--unread-color, #1F75BC);
}
.dropdown-menu>li>a.selected, data-hover-visible .dropdown-menu>li>a.selected, .user-menu li a.highlight {
color: var(--unread-color, #1F75BC);
}
.modal-backdrop.in {
opacity: .9;
}
.quick-launch {
margin-bottom: 0px;
}
.grid li.page-list-item a .hover {
background-color: transparent;
}
---
根幹
/Glisp一部改変（問題があれば削除致します）
code:style.css
.brand-icon {
--logo-url: url("https://pbs.twimg.com/profile_images/1871168869508988928/ow08AHvm_400x400.jpg");
width: 40px;
height: 40px;
background-color: transparent;
background-image: var(--logo-url);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: 2px solid transparent;
border-radius: 25%;
svg {
display: none;
}
}
.global-menu {
& .project-list-filter input {
display: block;
font-size: 14px;
flex-grow: 1;
padding-left: 36px !important;
}
& .project-list-filter .kamon {
position: absolute;
left: 26px;
}
& .project-list-filter a {
padding: 0;
overflow: visible !important;
}
& .project-list-filter a:focus-within {
box-shadow: none;
background-color: transparent !important;
}
}
/* -----------------------------
不要な分割線の非表示
----------------------------- */
.grid li.splitter.splitter {
display: none;
}
/* -----------------------------
グリッド表示の調整
----------------------------- */
:is(.page-list, .related-page-list) ul.grid {
margin: 0;
display: grid;
grid-auto-flow: dense;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 30px !important;
}
:is(.page-list, .related-page-list) ul.grid > li.page-list-item.pin + li.page-list-item:not(.pin) {
/*grid-column-start: 1 !important;*/
}
ul.grid {
& :is(.page-list, .related-page-list) & li.page-list-item {
margin: 0;
}
.page-list & li.page-list-item {
height: 160px;
width: 160px;
aspect-ratio: auto;
grid-column: span 1;
grid-row: span 1;
&:nth-child(4n+1):not(:first-child):not(data-page-links~="'_'"):not(.pin) {
grid-column: span 2;
width: auto;
}
&:first-child, &data-page-links~="'_'" {
grid-column: span 2;
grid-row: span 2;
width: 350px;
height: auto;
aspect-ratio: 1 / 1;
}
}
.pin { order: -3; }
.page-list-itemdata-page-links="'private'" { order: 1 !important; }
.page-list-itemdata-page-links*="spacer_" {
width: auto;
opacity: 0;
pointer-events: none;
cursor: default;
order: -2 !important;
}
.page-list-itemdata-page-links~="'spacer_1'" { grid-column: span 1 !important; }
.page-list-itemdata-page-links~="'spacer_2'" { grid-column: span 2 !important; }
.page-list-itemdata-page-links~="'spacer_3'" { grid-column: span 3 !important; }
.page-list-itemdata-page-links~="'spacer_4'" { grid-column: span 4 !important; }
.page-list-itemdata-page-links~="'spacer_5'" { grid-column: span 5 !important; }
.page-list-itemdata-page-title="アクセスカウンタ":not(.related-page-list .page-list-item) {
grid-column: span 2;
width: auto !important;
order: -1 !important;
& .title {
display: none;
}
& a .icon img {
width: 100% !important;
object-fit: contain;
}
}
& li.page-list-item {
&:first-child {
--border-color: black !important;
& .header {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
& .title {
font-family: 'Inter', 'Noto Sans JP', sans-serif !important;
font-weight: 400 !important;
font-size: 13px;
letter-spacing: 0.03em;
color: white !important;
background: none !important;
text-align: center;
line-height: 1.6;
overflow: visible !important;
margin: auto auto !important;
transform: translateY(12px);
}
& .icon img {
filter: none !important;
}
}
&:has(.icon) {
& img {
/*filter: saturate(0);*/
}
}
&data-page-title="zahyou" {
--border-color: black !important;
}
}
--border-color: black;
& li.page-list-item a {
/* ... （既存のスタイル） ... */
position: relative;
box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 1);
overflow: hidden;
height: 100%;
border-radius: 0px;
border: none !important;
&:has(.icon) {
box-shadow: none;
}
& .content {
font-family: var(--text-font);
height: calc(100% - 14px);
border-radius: 0px;
overflow: hidden;
margin: 0 5px 5px;
padding-top: 4px;
}
& .header {
border-top: none;
padding: 0 0 12px;
z-index: 30;
position: relative;
}
& .title {
font-family: Helvetica, 'Noto Sans JP', sans-serif !important;
font-weight: 400 !important;
font-size: 11px;
letter-spacing: .03em;
line-height: 14px;
color: #1B1B1B;
background: linear-gradient(#fff 0 0) left / 100% .95em no-repeat;
display: inline;
padding: 0 0;
border-radius: .0em;
position: relative;
z-index: 30;
}
& .description {
padding: 0;
& code {
padding-left: 3px;
padding-right: 3px;
border-radius: 3px;
}
}
& img.inline-icon {
border-radius: 0%;
width: auto;
padding: 0 0;
}
& .icon {
padding: 0;
margin-inline: 0;
& img {
position: absolute;
object-fit: cover;
height: 100%;
inset: 0;
border-radius: 0px;
}
}
&::before {
content: "";
position: absolute;
inset: 0;
background-color: rgba(255, 255, 255, 0);
mix-blend-mode: screen;
transition: background-color 0s ease, backdrop-filter 0s ease;
z-index: 10;
pointer-events: none;
/*backdrop-filter: contrast(100%) brightness(1);*/
}
&:hover::before {
background-color: rgba(255, 255, 255, .6);
/*backdrop-filter: contrast(1) brightness(1);*/
}
}
}
ul.grid li.page-list-item .icon img {
transition: transform 0.2s ease; /* スムーズなアニメーション */
}
ul.grid li.page-list-item:hover .icon img {
transform: scale(1.0);
}
/* -----------------------------
ページレイアウトその他
----------------------------- */
.col-page {
padding: 0 !important;
}
.table-block .cell {
border-top: 1px solid currentColor;
}
.status-bar > div {
border-style: dashed none none dashed;
font-family: var(--code-font);
}
.expandable-menu {
top: 12px;
backdrop-filter: none;
box-shadow: 0 0 0 1px black;
border-radius: 1000px 0 0 1000px;
& .toggle-button {
opacity: 1;
color: black;
}
& .page-menu .tool-btn {
color: var(--tool-color);
}
}
/* -----------------------------
関連ページリストとラベル装飾
----------------------------- */
.related-page-list {
padding: 0 0;
display: flex;
flex-direction: column;
gap: var(--grid-gap);
}
& .grid li {
height: 100%;
aspect-ratio: 1 / 1;
}
& .grid li.relation-label a {
aspect-ratio: 1 / 1;
border-radius: 0px;
background-color: #1B1B1B;
}
& li.relation-label a {
--gray: #333333;
background-image: linear-gradient(
45deg,
var(--gray) 6.25%,
transparent 6.25%,
transparent 50%,
var(--gray) 50%,
var(--gray) 56.25%,
transparent 56.25%
);
background-size: 8px 8px;
background-color: black;
border: 0px solid black;
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 0px;
}
& li.relation-label a :is(.title, .icon-lg) {
color: white;
}
& li.relation-label:is(.links, .project-links) a {
background-image: none;
}
}
---
スマホ対応
code:style.css
/*ページリスト設定*/
@media screen and (max-width: 768px) {
html, body, .page, .content {
margin: 0;
padding: 0;
box-sizing: border-box;
overflow-x: hidden;
}
}
@media screen and (max-width: 768px) {
.page-list ul.grid, {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 10px !important;
grid-auto-rows: 100px;
}
.page-list ul.grid > .page-list-item {
grid-column: auto !important;
grid-row: auto !important;
width: auto !important;
height: auto !important;
aspect-ratio: 1 / 1 !important;
}
}
@media screen and (max-width: 768px) {
:is(.page-list, .related-page-list) ul.grid {
grid-auto-flow: row !important;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 10px !important;
}
}
@media screen and (max-width: 768px) {
:is(.page-list, .related-page-list) ul.grid > li.page-list-item.pin + li.page-list-item:not(.pin) {
grid-column-start: 1 !important;
}
}
@media screen and (max-width: 768px) {
.links-container {
width: 95% !important;
}
}
@media screen and (max-width: 768px) {
.container, .row, .col-page {
width: 95% !important;
}
.row {
height: auto !important;
padding-top: 20px !important;
padding-bottom: 20px !important;
}
.app {
padding-top: 0px !important;
}
}
@media screen and (max-width: 768px) {
.container {
padding-top: 80px !important;
}
}
@media screen and (max-width: 768px) {
.page-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
width: 100%;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
}
@media screen and (max-width: 768px) {
.page-list-itemdata-page-links~="'spacer_1'",.page-list-itemdata-page-links~="'spacer_2'",.page-list-itemdata-page-links~="'spacer_3'",.page-list-itemdata-page-links~="'spacer_4'",.page-list-itemdata-page-links~="'spacer_5'" {
display: none;
}
}
@media screen and (max-width: 768px) {
.related-page-list .links-container {
gap: 30px;
}
}
/*ページ内設定*/
@media screen and (max-width: 768px) {
.line:not(.cursor-line).image-line-2 .image, .line:not(.cursor-line).image-line-2 .strong-image {
max-width: 49.2%;
}
}
@media screen and (max-width: 768px) {
.line:not(.cursor-line).image-line-3 .image, .line:not(.cursor-line).image-line-3 .strong-image {
max-width: 32.33%;
}
}
@media screen and (max-width: 768px) {
.iframe-video-player iframe {
max-height: 50vw;
}
}
@media screen and (max-width: 768px) {
.lines, textarea, contenteditable="true", .editor textarea, .editor contenteditable="true", .text-input {
font-size: .8em !important;
}
}
@media(max-width: 768px) {
.brand-icon{
display: block;
width: 30px;
height: 30px;
pointer-events: auto;
}
}
@media(max-width: 768px) {
.page-list-itemdata-page-title="アクセスカウンタ":not(.related-page-list .page-list-item) {
grid-column: span 1 !important;
width: auto !important;
order: -1 !important;
& .title {
display: none;
}
& a .icon img {
width: 100% !important;
object-fit: contain;
}
}
}
@media(max-width: 768px) {
& .col-page {
transform: translateX(0px)
}
& .page-list::before {
display: none;
}
& .expandable-menu {
display: none;
}
& .expandable-menu-margin {
display: none;
}
& .app .line .indent-mark .dot {
margin-top: 0.1em;
right: 4.5px;
}
}