Settings
style.css/* @import "../破線で下線なリンクデザイン/style.css"; */
@import "../箇条書きのバレットをFontAwesomeにするUserCSS/style.css";
@import "../箇条書きの深さをリセットするUserCSS/style.css";
@import "../../work4ai/外部リンクをファビコンに置き換える記法/style.css";
@import "../画像を並べるUserCSS/style.css";フォント
style.csscode:style.css
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@1,500;1,600;1,700;1,800&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&family=Noto+Sans:wght@100;200;300;400;500;600;700;800&display=swap');
@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";}色
style.css:root {
--new-button-bg: #fbbb1a; /* +ボタン背景 */
--new-button-hover-bg: #ffca45; /* +ボタン背景ホバー */
--new-button-active-bg: #ffca45; /* +ボタン背景クリック */
}ベースデザイン
style.cssbody {
margin: initial;
#app-container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
.app {
position: relative;
background-color: #ffffffd9;
height: 85vh;
overflow-x: hidden;
overflow-y: scroll;
inset: 0;
top: -2%;
margin: auto 5rem;
outline: 3px solid #d3d3d3;
border-radius: 10px;
padding-top: 1em;
padding-left: 4em;
padding-right: 3.5em;
.navbar {
position: fixed;
top: initial;
bottom: 3rem;
width: auto;
left: 50%;
transform: translateX(-50%);
border-bottom: none;
border-radius: 50px;
.row {
flex-wrap: nowrap;
&:has(.col-search){
display: flex;
}
.left {
.dropdown {
ul.global-menu {
top: initial;
bottom: 52px;
}
}
.project-home {
.title {
display: none;
}
&:after {
content: "Go to Home";
}
}
}
.col-search {
.navbar-form {
.dropdown {
input {
width: clamp(100px, 17vw, 400px);
outline: 2px solid #dcdde0;
outline-offset: -2px;
}
ul.dropdown-menu {
top: initial;
bottom: 52px;
min-height: 400px;
}
}
}
}
.col-menu {
.navbar-menu {
.dropdown-menu-right {
top: initial;
bottom: 52px;
}
}
}
}
}
.navbar-default {
background-color: #fff;
}
&:has(.quick-launch) {
padding-top: 6em;
.navbar .row .left .project-home {
.title {
display: inherit;
}
&:after {
content: "";
}
}
}
.container {
.quick-launch {
position: fixed;
top: 2%;
right: 50%;
transform: translateX(50%);
z-index: 9999;
.dropdown-menu-right {
left: 50%;
transform: translateX(-50%);
}
}
.page-list, .related-page-list {
.grid {
gap: clamp(25px, 1.7svw, 40px);
li {
a {
background-color: transparent;
box-shadow: none;
.content {
flex-direction: column-reverse;
.header {
border-top: none;
text-align: center;
padding: 10px 10px;
height: 30%;
.title {
-webkit-line-clamp: 2;
}
}
.description {
position: relative;
font-size: 11px;
height: 70%;
display: flex;
flex-direction: column;
padding: 16px 45px 0px 45px;
transition: all 100ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;
&:before {
content: "";
position: absolute;
mask-image: url(https://scrapbox.io/files/677d19c3bebc0004c4bb14dd.svg);
mask-repeat: no-repeat;
mask-position: center;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: #e7e7e7;
transition: all 100ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;
}
&:after {
content: "";
position: absolute;
mask-image: url(https://scrapbox.io/files/677d19c4c2512c201cd16338.svg);
mask-repeat: no-repeat;
mask-position: center;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: #cbcbcb;
transition: all 100ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;
}
}
.icon {
position: relative;
height: 70%;
img {
position: absolute;
width: 65%;
height: auto;
top: 25px;
left: 50%;
transform: translateX(-50%);
filter: brightness(0.85);
transition: all 100ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;
}
&:before {
content: "";
position: absolute;
mask-image: url(https://scrapbox.io/files/677d33e18fa2c8dd41614c39.svg);
mask-repeat: no-repeat;
mask-position: center;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: #fbbb1a;
}
&:after {
content: "";
position: absolute;
mask-image: url(https://scrapbox.io/files/677d33e67170c999f23952c7.svg);
mask-repeat: no-repeat;
mask-position: center;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: #fddb83;
transform: rotateX(45deg);
transform-origin: bottom;
transition: all 100ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;
}
}
}
&:hover {
.content {
.description {
transform: rotateX(-23deg) rotateY(20deg) rotateZ(14deg);
&:before {
background-color: #efecec;
}
&:after {
background-color: #d7d4d4;
}
}
.icon {
&:after {
transform: rotateX(60deg);
background-color: #e7c775;
}
img {
top: 0;
filter: brightness(1);
}
}
}
}
}
}
}
}
}
}
}
}ホバー打ち消し
style.css[data-hover-visible] .grid li.page-list-item a:hover .hover {
opacity: 0;
}
ピンデザイン
style.css.page-list {
.grid {
li.pin {
a {
.pin {
display: none;
}
}
&:first-of-type {
&:before {
content: "> Pinned";
position: absolute;
font-size: 1.1em;
font-weight: 400;
top: -2.7em;
letter-spacing: 4px;
color: #8b8b8b;
}
}
&:nth-of-type(3) {
margin-bottom: 4em;
}
}
li.pin + li:not(.pin) {
grid-column-start: 1; /* ピンされたページを独立した段に */
&:before {
content: "> Pages";
position: absolute;
font-size: 1.1em;
font-weight: 400;
top: -2.7em;
letter-spacing: 4px;
color: #8b8b8b;
}
}
}
}関連ページデザイン修正
style.css.page-wrapper {
.related-page-list {
.toolbar {
margin-bottom: 40px;
.related-page-list-search {
border: solid 3px #e4e5e6;
}
}
.links-container {
ul.grid {
position: relative;
margin-top: 3em;
.relation-label {
position: absolute;
top: -50px;
a {
flex-direction: row-reverse;
padding: 0;
height: auto;
.title {
font-size: 17px;
}
.kamon {
font-size: 20px;
margin: 0;
}
}
}
}
}
}
}style.css/* 関連ページ ラベルデザイン */
:root{
--relation-label-bg: #fefefe;
--relation-label-empty-bg: #fefefe;
--relation-label-links-bg: #fefefe;
--relation-label-text:#304ea2;
--relation-label-empty-text: #b10e0e;
--relation-label-links-text: #304ea2;
} ページ
デザイン
style.css.page{box-shadow:none;}
.line.line-title .text{
text-align: center;
font-weight: 500;
letter-spacing: 0.06em;
text-indent: 0.06em;
}動画
style.css.video-player video{
max-height: 360px;
}画像 中央揃え/角丸/シャドウ
style.css.line img.image {
display : block;
position: relative;
margin : 0 auto 0.7em;
border-radius: 0.5em;
filter: drop-shadow(0px 8px 24px rgba(149,157,165,0.22));
top: 1em;
} ポップアップ
style.css/* ポップアップメニューのボタン周りの線を消す */
.selections .popup-menu .button-container .button:not(:first-of-type) { border: 0 }