notherbase-fs 3.3.0 → 3.3.1

package/public/styles/main.css

@@ -1,20 +1,25 @@
 :root {
     /* colors */
-    --bgColor: rgb(216, 216, 216);
+    --clickable: linear-gradient(90deg, rgba(255,255,255,0.015) 0%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0.015) 100%);
+    --tint: rgba(0, 0, 0, 0.123);
+    --bgColor: rgb(37, 37, 37);
     --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);
+    --bgCanvas: rgb(233, 229, 224);
+    --bgCanvasGradient: linear-gradient(170deg, rgb(233, 229, 224) 0%, rgb(51, 47, 41) 100%);
+    --bgColorTransparent: rgba(37, 37, 37, 0.76);
+    --mediumBgColorGradient: linear-gradient(170deg, rgba(37, 37, 37,1) 0%, rgba(27,27,27,1) 100%);
+    --darkBgColor: rgb(27, 27, 27);
     --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);
+    --veryDarkBgColorTransparent: rgba(15, 15, 15, 0.404);
+    --veryDarkBgColor: rgb(15, 15, 15);
     --lightBgColor: rgb(57, 57, 57);
     --selectionColor: rgb(58, 58, 58);
     --selectedTextColor: rgb(248, 192, 100);
-    --hoverColor: rgb(97, 97, 97);
+    --hoverColor: rgb(49, 49, 49);
     --hoverTextColor: rgb(216, 171, 112);
     --shadowColor: rgba(7, 7, 7, 0.616);
-    --textColor: rgb(15, 15, 15);
-    --textColorBright: rgb(110, 63, 0);
+    --textColor: rgb(185, 135, 69);
+    --textColorBright: rgb(221, 181, 130);
     --woodColor: rgb(133, 96, 62);
     --darkWoodColor: rgb(70, 50, 32);
     --ceilingBG: rgba(202, 202, 202, 0.034);
@@ -26,23 +31,25 @@
     --thickBorder: 5px solid var(--textColor);
     --brightBorder: 1px solid var(--textColorBright);
     --darkBorder: 2px solid var(--veryDarkBgColorTransparent);
-    --borderRadius: 5px;
+    --borderRadius: 3px;
     /* font */
-    --h1Size: 100px;
-    --h2Size: 60px;
-    --h3Size: 40px;
-    --h4Size: 30px;
-    --h5Size: 25px;
-    --h6Size: 20px;
-    --pSize: 20px;
-    --tinyText: 17px;
-    --inputHeight: 50px;
+    --h1Size: 32px;
+    --h2Size: 26px;
+    --h3Size: 22px;
+    --h4Size: 20px;
+    --h5Size: 18px;
+    --pSize: 16px;
+    --tinyText: 14px;
+    --inputHeight: 42px;
     /* boxes */
     --padding: 5px;
+    --mediumPadding: 10px;
     --thickPadding: 20px;
     --margin: 5px;
     --thickMargin: 20px;
-    --mainWidth: 1280px;
+    --tabMargin: 50px;
+    --mainWidth: 95vw;
+    --maxMainWidth: 500px;
     --fillFromMargin: calc(100% - (2 * var(--margin)));
     --fillFromThickMargin: calc(100% - (2 * var(--thickMargin)));
     --fillHalfFromMargin: calc(50% - (2 * var(--margin)));
@@ -51,13 +58,14 @@
     --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;
+    --boxShadow: 5px 0px 5px 1px var(--shadowColor);
+    --goHeight: 100px;
+    --returnHeight: 10vh;
 }
 
 ::-webkit-scrollbar {
     width: 10px;
+    height: 10px;
 }
 
 ::-webkit-scrollbar-track {
@@ -77,25 +85,35 @@
     color: var(--textColor);
     font-size: var(--pSize);
     margin: 0;
-    padding: 0;
     font-family: 'Roboto', sans-serif;
     font-weight: lighter;
-    border-radius: var(--borderRadius);
+}
+
+.alt * {
+    color: var(--bgColor);
+}
+
+.alt {
+    color: var(--bgColor);
 }
 
 .invisible {
     display: none !important;
 }
 
