settings
code:style.css
/* インポート */
body {
/* 変数オーバーライド */
--search-form-bg: transparent;
--search-form-icon-color: white;
--search-form-text-color: rgba(255, 255, 255, 1);
--navbar-bg: white;
--navbar-icon-color: black;
--navbar-title-color: white;
--new-button-vertical-color: black;
--new-button-horizontal-color: black;
--new-button-bg: var(--body-bg);
--card-border: none;
--navbar-icon-color: white;
--logo-url: url(/assets/img/logo_gray.svg);
/* カスタム変数 */
--heading-font: 'Inter', Helvetica, 'Zen Kaku Gothic New', sans-serif;
--text-font: 'Shippori Mincho', yu-mincho-pr6n, YuMincho, 游明朝, 'Yu Mincho',
YuMincho, 'Hiragino Mincho ProN', HGS明朝E, serif;
--code-font: 'Fira Code', Monaco, monospace;
}
/* シンタックスハイライト */
code.highlight .hljs-comment {
font-weight: bold;
}
/* ページ設定 */
.line.line-title .text {
font-weight: 700 !important;
font-family: var(--heading-font);
text-align: center;
}
.line .text {
font-family: var(--text-font);
}
/* リンクの下線を非表示（hashTagは除く） */
text-decoration: none !important;
border-bottom: none !important;
}
/* リンク付き画像の中央配置 */
a.link:has(img.image) {
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
width: fit-content !important;
}
/* リンク付き画像：デフォルトで境界線なし */
a.link img.image {
border: none !important;
display: block !important;
transition: border 0.2s ease;
}
/* リンク付き画像：ホバー時に白い境界線を表示 */
a.link:hover img.image {
border: 0.5px solid white !important;
}
img.gyazo.image {
display: block;
margin-left: auto;
margin-right: auto;
}
.line span.code-block {
}
/* 設定を非表示 */
.page-filter-menu {
display: none;
}
/* 関連ページリストの検索バーを非表示 */
.related-page-list-search {
display: none !important;
}
/* ページホワイトリスト */
.page-list .grid li.page-list-item:not(:first-child) {
display: none !important;
}
/* ホワイトリストのページを表示 */
display: block !important;
}
/* 匿名ユーザー用：デフォルトで特定要素を非表示 */
.navbar .col-brand.dropdown.global-menu-button,
.navbar .col-menu .stream-btn,
.navbar .col-menu .user-menu-dropdown,
.page-menu {
display: none !important;
}
/* 編集権限のあるユーザー用：new-buttonが存在する場合のみ表示 */
.navbar:has(.new-button) .col-brand.dropdown.global-menu-button,
.navbar:has(.new-button) .col-menu .stream-btn,
.navbar:has(.new-button) .col-menu .user-menu-dropdown,
body:has(.new-button) .page-menu {
display: block !important;
}
/* 匿名ユーザー用：アイコン左側に余白を追加 */
.navbar:not(:has(.new-button)) .left {
padding-left: 20px !important;
}
/* ナビゲーションバー */
.navbar {
/*position: inherit;*/
font-family: var(--heading-font);
padding: 12px 0 8px;
background-color: transparent;
/*background-image: var(--gradient-bg);*/
background-size: 100% 4px;
background-repeat: repeat-x;
border-bottom: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
--button-hover-color: white;
& .navbar-menu {
margin: 0 10px 0 0;
}
& .navbar-menu > li > a {
color: white;
background: transparent;
border-radius: 1000px;
& :hover {
color: black;
}
}
& .navbar-brand {
margin-left: 10px;
}
& .project-home {
color: white;
& :hover {
color: black;
}
}
}
.brand-icon {
& path {
fill: transparent;
stroke: white;
vector-effect: non-scaling-stroke;
transform: scale(.1);
transform-origin: 50% 50%;
}
}
/* 検索フォーム */
.search-form .form-group {
& input {
backdrop-filter: blur(1px);
-webkit-backdrop-filter: blur(1px);
background: rgba(255, 255, 255, 0);
&:focus {
border-radius: 16px 16px 0 0 !important;
backdrop-filter: blur(4px);
background: rgba(255, 255, 255, 0.2);
}
}
/* 検索窓入力中の文字色 */
& .form-control {
}
& input:focus {
color: white;
}
/* 検索窓のサジェストのアピアランス*/
& .dropdown-menu {
border: 1px solid black;
background: rgba(15, 133, 162, 0.8);
backdrop-filter: blur(4px);
margin: 0 -1px 0;
border-radius: 0 0 16px 16px;
max-width: auto;
width: calc(100% + 2px);
& li > a {
color: white;
&:hover {
color: black;
}
}
/* settingsページを検索候補から非表示 */
display: none !important;
}
}
& button {
right: 5px;
}
}
/* フッター */
.footer .status-bar {
display: none;
}
/* テロメア非表示 */
.line .telomere .telomere-border {
border-width: 0px 0px 0px 0px !important;
width: 0;
}
.line .telomere .telomere-border .description {
display: none
}
/* リストサイズ */
input.grid-size-range { display: none }
a#dropdownMenuSort.tool-btn.dropdown-toggle { display: none }
div.page-list{
max-width:940px;
margin-left:auto;
margin-right:auto;
}
.page-list .grid li {
/* width : 300px !important; */
width: 100%!important;
height: 280px !important;
}
/* 先頭ブロック */
.page-list .grid li:first-child {
grid-column: 1 / -1 !important;
grid-row: span 2 !important;
width: 100% !important;
max-width: none !important;
min-height: 560px;
}
.related-page-list .grid li.page-list-item,
.related-page-list .grid li.relation-label {
width: 100%!important;
height: 280px !important;
&:first-child{
display: none;
}
}
@media (width < 650px) {
.page-list .grid li,
.related-page-list .grid li.page-list-item,
.related-page-list .grid li.relation-label {
/* width : 300px !important; */
height: auto !important;
}
}
/* カードのカスタマイズ */
.grid li.page-list-item {
box-shadow: 0px 2px 3px 1px rgba(0,0,0,0.1);
border-radius: 5px;
overflow: hidden;
}
.grid li.page-list-item a {
box-shadow: 0 0px 0 rgba(0,0,0,0);
}
.grid li.page-list-item a .content{
height: 100%;
}
/* カードのサムネイル画像をフィット＆フィルタをかける */
.grid li.page-list-item a .icon img {
display: block;
width: 100%;
height: 100%;
margin: 0 auto;
object-fit: cover;
filter: saturate(0) blur(2px);
}
.grid li.page-list-item a:hover .icon img {
filter: none;
transition: filter 0.2s ease;
}
/* ノイズレイヤー */
.grid li.page-list-item a .icon::after {
content: "";
position: absolute;
inset: 0;
background-size: cover;
mix-blend-mode: overlay;
opacity: .6; /* デフォルトでノイズあり */
transition: opacity 0.2s ease;
pointer-events: none; /* クリック操作を邪魔しない */
}
/* マウスホバー時にノイズを消す */
.grid li.page-list-item a:hover .icon::after {
opacity: 0;
}
/* カード内のテキスト */
ul.grid li.page-list-item a .description {
opacity: 0;
transition: opacity 0.2s ease;
position: relative;
}
/* description内のテキスト色を一律グレーに統一 */
ul.grid li.page-list-item a .description,
ul.grid li.page-list-item a .description * {
}
ul.grid li.page-list-item a:hover .description {
opacity: 1;
}
/* description用ノイズレイヤー */
ul.grid li.page-list-item a .description::after {
content: "";
position: absolute;
inset: 0;
background-size: cover;
mix-blend-mode: multiply;
opacity: 1;
transition: opacity 0.2s ease;
pointer-events: none;
}
/* マウスホバー時に説明文のノイズを消す */
ul.grid li.page-list-item a:hover .description::after {
opacity: 0;
}
ul.grid li.page-list-item a .pin {
right: -1px;
top: -1px;
border-radius: 0 0 0 8px;
z-index: 100;
background: linear-gradient(
45deg,
var(--border-color) 50%,
var(--body-bg) 50%
);
}
ul.grid li.page-list-item a {
text-align: center;
}
ul.grid li.page-list-item a .header {
border-top: none;
padding: 0 0 12px;
z-index: 1;
}
ul.grid li.page-list-item a .title {
font-weight: 700 !important;
font-size: 20px;
font-family: var(--heading-font);
background: rgba(0, 0, 0, 0.5);
display: inline;
padding: 0 2px;
border-radius: .2em;
margin 0 auto;
}
ul.grid li.page-list-item a img.inline-icon {
border-radius: 50%;
padding: 0 2px;
}
ul.grid li.page-list-item a .icon {
padding: 0;
margin-inline: 0;
}
ul.grid li.page-list-item a .icon img {
position: absolute;
object-fit: cover;
height: 100%;
inset: 0;
border-radius: 4px;
}
/*先頭アイテムのアピアランス調整*/
ul.grid li.page-list-item:first-child .header {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
ul.grid li.page-list-item:first-child .title {
font-size: 2.5rem;
font-family: var(--code-font);
font-weight: 300 !important;
color: white !important;
background: none !important;
text-align: center;
height: 1.1em;
line-height: 1em;
padding-top: .1em;
}
/* インデント箇条書きを非表示 */
.line .dot {
display: none !important;
}
/* ハッシュタグ */
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
background: transparent;
font-weight: 700;
font-size: 0.8em;
border-radius: 3px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
/* カスタムシンタックス */
.deco-\| {
color: rgba(255,255,255,0.6);
font-size: 0.9em;
--page-link-color: currentColor;
}
![https://i.gyazo.com/bdbf778c27f0ddb3364c4dd2513a2419.png")](https://i.gyazo.com/bdbf778c27f0ddb3364c4dd2513a2419.png")){kind=link}