settingsの置換を図るページの置換を図るページ-bundled
2024/05/03更新
code:bundled.css
body {
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;
}
.brand-icon {
--logo-url: url(../../../pages/villagepump/brand-icon/icon);
width: 40px;
height: 40px;
background-color: white;
background-image: var(--logo-url);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: 4px solid transparent;
border-radius: 50%;
svg { display: none; };
}
.brand-icon {
background-image: var(--logo-url);
background-repeat: no-repeat;
}
.brand-icon svg {
display: none;
}
:root {
--furikake-high-bottom: 15px;
--furikake-high-left: -7px;
--furikake-low-left: -4px;
}
@keyframes brand-furikake {
0% {
margin: 0 0 0 var(--furikake-low-left);
transform: rotate(0deg);
}
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);
}
100% {
margin: 0 0 0 var(--furikake-low-left);
transform: rotate(0deg);
}
}
.navbar-brand {
.brand-icon { animation-duration: 1.5s; animation-timing-function: ease; };
&:hover .brand-icon {
animation-name: brand-furikake;
}
}
.project-home .title {
font-family: serif;
font-weight: 400;
}
.navbar .row .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;
}
font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands";
font-weight: 900;
font-size: 0.8rem;
content: "\f35d";
display: inline-block;
cursor: text;
}
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -1px;
text-align: center;
background-size: contain;
background-repeat: no-repeat;
cursor: text;
}
content: "\f1c1";
font-weight: 400;
margin-right: 1px;
}
content: "\f09b";
font-weight: 400;
margin-right: 1px;
}
content: "\f266";
font-weight: 400;
margin-right: 3px;
}
content: "\f270";
font-weight: 400;
margin-right: 1px;
}
display: inline-block;
width: 0;
text-indent: -9999px;
}
display: inherit;
width: inherit;
text-indent: inherit;
}
.line .deco-\. {
font-size: .8em;
position: relative;
top: -0.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: rotate3d(1, 0, 0, -90deg);
}
100% {
transform: rotate3d(1, 0, 0, 0deg);
}
}
display: inline-block;
transform-origin: center 90%;
animation: dokaben 2s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-timing-function: steps(12);
}
font-weight: bold;
text-shadow:
#661600 -1.87291px -0.701566px 0px, #661600 -0.421592px -1.95506px 0px, }
@keyframes wait_enlarge {
0% {
font-size: 0px;
}
60% {
font-size: 0px;
width: 10000px;
}
100% {
font-size: 150px;
}
}
font-size: 150px;
width: 10000px;
animation-name: wait_enlarge;
animation-duration: 20s;
}
.navbar .row {
max-width: 1200px;
margin-right: auto;
margin-left: auto;
}
.search-form .form-group .dropdown-menu {
width: 100%;
max-height: calc(100vh - 130px);
}
.navbar .navbar-menu > li.stream-btn {
display: block !important;
a { color: var(--navbar-icon-color, #fff); }; }
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}
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;
}
:root {
}
:root {
--ul-bullet: "\f068";
--ol-bullet: "\f292";
\3000;
}
.line .indent-mark .dot::before {
display: block;
position: absolute;
top: -10px;
font-family: "Font Awesome 5 Free";
font-size: 6px;
font-weight: 900;
content: var(--ul-bullet, "\f068");
color: var(--li-color-0);
}
content: "\f005";
}
.line .indent-mark .dot {
background-color: transparent;
}
.line .indent-mark .c-0 + .dot::before {
font-size: 10px;
}
.line .indent-mark .c-1 + .dot::before {
font-size: 9px;
}
.line .indent-mark .c-2 + .dot::before {
font-size: 8px;
}
.line .indent-mark .c-3 + .dot::before {
font-size: 7px;
}
.indent-mark .dot:nth-child(6n+2)::before {
color: var(--li-color-1);
}
.indent-mark .dot:nth-child(6n+3)::before {
color: var(--li-color-2);
}
.indent-mark .dot:nth-child(6n+4)::before {
color: var(--li-color-3);
}
.indent-mark .dot:nth-child(6n+5)::before {
color: var(--li-color-4);
}
.indent-mark .dot:nth-child(6n+6)::before {
color: var(--li-color-5);
}
.indent-mark .dot:nth-child(6n+7)::before {
color: var(--li-color-0);
}
.line.number-list .dot {
display: list-item;
}
.line.number-list .dot::before {
position: inherit;
top: -11px;
content: var(--ol-bullet, "\f292");
font-size: 4px;
}
.line.number-list .c-0 + .dot::before {
font-size: 8px;
}
.line.number-list .c-1 + .dot::before {
font-size: 7px;
}
.line.number-list .c-2 + .dot::before {
font-size: 6px;
}
.line.number-list .c-3 + .dot::before {
font-size: 5px;
}
.line.number-list .c-4 + .dot::before {
font-size: 4px;
}
.mermaid-preview svg {
border-radius: 8px;
}
.line .video-player video {
max-height: 300px;
}
.line .level .video-player video {
max-height: 85vh;
}
.iframe-video-player:not(.floating) iframe.youtube {
width: 99%;
max-width: 746.7px;
height: 30vw;
max-height: 420px;
}
.iframe-video-player:not(.floating):hover div.control {
bottom: 25px;
right: auto;
left: 86%;
}
.line strong:not(class) { background: linear-gradient(transparent 60%, rgba(171, 255, 79, .6) 60%, rgba(171, 255, 79, .6) 100%);
}
.line strong:not(class):hover { background: linear-gradient(to right, transparent, rgba(171, 255, 79, .6), transparent 50%) 0% center / 400% auto;
padding: 0.1em 0.2em 0.1em 0.2em;
animation: marker 10s linear infinite;
animation-direction: reverse;
}
@keyframes marker {
to {
background-position-x: 400%;
}
}
@keyframes icon-shake {
0% {
transform: translate(0, 0) rotate(0);
}
16.66% {
transform: translate(2px, -2px) rotate(-5deg);
}
33.32% {
transform: translate(2px, 1px) rotate(5deg);
}
49.98% {
transform: translate(0, 0) rotate(0);
}
66.64% {
transform: translate(-2px, -2px) rotate(5deg);
}
83.30% {
transform: translate(-2px, 3px) rotate(-5deg);
}
100% {
transform: translate(0, 0) rotate(0);
}
}
.deco-\! img.icon {
animation: 0.15s icon-shake linear infinite;
}
@keyframes icon-rotate-shake {
0% {
transform: translate(0, 0) rotate(0deg);
}
16.66% {
transform: translate(0.13em, -0.13em) rotate(180deg);
}
33.32% {
transform: translate(0.13em, 0.07em) rotate(360deg);
}
49.98% {
transform: translate(0, 0) rotate(540deg);
}
66.64% {
transform: translate(-0.13em, -0.13em) rotate(720deg);
}
83.30% {
transform: translate(-0.13em, 0.2em) rotate(900deg);
}
100% {
transform: translate(0, 0) rotate(1080deg);
}
}
.deco--.deco-\! img.icon {
animation: 1.0s icon-rotate-shake linear infinite;
}
.deco-\" {
border-radius: .2em;
padding: 0 .4em;
background-color: rgba(128, 128, 128, 0.1);
font-size: 95%;
font-style: italic;
}
.line:not(.cursor-line) .deco-\"::before {
font-size: 85%;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f10d";
position: relative;
top: -0.5em;
left: -0.2em;
}
.line:not(.cursor-line) .deco-\#:not(:hover):not(:has(a)) {
filter: grayscale(100%);
}
.line:not(.cursor-line) .deco-\#:not(:hover):has(img) {
filter: grayscale(100%);
}
.line:not(.cursor-line) .deco-\#:has(a) {
padding: .1em;
}
.line:not(.cursor-line) .deco-\# a {
}
.deco-\% {
padding: 0.1em 0.2em 0.1em 0.2em;
}
border-radius: 50%;
border: .05em solid #f40; line-height: 1;
font-weight: 600;
padding: 5px;
}
}
.line:not(.cursor-line) .deco:has(.deco-\'):has(.deco-_) {
display: flex;
align-items: center;
text-align: center;
&::before,
&::after {
flex-grow: 1;
min-width: 30px;
content: "";
}
&:has(.deco--) {
&::before,
&::after {
border-style: dashed none none;
}
}
&::before {
margin-right: 10px;
}
&::after {
margin-left: 10px;
}
:has(.deco-_) { text-decoration: none !important; };
}
.line:not(.cursor-line) .deco-\':not(.deco-_) {
display: inline-block;
width: 100%;
text-align: center;
}
.deco-\&:not(:hover) {
color: transparent;
background-color: grey;
}
.deco-\&:not(:hover) a.page-link {
color: transparent;
}
.deco-\&:not(:hover) a.icon {
visibility: hidden;
}
.deco-\&:not(:hover) img {
filter: contrast(0);
}
.deco-\(.deco-\) img.icon {
border-radius: 50%;
}
.line:not(.cursor-line) .deco-\, {
font-size: 0px;
}
.line:not(.cursor-line) .deco-\,::before {
font-size: 13px;
content: " ";
}
font-size: 12px;
line-height: 22px;
color: gray;
}
display: none;
}
.line .deco-\/ img.icon {
margin: 3px 0;
max-width: 100%;
max-height: 300px;
height: revert;
}
.line .deco-\/.deco-\* img.icon {
margin: 3px 0;
max-width: 95%;
max-height: none;
height: revert;
display: inline-block;
vertical-align: middle;
}
@keyframes icon-rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
.deco-- img.icon {
animation: 1.5s icon-rotate linear infinite;
}
margin-top: -2px;
width: 50px;
height: 14px;
font-size: 10px;
line-height: 14px;
padding: 0 2px;
background-color: green;
white-space: nowrap;
text-overflow: ellipsis;
overflow-x: clip;
position: absolute;
z-index: 101;
opacity: .7;
}
content: "|";
width: 2px;
color: green;
background-color: green;
position: absolute;
top: 7px;
left: 0;
height: 18px;
}
margin-top: -4px;
height: 14px;
font-size: 10px;
line-height: 12px;
padding: 0 1px;
background-color: grey;
white-space: nowrap;
text-overflow: ellipsis;
position: absolute;
z-index: 101;
opacity: .5;
}
@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;
}
100% {
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-\} { display: inline-block; max-width: calc(100% - 100px); padding: 0.1em 0.2em; margin: auto 0.3em; margin-bottom: 1px; font-size: 1em; color: #000; vertical-align: top; background-color: #d8d8d8; border-radius: 0.4em; a { color: #000; } &::before, &::after { position: absolute; width: 0; padding: 0; margin: 0; content: ""; border-color: #d8d8d8 transparent; border-style: solid; } }; .deco-\{::before { border-width: 0 0 0.6em 0.6em; transform: translateX(-100%) translateY(calc(1em - 80%)); };
.deco-\}::after { border-width: 0 0.6em 0.6em 0; transform: translateY(calc(1em - 80%)); };
.deco-\!::before, .deco-\!::after { border-color: #e66 transparent; }; }
.line:not(.cursor-line) .deco-\<.deco-\> .formula {
margin: 0;
}
.line:not(.cursor-line) .deco-\~:not(:hover) {
filter: blur(3px);
}
@media only screen and (min-width: 480px) {
--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);
}
}
display: flex;
flex-wrap: wrap;
}
flex-grow: 1;
}
width: 100%;
img, span { display: none; };
&::before {
display: inline-block;
width: 100%;
vertical-align: middle;
content: "";
}
border-style: dashed none none;
}
}
@media only screen and (min-width: 480px) {
--size: 300px;
position: fixed;
right: 0;
bottom: 0;
display: block;
width: var(--size);
height: var(--size);
content: "";
background-image: url(../../../pages/villagepump/Qualia-san/icon);
background-size: var(--size) var(--size);
}
}
@media only screen and (min-width: 480px) {
--scale: 0.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);
}
}
display: none;
}
@media only screen and (min-width: 480px) {
--size: 10vw;
position: fixed;
bottom: 0;
left: 0;
display: block;
width: var(--size);
height: var(--size);
content: "";
background-size: var(--size) var(--size);
}
}
ul.dropdown-menu > li.dropdown-item:has(a:focus) {
}
ul.dropdown-menu > li.dropdown-item > a:focus {
box-shadow: none;
}
/* <stdin> */
hr.icon
code:other-bundled.css
font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands";
font-weight: 900;
font-size: 0.8rem;
content: "\f35d";
display: inline-block;
cursor: text;
}
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -1px;
text-align: center;
background-size: contain;
background-repeat: no-repeat;
cursor: text;
}
content: "\f1c1";
font-weight: 400;
margin-right: 1px;
}
content: "\f09b";
font-weight: 400;
margin-right: 1px;
}
content: "\f266";
font-weight: 400;
margin-right: 3px;
}
content: "\f270";
font-weight: 400;
margin-right: 1px;
}
display: inline-block;
width: 0;
text-indent: -9999px;
}
display: inherit;
width: inherit;
text-indent: inherit;
}
.line .deco-\. {
font-size: .8em;
position: relative;
top: -0.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: rotate3d(1, 0, 0, -90deg);
}
100% {
transform: rotate3d(1, 0, 0, 0deg);
}
}
display: inline-block;
transform-origin: center 90%;
animation: dokaben 2s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-timing-function: steps(12);
}
font-weight: bold;
text-shadow:
#661600 -1.87291px -0.701566px 0px, #661600 -0.421592px -1.95506px 0px, }
@keyframes wait_enlarge {
0% {
font-size: 0px;
}
60% {
font-size: 0px;
width: 10000px;
}
100% {
font-size: 150px;
}
}
font-size: 150px;
width: 10000px;
animation-name: wait_enlarge;
animation-duration: 20s;
}
.navbar .row {
max-width: 1200px;
margin-right: auto;
margin-left: auto;
}
.search-form .form-group .dropdown-menu {
width: 100%;
max-height: calc(100vh - 130px);
}
.navbar .navbar-menu > li.stream-btn {
display: block !important;
a { color: var(--navbar-icon-color, #fff); }; }
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}
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;
}
:root {
}
:root {
--ul-bullet: "\f068";
--ol-bullet: "\f292";
\3000;
}
.line .indent-mark .dot::before {
display: block;
position: absolute;
top: -10px;
font-family: "Font Awesome 5 Free";
font-size: 6px;
font-weight: 900;
content: var(--ul-bullet, "\f068");
color: var(--li-color-0);
}
content: "\f005";
}
.line .indent-mark .dot {
background-color: transparent;
}
.line .indent-mark .c-0 + .dot::before {
font-size: 10px;
}
.line .indent-mark .c-1 + .dot::before {
font-size: 9px;
}
.line .indent-mark .c-2 + .dot::before {
font-size: 8px;
}
.line .indent-mark .c-3 + .dot::before {
font-size: 7px;
}
.indent-mark .dot:nth-child(6n+2)::before {
color: var(--li-color-1);
}
.indent-mark .dot:nth-child(6n+3)::before {
color: var(--li-color-2);
}
.indent-mark .dot:nth-child(6n+4)::before {
color: var(--li-color-3);
}
.indent-mark .dot:nth-child(6n+5)::before {
color: var(--li-color-4);
}
.indent-mark .dot:nth-child(6n+6)::before {
color: var(--li-color-5);
}
.indent-mark .dot:nth-child(6n+7)::before {
color: var(--li-color-0);
}
.line.number-list .dot {
display: list-item;
}
.line.number-list .dot::before {
position: inherit;
top: -11px;
content: var(--ol-bullet, "\f292");
font-size: 4px;
}
.line.number-list .c-0 + .dot::before {
font-size: 8px;
}
.line.number-list .c-1 + .dot::before {
font-size: 7px;
}
.line.number-list .c-2 + .dot::before {
font-size: 6px;
}
.line.number-list .c-3 + .dot::before {
font-size: 5px;
}
.line.number-list .c-4 + .dot::before {
font-size: 4px;
}
.mermaid-preview svg {
border-radius: 8px;
}
.line .video-player video {
max-height: 300px;
}
.line .level .video-player video {
max-height: 85vh;
}
.iframe-video-player:not(.floating) iframe.youtube {
width: 99%;
max-width: 746.7px;
height: 30vw;
max-height: 420px;
}
.iframe-video-player:not(.floating):hover div.control {
bottom: 25px;
right: auto;
left: 86%;
}
.line strong:not(class) { background: linear-gradient(transparent 60%, rgba(171, 255, 79, .6) 60%, rgba(171, 255, 79, .6) 100%);
}
.line strong:not(class):hover { background: linear-gradient(to right, transparent, rgba(171, 255, 79, .6), transparent 50%) 0% center / 400% auto;
padding: 0.1em 0.2em 0.1em 0.2em;
animation: marker 10s linear infinite;
animation-direction: reverse;
}
@keyframes marker {
to {
background-position-x: 400%;
}
}
@keyframes icon-shake {
0% {
transform: translate(0, 0) rotate(0);
}
16.66% {
transform: translate(2px, -2px) rotate(-5deg);
}
33.32% {
transform: translate(2px, 1px) rotate(5deg);
}
49.98% {
transform: translate(0, 0) rotate(0);
}
66.64% {
transform: translate(-2px, -2px) rotate(5deg);
}
83.30% {
transform: translate(-2px, 3px) rotate(-5deg);
}
100% {
transform: translate(0, 0) rotate(0);
}
}
.deco-\! img.icon {
animation: 0.15s icon-shake linear infinite;
}
@keyframes icon-rotate-shake {
0% {
transform: translate(0, 0) rotate(0deg);
}
16.66% {
transform: translate(0.13em, -0.13em) rotate(180deg);
}
33.32% {
transform: translate(0.13em, 0.07em) rotate(360deg);
}
49.98% {
transform: translate(0, 0) rotate(540deg);
}
66.64% {
transform: translate(-0.13em, -0.13em) rotate(720deg);
}
83.30% {
transform: translate(-0.13em, 0.2em) rotate(900deg);
}
100% {
transform: translate(0, 0) rotate(1080deg);
}
}
.deco--.deco-\! img.icon {
animation: 1.0s icon-rotate-shake linear infinite;
}
.deco-\" {
border-radius: .2em;
padding: 0 .4em;
background-color: rgba(128, 128, 128, 0.1);
font-size: 95%;
font-style: italic;
}
.line:not(.cursor-line) .deco-\"::before {
font-size: 85%;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f10d";
position: relative;
top: -0.5em;
left: -0.2em;
}
.line:not(.cursor-line) .deco-\#:not(:hover):not(:has(a)) {
filter: grayscale(100%);
}
.line:not(.cursor-line) .deco-\#:not(:hover):has(img) {
filter: grayscale(100%);
}
.line:not(.cursor-line) .deco-\#:has(a) {
padding: .1em;
}
.line:not(.cursor-line) .deco-\# a {
}
.deco-\% {
padding: 0.1em 0.2em 0.1em 0.2em;
}
border-radius: 50%;
border: .05em solid #f40; line-height: 1;
font-weight: 600;
padding: 5px;
}
}
.line:not(.cursor-line) .deco:has(.deco-\'):has(.deco-_) {
display: flex;
align-items: center;
text-align: center;
&::before,
&::after {
flex-grow: 1;
min-width: 30px;
content: "";
}
&:has(.deco--) {
&::before,
&::after {
border-style: dashed none none;
}
}
&::before {
margin-right: 10px;
}
&::after {
margin-left: 10px;
}
:has(.deco-_) { text-decoration: none !important; };
}
.line:not(.cursor-line) .deco-\':not(.deco-_) {
display: inline-block;
width: 100%;
text-align: center;
}
.deco-\&:not(:hover) {
color: transparent;
background-color: grey;
}
.deco-\&:not(:hover) a.page-link {
color: transparent;
}
.deco-\&:not(:hover) a.icon {
visibility: hidden;
}
.deco-\&:not(:hover) img {
filter: contrast(0);
}
.deco-\(.deco-\) img.icon {
border-radius: 50%;
}
.line:not(.cursor-line) .deco-\, {
font-size: 0px;
}
.line:not(.cursor-line) .deco-\,::before {
font-size: 13px;
content: " ";
}
font-size: 12px;
line-height: 22px;
color: gray;
}
display: none;
}
.line .deco-\/ img.icon {
margin: 3px 0;
max-width: 100%;
max-height: 300px;
height: revert;
}
.line .deco-\/.deco-\* img.icon {
margin: 3px 0;
max-width: 95%;
max-height: none;
height: revert;
display: inline-block;
vertical-align: middle;
}
@keyframes icon-rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
.deco-- img.icon {
animation: 1.5s icon-rotate linear infinite;
}
margin-top: -2px;
width: 50px;
height: 14px;
font-size: 10px;
line-height: 14px;
padding: 0 2px;
background-color: green;
white-space: nowrap;
text-overflow: ellipsis;
overflow-x: clip;
position: absolute;
z-index: 101;
opacity: .7;
}
content: "|";
width: 2px;
color: green;
background-color: green;
position: absolute;
top: 7px;
left: 0;
height: 18px;
}
margin-top: -4px;
height: 14px;
font-size: 10px;
line-height: 12px;
padding: 0 1px;
background-color: grey;
white-space: nowrap;
text-overflow: ellipsis;
position: absolute;
z-index: 101;
opacity: .5;
}
@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;
}
100% {
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-\} { display: inline-block; max-width: calc(100% - 100px); padding: 0.1em 0.2em; margin: auto 0.3em; margin-bottom: 1px; font-size: 1em; color: #000; vertical-align: top; background-color: #d8d8d8; border-radius: 0.4em; a { color: #000; } &::before, &::after { position: absolute; width: 0; padding: 0; margin: 0; content: ""; border-color: #d8d8d8 transparent; border-style: solid; } }; .deco-\{::before { border-width: 0 0 0.6em 0.6em; transform: translateX(-100%) translateY(calc(1em - 80%)); };
.deco-\}::after { border-width: 0 0.6em 0.6em 0; transform: translateY(calc(1em - 80%)); };
.deco-\!::before, .deco-\!::after { border-color: #e66 transparent; }; }
.line:not(.cursor-line) .deco-\<.deco-\> .formula {
margin: 0;
}
.line:not(.cursor-line) .deco-\~:not(:hover) {
filter: blur(3px);
}
@media only screen and (min-width: 480px) {
--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);
}
}
display: flex;
flex-wrap: wrap;
}
flex-grow: 1;
}
width: 100%;
img, span { display: none; };
&::before {
display: inline-block;
width: 100%;
vertical-align: middle;
content: "";
}
border-style: dashed none none;
}
}
@media only screen and (min-width: 480px) {
--size: 300px;
position: fixed;
right: 0;
bottom: 0;
display: block;
width: var(--size);
height: var(--size);
content: "";
background-image: url(../../../pages/villagepump/Qualia-san/icon);
background-size: var(--size) var(--size);
}
}
@media only screen and (min-width: 480px) {
--scale: 0.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);
}
}
display: none;
}
@media only screen and (min-width: 480px) {
--size: 10vw;
position: fixed;
bottom: 0;
left: 0;
display: block;
width: var(--size);
height: var(--size);
content: "";
background-size: var(--size) var(--size);
}
}
ul.dropdown-menu > li.dropdown-item:has(a:focus) {
}
ul.dropdown-menu > li.dropdown-item > a:focus {
box-shadow: none;
}
/* <stdin> */