You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
vizality/src/core/builtins/dashboard/styles/parts/_sidebar.scss

126 lines
2.6 KiB

@use '@vizality' as vz;
:root {
--vz-dashboard-sidebar-width: 240px;
}
.vz-dashboard-sidebar {
width: var(--vz-dashboard-sidebar-width);
.vz-error-boundary {
height: 100%;
padding: 20px;
&-block {
background: var(--background-secondary-alt);
}
}
.vz-dashboard-sidebar-item-icon-wrapper {
@include vz.size(32px);
}
.vz-dashboard-sidebar-item {
&.disabled {
.vz-dashboard-sidebar-item-icon-wrapper,
.vz-dashboard-sidebar-item-icon-wrapper + div {
opacity: .5!important;
cursor: not-allowed;
}
.vz-dashboard-sidebar-item-inner {
cursor: not-allowed;
}
&:hover {
color: var(--header-secondary);
.vz-dashboard-sidebar-item-inner {
background: none;
}
}
}
}
.vz-dashboard-sidebar-separator {
@include vz.size(100%, 1px);
margin: 10px 0 10px 10px;
background: var(--background-modifier-accent);
}
.vz-dashboard-sidebar-auxillary-icon-wrapper {
cursor: pointer;
padding: 4px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
&:hover {
background-color: var(--background-modifier-hover);
}
}
.vz-dashboard-sidebar-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.vz-dashboard-sidebar-collapser {
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
color: var(--header-secondary);
cursor: pointer;
transform: rotate3d(0, 0, 1, 90deg);
&:hover {
color: var(--header-primary);
}
}
&[vz-collapsed] {
--vz-dashboard-sidebar-width: 60px;
.vz-dashboard-sidebar-collapser {
transform: rotate3d(0, 0, 1, 270deg);
}
.discoverHeader-Ijkm_M {
width: 0;
visibility: hidden;
margin-left: 0;
}
.content-3QAtGj {
display: none;
}
/**
* Game activity panel.
*/
.body-GmmuPm {
justify-content: center;
}
.actions-aUdUfC,
.info-WdNIDE {
display: none;
}
/**
* Voice connected panel.
*/
.actionButtons-14eAc_,
.inner-tyMogq,
.button-14-BFJ:first-of-type {
display: none;
}
.inner-tyMogq {
+ div {
margin: 0;
}
}
.connection-3KRENF {
justify-content: center;
}
/**
* Account panel.
*/
.avatarWrapper-2yR4wp {
margin: 0;
}
.container-3baos1 {
justify-content: center;
}
.nameTag-3uD-yy {
&,
& + div {
display: none;
}
}
}
}