notherbase-fs 3.2.21 → 3.3.0

package/public/styles/main.css

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