reta final, so falta a parte do obs studio agora

2025-06-25 10:52:33 -03:00
parent e6e9bb9f57
commit b522e3bf38
6 changed files with 401 additions and 0 deletions
--- a/rpg/css/styleProfile.css
+++ b/rpg/css/styleProfile.css
@@ -0,0 +1,168 @@
+* {
+    box-sizing: border-box;
+}
+
+#playerDATA {
+    background-color: var(--subbgcolor);
+    padding: 1dvw;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 1vw;
+
+    #hero {
+        width: 25dvh;
+        height: 25dvh;
+        border: solid 3px var(--backredcolor);
+        border-radius: 100dvh;
+        object-fit: cover;
+    }
+
+    ul {
+        padding-left: 1vw;
+        width: 80%;
+
+        li {
+            display: flex;
+            align-items: center;
+            padding: 1dvh;
+            font-size: 1.5em;
+            border-bottom: dotted 2px var(--lines);
+            flex-wrap: wrap;
+
+            p {
+                margin-left: 1dvh;
+            }
+        }
+    }
+}
+
+#box_1 {
+    display: flex;
+    h1 {
+        min-height: 4dvh;
+        width: 100%;
+        background: var(--btncolor);
+        font-family: "Share Tech Mono", monospace;
+        padding-left: 1dvh;
+    }
+    #status {
+        width: 50%;
+        border-right: solid 1px var(--lines);
+
+        overflow: hidden;
+        ul {
+            height: 90%;
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            justify-content: center;
+            li {
+                margin: 2dvh;
+                background-color: var(--bgcolor);
+                border-radius: 1dvw;
+
+                label {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    padding: 1vw 0 1vw 1vw;
+                    p {
+                        padding: 0 1vw 0 0.5vw;
+                    }
+                }
+            }
+        }
+        background-color: var(--subbgcolor);
+    }
+
+    #text_lore {
+        width: 50%;
+        ul {
+            position: relative;
+            width: 100%;
+            p {
+                font-family: arial;
+                font-size: 1.5em;
+                padding: 1vw;
+                white-space: pre-wrap;
+                width: 100%;
+                min-height: 45dvw;
+            }
+        }
+    }
+}
+
+#statusPlayer {
+    text-align: center;
+    width: 10%;
+    position: fixed;
+    z-index: 1000;
+    top: 3dvh;
+    right: 3dvh;
+    padding: 0.5dvw;
+    border-radius: 10vw;
+    background-color: red;
+}
+
+@media only screen and (max-width: 1080px) {
+    #playerDATA {
+        flex-direction: column;
+        align-items: center;
+
+        #hero {
+            width: 40vw;
+            height: auto;
+            aspect-ratio: 1 / 1;
+        }
+
+        ul li {
+            font-size: clamp(1em, 2vw, 1.2em);
+        }
+    }
+
+    #box_1 {
+        flex-direction: column;
+
+        #status {
+            width: 100%;
+            min-height: 60vh;
+            ul {
+                justify-content: center;
+                align-items: center;
+            }
+        }
+        #text_lore {
+            width: 100%;
+            min-height: 60vh;
+        }
+    }
+    #statusPlayer {
+        width: 35%;
+        padding: 2dvw;
+    }
+}
+
+@media screen and (max-width: 1080px) and (orientation: landscape) {
+    #box_1 {
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+
+    #status {
+        width: 48%;
+        min-height: 50vh;
+        max-height: none;
+    }
+
+    #playerDATA #hero {
+        width: 40vh;
+        height: 40vh;
+    }
+
+    #statusPlayer {
+        width: 25%;
+        padding: 1dvw;
+    }
+}