diff --git a/themes/LibreMiami/main.scss b/themes/LibreMiami/main.scss index 27f5b5c..e75c5f6 100644 --- a/themes/LibreMiami/main.scss +++ b/themes/LibreMiami/main.scss @@ -8,8 +8,29 @@ $border-color: white; @import '../MetroMumbleDark/main'; -.toolbar-vertical ~ .chat { - height: calc(98% - 20px) +#container { + display: grid; + grid-template-columns: min-content 1fr 2fr; + grid-gap: 0.5em; +} +.toolbar { + padding-top: 0.7em; + margin-left: 0.25em; + margin-right: auto; + float: none; +} +.chat { + width: 100% !important; + height: calc(98% - 20px); + align-self: center; + margin: 0 !important; +} +.channel-root-container { + width: 97% !important; + float: none; + margin: 0 !important; + align-self: center; + overflow: visible; } .connect-dialog input[type="text"] { outline: none; @@ -47,9 +68,40 @@ form[data-bind="submit: submitMessageBox"] { .log { background-color: $bg-color; border-color: $border-color; - height: calc(100% - 43px); + height: calc(100% - 60px); } .channel-root-container { background-color: $bg-color; border-color: $border-color; +} +@media(max-width: 800px){ + .toolbar { + float: none; + flex-direction: row; + margin-top: 0; + padding-top: 0; + } + .toolbar img { + margin-right: 0.5em; + } + #container { + grid-template-columns: 1fr; + grid-template-rows: min-content 2fr 1fr; + justify-items: center; + padding: 1em; + } + .channel-root-container { + width: 100% !important; + height: 80% !important; + align-self: start; + } + .chat { + height: auto !important; + align-self: stretch; + } +} +@media(max-width: 500px) { + .dialog { + min-width: 80%; + } } \ No newline at end of file