From 33d9b5dc8914680cc2f045c30a3305e99c1e914b Mon Sep 17 00:00:00 2001 From: ItsMuri <88394932+ItzMuri@users.noreply.github.com> Date: Fri, 10 Nov 2023 22:26:04 +0100 Subject: [PATCH] Update main.css little css edit --- html/css/main.css | 92 +++++++++++++++++++++++++---------------------- 1 file changed, 49 insertions(+), 43 deletions(-) diff --git a/html/css/main.css b/html/css/main.css index ad1d0183f..4c03bd45c 100644 --- a/html/css/main.css +++ b/html/css/main.css @@ -1,16 +1,11 @@ :root { - --text-color: #000000; - --background-color: #c0c0c0; - --font-size: 0.7vh; + --text-color: #2d2d2d; + --background-color: rgb(0, 104, 145); + --font-size: 0.8vh; --hover-color: #bdbdbd; } body { - width: 100vw; - height: 100vh; - margin: 0; - padding: 0; - overflow: hidden; background: none !important; font-family: "Roboto", sans-serif; } @@ -62,7 +57,7 @@ input[type="number"]::-webkit-outer-spin-button { height: 5px; top: 25.5%; left: 14.2%; - width: 27.8%; + width: 29.8%; position: absolute; transition: width 0.2s; background-color: #2d2d2d; @@ -88,7 +83,7 @@ input[type="number"]::-webkit-outer-spin-button { #other-inv-progressbar { position: absolute; top: 25.5%; - width: 27.8%; + width: 29.8%; right: 14.4%; height: 5px; transition: width 0.2s; @@ -117,7 +112,7 @@ input[type="number"]::-webkit-outer-spin-button { } .ui-progressbar-medium .ui-progressbar-value { - background-color: yellow; + background-color: var(--background-color); } .ui-progressbar-high .ui-progressbar-value { @@ -132,10 +127,11 @@ input[type="number"]::-webkit-outer-spin-button { position: absolute; top: 26%; left: 14.2%; - width: 28%; - height: 47.16%; + width: 30%; + height: 50.16%; float: left; - overflow-y: auto; + overflow-x: hidden; + overflow-y: scroll; } .other-inventory { @@ -146,10 +142,11 @@ input[type="number"]::-webkit-outer-spin-button { position: absolute; top: 26%; right: 14.2%; - width: 28%; - height: 47.16%; + width: 30%; + height: 50.16%; float: left; - overflow-y: auto; + overflow-x: hidden; + overflow-y: scroll; } .item-slot { @@ -160,7 +157,6 @@ input[type="number"]::-webkit-outer-spin-button { width: calc(20% - 1.5px); margin: 0.5px; height: 10vh; - background-color: rgba(0, 0, 0, 0.3); } .item-slot-img { @@ -171,6 +167,8 @@ input[type="number"]::-webkit-outer-spin-button { height: 100%; margin: 0; padding: 0; + background-color: rgba(34, 34, 34, 0.849); + border-radius: 5px; } .item-slot-img img { @@ -180,19 +178,19 @@ input[type="number"]::-webkit-outer-spin-button { .item-slot-key { font-weight: bolder; - color: var(--text-color); + color: white; position: absolute; top: 5px; left: 5px; width: 20px; height: 20px; - background-color: var(--background-color); + background-color: rgb(58, 58, 58); display: flex; align-items: center; justify-content: center; - border-radius: 3px; - box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.2); - background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1)); + border-radius: 90px; + box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.1), 0 2px 2px rgba(255, 255, 255, 0.2); + background-image: linear-gradient(to bottom, rgb(7, 145, 199), rgba(255, 255, 255, 0.466)); } .item-slot-key p { @@ -214,33 +212,37 @@ input[type="number"]::-webkit-outer-spin-button { .item-slot-label { position: absolute; white-space: nowrap; - bottom: 0; - height: 1vh; + bottom: 2px; + height: 1.5vh; + gap: 20px; width: 100%; - background-color: var(--background-color); + background-color: rgb(58, 58, 58); + border-radius: 5px; display: flex; justify-content: center; align-items: center; + border: 1px solid rgb(124, 124, 124); } .item-slot-label p { margin: 0; font-size: var(--font-size); text-transform: uppercase; - color: var(--text-color); + color: rgb(255, 255, 255); font-weight: bolder; } .item-slot-quality { position: absolute; - bottom: 1vh; - width: 100%; + bottom: 1.7vh; + width: 96%; height: 4px; - background-color: #2d2d2d; + background-color: #2d2d2d11; + border-radius: 3px; } .item-slot-quality-bar { - height: 4px; + height: 3px; } .inv-options { @@ -267,8 +269,10 @@ input[type="number"]::-webkit-outer-spin-button { text-align: center; height: 3vh; font-weight: bolder; - color: var(--text-color); + color: white; background-color: var(--background-color); + border-radius: 8px; + border: 2px solid rgb(124, 124, 124); } #item-use p, @@ -284,12 +288,14 @@ input[type="number"]::-webkit-outer-spin-button { position: fixed; top: 67%; left: 50%; - width: 15vw; + width: 11vw; + color: white; transform: translate(-50%, -50%); align-items: center; text-align: center; - background-color: var(--background-color); - border-radius: 5px; + background-color: rgba(61, 61, 61, 0.342); + border-radius: 8px; + border: 1px solid rgb(124, 124, 124); } .weapon-attachments-container { @@ -323,15 +329,15 @@ input[type="number"]::-webkit-outer-spin-button { .weapon-attachments-container-detail-durability { height: 1.5vh; - width: 10vh; - background-color: rgba(0, 0, 0, 0.3); + width: 10vh; + background-color: rgba(34, 34, 34, 0.74); border-radius: 1px; } .weapon-attachments-container-detail-durability-total { height: 100%; width: 50%; - background-color: rgb(39, 174, 96); + background-color: rgb(39, 124, 174); } .weapon-attachments-container-image { @@ -364,17 +370,17 @@ input[type="number"]::-webkit-outer-spin-button { top: 80%; left: 50%; transform: translate(-50%, -50%); - background-color: var(--background-color); + background-color: rgba(59, 58, 58, 0.74); } .weapon-attachments-remove > i { - color: var(--text-color); + color: whitesmoke; font-size: 2vh; padding: 1vh; } .weapon-attachments-remove:hover { - background-color: var(--hover-color); + background-color: rgba(66, 66, 66, 0.74); } .weapon-attachments-back { @@ -384,10 +390,10 @@ input[type="number"]::-webkit-outer-spin-button { width: 10vh; height: 6vh; margin: 5vh; - color: var(--text-color); + color: white; text-align: center; line-height: 6vh; - background-color: var(--background-color); + background-color: rgba(34, 34, 34, 0.74); transition: 0.05s linear; }