Settings
https://scrapbox.io/files/63021155566365001f8f9a77.png
setting of a computer
#設定 #コンピュータ
code:style.css
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400;700;900&display=swap');
html, body, #editor, .grid li{
font-family: "YuGothic",'Yu Gothic',"游ゴシック体","游ゴシック","Roboto", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";}
頁タイトル中央揃え
code:style.css
.line.line-title .text{
text-align: center ;
font-weight: bold ;
}
.cursor { width: 3px; background-color: rgba(255,255,255,.6) }
textarea.text-input.convert-mode{background-color:transparent;}
画像を中央揃えして影
code:style.css
.line img.image {
display : block;
margin : 0 auto 0.7em;
border-radius: 0.5em;
filter: drop-shadow(0px 8px 24px rgba(149,157,165,0.22));
position: relative;
top: 1em;
}
.navbar{
box-shadow:none;
}
.navbar-default{
background-color: var(--navbar-bg, rgba(53, 59, 72, 0));
}
画像を並べる[| [画像URL][画像URL][画像URL]…]
code:style.css
/* マトリクス記法 */
.line:not(.cursor-line) .deco-\| {
display: flex;
justify-content: center;
align-items: center ;
filter: drop-shadow(0px 8px 24px rgba(149,157,165,0.22));
margin : -1em 0 -2.7em;
}
.line .deco-\| img.image {
object-fit: contain;
margin: 0;
filter: drop-shadow(0px 0px 0px ) !important;
top: 0;
}
/* 太字記法と組み合わせて列数を変える */
.line class^="level" .deco-\| { flex-wrap: wrap }
.line .level-1 .deco-\| > span { width: calc(100%/1) }
.line .level-2 .deco-\| > span { width: calc(100%/2) }
.line .level-3 .deco-\| > span { width: calc(100%/3) }
.line .level-4 .deco-\| > span { width: calc(100%/4) }
.line .level-5 .deco-\| > span { width: calc(100%/5) }
.line class^="level" .deco-\| img.image { object-fit: cover; width: 100%; height: 100% }
/* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */
.line .deco-\| > span, .line class^="level" .deco-\| > span { overflow: hidden }
.line .deco-\| img.image, .line class^="level" .deco-\| img.image { margin: .2em }
ホーム画面デザイン
code:style.css
.grid li.page-list-item a{
box-shadow:none;
border-radius:10px;
}
data-hover-visible .grid li.page-list-item a:hover{
box-shadow:none;
}
.grid li.page-list-item a .hover{
background-color: var(--card-hover-bg, rgba(0, 0, 0, 0.5));
transition: all 0.4s 0s cubic-bezier(.165,.84,.44,1);
}
.grid li.page-list-item a .title{
text-align:center;
color:#f0f0f0;
font-family: "YuGothic",'Yu Gothic',"游ゴシック体","游ゴシック";
}
.grid li.page-list-item a .header{
position:absolute;
opacity:0;
border-top:none;
top:50%;
left:50%;
transform: translate(-50%, -50%);
z-index:2;
transition: all 0.4s 0s cubic-bezier(.165,.84,.44,1);
}
.grid li.page-list-item a .icon{
padding:0;
}
.grid li.page-list-item a .content{
height:inherit;
}
.grid li.page-list-item :hover .header{
opacity:1;
}
.grid li.page-list-item a .icon {
position: relative;
padding: 0;
margin: auto;
}
.grid li.page-list-item a .icon img {
display: table-cell;
width: auto;
max-height: 150px;
max-width: 90%;
vertical-align: middle;
border-radius: 5px;
}
グリッドで並べる
code:style.css
.page-list ul.grid{
margin:0;
display:grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 3rem;
}
.page-list .grid li {
width: 100%;
height: 100%;
aspect-ratio: 1/1;
margin: 0;
box-shadow: 0 0 0 6px #17191e, 0 0 0 8px #f73a1c;
border-radius: 10px;
}
.grid li.page-list-item a {
box-shadow: 0 0 0 8px #17191e, 0 0 0 10px #1e2028;
transition: all 0.4s 0s cubic-bezier(.165,.84,.44,1);
}
ホーム画面色系
code:style.css
body{
background-color: #17191e;
}
.grid li.page-list-item a .hover{background-color: var(--card-hover-bg, rgba(30, 32, 40, 0.7));}
.grid li.page-list-item a{background-color: #1e2028;}
.grid li.page-list-item a .pin{
background: linear-gradient(45deg, #aaa0, #aaa0 50%, #f73a1c 50%, #f73a1c);
}
.new-button{transition: all 0.4s 0s cubic-bezier(.165,.84,.44,1)}
.new-button{background-color: #3a3b40;}
data-hover-visible .new-button:hover {
background-color: #f73a1c;
}
.search-form .form-group .button-container button .kamon{
fill:#f73a1c;
}
.quick-launch .project-home, .page-sort-menu .tool-btn{
background: linear-gradient(90deg, #f73a1c, #f82732, #f61144, #f20055, #eb0064, #e20073, #d70680, #c91b8c);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: roboto,Noto Sans JP;
opacity:0.5;
transition: all 0.4s 0s cubic-bezier(.165,.84,.44,1);
}
data-hover-visible .quick-launch .project-home:hover{
background: linear-gradient(90deg, #f73a1c, #f82732, #f61144, #f20055, #eb0064, #e20073, #d70680, #c91b8c);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: roboto,Noto Sans JP;
opacity:1;
}
data-hover-visible .page-sort-menu .tool-btn:hover{
background: linear-gradient(90deg, #f73a1c, #f82732, #f61144, #f20055, #eb0064, #e20073, #d70680, #c91b8c);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: roboto,Noto Sans JP;
opacity:1;
}
行頭のドットを薄く
code:style.css
.line .indent-mark .dot {
top: 11px;
width: 6px;
height: 3px;
background-color: #c9c9c9;
}
ページ
ページデザイン色系
code:style.css
.page{background-color: #1e2028;}
.editor{color: #c9d4d0;}
.line.line-title{color: #c9d4d0;}
リンク
code:style.css
.grid li.relation-label.empty-links a{background-color: #761b0d;}
.grid li.relation-label.empty-links .arrow{border-left-color: #761b0d;}
.grid li.relation-label a{border-radius: 4px;}
ノート影消す
code:style.css
.page{box-shadow:none;}
ハッシュタグデザイン
code:style.css
.line a.empty-page-link {
color:#eb3b1f !important;
font-weight:bold;
}
.line a.page-link,.line a.link{
color: #7799e5;
font-weight: bold;
}
atype="hashTag"{
font-weight:bold;
background-color: #343737;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 1px 15px 0;
border-radius: 20px;
margin-right: 5px;
height: 25px;
transition: all 0.4s 0s cubic-bezier(.165,.84,.44,1);
}
atype="hashTag":hover{
box-shadow: 0 0 0 2px #f73a1c inset;
}
quote
code:style.css
.line .quote{background-color: #343737;}
コード色
code:style.css
.line span.code-block{
background-color: #17191e;
}
.line span.code-block .code-block-start{background-color: #7799e5;}
.line code{color: #7d81ca;}