jiti-meet/css/_side_toolbar_container.scss

127 lines
2.6 KiB
SCSS

/**
* Toolbar side panel main container element.
*/
#sideToolbarContainer {
display: inline-block;
position:absolute;
top: 0px;
left: $defaultToolbarSize;
width: 0;
background-color: rgba(0,0,0,0.8);
height: 100%;
max-width: $sidebarWidth;
z-index: 800;
overflow: hidden;
/**
* Labels inside the side panel.
*/
label {
color: $defaultColor;
}
/**
* Form elements and blocks.
*/
input, label, select, a,
.sideToolbarBlock, .input-control, .button-control {
display: inline-block;
margin-top: 15px;
margin-left: 10%;
width: 80%;
}
/**
* Specify colors for edit elements.
*/
select, input[type="button"], input[type="text"],
input[type="reset"], input[type="submit"] {
color: $inputColor;
background: $inputBackground;
border: none;
}
/**
* Specify styling of elements inside a block.
*/
.sideToolbarBlock {
input, label, button, a, select {
margin-top: 5px;
margin-left: 0;
width: 100%;
}
.startMutedLabel,
.followMeLabel {
display: inline;
margin-top: 0;
}
}
/**
* Inner container, for example contact list, settings or profile.
*/
.sideToolbarContainer__inner {
display: none;
height: 100%;
width: $sidebarWidth;
position: absolute;
box-sizing: border-box;
color: #FFF;
/**
* Titles and subtitles of inner containers.
*/
> div.title,
div.subTitle {
text-align: left;
margin: 10px 0px 10px 0px;
}
/**
* Main title size.
*/
> div.title {
color: $defaultColor !important;
text-align: center;
font-size: 16px;
}
/**
* Subtitle specific properties.
*/
> div.subTitle {
font-size: 11px;
font-weight: 500;
color: $defaultSideBarFontColor !important;
margin-left: 10%;
}
/**
* First element after a title.
*/
.first {
margin-top: 0px !important;
}
/**
* Buttons in the side toolbar container.
*/
.button-control {
margin: 9px 0;
width: 100%;
}
}
}
#device_settings {
width : auto !important;
text-align: center;
}
#startAudioMuted,
#startVideoMuted,
#followMeCheckBox {
width: 13px !important;
}