chris/website-gemompel
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Remove hard-coded dialog width/height and size them dynamically

Browse source
This commit is contained in:
Jonas Herzig 2018-10-08 17:32:38 +02:00
parent 8d39b0bdb1
commit ae1479368c
1 changed files with 6 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
themes/MetroMumbleLight/main.scss
View file

@ -373,14 +373,9 @@ form {
border-bottom: 1px solid $dialog-header-border-bottom-color; border-bottom: 1px solid $dialog-header-border-bottom-color;
} }
.dialog-footer { .dialog-footer {
position: absolute;
bottom: 0px;
width: calc(100% - 20px); width: calc(100% - 20px);
margin: 10px; margin: 10px;
} }
.dialog-close {
float: left;
}
.dialog-submit { .dialog-submit {
float: right; float: right;
} }
@ -399,18 +394,18 @@ form {
} }
.dialog { .dialog {
position: absolute; position: absolute;
max-height: calc(100% - 20px);
max-width: calc(100% - 20px);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: auto;
background-color: $dialog-bg-color; background-color: $dialog-bg-color;
color: $dialog-color; color: $dialog-color;
border: 1px $dialog-border-color solid; border: 1px $dialog-border-color solid;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25); box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
z-index: 20; z-index: 20;
} }
.settings-dialog {
width: 450px;
height: 320px;
top: calc(50% - 160px);
left: calc(50% - 225px);
}
.settings-dialog table { .settings-dialog table {
width: 100%; width: 100%;
padding: 5px; padding: 5px;
@ -445,12 +440,6 @@ form {
top: calc(50% - 10px); top: calc(50% - 10px);
left: calc(50% - 100px); left: calc(50% - 100px);
} }
.connect-dialog {
width: 300px;
height: 227px;
top: calc(50% - 100px);
left: calc(50% - 150px);
}
.connect-dialog input[type=text] { .connect-dialog input[type=text] {
font-size: 15px; font-size: 15px;
border: 1px $dialog-input-border-color solid; border: 1px $dialog-input-border-color solid;
@ -469,15 +458,7 @@ form {
padding: 2px; padding: 2px;
width: calc(100% - 8px); width: calc(100% - 8px);
} }
.connect-dialog.error-dialog {
width: 400px;
left: calc(50% - 200px);
}
.connection-info-dialog { .connection-info-dialog {
width: 500px;
height: 400px;
top: calc(50% - 200px);
left: calc(50% - 250px);
h3 { h3 {
margin-bottom: 5px; margin-bottom: 5px;
} }