Github-Mirror/pocketbase
1
0
Fork 0
mirror of https://github.com/pocketbase/pocketbase.git synced 2026-09-10 00:20:44 +02: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:40:11 +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
ui/src/css/form.css
+5 -3
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%;
ui/src/css/ruleField.css
+9 -4
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;
ui/src/css/vars.css
+12 -12
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);