TeleQom.org/css/utils/base.css

163 lines
2.7 KiB
CSS
Raw Normal View History

2023-03-15 19:53:04 +00:00
/* FONTS IMPORT */
@font-face {
2023-10-26 20:02:03 +00:00
font-family: Friend;
src: url("/media/fonts/Friend-Bold.otf");
2023-03-15 19:53:04 +00:00
font-display: swap;
}
/* RESET */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
border: none;
text-decoration: none;
2023-10-26 20:02:03 +00:00
font-family: Friend, sans-serif;
2023-03-15 19:53:04 +00:00
scroll-behavior: smooth;
}
:root {
/* Display Sizes */
--mobile-size: 500px;
--tablet-size: 900px;
--desktop-size: 1920px;
--max-display-size: 1920px;
/* Background Colors */
--background-color-1: #171a21;
--background-color-2: #1e222b;
--background-color-3: #333947;
--background-color-success-1: #1dad24;
--background-color-success-2: #16851c;
--background-color-warning-1: #a4a700;
--background-color-warning-2: #898b00;
--background-color-danger-1: #c90c0c;
--background-color-danger-2: #960b0b;
/* Item Colors */
2023-04-23 19:29:19 +00:00
--item-color-1: #689af8;
2023-03-15 19:53:04 +00:00
--item-color-2: #3c64ad;
--item-color-3: #333947;
/* Text Colors */
--text-color-1: #eee;
--text-color-2: var(--item-color-1);
/* btn Color */
--btn-color-1: #5791FF;
--btn-color-1-hover: #3c64ad;
--btn-color-2: unset;
--btn-color-2-hover: #5791FF;
--btn-disabled: #3d414b;
/* Boxes */
--box-shadow: #0c0e11;
--border-radius: 0.5rem;
/* Custom */
--nav-height: 5rem;
}
html {
color: var(--text-color-1);
background-color: var(--background-color-1);
scroll-padding-top: var(--nav-height);
}
body {
max-width: var(--max-display-size);
margin: 0 auto;
text-align: center;
}
a {
color: var(--text-color-1);
text-decoration: none;
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2.5rem;
}
h3 {
font-size: 2rem;
}
h4 {
font-size: 1.5rem;
}
h5 {
2023-10-26 20:02:03 +00:00
font-size: 1.4rem;
2023-03-15 19:53:04 +00:00
}
p {
2023-04-23 19:29:19 +00:00
line-height: 1.5rem;
2023-10-26 20:02:03 +00:00
font-size: 1.3rem;
2023-03-15 19:53:04 +00:00
}
/* SECTIONS */
section {
padding: 5rem 0 5rem 0;
}
/* CUSTOM */
2023-04-23 19:29:19 +00:00
span.in-blk {
display: inline-block;
}
span.color-1 {
color: var(--item-color-1);
2023-03-15 19:53:04 +00:00
}
2023-03-22 21:05:44 +00:00
h1 .q {
2023-04-23 19:29:19 +00:00
height: 3rem !important;
width: 3rem !important;
margin: 0 0.1rem -0.1rem 0.1rem !important;
}
h2 .q {
height: 2.5rem !important;
width: 2.5rem !important;
margin: 0 0.1rem -0.1rem 0.1rem !important;
}
h3 .q {
height: 2rem !important;
width: 2rem !important;
margin: 0 0.1rem -0.1rem 0.1rem !important;
}
h4 .q {
height: 1.5rem !important;
width: 1.5rem !important;
margin: 0 0.1rem -0.1rem 0.1rem !important;
}
h5 .q {
height: 1.3rem !important;
width: 1.3rem !important;
margin: 0 0.1rem -0.1rem 0.1rem !important;
}
p .q {
height: 1.2rem !important;
width: 1.2rem !important;
margin: 0 0.1rem -0.075rem 0.1rem !important;
2023-03-22 21:05:44 +00:00
}
2023-03-15 19:53:04 +00:00
.link {
text-decoration: underline;
color: var(--text-color-2);
}