Skip to content

Instantly share code, notes, and snippets.

@nparsons08 nparsons08/voxeet.js Secret forked from LukeSmetham/voxeet.js
Created Sep 25, 2019

Embed
What would you like to do?
import { css } from "styled-components";
export default css`
/*
* Main Wrapper
*/
.vxt-conference-attendees {
background: ${({ theme }) => theme.color.background} !important;
}
@media screen and (max-width: 767px) {
.vxt-conference-attendees .sidebar-container {
margin-bottom: 80px !important;
}
}
/*
* Attendees Settings
*/
.attendees-settings {
background: #000000 !important;
height: calc(100% - 96px) !important;
& .attendees-settings-header {
border-color: ${({ theme }) => theme.color.gray} !important;
}
& h1 {
color: #ffffff !important;
}
& .settings {
height: inherit !important;
background: #000000 !important;
& .loadbar {
padding: 0px !important;
& li {
background: ${({ theme }) => theme.color.slate} !important;
& > .ins {
background: ${({ theme }) => theme.color.purple} !important;
}
}
}
& .content .form-group select {
border-color: ${({ theme }) => theme.color.gray} !important;
color: #ffffff !important;
padding: 4px;
}
& .content p {
color: white !important;
opacity: 0.56 !important;
}
}
}
/*
* AttendeesList
*/
.attendees-list {
background: #000000 !important;
height: calc(100% - 96px) !important;
& .attendees-list-header,
& ul {
border-color: ${({ theme }) => theme.color.gray} !important;
}
& .attendees-list-header h1,
& .title-section,
& .participant-details .participant-username {
color: #ffffff !important;
}
& .title-section {
opacity: 0.56;
}
}
/*
* View Switcher
*/
.SidebarList {
background: ${({ theme }) => theme.color.gray} !important;
}
.vxt-conference-attendees,
.vxt-conference-attendees .SidebarSpeaker .active-speaker .video-frame {
background: ${({ theme }) => theme.color.background} !important;
& p {
color: ${({ theme }) => theme.color.black};
}
}
/*
* Notification Snackbar
*/
.vxt-conference-attendees .onboardingmessage,
.vxt-conference-attendees .onboardingmessage-fadeout {
width: inherit !important;
top: inherit !important;
left: 50% !important;
right: inherit !important;
bottom: 120px !important;
padding: 20px 16px !important;
background: ${({ theme }) => theme.color.gradient} !important;
border-radius: ${({ theme }) => theme.borderRadius}px;
transform: translateX(-50%) !important;
.chat-open & {
transform: translateX(calc(-50% - (376px / 2))) !important;
}
}
/*
* Bottom Bar
*/
.vxt-bottom-bar {
background-color: transparent !important;
width: auto !important;
left: 0 !important;
right: 0 !important;
transition: right 250ms;
.chat-open & {
@media (min-width: ${({ theme: { breakpoints } }) => breakpoints.sm}px) {
right: 376px !important;
}
}
}
.vxt-conference-attendees
.SidebarSpeaker
.active-speaker
.video-frame
.fullscreen-screenshare {
height: 30px !important;
}
/*
* Attendee
*/
/* Video Wrapper */
.vxt-widget-fullscreen-on
.vxt-conference-attendees
.SidebarTiles
.tile-item
.tile-video,
.vxt-conference-attendees {
background-color: ${({ theme }) => theme.color.background} !important;
}
/* Name Bar */
.vxt-conference-attendees .participant-bar {
background-color: #232328 !important;
border: 0 !important;
}
/* Waiting for attendees placeholder */
.vxt-conference-attendees .conference-empty p {
opacity: 1 !important;
background-image: ${({ theme }) => theme.color.gradient} !important;
}
/*
* Chat
*/
.vxt-widget-fullscreen-on
.vxt-conference-attendees
.sidebar-container.attendees-list-opened {
margin-right: 376px !important;
}
/*
* Error Banner
*/
.onboardingmessagewithaction-error {
background: ${({ theme }) => theme.color.red} !important;
}
`;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.