329 lines
6.7 KiB
SCSS
329 lines
6.7 KiB
SCSS
@use '../abstracts/variables' as v;
|
|
@use '../abstracts/mixins' as mx;
|
|
@use '../abstracts/breakpoints' as bp;
|
|
@use '../abstracts/placeholders';
|
|
|
|
$btn-border-width: 3px;
|
|
$btn-mb: 0.5rem;
|
|
$sidebar-display: 'sidebar-display'; /* the attribute for sidebar display */
|
|
|
|
#sidebar {
|
|
@include mx.pl-pr(0);
|
|
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
width: v.$sidebar-width;
|
|
background: var(--sidebar-bg);
|
|
border-right: 1px solid var(--sidebar-border-color);
|
|
|
|
/* Hide scrollbar for IE, Edge and Firefox */
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
scrollbar-width: none; /* Firefox */
|
|
|
|
/* Hide scrollbar for Chrome, Safari and Opera */
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
@include bp.lt(bp.get(lg)) {
|
|
@include mx.slide;
|
|
|
|
transform: translateX(-#{v.$sidebar-width}); /* hide */
|
|
-webkit-transform: translateX(-#{v.$sidebar-width});
|
|
|
|
[#{$sidebar-display}] & {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@include bp.xxxl {
|
|
width: v.$sidebar-width-large;
|
|
}
|
|
|
|
%sidebar-link-hover {
|
|
&:hover {
|
|
color: var(--sidebar-active-color);
|
|
}
|
|
}
|
|
|
|
a {
|
|
@extend %sidebar-links;
|
|
}
|
|
|
|
#avatar {
|
|
display: block;
|
|
width: 6.5rem;
|
|
height: 6.5rem;
|
|
overflow: hidden;
|
|
box-shadow: var(--avatar-border-color) 0 0 0 2px;
|
|
transform: translateZ(0); /* fixed the zoom in Safari */
|
|
|
|
@include bp.sm {
|
|
width: 7rem;
|
|
height: 7rem;
|
|
}
|
|
|
|
img {
|
|
transition: transform 0.5s;
|
|
|
|
&:hover {
|
|
transform: scale(1.2);
|
|
}
|
|
}
|
|
}
|
|
|
|
.profile-wrapper {
|
|
@include mx.mt-mb(2.5rem);
|
|
@extend %clickable-transition;
|
|
|
|
padding-left: 2.5rem;
|
|
padding-right: 1.25rem;
|
|
width: 100%;
|
|
|
|
@include bp.lg {
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
@include bp.xxxl {
|
|
margin-top: 3.5rem;
|
|
margin-bottom: 2.5rem;
|
|
padding-left: 3.5rem;
|
|
}
|
|
}
|
|
|
|
.site-title {
|
|
@extend %clickable-transition;
|
|
@extend %sidebar-link-hover;
|
|
|
|
font-family: inherit;
|
|
font-weight: 900;
|
|
font-size: 1.75rem;
|
|
line-height: 1.2;
|
|
letter-spacing: 0.25px;
|
|
margin-top: 1.25rem;
|
|
margin-bottom: 0.5rem;
|
|
width: fit-content;
|
|
color: var(--site-title-color);
|
|
}
|
|
|
|
.site-subtitle {
|
|
font-size: 95%;
|
|
color: var(--site-subtitle-color);
|
|
margin-top: 0.25rem;
|
|
word-spacing: 1px;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
ul {
|
|
margin-bottom: 2rem;
|
|
|
|
li.nav-item {
|
|
opacity: 0.9;
|
|
width: 100%;
|
|
|
|
@include mx.pl-pr(1.5rem);
|
|
|
|
@include bp.xxxl {
|
|
@include mx.pl-pr(2.75rem);
|
|
}
|
|
|
|
a.nav-link {
|
|
@include mx.pt-pb(0.6rem);
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 0.75rem;
|
|
font-weight: 600;
|
|
|
|
&:hover {
|
|
background-color: var(--sidebar-hover-bg);
|
|
}
|
|
|
|
i {
|
|
font-size: 95%;
|
|
opacity: 0.8;
|
|
margin-right: 1.5rem;
|
|
}
|
|
|
|
span {
|
|
font-size: 90%;
|
|
letter-spacing: 0.2px;
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
.nav-link {
|
|
color: var(--sidebar-active-color);
|
|
background-color: var(--sidebar-hover-bg);
|
|
|
|
span {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:not(:first-child) {
|
|
margin-top: 0.25rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sidebar-bottom {
|
|
padding-left: 2rem;
|
|
padding-right: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
|
|
@include bp.xxxl {
|
|
padding-left: 2.75rem;
|
|
margin-bottom: 1.75rem;
|
|
}
|
|
|
|
$btn-size: 1.75rem;
|
|
|
|
%button {
|
|
width: $btn-size;
|
|
height: $btn-size;
|
|
margin-bottom: $btn-mb; // multi line gap
|
|
border-radius: 50%;
|
|
color: var(--sidebar-btn-color);
|
|
background-color: var(--sidebar-btn-bg);
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
&:not(:focus-visible) {
|
|
box-shadow: var(--sidebar-border-color) 0 0 0 1px;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: var(--sidebar-hover-bg);
|
|
}
|
|
}
|
|
|
|
a {
|
|
@extend %button;
|
|
@extend %sidebar-link-hover;
|
|
@extend %clickable-transition;
|
|
|
|
&:not(:last-child) {
|
|
margin-right: v.$sb-btn-gap;
|
|
|
|
@include bp.xxxl {
|
|
margin-right: v.$sb-btn-gap-lg;
|
|
}
|
|
}
|
|
}
|
|
|
|
i {
|
|
line-height: $btn-size;
|
|
}
|
|
|
|
#mode-toggle {
|
|
@extend %button;
|
|
@extend %sidebar-links;
|
|
@extend %sidebar-link-hover;
|
|
}
|
|
|
|
.icon-border {
|
|
@extend %no-cursor;
|
|
@include mx.ml-mr(calc((v.$sb-btn-gap - $btn-border-width) / 2));
|
|
|
|
background-color: var(--sidebar-btn-color);
|
|
content: '';
|
|
width: $btn-border-width;
|
|
height: $btn-border-width;
|
|
border-radius: 50%;
|
|
margin-bottom: $btn-mb;
|
|
|
|
@include bp.xxxl {
|
|
@include mx.ml-mr(calc((v.$sb-btn-gap-lg - $btn-border-width) / 2));
|
|
}
|
|
}
|
|
} /* .sidebar-bottom */
|
|
.lang-selector-wrapper {
|
|
padding: 0.35rem;
|
|
margin: 0.15rem 0;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Dropdown container */
|
|
.lang-dropdown {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: auto;
|
|
min-width: 120px;
|
|
max-width: 80%;
|
|
}
|
|
|
|
/* Select input element */
|
|
.lang-select {
|
|
/* Basic styles */
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
width: 100%;
|
|
// padding: 0.5rem 2rem 0.5rem 1rem;
|
|
border: none;
|
|
/* Font and colors */
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
color: var(--sidebar-muted);
|
|
background-color: var(--sidebar-bg);
|
|
|
|
/* Shape and interaction */
|
|
border-radius: var(--bs-border-radius, 0.375rem);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
|
|
/* Add arrow icon */
|
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='gray' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
|
|
background-repeat: no-repeat;
|
|
background-position: right 0.75rem center;
|
|
background-size: 1rem;
|
|
}
|
|
|
|
/* Hover state */
|
|
.lang-select:hover {
|
|
color: var(--sidebar-active);
|
|
background-color: var(--sidebar-hover);
|
|
}
|
|
|
|
/* Focus state */
|
|
.lang-select:focus {
|
|
outline: 2px solid var(--sidebar-active);
|
|
outline-offset: 2px;
|
|
color: var(--sidebar-active);
|
|
}
|
|
|
|
/* Firefox browser support */
|
|
.lang-select:-moz-focusring {
|
|
color: transparent;
|
|
text-shadow: 0 0 0 var(--sidebar-muted);
|
|
}
|
|
|
|
/* IE browser support */
|
|
.lang-select::-ms-expand {
|
|
display: none;
|
|
}
|
|
|
|
.no-hover:hover {
|
|
background-color: var(--sidebar-bg) !important;
|
|
}
|
|
|
|
} /* #sidebar */
|
|
|
|
[#{$sidebar-display}] {
|
|
#main-wrapper {
|
|
@include bp.lt(bp.get(lg)) {
|
|
transform: translateX(v.$sidebar-width);
|
|
}
|
|
}
|
|
}
|