rixty/KoboldAI-Client
1
1
Fork 0
mirror of https://github.com/KoboldAI/KoboldAI-Client.git synced 2025-06-05 21:59:24 +02:00
Code Issues Projects Releases Wiki Activity

Merge pull request #434 from one-some/united

Browse Source 
UI: Change mobile aspect ratio threshold from 7/5 to 5/6
This commit is contained in:
henk717
2023-08-10 19:57:56 +02:00
committed by GitHub
parent 5f1be7c482 1632f3c684
commit 2938a9993a
1 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
static/koboldai.css
View File

@@ -1,10 +1,10 @@
/*----------------Global Colors------------------*/ /*----------------Global Colors------------------*/
@media only screen and (max-aspect-ratio: 7/5) { @media only screen and (max-aspect-ratio: 5/6) {
:root { :root {
--flyout_menu_width: 100%; --flyout_menu_width: 100%;
} }
} }
@media only screen and (min-aspect-ratio: 7/5) { @media only screen and (min-aspect-ratio: 5/6) {
:root { :root {
--flyout_menu_width: 402px; --flyout_menu_width: 402px;
} }
@@ -448,19 +448,19 @@ border-top-right-radius: var(--tabs_rounding);
cursor: pointer; cursor: pointer;
} }
@media only screen and (max-aspect-ratio: 7/5) { @media only screen and (max-aspect-ratio: 5/6) {
/* mobile */ /* mobile */
.menu_icon.hidden { .menu_icon.hidden {
display: inline-block !important; display: inline-block !important;
} }
} }
@media only screen and (max-aspect-ratio: 7/5) { @media only screen and (max-aspect-ratio: 5/6) {
.menu_pin { .menu_pin {
display: none; display: none;
} }
} }
@media only screen and (min-aspect-ratio: 7/5) { @media only screen and (min-aspect-ratio: 5/6) {
.menu_pin { .menu_pin {
position: absolute; position: absolute;
top:10px; top:10px;
@@ -516,7 +516,7 @@ border-top-right-radius: var(--tabs_rounding);
will-change: transform; will-change: transform;
} }
@media only screen and (min-aspect-ratio: 7/5) { @media only screen and (min-aspect-ratio: 5/6) {
.SideMenu.pinned { .SideMenu.pinned {
right: calc(100% - var(--flyout_menu_width)); right: calc(100% - var(--flyout_menu_width));
background-color: var(--flyout_background_pinned); background-color: var(--flyout_background_pinned);
@@ -906,7 +906,7 @@ border-top-right-radius: var(--tabs_rounding);
grid-area: lefticon; grid-area: lefticon;
} }
@media only screen and (max-aspect-ratio: 7/5) { @media only screen and (max-aspect-ratio: 5/6) {
/* mobile */ /* mobile */
.right_menu_icon.hidden { .right_menu_icon.hidden {
display: inline-block !important; display: inline-block !important;
@@ -937,7 +937,7 @@ border-top-right-radius: var(--tabs_rounding);
left: calc(100% - var(--flyout_menu_width)); left: calc(100% - var(--flyout_menu_width));
} }
@media only screen and (min-aspect-ratio: 7/5) { @media only screen and (min-aspect-ratio: 5/6) {
/* Desktop Mode */ /* Desktop Mode */
.rightSideMenu.pinned { .rightSideMenu.pinned {
left: calc(100% - var(--flyout_menu_width)); left: calc(100% - var(--flyout_menu_width));
@@ -959,14 +959,14 @@ border-top-right-radius: var(--tabs_rounding);
filter: brightness(40%); filter: brightness(40%);
} }
@media only screen and (max-aspect-ratio: 7/5) { @media only screen and (max-aspect-ratio: 5/6) {
/* mobile */ /* mobile */
.story_menu_pin { .story_menu_pin {
display: none; display: none;
} }
} }
@media only screen and (min-aspect-ratio: 7/5) { @media only screen and (min-aspect-ratio: 5/6) {
.story_menu_pin { .story_menu_pin {
position: absolute; position: absolute;
top:10px; top:10px;
@@ -1542,7 +1542,7 @@ body {
background-color: #cacaca80; background-color: #cacaca80;
} }
@media only screen and (min-aspect-ratio: 7/5) { @media only screen and (min-aspect-ratio: 5/6) {
/* ------------------- Desktop Mode --------------------------- */ /* ------------------- Desktop Mode --------------------------- */
.main-grid { .main-grid {
transition: margin-left .5s, margin-right .5s; transition: margin-left .5s, margin-right .5s;
@@ -1576,7 +1576,7 @@ body {
} }
@media only screen and (max-aspect-ratio: 7/5) { @media only screen and (max-aspect-ratio: 5/6) {
/* mobile */ /* mobile */
.main-grid { .main-grid {
transition: margin-left .5s; transition: margin-left .5s;
@@ -1657,7 +1657,7 @@ body {
display: none; display: none;
} }
@media only screen and (max-aspect-ratio: 7/5) { @media only screen and (max-aspect-ratio: 5/6) {
#option-container { #option-container {
margin-top: 5px; margin-top: 5px;
width: 100%; width: 100%;
@@ -1670,7 +1670,7 @@ body {
} }
} }
@media only screen and (min-aspect-ratio: 7/5) { @media only screen and (min-aspect-ratio: 5/6) {
#option-container { #option-container {
margin-top: 5px; margin-top: 5px;
width: 100%; width: 100%;
@@ -1964,7 +1964,7 @@ body {
overflow: hidden; overflow: hidden;
} }
@media only screen and (min-aspect-ratio: 7/5) { @media only screen and (min-aspect-ratio: 5/6) {
.paddingimage { .paddingimage {
grid-area: paddingimage; grid-area: paddingimage;
margin: auto auto auto auto; margin: auto auto auto auto;
@@ -1972,14 +1972,14 @@ body {
} }
@media only screen and (max-aspect-ratio: 7/5) { @media only screen and (max-aspect-ratio: 5/6) {
.paddingimage { .paddingimage {
visibility: hidden; visibility: hidden;
} }
} }
/*---------------------------------- Popups -------------------------------------------------*/ /*---------------------------------- Popups -------------------------------------------------*/
@media only screen and (max-aspect-ratio: 7/5) { @media only screen and (max-aspect-ratio: 5/6) {
.popup { .popup {
position: absolute; position: absolute;
top: 10vh; top: 10vh;
@@ -1996,7 +1996,7 @@ body {
} }
} }
@media only screen and (min-aspect-ratio: 7/5) { @media only screen and (min-aspect-ratio: 5/6) {
.popup { .popup {
position: absolute; position: absolute;
top: 10vh; top: 10vh;