diff --git a/static/koboldai.css b/static/koboldai.css index fc770080..1971c304 100644 --- a/static/koboldai.css +++ b/static/koboldai.css @@ -1104,16 +1104,17 @@ body { /* ------------------- Desktop Mode --------------------------- */ .main-grid { transition: margin-left .5s; - display: grid; - height: 98vh; + + display: flex; + flex-direction: column; + + height: 100vh; + padding: 10px; + margin-left: var(--setting_menu_closed_width_no_pins_width); margin-right: var(--flyout_menu_closed_width); - grid-template-areas: "menuicon gamescreen options lefticon" - "menuicon theme theme lefticon" - "menuicon inputrow inputrow lefticon"; - grid-template-columns: 30px auto var(--story_options_size) 30px; - grid-template-rows: auto min-content 100px; } + .main-grid.settings_pinned { margin-left: var(--flyout_menu_width); grid-template-columns: 30px auto var(--story_options_size) 30px; @@ -1150,6 +1151,16 @@ body { } } +#main-container { + display: flex; + + /* Don't expand! */ + min-height: 0; + + /* Grow vertically as a child; take up as much space as we can! */ + flex-grow: 1; +} + /* ---------------------------------- GAME SCREEN ----------------------------------*/ @@ -1159,11 +1170,10 @@ body { box-shadow: var(--light_shadow_value); color: var(--gamescreen_text); width: 100%; - grid-area: gamescreen; + flex-grow: 1; display: flex; flex-direction: column; overflow-x: hidden; - margin-top: 10px; vertical-align: bottom; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: calc((1em*var(--game_screen_font_size_adjustment)) + var(--font_size_adjustment)); @@ -1176,7 +1186,7 @@ body { } .gametext { - margin-top: auto; + /* margin-top: 2%; */ padding: 0px 5px 10px 10px; vertical-align: bottom; overflow-y: scroll; @@ -1199,8 +1209,7 @@ body { } .sequence_area { - margin-top: 10px; - grid-area: options; + max-width: var(--story_options_size); background-color: var(--sequence_area_background); overflow-y: scroll; } @@ -1297,7 +1306,6 @@ body { } .inputrow { - grid-area: inputrow; z-index: 2; display: grid; grid-template-areas: "textarea statusbar statusbar statusbar" @@ -1322,11 +1330,9 @@ body { #random_game_prompt{ display: flex; flex-direction: column; - grid-area: textarea; } #themetext{ - grid-area: textarea; height: 100%; width: 100%; padding: 5px; diff --git a/templates/index_new.html b/templates/index_new.html index 2475de33..09cc0f82 100644 --- a/templates/index_new.html +++ b/templates/index_new.html @@ -45,24 +45,19 @@
-
-

Disconnected

-
- - -                          -                          -                          -                          -                          -                          -                          - +
+
+

Disconnected

+
+ +
+ + + +
- - -
+