Fix scrollbars and dialogs on lower resolutions

This commit is contained in:
Jan Oberhauser 2019-06-27 12:44:59 +02:00
parent a7cd27d745
commit 6cc6c6f138
2 changed files with 22 additions and 2 deletions

View file

@ -94,9 +94,13 @@ export default Vue.extend({
position: relative; position: relative;
width: 80%; width: 80%;
height: 80%; height: 80%;
margin: 8em auto; margin: 6em auto;
background-color: #fff; background-color: #fff;
border-radius: 2px; border-radius: 2px;
@media (max-height: 720px) {
margin: 1em auto;
height: 95%;
}
} }
} }

View file

@ -56,6 +56,11 @@ h1, h2, h3, h4, h5, h6 {
background-color: $--custom-dialog-background; background-color: $--custom-dialog-background;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
@media (max-height: 720px) {
margin: 1em auto !important;
}
.el-dialog__header { .el-dialog__header {
padding: 15px 20px; padding: 15px 20px;
.el-dialog__title { .el-dialog__title {
@ -462,9 +467,20 @@ h1, h2, h3, h4, h5, h6 {
background: #ddd; background: #ddd;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: #ddd;
border-radius: 6px; border-radius: 6px;
background: lighten($--color-primary, 20%);
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: $--color-primary; background: $--color-primary;
} }
.el-dialog__wrapper {
&::-webkit-scrollbar-track,
&::-webkit-scrollbar-track:hover {
background: #fff;
}
&::-webkit-scrollbar-thumb {
background: $--color-primary;
border-radius: 6px;
}
}