Move Sidebar CSS into separate file
Torjus
parent
a26cf2fa14
commit
f518833deb
|
|
@ -74,9 +74,11 @@ class Sidebar extends Component
|
|||
}
|
||||
|
||||
return (
|
||||
<div className={classnames('sidebar room-controls', {
|
||||
<div
|
||||
className={classnames('sidebar room-controls', {
|
||||
'visible' : toolbarsVisible
|
||||
})}
|
||||
data-component='Sidebar'
|
||||
>
|
||||
{fscreen.fullscreenEnabled && (
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -164,114 +164,6 @@
|
|||
border: 1px solid rgba(#fff, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
> .sidebar {
|
||||
position: fixed;
|
||||
z-index: 101;
|
||||
top: calc(50% - 60px);
|
||||
height: 120px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
+desktop() {
|
||||
left: 20px;
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
left: 10px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
> .button {
|
||||
flex: 0 0 auto;
|
||||
margin: 4px 0;
|
||||
background-position: center;
|
||||
background-size: 75%;
|
||||
background-repeat: no-repeat;
|
||||
background-color: rgba(#fff, 0.3);
|
||||
cursor: pointer;
|
||||
transition-property: opacity, background-color;
|
||||
transition-duration: 0.15s;
|
||||
border-radius: 100%;
|
||||
|
||||
+desktop() {
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
&.on {
|
||||
background-color: rgba(#fff, 0.7);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&.login {
|
||||
&.off {
|
||||
background-image: url('/resources/images/icon_login_white.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&.settings {
|
||||
&.off {
|
||||
background-image: url('/resources/images/icon_settings_white.svg');
|
||||
}
|
||||
|
||||
&.on {
|
||||
background-image: url('/resources/images/icon_settings_black.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&.fullscreen {
|
||||
background-image: url('/resources/images/icon_fullscreen_white.svg');
|
||||
|
||||
&.on {
|
||||
background-image: url('/resources/images/icon_fullscreen_exit_white.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&.screen {
|
||||
&.on {
|
||||
background-image: url('/resources/images/no-share-screen-black.svg');
|
||||
}
|
||||
|
||||
&.off {
|
||||
background-image: url('/resources/images/share-screen-white.svg');
|
||||
}
|
||||
|
||||
&.unsupported {
|
||||
background-image: url('/resources/images/no-share-screen-white.svg');
|
||||
background-color: rgba(#d42241, 0.7);
|
||||
}
|
||||
|
||||
&.need-extension {
|
||||
background-image: url('/resources/images/share-screen-extension.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&.raise-hand {
|
||||
background-image: url('/resources/images/icon-hand-white.svg');
|
||||
|
||||
&.on {
|
||||
background-image: url('/resources/images/icon-hand-black.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&.leave-meeting {
|
||||
background-image: url('/resources/images/leave-meeting.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .toolarea-wrapper {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,107 @@
|
|||
[data-component='Sidebar'] {
|
||||
position: fixed;
|
||||
z-index: 101;
|
||||
top: calc(50% - 60px);
|
||||
height: 120px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
+desktop() {
|
||||
left: 20px;
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
left: 10px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
> .button {
|
||||
flex: 0 0 auto;
|
||||
margin: 4px 0;
|
||||
background-position: center;
|
||||
background-size: 75%;
|
||||
background-repeat: no-repeat;
|
||||
background-color: rgba(#fff, 0.3);
|
||||
cursor: pointer;
|
||||
transition-property: opacity, background-color;
|
||||
transition-duration: 0.15s;
|
||||
border-radius: 100%;
|
||||
|
||||
+desktop() {
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
&.on {
|
||||
background-color: rgba(#fff, 0.7);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&.login {
|
||||
&.off {
|
||||
background-image: url('/resources/images/icon_login_white.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&.settings {
|
||||
&.off {
|
||||
background-image: url('/resources/images/icon_settings_white.svg');
|
||||
}
|
||||
|
||||
&.on {
|
||||
background-image: url('/resources/images/icon_settings_black.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&.fullscreen {
|
||||
background-image: url('/resources/images/icon_fullscreen_white.svg');
|
||||
|
||||
&.on {
|
||||
background-image: url('/resources/images/icon_fullscreen_exit_white.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&.screen {
|
||||
&.on {
|
||||
background-image: url('/resources/images/no-share-screen-black.svg');
|
||||
}
|
||||
|
||||
&.off {
|
||||
background-image: url('/resources/images/share-screen-white.svg');
|
||||
}
|
||||
|
||||
&.unsupported {
|
||||
background-image: url('/resources/images/no-share-screen-white.svg');
|
||||
background-color: rgba(#d42241, 0.7);
|
||||
}
|
||||
|
||||
&.need-extension {
|
||||
background-image: url('/resources/images/share-screen-extension.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&.raise-hand {
|
||||
background-image: url('/resources/images/icon-hand-white.svg');
|
||||
|
||||
&.on {
|
||||
background-image: url('/resources/images/icon-hand-black.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&.leave-meeting {
|
||||
background-image: url('/resources/images/leave-meeting.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -37,6 +37,7 @@ body {
|
|||
|
||||
// Components
|
||||
@import './components/Room';
|
||||
@import './components/Sidebar';
|
||||
@import './components/Me';
|
||||
@import './components/Peers';
|
||||
@import './components/Peer';
|
||||
|
|
|
|||
Loading…
Reference in New Issue