Settings
https://img.icons8.com/material-outlined/384/000000/settings.png
なんとなく追加
2022-03-15 12:02:22 performanceの問題がありそうなので外した
特に違いがなさそうなら戻すつもり
12:04:00 見違えるほど表示が速くなったtakker.icon
いままで2回文字が消えていた
↓をはずしたら一発でrenderingされるようになった
code:style.beforeBundle.css
しくみ
井戸端のスタイルを更新したいときは、CSSを編集した後、上のボタンでbundleしてstyle.cssに貼り付けて下さい
適用中のUserCSS一覧
未分類
(特になし)
デザイン変更
ナビゲーションバー(nav bar)関連
ページ内記法
ブラケット記法
iconに適用させる系
特定のページ・行にのみ適用
Scrapboxの挙動改善
非表示にする系
ネタ
ページ内にハッシュタグ#モニカを書くとモニカが右下に出てくる
ページ内にハッシュタグ#たいへんよくできましたを書くと左下にて褒められる
ページ内にハッシュタグ#クオリアさんを書くとクオリアさんが右下に出てくる
インデントレベルが6以上になったときにブチギレたクオリアさんが右下に出てくる
イベント
無効化済み
お正月だしつけてみよwogikaze.icon
外した2023/01/08(日)
公式で修正されたため不要
切り出し作業中多分終了した
やっていること
UserCSSの機能ごとに適当なタイトルを付けて切り出す
一応、切り出し毎に記法サンプルで表示に不具合がないか確認するようにしているMijinko_SD.icon /icons/ありがと.icontakker.icon
切り出し先のCSSをimportする文を↓に書く
多いなぁMijinko_SD.icon
1行だけのも結構あるしtakker.icon
未分類・その他
code:style_beforeBundle.css
/*@import "../navbarが画面幅いっぱいに表示されるようになったのを元に戻すUserCSS/style.css"; /* navbar再構築テスト */
@import "../Font_Awesomeを常時使えるようにするUserCSS/style.css";
@import "../ピン留めされたページを独立した段に表示するUserCSS/style.css";
@import "../のびのびドロップダウン/style.css";
/*@import "../brand-iconをふりかけにするUserCSS/style.css"; /* navbar再構築テスト */
/*@import "../このProjectの faviconをくるくる回すUserCSS/style.css"; /* */
/*@import "../プロジェクトタイトルの隣に今日の日付を表示するUserCSS/style.css"; /* navbar再構築テスト */
/*@import "../外部リンクを区別するUserCSS/style.css"; /**/
/*@import "../特定のリンクにアイコンをつけるUserCSS/style.css"; /**/
@import "../特定のリンクにアイコンをつけるUserCSSを自動生成したい/style.css";
/*@import "../Streamにアクセスするボタンを表示するCSS/style.css"; /* navbar再構築テスト */
/* @import "../Streamボタンに動きを加えるUserCSS/style.css"; /* */
@import "../ページの閲覧数を非表示にするUserCSS/style.css";
@import "../ページカードのタイトルを2行に収めるUserCSS/style.css";
@import "../箇条書きのバレットをFontAwesomeにするUserCSS/style.css"; /* */
/* @import "../インデントが深すぎると色が変わる箇条書きのバレット/style.css"; /* */
@import "../背景を十字模様にするUserCSS/style.css"; /* */
/* @import "../旭日旗のUserCSS/style.css"; /* */
/*@import "../scrapboxのトップページへのリンクをnav barに固定するUserCSS/style.css"; /* navbar再構築テスト */
/* @import "../井戸端クリスマスモードUserCSS/style.css"; */
/* @import "../お正月用に門松を表示するUserCSS/style.css"; */
@import "../数式行にも常にバレットを表示するUserCSS/style.css";
@import "../動画の大きさを調節するUserCSS/style.css";
/* @import "../自分のアイコンに飾りをつけるUserCSS/style.css"; */
/* @import "../新規作成ボタンを椎茸にするUserCSS/style.css"; /* 新規作成ボタンを置き換える */
/* @import "../日章旗/style.css"; /* 新規作成ボタンを置き換える */
@import "../Scrapboxがmermaid.jsをサポート/style.css";
/*@import "../mermaid.jsの円グラフが表示されない/style.css";*/
@import "../hr.iconをCSSで描画するUserCSS/style.css";
↑2022-02-11 20:41:51 全角スペースが入っていたのが原因で、これ以降の全てのUserCSSが無効になっていましたtakker.icon code:diff
+@import "../日章旗/style.css"; /* 新規作成ボタンを置き換える */
-@import "../日章旗/style.css"; /* 新規作成ボタンを置き換える */
全角スペースが見えるようなフォントを使うといいのかも?
なかった
Scrapboxの挙動改善
code:style_beforeBundle.css
文字装飾記法系
code:style_beforeBundle.css
@import "../ふきだし記法/style.css";
@import "../マーカー記法/style.css";
@import "../画像を並べて表示する記法/style.css";
@import "../中央揃え記法/style.css";
@import "../セパレーター記法/style.css";
@import "../愚痴記法/style.css";
@import "../曇りガラス記法/style.css";
@import "../スプレッドシート的に使う記法/style.css";
/* @import "../ネタバレ防止記法/style.css"; */
@import "../白黒記法/style.css";
@import "../ネコと和解せよ記法/style.css";
@import "../ユーザーフラッグ記法/style.css";
@import "../動くユーザフラッグ記法/style.css";
@import "../ルビ記法/style.css";
@import "../KaTeXの空白を消す記法/style.css";
@import "../別名登録記法/style.css";
@import "../リンクを出典アイコンにするUserCSS/style.css";
@import "../アイコン記法を画像記法っぽくするUserCSS/style.css";
@import "../展開された正規表現を小さくするCSS/style.css";
@import "../iconを回転する記法/changeable.css";
@import "../iconを振動させる記法/style.css";
@import "../icon回転振動合体記法/style.css";
@import "../iconを丸くする記法/style.css";
@import "../はんこ記法/style.css";
@import "../インライン引用記法/style.css";
特定の行にのみ適用
code:style_beforeBundle.css
@import "../AIのべりすと創作:イドバタニシ/style.css"; /* 遊びなので飽きたら消してください */
@import "../ドカベン記法/sample.css";
ネタ
code:style_beforeBundle.css
@import "../Just_Monika/style.css"; /* #モニカ をつけると右下にモニカが出てくる */ @import "../クオリアさんが見ているUserCSS/style.css"; /* #クオリアさん をつけると右下にクオリアさんが出てくる */ @import "../天気図を表示するUserCSS/style.css"; /* #天気図 をつけると右上に天気図が出てくる */ /* @import "../インデントが深くなったときに警告するCSS/style.css"; */ /* インデントレベル6以上で右下にキレたクオリアさんが出てくる */
Streamのフォントをレトロゲームみたくする
code:style_beforeBundle.css
/*.stream {
font-family: 'DotGothic16', helvetica, arial, "Font Awesome 5 Free","Font Awesome 5 Brands", "AppIcons", sans-serif;
}*/
project titleの字体調節
code:style_beforeBundle.css
.quick-launch .project-home, .quick-launch .project-home .title{font-family: serif;font-weight: 400;}
Streamで背景色や画像が途切れないようにする
code:style_beforeBundle.css
.stream h1 {
background-color: transparent;
}
このUserCSSの設定、冗長すぎやしないか?takker.icon
設定をシンプルにしたい
code:style_beforeBundle.css
/*
.expandable-menu {
max-width: calc(100% - 186px); /* 126 + 60 */
}
@media screen and (min-width: 768px) and (max-width: 991px) {
.expandable-menu {
max-width: calc(100% - 201px); /* 126 + 60 + 15 */
}
}
@media screen and (min-width: 992px) and (max-width: 1260px) {
.expandable-menu {
max-width: calc(100% - 216px); /* 126 + 60 30 */
}
}
/* navbar再構築テスト */
機能しないファイルが年中読み込まれるのもどうかと思ったのでクリスマスモード外しましたkuuote.icon
それもそうかtakker.icon
大したコード量じゃないから放置してもいいかなとも思ったけど
CSSのperseに負荷がかかるから減らすに越したことはないのか
11月の終わりに有効化すればいいかな
code:style_beforeBundle.css
display: none !important;
}
code:style_beforeBundle.css
display: none;
}
Settings.icon
UserCSS.icon
テスト用
bundle前のCSSのテストをしたい時に使う
テストをしたい時は、bundled codeのファイル名をstyle.css以外にして、下のCSSをstyle.cssにする
戻す時は逆の手順を行う
code:style_.css
@import "/api/code/villagepump/Settings/style_beforeBundle.css";
bundled code
brand-iconが表示されない時は、(画面上の)4行目あたりに../../../pages/villagepump/brand-icon/iconがあれば/api/pages/villagepump/brand-icon/iconに置換する
多分解決済み↓
置換前:html[data-assets-version^=assets-202212] body{background-image:url(//svg-hosting.vercel.app/api/svg)}
置換後:html[data-assets-version^=assets-202212] body{background-image:url(//svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/villagepump/井戸端クリスマスモード/snow.svg)}
動くver html[data-assets-version^=assets-202212] body{background-image:url(//svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/villagepump/井戸端クリスマスモード/s02.svg)}
やっぱりちょっと重いな…yosider.icon
brand-iconが表示されない時は~ という問題があるため
code:style.css.disable
/*@import "../ScrapboxのBrand_iconを井戸端にするUserCSS/style.css"; /* navbar再構築テスト */
code:style.css.disable
@import "../navbar周りのUserCSSの再設計/style.css"; /* navbar再構築テスト */
code:style_.css
@import "../settingsの置換を図るページ/style.css";
bundled
過去バージョン
code:style.css
.line span:not(.modal-image):not(.pointing-device-map)>a.link:not(.icon):not(:is(href$=".pdf",[href^="https://github.com"],[href^="https://raw.githubusercontent.com"],[href^="https://gist.github.com"],[href^="https://ja.wikipedia.org"],[href^="https://en.wikipedia.org"],[href^="https://www.amazon.co.jp"],[href^="https://amazon.co.jp"],[href^="https://twitter.com"],)):after{font-family:"Font Awesome 5 Free","Font Awesome 5 Brands";font-weight:900;font-size:.8rem;content:"\f35d";display:inline-block;cursor:text}.line span:not(.deco-\.)>span>a.link:is(href$=".pdf",[href^="https://github.com"],[href^="https://raw.githubusercontent.com"],[href^="https://gist.github.com"],[href^="https://ja.wikipedia.org"],[href^="https://en.wikipedia.org"],[href^="https://www.amazon.co.jp"],[href^="https://amazon.co.jp"],[href^="https://twitter.com"],):before{display:inline-block;width:1em;height:1em;vertical-align:-1px;text-align:center;background-size:contain;background-repeat:no-repeat;cursor:text}:is(.line,.line .deco) a.link:is(href$=".pdf",):before{content:"\f1c1";font-weight:400;margin-right:1px}:is(.line,.line .deco) a.link:is([href^="https://github.com"],[href^="https://raw.githubusercontent.com"],[href^="https://gist.github.com"],):before{content:"\f09b";font-weight:400;margin-right:1px}:is(.line,.line .deco) a.link:is([href^="https://ja.wikipedia.org"],[href^="https://en.wikipedia.org"],):before{content:"\f266";font-weight:400;margin-right:3px}:is(.line,.line .deco) a.link:is([href^="https://www.amazon.co.jp"],[href^="https://amazon.co.jp"],):before{content:"\f270";font-weight:400;margin-right:1px}.line .deco-\. a.link:is([href^="https://ja.wikipedia.org"],[href^="https://en.wikipedia.org"],) span.char-index{display:inline-block;width:0;text-indent:-9999px}.line .deco-\. a.link:is([href^="https://ja.wikipedia.org"],[href^="https://en.wikipedia.org"],) span.char-index:nth-of-type(30)~span.char-index{display:inherit;width:inherit;text-indent:inherit}.line .deco-\.{font-size:.8em;position:relative;top:-.5em}.line:not(.cursor-line) .deco-\. a:is(.page-link:not(.icon),.link) span:not(.empty-char-index)+span+span~span{display:inline-block;width:0;text-indent:-9999px}.line:not(.cursor-line) .deco-\. .page-link:not(.icon) span.empty-char-index~span.char-index{display:inherit;width:inherit;text-indent:inherit}.line:not(.cursor-line) .deco-\. a.page-link:not(.icon) span.empty-char-index+span:before{content:"#"}.line .deco-\. :is(.page-link:not(.icon),.link):before{display:inline-block;min-width:1.15em;padding-left:1px;font-family:"Font Awesome 5 Free","Font Awesome 5 Brands";text-align:center;vertical-align:middle;font-weight:900;content:"\f02d"}.line .deco-\..deco-\/{font-style:initial}.line .deco-\..deco-\/ :is(.page-link:not(.icon),.link):before{font-weight:400;content:"\f15c"}@keyframes dokaben{0%{transform:rotateX(-90deg)}to{transform:rotateX(0)}}#L630529f8f70d950020850261~.line:not(.cursor-line) .deco-\+{display:inline-block;transform-origin:center 90%;animation:dokaben 2s;animation-direction:alternate;animation-iteration-count:infinite;animation-timing-function:steps(12)}#L630529f8f70d950020850261~.line:not(.cursor-line) .deco-\!{font-weight:bold;color:#bf2b04;text-shadow:#661600 2px 0px 0px,#661600 1.75517px .958851px 0px,#661600 1.0806px 1.68294px 0px,#661600 .141474px 1.99499px 0px,#661600 -.832294px 1.81859px 0px,#661600 -1.60229px 1.19694px 0px,#661600 -1.97998px .28224px 0px,#661600 -1.87291px -.701566px 0px,#661600 -1.30729px -1.5136px 0px,#661600 -.421592px -1.95506px 0px,#661600 .567324px -1.91785px 0px,#661600 1.41734px -1.41108px 0px,#661600 1.92034px -.558831px 0px}@keyframes wait_enlarge{0%{font-size:0px}60%{font-size:0px;width:10000px}to{font-size:150px}}#L628f5654a19e400000f6eecc{font-size:150px;width:10000px;animation-name:wait_enlarge;animation-duration:20s}body{--A: var(--card-bg, #D8D8D8);--B: var(--body-bg, #E0E0E0);background:radial-gradient(circle,transparent 20%,var(--B) 20%,var(--B) 80%,transparent 80%,transparent),radial-gradient(circle,transparent 20%,var(--B) 20%,var(--B) 80%,transparent 80%,transparent) 50px 50px,linear-gradient(var(--A) 8px,transparent 8px) 0 -4px,linear-gradient(90deg,var(--A) 8px,transparent 8px) -4px 0;background-color:var(--B);background-size:100px 100px,100px 100px,50px 50px,50px 50px}.navbar .row{max-width:1200px;margin-right:auto;margin-left:auto}.brand-icon{--logo-url: url(/api/pages/villagepump/brand-icon/icon);width:40px;height:40px;background-color:#fff;background-position:center;background-size:cover;border:4px solid transparent;border-radius:50%}:root{--furikake-high-bottom: 15px;--furikake-high-left: -7px}@keyframes brand-furikake{0%{margin:0;transform:rotate(0)}25%{margin:0 0 var(--furikake-high-bottom) var(--furikake-high-left);transform:rotate(150deg)}30.0%{margin:0 0 var(--furikake-high-bottom) var(--furikake-high-left)}36.7%{margin:0 0 0 var(--furikake-low-left)}43.3%{margin:0 0 var(--furikake-high-bottom) var(--furikake-high-left)}50.0%{margin:0 0 0 var(--furikake-low-left)}85%{transform:rotate(150deg)}to{margin:0;transform:rotate(0)}}.navbar-brand .brand-icon{animation-duration:1.5s;animation-timing-function:ease}.navbar-brand:hover .brand-icon{animation-name:brand-furikake}.search-form .form-group .dropdown-menu{width:100%;max-height:calc(100vh - 130px)}.dropdown-menu>li>ahref*="%E2%80%8B"{font-size:12px;line-height:22px;color:gray}.navbar .navbar-menu>li{width:32px;min-width:24px}.navbar .navbar-menu>li.stream-btn{display:block!important;min-width:unset}.navbar .navbar-menu>li>a.mobile-search-toggle{padding-left:unset}.navbar:has(.browser-like-tool-menu) .navbar-menu>li>a.mobile-search-toggle{justify-content:end}.expandable-menu-margin{min-width:12px}.project-home .title{font-family:serif;font-weight:400}.quick-launch .flex-box .flex-item:has(.left-box){left:max((100% - 1200px) / 2 - 16px,0px);max-width:calc(1200px + 16px * 2);margin-right:auto;margin-left:auto}.project-home:after{display:block;flex-shrink:0;height:36px;aspect-ratio:4 / 3;margin-left:10px;content:"";background-image:url(//daiiz-apps.appspot.com/today/jp.svg);background-repeat:no-repeat;background-size:contain}.page-list .page-list-item.pin+.page-list-item:not(.pin){clear:both}.grid li.page-list-item [data-page-title^=""data-page-title*="("]data-page-title$=")"{display:none}.grid li.page-list-item a .title{-webkit-line-clamp:2}.editor,.grid li,.stream{font-family:"Roboto",Helvetica,Arial,"Hiragino Sans","Font Awesome 5 Free","Font Awesome 5 Brands","AppIcons",sans-serif}.app .line .indent-mark .dot{position:unset;background-color:transparent}.line .indent-mark .dot:after{--size: var(--dot-size, 6px);position:absolute;top:calc(13px - var(--size) / 2);right:calc(12px - var(--size) / 2);display:inline-block;width:var(--size);font-family:"Font Awesome 5 Free";font-size:var(--size);font-style:normal;font-weight:900;font-variant:normal;line-height:1;color:var(--dot-color, var(--page-text-color, #555));text-align:center;content:"\f6be";-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:auto}.number-list .indent-mark .dot:after{content:"\f292"}.indent-markstyle="width: 1.5em;"{--dot-size: 10px}.indent-markstyle="width: 3em;"{--dot-size: 9px}.indent-markstyle="width: 4.5em;"{--dot-size: 8px}.indent-markstyle="width: 6em;"{--dot-size: 7px}.indent-mark{--dot-color: #edad0b}.indent-mark:is(style="width: 3em;",:has(.dot:nth-child(6n + 3))){--dot-color: #c7243a}.indent-mark:is(style="width: 4.5em;",:has(.dot:nth-child(6n + 4))){--dot-color: #932674}.indent-mark:is(style="width: 6em;",:has(.dot:nth-child(6n + 5))){--dot-color: #3261ab}.indent-mark:is(style="width: 7.5em;",:has(.dot:nth-child(6n + 6))){--dot-color: #009f8c}.indent-mark:is(style="width: 9em;",:has(.dot:nth-child(6n + 7))){--dot-color: #c9c9c9}.lineid^=L5fe4ac:not(id^="L5fe4ac00",id^="L5fe4ac01",id^="L5fe4ac02",id^="L5fe4ac03",id^="L5fe4ac04"),.lineid^=L5fe4ad,.lineid^=L5fe4ae,.lineid^=L5fe4af,.lineid^=L5fe4b,.lineid^=L5fe4c,.lineid^=L5fe4d,.lineid^=L5fe4e,.lineid^=L5fe4f,.lineid^=L5fe5:not(id^="L5fe5f"),.lineid^=L5fe5f:not(id^="L5fe5fd",id^="L5fe5fe",id^="L5fe5ff"),.lineid^=L5fe5fd:not(id^="L5fe5fd8",id^="L5fe5fd9",id^="L5fe5fda",id^="L5fe5fdb",id^="L5fe5fdc",id^="L5fe5fdd",id^="L5fe5fde",id^="L5fe5fdf"),.lineid^=L5fe5fd80,.lineid^=L5fe5fd81,.lineid^=L5fe5fd82,.lineid^=L5fe5fd83,.lineid^=L5fe5fd84{.indent-mark::after {content: "\f005";}}.mermaid-preview svg{border:2px solid #efefef;border-radius:5px}.video-player video{max-height:360px}strong .video-player video{max-height:600px}.iframe-video-player:not(.floating){iframe {width: 99%; max-width: 640px; height: auto; max-height: 360px; aspect-ratio: 16 / 9;};&:hover .control{right:unset;left:min(99% - 24px,616px)}}strong .iframe-video-player:not(.floating){iframe {max-width: 99%; max-height: none;};&:hover .control{left:calc(99% - 24px)}}@keyframes marker{to{background-position-x:400%}}.line strong:not(class){background:linear-gradient(transparent 60%,rgb(171 255 79 / 60%) 60%,rgb(171 255 79 / 60%) 100%);&:hover{padding:.1em .2em;background:linear-gradient(to right,transparent,rgb(171 255 79 / 60%),transparent 50%) 0% center / 400% auto;animation:marker 10s linear infinite;animation-direction:reverse}}@keyframes icon-shaking{16.66%{transform:translate(2px,-2px) rotate(-5deg)}33.32%{transform:translate(2px,1px) rotate(5deg)}49.98%{transform:translate(0) rotate(0)}66.64%{transform:translate(-2px,-2px) rotate(5deg)}83.30%{transform:translate(-2px,3px) rotate(-5deg)}to{transform:translate(0) rotate(0)}}.deco-\! img.icon{animation:.15s icon-shaking linear infinite}@keyframes icon-shaking-and-rotating{16.66%{transform:translate(.13em,-.13em) rotate(180deg)}33.32%{transform:translate(.13em,.07em) rotate(360deg)}49.98%{transform:translate(0) rotate(540deg)}66.64%{transform:translate(-.13em,-.13em) rotate(720deg)}83.30%{transform:translate(-.13em,.2em) rotate(900deg)}to{transform:translate(0) rotate(1080deg)}}.deco-\!.deco-- img.icon{animation:1s icon-shaking-and-rotating linear infinite}.line:not(.cursor-line) .deco-\"{padding:0 .4em;font-size:95%;font-style:italic;background-color:#8080801a;border-radius:.2em;&:before{position:relative;top:-.5em;left:-.2em;font-family:"Font Awesome 5 Free";font-size:85%;font-weight:900;color:#a0a0a0;content:"\f10d"}}.line:not(.cursor-line) .deco-\#:not(:hover,:has(a.page-link)){filter:grayscale(100%)}.line:not(.cursor-line) .deco-\#:has(a.page-link){padding:.1em;color:#fff;background:black;border-color:#000}.line:not(.cursor-line) .deco-\# a.page-link{color:#ff0}.deco-\%{padding:.1em .2em;color:#111;background-color:#fdf}.line:not(.cursor-line) .deco-\&:not(:hover){color:transparent;background-color:gray;a.page-link {color: transparent;};a.icon {visibility: hidden;};img {filter: contrast(0);}}.line:not(.cursor-line) .deco-\':not(.deco-_){display:inline-block;width:100%;text-align:center}.line:not(.cursor-line){.deco:has(.deco-\'.deco-_) {display: flex; align-items: center; text-align: center; &::before,&::after {flex-grow: 1; min-width: 30px; content: ""; border-top: 1px solid #afafaf;} &::before {margin-right: 10px;} &::after {margin-left: 10px;}};.deco:has(.deco-\'.deco-_.deco--) {&::before,&::after {border-style: dashed none none;}};.deco :has(.deco-\'.deco-_) {text-decoration: none !important;}}.line:not(.cursor-line) .deco-\(.deco-\):not(:has(.icon)){padding:5px;font-weight:600;line-height:1;color:#f40;border:.05em solid #f40;border-radius:50%;a.page-link {color: #f40;}}.deco-\(.deco-\) img.icon{border-radius:50%}.line:not(.cursor-line) .deco-\,{font-size:0;&:before{font-size:13px;color:#f17c00;content:" ";background-color:#fbebdd}}@keyframes icon-rotating{to{transform:rotate(360deg)}}.deco-- img.icon{animation:1.5s icon-rotating linear infinite}.level-1 class*="deco-- deco-*" img.icon{animation-duration:3s}.level-2 class*="deco-- deco-*" img.icon{animation-duration:1.5s}.level-3 class*="deco-- deco-*" img.icon{animation-duration:1s}.level-4 class*="deco-- deco-*" img.icon{animation-duration:.7s}.level-5 class*="deco-- deco-*" img.icon{animation-duration:.4s}.level-6 class*="deco-- deco-*" img.icon{animation-duration:.3s}.level-7 class*="deco-- deco-*" img.icon{animation-duration:.2s}.level-8 class*="deco-- deco-*" img.icon{animation-duration:.1s}.level-9 class*="deco-- deco-*" img.icon{animation-duration:.07s}.level-10 class*="deco-- deco-*" img.icon{animation-duration:.05s}.deco-\/ img.icon{position:static;display:inline-block;max-width:100%;height:revert;max-height:300px;margin:3px 0;vertical-align:bottom}.line:not(.cursor-line) .deco-\<:not(.deco-\>){position:absolute;top:-4px;z-index:101;padding-left:1px;font-size:10px;line-height:10px;text-overflow:ellipsis;white-space:nowrap}.line:not(.cursor-line) .deco-\>:not(.deco-\<){position:absolute;z-index:101;width:50px;height:14px;padding:0 2px;margin-top:-2px;overflow-x:clip;font-size:10px;line-height:14px;color:#fff;text-overflow:ellipsis;white-space:nowrap;background-color:green;opacity:.7;&:after{position:absolute;top:7px;left:0;width:2px;height:18px;color:green;content:"|";background-color:green}}@keyframes user-flag-moving{20%{left:0}20.1%{left:15px}40%{left:15px}40.1%{left:30px}60%{top:0}60.1%{top:28px}80%{left:30px}80.1%{left:120px}to{left:120px}100.1%{left:300px}}.line:not(.cursor-line) .deco-\>.deco-\+:not(.deco-\<){animation:5s user-flag-moving linear infinite}.line:not(.cursor-line) .deco-\<.deco-\> .formula{margin:0}.line:not(.cursor-line){.deco-\{,.deco-\} {display: inline-block; max-width: calc(100% - 100px); padding: .1em .2em; margin: auto .3em; margin-bottom: 1px; font-size: 1em; color: #000; vertical-align: top; background-color: #d8d8d8; border-radius: .4em;};.deco-\{::before {position: absolute; width: 0; padding: 0; margin: 0; content: ""; border-color: #d8d8d8 transparent; border-style: solid; border-width: 0 0 .6em .6em; transform: translateX(-100%) translateY(calc(1em - 80%));};.deco-\}::after {position: absolute; width: 0; padding: 0; margin: 0; content: ""; border-color: #d8d8d8 transparent; border-style: solid; border-width: 0 .6em .6em 0; transform: translateY(calc(1em - 80%));};.deco-\!::before,.deco-\!::after {border-color: #e66 transparent;};.deco-\{ a,.deco-\} a {color: #000;}}.line:not(.cursor-line) .deco-\~:not(:hover){filter:blur(3px)}.line a.link.icon:is(href$="/icons/-",href$="/icons/hr",href$="/icons/hrd"){pointer-events:none;img,span {display: none;};&:before{display:inline-block;width:100%;vertical-align:middle;content:"";border-top:1px solid #afafaf}}.line a.link.icon:is(href$="/icons/hrd"):before{border-style:dashed none none}@media only screen and (min-width: 480px){atype=hashTaghref="/villagepump/%E3%83%A2%E3%83%8B%E3%82%AB":after{--size: 960px;position:fixed;right:-480px;bottom:-360px;display:block;width:var(--size);height:var(--size);content:"";background-image:url(//i.gyazo.com/58cdc21a7d819e0c2b2727e85da571e4.png);background-size:var(--size) var(--size)}}@media only screen and (min-width: 480px){atype=hashTaghref="/villagepump/%E3%81%9F%E3%81%84%E3%81%B8%E3%82%93%E3%82%88%E3%81%8F%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%97%E3%81%9F":after{--size: 10vw;position:fixed;bottom:0;left:0;display:block;width:var(--size);height:var(--size);content:"";background-image:url(//svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/villagepump/%E3%81%9F%E3%81%84%E3%81%B8%E3%82%93%E3%82%88%E3%81%8F%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%97%E3%81%9F/good.svg);background-size:var(--size) var(--size)}}@media only screen and (min-width: 480px){atype=hashTaghref="/villagepump/%E3%82%AF%E3%82%AA%E3%83%AA%E3%82%A2%E3%81%95%E3%82%93":after{--size: 300px;position:fixed;right:0;bottom:0;display:block;width:var(--size);height:var(--size);content:"";background-image:url(/api/pages/villagepump/Qualia-san/icon);background-size:var(--size) var(--size)}}@media only screen and (min-width: 480px){atype=hashTaghref="/villagepump/%E5%A4%A9%E6%B0%97%E5%9B%B3":after{--scale: .5;--width: calc(600px * var(--scale));--height: calc(581px * var(--scale));position:fixed;top:40px;right:0;display:block;width:var(--width);height:var(--height);content:"";background-image:url(//takker-weather.vercel.app/jma/weather-map/archives/today.png);background-size:var(--width) var(--height)}}.related-page-list .grid li.page-list-itemdata-page-title*=\200b{display:none}#page-info-menu+ul>li:is(:nth-child(4),:nth-child(6))>div{display:none}