notherbase-fs 3.1.5 → 3.1.7

package/public/styles/main.css

@@ -1,24 +1,86 @@
 :root {
+    /* colors */
     --bgColor: rgb(216, 216, 216);
+    --bgColorGradient: linear-gradient(170deg, rgba(37,37,37,1) 0%, rgba(15,15,15,1) 100%);
     --bgColorTransparent: rgba(211, 211, 211, 0.404);
     --darkBgColor: rgb(136, 136, 136);
+    --darkBgColorGradient: linear-gradient(170deg, rgba(27,27,27,1) 0%, rgba(5,5,5,1) 100%);
     --veryDarkBgColorTransparent: rgba(78, 78, 78, 0.404);
     --veryDarkBgColor: rgb(59, 59, 59);
     --lightBgColor: rgb(57, 57, 57);
-    --shadowColor: rgb(26, 26, 26);
+    --selectionColor: rgb(58, 58, 58);
+    --selectedTextColor: rgb(248, 192, 100);
+    --hoverColor: rgb(97, 97, 97);
+    --hoverTextColor: rgb(216, 171, 112);
+    --shadowColor: rgba(7, 7, 7, 0.616);
     --textColor: rgb(15, 15, 15);
     --textColorBright: rgb(110, 63, 0);
-    --woodColor: rgb(95, 68, 43);
+    --woodColor: rgb(133, 96, 62);
     --darkWoodColor: rgb(70, 50, 32);
+    --ceilingBG: rgba(202, 202, 202, 0.034);
+    --sideWallBG: rgba(151, 145, 138, 0.041);
+    --backWallBG: rgba(151, 145, 138, 0.128);
+    --foundationBG: rgba(29, 17, 5, 0.10);
+    /* borders */
     --standardBorder: 1px solid var(--textColor);
+    --thickBorder: 5px solid var(--textColor);
+    --brightBorder: 1px solid var(--textColorBright);
+    --darkBorder: 2px solid var(--veryDarkBgColorTransparent);
+    --borderRadius: 5px;
+    /* font */
+    --h1Size: 100px;
+    --h2Size: 60px;
+    --h3Size: 40px;
+    --h4Size: 30px;
+    --h5Size: 25px;
+    --h6Size: 20px;
+    --pSize: 20px;
+    --tinyText: 17px;
+    --inputHeight: 50px;
+    /* boxes */
+    --padding: 5px;
+    --thickPadding: 20px;
+    --margin: 5px;
+    --thickMargin: 20px;
+    --mainWidth: 1280px;
+    --fillFromMargin: calc(100% - (2 * var(--margin)));
+    --fillFromThickMargin: calc(100% - (2 * var(--thickMargin)));
+    --fillHalfFromMargin: calc(50% - (2 * var(--margin)));
+    --fillHalfFromThickMargin: calc(50% - (2 * var(--thickMargin)));
+    --fillThirdFromMargin: calc((1 / 3) * 100% - (2 * var(--margin)));
+    --fillThirdFromThickMargin: calc((1 / 3) * 50% - (2 * var(--thickMargin)));
+    --fillQuarterFromMargin: calc(25% - (2 * var(--margin)));
+    --fillQuarterFromThickMargin: calc(25% - (2 * var(--thickMargin)));
+    --boxShadow: 5px 5px 5px 5px var(--shadowColor);
+    --goHeight: 150px;
+    --returnHeight: 75px;
+}
+
+::-webkit-scrollbar {
+    width: 10px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--lightBgColor);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--textColor);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--textColorBright);
 }
 
 * {
     box-sizing: border-box;
+    color: var(--textColor);
+    font-size: var(--pSize);
     margin: 0;
     padding: 0;
-    color: var(--textColor);
     font-family: 'Roboto', sans-serif;
+    font-weight: lighter;
+    border-radius: var(--borderRadius);
 }
 
 .invisible {
@@ -31,7 +93,8 @@
 }
 
 body {
-    background-color: var(--darkBgColor);
+    background: var(--darkBgColor);
+    background: var(--darkBgColorGradient);
     min-height: 100vh;
     display: flex;
     justify-content: center;
@@ -42,20 +105,18 @@ body {
 }
 
 main {
-    width: 800px;
+    width: var(--mainWidth);
     min-height: 500px;
-    box-shadow: 5px 5px 5px 5px var(--shadowColor);
-    padding: 20px;
+    box-shadow: var(--boxShadow);
+    padding: var(--thickPadding);
     border-radius: 5px 5px 0px 0px;
-    margin-top: 15px;
-    margin-bottom: 0;
+    margin-top: var(--thickMargin);
     display: flex;
     flex-wrap: wrap;
-    justify-content: center;
+    justify-content: space-evenly;
     align-content: center;
-    align-items: flex-start;
+    align-items: flex-end;
     background-color: var(--bgColor);
-    position: relative;
 }
 
 footer {
@@ -64,11 +125,11 @@ footer {
     align-content: center;
     align-items: flex-start;
     min-height: 25px;
-    width: 800px;
+    width: var(--mainWidth);
     background-color: var(--veryDarkBgColor);
     border-radius: 0px 0px 5px 5px;
-    box-shadow: 5px 5px 5px 5px var(--shadowColor);
-    padding: 5px;
+    box-shadow: var(--boxShadow);
+    padding: var(--padding);
     border: none;
     margin-bottom: 100px;
 }
@@ -77,74 +138,467 @@ footer a {
     text-decoration: none;
     height: 100%;
     margin: 0;
-    padding: 5px;
+    padding: var(--padding);
     width: 50%;
-    height: 100%;
 }
 
-h1, h2, h3, h4, h5, h6 {
+section {
+    width: var(--fillFromMargin);
+    margin: var(--margin);
+    background: var(--darkBgColor);
+    border: var(--darkBorder);
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    justify-content: space-around;
+    align-content: flex-end;
+    min-height: 30px;
+    gap: 10px 10px;
+    position: relative;
+}
+
+article {
     width: 100%;
+    position: relative;
+    border: var(--standardBorder);
+}
+
+.code {
+    width: var(--fillFromMargin);
+    padding: 20px;
+    background: rgb(18, 18, 18);
+    border-radius: 2px;
+    border: 1px solid rgb(58, 58, 58);
+    color: rgb(191, 170, 145);
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 15px;
+    overflow: auto;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    width: var(--fillFromMargin);
+    text-align: center;
+    text-shadow: 1px 1px var(--shadowColor);
+}
+
+h1 {
+    font-size: var(--h1Size);
+    border-bottom: var(--standardBorder);
+}
+
+h2 {
+    font-size: var(--h2Size);
+}
+
+h3 {
+    font-size: var(--h3Size);
+}
+
+h4 {
+    font-size: var(--h4Size);
+    border-bottom: var(--standardBorder);
+}
+
+h5 {
+    font-size: var(--h5Size);
+}
+
+h6 {
+    font-size: var(--h6Size);
 }
 
 hr {
     border: none;
-    border-bottom: 1px solid var(--textColor);
-    margin: 20px;
+    border-bottom: var(--standardBorder);
+    margin-top: var(--thickMargin);
+    margin-bottom: var(--thickMargin);
     width: 100%;
 }
 
 p {
     color: var(--textColor);
-    margin-bottom: 10px;
-    width: 80%;
+    width: 100%;
+    padding: var(--padding);
+    font-size: var(--pSize);
+}
+
+ul {
+    border: var(--standardBorder);
+    width: var(--fillFromMargin);
+    list-style: none;
+    margin: var(--margin);
+}
+
+li {
+    border: var(--standardBorder);
+    padding: var(--thickPadding);
 }
 
-input, textarea {
-    padding: 10px;
-    width: calc(100% - 10px);
+textarea {
+    padding: var(--padding);
+    width: var(--fillFromMargin);
     background-color: var(--bgColor);
-    border-radius: 5px;
-    border: 1px solid var(--textColor);
-    margin: 5px;
-    font-size: 15px;
+    border-radius: 0;
+    border: var(--standardBorder);
+    margin: var(--margin);
+}
+
+label {
+    padding: var(--padding);
+    width: var(--fillFromMargin);
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    margin: var(--margin);
+}
+
+input {
+    padding: var(--thickPadding);
+    width: var(--fillFromMargin);
+    background-color: var(--bgColor);
+    border-radius: 0;
+    border: var(--standardBorder);
+    height: var(--inputHeight);
+    margin: var(--margin);
 }
 
 input[type=submit], button, a {
     background-color: var(--bgColor);
-    padding: 10px;
-    border-radius: 5px;
-    border: 1px solid var(--textColor);
+    padding: var(--thickPadding);
+    border-radius: var(--borderRadius);
+    border: var(--standardBorder);
     color: var(--textColor);
-    margin: 5px;
-    margin-top: 20px;
     text-decoration: none;
     text-align: center;
+    margin: var(--margin);
 }
 
 input[type=submit]:hover, button:hover, a:hover {
-    border: 1px solid var(--textColorBright);
+    border: var(--brightBorder);
     color: var(--textColorBright);
     cursor: pointer;
 }
 
-.header-link {
+input[type=checkbox] {
+    width: 30px;
+    height: 30px;
+    margin: var(--margin);
+}
+
+.sign {
+    width: 85%;
+    height: 400px;
+    padding: var(--padding);
+    border-radius: var(--borderRadius);
+    border: var(--thickBorder);
+    margin: var(--margin);
+    background: url("/img/signs/wooden-board.jpg");
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    align-content: center;
+}
+
+.sign * {
+    background: var(--bgColor);
+}
+
+.form {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    border: var(--standardBorder);
+    margin: var(--margin);
+}
+
+.info {
+    color: var(--selectedTextColor);
+    text-shadow: 2px 2px var(--shadowColor);
+    text-align: center;
+}
+
+.locked {
+    background-color: var(--bgColor);
+    border: 1px solid var(--textColor);
+    color: var(--textColor);
+    filter: brightness(.5);
+    user-select: none;
+}
+
+.locked:hover {
+    background-color: var(--bgColor);
+    border: 1px solid var(--textColor);
+    color: var(--textColor);
+    cursor: default;
+    filter: brightness(.5);
+    user-select: none;
+}
+
+.go {
+    width: var(--fillHalfFromMargin);
+    height: var(--goHeight);
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-end;
+    padding: var(--thickPadding);
+    margin: var(--margin);
+}
+
+.to {
+    width: var(--fillFromMargin);
+    height: var(--goHeight);
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-end;
+    padding: var(--thickPadding);
+    margin: var(--margin);
+}
+
+.return {
+    width: var(--fillFromMargin);
+    height: var(--returnHeight);
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-end;
+    padding: var(--thickPadding);
+    margin: var(--margin);
+}
+
+.do {
+    width: var(--fillThirdFromMargin);
+    height: var(--goHeight);
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-end;
+    padding: var(--thickPadding);
+    margin: var(--margin);
+}
+
+.search {
+    width: var(--fillFromMargin);
+    border: var(--standardBorder);
+    height: 300px;
+    background: rgb(25, 25, 25);
+}
+
+.search input {
+    width: 100%;
+    margin: 0;
+    border-radius: 0;
     border: none;
+    border-bottom: var(--standardBorder);
+}
+
+.search section {
+    width: 100%;
+    margin: 0;
     padding: 0;
+    height: calc(100% - var(--inputHeight));
+    overflow: auto;
+}
+
+.search ul {
+    border: 1px dotted var(--textColor);
+    width: var(--fillFromMargin);
+}
+
+ul.selector li:hover {
+    cursor: pointer;
+    background: var(--hoverColor);
+    color: var(--hoverTextColor);
+}
+
+ul.selector li.selected {
+    background: var(--selectionColor);
+    color: var(--selectedTextColor);
+}
+
+ul.selector p {
+    color: rgb(78, 78, 78);
 }
 
-.header-link:hover {
+.painting {
+    border: 3px solid var(--darkWoodColor);
+    background: var(--hoverColor);
+    width: 5vh;
+    height: 5vh;
+    object-fit: cover;
+    align-self: flex-start;
+}
+
+.door {
+    border: var(--standardBorder);
+    width: 150px;
+    height: 250px;
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding: var(--padding);
+    padding-top: 30px;
+}
+
+.door>.knob {
+    position: absolute;
+    width: 2vh;
+    height: 2vh;
+    border-radius: 50%;
+    right: 15%;
+    top: 50%;
+    background-color: var(--darkWoodColor);
+}
+
+iframe {
     border: none;
 }
 
 .login-cover {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    width: 700px;
+}
+
+.login-cover a {
+    padding: var(--padding);
+    margin: 40px;
+    border: none;
+}
+
+.login-cover h3 {
+    margin: 40px 0;
+}
+
+.login-cover button {
+    width: 250px;
+}
+
+.dialogue {
+    width: var(--fillFromMargin);
+    height: 200px;
+    padding: var(--thickPadding);
+    border-radius: var(--borderRadius);
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    margin: var(--margin);
+}
+
+.dialogue .portrait {
+    width: 30%;
+    height: 100%;
+    border: var(--standardBorder);
+    border-radius: var(--borderRadius);
+    object-fit: cover;
+    image-rendering: pixelated;
+}
+
+.dialogue .heart {
+    width: 3px;
+    height: 100%;
+    background-color: var(--textColor);
+    border-radius: var(--borderRadius);
+}
+
+.dialogue .content {
+    width: 65%;
+    height: 100%;
+    border: var(--standardBorder);
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    align-items: center;
+    border-radius: var(--borderRadius);
+    background-color: var(--bgColor);
+}
+
+.dialogue .content p {
+    text-align: center;
+}
+
+.dialogue .selected {
+    border: none;
+}
+
+.merchant {
+    width: var(--fillFromMargin);
+    border: var(--standardBorder);
+    min-height: 100px;
+    background-color: rgb(49, 49, 49);
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin: var(--margin);
+}
+
+.merchant div {
+    border: var(--standardBorder);
+    width: 165px;
+    padding: var(--padding);
+    margin: var(--margin);
+}
+
+.merchant div button {
+    margin: 0;
+    width: 100%;
+}
+
+.memo {
+    width: var(--fillFromMargin);
+    margin: var(--margin);
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.limb {
+    transform-origin: bottom center;
     position: absolute;
-    left: 0;
-    top: 0;
+    left: 50%;
+    bottom: 50%;
+}
+
+.conchu {
+    border: 3px dotted var(--textColor) !important;
+    background: url("/img/misc/conchu.jpg") !important;
+}
+
+.basic {
+    border: var(--standardBorder);
+    background: var(--darkBgColor);
+    width: 25vh;
+    height: 25vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--padding);
+    text-align: center;
+}
+
+.browser {
     width: 100%;
-    height: 100%;
 }
 
-@media only screen and (max-width: 800px) {
+.toy {
+    width: 45%;
+    max-width: 200px;
+    max-height: 200px;
+    overflow: hidden;
+    border: var(--standardBorder);
+}
+
+.folder {
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding: 5px 10px;
+    margin: 0;
+}
+
+@media only screen and (max-width: 1300px) {
     main {
         width: 100%;
     }
@@ -152,4 +606,39 @@ input[type=submit]:hover, button:hover, a:hover {
     footer {
         width: 100%;
     }
+}
+
+@media only screen and (max-width: 800px) {
+    :root {
+        /* borders */
+        --standardBorder: 1px solid var(--textColor);
+        --thickBorder: 3px solid var(--textColor);
+        --brightBorder: 1px solid var(--textColorBright);
+        --borderRadius: 3px;
+        /* font */
+        --h1Size: 35px;
+        --h2Size: 32px;
+        --h3Size: 28px;
+        --h4Size: 25px;
+        --h5Size: 22px;
+        --h6Size: 20px;
+        --pSize: 18px;
+        /* boxes */
+        --padding: 3px;
+        --thickPadding: 6px;
+        --margin: 3px;
+        --thickMargin: 6px;
+        --mainWidth: 1280px;
+        --fillFromMargin: calc(100% - (2 * var(--margin)));
+        --fillFromThickMargin: calc(100% - (2 * var(--thickMargin)));
+        --fillHalfFromMargin: calc(50% - (2 * var(--margin)));
+        --fillHalfFromThickMargin: calc(50% - (2 * var(--thickMargin)));
+        --fillThirdFromMargin: calc((1 / 3) * 100% - (2 * var(--margin)));
+        --fillThirdFromThickMargin: calc((1 / 3) * 50% - (2 * var(--thickMargin)));
+        --fillQuarterFromMargin: calc(25% - (2 * var(--margin)));
+        --fillQuarterFromThickMargin: calc(25% - (2 * var(--thickMargin)));
+        --boxShadow: 5px 5px 5px 5px var(--shadowColor);
+        --goHeight: 120px;
+        --returnHeight: 60px;
+    }
 }