/work4ai/電光掲示板UserCSS

generated at 2/12/2025, 11:32:14 PM
電光掲示板UserCSS
style.css.quick-launch {
	&::before, &::after{
		content: var(--bulletin-board);
	}
}
💬雑談のほうで設定できるように変更

style.css.app{
	overflow-x: clip;
	position: relative;
} 
.quick-launch {
	margin-top: 2em;
	&::before, &::after {
 		position: absolute;
 		left: 0;
 		top: 30px;
    	font-size: 80px;
    	text-indent: 1em;
    	color: #ebe9e8;
    	font-weight: 700;
    	white-space: nowrap;
    	font-family: 'jost','Zen Kaku Gothic New';
    	z-index: -1;
    	letter-spacing: 0.3em;
    	text-indent: 0.3em;
    	@media screen and (min-width: 992px) { /* 多分間違ってる */
    		letter-spacing: 0.5em;
    		text-indent: 1em;
    	}
	}     	
}

電光掲示板みたいに動かす made by 
大分修正しました
style.css@media (min-width: 992px){
.quick-launch::before{animation: marquee 40s linear infinite;}
.quick-launch::after{animation: marquee2 40s linear infinite;}
}
@media (min-width: 768px) and (max-width: 991px){
.quick-launch::before{animation: marquee 30s linear infinite;}
.quick-launch::after{animation: marquee2 30s linear infinite;}
}
@media (max-width: 767px){
.quick-launch::before{animation: marquee 25s linear infinite;}
.quick-launch::after{animation: marquee2 25s linear infinite;}
}
 
@keyframes marquee{
	0%{transform: translateX(0%)}
	100%{transform:translateX(-100%)}
}
@keyframes marquee2{
 	0%{transform: translateX(100%)}
 	100%{transform:translateX(0%)}
}


ダークモード
style.css@media (prefers-color-scheme: dark) {
	.quick-launch {
   		&::before, &::after {
  			color: #1f2937;
  		}
  	}
}

2024/4/17 ScrapboxのCSS変更で利用できなくなっている
暫定修正done

.appにoverflow: hiddenを掛けているせいで、page-menuのstickyが死んでいる
対処方法が思いつかない…
https://zenn.dev/ruri14/articles/c85b4fcc6783c7【CSS】Safari 16.0でフルサポートされたoverflow: clipが便利
うおお、解決した！
これでiPadで開いたときの不満がなくなった


style.css/* .quick-launch .right-box:after{
	content: "今年は残り29日です。";
} */
せっかくだしいろいろ使っていこう
ぎゃあああああああ！


#UserCSS