new

style/color.css

@@ -0,0 +1,223 @@
+@import url("base.css");
+
+.markdown-section td,
+.markdown-section th {
+  border: 1px solid var(--section-table-header-border-color);
+}
+
+.markdown-section blockquote{
+  background-color: var(--section-blockquote-background-color);
+  color: var(--section-blockquote-color);
+}
+
+.markdown-section p.tip,
+.markdown-section tr:nth-child(2n) {
+  background-color: var(--section-background-color);
+}
+
+.progress {
+  background-color: var(--main-theme-color);
+  background-color: var(--theme-color, var(--main-theme-color));
+}
+
+.search .search-keyword,
+.search a:hover {
+  color: var(--main-theme-color);
+  color: var(--theme-color, var(--main-theme-color))
+}
+
+body {
+  color: var(--main-color);
+}
+
+.app-nav a.active,
+.app-nav a:hover {
+  color: var(--main-theme-color);
+  color: var(--theme-color, var(--main-theme-color))
+}
+
+.app-nav a.active {
+  border-bottom: 2px solid var(--main-theme-color);
+  border-bottom: 2px solid var(--theme-color, var(--main-theme-color))
+}
+
+.github-corner svg {
+  color: var(--background-color);
+  fill: var(--main-theme-color);
+  fill: var(--theme-color, var(--main-theme-color));
+}
+
+.anchor span {
+  color: var(--main-color);
+}
+
+.sidebar-toggle {
+  background-color: var(--section-sidebar-background-color);
+}
+
+.sidebar-toggle span {
+  background-color: var(--main-theme-color);
+  background-color: var(--theme-color, var(--main-theme-color));
+}
+
+.markdown-section p.tip:before {
+  color: var(--background-color);
+}
+
+.markdown-section p.tip em {
+  color: var(--main-color);
+}
+
+.markdown-section p.warn {
+  background: var(--section-p-warn-background-color);
+}
+
+@media screen and (max-width:768px) {
+  body.close .sidebar-toggle {
+    background-color: var(--sidebar-background-color);
+  }
+}
+
+section.cover.has-mask .mask {
+  background-color: var(--background-color);
+}
+
+section.cover .cover-main>p:last-child a {
+  border: 1px solid var(--main-theme-color);
+  border-color: var(--theme-color, var(--main-theme-color));
+  color: var(--theme-color, var(--main-theme-color));
+}
+
+section.cover .cover-main>p:last-child a:last-child {
+  background-color: var(--theme-color, var(--main-theme-color));
+  color: #fff
+}
+
+section.cover blockquote>p>a {
+  border-bottom: 2px solid var(--theme-color, var(--main-theme-color));
+}
+
+section.cover blockquote>p>a:hover {
+  color: var(--theme-color, var(--main-theme-color))
+}
+
+.sidebar,
+body {
+  background-color: var(--background-color);
+  transition: background-color 0.3s ease-in-out;
+}
+
+.sidebar {
+  color: var(--main-color);
+}
+
+.sidebar li {
+  margin: 6px 15px 6px 0
+}
+
+.sidebar ul li a {
+  color: var(--main-color);
+}
+
+.sidebar ul li.active>a {
+  color: var(--theme-color, var(--main-theme-color));
+}
+
+.markdown-section h1,
+.markdown-section h2,
+.markdown-section h3,
+.markdown-section h4,
+.markdown-section strong {
+  color: var(--section-background-color);
+}
+
+.markdown-section a {
+  color: var(--theme-color, var(--main-theme-color));
+}
+
+.markdown-section blockquote {
+  border-left: 4px solid var(--theme-color, var(--main-theme-color));
+}
+
+
+.markdown-section code {
+  background-color: var(--section-main-color);
+  color: var(--section-background-color);
+  font-family: d9c, d9;
+}
+
+.markdown-section pre {
+  -moz-osx-font-smoothing: initial;
+  -webkit-font-smoothing: initial;
+  background-color: var(--section-main-color);
+  font-family: d9c, d9;
+  margin: 1.2em 0;
+  padding: 0 1.4rem;
+  position: relative;
+}
+
+.token.string {
+  color: var(--theme-color, var(--main-theme-color))
+}
+
+
+.token.attr-value,
+.token.control,
+.token.directive,
+.token.unit {
+  color: var(--theme-color, var(--main-theme-color))
+}
+
+.markdown-section pre>code {
+  -moz-osx-font-smoothing: initial;
+  -webkit-font-smoothing: initial;
+  background-color: var(--section-main-color);
+  border-radius: 2px;
+  color: var(--section-background-color);
+  display: block;
+  font-family: d9c, d9;
+}
+
+.markdown-section code:after,
+.markdown-section code:before {
+  letter-spacing: .05rem
+}
+
+
+pre:after {
+  color: #ccc;
+  content: attr(data-lang);
+  top: 0
+}
+
+.markdown-section p.tip {
+  background-color: var(--section-main-color);
+  color: var(--section-background-color)
+}
+
+input[type=search] {
+  background: #4f4f4f;
+  border-color: #4f4f4f;
+  color: var(--main-color);
+}
+
+body.light .sidebar li>a:has(>img) {
+  color: var(--main-color);
+}
+
+.sidebar-nav>ul>li>ul>li>a:has(>img):hover,
+.sidebar-nav>ul>li>a:has(>img):hover,
+.sidebar-nav>ul>li>ul>li:has( li.active)>a,
+.sidebar-nav>ul>li>ul>li.active>a,
+.sidebar-nav>ul>li:has( li.active)>a,
+.sidebar-nav>ul>li.active>a {
+  filter: brightness(0.7) drop-shadow(0 10px 10px #141414);
+}
+
+article.markdown-section:has(.intro)>.notice {
+  background-color: var(--section-main-color);
+  border-color: var(--section-background-color);
+  &[onclick]:hover{
+    background-color: var(--section-main-color);
+  }
+}

style/dark.css

@@ -0,0 +1,22 @@
+body.dark {
+  --main-color: #c8c8c8;
+  --main-theme-color: #008080;
+  --background-color: #1f1f1f;
+  --section-main-color: #0f0f0f;
+  --section-background-color: #008080;
+  --section-table-header-border-color: #303030;
+  --section-blockquote-background-color: #003a3a;
+  --section-blockquote-color: #d4d4d4;
+  --section-tip-background-color: #161616;
+  --section-tip-color: #3f3f3fcc;
+  --section-p-warn-background-color: #ea6f5a1a;
+  --sidebar-background-color: #3f3f3fcc;
+  --notice-background-color: #3f3f3fcc;
+  --notice-border-color: #303030;
+  --notice-hover-background-color: #525252cc;
+  -webkit-tap-highlight-color: rgb(0, 0, 0);
+}
+
+body.dark .sidebar li>a:has(>img) {
+  background-image: url(../indexicon/syringe_dark.png);
+}

style/light.css

@@ -0,0 +1,22 @@
+body.light {
+  --main-color: #202020;
+  --main-theme-color: #008585;
+  --background-color: #dddddd;
+  --section-main-color: #00c9c9;
+  --section-background-color: #005f5f;
+  --section-table-header-border-color: #b1b1b1;
+  --section-blockquote-background-color: #c6ffff;
+  --section-blockquote-color: #414141;
+  --section-tip-background-color: #cccccc;
+  --section-tip-color: #bfbfbfcc;
+  --section-p-warn-background-color: #ea6f5a1a;
+  --sidebar-background-color: #bfbfbfcc;
+  --notice-background-color: #f0f0f0;
+  --notice-border-color: #b1b1b1;
+  --notice-hover-background-color: #e0e0e0;
+  -webkit-tap-highlight-color: rgb(255, 255, 255);
+}
+
+body.light .sidebar li>a:has(>img) {
+  background-image: url(../indexicon/syringe_light.png);
+}

style/otto.css

@@ -0,0 +1,60 @@
+div.otto{
+    display: block;
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    width: min-content;
+    align-items: right;
+    &:hover{
+        transform: rotate(-3deg) translate(0, 3%);
+    }
+    &:active{
+        transform: rotate(-1deg) translate(0, 5%);
+    }
+}
+
+div.otto .tips{
+    display: flex;
+    position: absolute;
+    background-color: #fff;
+    border-radius: 8px;
+    padding: 10px;
+    color: #000;
+    width: 100%;
+}
+
+div.otto img{
+    display: block;
+    transition: transform 0.5s;
+    height: 100%;
+}
+
+@media screen and (min-width: 1080px){
+    div.otto{
+        transition: transform 0.5s;
+        height: 350px;
+    }    
+}
+
+@media screen and (max-width: 1080px){
+    div.otto{
+        transition: transform 0.5s;
+        height: 200px;
+    }
+}
+
+@media  screen and (min-width: 768px){
+    div.otto{
+        transition: transform 0.5s;
+        opacity: 100%;
+    }
+    
+}
+
+@media screen and (max-width: 768px){
+    div.otto{
+        transition: transform 0.5s;
+        opacity: 0;
+    }
+    
+}

style/special.css

@@ -0,0 +1,251 @@
+* {
+    --line-width: 1px;
+}
+
+div.theme-positions {
+    position: relative;
+    display: flex;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: auto;
+    aspect-ratio: 16 / 9;
+    background-color: black;
+}
+
+div.theme-positions>div.column {
+    position: absolute;
+    width: calc(var(--line-width));
+    height: 100%;
+    background-color: red;
+
+    &.ccharacter {
+        left: calc(9.94% - var(--line-width) / 2);
+    }
+
+    &.c1 {
+        left: calc(18.18% - var(--line-width) / 2);
+        background-color: green;
+    }
+
+    &.c2 {
+        left: calc(25% - var(--line-width) / 2);
+        background-color: green;
+    }
+
+    &.c3 {
+        left: calc(31.82% - var(--line-width) / 2);
+        background-color: green;
+    }
+
+    &.c4 {
+        left: calc(38.64% - var(--line-width) / 2);
+        background-color: green;
+    }
+
+    &.c5 {
+        left: calc(45.45% - var(--line-width) / 2);
+        background-color: green;
+    }
+
+    &.c6 {
+        left: calc(52.27% - var(--line-width) / 2);
+        background-color: green;
+    }
+
+    &.c7 {
+        left: calc(70.74% - var(--line-width) / 2);
+        background-color: yellow;
+    }
+
+    &.ccenter {
+        left: calc(50% - var(--line-width) / 2);
+    }
+
+    &.cheart {
+        left: calc(90.06% - var(--line-width) / 2);
+    }
+}
+
+div.theme-positions>div.row {
+    position: absolute;
+    width: 100%;
+    height: calc(var(--line-width));
+    background-color: lightblue;
+
+    &.r1 {
+        top: calc(18.18% - var(--line-width) / 2);
+    }
+
+    &.r2 {
+        top: calc(28.79% - var(--line-width) / 2);
+    }
+
+    &.r3 {
+        top: calc(39.39% - var(--line-width) / 2);
+    }
+
+    &.r4 {
+        top: calc(50% - var(--line-width) / 2);
+    }
+
+    &.r5 {
+        top: calc(60.61% - var(--line-width) / 2);
+    }
+
+    &.r6 {
+        top: calc(71.21% - var(--line-width) / 2);
+    }
+
+    &.r7 {
+        top: calc(81.82% - var(--line-width) / 2);
+    }
+}
+
+div.theme-positions>.selectbox {
+    position: absolute;
+    background-color: #09ff0069;
+    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+div.theme-positions>.infobox {
+    pointer-events: none;
+    position: absolute;
+    width: max-content;
+    height: max-content;
+    padding: 3px;
+    border: 2px solid #535353;
+    border-radius: 2px;
+    background-color: #363636;
+    text-align: center;
+    z-index: 20;
+    font-size: 15px;
+    font-family: d9c, d9;
+
+    &>p {
+        margin: 0;
+        padding: 0;
+
+        &>span {
+            font-weight: bold;
+
+            &.c {
+                background-color: #177500;
+                border-radius: 3px;
+            }
+        }
+
+        &.other {
+            background-color: #177500;
+            border-radius: 3px;
+        }
+    }
+}
+
+.markdown-section:has(div.rdview) {}
+
+div.rdview {
+    & div.canvas {
+        width: 100%;
+    }
+
+    & div.editor {
+        display: flex;
+        width: 100%;
+        height: min(max-content, 50%);
+        overflow: hidden;
+        z-index: 10;
+
+        & textarea {
+            font-family: d9c, d9;
+            font-size: 15px;
+            color: #9CDCFE;
+            width: 100%;
+            background-color: #1f1f1f;
+            line-height: 22px;
+            resize: none;
+            overflow: hidden;
+            border-width: 1px;
+            border-color: gray;
+            border-radius: 5px;
+
+            &::selection {
+                color: #b5e5ff;
+                background-color: #264F78;
+            }
+
+            &:focus {
+                outline: none;
+                border-width: 1px;
+                border-color: gray;
+                border-radius: 5px;
+            }
+        }
+
+        & div.numbers {
+            flex: content;
+            border-right: 1px solid rgb(203, 213, 225);
+            overflow: hidden;
+            text-align: center;
+            box-sizing: border-box;
+        }
+
+        ::-webkit-scrollbar {
+            background: transparent;
+            height: 8px;
+            width: 8px;
+        }
+    }
+}
+
+div.decoration-depth {
+    &>div.row {
+        &>div.character {
+            background-repeat: no-repeat;
+            background-size: 100%;
+
+            &.samurai {
+                width: 80px;
+                height: 80px;
+                background-image: url(../style/assets/roomelements/Samurai.gif);
+            }
+        }
+
+        &>div.beat {
+            display: inline-flex;
+            vertical-align: middle;
+            position: absolute;
+
+            &>div.b1-left {
+                background-image: url(../style/assets/roomelements/classicbeat.png);
+                background-repeat: no-repeat;
+                background-size: 100%;
+                width: 64px;
+                height: 108px;
+                margin: -10px -8px;
+            }
+
+            &>div.cb {
+                background-image: url(../style/assets/roomelements/classicbeat.png);
+                background-repeat: no-repeat;
+                background-size: 100%;
+                width: 64px;
+                height: 108px;
+                margin: -10px -8px;
+
+                &:hover {
+                    background-image: url(../style/assets/roomelements/classicbeat.gif);
+                }
+            }
+            &>div.b7 {
+                background-image: url(../style/assets/roomelements/classicbeat.png);
+                background-repeat: no-repeat;
+                background-size: 100%;
+                width: 64px;
+                height: 108px;
+                margin: -10px -8px;
+                filter: hue-rotate(-80deg) brightness(50);
+            }
+        }
+    }
+}