1720 lines
27 KiB
SCSS
1720 lines
27 KiB
SCSS
// © XlXi 2023
|
|
|
|
@use "sass:math";
|
|
@import "BootstrapUtil";
|
|
|
|
@import "BrickColors";
|
|
@import "./scss/fontawesome.scss";
|
|
@import "./scss/brands.scss";
|
|
@import "./scss/duotone.scss";
|
|
@import "./scss/light.scss";
|
|
@import "./scss/regular.scss";
|
|
@import "./scss/solid.scss";
|
|
@import "./scss/thin.scss";
|
|
|
|
@import "Variables";
|
|
|
|
// XlXi: Border is removed because of how stupidly it's handled by Bootstrap. It completely breaks our dark theme.
|
|
$utilities: map-remove($utilities, "border", "border-top", "border-end", "border-bottom", "border-start");
|
|
|
|
// Variables
|
|
|
|
$web-font-path: "https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,700;1,400&display=swap" !default;
|
|
@if $web-font-path {
|
|
@import url($web-font-path);
|
|
}
|
|
|
|
@import "BootstrapComponents";
|
|
|
|
// Mixins
|
|
|
|
@mixin shadow($width: 4px){
|
|
border-style: solid;
|
|
border-width: 0 1px $width 1px;
|
|
}
|
|
|
|
// Twemoji
|
|
img.twemoji {
|
|
height: 1.2em;
|
|
width: 1.2em;
|
|
//margin: 0 .05em 0 .1em;
|
|
//vertical-align: -0.1em;
|
|
}
|
|
|
|
// Shop
|
|
|
|
|
|
.vb-avatar-editor-card {
|
|
height: 300px;
|
|
}
|
|
|
|
.vb-wardrobe-nav > .nav-item > .nav-link {
|
|
padding-right: 0.5rem!important;
|
|
padding-left: 0.5rem!important;
|
|
padding-bottom: 0!important;
|
|
padding-top: 0!important;
|
|
}
|
|
|
|
.vb-wardrobe-nav > .nav-item > .nav-link:not(:last-child) {
|
|
margin-left: 0.25rem!important;
|
|
}
|
|
|
|
.virtubrick-tokens {
|
|
background: 0 1px/contain no-repeat url("/images/symbols/token.svg");
|
|
color: #e59800!important;
|
|
font-weight: bold;
|
|
|
|
// XlXi: This is god awful
|
|
@at-root {
|
|
h1#{&} {
|
|
padding: 0 0 0 46px;
|
|
}
|
|
h2#{&} {
|
|
padding: 0 0 0 36px;
|
|
}
|
|
h3#{&} {
|
|
padding: 0 0 0 32px;
|
|
}
|
|
h4#{&} {
|
|
padding: 0 0 0 28px;
|
|
}
|
|
h6#{&} {
|
|
padding: 0 0 0 20px;
|
|
}
|
|
h5#{&}, p#{&}, span#{&} {
|
|
padding: 0 0 0 25px;
|
|
}
|
|
|
|
p > span#{&} {
|
|
padding: 0 0 0 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.virtubrick-asset-thumbnail {
|
|
width: 420px;
|
|
height: 420px;
|
|
}
|
|
|
|
.virtubrick-game-thumbnail {
|
|
width: 640px;
|
|
height: 360px;
|
|
}
|
|
|
|
.virtubrick-smaller-page {
|
|
max-width: 1096px;
|
|
margin: 0 auto 0 auto;
|
|
}
|
|
|
|
.virtubrick-list-dropdown::after {
|
|
@include caret-down();
|
|
|
|
content: "";
|
|
display: inline-block;
|
|
margin-left: 0.255em;
|
|
vertical-align: 0.255em;
|
|
}
|
|
|
|
.virtubrick-item-card {
|
|
text-decoration: none!important;
|
|
font-weight: 400!important;
|
|
display: inline-block;
|
|
padding: 0;
|
|
|
|
flex: 0 0 auto;
|
|
|
|
@media (max-width: 576px) {
|
|
flex: 0 0 auto;
|
|
width: math.div(100%, 2);
|
|
}
|
|
|
|
@media (min-width: 576px) {
|
|
flex: 0 0 auto;
|
|
width: math.div(100%, 4);
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
flex: 0 0 auto;
|
|
width: 144px;
|
|
}
|
|
|
|
// text-reset
|
|
--bs-text-opacity: 1;
|
|
color: inherit!important;
|
|
}
|
|
|
|
.virtubrick-item-details {
|
|
position: relative;
|
|
display: flex;
|
|
|
|
z-index: 99999;
|
|
|
|
// mx-2
|
|
margin: 0 0.5rem 0 0.5rem!important;
|
|
|
|
&>.card {
|
|
position: absolute;
|
|
width: 100%;
|
|
left: 0;
|
|
border-radius: 0 0 4px 4px;
|
|
margin-top: -16px;
|
|
|
|
font-size: .86rem!important;
|
|
}
|
|
}
|
|
|
|
.virtubrick-item-card > span > img {
|
|
background: url("/Images/Item-Image-Vignette.png");
|
|
background-size: cover;
|
|
}
|
|
|
|
.virtubrick-item-card > span > a > img {
|
|
background: url("/Images/Item-Image-Vignette.png");
|
|
background-size: cover;
|
|
}
|
|
|
|
.virtubrick-game-card {
|
|
@media (max-width: 576px) {
|
|
width: math.div(100%, 2)
|
|
}
|
|
|
|
@media (min-width: 576px) {
|
|
width: math.div(100%, 3)
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
width: math.div(100%, 4)
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
width: math.div(100%, 5)
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
width: 176px;
|
|
}
|
|
}
|
|
|
|
.virtubrick-avatar-card {
|
|
@media (max-width: 576px) {
|
|
width: math.div(100%, 2)
|
|
}
|
|
|
|
@media (min-width: 576px) {
|
|
width: math.div(100%, 3)
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
width: math.div(100%, 4)
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
width: math.div(100%, 5)
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
width: 157px;
|
|
}
|
|
}
|
|
|
|
.virtubrick-shop-overlay {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
display: flex;
|
|
background: rgb(40 40 40 / 12%);
|
|
z-index: 10;
|
|
}
|
|
|
|
.virtubrick-shop-overlay > .vbrick-loader {
|
|
margin: auto;
|
|
}
|
|
|
|
.virtubrick-shop-categories {
|
|
border: 0;
|
|
|
|
@media (min-width: 768px) {
|
|
html.vbrick-light & {
|
|
border-right: 2px solid #dee2e6!important;
|
|
}
|
|
|
|
html.vbrick-dark & {
|
|
border-right: 2px solid #333!important;
|
|
}
|
|
|
|
// py-1
|
|
padding-bottom: 0.25rem!important;
|
|
padding-top: 0.25rem!important;
|
|
}
|
|
}
|
|
|
|
// Maintenance
|
|
|
|
.vbrick-maintenance-background {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -9999;
|
|
}
|
|
|
|
.vbrick-maintenance-form {
|
|
html.vbrick-light & {
|
|
background: radial-gradient($gray-100 5%, transparent 65%);
|
|
}
|
|
|
|
html.vbrick-dark & {
|
|
background: radial-gradient(shade-color($gray-900, 30%) 5%, transparent 65%);
|
|
}
|
|
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.a {
|
|
color: inherit !important;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.a:hover {
|
|
color: inherit !important;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.graphic-thumb-big {
|
|
height: 250px;
|
|
width: 250px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.modal-content {
|
|
html.vbrick-dark & {
|
|
background-color: #222 !important;
|
|
}
|
|
}
|
|
|
|
.float-right {
|
|
margin-left: auto !important;
|
|
}
|
|
|
|
.float-left {
|
|
margin-right: auto !important;
|
|
}
|
|
|
|
// Loader
|
|
|
|
.vbrick-loader-center {
|
|
margin: auto;
|
|
}
|
|
|
|
.vbrick-loader {
|
|
display: inline-block;
|
|
position: relative;
|
|
margin: auto auto 0 auto;
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
|
|
.vbrick-loader div {
|
|
position: absolute;
|
|
top: 33px;
|
|
width: 13px;
|
|
height: 13px;
|
|
border-radius: 50%;
|
|
|
|
html.vbrick-light & {
|
|
background-color: $dark;
|
|
}
|
|
|
|
html.vbrick-dark & {
|
|
background-color: $light;
|
|
}
|
|
}
|
|
|
|
.vbrick-loader div:nth-child(1) {
|
|
left: 8px;
|
|
animation: vbrick-ld-p1 0.5s infinite;
|
|
}
|
|
|
|
.vbrick-loader div:nth-child(2) {
|
|
left: 8px;
|
|
animation: vbrick-ld-p2 0.5s infinite;
|
|
}
|
|
|
|
.vbrick-loader div:nth-child(3) {
|
|
left: 32px;
|
|
animation: vbrick-ld-p2 0.5s infinite;
|
|
}
|
|
|
|
.vbrick-loader div:nth-child(4) {
|
|
left: 56px;
|
|
animation: vbrick-ld-p3 0.5s infinite;
|
|
}
|
|
|
|
@keyframes vbrick-ld-p1 {
|
|
0% {
|
|
transform: scale(0);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes vbrick-ld-p3 {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
transform: scale(0);
|
|
}
|
|
}
|
|
|
|
@keyframes vbrick-ld-p2 {
|
|
0% {
|
|
transform: translate(0, 0);
|
|
}
|
|
100% {
|
|
transform: translate(24px, 0);
|
|
}
|
|
}
|
|
|
|
// Background
|
|
|
|
html, body, #vbrick-root {
|
|
height: 100%;
|
|
background: transparent;
|
|
color: inherit;
|
|
}
|
|
|
|
html {
|
|
&.vbrick-light {
|
|
background-color: $gray-100;
|
|
color: $gray-900;
|
|
}
|
|
|
|
&.vbrick-dark {
|
|
background-color: shade-color($gray-900, 30%);
|
|
color: $gray-100;
|
|
}
|
|
}
|
|
|
|
#vbrick-root {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
.virtubrick-home {
|
|
background-image: url("/Images/Backgrounds/Home.png");
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
min-height: calc(100vh - 63px);
|
|
display: flex;
|
|
}
|
|
|
|
.virtubrick-home-about {
|
|
background-image: url("/Images/Backgrounds/About.png");
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
min-height: 500px;
|
|
}
|
|
|
|
.virtubrick-home-about-card {
|
|
color: #fff;
|
|
background: #000000ad;
|
|
border-radius: 5px;
|
|
padding: 20px;
|
|
max-width: 600px;
|
|
border: solid tint-color(#000000ad, 10%);
|
|
border-width: 0 0 2px;
|
|
}
|
|
|
|
.virtubrick-nojs {
|
|
background-image: url("/Images/Backgrounds/NoJs.png");
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.virtubrick-admin {
|
|
background-image: url("/Images/Backgrounds/stars.jpg");
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.virtubrick-blog {
|
|
/* XlXi: I LOVE CSS I LOVE CSS I LOVE CSS I LOVE CSS I LOVE CSS I LOVE CSS */
|
|
background-image: url("/Images/Backgrounds/Blog.png")!important;
|
|
background-size: cover!important;
|
|
background-repeat: no-repeat!important;
|
|
background-position: center!important;
|
|
min-height: 330px;
|
|
background: #141414;
|
|
}
|
|
|
|
// Home Page
|
|
|
|
.virtubrick-homepage-header {
|
|
font-size: 4rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.virtubrick-homepage-fine-print {
|
|
font-size: .6rem;
|
|
opacity: 70%;
|
|
}
|
|
|
|
.virtubrick-small-aligned-text {
|
|
font-size: .6rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.virtubrick-home-shadow {
|
|
text-shadow: 0 0 4px $gray-700;
|
|
}
|
|
|
|
// Character
|
|
.vb-charimg {
|
|
max-height: 300px;
|
|
max-width: 300px;
|
|
@media (max-width: 768px) {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
|
|
.virtubrick-user-circle {
|
|
border-radius: 50%;
|
|
background: url("/Images/User-Image-Vignette.png");
|
|
background-size: cover;
|
|
}
|
|
|
|
.virtubrick-feed-user-circle {
|
|
border-radius: 50%;
|
|
background: url("/Images/User-Image-Vignette.png");
|
|
background-size: cover;
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
|
|
// Border
|
|
|
|
.border {
|
|
html.vbrick-dark & {
|
|
border: 1px solid $gray-700;
|
|
}
|
|
html.vbrick-light & {
|
|
border: 1px solid $border-color;
|
|
}
|
|
|
|
&-top {
|
|
html.vbrick-dark & {
|
|
border-top: 1px solid $gray-700;
|
|
}
|
|
html.vbrick-light & {
|
|
border-top: 1px solid $border-color;
|
|
}
|
|
}
|
|
|
|
&-end {
|
|
html.vbrick-dark & {
|
|
border-right: 1px solid $gray-700;
|
|
}
|
|
html.vbrick-light & {
|
|
border-right: 1px solid $border-color;
|
|
}
|
|
}
|
|
|
|
&-bottom {
|
|
html.vbrick-dark & {
|
|
border-bottom: 1px solid $gray-700;
|
|
}
|
|
html.vbrick-light & {
|
|
border-bottom: 1px solid $border-color;
|
|
}
|
|
}
|
|
|
|
&-start {
|
|
html.vbrick-dark & {
|
|
border-left: 1px solid $gray-700;
|
|
}
|
|
html.vbrick-light & {
|
|
border-left: 1px solid $border-color;
|
|
}
|
|
}
|
|
|
|
&-0 {
|
|
border: 0!important;
|
|
}
|
|
|
|
&-top-0 {
|
|
border-top: 0!important;
|
|
}
|
|
|
|
&-end-0 {
|
|
border-end: 0!important;
|
|
}
|
|
|
|
&-bottom-0 {
|
|
border-bottom: 0!important;
|
|
}
|
|
|
|
&-start-0 {
|
|
border-start: 0!important;
|
|
}
|
|
|
|
&-vb-online-website {
|
|
border-color: #22acff!important;
|
|
}
|
|
|
|
&-vb-in-game {
|
|
border-color: #00d926!important;
|
|
}
|
|
|
|
&-vb-in-studio {
|
|
border-color: #ff8f00!important;
|
|
}
|
|
}
|
|
|
|
// Avatar
|
|
|
|
.vb-character {
|
|
border: 1px solid $gray-500;
|
|
transition: background-color .1s;
|
|
margin: 0.125rem;
|
|
|
|
&-head {
|
|
margin: 0.125rem auto;
|
|
width: 50px!important;
|
|
height: 50px!important;
|
|
}
|
|
|
|
&-limb {
|
|
width: 50px!important;
|
|
height: 100px!important;
|
|
}
|
|
|
|
&-torso {
|
|
width: 104px!important;
|
|
height: 100px!important;
|
|
}
|
|
}
|
|
|
|
$hex-size: 32px;
|
|
$hex-margin: .04rem;
|
|
$hex-calc: calc(1.732 * $hex-size + 4 * $hex-margin - 1px);
|
|
|
|
.vb-hex {
|
|
display: flex;
|
|
text-align: left;
|
|
|
|
&-container {
|
|
font-size: 0;
|
|
|
|
& div {
|
|
width: $hex-size;
|
|
height: calc($hex-size * 1.1547);
|
|
margin: $hex-margin;
|
|
margin-bottom: calc($hex-margin - $hex-size * 0.2885);
|
|
display: inline-block;
|
|
font-size: initial;
|
|
clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
|
|
border: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&::before {
|
|
content: "";
|
|
width: calc($hex-size/2 + $hex-margin);
|
|
float: left;
|
|
height: 120%;
|
|
shape-outside: repeating-linear-gradient(
|
|
#0000 0 calc($hex-calc - 3px),
|
|
#000 0 $hex-calc);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Navbar
|
|
|
|
.navbar {
|
|
@include shadow();
|
|
|
|
@each $color, $value in $theme-colors {
|
|
&.bg-#{$color} {
|
|
border-color: shade-color($value, 10%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.bg-virtubrick {
|
|
background-color: $virtubrick;
|
|
}
|
|
|
|
.virtubrick-navbar {
|
|
background-color: $white;
|
|
border-color: shade-color($white, 10%);
|
|
border-style: solid;
|
|
border-width: 0 0 2px 0;
|
|
|
|
padding-top: 4px;
|
|
padding-bottom: 4px;
|
|
|
|
html.vbrick-light & {
|
|
background-color: $white;
|
|
border-color: shade-color($white, 10%);
|
|
|
|
.navbar-brand {
|
|
color: $navbar-light-brand-color;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: $navbar-light-brand-hover-color;
|
|
}
|
|
}
|
|
|
|
.navbar-nav {
|
|
.nav-link {
|
|
color: $navbar-light-color;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: $navbar-light-hover-color;
|
|
}
|
|
|
|
&.disabled {
|
|
color: $navbar-light-disabled-color;
|
|
}
|
|
}
|
|
|
|
.show > .nav-link,
|
|
.nav-link.active {
|
|
color: $navbar-light-active-color;
|
|
}
|
|
}
|
|
|
|
.navbar-toggler {
|
|
color: $navbar-light-color;
|
|
border-color: $navbar-light-toggler-border-color;
|
|
}
|
|
|
|
.navbar-toggler-icon {
|
|
background-image: escape-svg($navbar-light-toggler-icon-bg);
|
|
}
|
|
|
|
.navbar-text {
|
|
color: $navbar-light-color;
|
|
|
|
a,
|
|
a:hover,
|
|
a:focus {
|
|
color: $navbar-light-active-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
html.vbrick-dark & {
|
|
background-color: $gray-900;
|
|
border-color: tint-color($gray-900, 10%);
|
|
|
|
.navbar-brand {
|
|
color: $navbar-dark-brand-color;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: $navbar-dark-brand-hover-color;
|
|
}
|
|
}
|
|
|
|
.navbar-nav {
|
|
.nav-link {
|
|
color: $navbar-dark-color;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: $navbar-dark-hover-color;
|
|
}
|
|
|
|
&.disabled {
|
|
color: $navbar-dark-disabled-color;
|
|
}
|
|
}
|
|
|
|
.show > .nav-link,
|
|
.nav-link.active {
|
|
color: $navbar-dark-active-color;
|
|
}
|
|
}
|
|
|
|
.navbar-toggler {
|
|
color: $navbar-dark-color;
|
|
border-color: $navbar-dark-toggler-border-color;
|
|
}
|
|
|
|
.navbar-toggler-icon {
|
|
background-image: escape-svg($navbar-dark-toggler-icon-bg);
|
|
}
|
|
|
|
.navbar-text {
|
|
color: $navbar-dark-color;
|
|
a,
|
|
a:hover,
|
|
a:focus {
|
|
color: $navbar-dark-active-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.virtubrick-blognav {
|
|
transition: background 100ms, border-color 100ms;
|
|
transition-timing-function: ease-out;
|
|
}
|
|
|
|
.virtubrick-blognav-hide {
|
|
background: #ffffff00!important;
|
|
border-color: #ffffff00!important;
|
|
}
|
|
|
|
.virtubrick-nav-margin {
|
|
margin-top: 63px;
|
|
}
|
|
|
|
.virtubrick-nav-splitter {
|
|
margin-top: 16px;
|
|
margin-bottom: 16px !important;
|
|
}
|
|
|
|
.virtubrick-user-dropdown::after {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 0;
|
|
}
|
|
|
|
.virtubrick-search, #virtubrick-search-dropdown {
|
|
position: absolute;
|
|
@media (max-width: 992px) {
|
|
display: none;
|
|
}
|
|
@media (min-width: 992px) {
|
|
width: 15rem;
|
|
left: calc(50% - 15rem/2);
|
|
}
|
|
@media (min-width: 1200px) {
|
|
width: 20rem;
|
|
left: calc(50% - 20rem/2);
|
|
}
|
|
}
|
|
|
|
.virtubrick-search {
|
|
font-family: "FontAwesome", $font-family-sans-serif;
|
|
}
|
|
|
|
.virtubrick-search-dropdown-truncate {
|
|
@media (min-width: 992px) {
|
|
max-width: 5.375rem;
|
|
}
|
|
@media (min-width: 1200px) {
|
|
max-width: 10.438rem;
|
|
}
|
|
display: inline-block;
|
|
margin-bottom: -0.35rem;
|
|
}
|
|
|
|
#virtubrick-search-dropdown > .dropdown-menu {
|
|
width: 100%;
|
|
left: 0;
|
|
}
|
|
|
|
// Cards
|
|
|
|
.virtubrick-small-card {
|
|
@media (min-width: 992px) {
|
|
max-width: 50%;
|
|
margin: auto;
|
|
}
|
|
}
|
|
|
|
.virtubrick-moderation-card {
|
|
@media (min-width: 992px) {
|
|
max-width: 70%;
|
|
margin: auto;
|
|
}
|
|
}
|
|
|
|
.card {
|
|
@include shadow();
|
|
html.vbrick-dark & {
|
|
background-color: #222;
|
|
}
|
|
}
|
|
|
|
.sc-gsTEea {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-x: hidden !important;
|
|
overflow-y: auto !important;
|
|
}
|
|
|
|
.virtubrick-center-vh {
|
|
margin-top: auto;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
// Offcanvas
|
|
|
|
.offcanvas-header {
|
|
@include shadow();
|
|
|
|
border-color: shade-color($white, 10%);
|
|
}
|
|
|
|
.offcanvas-body {
|
|
background-color: $gray-100;
|
|
}
|
|
|
|
.offcanvas {
|
|
max-width: 18rem;
|
|
}
|
|
|
|
// Buttons
|
|
|
|
.btn {
|
|
@include shadow();
|
|
text-transform: uppercase;
|
|
|
|
&:not(.disabled):hover {
|
|
margin-top: 1px;
|
|
border-bottom-width: 3px;
|
|
}
|
|
|
|
&:not(.disabled):active {
|
|
margin-top: 2px;
|
|
border-bottom-width: 2px;
|
|
@include box-shadow(none);
|
|
}
|
|
|
|
&-primary {
|
|
border-color: shade-color($primary, 10%);
|
|
}
|
|
|
|
&-secondary {
|
|
border-color: shade-color($secondary, 10%);
|
|
html.vbrick-dark & {
|
|
color: $white;
|
|
background-color: $dark;
|
|
border-color: shade-color($dark, 10%);
|
|
}
|
|
}
|
|
|
|
&-success {
|
|
border-color: shade-color($success, 10%);
|
|
}
|
|
|
|
&-info {
|
|
border-color: shade-color($info, 10%);
|
|
}
|
|
|
|
&-danger {
|
|
border-color: shade-color($danger, 10%);
|
|
}
|
|
|
|
&-warning {
|
|
border-color: shade-color($warning, 10%);
|
|
}
|
|
|
|
&-light {
|
|
border-color: shade-color($light, 10%);
|
|
}
|
|
|
|
&-dark {
|
|
border-color: shade-color($dark, 10%);
|
|
}
|
|
}
|
|
|
|
[class*="btn-outline"] {
|
|
border-top-width: 1px;
|
|
}
|
|
|
|
.btn-group-vertical {
|
|
.btn + .btn {
|
|
&:hover {
|
|
margin-top: -1px;
|
|
border-top-width: 1px;
|
|
}
|
|
|
|
&:active {
|
|
margin-top: -1px;
|
|
border-top-width: 2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-favorite {
|
|
--bs-text-opacity: 1;
|
|
transition: .1s;
|
|
background: transparent;
|
|
border: 0;
|
|
|
|
html.vbrick-light & {
|
|
color: rgba(var(--bs-black-rgb),var(--bs-text-opacity));
|
|
}
|
|
|
|
html.vbrick-dark & {
|
|
color: rgba(var(--bs-light-rgb),var(--bs-text-opacity));
|
|
}
|
|
|
|
&:hover {
|
|
color: #e59800!important;
|
|
}
|
|
|
|
&.selected {
|
|
color: #e59800!important;
|
|
}
|
|
}
|
|
|
|
.btn-upvote {
|
|
--bs-text-opacity: 1;
|
|
transition: .1s;
|
|
background: transparent;
|
|
border: 0;
|
|
|
|
html.vbrick-light & {
|
|
color: rgba(var(--bs-black-rgb),var(--bs-text-opacity));
|
|
}
|
|
|
|
html.vbrick-dark & {
|
|
color: rgba(var(--bs-light-rgb),var(--bs-text-opacity));
|
|
}
|
|
|
|
&:hover {
|
|
color: rgba(var(--bs-success-rgb),var(--bs-text-opacity))!important;
|
|
}
|
|
|
|
&.selected {
|
|
color: rgba(var(--bs-success-rgb),var(--bs-text-opacity))!important;
|
|
}
|
|
}
|
|
|
|
.btn-downvote {
|
|
--bs-text-opacity: 1;
|
|
transition: .1s;
|
|
background: transparent;
|
|
border: 0;
|
|
|
|
html.vbrick-light & {
|
|
color: rgba(var(--bs-black-rgb),var(--bs-text-opacity));
|
|
}
|
|
|
|
html.vbrick-dark & {
|
|
color: rgba(var(--bs-light-rgb),var(--bs-text-opacity));
|
|
}
|
|
|
|
&:hover {
|
|
color: rgba(var(--bs-danger-rgb),var(--bs-text-opacity))!important;
|
|
}
|
|
|
|
&.selected {
|
|
color: rgba(var(--bs-danger-rgb),var(--bs-text-opacity))!important;
|
|
}
|
|
}
|
|
|
|
// Typography
|
|
|
|
.text-secondary {
|
|
color: $gray-700 !important;
|
|
}
|
|
|
|
.blockquote-footer {
|
|
color: $gray-600;
|
|
}
|
|
|
|
// Forms
|
|
|
|
.form-control {
|
|
box-shadow: inset 0 2px 0 rgba(0, 0, 0, .075);
|
|
}
|
|
|
|
.input-group-sm {
|
|
> .input-group-prepend,
|
|
> .input-group-append {
|
|
.btn {
|
|
font-size: $btn-font-size-sm;
|
|
}
|
|
}
|
|
}
|
|
|
|
input {
|
|
html.vbrick-dark & {
|
|
background-color: $gray-800;
|
|
color: $gray-100;
|
|
border-color: $gray-700;
|
|
&:not(.disabled):focus {
|
|
color: $gray-100;
|
|
background-color: $gray-800;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Navs
|
|
|
|
.nav {
|
|
.open > a,
|
|
.open > a:hover,
|
|
.open > a:focus {
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
|
|
.nav-tabs {
|
|
.nav-link {
|
|
color: $body-color;
|
|
|
|
&,
|
|
&.disabled,
|
|
&.disabled:hover,
|
|
&.disabled:focus {
|
|
margin-top: 6px;
|
|
border-color: $nav-tabs-border-color;
|
|
transition: padding-bottom .2s ease-in-out, margin-top .2s ease-in-out, border-bottom .2s ease-in-out;
|
|
}
|
|
|
|
&:not(.disabled):hover,
|
|
&:not(.disabled):focus,
|
|
&.active {
|
|
padding-bottom: add(.5rem, 6px);
|
|
border-bottom-color: transparent;
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
&.nav-justified > li {
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
&.flex-column {
|
|
.nav-link {
|
|
width: 100%;
|
|
text-align: left;
|
|
margin-top: 0;
|
|
border-top-right-radius: 0;
|
|
border-bottom-left-radius: 0.25rem;
|
|
|
|
&:not(.disabled):hover,
|
|
&:not(.disabled):focus,
|
|
&.active {
|
|
padding: 0.5rem 1rem;
|
|
}
|
|
}
|
|
|
|
border-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.card.vb-card-navconnector {
|
|
border-left: 0;
|
|
border-top-left-radius: 0;
|
|
}
|
|
|
|
@keyframes dropdownEase {
|
|
0% {
|
|
transform: translateY(-50%) scale(1,0);
|
|
}
|
|
100% {
|
|
transform: translateY(0) scale(1,1);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes dropdownEase {
|
|
0% {
|
|
-webkit-transform: translateY(-50%) scale(1,0);
|
|
}
|
|
100% {
|
|
-webkit-transform: translateY(0) scale(1,1);
|
|
}
|
|
}
|
|
|
|
.dropdown-menu {
|
|
margin-top: 0;
|
|
@include shadow();
|
|
border-top-width: 1px;
|
|
@include box-shadow(none);
|
|
|
|
html.vbrick-dark & {
|
|
color: $gray-100;
|
|
background-color: $gray-800;
|
|
border-color: $gray-700;
|
|
}
|
|
|
|
html.vbrick-light & {
|
|
color: $gray-500;
|
|
background-color: $white;
|
|
border-color: $gray-400;
|
|
}
|
|
}
|
|
|
|
.dropdown-item {
|
|
html.vbrick-dark & {
|
|
color: $gray-100;
|
|
|
|
&:not(.disabled):hover {
|
|
background-color: $gray-700;
|
|
}
|
|
}
|
|
}
|
|
|
|
.virtubrick-nav-dropdown {
|
|
margin-top: 11px !important;
|
|
border-top: 0;
|
|
border-radius: 0 0 0.25rem 0.25rem;
|
|
|
|
animation-duration: 0.2s;
|
|
animation-fill-mode: both;
|
|
animation-name: dropdownEase;
|
|
|
|
-webkit-animation-duration: 0.2s;
|
|
-webkit-animation-fill-mode: both;
|
|
-webkit-animation-name: dropdownEase;
|
|
}
|
|
|
|
.breadcrumb {
|
|
border-color: shade-color($breadcrumb-bg, 10%);
|
|
@include shadow();
|
|
}
|
|
|
|
.pagination {
|
|
> li > a,
|
|
> li > span {
|
|
position: relative;
|
|
top: 0;
|
|
@include shadow();
|
|
color: $pagination-color;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
top: 1px;
|
|
border-bottom-width: 3px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
&:active {
|
|
top: 2px;
|
|
border-bottom-width: 2px;
|
|
}
|
|
}
|
|
|
|
> .disabled > a,
|
|
> .disabled > span {
|
|
&:hover {
|
|
top: 0;
|
|
@include shadow();
|
|
}
|
|
|
|
&:active {
|
|
top: 0;
|
|
@include shadow();
|
|
}
|
|
}
|
|
}
|
|
|
|
.pager {
|
|
> li > a,
|
|
> li > span,
|
|
> .disabled > a,
|
|
> .disabled > span {
|
|
&,
|
|
&:hover,
|
|
&:active {
|
|
border-left-width: 2px;
|
|
border-right-width: 2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.virtubrick-paginator * {
|
|
display: inline-block;
|
|
}
|
|
|
|
.virtubrick-paginator > input {
|
|
width: 35px;
|
|
text-align: center;
|
|
padding: 0;
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
// Indicators
|
|
|
|
.btn-close {
|
|
text-decoration: none;
|
|
opacity: .4;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.alert {
|
|
color: $white;
|
|
@include shadow();
|
|
|
|
&-primary {
|
|
background-color: $primary;
|
|
border-color: shade-color($primary, 10%);
|
|
}
|
|
|
|
&-secondary {
|
|
background-color: $secondary;
|
|
border-color: shade-color($secondary, 10%);
|
|
}
|
|
|
|
&-success {
|
|
background-color: $success;
|
|
border-color: shade-color($success, 10%);
|
|
}
|
|
|
|
&-info {
|
|
background-color: $info;
|
|
border-color: shade-color($info, 10%);
|
|
}
|
|
|
|
&-danger {
|
|
background-color: $danger;
|
|
border-color: shade-color($danger, 10%);
|
|
}
|
|
|
|
&-warning {
|
|
background-color: $warning;
|
|
border-color: shade-color($warning, 10%);
|
|
}
|
|
|
|
&-yellow {
|
|
background-color: $realyellow;
|
|
border-color: shade-color($realyellow, 10%);
|
|
}
|
|
|
|
&-dark {
|
|
background-color: $dark;
|
|
border-color: shade-color($dark, 10%);
|
|
}
|
|
|
|
&-light {
|
|
background-color: $light;
|
|
border-color: shade-color($light, 10%);
|
|
}
|
|
|
|
.alert-link {
|
|
font-weight: 400;
|
|
color: $white;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
&-secondary,
|
|
&-light {
|
|
&,
|
|
a,
|
|
.alert-link {
|
|
color: $body-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.virtubrick-alert {
|
|
border-radius: 0;
|
|
text-align: center;
|
|
margin-bottom: 0;
|
|
padding-top: 0.35rem;
|
|
padding-bottom: 0.35rem;
|
|
}
|
|
|
|
.virtubrick-alert > .btn-close {
|
|
padding-top: 0.75rem;
|
|
padding-bottom: 0.75rem;
|
|
}
|
|
|
|
.badge {
|
|
&.bg-secondary,
|
|
&.bg-light {
|
|
color: $dark;
|
|
}
|
|
}
|
|
|
|
// Containers
|
|
|
|
@media (min-width: 768px) {
|
|
.container-small {
|
|
width: 300px;
|
|
}
|
|
.container-large {
|
|
width: 970px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
.container-small {
|
|
width: 500px;
|
|
}
|
|
.container-large {
|
|
width: 1170px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
.container-small {
|
|
width: 700px;
|
|
}
|
|
.container-large {
|
|
width: 1500px;
|
|
}
|
|
}
|
|
|
|
.container-small, .container-large {
|
|
max-width: 100%;
|
|
}
|
|
|
|
a.list-group-item {
|
|
&-success {
|
|
&.active {
|
|
background-color: $success;
|
|
}
|
|
|
|
&.active:hover,
|
|
&.active:focus {
|
|
background-color: shade-color($success, 10%);
|
|
}
|
|
}
|
|
|
|
&-warning {
|
|
&.active {
|
|
background-color: $warning;
|
|
}
|
|
|
|
&.active:hover,
|
|
&.active:focus {
|
|
background-color: shade-color($warning, 10%);
|
|
}
|
|
}
|
|
|
|
&-danger {
|
|
&.active {
|
|
background-color: $danger;
|
|
}
|
|
|
|
&.active:hover,
|
|
&.active:focus {
|
|
background-color: shade-color($danger, 10%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal,
|
|
.toast {
|
|
.btn-close {
|
|
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
|
|
}
|
|
}
|
|
|
|
// Footer
|
|
.footer {
|
|
html.vbrick-dark & {
|
|
background-color: $gray-900 !important;
|
|
}
|
|
html.vbrick-light & {
|
|
background-color: $white !important;
|
|
}
|
|
}
|
|
|
|
// Dialog
|
|
|
|
.nav-item {
|
|
color: transparent !important;
|
|
}
|
|
|
|
.p5r {
|
|
padding: .5rem .5rem !important;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
.jcc {
|
|
justify-content: center;
|
|
}
|
|
|
|
.alc {
|
|
align-items: center;
|
|
}
|
|
|
|
.w-100 {
|
|
width: 100%;
|
|
}
|
|
|
|
.w-90 {
|
|
width: 90%;
|
|
}
|
|
|
|
.w-80 {
|
|
width: 80%;
|
|
}
|
|
|
|
.w-70 {
|
|
width: 70%;
|
|
}
|
|
|
|
.w-60 {
|
|
width: 60%;
|
|
}
|
|
|
|
.w-50 {
|
|
width: 50%;
|
|
}
|
|
|
|
.w-40 {
|
|
width: 40%;
|
|
}
|
|
|
|
.w-30 {
|
|
width: 30%;
|
|
}
|
|
|
|
.w-20 {
|
|
width: 20%;
|
|
}
|
|
|
|
.w-10 {
|
|
width: 10%;
|
|
}
|
|
|
|
.w-5 {
|
|
width: 5%;
|
|
}
|
|
|
|
.jumbo {
|
|
background-color: #222;
|
|
padding: 1.3rem 1.3rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
max-width: 60%;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.column {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.w-fit-content {
|
|
width: fit-content !important;
|
|
}
|
|
|
|
.h-fit-content {
|
|
height: fit-content !important;
|
|
}
|
|
|
|
.mr-15 {
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.m-0 {
|
|
margin: 0px !important;
|
|
}
|
|
|
|
p {
|
|
margin: 0px !important;
|
|
}
|
|
|
|
.fs10 {
|
|
font-size: 10px !important;
|
|
}
|
|
|
|
.fs11 {
|
|
font-size: 11px !important;
|
|
}
|
|
|
|
.fs12 {
|
|
font-size: 12px !important;
|
|
}
|
|
|
|
.fs13 {
|
|
font-size: 13px !important;
|
|
}
|
|
|
|
.fs14 {
|
|
font-size: 14px !important;
|
|
}
|
|
|
|
.fs15 {
|
|
font-size: 15px !important;
|
|
}
|
|
|
|
.fs16 {
|
|
font-size: 16px !important;
|
|
}
|
|
|
|
.padding-none {
|
|
padding: 0px !important
|
|
}
|
|
|
|
.text-left {
|
|
text-align: left !important;
|
|
}
|
|
|
|
.text-center {
|
|
text-align: center !important;
|
|
}
|
|
|
|
.text-right {
|
|
text-align: right !important;
|
|
}
|
|
|
|
.mt-15 {
|
|
margin-top: 15px !important;
|
|
}
|
|
|
|
.mb-15 {
|
|
margin-bottom: 15px !important;
|
|
}
|
|
|
|
.mb-5 {
|
|
margin-bottom: 5px !important;
|
|
}
|
|
|
|
.mt-5 {
|
|
margin-bottom: 5px !important;
|
|
}
|
|
|
|
.mb-10 {
|
|
margin-bottom: 10px !important;
|
|
}
|
|
|
|
.mt-10 {
|
|
margin-bottom: 10px !important;
|
|
}
|
|
|
|
::marker {
|
|
display: none !important;
|
|
}
|
|
|
|
.graphic-thumb {
|
|
height: 60px;
|
|
width: 60px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.graphic-post {
|
|
padding: 1rem 1rem;
|
|
text-align: start;
|
|
color: inherit !important;
|
|
text-decoration: none !important;
|
|
background-color: #222 !important;
|
|
border-radius: 0.25px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center !important;
|
|
}
|
|
|
|
.graphic-post-column {
|
|
padding: 1rem 1rem;
|
|
text-align: start;
|
|
color: inherit !important;
|
|
text-decoration: none !important;
|
|
background-color: #222 !important;
|
|
border-radius: 0.25px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center !important;
|
|
}
|
|
|
|
.virtubrick-error-popup {
|
|
margin-bottom: 10px;
|
|
border-radius: 10px;
|
|
|
|
animation-duration: 0.2s;
|
|
animation-fill-mode: both;
|
|
animation-name: dropdownEase;
|
|
|
|
-webkit-animation-duration: 0.2s;
|
|
-webkit-animation-fill-mode: both;
|
|
-webkit-animation-name: dropdownEase;
|
|
}
|
|
|
|
// Voting
|
|
.virtubrick-vote-bar {
|
|
// border
|
|
html.vbrick-dark & {
|
|
border-color: $gray-700;
|
|
}
|
|
html.vbrick-light & {
|
|
border-color: $border-color;
|
|
}
|
|
|
|
// rounded-1
|
|
border-radius: 0.2rem;
|
|
|
|
// bg-secondary
|
|
background-color: $secondary;
|
|
|
|
// my-auto and mx-1
|
|
margin: auto 0.25rem auto 0.25rem;
|
|
|
|
// flex-fill
|
|
flex: 1 1 auto;
|
|
|
|
position: relative;
|
|
height: 10px;
|
|
}
|
|
|
|
// Tables
|
|
table {
|
|
html.vbrick-light & {
|
|
color: rgba(var(--bs-black-rgb),var(--bs-text-opacity));
|
|
}
|
|
|
|
html.vbrick-dark & {
|
|
color: rgba(var(--bs-light-rgb),var(--bs-text-opacity));
|
|
}
|
|
}
|
|
|
|
.table>:not(:first-child) {
|
|
html.vbrick-dark & {
|
|
border-top: 1px solid $gray-700;
|
|
}
|
|
html.vbrick-light & {
|
|
border-top: 1px solid $border-color;
|
|
}
|
|
}
|
|
|
|
table > tbody > tr > th {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.virtubrick-table {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.virtubrick-table > tbody > tr:last-child > th {
|
|
border: unset;
|
|
}
|
|
|
|
.virtubrick-table > thead {
|
|
html.vbrick-dark & {
|
|
background-color: #ffffff0f;
|
|
}
|
|
html.vbrick-light & {
|
|
background-color: #0000000f;
|
|
}
|
|
}
|
|
|
|
// Select
|
|
.vb-small-select {
|
|
max-width: 150px;
|
|
} |