settings
before 2024/4/25 → settings (copy)
code:style.css
@import "../work4ai ダークモード/style.css";
@import "../箇条書きのバレットをFontAwesomeにするUserCSS/style.css";
@import "../のびのびドロップダウンUserCSS/style.css";
@import "../電光掲示板UserCSS/style.css";
@import "../💬雑談/style.css";
@import "../外部リンクをファビコンに置き換える記法/style.css";
@import "../インライン引用記法/style.css";
@import "../アップロードしたファイルリンクのデザインをボタンにするUserCSS/style.css";
@import "../work4aiイベント仕様UserCSS/xmas.css";
@import "../infoboxカスタムUserCSS/style.css";
@import "../Archive_UserCSS/style.css";
→ #UserCSS
フォント
code: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";}
https://www.compart.com/en/unicode/category/Llunicode検索
色
code:style.css
htmldata-project-theme=default{
--body-bg: #f5f5f5; /* 全体背景 */
/* --- ホーム --- */
--card-bg: rgb(255 255 255 / 80%);
/* --- ヘッダー --- */
--navbar-bg: #f7f7f7; /* ヘッダー背景 */
--navbar-title-color: #f55600; /* プロジェクト名 */
--new-button-bg: transparent; /* 新規作成ボタン ↓ */
--new-button-hover-bg: transparent;
--new-button-active-bg: transparent;
--new-button-horizontal-color: #f55600;
--new-button-vertical-color: #f55600; /* ↑ */
--search-form-bg: #efefef; /* 検索画面 */
--search-form-icon-color: #f55600; /* 🔍 */
--search-form-text-color: #555; /* 検索の文字 */
--navbar-icon-color: #f55600; /* ^ */
--navbar-icon-hovered-color: #000; /* ^:hover */
--navbar-icon-active-color: #f55600;
--telomere-updated: #ffb186; /* テロメア編集 */
--telomere-unread: #ffcbae; /* テロメア未読 */
/* --- 関連ページ ラベルデザイン --- */
--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;
}
.navbar .navbar-menu>li>a{ color: #f55600;}
data-hover-visible .new-button:hover{ /* 新規作成ボタン:hover */
--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{ /* ソートメニュー */
color: #f55600;}
/*--- グローバルメニュー ---*/
.global-menu li a.updated, .global-menu li a.highlight{
border-left: 2px solid #f55600;
}
.global-menu .project-list-filter a:focus-within, .drawer .drawer-menu ul .project-list-filter a:focus-within{
box-shadow: 0 0px 0px 3px #b37e7e;
}
スクロール
code:style.css
::-webkit-scrollbar{
width: 7px;
}
::-webkit-scrollbar-thumb{
background-color: #848484;
border-radius: 4px;
}
::-webkit-scrollbar-track{
background-color: transparent;
}
お知らせ
code:---.css
.navbar .row .project-home.length-is-short:after{
content: "工事中！ご迷惑をおかけします";
padding-left: 1em;
color: #f55600;
}
ホーム
code:style.css
.page-list, .related-page-list {
.grid {
li {
aspect-ratio: 1/1;
&.pin + li:not(.pin) {
grid-column-start: 1;
}
a {
box-shadow: none;
border-radius: 5px;
transition: all 100ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;
overflow: visible;
.content {
height: 100%;
.header {
border-top: none;
.title {
text-align: center;
}
}
.icon {
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
img {
width: auto;
max-width: 100%;
max-height: 100%;
border-radius: 5px;
}
}
}
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height:100%;
opacity: 0;
z-index: -1;
background: radial-gradient(49.19% 88.28% at 72.99% 113.54%, rgba(93, 227, 236, 0.73) 0%, rgba(93, 227, 236, 0.1679) 59.78%, rgba(93, 227, 236, 0) 100%), linear-gradient(54.57deg, #862AB1 8.59%, rgba(185, 91, 230, 0) 80.49%), radial-gradient(118.75% 118.75% at 96.65% 74.22%, #308EE6 0%, rgba(48, 158, 230, 0) 73.91%), radial-gradient(114.51% 155.86% at 9.82% 10.94%, rgba(255, 85, 85, 0.7) 0%, rgba(255, 85, 85, 0.147) 61.98%, rgba(255, 85, 85, 0) 100%, #F2F5FA); background-blend-mode: hard-light,darken,normal,normal,normal,normal; filter: blur(50px);
transition: all 700ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;
}
&:hover {
box-shadow: none !important;
&::before {
opacity: 1;
}
.hover {
opacity: 0 !important;
}
}
}
}
}
}
ピンカードデザイン
code:style.css
.page-list {
.grid {
li.pin {
a {
width: 100%;
background-color: rgb(229 227 226 / 80%);
transition: all 100ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;
outline: none;
.pin {
display: none;
}
.content {
height: 100%;
flex-direction: row-reverse;
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
transition: cubic-bezier(0.4, 0, 0.2, 1) 0.7s;
.header.pinned {
position: absolute;
bottom: 25px;
right: 0;
padding:0;
width: auto;
display: block;
background-color: #fff;
z-index: 2;
.title {
color: transparent;
-webkit-background-clip: text;
background-image: linear-gradient(to right,#000 50%,#8c8b8b 50%);
background-size: 200% 100%;
background-position-x: 100%;
padding: 0 5px 0 7px;
width:auto;
transition: cubic-bezier(0.4, 0, 0.2, 1) 0.7s;
}
}
.icon {
display: none;
}
.description {
display: none;
}
}
&:hover {
outline: none;
.content {
background-size: 110%;
transition: cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
.header.pinned {
.title {
background-position-x: 0;
transition: cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
}
}
}
}
} /* a */
&:first-of-type {
grid-column-start: span 2;
grid-row-start: span 2;
a {
.content {
background-image: url("https://scrapbox.io/files/65e12050d313690025233b5c.svg");
background-size: 110%;
background-repeat: no-repeat;
transition: cubic-bezier(0.4, 0, 0.2, 1) 0.7s;
&::after { /* 画像を先に読み込んでおくことで表示ズレを防ぐ */
content: "";
background-image: url(https://scrapbox.io/files/65e0c3fc1ba5bf0025d702d4.svg);
opacity: 0;
visibility: hidden;
}
.header.pinned{
background-color: transparent;
bottom: 35px;
.title {
font-family: 'jost';
font-style: italic;
font-weight: 500;
font-size: 2em;
padding: 0 8px 0 0;
letter-spacing: 6px;
display: inline;
background-image: linear-gradient(to right,#f55600 50%,#000 50%);
}
}
}
&:hover {
.content {
background-image: url(https://scrapbox.io/files/65e0c3fc1ba5bf0025d702d4.svg);
background-size: 130%;
transition: cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}
}
}
}
&:nth-of-type(8) { /* last-of-typeにしたいけど効かない */
margin-bottom: 3em;
}
&data-page-title="参加する" a .content {
background-image: url(https://i.gyazo.com/a2282949cf48b49d3d6e37ff62c9bc73.png);
}
&data-page-title="🦊雑に学ぶComfyUI" a .content {
background-image: url(https://i.gyazo.com/3d79cd06f257f348df24aebf72701fce.png);
}
&data-page-title="💬雑談" a .content {
background-image: url(https://i.gyazo.com/e82b58214b30952e0b4af6b24d5b24e5.png);
}
&data-page-title="マシュマロ" a .content {
background-image: url(https://i.gyazo.com/da1ae244b93518c1184c53fa80543a14.png);
}
&data-page-title="AI タイムライン" a .content {
background-image: url(https://i.gyazo.com/7a9f6e9de3186e7220bab1774f728f71.png);
}
&data-page-title="表記ルール" a .content {
background-image: url(https://i.gyazo.com/cb87c5309dc7413039af0a2066ff7aae.png);
}
}
}
}
関連ページ
code:style.css
.related-page-list {
overflow: visible;
.grid {
li {
.arrow {
display: none;
}
}
}
}
未読 Date modifierd by icon アウトラインに色
code:style.css
.grid li.page-list-item.unread a{
outline: 3px solid #6ac983;
}
.grid li.page-list-item.unread a:hover{
outline: 3px solid #f4af7f;
}
ページ
デザイン
code:style.css
.page{box-shadow:none;}
.line.line-title .text{
text-align: center;
font-weight: bold;
letter-spacing: 0.06em;
text-indent: 0.06em;
}
画像、動画、youtube
code:style.css
.line img.image,.video-player video,.iframe-video-player iframe{
border-radius: 8px;
border: 2px solid #efefef;
}
動画
code:style.css
.video-player video{
max-height: 360px;
}
アイコンデザイン
code:style.css
.line img.icon {
border-radius: 2px;
margin-left: 2px;
transform: translateY(2px);
}
左上のロゴ変更 from : /InterestingProjects/settings
code:style.css
.brand-icon {
--logo-url: url('https://i.gyazo.com/36489e067c962e9d836167a3a4d8794f.png');
width: 30px;
height: 30px;
background-image:var(--logo-url);
background-color: #374151;
background-size:cover;
background-repeat:no-repeat;
border-radius: 50%;
svg {display: none;}
}
スマホでの編集時にでてくるボタン
code:style.css
.expandable-menu{
background-color: #f7f7f7;
z-index: 2;
max-width: calc(100% - 85px);
}
.expandable-menu .page-menu .tool-btn i::before{color: #f55600; }
.expandable-menu .toggle-button{
color: #f55600;
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-image: url(https://i.gyazo.com/03f922af4c0eb1659d4630db6b619aac.png);
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;
}
}
https://gyazo.com/955676b056532a6439edf615390f3ea5
🤔nomadoor.icon
max-widthを短く変更
関連ページ
デザイン
code:style.css
/*.related-page-list .grid li{margin: 0 14.4px 15.4px 0;}*/
.grid li.relation-label a {border-radius: 5px;}
https://scrapbox.io/files/65e12050d313690025233b5c.svg