beta da beta da beta 0.0.01 '-'
This commit is contained in:
62
rpg/css/base.css
Normal file
62
rpg/css/base.css
Normal file
@@ -0,0 +1,62 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0");
|
||||
|
||||
/* ==================== fonts ==================== */
|
||||
|
||||
@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&family=Share+Tech+Mono&display=swap");
|
||||
/* font-family: "Share Tech Mono", monospace; */
|
||||
|
||||
/* =============================================== */
|
||||
:root {
|
||||
--bgcolor: #453831;
|
||||
--subbgcolor: #2b2420;
|
||||
--fontcolor: #dddec6;
|
||||
--lines: #666666;
|
||||
--btncolor: #000000;
|
||||
--backredcolor: #bb0000;
|
||||
--backdarkredcolor: #540000;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
list-style: none;
|
||||
scroll-behavior: smooth;
|
||||
color: var(--fontcolor);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: var(--fontcolor);
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
min-height: 100dvh;
|
||||
background: var(--bgcolor);
|
||||
}
|
||||
|
||||
#loginInput {
|
||||
background-color: var(--btncolor);
|
||||
width: 100%;
|
||||
padding: 1dvh;
|
||||
border: none;
|
||||
border-bottom: solid 5px var(--backredcolor);
|
||||
}
|
||||
#loginBtn {
|
||||
transition: 0.3s;
|
||||
border: none;
|
||||
background-color: var(--btncolor);
|
||||
width: 50%;
|
||||
padding: 1dvh;
|
||||
margin: 0dvh 0 1dvh 0;
|
||||
}
|
||||
#loginBtn:hover {
|
||||
background-color: var(--lines);
|
||||
}
|
||||
33
rpg/css/login.css
Normal file
33
rpg/css/login.css
Normal file
@@ -0,0 +1,33 @@
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#login_form {
|
||||
overflow: hidden;
|
||||
width: 24%;
|
||||
height: 60dvh;
|
||||
|
||||
h1 {
|
||||
background: var(--btncolor);
|
||||
padding: 1dvh 0 1dvh 2dvh;
|
||||
}
|
||||
|
||||
ul {
|
||||
position: relative;
|
||||
background-color: var(--subbgcolor);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 8dvw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
li {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 90%;
|
||||
margin-top: 1vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
42
rpg/css/register.css
Normal file
42
rpg/css/register.css
Normal file
@@ -0,0 +1,42 @@
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#register_form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 30%;
|
||||
|
||||
h1 {
|
||||
background: var(--btncolor);
|
||||
padding: 1dvh 0 1dvh 2dvh;
|
||||
}
|
||||
|
||||
ul {
|
||||
background-color: var(--subbgcolor);
|
||||
li {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 1dvw;
|
||||
img {
|
||||
object-fit: cover;
|
||||
width: 25dvh;
|
||||
height: 25dvh;
|
||||
border-radius: 100%;
|
||||
}
|
||||
textarea {
|
||||
resize: none;
|
||||
width: 100%;
|
||||
height: 15dvw;
|
||||
background-color: var(--btncolor);
|
||||
|
||||
padding: 1dvh;
|
||||
border: none;
|
||||
border: solid 5px var(--backredcolor);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
376
rpg/css/style.css
Normal file
376
rpg/css/style.css
Normal file
@@ -0,0 +1,376 @@
|
||||
#playerDATA {
|
||||
background-color: var(--subbgcolor);
|
||||
padding: 1dvw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
#hero {
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border: solid 3px var(--backredcolor);
|
||||
border-radius: 100dvh;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0 0 0 1vw;
|
||||
width: 100%;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1dvh;
|
||||
font-size: 1.5em;
|
||||
border-bottom: dotted 2px var(--lines);
|
||||
|
||||
p {
|
||||
margin: 0 0 0 1dvh;
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 0.5dvh;
|
||||
margin: 5px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: var(--btncolor);
|
||||
border-radius: 1dvh;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background: var(--lines);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#box_1 {
|
||||
display: flex;
|
||||
border-bottom: solid 0.5dvh var(--backredcolor);
|
||||
|
||||
h1 {
|
||||
width: 100%;
|
||||
background: var(--btncolor);
|
||||
font-family: "Share Tech Mono", monospace;
|
||||
padding: 0 0 0 1dvh;
|
||||
}
|
||||
}
|
||||
|
||||
#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%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
li {
|
||||
margin: 2dvh;
|
||||
background-color: var(--bgcolor);
|
||||
border-radius: 1dvw;
|
||||
|
||||
label {
|
||||
padding: 0 0 0 1dvh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
p {
|
||||
margin: 0 0.2dvh 0 0.2dvh;
|
||||
}
|
||||
|
||||
span {
|
||||
padding: 1dvh;
|
||||
background: var(--btncolor);
|
||||
font-size: 1em;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
span:hover {
|
||||
background-color: var(--lines);
|
||||
}
|
||||
|
||||
.btn-left {
|
||||
border-top-left-radius: 2dvh;
|
||||
border-bottom-left-radius: 2dvh;
|
||||
border-right: solid var(--lines) 1px;
|
||||
}
|
||||
|
||||
.btn-right {
|
||||
border-top-right-radius: 2dvh;
|
||||
border-bottom-right-radius: 2dvh;
|
||||
border-left: solid var(--lines) 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#dados {
|
||||
width: 30%;
|
||||
min-height: 40dvh;
|
||||
max-height: 40dvh;
|
||||
border-right: solid 1px var(--lines);
|
||||
overflow: hidden;
|
||||
|
||||
#list {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
background-color: var(--subbgcolor);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-bottom: dotted 2px var(--lines);
|
||||
|
||||
li {
|
||||
transition: 0.3s;
|
||||
border-radius: 1dvh;
|
||||
margin: 0 0 0 1dvh;
|
||||
background: var(--btncolor);
|
||||
width: 45%;
|
||||
cursor: pointer;
|
||||
|
||||
a {
|
||||
padding: 1dvh;
|
||||
display: flex;
|
||||
font-size: 1.5em;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
margin: 0 1dvw 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li:hover {
|
||||
background-color: var(--lines);
|
||||
}
|
||||
}
|
||||
|
||||
#log {
|
||||
width: 100%;
|
||||
height: calc(40dvh - 12dvw);
|
||||
overflow-y: scroll;
|
||||
|
||||
li {
|
||||
font-size: 1.5em;
|
||||
padding: 0.5dvh 0 0.5dvh 2dvh;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#inv {
|
||||
position: relative;
|
||||
width: 30%;
|
||||
overflow: hidden;
|
||||
min-height: 40dvh;
|
||||
max-height: 40dvh;
|
||||
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;
|
||||
|
||||
li {
|
||||
width: calc(100% / 4 - 2px);
|
||||
height: calc(100dvh / 9 - 2px);
|
||||
border: solid 1px var(--lines);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
a {
|
||||
position: absolute;
|
||||
right: 1dvh;
|
||||
top: 1dvh;
|
||||
background-color: var(--backredcolor);
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
span {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background-color: var(--backdarkredcolor);
|
||||
}
|
||||
}
|
||||
|
||||
li:hover {
|
||||
background-color: var(--subbgcolor);
|
||||
}
|
||||
}
|
||||
|
||||
hgroup {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0.5dvh;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
background-color: var(--subbgcolor);
|
||||
|
||||
select {
|
||||
background-color: var(--btncolor);
|
||||
padding: 5px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#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);
|
||||
}
|
||||
|
||||
input {
|
||||
margin: 0 0.5dvh 0 0.5dvh;
|
||||
background-color: var(--lines);
|
||||
color: var(--fontcolor);
|
||||
border: none;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
width: 3dvw;
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
a {
|
||||
border-radius: 1dvh 0 1dvh 0;
|
||||
span {
|
||||
overflow: hidden;
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#powers {
|
||||
width: calc(100% - (30% + 25% + 30% - 3px));
|
||||
overflow: hidden;
|
||||
min-height: 40dvh;
|
||||
max-height: 40dvh;
|
||||
background-color: var(--subbgcolor);
|
||||
|
||||
ul {
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
padding: 1dvh;
|
||||
border-top: dotted 2px var(--lines);
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
|
||||
a {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
li:hover {
|
||||
background-color: var(--btncolor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#FloatInput {
|
||||
position: absolute;
|
||||
width: 10%;
|
||||
display: flex;
|
||||
z-index: 100px;
|
||||
|
||||
input[type="text"] {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border: solid 1px var(--backredcolor);
|
||||
border-radius: 10dvh;
|
||||
background-color: var(--btncolor);
|
||||
padding: 0.5dvh;
|
||||
text-align: center;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1080px) {
|
||||
#playerDATA {
|
||||
height: 40dvh;
|
||||
#hero {
|
||||
width: 40vh;
|
||||
height: 25vh;
|
||||
}
|
||||
|
||||
ul {
|
||||
li {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
#box_1 {
|
||||
flex-direction: column;
|
||||
#dados,
|
||||
#status,
|
||||
#inv,
|
||||
#powers {
|
||||
width: 100%;
|
||||
min-height: 100dvw;
|
||||
#list {
|
||||
height: 30dvh;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#inv {
|
||||
ul {
|
||||
max-height: 43vh;
|
||||
li {
|
||||
height: calc(100dvh / 6 - 2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
#FloatInput {
|
||||
width: 30%;
|
||||
transform: translateY(50px) translateX(-50px);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user