mobile css fixes

added media query to detect devices with touchscreen and set --left-column to 100% rather than 500px
This commit is contained in:
Redacted
2023-11-05 09:28:32 -06:00
committed by GitHub
parent 2919774c01
commit 3f75a211b3
7 changed files with 9 additions and 6 deletions
-1
View File
@@ -2,7 +2,6 @@
:root {
--font: "Source Sans Pro", 'ui-sans-serif', 'system-ui', sans-serif;
--font-size: 16px;
--left-column: 500px;
--highlight-color: #8a3df6; /* Purple color */
--inactive-color: #404040; /* Darker shade of gray */
--background-color: #000000; /* Black */
-1
View File
@@ -4,7 +4,6 @@
--font: 'NotoSans';
--font-mono: 'ui-monospace', 'Consolas', monospace;
--font-size: 16px;
--left-column: 500px;
--highlight-color: #ce6400;
--inactive-color: #4e1400;
--background-color: #000000;
-1
View File
@@ -4,7 +4,6 @@
--font: 'NotoSans';
--font-mono: 'ui-monospace', 'Consolas', monospace;
--font-size: 16px;
--left-column: 500px;
--primary-50: #7dffff;
--primary-100: #72e8e8;
--primary-200: #67d2d2;
-1
View File
@@ -3,7 +3,6 @@
--font: 'system-ui', 'ui-sans-serif', 'system-ui', "Roboto", sans-serif;
--font-mono: 'ui-monospace', 'Consolas', monospace;
--font-size: 16px;
--left-column: 500px;
--primary-100: #2b303b;
--primary-200: #15181e;
--primary-300: #0a0c0e;
-1
View File
@@ -4,7 +4,6 @@
--font: 'NotoSans';
--font-mono: 'ui-monospace', 'Consolas', monospace;
--font-size: 16px;
--left-column: 500px;
--primary-50: #7dffff;
--primary-100: #72e8e8;
--primary-200: #67d2d2;
-1
View File
@@ -3,7 +3,6 @@
--font: "Source Sans Pro", 'ui-sans-serif', 'system-ui', "Roboto", sans-serif;
--font-mono: 'IBM Plex Mono', 'ui-monospace', 'Consolas', monospace;
--font-size: 14px;
--left-column: 500px;
--highlight-color: #ff00f2;
--inactive-color: #005485;
--background-color: #000000;
+9
View File
@@ -279,3 +279,12 @@ table.settings-value-table td { padding: 0.4em; border: 1px solid #ccc; max-widt
--spacing-xl: 5px;
--spacing-xxl: 6px;
}
/* Apply different styles for devices with coarse pointers */
@media (hover: none) and (pointer: coarse) {
:root, .light, .dark {
--left-column: 100%;
}
.gradio-slider input[type="number"] { text-align: center; }
}