settings
https://gyazo.com/11ae5813e8d96de2798777c2b0cf4a5c
https://gyazo.com/1ec1e99e7a76904873d71f54621c1113
code:style.css
@import "/api/code/work4ai/外部リンクをファビコンに置き換える記法/style.css";
@import "/api/code/work4ai/infoboxカスタムUserCSS/style.css";
@import "../ダークモードcss/style.css";
@import "/api/code/villagepump/中央揃え記法/style.css"; /* text */
@import "/api/code/villagepump/セパレーター記法/style.css"; /* '_ */ @import "/api/code/villagepump/アイコン記法を画像記法っぽくするUserCSS/style.css"; /* .icon */ code:style.css
@font-face {
font-family: 'l-safe';
src:local("Bahnschrift"), local("DIN"), local("ＭＳ Ｐゴシック"), local("MS PGothic");
unicode-range: U+006C;
}
html, body, #editor, .grid li{font-family:'l-safe','calibri','Zen Kaku Gothic New',"YuGothic",'Yu Gothic',"Font Awesome 5 Free","Font Awesome 5 Brands","Roboto","メイリオ", "Meiryo", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"; text-autospace:normal;}
.code-block span { font-family: Menlo,Monaco,Consolas,"Courier New",monospace;}
code:style.css
/* 既存の変数置き換え */
/* --- ヘッダー --- */
--navbar-title-color: #afb3f7; /* プロジェクト名 */ --new-button-bg: transparent; /* 新規作成ボタン ↓ */
--new-button-hover-bg: transparent;
--new-button-active-bg: transparent;
--new-button-vertical-color: #afb3f7; /* ↑ */ --search-form-icon-color: #afb3f7; /* 🔍 */ --search-form-text-color: #555; /* 検索の文字 */ --navbar-icon-hovered-color: #000; /* ^:hover */ --telomere-updated: #afb3f7; /* テロメア編集 */ --telomere-unread: #D3D5FB; /* テロメア未読 */ /* --- 関連ページ ラベルデザイン --- */
--relation-label-text:#304ea2;
}
code:style.css
/*スリムなテロメア*/
/* ↓新着以外のテロメアの色と太さ */
.line .telomere .telomere-border {
border-width: 0 0 0 2px !important;
}
/* ↓新着のテロメアの色と太さ */
.line .telomere .telomere-border.unread {
border-width: 0 0 0 5px !important;
}
/*のびのびドロップダウン*/
.navbar-form .dropdown.open .dropdown-menu {
min-width: 100%;
max-height: calc(100vh - 130px) !important;
overflow-y: auto;
}
/* 不要なバッジ */
.status-bar .plan-badge { display: none; }
.status-bar .private-badge { display: none; }
/* タイトル */
.line.line-title .text{
text-align: center;
font-weight: bold;
letter-spacing: 0.06em;
text-indent: 0.06em;
}
--new-button-horizontal-color: #000; --new-button-vertical-color: #000; }
.navbar .navbar-menu>li>a:hover,.navbar .navbar-menu>li>a:active,.navbar .navbar-menu>li>a:focus{color: #000;} .dropdown-menu>li>a.selected, data-hover-visible .dropdown-menu>li>a.selected{ /* ソートメニュー */ .page { box-shadow:none; }
code:style.css
.navbar {
box-shadow: none;
}
@media screen {
.quick-launch .project-home {
position: fixed;
top: -3px;
left: 45px;
z-index: 1000;
}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
.quick-launch .project-home {
left: 60px;
}
}
@media screen and (min-width: 992px) and (max-width: 1260px) {
.quick-launch .project-home {
left: 75px;
}
}
@media screen and (min-width: 1261px) {
.quick-launch .project-home {
/* left: calc((100% - 1280px)/2 + 70px); */
}
}
.quick-launch .project-home {
font-weight: 400;
letter-spacing: 0.2em;
}
code:style.css
body{
/*カードの下部影*/
--card-box-shadow:none;
--card-box-hover-shadow:none;
}
.page-list .grid li{
margin: 0 0 1.4em 0;
box-shadow: none;
}
.related-page-list {
padding: 0 3px;
}
.grid li.page-list-item a{
border-radius: 5px ;
transition: all 100ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;
}
.grid li.page-list-item a:hover{
border-radius: 5px;
}
.grid li.page-list-item a{outline: 3px solid #efefef;} .grid li.page-list-item a:hover{outline: 3px solid #afb3f7;} .grid li.page-list-item a .icon {
position: relative;
padding: 0;
margin: auto;
}
.grid li.page-list-item a .icon img{
width: auto;
max-height: 90px;
max-width: 90%;
border-radius: 5px;
}
.grid li.page-list-item a .header{
padding: 13px 10px 8px;
border-top: none;
}
.grid li.page-list-item a .title{
font-size: 0.9em;
text-align: center;
}
.grid li.page-list-item a .hover{background: transparent;}
opacity: 0;
}
.related-page-list .grid li{margin: 0 14.4px 15.4px 0;}
.grid li.relation-label a {border-radius: 5px;}
.quick-launch .right-box{justify-content: center;}
.dropdown-toggle{letter-spacing:0.1em;/*text-indent:0.1em;*/ }
.quick-launch .open>.dropdown-menu{
left: 50%;
transform: translateX(-50%);
}
code:style.css
/* その他 */
::-webkit-scrollbar {
width: 0.5rem;
background: transparent;
}
::-webkit-scrollbar-track {
border-radius: 6px; /* 角の丸み */
}
::-webkit-scrollbar-thumb {
border-radius: 8px; /* 角の丸み */
}
::-webkit-scrollbar-thumb:hover {
}
/* indent */
:root {
}
.line .indent-mark .dot::before {
display: block;
position: absolute;
right: -4px;
top: -10px;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 6px;
content: '\f068';
color: var(--li-color-0);
}
.line .indent-mark .dot {
background-color: transparent;
}
.line .indent-mark .c-0 + .dot::before {
color: var(--li-color-1);
}
.line .indent-mark .c-1 + .dot::before {
color: var(--li-color-2);
}
.line .indent-mark .c-2 + .dot::before {
color: var(--li-color-3);
}
.line .indent-mark .c-3 + .dot::before {
color: var(--li-color-4);
}
.line .indent-mark .c-4 + .dot::before {
color: var(--li-color-5);
}
.line.formula-line .dot { display: block }
code:style.css
/* スマホ */
@media(max-width: 767px) {
.col-page { padding: 0 }
::-webkit-scrollbar { height: 0 }
.flex-box .history-back-button { position: fixed; margin-top:20px; left: 40px }
.quick-launch { margin-top: 0; margin-bottom: 15px; }
.search-form { margin-top: 15px; }
}
.expandable-menu{
z-index: 2;
max-width: calc(100% - 85px);
}
.expandable-menu .page-menu .tool-btn i::before{color: #afb3f7; } .expandable-menu .toggle-button{
opacity: 1;}
.page-menu.xs{margin-bottom: -0.5em;}
@media (max-width: 767px){
.app:has(.expandable-menu .toggle-button.open) .quick-launch .btn.project-home{
width: 41px;
color: transparent;
border-radius: 50%;
}
.app:has(.expandable-menu .toggle-button.open) .quick-launch .btn.project-home::after{
content: "";
position: absolute;
left: 0;
background-size: 100%;
background-position: center;
height: 100%;
width: 100%;
transition: cubic-bezier(0.4, 0, 0.2, 1) 0.7s;
}
.app:has(.expandable-menu .toggle-button.open) .quick-launch .btn.project-home:hover::after{
background-size: 110%;
transition: cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
}
}
code:style.css
/* インライン引用 */
.line:not(.cursor-line) .deco-\" {
padding: 0 0.4em;
font-size: 95%;
font-style: italic;
background-color: rgb(128 128 128 / 10%);
border-radius: 0.2em;
&::before {
position: relative;
top: -0.5em;
left: -0.2em;
font-family: "Font Awesome 5 Free";
font-size: 85%;
font-weight: 900;
content: "\f10d";
}
}
/* 正規表現で展開されたリンク */
.line:not(.cursor-line) .deco-\, {
font-size: 0;
&::before {
font-size: 13px;
content: " ";
}
}
/* youtube */
.iframe-video-player:not(.floating) {
iframe {
width: 99%;
max-width: 500px;
height: auto;
max-height: 360px;
aspect-ratio: 16 / 9;
}
&:hover .control {
right: unset;
left: min(99% - 24px, 476px); /* calc(min(99%, 640px) - 24px) */
}
}
strong .iframe-video-player:not(.floating) {
iframe {
max-width: 99%;
max-height: none;
}
&:hover .control {
left: calc(99% - 24px);
}
}
;){kind=link}