128 lines
3.3 KiB
Stylus
128 lines
3.3 KiB
Stylus
@import 'nib';
|
|
|
|
global-reset();
|
|
|
|
@import './mixins';
|
|
@import './fonts';
|
|
@import './reset';
|
|
@import './keyframes';
|
|
|
|
:root {
|
|
--logo: url('/resources/images/logo.svg');
|
|
--logo-width: 8%;
|
|
--logo-height: 4%;
|
|
|
|
--background: url('/resources/images/background.svg');
|
|
--background-color: rgba(51, 51, 51, 1.0);
|
|
|
|
--circle-button-color: rgba(255, 255, 255, 0.3);
|
|
--circle-button-toggled-color: rgba(255, 255, 255, 0.7);
|
|
--circle-button-unsupported-color: rgba(212, 34, 65, 0.7);
|
|
--circle-button-diabled-color: rgba(255, 255, 255, 0.5);
|
|
--circle-button-size: 2.5em;
|
|
|
|
--media-control-button-color: rgba(255, 255, 255, 0.85);
|
|
--media-control-botton-on: rgba(255, 255, 255, 0.7);
|
|
--media-control-botton-off: rgba(212, 34, 65, 0.7);
|
|
--media-control-botton-disabled: rgba(255, 255, 255, 0.5)
|
|
--media-control-button-size: 1.5em;
|
|
|
|
--me-shadow: 0px 5px 12px 2px rgba(17, 17, 17, 0.5);
|
|
--me-border: 1px solid rgba(255, 255, 255, 0.15);
|
|
--me-width: 20vmin;
|
|
--me-height: 15vmin;
|
|
|
|
--peer-shadow: 0px 5px 12px 2px rgba(17, 17, 17, 0.5);
|
|
--peer-border: 1px solid rgba(255, 255, 255, 0.15);
|
|
--peer-empty-avatar: url('/resources/images/buddy.svg');
|
|
--peer-bg-color: rgba(42, 75, 88, 0.9);
|
|
--peer-video-bg-color: rgba(0, 0, 0, 0.75);
|
|
|
|
--chat-message-color: rgba(0, 0, 0, 0.1);
|
|
--chat-input-bg-color: rgba(255, 255, 255, 1.0);
|
|
--chat-input-text-color: rgba(0, 0, 0, 1.0);
|
|
--chat-send-bg-color: rgba(170, 238, 255, 1.0);
|
|
|
|
--filesharing-bg-color: rgba(170, 238, 255, 1.0);
|
|
|
|
--notification-info-bg-color: rgba(10, 29, 38, 0.75);
|
|
--notification-info-text-color: rgba(255, 255, 255, 0.65);
|
|
--notification-error-bg-color: rgba(255, 25, 20, 0.65);
|
|
--notification-error-text-color: rgba(255, 255, 255, 0.85);
|
|
|
|
--active-speaker-border-color: rgba(255, 255, 255, 1.0);
|
|
--selected-peer-border-color: rgba(55, 126, 255, 1.0);
|
|
}
|
|
|
|
html {
|
|
height: 100%;
|
|
font-family: 'Roboto';
|
|
font-weight: 300;
|
|
overflow-x: hidden;
|
|
overflow-y: hidden;
|
|
|
|
+mobile() {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
body {
|
|
height: 100%;
|
|
overflow-x: hidden;
|
|
overflow-y: hidden;
|
|
background-color: var(--background-color);
|
|
|
|
+desktop() {
|
|
font-size: 16px;
|
|
background-image: var(--background);
|
|
background-attachment: fixed;
|
|
background-position: center;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
|
|
#multiparty-meeting {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
// Components
|
|
@import './components/Room';
|
|
@import './components/Logo';
|
|
@import './components/Sidebar';
|
|
@import './components/Me';
|
|
@import './components/Peers';
|
|
@import './components/Peer';
|
|
@import './components/PeerView';
|
|
@import './components/HiddenPeers';
|
|
@import './components/ScreenView';
|
|
@import './components/Notifications';
|
|
@import './components/Chat';
|
|
@import './components/ToolArea';
|
|
@import './components/ParticipantList';
|
|
@import './components/FullScreenView';
|
|
@import './components/FullView';
|
|
@import './components/Filmstrip';
|
|
@import './components/FileSharing';
|
|
@import './components/AudioPeers';
|
|
|
|
// Hack to detect in JS the current media query
|
|
#multiparty-meeting-media-query-detector {
|
|
position: absolute;
|
|
z-index: -1000;
|
|
bottom: 0;
|
|
left: 0;
|
|
height: 1px;
|
|
width: 1px;
|
|
|
|
// In desktop let it "visible" so elem.offsetParent returns the parent element
|
|
+desktop() {}
|
|
|
|
// In mobile ensure it's not displayed so elem.offsetParent returns null
|
|
+mobile() {
|
|
display: none;
|
|
position: fixed; // Required for old IE
|
|
}
|
|
}
|