rDrama/chat/src/App.css

139 lines
1.9 KiB
CSS

html,
body {
overscroll-behavior-y: none;
}
html {
height: -webkit-fill-available;
}
body {
min-height: 100vh;
min-height: calc(var(--vh, 1vh) * 100);
overflow: hidden;
/* mobile viewport bug fix */
min-height: -webkit-fill-available;
}
.App {
position: fixed;
width: 100vw;
display: flex;
overflow: hidden;
}
.App-wrapper {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 2rem;
}
.App-heading {
flex-basis: 3rem;
display: flex;
align-items: center;
}
.App-heading small {
opacity: 0.2;
font-size: 10px;
}
.App-side {
height: 100%;
flex: 1;
background: var(--gray-500);
position: relative;
}
.App-content {
position: relative;
flex: 3;
height: 62vh;
height: calc(var(--vh, 1vh) * 72);
max-height: 1000px;
overflow: auto;
-ms-overflow-style: none;
scrollbar-width: none;
display: flex;
flex-direction: column;
}
.App-content::-webkit-scrollbar {
display: none;
}
.App-drawer {
z-index: 2;
display: flex;
background: rgb(var(--background));
height: 100%;
}
.App-center {
display: flex;
align-items: flex-start;
}
.App-bottom-wrapper {
display: flex;
align-items: flex-start;
}
.App-bottom {
flex: 3;
}
.App-bottom-dummy {
flex: 1;
}
.App-bottom-extra {
padding: .25rem;
}
/* On mobile, hide the sidebar and make the input full-width. */
@media screen and (max-width: 1100px) {
.App-wrapper {
margin: 0 auto;
}
.App-heading {
padding: 0 1rem;
}
.App-side {
display: none;
}
.App-bottom-dummy {
display: none;
}
.App-bottom-wrapper {
padding-right: 1rem;
padding-left: 1rem;
}
.App-content__reduced {
height: calc(var(--vh, 1vh) * 55);
}
}
lite-youtube {
min-width: min(80vw, 500px);
}
.btn-secondary {
border: none !important;
}
.btn-secondary:focus {
border: none !important;
box-shadow: none !important;
}