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/renderer/src/builtins/dashboard/styles/parts/_sidebar.scss

149 lines
2.8 KiB

@use '@vizality' as vz;
:root {
--vz-dashboard-sidebar-width: 240px;
}
.vz-dashboard-sidebar {
$base: &;
width: var(--vz-dashboard-sidebar-width);
.vz-error-boundary {
height: 100%;
padding: 20px;
&-block {
background: var(--background-secondary-alt);
}
}
&-item {
&[vz-selected]:hover {
color: #fff;
}
&-icon-wrapper {
@include vz.size(32px);
}
&.disabled {
#{$base}-item-icon-wrapper,
#{$base}-item-icon-wrapper + div {
opacity: .5!important;
cursor: not-allowed;
}
#{$base}-item-inner {
cursor: not-allowed;
}
&:hover {
color: var(--header-secondary);
#{$base}-item-inner {
background: none;
}
}
}
}
&-separator {
@include vz.size(100%, 1px);
margin: 10px 0 10px 10px;
background: var(--background-modifier-accent);
}
&-header {
display: flex;
align-items: center;
justify-content: space-between;
}
&-collapser {
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
cursor: pointer;
transform: rotate3d(0, 0, 1, 90deg);
&:hover {
color: var(--header-primary);
}
}
&[vz-collapsed] {
--vz-dashboard-sidebar-width: 64px;
#{$base}-collapser {
transform: rotate3d(0, 0, 1, 270deg);
margin-left: 8px;
}
#{$base}-item-inner {
display: flex;
align-items: center;
justify-content: center;
}
#{$base}-item-icon-wrapper {
margin: 0;
}
#{$base}-inner {
display: flex;
flex-direction: column;
align-items: center;
}
#{$base}-header > :first-child {
width: 0;
visibility: hidden;
margin-left: 0;
}
.content-1U25dZ {
display: none;
}
/**
* Game activity panel.
*/
.body-GmmuPm {
justify-content: center;
}
.actions-aUdUfC,
.info-WdNIDE {
display: none;
}
/**
* Voice connected panel.
*/
.actionButtons-2vEOUh,
.inner-llGtyq,
.button-12Fmur:first-of-type {
display: none;
}
.inner-llGtyq {
+ div {
margin: 0;
}
}
.connection-3k9QeF {
justify-content: center;
}
/**
* Account panel.
*/
.avatarWrapper-1B9FTW {
margin: 0;
}
.container-YkUktl {
justify-content: center;
}
.nameTag-sc-gpq {
&,
& + div {
display: none;
}
}
}
.panels-3wFtMD {
width: var(--vz-dashboard-sidebar-width);
}
/**
* MacOs titlebar drag zone fix.
*/
.platform-osx &::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
height: 22px;
z-index: 10;
-webkit-app-region: drag;
}
}