tabshift/pocketbase
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

minor color and styles improvements

Browse Source
This commit is contained in:
Gani Georgiev
2026-04-21 17:05:33 +03:00
parent 3c33868ea8
commit 84b50c4869
11 changed files with 45 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@@ -6,6 +6,8 @@
- Fixed `editor` floating dialogs position when scrolling ([#7653](https://github.com/pocketbase/pocketbase/issues/7653)). - Fixed `editor` floating dialogs position when scrolling ([#7653](https://github.com/pocketbase/pocketbase/issues/7653)).
- Other minor UI contrast and styles improvements.
## v0.37.2 ## v0.37.2

2
ui/dist/assets/index-CbOtUFMZ.css → ui/dist/assets/index-B-u8SRs-.css vendored
View File

File diff suppressed because one or more lines are too long

10
ui/dist/assets/index-Cj2KMr38.js → ui/dist/assets/index-Cp0MYHN1.js vendored
View File

File diff suppressed because one or more lines are too long

4
ui/dist/index.html vendored
View File

@@ -13,9 +13,9 @@
<!-- prism --> <!-- prism -->
<script src="./libs/prism/prism.js" data-manual></script> <script src="./libs/prism/prism.js" data-manual></script>
<script type="module" crossorigin src="./assets/index-Cj2KMr38.js"></script> <script type="module" crossorigin src="./assets/index-Cp0MYHN1.js"></script>
<link rel="modulepreload" crossorigin href="./assets/pocketbase.es-B_4DUNUU.js"> <link rel="modulepreload" crossorigin href="./assets/pocketbase.es-B_4DUNUU.js">
<link rel="stylesheet" crossorigin href="./assets/index-CbOtUFMZ.css"> <link rel="stylesheet" crossorigin href="./assets/index-B-u8SRs-.css">
</head> </head>
<body> <body>
</body> </body>

8
ui/src/css/form.css
View File

@@ -585,6 +585,7 @@ button {
&.required label, &.required label,
label.required, label.required,
.required > label, .required > label,
label:has(~ .autoexpand-wrapper textarea[required]),
label:has(~ [required]), label:has(~ [required]),
label:has(~ .input.required) { label:has(~ .input.required) {
&::after { &::after {
@@ -599,6 +600,7 @@ button {
&.disabled label, &.disabled label,
label.disabled, label.disabled,
.disabled > label, .disabled > label,
label:has(~ .autoexpand-wrapper textarea[disabled]),
label:has(~ [disabled]), label:has(~ [disabled]),
label:has(~ .input.disabled) { label:has(~ .input.disabled) {
color: var(--surfaceTxtDisabledColor); color: var(--surfaceTxtDisabledColor);
@@ -672,15 +674,15 @@ button {
} }
.field-list { .field-list {
label {
padding-bottom: 9px;
}
.field-list-content { .field-list-content {
overflow: auto; overflow: auto;
max-height: 500px; max-height: 500px;
scrollbar-width: thin; scrollbar-width: thin;
color: var(--surfaceTxtColor); color: var(--surfaceTxtColor);
} }
label + .field-list-content {
margin-top: 8px;
}
.field-list-item { .field-list-item {
display: flex; display: flex;
width: 100%; width: 100%;

13
ui/src/css/ruleField.css
View File

@@ -35,8 +35,10 @@
font-size: var(--smFontSize); font-size: var(--smFontSize);
padding: 8px 10px; padding: 8px 10px;
color: var(--surfaceTxtHintColor); color: var(--surfaceTxtHintColor);
background: var(--surfaceAlt4Color); background: var(--inputFocusColor);
box-shadow: inset 1px -1px 2px rgba(0,0,0,0.03); border: 1px solid var(--surfaceAlt5Color);
border-top: 0;
border-right: 0;
transition: transition:
color var(--animationSpeed), color var(--animationSpeed),
background var(--animationSpeed); background var(--animationSpeed);
@@ -44,14 +46,17 @@
&:active, &:active,
&:focus-visible { &:focus-visible {
color: var(--successColor); color: var(--successColor);
background: var(--surfaceAlt5Color); background: var(--inputBorderColor);
} }
&[disabled] { &[disabled] {
cursor: not-allowed; cursor: not-allowed;
color: var(--surfaceTxtDisabledColor); color: var(--surfaceTxtDisabledColor);
background: var(--surfaceAlt4Color); background: var(--surfaceAlt3Color);
} }
} }
.input:focus-within ~ .superuser-toggle {
background: var(--inputBorderColor);
}
label { label {
position: relative; position: relative;
z-index: 2; z-index: 2;

24
ui/src/css/vars.css
View File

@@ -12,9 +12,9 @@
--primaryTxtHintColor: color-mix(in srgb, var(--primaryTxtColor), transparent 35%); --primaryTxtHintColor: color-mix(in srgb, var(--primaryTxtColor), transparent 35%);
--primaryTxtDisabledColor: color-mix(in srgb, var(--primaryTxtColor), transparent 50%); --primaryTxtDisabledColor: color-mix(in srgb, var(--primaryTxtColor), transparent 50%);
--secondaryColor: #e8eaee; --secondaryColor: #e4e8ec;
--secondaryAlt1Color: #dcdfe5; --secondaryAlt1Color: #dbe0e6;
--secondaryAlt2Color: #c4cbd4; --secondaryAlt2Color: #d2d9df;
--secondaryTxtColor: var(--primaryColor); --secondaryTxtColor: var(--primaryColor);
--secondaryTxtHintColor: color-mix(in srgb, var(--secondaryTxtColor), transparent 35%); --secondaryTxtHintColor: color-mix(in srgb, var(--secondaryTxtColor), transparent 35%);
--secondaryTxtDisabledColor: color-mix(in srgb, var(--secondaryTxtColor), transparent 50%); --secondaryTxtDisabledColor: color-mix(in srgb, var(--secondaryTxtColor), transparent 50%);
@@ -55,20 +55,20 @@
--accentTxtDisabledColor: color-mix(in srgb, var(--accentTxtColor), transparent 50%); --accentTxtDisabledColor: color-mix(in srgb, var(--accentTxtColor), transparent 50%);
--surfaceColor: #fff; --surfaceColor: #fff;
--surfaceAlt1Color: #f6f7f9; --surfaceAlt1Color: #f8f9fa;
--surfaceAlt2Color: #e8eaee; --surfaceAlt2Color: #e4e8ec;
--surfaceAlt3Color: #dfe2e7; --surfaceAlt3Color: #dbe0e6;
--surfaceAlt4Color: #d9dde2; --surfaceAlt4Color: #d2d9df;
--surfaceAlt5Color: #d1d6dc; --surfaceAlt5Color: #cbd4dc;
--surfaceTxtColor: #25272d; --surfaceTxtColor: #25272d;
--surfaceTxtHintColor: #6b747b; --surfaceTxtHintColor: #687278;
--surfaceTxtDisabledColor: #abaeba; --surfaceTxtDisabledColor: #a2a9ae;
--surfaceAccentColor: color-mix(in srgb, var(--accentColor), white 80%); --surfaceAccentColor: color-mix(in srgb, var(--accentColor), white 80%);
--surfaceInfoColor: color-mix(in srgb, var(--infoColor), white 80%); --surfaceInfoColor: color-mix(in srgb, var(--infoColor), white 80%);
--surfaceSuccessColor: color-mix(in srgb, var(--successColor), white 80%); --surfaceSuccessColor: color-mix(in srgb, var(--successColor), white 80%);
--surfaceWarningColor: color-mix(in srgb, var(--warningColor), white 80%); --surfaceWarningColor: color-mix(in srgb, var(--warningColor), white 80%);
--surfaceDangerColor: color-mix(in srgb, var(--dangerColor), white 80%); --surfaceDangerColor: color-mix(in srgb, var(--dangerColor), white 80%);
--selectionColor: rgba(34, 36, 42, 0.22); --selectionColor: rgba(70, 90, 115, 0.25);
--inputColor: var(--surfaceAlt2Color); --inputColor: var(--surfaceAlt2Color);
--inputFocusColor: var(--surfaceAlt3Color); --inputFocusColor: var(--surfaceAlt3Color);
--inputBorderColor: var(--surfaceAlt4Color); --inputBorderColor: var(--surfaceAlt4Color);
@@ -85,7 +85,7 @@
/* ---------------- */ /* ---------------- */
--modalAnimationSpeed: 200ms; --modalAnimationSpeed: 200ms;
--modalOverlayColor: rgba(34, 36, 42, 0.22); --modalOverlayColor: rgba(70, 90, 115, 0.25);
--tooltipTxtColor: #fff; --tooltipTxtColor: #fff;
--tooltipSurfaceColor: rgba(34, 36, 36, 0.9); --tooltipSurfaceColor: rgba(34, 36, 36, 0.9);

2
ui/src/fields/file/input.js
View File

@@ -240,7 +240,7 @@ export function input(props) {
}, },
}, },
t.div( t.div(
{ className: () => `field ${props.field.required ? "required" : ""}` }, { className: () => `field-list ${props.field.required ? "required" : ""}` },
t.label( t.label(
{ htmlFor: uniqueId }, { htmlFor: uniqueId },
t.i({ className: app.fieldTypes.file.icon, ariaHidden: true }), t.i({ className: app.fieldTypes.file.icon, ariaHidden: true }),

8
ui/src/fields/geoPoint/input.js
View File

@@ -33,8 +33,8 @@ export function input(data) {
id: uniqueId + ".lon", id: uniqueId + ".lon",
type: "number", type: "number",
step: "any", step: "any",
min: "-180", min: -180,
max: "180", max: 180,
placeholder: 0, placeholder: 0,
name: () => data.field.name, name: () => data.field.name,
required: () => data.field.required, required: () => data.field.required,
@@ -53,8 +53,8 @@ export function input(data) {
id: uniqueId + ".lat", id: uniqueId + ".lat",
type: "number", type: "number",
step: "any", step: "any",
min: "-90", min: -90,
max: "90", max: 90,
placeholder: 0, placeholder: 0,
name: () => data.field.name, name: () => data.field.name,
required: () => data.field.required, required: () => data.field.required,

2
ui/src/fields/relation/input.js
View File

@@ -180,7 +180,7 @@ export function input(props) {
}, },
}, },
t.div( t.div(
{ className: () => `field ${props.field.required ? "required" : ""}` }, { className: () => `field-list ${props.field.required ? "required" : ""}` },
t.label( t.label(
{ htmlFor: uniqueId }, { htmlFor: uniqueId },
t.i({ className: app.fieldTypes.relation.icon, ariaHidden: true }), t.i({ className: app.fieldTypes.relation.icon, ariaHidden: true }),

5
ui/src/store.js
View File

@@ -357,7 +357,7 @@ function removeErrorState(input, container) {
watch( watch(
() => JSON.stringify(app.store.errors) && app.store.errors, () => JSON.stringify(app.store.errors) && app.store.errors,
(errs) => { (errs) => {
// search for input or other elements wiht "name" attribute // search for input or other elements with "name" attribute
const inputs = document.querySelectorAll(`[name]`); const inputs = document.querySelectorAll(`[name]`);
for (let input of inputs) { for (let input of inputs) {
@@ -365,7 +365,8 @@ watch(
continue; continue;
} }
const container = input.closest(".fields") || input.closest(".field"); // find the top-most wrapper field element
const container = input.closest(".field-list") || input.closest(".fields") || input.closest(".field");
if (!container) { if (!container) {
continue; continue;
} }