/public-minaph/Scrapbox Glassmorphism Custum Theme UserCSS

generated at 11/18/2024, 4:28:59 AM
Scrapbox Glassmorphism Custum Theme UserCSS
from settings
#UserCSS

スクラップボックスのグラスモーフィズムテーマをUserCSSで作りましたので公開します。

使い方
このページのstyle.cssをインポートしてください。また、settingsにコンフィグファイルを作成してください。
以下のCSSがコンフィグです。settingsにコピペし、微調整してお使いください。
余談：グラスモーフィズムにおいてWebページ背景の設定は超重要

copy_me_into_your_settings_and_change_its_filename_as_style.css:root {
	/* glassmorphism config vars */
	/* h and s of hsla color model */
  	--theme-main-hs: 300 80%;
  	
  	--body-bg-layer-1: radial-gradient(ellipse at 60% 30%, transparent, var(--black-very-weak) 60%, var(--black-medium));
 	--body-bg-layer-2: radial-gradient(ellipse at 40% 70%, transparent, var(--white-very-weak) 60%, var(--white-medium), var(--white-very-strong));
  	--body-bg-layer-3: linear-gradient(255deg, #E2125F, #1d0cd4);
	
	--backdrop-blur-weak: blur(1px);
	--backdrop-blur-medium: blur(3px);
	--backdrop-blur-strong: blur(5px);

	--white-very-weak: rgba(255, 255, 255, var(--alpha-very-weak));
	--white-weak: rgba(255, 255, 255, var(--alpha-weak));
	--white-medium: rgba(255, 255, 255, var(--alpha-medium));
	--white-strong: rgba(255, 255, 255, var(--alpha-strong));
	--white-very-strong: rgba(255, 255, 255, var(--alpha-very-strong));

	--border-radius-short: 3px;
	--border-radius-middle: 7px;
	--border-radius-long: 12px;

	--shadow-close: 1px 1px 5px rgb(0 0 0 / var(--alpha-weak));
	--shadow-middle: 2px 4px 5px rgb(0 0 0 / var(--alpha-weak));
	--shadow-far: 4px 8px 10px rgb(0 0 0 / var(--alpha-medium));

	--light-gradient: linear-gradient(125deg, var(--white-medium), var(--white-very-weak));
	
	--light-dull: 20%;
	--light-medium: 35%;
	--light-bright: 60%;
	
	--alpha-very-weak: .1;
	--alpha-weak: .2;
	--alpha-medium: .4;
	--alpha-strong: .6;
	--alpha-very-strong: .7;
}


>以下ソースコード
長くなったのでTOC
CSS Vars
global settings
text, modal, dropdown
buttons
page-list
telomere

CSS Vars
 style.css
:root {
	/* official css vars */
	
	--body-bg: hsl(var(--theme-main-hs) var(--light-medium));
	--page-bg: var(--white-very-strong);
	
	--page-text-color: #33261dc0;
	--page-link-color: #1098f7a0;
	--line-title-color: var(--white-very-strong);
	
	--tool-bg: var(--white-medium);
	--tool-color: var(--white-very-strong);
	--tool-text-color: var(--white-very-strong);
	--tool-light-color: var(--white-medium);
	
	--navbar-bg: hsl(var(--theme-main-hs) var(--light-medium) / var(--alpha-medium));
	--navbar-icon-color: var(--white-very-strong);
	--navbar-icon-hovered-color: white;
	--navbar-icon-active-color: var(--white-very-strong);
	--search-form-bg: var(--white-strong);
	
	--new-button-bg: transparent;
	--new-button-active-bg: transparent;
	--new-button-hover-bg: transparent;
	--new-button-horizontal-color: var(--white-very-strong);
	--new-button-vertical-color: var(--white-very-strong);
	
	--card-title-color: var(--line-title-color);
	--card-title-bg: none;
  	--card-title-bg-pinned: none;
	--card-bg: var(--white-medium);
	--card-active-bg: var(--card-bg);
	--card-backside: linear-gradient(45deg, transparent, transparent 50%, var(--card-backside, #ddd) 50%, var(--card-backside, #ddd));
	--card-description-color: var(--page-text-color);
	--card-hover-bg: var(--card-bg);
	--card-box-shadow: 2px 4px 5px rgb(0 0 0 / 16%), inset 0 0 5px var(--white-weak);
	--card-box-hover-shadow: 2px 4px 5px rgb(0 0 0 / 32%), inset 0 0 5px var(--white-weak);
	--card-box-shadow-color: var(--body-bg);
	--card-description-code-color: var(--page-text-color);
	--card-description-link-color: var(--page-text-color);
	
	
	--code-bg: var(--white-strong);
	/* --code-color: #000000; */
	
	--telomere-border: var(--white-very-strong);
	--telomere-unread: hsl(var(--theme-main-hs) var(--light-dull) / var(--alpha-strong));
	
	--quote-bg-color: var(--white-strong);
   	
   	--relation-label-bg: transparent;
   	--relation-label-empty-bg: transparent;
   	--relation-label-links-bg: transparent;
   	--relation-label-empty-text: var(--white-medium);
   	--relation-label-links-text: var(--white-medium);
   	--relation-label-text: var(--white-medium);
   	
   	--tool-badge-bg: var(--white-weak);
}

global settings
 style.cssbody {
    background: var(--body-bg-layer-1, none), var(--body-bg-layer-2, none), var(--body-bg-layer-3, none);
    min-height: 100vh;
    box-shadow: inset 0 0 60px var(--white-medium);
}


/* navigation */
.navbar {
	border-bottom: solid 1px hsl(var(--theme-main-hs) var(--light-bright) / var(--alpha-medium));
	box-shadow: inset 0 0 5px var(--white-weak);
	backdrop-filter: var(--backdrop-blur-medium) !important;
    -webkit-backdrop-filter: var(--backdrop-blur-medium) !important;
}
.status-bar > div {
	border-top-left-radius: var(--border-radius-middle) !important;
	background: var(--light-gradient);
}
.search-form .form-group input {
	box-shadow: inset 0 0 5px var(--white-weak);
}
/* main page */
.page {
    border: solid 1px white;
    box-shadow: var(--shadow-far), inset 0 0 24px var(--white-medium);
    border-radius: var(--border-radius-long);
}
/* related page list */
.related-page-list {
 	padding: 5%;
 	margin: -5% 1% 0 5%;
 	/* 背景にも白が入るので、カードの透過色を強める */
 	--card-bg: var(--white-weak);
 	
 	backdrop-filter: var(--backdrop-blur-strong) !important;
    -webkit-backdrop-filter: var(--backdrop-blur-strong) !important;
    box-shadow: var(--shadow-far), inset 0 0 5px var(--white-medium);
    border-radius: var(--border-radius-long);
    
    background-color: var(--white-weak) !important;
    border: solid 1px var(--white-medium) !important;
}

text, modal, dropdown
style.css/* text */
.line.line-title{
	font-size: 3em;
	line-height: 1.5em;
	font-weight: bold;
	letter-spacing: 0.03em;
	text-shadow: var(--white-weak) 0 0 25px;
}
.line a:is(.page-link, .link) {
	font-weight: bold;
}
.deco-\* {
	font-weight: bold;
	color: var(--white-strong);
}
.line.line-title .text:not(.that) {
    padding: 40px 10px;
}


/* dropdown */
.dropdown-menu {
	border: solid 1px var(--white-medium);
	color: rgba(0, 0, 0, 0.6) !important;
	border-radius: var(--border-radius-long);
	background: var(--light-gradient), var(--white-medium);
	
	backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}
.dropdown-menu.global-menu {
	background: var(--light-gradient), var(--white-strong);
}
.divider {
  	background-color: var(--white-very-strong) !important;
 }
 
/* modal */
.modal-backdrop {
	display: none;
}
.modal-content {
	background-color: var(--white-medium) !important;
    color: var(--white-strong) !important;
    border: solid 1px var(--white-weak) !important;
    border-radius: var(--border-radius-long);
    box-shadow: var(--shadow-middle) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

buttons
style.css/* buttons */
/* normal buttons */
:not(.xs) > :not(.xs) > :is(.btn, .tool-btn)  {
	border-radius: var(--border-radius-middle) !important;
	margin: 5px;
	backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    
    background: linear-gradient(125deg, var(--white-medium), var(--white-very-weak));
    border: solid 1px var(--white-weak);
    box-shadow: inset 0 0 5px var(--white-weak);
}
:not(.xs) > :not(.xs) > :is(.btn, .tool-btn):hover {
	/*background-color: var(--white-medium) !important;*/
	background: linear-gradient(125deg, var(--white-medium), var(--white-very-weak));
	box-shadow: var(--shadow-middle) !important;
}
/* dropdown buttons */
:is([data-hover-visible] .dropdown-menu>li>a):hover,
.dropdown-menu>li>a:active,
[data-focus-visible] .dropdown-menu>li>a:focus {
    box-shadow: var(--shadow-middle) !important;
}

/* new button */
.new-button {
	/* background: transparent !important; */
	border: solid 2px var(--white-very-strong);
	box-sizing: content-box;
}
/*
:not(.hidden-xs) > .layout-page > .new-button {
	position: relative;
	left: calc(40% - 36px);
   	bottom: -15vh;
	
	width: calc(36px * 2);
	height: calc(36px * 2);
	line-height: calc(36px * 2);
	border-radius: calc(20px * 2);
	border: solid calc(2px * 2) var(--white-strong);
	z-index: 999;
}
:not(.hidden-xs) > .layout-page > .new-button * {
    border-radius: calc(2px * 2);
}
:not(.hidden-xs) > .layout-page > .new-button .horizontal-line {
	top: calc(16px * 2);
    left: calc(6px * 2);
	width: calc(24px * 2) !important;
    height: calc(4px * 2) !important;
}
:not(.hidden-xs) > .layout-page > .new-button .vertical-line {
	width: calc(4px * 2) !important;
    height: calc(24px * 2) !important;
    top: calc(6px * 2);
    left: calc(16px * 2);
}
*/


/* code-block */
.code-block {
    border-left: outset 4px rgba(255,255,255,1);
    border-right: inset 4px rgba(255,255,255,1);
}
.section-title .code-block{
	/*border-top: solid 1px rgba(255,255,255,0.5);*/
}

page-list
style.css/* page list */ 
.page-list-item.grid-style-item a  {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: solid 1px var(--white-medium);
    border-radius: var(--border-radius-middle) !important;
    background: var(--light-gradient), var(--card-bg) !important;
 }
.relation-label .arrow, .grid li.page-list-item a .hover {
	display: none !important;
}
.relation-label {
	width: auto !important;
	height: auto !important;
    display: inline !important;
    max-width: 60%;
}
.relation-label a {
	
	border: none !important;
	font-size: 70px !important;
}
.grid li.relation-label a .icon-lg {
	display: none !important;
}
.relation-label a .title {
	display: inline !important;
	max-height: none !important;
	font-weight: bold;
	text-shadow: var(--white-weak) 0 0 25px;
}
.page-sort-menu {
	margin-bottom: 4vh;
}


telomere
style.css/* telomere */
.telomere-border .description{
	background-color: var(--white-strong) !important;
    /*backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);*/
    border: solid 1px var(--white-strong);
    border-radius: var(--border-radius-short) !important;
    
    font-weight: bold;
    color: var(--page-text-color) !important;
    letter-spacing: 0.1em;
    
    box-shadow: 0px 0px 3px 0px var(--white-weak);
    line-height: 20px !important;
    height: 20px !important;
    margin: 2px 10px !important;
    font-size: 10px !important;
}