zk_exe/rpgzrox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

back_end e front_end, registro, dados etc. '-'

Browse Source
This commit is contained in:
zk_exe
2025-06-18 00:25:32 -03:00
parent fc2c573111
commit 9a818eee5f
13 changed files with 315 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
rpg/css/base.css
View File

@@ -60,3 +60,7 @@ body {
#loginBtn:hover {
background-color: var(--lines);
}
a span {
overflow: hidden;
}

200
rpg/css/style.css
View File

@@ -1,21 +1,28 @@
* {
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: 15%;
height: 30%;
height: auto;
max-height: 30dvh;
border: solid 3px var(--backredcolor);
border-radius: 100dvh;
object-fit: cover;
}
ul {
padding: 0 0 0 1vw;
width: 100%;
padding-left: 1vw;
width: 80%;
li {
display: flex;
@@ -23,9 +30,10 @@
padding: 1dvh;
font-size: 1.5em;
border-bottom: dotted 2px var(--lines);
flex-wrap: wrap;
p {
margin: 0 0 0 1dvh;
margin-left: 1dvh;
}
a {
@@ -38,7 +46,6 @@
border-radius: 1dvh;
cursor: pointer;
transition: 0.3s;
overflow: hidden;
}
a:hover {
@@ -50,27 +57,34 @@
#box_1 {
display: flex;
flex-wrap: wrap;
border-bottom: solid 0.5dvh var(--backredcolor);
h1 {
min-height: 4dvh;
width: 100%;
background: var(--btncolor);
font-family: "Share Tech Mono", monospace;
padding: 0 0 0 1dvh;
padding-left: 1dvh;
}
}
#status,
#dados,
#inv,
#powers {
min-height: 40dvh;
max-height: 40dvh;
overflow: hidden;
background-color: var(--subbgcolor);
}
#status {
width: 25%;
min-height: 40dvh;
max-height: 40dvh;
border-right: solid 1px var(--lines);
overflow: hidden;
background-color: var(--subbgcolor);
ul {
padding: 3vw 0 3vw 0;
max-height: 100%;
padding: 3vw 0;
display: flex;
flex-wrap: wrap;
align-items: center;
@@ -82,13 +96,13 @@
border-radius: 1dvw;
label {
padding: 0 0 0 1dvh;
padding-left: 1dvh;
display: flex;
align-items: center;
justify-content: center;
p {
margin: 0 0.2dvh 0 0.2dvh;
margin: 0 0.2dvh;
}
span {
@@ -121,17 +135,14 @@
#dados {
width: 30%;
min-height: 40dvh;
max-height: 40dvh;
display: flex;
flex-direction: column;
border-right: solid 1px var(--lines);
overflow: hidden;
#list {
width: 100%;
height: 50%;
overflow: hidden;
overflow-y: scroll;
background-color: var(--subbgcolor);
min-height: 20dvh;
overflow-y: auto;
display: flex;
flex-wrap: wrap;
align-items: center;
@@ -140,57 +151,55 @@
li {
transition: 0.3s;
border-radius: 1dvh;
margin: 0 0 0 1dvh;
border-radius: 1vh;
margin: 1vh;
background: var(--btncolor);
width: 45%;
cursor: pointer;
a {
padding: 1dvh;
padding: 1vh;
display: flex;
font-size: 1.5em;
align-items: center;
span {
margin: 0 1dvw 0 0;
margin-right: 1vw;
}
}
}
li:hover {
background-color: var(--lines);
&:hover {
background-color: var(--lines);
}
}
}
#log {
width: 100%;
height: calc(40dvh - 12dvw);
overflow-y: scroll;
flex-grow: 1;
overflow-y: auto;
li {
cursor: pointer;
font-size: 1.5em;
padding: 0.5dvh 0 0.5dvh 2dvh;
padding: 0.5vh 2vh;
&:hover {
background-color: var(--lines);
}
}
}
}
#inv {
position: relative;
width: 30%;
overflow: hidden;
min-height: 40dvh;
max-height: 40dvh;
position: relative;
border-right: solid 1px var(--lines);
ul {
overflow: hidden;
overflow-y: scroll;
width: 100%;
max-height: 80%;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
max-height: 80%;
li {
width: calc(100% / 4 - 2px);
@@ -202,7 +211,7 @@
justify-content: center;
position: relative;
cursor: pointer;
cursor: pointer;
a {
position: absolute;
right: 1dvh;
@@ -210,18 +219,22 @@
background-color: var(--backredcolor);
cursor: pointer;
transition: 0.3s;
span {
overflow: hidden;
}
}
&:hover {
background-color: var(--subbgcolor);
}
a:hover {
background-color: var(--backdarkredcolor);
}
}
li:hover {
background-color: var(--subbgcolor);
background-color: var(--lines);
}
}
@@ -235,33 +248,26 @@
bottom: 0;
background-color: var(--subbgcolor);
select {
select,
input,
#btn {
background-color: var(--btncolor);
padding: 5px;
border: none;
margin: 0 0.5dvh;
}
#btn {
transition: 0.3s;
background-color: var(--btncolor);
display: flex;
justify-content: center;
align-items: center;
margin: 0 1dvh 0 1dvh;
padding: 5px;
border-radius: 1dvh;
}
#btn:hover {
background-color: var(--lines);
&:hover {
background-color: var(--lines);
}
}
input {
margin: 0 0.5dvh 0 0.5dvh;
background-color: var(--lines);
color: var(--fontcolor);
border: none;
padding: 5px;
}
input[type="number"] {
@@ -270,11 +276,11 @@
label {
display: flex;
justify-content: center;
align-items: center;
a {
border-radius: 1dvh 0 1dvh 0;
span {
overflow: hidden;
font-size: 1em;
@@ -285,20 +291,13 @@
}
#powers {
width: calc(100% - (30% + 25% + 30% - 3px));
overflow: hidden;
min-height: 40dvh;
max-height: 40dvh;
background-color: var(--subbgcolor);
width: calc(100% - (30% + 25% + 30%));
ul {
overflow: hidden;
overflow-y: scroll;
width: 100%;
height: 100%;
overflow-y: scroll;
li {
width: 100%;
padding: 1dvh;
border-top: dotted 2px var(--lines);
cursor: pointer;
@@ -307,10 +306,10 @@
a {
font-size: 1.5em;
}
}
li:hover {
background-color: var(--btncolor);
&:hover {
background-color: var(--btncolor);
}
}
}
}
@@ -318,11 +317,9 @@
#FloatInput {
position: absolute;
width: 10%;
display: flex;
z-index: 100px;
z-index: 100;
input[type="text"] {
position: relative;
width: 100%;
border: solid 1px var(--backredcolor);
border-radius: 10dvh;
@@ -333,20 +330,23 @@
}
}
/* Responsividade */
@media only screen and (max-width: 1080px) {
#playerDATA {
height: 40dvh;
flex-direction: column;
align-items: center;
height: auto;
#hero {
width: 40vh;
height: 25vh;
width: 40vw;
height: 40vw;
}
ul {
li {
font-size: 1em;
}
ul li {
font-size: 1em;
}
}
#box_1 {
flex-direction: column;
#dados,
@@ -354,21 +354,43 @@
#inv,
#powers {
width: 100%;
min-height: 100dvw;
#list {
height: 30dvh;
min-height: 43vh;
hgroup input[type="text"] {
width: 20dvw;
}
hgroup input[type="number"] {
width: 8dvw;
}
}
#status li {
border-top-right-radius: 2dvh;
border-bottom-right-radius: 2dvh;
label {
a {
display: flex;
align-content: center;
align-items: center;
}
}
}
#dados #list {
height: 30dvh;
}
}
#inv {
ul {
max-height: 43vh;
li {
height: calc(100dvh / 6 - 2px);
}
#inv ul {
max-height: 43vh;
li {
min-width: calc(100% / 4);
max-width: calc(100% / 4);
min-height: calc(100% / 4);
mix-height: calc(100% / 4);
}
}
#FloatInput {
width: 30%;
transform: translateY(50px) translateX(-50px);