Univerter/static/style.css

150 lines
2.3 KiB
CSS
Raw Normal View History

2024-03-20 18:43:01 -05:00
@font-face {
font-display: swap;
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
src: url('./fonts/rubik-v28-latin-regular.woff2') format('woff2');
}
2023-05-08 12:52:41 -05:00
:root {
2024-03-20 18:43:01 -05:00
--primary-color: rgb(205, 188, 255);
--text-color: rgb(255, 255, 255);
--background-color: rgb(20, 23, 50);
2023-05-08 12:52:41 -05:00
--second-bg-color: black;
}
2024-03-20 18:43:01 -05:00
@media screen and (min-width: 650px) {
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
width: 80%;
margin: auto;
}
.grid-child {
width: 100%;
margin: auto;
align-content: center;
/* border: 2px white solid; */
}
select {
width: 70%;
max-width: 200px;
}
}
2023-05-08 12:52:41 -05:00
* {
text-align: center;
color: var(--text-color);
2024-03-20 18:43:01 -05:00
font-family: "Rubik", Verdana, Geneva, Tahoma, sans-serif;
2023-05-08 12:52:41 -05:00
}
2023-05-10 12:36:26 -05:00
h1,
h1>* {
2024-03-20 18:43:01 -05:00
font-size: 3rem;
2024-02-23 13:09:08 -06:00
color: var(--primary-color);
font-weight: 100;
}
hr {
opacity: 0.5;
2023-05-10 12:36:26 -05:00
}
p,
2024-01-26 12:41:20 -06:00
li {
2024-03-20 18:43:01 -05:00
font-size: 1.1rem;
line-height: 1.75rem;
2023-05-08 12:52:41 -05:00
}
p {
margin: 5px;
}
2024-03-20 18:43:01 -05:00
body {
2023-05-08 12:52:41 -05:00
background-color: var(--background-color);
2024-09-18 09:19:40 -05:00
padding: 0 3%;
2024-03-20 18:43:01 -05:00
max-width: 700px;
margin: auto;
/* outline: 3px blue solid; */
margin: auto;
2024-09-18 09:19:40 -05:00
display: flex;
align-items: center;
}
@media screen and (min-height: 700px) {
html,
body {
height: 100%;
}
2023-05-08 12:52:41 -05:00
}
2024-03-20 18:43:01 -05:00
.mainDiv {
width: 100%;
/* outline: 2px white solid; */
}
2024-03-22 21:36:17 -05:00
iframe {
display: none;
}
2023-05-10 12:36:26 -05:00
select,
input {
2024-03-20 18:43:01 -05:00
font-size: 1.3rem;
background-color: rgba(0, 0, 20, 0.5);
color: var(--text-color);
2023-05-08 12:52:41 -05:00
margin: 5px auto;
2024-03-20 18:43:01 -05:00
border: 2px rgb(150, 135, 165) solid;
2023-05-08 12:52:41 -05:00
border-radius: 5px;
2023-11-22 22:52:44 -06:00
padding: 7px;
display: inline;
2024-03-20 18:43:01 -05:00
transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}
input[type="url"] {
border: none;
border-bottom: 2px white solid;
width: 80%;
font-size: 1.15remd;
2023-05-08 12:52:41 -05:00
}
2024-01-26 12:41:20 -06:00
a {
color: rgb(125, 125, 255)
}
2023-05-10 12:36:26 -05:00
.col-sm-3 {
outline: white solid 2px
}
select:hover,
input:hover {
border-color: var(--text-color)
}
2024-03-20 18:43:01 -05:00
option {
background-color: rgba(0, 0, 20);
}
2024-07-31 02:54:26 -05:00
input[type="checkbox"] {
accent-color: var(--primary-color);
2024-07-31 02:54:26 -05:00
width: 1.05rem;
height: 1.05rem;
2024-01-17 20:03:21 -06:00
}
.error {
background-color: rgb(50, 40, 70);
padding: 10px;
border: rgb(150, 50, 50) solid 2px;
border-radius: 15px;
display: inline-block;
2024-01-26 12:41:20 -06:00
}
ul {
display: inline-block;
2023-11-22 22:52:44 -06:00
}