mirror/pocketbase
1
0
Fork 0
mirror of https://github.com/pocketbase/pocketbase.git synced 2026-05-19 06:11:43 -04:00
Code Issues 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)).
- Other minor UI contrast and styles improvements.
## 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 -->
<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="stylesheet" crossorigin href="./assets/index-CbOtUFMZ.css">
<link rel="stylesheet" crossorigin href="./assets/index-B-u8SRs-.css">
</head>
<body>
</body>

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

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

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

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

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

@@ -12,9 +12,9 @@
--primaryTxtHintColor: color-mix(in srgb, var(--primaryTxtColor), transparent 35%);
--primaryTxtDisabledColor: color-mix(in srgb, var(--primaryTxtColor), transparent 50%);
--secondaryColor: #e8eaee;
--secondaryAlt1Color: #dcdfe5;
--secondaryAlt2Color: #c4cbd4;
--secondaryColor: #e4e8ec;
--secondaryAlt1Color: #dbe0e6;
--secondaryAlt2Color: #d2d9df;
--secondaryTxtColor: var(--primaryColor);
--secondaryTxtHintColor: color-mix(in srgb, var(--secondaryTxtColor), transparent 35%);
--secondaryTxtDisabledColor: color-mix(in srgb, var(--secondaryTxtColor), transparent 50%);
@@ -55,20 +55,20 @@
--accentTxtDisabledColor: color-mix(in srgb, var(--accentTxtColor), transparent 50%);
--surfaceColor: #fff;
--surfaceAlt1Color: #f6f7f9;
--surfaceAlt2Color: #e8eaee;
--surfaceAlt3Color: #dfe2e7;
--surfaceAlt4Color: #d9dde2;
--surfaceAlt5Color: #d1d6dc;
--surfaceAlt1Color: #f8f9fa;
--surfaceAlt2Color: #e4e8ec;
--surfaceAlt3Color: #dbe0e6;
--surfaceAlt4Color: #d2d9df;
--surfaceAlt5Color: #cbd4dc;
--surfaceTxtColor: #25272d;
--surfaceTxtHintColor: #6b747b;
--surfaceTxtDisabledColor: #abaeba;
--surfaceTxtHintColor: #687278;
--surfaceTxtDisabledColor: #a2a9ae;
--surfaceAccentColor: color-mix(in srgb, var(--accentColor), white 80%);
--surfaceInfoColor: color-mix(in srgb, var(--infoColor), white 80%);
--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: rgba(34, 36, 42, 0.22);
--selectionColor: rgba(70, 90, 115, 0.25);
--inputColor: var(--surfaceAlt2Color);
--inputFocusColor: var(--surfaceAlt3Color);
--inputBorderColor: var(--surfaceAlt4Color);
@@ -85,7 +85,7 @@
/* ---------------- */
--modalAnimationSpeed: 200ms;
--modalOverlayColor: rgba(34, 36, 42, 0.22);
--modalOverlayColor: rgba(70, 90, 115, 0.25);
--tooltipTxtColor: #fff;
--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(
{ className: () => `field ${props.field.required ? "required" : ""}` },
{ className: () => `field-list ${props.field.required ? "required" : ""}` },
t.label(
{ htmlFor: uniqueId },
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",
type: "number",
step: "any",
min: "-180",
max: "180",
min: -180,
max: 180,
placeholder: 0,
name: () => data.field.name,
required: () => data.field.required,
@@ -53,8 +53,8 @@ export function input(data) {
id: uniqueId + ".lat",
type: "number",
step: "any",
min: "-90",
max: "90",
min: -90,
max: 90,
placeholder: 0,
name: () => data.field.name,
required: () => data.field.required,

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

@@ -180,7 +180,7 @@ export function input(props) {
},
},
t.div(
{ className: () => `field ${props.field.required ? "required" : ""}` },
{ className: () => `field-list ${props.field.required ? "required" : ""}` },
t.label(
{ htmlFor: uniqueId },
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(
() => JSON.stringify(app.store.errors) && app.store.errors,
(errs) => {
// search for input or other elements wiht "name" attribute
// search for input or other elements with "name" attribute
const inputs = document.querySelectorAll(`[name]`);
for (let input of inputs) {
@@ -365,7 +365,8 @@ watch(
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) {
continue;
}