198 lines
4.2 KiB
CSS
198 lines
4.2 KiB
CSS
.sidebar {
|
|
flex-shrink: 1;
|
|
flex-grow: 0;
|
|
font-family: Verdana, Tahoma, Geneva, Arial, Helvetica, sans-serif;
|
|
display: inline-flex;
|
|
box-shadow: var(--theme-size-sidebar-box-shadow-x, 0) var(--theme-size-sidebar-box-shadow-y, 0) var(--theme-size-sidebar-box-shadow-blur, 0) var(--theme-size-sidebar-box-shadow-spread, 0) var(--theme-colour-sidebar-box-shadow, #000);
|
|
}
|
|
|
|
@media (max-width:768px) {
|
|
.sidebar {
|
|
position: fixed;
|
|
top: max(4px, env(safe-area-inset-top));
|
|
right: max(4px, env(safe-area-inset-right));
|
|
bottom: max(4px, env(safe-area-inset-bottom));
|
|
}
|
|
}
|
|
|
|
.sidebar--closed {
|
|
min-width: 40px
|
|
}
|
|
|
|
.sidebar--closed .sidebar__menus {
|
|
display: none
|
|
}
|
|
|
|
.sidebar__selector {
|
|
order: 1;
|
|
font: 2em/40px "Font Awesome 5 Free";
|
|
font-weight: 900;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: auto;
|
|
flex-shrink: 0;
|
|
background: linear-gradient(90deg, var(--theme-colour-sidebar-selector-background-begin, #fff), var(--theme-colour-sidebar-selector-background-end, #000)) var(--theme-colour-sidebar-selector-background-begin, #fff);
|
|
}
|
|
|
|
.sidebar__selector-top {
|
|
flex-grow: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sidebar__selector-mode {
|
|
height: 40px;
|
|
width: 40px;
|
|
cursor: pointer;
|
|
transition: background .1s, text-shadow .1s;
|
|
}
|
|
|
|
.sidebar__selector-mode:hover {
|
|
background-color: var(--theme-colour-sidebar-selector-background-hover, #bbb);
|
|
}
|
|
|
|
.sidebar__selector-mode:active {
|
|
background-color: var(--theme-colour-sidebar-selector-background-active, #ddd);
|
|
}
|
|
|
|
.sidebar:not(.sidebar--closed) .sidebar__selector-mode--active {
|
|
background-color: var(--theme-colour-sidebar-selector-background-active, #ddd) !important;
|
|
}
|
|
|
|
.sidebar__selector-mode--hidden {
|
|
display: none;
|
|
}
|
|
|
|
.sidebar__selector-mode--attention {
|
|
text-shadow: var(--theme-size-sidebar-selector-attention-shadow-x, 0) var(--theme-size-sidebar-selector-attention-shadow-y, 0) var(--theme-size-sidebar-selector-attention-shadow-blur, 0) var(--theme-colour-sidebar-selector-attention-shadow, #888);
|
|
}
|
|
|
|
.sidebar__selector-mode--users:before {
|
|
content: "\f0c0"
|
|
}
|
|
|
|
.sidebar__selector-mode--channels:before {
|
|
content: "\f292"
|
|
}
|
|
|
|
.sidebar__selector-mode--settings:before {
|
|
content: "\f013"
|
|
}
|
|
|
|
.sidebar__selector-mode--uploads:before {
|
|
content: "\f093"
|
|
}
|
|
|
|
.sidebar__selector-mode--audio:before {
|
|
content: "\f028"
|
|
}
|
|
|
|
.sidebar__selector-mode--audio-off:before {
|
|
content: "\f026"
|
|
}
|
|
|
|
.sidebar__selector-mode--scroll:before {
|
|
content: "\f04e"
|
|
}
|
|
|
|
.sidebar__selector-mode--scroll-off:before {
|
|
content: "\f04c"
|
|
}
|
|
|
|
.sidebar__selector-mode--unembed:before {
|
|
content: "\f127"
|
|
}
|
|
|
|
.sidebar__selector-mode--clear {
|
|
background-image: url('//static.flash.moe/images/bomb.png');
|
|
}
|
|
/*.sidebar__selector-mode--clear:before {
|
|
content: "\f2ed"
|
|
}*/
|
|
|
|
.sidebar__selector-mode--menu-toggle-opened:before {
|
|
content: "\f152"
|
|
}
|
|
|
|
.sidebar__selector-mode--menu-toggle-closed:before {
|
|
content: "\f191"
|
|
}
|
|
|
|
.sidebar__menus {
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
overflow: auto;
|
|
width: 220px;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
.sidebar__menu {
|
|
display: none;
|
|
}
|
|
|
|
.sidebar__menu--active {
|
|
display: inline;
|
|
}
|
|
|
|
.sidebar__user,
|
|
.sidebar__channel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 1px;
|
|
font-size: 1.2em
|
|
}
|
|
|
|
.sidebar__user-details,
|
|
.sidebar__channel-details {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
height: 30px
|
|
}
|
|
|
|
.sidebar__user-name,
|
|
.sidebar__channel-name {
|
|
flex-grow: 1;
|
|
padding: 0 5px;
|
|
min-height: 20px;
|
|
}
|
|
|
|
.sidebar__user-options {
|
|
list-style: none;
|
|
margin: 1px 5px;
|
|
overflow: hidden;
|
|
}
|
|
.sidebar__user-options-wrapper {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sidebar__user-options--hidden {
|
|
display: none
|
|
}
|
|
|
|
.sidebar__user-option {
|
|
padding: 2px 5px;
|
|
cursor: pointer;
|
|
display: block;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.sidebar__user-avatar {
|
|
background: no-repeat center center / cover #000;
|
|
height: 30px;
|
|
width: 30px;
|
|
border-radius: 5%;
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
order: 1
|
|
}
|
|
|
|
.user-sidebar-afk {
|
|
border-radius: 50px;
|
|
padding: 2px 6px;
|
|
font-size: .8em;
|
|
background-color: rgba(0, 0, 0, .5);
|
|
float: right;
|
|
line-height: 1.4em;
|
|
}
|