state: 11.02.2025

This commit is contained in:
Dominik 2025-02-11 16:22:48 +01:00
commit 1d79e03c1a
11 changed files with 481 additions and 0 deletions

38
PlantX/styles/buttons.css Normal file
View file

@ -0,0 +1,38 @@
button {
border-radius: 8px;
padding: 12px;
font-family: Oxanium;
font-weight: 500;
font-size: 16px;
line-height: 16px;
letter-spacing: calc(0.05 * 16px);
}
button.primary {
background-color: var(--primary-50);
border: 1px var(--primary-40) solid;
color: #000126;
}
button.primary:hover {
background-color: var(--primary-30);
border-color: var(--primary-20);
}
button.primary:active {
background-color: var(--primary-40);
border-color: var(--primary-20);
}
button.secondary {
background-color: transparent;
border: 1px var(--primary-50) solid;
color: var(--fg);
}
button.secondary:hover {
background-color: var(--primary-40);
border-color: var(--primary-20);
}
button.secondary:active {
background-color: transparent;
border-color: var(--primary-100);
}

30
PlantX/styles/colors.css Normal file
View file

@ -0,0 +1,30 @@
:root {
--bg: #14172f;
--fg: #f2f2f2;
--fg-inverted: #000126;
--primary-100: #fff;
--primary-95: #effff2;
--primary-90: #deffe5;
--primary-80: #beffcb;
--primary-70: #9dffb0;
--primary-60: #7dff96;
--primary-50: #5cff7c;
--primary-40: #4acc64;
--primary-30: #37994a;
--primary-20: #256632;
--primary-10: #123319;
--primary-05: #09190c;
--primary-00: #000;
--mono-100: #fff;
--mono-95: #f2f2f2;
--mono-90: #e6e6e6;
--mono-80: #ccc;
--mono-60: #b3b3b3;
--mono-50: #808080;
--mono-40: #666;
--mono-30: #4d4d4d;
--mono-20: #333;
--mono-10: #1a1a1a;
--mono-05: #0d0d0d;
--mono-00: #000;
}

60
PlantX/styles/fonts.css Normal file
View file

@ -0,0 +1,60 @@
/* Font classes */
.font-title-m,
.font-title-m * {
font-family: Orbitron;
font-weight: 400;
font-size: 64px;
line-height: 83.2px;
letter-spacing: calc(0.05 * 64px);
}
@media (max-width: 767px) {
.font-title-m,
.font-title-m * {
font-family: Orbitron;
font-weight: 400;
font-size: 40px;
line-height: 48px;
letter-spacing: calc(0.05 * 40px);
}
}
.font-body-m,
.font-body-m * {
font-family: Oxanium;
font-weight: 400;
font-size: 24px;
line-height: 26.4px;
letter-spacing: calc(0.05 * 24px);
}
@media (max-width: 767px) {
.font-body-m,
.font-body-m * {
font-family: Oxanium;
font-weight: 500;
font-size: 16px;
line-height: 16px;
letter-spacing: calc(0.05 * 16px);
}
}
.font-body-s,
.font-body-s * {
font-family: Oxanium;
font-weight: 500;
font-size: 16px;
line-height: 16px;
letter-spacing: calc(0.05 * 16px);
}
@media (max-width: 767px) {
.font-body-s,
.font-body-s * {
font-family: Oxanium;
font-weight: 500;
font-size: 16px;
line-height: 16px;
letter-spacing: calc(0.05 * 16px);
}
}

View file

@ -0,0 +1,82 @@
.input-group {
display: flex;
height: 44px;
box-sizing: border-box;
}
@media (max-width: 712px) {
.input-group {
flex-direction: column;
height: auto;
}
}
.input-group label {
background-color: var(--mono-20);
border-top: 2px var(--mono-30) solid;
border-left: 2px var(--mono-30) solid;
border-bottom: 2px var(--mono-30) solid;
border-start-start-radius: 8px;
border-end-start-radius: 8px;
padding-left: 16px;
padding-right: 16px;
min-width: 250px;
box-sizing: border-box;
display: flex;
align-items: center;
font-family: Oxanium;
font-weight: 500;
font-size: 16px;
line-height: 16px;
letter-spacing: calc(0.05 * 16px);
}
@media (max-width: 712px) {
.input-group label {
border-top: 2px var(--mono-30) solid;
border-left: 2px var(--mono-30) solid;
border-right: 2px var(--mono-30) solid;
border-bottom: none;
border-start-start-radius: 8px;
border-start-end-radius: 8px;
border-end-start-radius: 0;
border-end-end-radius: 0;
padding: 8px;
width: 100%;
}
}
.input-group input {
background-color: transparent;
border: 2px var(--mono-30) solid;
padding: 4px 16px;
border-start-end-radius: 8px;
border-end-end-radius: 8px;
width: 300px;
box-sizing: border-box;
color: var(--fg);
font-family: Oxanium;
font-weight: 500;
font-size: 16px;
line-height: 16px;
letter-spacing: calc(0.05 * 16px);
}
@media (max-width: 712px) {
.input-group input {
border-start-end-radius: 0;
border-start-start-radius: 0;
border-end-end-radius: 8px;
border-end-start-radius: 8px;
padding: 8px;
width: 100%;
}
}
.input-group input:focus {
border-color: var(--primary-40);
outline: none;
}

129
PlantX/styles/reset.css Normal file
View file

@ -0,0 +1,129 @@
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}