+.unselectable {
+    user-select: none !important;
+}
+
 .camo {
     transition: all .15s;
     opacity: 0;
 }
 
 body {
-    background: var(--darkBgColor);
-    background: var(--darkBgColorGradient);
-    min-height: 100vh;
+    background: var(--bgCanvas);
+    background: var(--bgCanvasGradient);
+    height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -105,41 +123,87 @@ body {
 }
 
 main {
+    position: absolute;
     width: var(--mainWidth);
+    max-width: var(--maxMainWidth);
     min-height: 500px;
+    max-height: calc(100vh - (2 * var(--thickMargin)) - 40px);
     box-shadow: var(--boxShadow);
-    padding: var(--thickPadding);
-    border-radius: 5px 5px 0px 0px;
-    margin-top: var(--thickMargin);
+    padding: 0;
+    border-radius: 5px;
+    top: 50px;
+    left: 2.5vw;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-evenly;
-    align-content: center;
+    align-content: flex-start;
     align-items: flex-end;
     background-color: var(--bgColor);
+    overflow: auto;
+    overflow-x: hidden;
+    z-index: 1;
+}
+
+main.full-view {
+    flex-direction: column;
+    overflow: auto;
+    overflow-y: hidden;
+    max-width: initial;
+    width: 95vw;
+    gap: 20px;
+    align-items: center;
+}
+
+main.full-view>* {
+    max-width: var(--maxMainWidth);
 }
 
 footer {
+    position: absolute;
     display: flex;
     justify-content: center;
     align-content: center;
-    align-items: flex-start;
-    min-height: 25px;
+    align-items: center;
+    height: 40px;
     width: var(--mainWidth);
+    max-width: var(--maxMainWidth);
     background-color: var(--veryDarkBgColor);
     border-radius: 0px 0px 5px 5px;
     box-shadow: var(--boxShadow);
-    padding: var(--padding);
+    padding: 0;
     border: none;
-    margin-bottom: 100px;
+    top: 0;
+    left: 2.5vw;
+}
+
+footer .view-toggle {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 40px;
+    height: 40px;
+    background: var(--bgColor);
+}
+
+footer button {
+    margin: 0;
+    height: 100%;
+    border-radius: 5px 0 5px 5px;
+    border: none;
+    border-left: var(--standardBorder);
+}
+
+footer button:hover {
+    border: none;
+    border-left: 1px solid var(--hoverTextColor);
 }
 
 footer a {
     text-decoration: none;
     height: 100%;
     margin: 0;
-    padding: var(--padding);
-    width: 50%;
+    padding: 0;
+    background: none;
 }
 
 section {
@@ -154,7 +218,6 @@ section {
     justify-content: space-around;
     align-content: flex-end;
     min-height: 30px;
-    gap: 10px 10px;
     position: relative;
 }
 
@@ -162,6 +225,8 @@ article {
     width: 100%;
     position: relative;
     border: var(--standardBorder);
+    display: flex;
+    flex-wrap: wrap;
 }
 
 .code {
@@ -177,9 +242,8 @@ article {
 }
 
 h1, h2, h3, h4, h5, h6 {
-    width: var(--fillFromMargin);
+    width: 100%;
     text-align: center;
-    text-shadow: 1px 1px var(--shadowColor);
 }
 
 h1 {
@@ -205,15 +269,16 @@ h5 {
 }
 
 h6 {
-    font-size: var(--h6Size);
+    font-size: var(--pSize);
 }
 
 hr {
     border: none;
-    border-bottom: var(--standardBorder);
+    border: 20px solid var(--textColor);
     margin-top: var(--thickMargin);
     margin-bottom: var(--thickMargin);
     width: 100%;
+    border-radius: 2px;
 }
 
 p {
@@ -221,6 +286,7 @@ p {
     width: 100%;
     padding: var(--padding);
     font-size: var(--pSize);
+    min-height: calc(var(--pSize) + 2 * var(--padding));
 }
 
 ul {
@@ -228,6 +294,7 @@ ul {
     width: var(--fillFromMargin);
     list-style: none;
     margin: var(--margin);
+    padding: var(--padding);
 }
 
 li {
@@ -238,12 +305,17 @@ li {
 textarea {
     padding: var(--padding);
     width: var(--fillFromMargin);
-    background-color: var(--bgColor);
+    background-color: var(--tint);
     border-radius: 0;
     border: var(--standardBorder);
     margin: var(--margin);
 }
 
+select {
+    background: var(--tint);
+    border: var(--standardBorder);
+}
+
 label {
     padding: var(--padding);
     width: var(--fillFromMargin);
@@ -256,14 +328,22 @@ label {
 input {
     padding: var(--thickPadding);
     width: var(--fillFromMargin);
-    background-color: var(--bgColor);
+    background-color: var(--tint);
     border-radius: 0;
     border: var(--standardBorder);
     height: var(--inputHeight);
     margin: var(--margin);
+    font-size: clamp(var(--littleP), var(--pSize), var(--littleP) * 2);
 }
 
-input[type=submit], button, a {
+input[type=checkbox] {
+    width: 20%;
+    height: 30px;
+    margin: var(--margin);
+    background-color: var(--tint);
+}
+
+input[type=submit] {
     background-color: var(--bgColor);
     padding: var(--thickPadding);
     border-radius: var(--borderRadius);
@@ -272,29 +352,88 @@ input[type=submit], button, a {
     text-decoration: none;
     text-align: center;
     margin: var(--margin);
+    font-size: clamp(var(--littleP), var(--pSize), var(--littleP) * 2);
+}
+
+button {
+    background: var(--clickable);
+    padding: var(--padding);
+    border-radius: var(--borderRadius);
+    border: var(--standardBorder);
+    color: var(--textColor);
+    text-decoration: none;
+    text-align: center;
+    margin: var(--margin);
+    font-size: clamp(var(--littleP), var(--pSize), var(--littleP) * 2);
 }
 
-input[type=submit]:hover, button:hover, a:hover {
+input[type=submit]:hover, button:hover {
     border: var(--brightBorder);
     color: var(--textColorBright);
     cursor: pointer;
+    background: var(--hoverColor);
 }
 
-input[type=checkbox] {
-    width: 30px;
-    height: 30px;
+/* links */
+a {
+    background-color: var(--bgColor);
+    padding: var(--thickPadding);
+    border-radius: var(--borderRadius);
+    border: var(--standardBorder);
+    color: var(--textColor);
+    text-decoration: none;
+    text-align: center;
     margin: var(--margin);
+    font-size: clamp(var(--littleP), var(--pSize), var(--littleP) * 2);
+}
+
+a i.space {
+    margin-right: 5px;
+}
+
+a:hover {
+    border: var(--brightBorder);
+    color: var(--textColorBright);
+    cursor: pointer;
+}
+
+a:hover * {
+    color: var(--textColorBright);
+}
+
+a.alt {
+    border-bottom: 1px solid var(--bgColor) !important;
 }
 
+a.alt:hover {
+    border-bottom: 1px solid var(--textColorBright) !important;
+}
+
+a.subtle {
+    padding: 1px;
+    background: none;
+    border: none;
+    border-bottom: var(--standardBorder);
+    border-radius: 0;
+}
+
+a.subtle:hover {
+    border: none;
+    border-bottom: 1px solid var(--textColorBright);
+    border-radius: 0;
+}
+/*  */
+
 .sign {
-    width: 85%;
-    height: 400px;
+    width: var(--fillFromMargin);
+    min-height: 10vw;
     padding: var(--padding);
     border-radius: var(--borderRadius);
     border: var(--thickBorder);
     margin: var(--margin);
     background: url("/img/signs/wooden-board.jpg");
     background-size: cover;
+    background-position: center;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -303,7 +442,8 @@ input[type=checkbox] {
 }
 
 .sign * {
-    background: var(--bgColor);
+    color: var(--darkWoodColor);
+    background: none;
 }
 
 .form {
@@ -316,7 +456,6 @@ input[type=checkbox] {
 
 .info {
     color: var(--selectedTextColor);
-    text-shadow: 2px 2px var(--shadowColor);
     text-align: center;
 }
 
@@ -363,8 +502,9 @@ input[type=checkbox] {
     display: flex;
     justify-content: flex-end;
     align-items: flex-end;
-    padding: var(--thickPadding);
+    padding: var(--padding);
     margin: var(--margin);
+    overflow: hidden;
 }
 
 .do {
@@ -377,49 +517,52 @@ input[type=checkbox] {
     margin: var(--margin);
 }
 
-.search {
+ul.selector>li {
     width: var(--fillFromMargin);
-    border: var(--standardBorder);
-    height: 300px;
-    background: rgb(25, 25, 25);
-}
-
-.search input {
-    width: 100%;
-    margin: 0;
-    border-radius: 0;
+    overflow: hidden;
+    font-size: clamp(var(--littleP), var(--pSize), var(--littleP) * 2);
     border: none;
     border-bottom: var(--standardBorder);
+    min-height: 40px;
+    background: var(--clickable);
+    border-radius: 5px;
+    margin: var(--margin);
+    display: flex;
+    align-items: center;
 }
 
-.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 {
+ul.selector>li:hover {
     cursor: pointer;
     background: var(--hoverColor);
     color: var(--hoverTextColor);
 }
 
-ul.selector li.selected {
+ul.selector>li.selected {
     background: var(--selectionColor);
     color: var(--selectedTextColor);
 }
 
-ul.selector p {
+ul.selector>p {
     color: rgb(78, 78, 78);
 }
 
+ul.selector>li.disabled {
+    background: var(--bgColor);
+    color: var(--textColor);
+    border: var(--standardBorder);
+    cursor: default;
+}
+
+.click-me {
+    background: var(--selectionColor);
+    color: var(--selectedTextColor);
+    cursor: pointer;
+}
+
+.click-me:hover {
+    background: var(--hoverColor);
+}
+
 .painting {
     border: 3px solid var(--darkWoodColor);
     background: var(--hoverColor);
@@ -478,35 +621,46 @@ iframe {
 
 .dialogue {
     width: var(--fillFromMargin);
-    height: 200px;
-    padding: var(--thickPadding);
     border-radius: var(--borderRadius);
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
     align-items: flex-end;
+    flex-wrap: wrap;
     margin: var(--margin);
+    border: var(--standardBorder);
+    height: 300px;
+}
+
+.dialogue>h4 {
+    height: 25%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
 }
 
 .dialogue .portrait {
-    width: 30%;
+    width: 25%;
     height: 100%;
-    border: var(--standardBorder);
-    border-radius: var(--borderRadius);
+    border-radius: 2px;
     object-fit: cover;
-    image-rendering: pixelated;
 }
 
 .dialogue .heart {
-    width: 3px;
+    width: 5px;
     height: 100%;
     background-color: var(--textColor);
     border-radius: var(--borderRadius);
+    margin: 0 5px;
+}
+
+.dialogue>h4 p {
+    width: auto;
 }
 
 .dialogue .content {
-    width: 65%;
-    height: 100%;
-    border: var(--standardBorder);
+    width: 100%;
+    height: 75%;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-around;
@@ -559,6 +713,7 @@ iframe {
     position: absolute;
     left: 50%;
     bottom: 50%;
+    z-index: 1;
 }
 
 .conchu {
@@ -569,25 +724,14 @@ iframe {
 .basic {
     border: var(--standardBorder);
     background: var(--darkBgColor);
-    width: 25vh;
-    height: 25vh;
+    width: var(--fillFromMargin);
+    min-height: 10vh;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: var(--padding);
-    text-align: center;
-}
-
-.browser {
-    width: 100%;
-}
-
-.toy {
-    width: 45%;
-    max-width: 200px;
-    max-height: 200px;
-    overflow: hidden;
-    border: var(--standardBorder);
+    flex-wrap: wrap;
+    align-content: center;
 }
 
 .folder {
@@ -598,47 +742,48 @@ iframe {
     margin: 0;
 }
 
-@media only screen and (max-width: 1300px) {
-    main {
-        width: 100%;
+.ground {
+    width: 100%;
+    min-height: 10px;
+    position: relative;
+    background: rgb(56, 31, 17);
+    margin-top: 50px;
+}
+
+.tabs {
+    position: absolute;
+    bottom: calc(-1 * var(--tabMargin));
+    width: 100%;
+    height: var(--tabMargin);
+    left: 0;
+}
+
+@media screen and (max-width: 1000px) {
+    .float-elements {
+        display: none;
+    }
+
+    .lock-elements {
+        display: none;
     }
 
-    footer {
-        width: 100%;
+    .float-board {
+        display: none;
     }
 }
 
-@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;
+@media screen and (max-width: 570px) {
+    footer .view-toggle {
+        display: none;
+    }
+
+    main.full-view {
+        flex-direction: row;
+        overflow: auto;
+        overflow-x: hidden;
+        max-width: var(--maxMainWidth);
+        width: var(--mainWidth);
+        gap: initial;
+        align-items: flex-end;
     }
 }