109 lines
2.3 KiB
CSS
109 lines
2.3 KiB
CSS
|
|
:root {
|
|
--discord-blurple: #5865F2;
|
|
}
|
|
|
|
:root,
|
|
[data-bs-theme="light"] {
|
|
|
|
}
|
|
|
|
[data-bs-theme="dark"] {
|
|
|
|
}
|
|
|
|
.btn-discord {
|
|
--bs-btn-color: #fff;
|
|
--bs-btn-bg: var(--discord-blurple);
|
|
--bs-btn-border-color: var(--discord-blurple);
|
|
--bs-btn-hover-color: #fff;
|
|
--bs-btn-hover-bg: #505CD6;
|
|
--bs-btn-hover-border-color: #4954C9;
|
|
--bs-btn-focus-shadow-rgb: 49, 132, 253;
|
|
--bs-btn-active-color: #fff;
|
|
--bs-btn-active-bg: #434DBB;
|
|
--bs-btn-active-border-color: #434DBB;
|
|
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
|
--bs-btn-disabled-color: #fff;
|
|
--bs-btn-disabled-bg: var(--discord-blurple);
|
|
--bs-btn-disabled-border-color: var(--discord-blurple);
|
|
}
|
|
|
|
/* Widths with breakpoints */
|
|
|
|
/* Small (sm) and down */
|
|
@media (max-width: 576px) {
|
|
.w-sm-25 { width: 25%; }
|
|
.w-sm-50 { width: 50%; }
|
|
.w-sm-75 { width: 75%; }
|
|
.w-sm-100 { width: 100%; }
|
|
.w-sm-auto { width: auto; }
|
|
}
|
|
|
|
/* Medium (md) and down */
|
|
@media (max-width: 768px) {
|
|
.w-md-25 { width: 25%; }
|
|
.w-md-50 { width: 50%; }
|
|
.w-md-75 { width: 75%; }
|
|
.w-md-100 { width: 100%; }
|
|
.w-md-auto { width: auto; }
|
|
}
|
|
|
|
/* Large (lg) and down */
|
|
@media (max-width: 992px) {
|
|
.w-lg-25 { width: 25%; }
|
|
.w-lg-50 { width: 50%; }
|
|
.w-lg-75 { width: 75%; }
|
|
.w-lg-100 { width: 100%; }
|
|
.w-lg-auto { width: auto; }
|
|
}
|
|
|
|
/* Extra large (xl) and down */
|
|
@media (max-width: 1200px) {
|
|
.w-xl-25 { width: 25%; }
|
|
.w-xl-50 { width: 50%; }
|
|
.w-xl-75 { width: 75%; }
|
|
.w-xl-100 { width: 100%; }
|
|
.w-xl-auto { width: auto; }
|
|
}
|
|
|
|
/* Extra extra large (xxl) and down */
|
|
@media (max-width: 1400px) {
|
|
.w-xxl-25 { width: 25%; }
|
|
.w-xxl-50 { width: 50%; }
|
|
.w-xxl-75 { width: 75%; }
|
|
.w-xxl-100 { width: 100%; }
|
|
.w-xxl-auto { width: auto; }
|
|
}
|
|
|
|
|
|
/* Navbar */
|
|
|
|
#navCollapse .navbar-nav {
|
|
height: auto;
|
|
padding-right: none;
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
#navCollapse .navbar-nav {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.navbar-btn {
|
|
text-align: start;
|
|
border: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0.5rem 1rem;
|
|
text-decoration: none;
|
|
border-radius: var(--bs-border-radius-sm);
|
|
|
|
color: var(--bs-body-color);
|
|
background-color: var(--bs-secondary-bg);
|
|
}
|
|
|
|
.navbar-btn:hover {
|
|
background-color: var(--bs-tertiary-bg);
|
|
}
|