Github-Mirror/pocketbase
1
0
Fork 0
mirror of https://github.com/pocketbase/pocketbase.git synced 2026-09-14 10:30:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

[#7648] fixed firefox autoexpandable input and updated dark theme colors

Browse Source
This commit is contained in:
Gani Georgiev
2026-04-19 23:44:04 +03:00
parent c3a53cb183
commit 93e6ebfe49
11 changed files with 83 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/css/base.css
+1 -1
View File
@@ -113,7 +113,7 @@ video {
}
::selection {
background: rgba(0, 0, 0, 0.2);
background: var(--selectionColor);
}
:root {
ui/src/css/form.css
+25 -4
View File
@@ -487,17 +487,38 @@ button {
border-radius: var(--borderRadius);
}
}
.autoexpand-wrapper > .input,
textarea {
padding-top: 8px;
padding-bottom: 9px;
line-height: 1.5;
resize: vertical;
min-height: 38px;
max-height: 300px;
&.autoexpand {
/* @todo check firefox support */
field-sizing: content;
@supports (field-sizing: content) {
field-sizing: content;
resize: none;
}
}
}
/* @todo remove after Firefox add support for "field-sizing:content" */
/* note: based on https://chriscoyier.net/2023/09/29/css-solves-auto-expanding-textareas-probably-eventually/ */
.autoexpand-wrapper {
display: grid;
> textarea {
resize: none;
min-height: 38px;
max-height: 300px;
}
> .input {
white-space: pre-wrap;
visibility: hidden;
overflow: auto;
}
> .input,
> textarea {
/* Place on top of each other */
grid-area: 1 / 1 / 2 / 2;
}
}
ui/src/css/vars.css
+14 -14
View File
@@ -68,7 +68,7 @@
--surfaceSuccessColor: color-mix(in srgb, var(--successColor), white 80%);
--surfaceWarningColor: color-mix(in srgb, var(--warningColor), white 80%);
--surfaceDangerColor: color-mix(in srgb, var(--dangerColor), white 80%);
--selectionColor: var(--surfaceAlt3Color);
--selectionColor: rgba(34, 36, 42, 0.22);
--inputColor: var(--surfaceAlt2Color);
--inputFocusColor: var(--surfaceAlt3Color);
--inputBorderColor: var(--surfaceAlt4Color);
@@ -138,28 +138,27 @@
/* dark */
[data-color-scheme="dark"],
[data-color-scheme="dark"] .dropdown {
--surfaceColor: #282828;
--surfaceAlt1Color: color-mix(in srgb, var(--surfaceColor), white 2%);
--surfaceAlt2Color: color-mix(in srgb, var(--surfaceColor), white 4%);
--surfaceAlt3Color: color-mix(in srgb, var(--surfaceColor), white 6%);
--surfaceAlt4Color: color-mix(in srgb, var(--surfaceColor), white 9%);
--surfaceAlt5Color: color-mix(in srgb, var(--surfaceColor), white 12%);
--surfaceColor: #212121;
--surfaceAlt1Color: color-mix(in srgb, var(--surfaceColor), white 3%);
--surfaceAlt2Color: color-mix(in srgb, var(--surfaceColor), white 7%);
--surfaceAlt3Color: color-mix(in srgb, var(--surfaceColor), white 12%);
--surfaceAlt4Color: color-mix(in srgb, var(--surfaceColor), white 14%);
--surfaceAlt5Color: color-mix(in srgb, var(--surfaceColor), white 16%);
--surfaceTxtColor: #dedede;
--tooltipTxtColor: var(--surfaceTxtColor);
--surfaceTxtHintColor: color-mix(in srgb, var(--surfaceTxtColor), transparent 45%);
--surfaceTxtDisabledColor: color-mix(in srgb, var(--surfaceTxtColor), transparent 65%);
--secondaryColor: var(--surfaceAlt3Color);
--secondaryColor: var(--surfaceAlt2Color);
--secondaryTxtColor: var(--surfaceTxtColor);
--secondaryTxtColor: var(--surfaceTxtColor);
--secondaryAlt1Color: var(--surfaceAlt4Color);
--secondaryAlt2Color: var(--surfaceAlt5Color);
--secondaryAlt1Color: var(--surfaceAlt3Color);
--secondaryAlt2Color: var(--surfaceAlt4Color);
--primaryColor: #1e1e1e;
--primaryColor: #161616;
--primaryTxtColor: var(--surfaceTxtColor);
--primaryAlt1Color: color-mix(in srgb, var(--primaryColor), black 8%);
--primaryAlt2Color: color-mix(in srgb, var(--primaryColor), black 16%);
--primaryAlt1Color: color-mix(in srgb, var(--primaryColor), white 1.2%);
--primaryAlt2Color: color-mix(in srgb, var(--primaryColor), white 1.7%);
--primaryTxtHintColor: color-mix(in srgb, var(--primaryTxtColor), transparent 35%);
--primaryTxtDisabledColor: color-mix(in srgb, var(--primaryTxtColor), transparent 50%);
@@ -187,6 +186,7 @@
--dangerAlt2Color: color-mix(in srgb, var(--dangerColor), black 15%);
--surfaceDangerColor: color-mix(in srgb, var(--dangerColor), var(--surfaceColor) 45%);
--selectionColor: rgba(255, 255, 255, 0.22);
--inputColor: var(--surfaceAlt2Color);
--inputFocusColor: var(--surfaceAlt3Color);
--inputBorderColor: var(--surfaceAlt4Color);