jiti-meet/css/_side_toolbar_container.scss

116 lines
2.3 KiB
SCSS

/**
* Toolbar side panel main container element.
*/
.use-new-toolbox #sideToolbarContainer {
background-color: $newToolbarBackgroundColor;
/**
* Make the sidebar flush with the top of the toolbar. Take the size of
* the toolbar and subtract from 100%.
*/
height: calc(100% - #{$newToolbarSizeWithPadding});
left: 0;
.side-toolbar-close {
background: gray;
border: 3px solid rgba(255, 255, 255, 0.1);
border-radius: 100%;
color: white;
cursor:pointer;
height: 10px;
line-height: 10px;
padding: 4px;
position: absolute;
right: 5px;
text-align: center;
top: 5px;
width: 10px;
z-index: 1;
}
#chatconversation {
top: 15px;
}
}
#sideToolbarContainer {
background-color: $sideToolbarContainerBg;
height: 100%;
left: $defaultToolbarSize;
max-width: $sidebarWidth;
overflow: hidden;
position: absolute;
top: 0;
width: 0;
z-index: $sideToolbarContainerZ;
/**
* Labels inside the side panel.
*/
label {
color: $baseLight;
}
/**
* Form elements and blocks.
*/
input,
a,
.sideToolbarBlock,
.form-control {
display: block;
margin-top: 15px;
margin-left: 10%;
width: 80%;
}
/**
* Specify styling of elements inside a block.
*/
.sideToolbarBlock {
input, a {
margin-left: 0;
margin-top: 5px;
width: 100%;
}
}
/**
* Inner container, for example settings or profile.
*/
.sideToolbarContainer__inner {
display: none;
height: 100%;
width: $sidebarWidth;
position: absolute;
box-sizing: border-box;
color: #FFF;
.input-control {
border: 0;
}
/**
* Titles and subtitles of inner containers.
*/
div.title {
margin: 24px 0 11px;
}
/**
* Main title size.
*/
div.title {
color: $toolbarTitleColor;
text-align: center;
font-size: $toolbarTitleFontSize;
}
/**
* First element after a title.
*/
.first {
margin-top: 0 !important;
}
}
}