グラスモーフィズムScrapboxテーマ
https://gyazo.com/9809ed6049f6491a38c83d97e488994b
スマホ画面
https://gyazo.com/306c6c4f8cb128c05c9c143365566470
code:style.css
body {
/* 全体 */
/* ナビゲーションバー（一番上の検索ボックスとかあるとこ） */
/* 背景色 */ --navbar-bg: rgba(53,59,72,0.1);
/* ロゴボタン隣の矢印 */ --navbar-icon-color: #fff; /* クリックされた時の矢印 */ --navbar-icon-active-color: #338c46; /* カーソルを合わせた矢印 */ --navbar-icon-hovered-color: #338c46; /* 検索ボックス背景 */ --search-form-bg: rgba(255, 255, 255, 0.13);
/* 検索の虫眼鏡アイコン */ --search-form-icon-color: rgba(255, 255, 255, 0.5);
/* 検索入力中の虫眼鏡 */ --search-form-icon-focus-color: #4a4a4a; /* ページカード */
/* 上部の色（ピン以外） */ --card-title-bg: rgba(255,255,255,0.1);
/* 背景色 */ --card-bg: rgba(255,255,255,0.1);
/* カーソルを合わせた時 */ --card-hover-bg: rgba(0, 0, 0, 0.1);
/* クリックした時 */ --card-active-bg: rgba(229, 229, 229, 0.1);
/* ピン留めの折り目の裏地 */ --card-backside: rbga(84,88,96,0.1);
/* 詳細文字 */ --card-description-color: #4a4a4a; /* 詳細文字（リンク） */ --card-description-link-color: #6e8af3; /* 詳細文字（コード） */ --card-description-code-color: #396bdd; /* 下部の影の色 */ --card-box-shadow-color: #000; /* 下部の影の形 */ --card-box-shadow: 0 2px 0 var(--card-box-shadow-color);
/* カーソルを合わせた時 */ --card-box-hover-shadow: 0 2px 0 rgba(0, 0, 0, 0.23);
/* 上部の色（ピン留め） */ --card-title-bg-pinned: rgba(255,255,255,0.1);
/* 関連リンク */
/* 関連リンクの背景色 */ --relation-label-bg: rgba(155,171,193,0.4);
/* 関連リンクの文字色 */ --relation-label-text: #fff; /* Linksの背景色 */ --relation-label-links-bg: rgba(94,138,247,0.4);
/* Linksの文字色 */ --relation-label-links-text: #fff; /* New Linksの背景色 */ --relation-label-empty-bg: rgba(253,115,115,0.4);
/* New Linksの文字色 */ --relation-label-empty-text: #fff; /* ツールバー等（カードサイズを変更するバーにも使われている） */
/* アイコン色 */ --tool-color: rgba(255,255,255,0.3);
/* バーの背景 */ --tool-light-color: #dcdde0; /* Plan名が書かれているボタン*/ --tool-badge-bg: rgba(255,255,255,0.3);
/* マウスホバー時の背景 */ --tool-bg: rgba(54,60,73,0.1);
/* プロジェクトタイトル等の文字色 */ --tool-text-color: #4a4a4a; /* 新規作成ボタン */
/* 十字の縦線の色 */ --new-button-vertical-color: #fff; /* 十字の横線の色 */ --new-button-horizontal-color: #fff; /* 背景色 */ --new-button-bg: rgba(255,255,255,0.3);
/* マウスホバー時の背景 */ --new-button-hover-bg: rgba(54,60,73,0.1);
/* クリックした時の背景 */ --new-button-active-bg: rgba(34,40,53,0.1);
/* テロメア */
/* 通常時 */ --telomere-border: rgba(128,139,140,0.1);
/* ページ内 */
/* ホバー時リンク色 */ --page-link-hover-color: #2d67f5; /* リンクにカーソルを置いた時 */ --page-link-color-cursor-line: #781e7a; /* ページ内背景色 */ --page-bg: rgba(255,255,255,0.1);
/* 存在しないページへのリンク色 */ --empty-page-link-color: #fb7476; /* ↑のマウスホバー時 */ --empty-page-link-hover-color: #b47576; /* ページタイトル色 */ --line-title-color: #4a4a4a; /* 行を選択したときの色 */ --line-permalink-color: rgba(234, 218, 74, 0.35);
/* コードの背景色 */ --code-bg: rgba(0, 0, 0, 0.04);
/* 引用文の背景色 */ --quote-bg-color: rgba(0, 0, 0, 0.05);
}
body {
overflow: hidden;
background: var(--body-bg);
}
body::before, body::after {
content: '';
position: fixed;
filter: blur(150px);
}
body::before {
top: -450px;
width: 600px;
height: 600px;
z-index: -1;
}
body::after {
bottom: -150px;
left: 100px;
width: 500px;
height: 500px;
z-index: -1;
}
.app::before {
content: '';
position: fixed;
filter: blur(150px);
bottom: 200px;
right: 100px;
width: 300px;
height: 300px;
z-index: -1;
}
.navbar {
backdrop-filter: blur(5px);
box-shadow: 0 25px 45px rgba(0,0,0,0.1);
border: 1px solid rgba(255,255,255,0.5);
border-bottom: 1px solid rgba(255,255,255,0.2);
}
.page {
backdrop-filter: blur(5px);
box-shadow: 0 25px 45px rgba(0,0,0,0.1);
border: 1px solid rgba(255,255,255,0.5);
border-right: 1px solid rgba(255,255,255,0.2);
border-left: 1px solid rgba(255,255,255,0.2);
border-radius: 10px;
}
.related-page-list div ul.grid li.relation-label a,
.related-page-list div ul.grid li.relation-label a {
backdrop-filter: blur(5px);
box-shadow: 0 25px 45px rgba(0,0,0,0.1);
border: 1px solid rgba(255,255,255,0.5);
border-right: 1px solid rgba(255,255,255,0.2);
border-left: 1px solid rgba(255,255,255,0.2);
border-radius: 5px;
}
/*
.related-page-list ul.grid li.relation-label.links a {
background: rgba(94,138,247,0.1);
}
.related-page-list ul.grid li.relation-label.headword a {
background: rgba(155,171,193,0.1);
}
.related-page-list ul.grid li.relation-label.empty-links a {
background: rgba(253,115,115,0.1);
}*/
ul.grid li.relation-label span.arrow {
display: none;
}
ul.grid li.page-list-item.grid-style-item a {
backdrop-filter: blur(5px);
box-shadow: 0 25px 45px rgba(0,0,0,0.1);
border: 1px solid rgba(255,255,255,0.5);
border-right: 1px solid rgba(255,255,255,0.2);
border-left: 1px solid rgba(255,255,255,0.2);
/*background: rgba(255,255,255,0.1);*/
border-radius: 5px;
}
ul.grid li.page-list-item.grid-style-item a .content .header {
border-top: 10px solid rgba(242,242,243,0.4);
}
.new-button,
.plan-badge {
backdrop-filter: blur(5px);
box-shadow: 0 25px 45px rgba(0,0,0,0.1);
border: 1px solid rgba(255,255,255,0.5);
border-right: 1px solid rgba(255,255,255,0.2);
border-left: 1px solid rgba(255,255,255,0.2);
}