152 lines
2.6 KiB
SCSS
152 lines
2.6 KiB
SCSS
@import "bootstrap/scss/functions";
|
|
@import "bootstrap/scss/variables";
|
|
@import "bootstrap/scss/mixins";
|
|
|
|
// Core variables
|
|
$theme-colors: (
|
|
"primary": #d43aff,
|
|
"secondary": #595b5c,
|
|
"success": #00b7ef,
|
|
"warning": rgb(225 29 72),
|
|
"danger": #eb5424,
|
|
"light": #9b9b9b,
|
|
"dark": #2f2f2f,
|
|
);
|
|
|
|
// Typography
|
|
$font-family-base: "Quicksand", sans-serif;
|
|
$font-family-monospace: "Roboto Mono", monospace;
|
|
$font-size-base: 1rem;
|
|
$line-height-base: 1.8;
|
|
$headings-font-weight: normal;
|
|
$headings-color: #fff;
|
|
|
|
// Body
|
|
$body-bg: black;
|
|
$body-color: #9b9b9b;
|
|
|
|
// Links
|
|
$link-color: #00b7ef;
|
|
$link-decoration: none;
|
|
$link-hover-decoration: underline;
|
|
|
|
// Buttons
|
|
$btn-padding-y: 1.125rem; // 18px
|
|
$btn-padding-x: 1.75rem; // 28px
|
|
$btn-font-weight: 500;
|
|
$btn-letter-spacing: 1px;
|
|
$btn-border-width: 1px;
|
|
$btn-transition: all 0.3s ease-in-out;
|
|
|
|
// Forms
|
|
$input-bg: #494848;
|
|
$input-color: white;
|
|
$input-border-color: #494848;
|
|
$input-border-radius: 6px;
|
|
$input-padding-y: 0.625rem; // 10px
|
|
$input-padding-x: 0.625rem; // 10px
|
|
$input-font-family: $font-family-monospace;
|
|
$input-font-size: 1rem;
|
|
$input-focus-border-color: lighten($input-border-color, 10%);
|
|
$input-focus-box-shadow: none;
|
|
|
|
// Cards
|
|
$card-bg: #2f2f2f;
|
|
$card-border-radius: 3px;
|
|
$card-border-width: 0;
|
|
$card-spacer-y: 1.25rem;
|
|
$card-spacer-x: 1.25rem;
|
|
|
|
// Modals
|
|
$modal-content-bg: #2f2f2f;
|
|
$modal-header-border-color: #595b5c;
|
|
$modal-footer-border-color: #595b5c;
|
|
|
|
// Navbar
|
|
$navbar-dark-color: #9b9b9b;
|
|
$navbar-dark-hover-color: #fff;
|
|
$navbar-padding-y: 1rem;
|
|
$navbar-nav-link-padding-x: 1rem;
|
|
|
|
// Utilities
|
|
$border-radius: 3px;
|
|
$border-radius-lg: 6px;
|
|
$box-shadow: none;
|
|
|
|
// Custom utility classes
|
|
.text-uppercase {
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
// Custom button styles
|
|
.btn {
|
|
text-transform: uppercase;
|
|
|
|
&-dark {
|
|
@include button-variant(transparent, #595b5c);
|
|
|
|
&:hover {
|
|
border-color: #fff;
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
&-primary {
|
|
&:hover {
|
|
background-color: darken(#d43aff, 5%);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Custom input styles
|
|
.form-control {
|
|
&:focus {
|
|
background-color: lighten($input-bg, 5%);
|
|
}
|
|
}
|
|
|
|
html {
|
|
padding: 0 30px;
|
|
}
|
|
|
|
body {
|
|
max-width: 1200px;
|
|
margin: 5em auto 0 auto;
|
|
}
|
|
|
|
h2 {
|
|
margin: 0 0 45px 0;
|
|
font-size: 36px;
|
|
}
|
|
|
|
h3 {
|
|
margin: 0 0 2rem 0;
|
|
font-size: 32px;
|
|
}
|
|
|
|
p {
|
|
margin: 0 0 45px;
|
|
}
|
|
|
|
ul {
|
|
margin: 0 0 32px;
|
|
}
|
|
|
|
li strong {
|
|
color: #fff;
|
|
}
|
|
|
|
pre,
|
|
code {
|
|
display: inline;
|
|
font-size: 16px;
|
|
}
|
|
|
|
// Override Bootstrap's link hover behavior
|
|
a:hover {
|
|
text-decoration: none;
|
|
border-bottom-color: #00b7ef;
|
|
}
|
|
// Import Bootstrap after variable overrides
|
|
@import "bootstrap/scss/bootstrap";
|