github/directus
1
1
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-04-25 03:00:53 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add configurable borders (#20226)

Browse Source 
* Add borderRadius rule

* Standardize border radii

There was a border-outline style that was visually nearly identical that was hardly ever used. The places it was used in felt like more of an oversight / inconsistent usage than intentional, so I've opted to standardize it to the same configured radius

* Replace --border-radius with --theme--border-radius

* Remove border radius from variables.scss

* Remove default

* Allow overriding v-input border-radius

* Update legacy overrides

* Default to 6px

* Remove overrides

* Update overrides to use v-input specific

* Add LineWidth, fix schema output

* Use border-width from theme

* Add border colors for inputs

* Use theme form colors for borders

* Configurable box-shadow for input

* Use configurable shadow

* Add optional module bar border

* Reduce white space

* Add optional border to nav bar

* Add configurable sidebar border

* Add configurable header shadow

* Add changeset

* Run formatter

* fix borderWidth for calc

* Remove border-normal

* Use border-width for 2px values where appropriate

* Use theme border for avatar divider

* Add rules for project info border

* Add border support to project info

* Add border support for section toggle

* Run formatter

---------

Co-authored-by: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
This commit is contained in:
Rijk van Zanten
2023-10-31 14:36:28 -04:00
committed by GitHub
parent 2273dbcd70
commit 474f8eab1f
138 changed files with 651 additions and 530 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
.changeset/sixty-papayas-march.md Normal file
View File

@@ -0,0 +1,7 @@
---
'@directus/themes': minor
'docs': minor
'@directus/app': minor
---
Added support for configurable borders

2
app/src/components/v-avatar.vue
View File

@@ -47,7 +47,7 @@ body {
white-space: nowrap;
text-overflow: ellipsis;
background-color: var(--v-avatar-color);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
}
.tile {

7
app/src/components/v-button.vue
View File

@@ -279,8 +279,8 @@ async function onClick(event: MouseEvent) {
line-height: var(--v-button-line-height);
text-decoration: none;
background-color: var(--v-button-background-color);
border: var(--border-width) solid var(--v-button-background-color);
border-radius: var(--border-radius);
border: var(--theme--border-width) solid var(--v-button-background-color);
border-radius: var(--theme--border-radius);
cursor: pointer;
transition: var(--fast) var(--transition);
transition-property: background-color border;
@@ -312,7 +312,7 @@ async function onClick(event: MouseEvent) {
.button:disabled {
color: var(--v-button-color-disabled);
background-color: var(--v-button-background-color-disabled);
border: var(--border-width) solid var(--v-button-background-color-disabled);
border: var(--theme--border-width) solid var(--v-button-background-color-disabled);
cursor: not-allowed;
}
@@ -351,7 +351,6 @@ async function onClick(event: MouseEvent) {
--v-button-font-size: 12px;
--v-button-font-weight: 600;
--v-button-min-width: 60px;
--border-radius: 4px;
padding: 0 12px;
}

7
app/src/components/v-card.vue
View File

@@ -32,7 +32,6 @@ body {
<style lang="scss" scoped>
.v-card {
--border-radius: 6px;
--input-height: 60px;
--input-padding: 16px; /* (60 - 4 - 24) / 2 */
--form-vertical-gap: 52px;
@@ -48,11 +47,11 @@ body {
font-size: 15px;
line-height: 24px;
background-color: var(--v-card-background-color);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
& > :first-child {
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
border-top-left-radius: var(--theme--border-radius);
border-top-right-radius: var(--theme--border-radius);
}
&.disabled {

10
app/src/components/v-checkbox.vue
View File

@@ -143,7 +143,7 @@ body {
width: 100%;
background-color: transparent;
border: none;
border-bottom: 2px solid var(--border-normal);
border-bottom: 2px solid var(--theme--form--field--input--border-color);
border-radius: 0;
}
@@ -174,8 +174,8 @@ body {
height: var(--input-height);
padding: 10px; // 14 - 4 (border)
background-color: var(--theme--background);
border: var(--border-width) solid var(--border-normal);
border-radius: var(--border-radius);
border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
border-radius: var(--theme--border-radius);
transition: all var(--fast) var(--transition);
&:disabled {
@@ -189,7 +189,7 @@ body {
z-index: 0;
width: 100%;
height: 100%;
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
content: '';
}
@@ -205,7 +205,7 @@ body {
&.block {
background-color: var(--background-subdued);
border-color: var(--border-normal-alt);
border-color: var(--theme--form--field--input--border-color-hover);
}
}

4
app/src/components/v-chip.vue
View File

@@ -101,7 +101,7 @@ body {
font-weight: var(--weight-normal);
line-height: 22px;
background-color: var(--v-chip-background-color);
border: var(--border-width) solid var(--v-chip-background-color);
border: var(--theme--border-width) solid var(--v-chip-background-color);
border-radius: 16px;
&.clickable:hover {
@@ -156,7 +156,7 @@ body {
}
&.label {
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
}
.chip-content {

6
app/src/components/v-divider.vue
View File

@@ -27,7 +27,7 @@ withDefaults(defineProps<Props>(), {
<style>
body {
--v-divider-color: var(--border-normal);
--v-divider-color: var(--theme--form--field--input--border-color);
--v-divider-label-color: var(--theme--foreground-accent);
}
</style>
@@ -48,7 +48,7 @@ body {
margin-top: 8px;
border: solid;
border-color: var(--v-divider-color);
border-width: var(--border-width) 0 0 0;
border-width: var(--theme--border-width) 0 0 0;
}
span.wrapper {
@@ -98,7 +98,7 @@ body {
hr {
width: 0px;
max-width: 0px;
border-width: 0 var(--border-width) 0 0;
border-width: 0 var(--theme--border-width) 0 0;
}
span.wrapper {

3
app/src/components/v-drawer.vue
View File

@@ -170,7 +170,6 @@ body {
}
.content {
--border-radius: 6px;
--input-height: 60px;
--input-padding: 16px; /* (60 - 4 - 24) / 2 */
--form-vertical-gap: 52px;
@@ -247,7 +246,7 @@ body {
nav {
background-color: var(--background-subdued);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
}
@media (min-width: 960px) {

2
app/src/components/v-error.vue
View File

@@ -65,7 +65,7 @@ async function copyError() {
color: var(--theme--danger);
font-family: var(--theme--font-family-monospace);
background-color: var(--danger-alt);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
.copy-error {
margin-left: 12px;

6
app/src/components/v-fancy-select.vue
View File

@@ -99,7 +99,7 @@ function toggle(item: Record<string, any>) {
margin-bottom: 8px;
padding: 12px;
background-color: var(--background-normal);
border: 2px solid var(--background-normal);
border: var(--theme--border-width) solid var(--background-normal);
border-radius: 6px;
backface-visibility: hidden;
cursor: pointer;
@@ -138,14 +138,14 @@ function toggle(item: Record<string, any>) {
z-index: 2;
color: var(--theme--primary);
background-color: var(--theme--primary-background);
border-color: var(--theme--primary);
border-color: var(--theme--form--field--input--border-color-focus);
.v-icon {
--v-icon-color: var(--theme--primary);
}
&:hover {
border-color: var(--theme--primary);
border-color: var(--theme--form--field--input--border-color-focus);
}
}
}

2
app/src/components/v-field-template/v-field-template.vue
View File

@@ -321,7 +321,7 @@ function setContent() {
padding: 2px 4px 0;
color: var(--theme--primary);
background-color: var(--theme--primary-background);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
transition: var(--fast) var(--transition);
transition-property: background-color, color;
user-select: none;

2
app/src/components/v-form/form-field.vue
View File

@@ -241,7 +241,7 @@ function useComputedValues() {
margin: -12px;
padding: 12px;
background-color: var(--danger-alt);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
transition: var(--medium) var(--transition);
transition-property: background-color, padding, margin;
}

31
app/src/components/v-input.vue
View File

@@ -283,14 +283,16 @@ function stepDown() {
:global(body) {
--v-input-font-family: var(--theme--font-family-sans-serif);
--v-input-placeholder-color: var(--theme--foreground-subdued);
--v-input-box-shadow-color-focus: var(--theme--primary);
--v-input-color: var(--theme--foreground);
--v-input-background-color: var(--theme--form--field--input--background);
--v-input-border-color-focus: var(--theme--primary);
--v-input-border-color: var(--theme--form--field--input--border-color);
--v-input-border-color-hover: var(--theme--form--field--input--border-color-hover);
--v-input-border-color-focus: var(--theme--form--field--input--border-color-focus);
--v-input-border-radius: var(--theme--border-radius);
}
.v-input {
--arrow-color: var(--border-normal);
--arrow-color: var(--theme--form--field--input--border-color);
--v-icon-color: var(--theme--foreground-subdued);
display: flex;
@@ -314,9 +316,11 @@ function stepDown() {
color: var(--v-input-color);
font-family: var(--v-input-font-family);
background-color: var(--v-input-background-color);
border: var(--border-width) solid var(--border-normal);
border-radius: var(--border-radius);
transition: border-color var(--fast) var(--transition);
border: var(--theme--border-width) solid var(--v-input-border-color);
border-radius: var(--v-input-border-radius);
transition: var(--fast) var(--transition);
transition-property: border-color, box-shadow;
box-shadow: var(--theme--form--field--input--box-shadow);
.prepend {
margin-right: 8px;
@@ -345,36 +349,37 @@ function stepDown() {
}
&.disabled {
--arrow-color: var(--border-normal);
--arrow-color: var(--v-input-border-color);
cursor: auto;
}
}
&:hover {
--arrow-color: var(--border-normal-alt);
--arrow-color: var(--v-input-border-color-hover);
color: var(--v-input-color);
background-color: var(--theme--form--field--input--background);
border-color: var(--border-normal-alt);
border-color: var(--v-input-border-color-hover);
box-shadow: var(--theme--form--field--input--box-shadow-hover);
}
&:focus-within,
&.active {
--arrow-color: var(--border-normal-alt);
--arrow-color: var(--v-input-border-color-hover);
color: var(--v-input-color);
background-color: var(--theme--form--field--input--background);
border-color: var(--v-input-border-color-focus);
box-shadow: 0 0 16px -8px var(--v-input-box-shadow-color-focus);
box-shadow: var(--theme--form--field--input--box-shadow-focus);
}
&.disabled {
--arrow-color: var(--border-normal);
--arrow-color: var(--v-input-border-color);
color: var(--theme--foreground-subdued);
background-color: var(--background-subdued);
border-color: var(--border-normal);
border-color: var(--v-input-border-color);
}
.prefix,

14
app/src/components/v-list-item.vue
View File

@@ -143,9 +143,9 @@ body {
--v-list-item-min-height-nav: 36px;
--v-list-item-min-height: 32px;
--v-list-item-max-height: auto;
--v-list-item-border-radius: var(--border-radius);
--v-list-item-border-radius: var(--theme--border-radius);
--v-list-item-border-color: var(--border-subdued);
--v-list-item-border-color-hover: var(--border-normal-alt);
--v-list-item-border-color-hover: var(--theme--form--field--input--border-color-hover);
--v-list-item-color: var(--v-list-color, var(--theme--foreground));
--v-list-item-color-hover: var(--v-list-color-hover, var(--theme--foreground));
--v-list-item-color-active: var(--v-list-color-active, var(--theme--foreground));
@@ -185,7 +185,7 @@ body {
left: 0;
width: calc(100% - 4px);
height: calc(100% - 4px);
border: 2px dashed var(--border-normal);
border: 2px dashed var(--theme--form--field--input--border-color);
content: '';
pointer-events: none;
}
@@ -252,8 +252,8 @@ body {
margin: 0;
padding: 8px var(--input-padding);
background-color: var(--v-list-item-background-color);
border: var(--border-width) solid var(--v-list-item-border-color);
border-radius: var(--border-radius);
border: var(--theme--border-width) solid var(--v-list-item-border-color);
border-radius: var(--theme--border-radius);
transition: border-color var(--fast) var(--transition);
:slotted(.drag-handle) {
@@ -274,11 +274,11 @@ body {
&.clickable:hover {
background-color: var(--v-list-item-background-color-hover);
border: var(--border-width) solid var(--v-list-item-border-color-hover);
border: var(--theme--border-width) solid var(--v-list-item-border-color-hover);
}
&.sortable-chosen {
border: var(--border-width) solid var(--theme--primary) !important;
border: var(--theme--border-width) solid var(--theme--primary) !important;
}
&.sortable-ghost {

2
app/src/components/v-list.vue
View File

@@ -57,7 +57,7 @@ useGroupableParent(
<style scoped>
:global(body) {
--v-list-padding: 4px 0;
--v-list-border-radius: var(--border-radius);
--v-list-border-radius: var(--theme--border-radius);
--v-list-max-height: none;
--v-list-max-width: none;
--v-list-min-width: 220px;

2
app/src/components/v-menu.vue
View File

@@ -494,7 +494,7 @@ body {
overflow-y: auto;
background-color: var(--card-face-color);
border: none;
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
box-shadow: 0px 0px 6px 0px rgb(var(--card-shadow-color), 0.2), 0px 0px 12px 2px rgb(var(--card-shadow-color), 0.05);
transition-timing-function: var(--transition-out);
transition-duration: var(--fast);

2
app/src/components/v-notice.vue
View File

@@ -61,7 +61,7 @@ const iconName = computed(() => {
color: var(--v-notice-color);
line-height: 22px;
background-color: var(--v-notice-background-color);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
overflow: hidden;
}

2
app/src/components/v-progress-circular.vue
View File

@@ -58,7 +58,7 @@ const circleStyle = computed(() => ({
<style>
body {
--v-progress-circular-color: var(--theme--foreground);
--v-progress-circular-background-color: var(--border-normal);
--v-progress-circular-background-color: var(--theme--form--field--input--border-color);
--v-progress-circular-transition: 400ms;
--v-progress-circular-speed: 2s;
--v-progress-circular-size: 28px;

2
app/src/components/v-progress-linear.vue
View File

@@ -71,7 +71,7 @@ const color = computed(() => {
body {
--v-progress-linear-height: 4px;
--v-progress-linear-color: var(--theme--foreground);
--v-progress-linear-background-color: var(--border-normal);
--v-progress-linear-background-color: var(--theme--form--field--input--border-color);
--v-progress-linear-transition: 400ms;
}
</style>

8
app/src/components/v-radio.vue
View File

@@ -103,9 +103,9 @@ body {
position: relative;
width: 100%;
height: var(--input-height);
padding: 10px; // 14 - 4 (border)
border: 2px solid var(--background-subdued);
border-radius: var(--border-radius);
padding: calc(14px - 2 * var(--theme--border-width));
border: var(--theme--border-width) solid var(--background-subdued);
border-radius: var(--theme--border-radius);
&::before {
position: absolute;
@@ -114,7 +114,7 @@ body {
width: 100%;
height: 100%;
background-color: var(--background-subdued);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
content: '';
}

2
app/src/components/v-select/v-select.vue
View File

@@ -418,7 +418,7 @@ function useDisplayValue() {
padding-right: 26px;
color: var(--theme--foreground-subdued);
background-color: var(--background-subdued);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
transition: color var(--fast) var(--transition);
&:hover,

2
app/src/components/v-sheet.vue
View File

@@ -26,6 +26,6 @@
padding: var(--v-sheet-padding);
overflow: auto;
background-color: var(--v-sheet-background-color);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
}
</style>

8
app/src/components/v-skeleton-loader.vue
View File

@@ -62,8 +62,8 @@ body {
.input-tall {
width: 100%;
height: var(--input-height);
border: var(--border-width) solid var(--v-skeleton-loader-background-color);
border-radius: var(--border-radius);
border: var(--theme--border-width) solid var(--v-skeleton-loader-background-color);
border-radius: var(--theme--border-radius);
@include loader;
}
@@ -75,7 +75,7 @@ body {
.block-list-item {
width: 100%;
height: var(--input-height);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
@include loader;
@@ -87,7 +87,7 @@ body {
.block-list-item-dense {
width: 100%;
height: 44px;
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
@include loader;

4
app/src/components/v-slider.vue
View File

@@ -88,7 +88,7 @@ function onInput(event: Event) {
<style>
body {
--v-slider-color: var(--border-normal);
--v-slider-color: var(--theme--form--field--input--border-color);
--v-slider-thumb-color: var(--theme--primary);
--v-slider-fill-color: var(--theme--primary);
}
@@ -232,7 +232,7 @@ body {
color: var(--foreground-inverted);
font-weight: 600;
background-color: var(--theme--primary);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
transform: translateX(-50%);
opacity: 0;
transition: opacity var(--fast) var(--transition);

4
app/src/components/v-table/table-header.vue
View File

@@ -279,7 +279,7 @@ function toggleManualSort() {
font-weight: 500;
font-size: 14px;
background-color: var(--v-table-background-color);
border-bottom: var(--border-width) solid var(--border-subdued);
border-bottom: var(--theme--border-width) solid var(--border-subdued);
&.select,
&.manual {
@@ -395,7 +395,7 @@ function toggleManualSort() {
top: 20%;
left: 3px;
display: block;
width: var(--border-width);
width: var(--theme--border-width);
height: 60%;
background-color: var(--border-subdued);
content: '';

2
app/src/components/v-table/table-row.vue
View File

@@ -87,7 +87,7 @@ const cssHeight = computed(() => {
white-space: nowrap;
text-overflow: ellipsis;
background-color: var(--v-table-background-color);
border-bottom: var(--border-width) solid var(--border-subdued);
border-bottom: var(--theme--border-width) solid var(--border-subdued);
&:last-child {
padding: 0 12px;

6
app/src/components/v-table/v-table.vue
View File

@@ -429,7 +429,7 @@ table :deep(.sortable-ghost .cell) {
.loading .loading-indicator .v-progress-linear {
--v-progress-linear-height: 2px;
--v-progress-linear-color: var(--border-normal-alt);
--v-progress-linear-color: var(--theme--form--field--input--border-color-hover);
position: absolute;
top: -2px;
@@ -460,8 +460,8 @@ table :deep(.sortable-ghost .cell) {
}
.inline {
border: 2px solid var(--border-normal);
border-radius: var(--border-radius);
border: 2px solid var(--theme--form--field--input--border-color);
border-radius: var(--theme--border-radius);
}
.inline table :deep(.table-row:last-of-type .cell) {

10
app/src/components/v-template-input.vue
View File

@@ -313,8 +313,8 @@ function parseHTML(innerText?: string, isDirectInput = false) {
font-family: var(--theme--font-family-sans-serif);
white-space: nowrap;
background-color: var(--theme--background);
border: var(--border-width) solid var(--border-normal);
border-radius: var(--border-radius);
border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
border-radius: var(--theme--border-radius);
transition: border-color var(--fast) var(--transition);
&:empty::before {
@@ -330,11 +330,11 @@ function parseHTML(innerText?: string, isDirectInput = false) {
}
&:hover {
border-color: var(--border-normal-alt);
border-color: var(--theme--form--field--input--border-color-hover);
}
&:focus-within {
border-color: var(--theme--primary);
border-color: var(--theme--form--field--input--border-color-focus);
}
:deep(.preview) {
@@ -346,7 +346,7 @@ function parseHTML(innerText?: string, isDirectInput = false) {
line-height: 1;
vertical-align: -2px;
background: var(--theme--primary-background);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
user-select: text;
&::before {

15
app/src/components/v-textarea.vue
View File

@@ -99,9 +99,11 @@ body {
min-height: var(--v-textarea-min-height);
max-height: var(--v-textarea-max-height);
background-color: var(--theme--form--field--input--background);
border: var(--border-width) solid var(--border-normal);
border-radius: var(--border-radius);
transition: border-color var(--fast) var(--transition);
border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
border-radius: var(--theme--border-radius);
transition: var(--fast) var(--transition);
transition-property: border-color, box-shadow;
box-shadow: var(--theme--form--field--input--box-shadow);
.append,
.prepend {
@@ -137,13 +139,14 @@ body {
}
&:hover:not(.disabled) {
border-color: var(--border-normal-alt);
border-color: var(--theme--form--field--input--border-color-hover);
box-shadow: var(--theme--form--field--input--box-shadow-hover);
}
&:focus:not(.disabled),
&:focus-within:not(.disabled) {
border-color: var(--theme--primary);
box-shadow: 0 0 16px -8px var(--theme--primary);
border-color: var(--theme--form--field--input--border-color-focus);
box-shadow: var(--theme--form--field--input--box-shadow-focus);
}
textarea {

10
app/src/components/v-upload.vue
View File

@@ -330,8 +330,8 @@ function openFileBrowser() {
padding: 32px;
color: var(--theme--foreground-subdued);
text-align: center;
border: 2px dashed var(--border-normal);
border-radius: var(--border-radius);
border: 2px dashed var(--theme--form--field--input--border-color);
border-radius: var(--theme--border-radius);
transition: var(--fast) var(--transition);
transition-property: color, border-color, background-color;
@@ -340,7 +340,7 @@ function openFileBrowser() {
}
&:not(.uploading):hover {
border-color: var(--border-normal-alt);
border-color: var(--theme--form--field--input--border-color-hover);
}
}
@@ -373,7 +373,7 @@ function openFileBrowser() {
.dragging {
color: var(--theme--primary);
background-color: var(--theme--primary-background);
border-color: var(--theme--primary);
border-color: var(--theme--form--field--input--border-color-focus);
* {
pointer-events: none;
@@ -392,7 +392,7 @@ function openFileBrowser() {
color: var(--white);
background-color: var(--theme--primary);
border-color: var(--theme--primary);
border-color: var(--theme--form--field--input--border-color-focus);
border-style: solid;
.v-progress-linear {

30
app/src/components/v-workspace-tile.vue
View File

@@ -350,19 +350,19 @@ function useDragDrop() {
&.editing {
&.draggable {
border-color: var(--border-normal);
box-shadow: 0 0 0 1px var(--border-normal);
border-color: var(--theme--form--field--input--border-color);
box-shadow: 0 0 0 1px var(--theme--form--field--input--border-color);
cursor: move;
}
&.draggable:hover {
border-color: var(--border-normal-alt);
box-shadow: 0 0 0 1px var(--border-normal-alt);
border-color: var(--theme--form--field--input--border-color-hover);
box-shadow: 0 0 0 1px var(--theme--form--field--input--border-color-hover);
}
&.dragging {
z-index: 3 !important;
border-color: var(--theme--primary);
border-color: var(--theme--form--field--input--border-color-focus);
box-shadow: 0 0 0 1px var(--theme--primary);
}
@@ -389,9 +389,9 @@ function useDragDrop() {
font-style: normal;
line-height: 1;
text-align: right;
border-top-right-radius: var(--border-radius-outline);
border-bottom-right-radius: var(--border-radius-outline);
border-top-left-radius: var(--border-radius-outline);
border-top-right-radius: var(--theme--border-radius);
border-bottom-right-radius: var(--theme--border-radius);
border-top-left-radius: var(--theme--border-radius);
backdrop-filter: blur(3px);
background-color: rgba(var(--background-page-rgb), 0.5);
opacity: 0;
@@ -465,9 +465,9 @@ function useDragDrop() {
gap: 4px;
align-items: center;
padding: 7px;
border-top-right-radius: var(--border-radius-outline);
border-bottom-right-radius: var(--border-radius-outline);
border-bottom-left-radius: var(--border-radius-outline);
border-top-right-radius: var(--theme--border-radius);
border-bottom-right-radius: var(--theme--border-radius);
border-bottom-left-radius: var(--theme--border-radius);
backdrop-filter: blur(3px);
background-color: rgba(var(--background-page-rgb), 0.5);
}
@@ -540,18 +540,18 @@ function useDragDrop() {
}
.br-tl {
border-top-left-radius: var(--border-radius-outline);
border-top-left-radius: var(--theme--border-radius);
}
.br-tr {
border-top-right-radius: var(--border-radius-outline);
border-top-right-radius: var(--theme--border-radius);
}
.br-br {
border-bottom-right-radius: var(--border-radius-outline);
border-bottom-right-radius: var(--theme--border-radius);
}
.br-bl {
border-bottom-left-radius: var(--border-radius-outline);
border-bottom-left-radius: var(--theme--border-radius);
}
</style>

2
app/src/components/v-workspace.vue
View File

@@ -157,7 +157,7 @@ const workspaceBoxSize = computed(() => {
display: block;
width: calc(100% + 8px);
height: calc(100% + 8px);
background-image: radial-gradient(var(--border-normal) 10%, transparent 10%);
background-image: radial-gradient(var(--theme--form--field--input--border-color) 10%, transparent 10%);
background-position: -6px -6px;
background-size: 20px 20px;
opacity: 0;

3
app/src/displays/color/color.vue
View File

@@ -32,7 +32,8 @@ const styles = computed(() => {
const pageColorRGB = Color(pageColorString);
const colorRGB = value === null ? Color(defaultColor) : Color(value);
if (colorRGB.contrast(pageColorRGB) < 1.1) style['border'] = '1px solid var(--border-normal)';
if (colorRGB.contrast(pageColorRGB) < 1.1)
style['border'] = '1px solid var(--theme--form--field--input--border-color)';
return style;
});

4
app/src/displays/file/file.vue
View File

@@ -54,7 +54,7 @@ const imageThumbnail = computed(() => {
img {
height: 100%;
object-fit: cover;
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
aspect-ratio: 1;
}
@@ -68,7 +68,7 @@ img {
height: 100%;
overflow: hidden;
background-color: var(--background-normal);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
aspect-ratio: 1;
&.has-file {

2
app/src/displays/image/image.vue
View File

@@ -39,7 +39,7 @@ img {
width: auto;
height: 100%;
vertical-align: -30%;
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
&.circle {
border-radius: 100%;

2
app/src/displays/rating/rating.vue
View File

@@ -54,7 +54,7 @@ const ratingPercentage = computed(() => ({
color: #ffc107;
font-weight: 600;
background-color: rgb(255 193 7 / 0.15);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
.v-icon {
margin-right: 4px;

2
app/src/displays/related-values/related-values.vue
View File

@@ -119,7 +119,7 @@ function getLinkForItem(item: any) {
width: calc(100% + 12px);
height: calc(100% + 12px);
background-color: var(--background-normal);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
opacity: 0;
transition: opacity var(--fast) var(--transition);
content: '';

2
app/src/displays/translations/translations.vue
View File

@@ -176,7 +176,7 @@ const translations = computed(() => {
.v-list-item:not(:first-child) {
.header {
padding-top: 8px;
border-top: var(--border-width) solid var(--border-subdued);
border-top: var(--theme--border-width) solid var(--border-subdued);
}
}
</style>

4
app/src/interfaces/_system/system-display-options/system-display-options.vue
View File

@@ -119,8 +119,8 @@ const optionsFields = computed(() => {
--form-vertical-gap: 24px;
padding: 12px;
border: var(--border-width) solid var(--border-normal);
border-radius: var(--border-radius);
border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
border-radius: var(--theme--border-radius);
:deep(.type-label) {
font-size: 1rem;

4
app/src/interfaces/_system/system-field-tree/system-field-tree.vue
View File

@@ -48,7 +48,7 @@ const { treeList, loadFieldRelations } = useFieldTree(chosenCollection);
<style scoped>
.system-field-tree {
border: var(--border-width) solid var(--border-normal);
border-radius: var(--border-radius);
border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
border-radius: var(--theme--border-radius);
}
</style>

2
app/src/interfaces/_system/system-fields/system-fields.vue
View File

@@ -139,7 +139,7 @@ const removeField = (field: string) => {
.v-notice.no-fields {
background-color: var(--theme--background);
border: var(--border-width) solid var(--v-list-item-border-color);
border: var(--theme--border-width) solid var(--v-list-item-border-color);
&::after {
display: none;

6
app/src/interfaces/_system/system-filter/nodes.vue
View File

@@ -385,7 +385,7 @@ function isExistingField(node: Record<string, any>): boolean {
padding: 2px 6px;
padding-right: 8px;
background-color: var(--theme--background);
border: var(--border-width) solid var(--border-subdued);
border: var(--theme--border-width) solid var(--border-subdued);
border-radius: 100px;
transition: border-color var(--fast) var(--transition);
@@ -490,7 +490,7 @@ function isExistingField(node: Record<string, any>): boolean {
}
&:hover {
border-color: var(--border-normal);
border-color: var(--theme--form--field--input--border-color);
.delete,
&:hover {
@@ -532,7 +532,7 @@ function isExistingField(node: Record<string, any>): boolean {
.group :deep(.sortable-ghost) {
.node .header {
background-color: var(--theme--primary-background);
border-color: var(--theme--primary);
border-color: var(--theme--form--field--input--border-color-focus);
> * {
opacity: 0;

8
app/src/interfaces/_system/system-filter/system-filter.vue
View File

@@ -247,14 +247,14 @@ function addKeyAsNode() {
:deep(.group) {
margin-left: 18px;
padding-left: 10px;
border-left: var(--border-width) solid var(--border-subdued);
border-left: var(--theme--border-width) solid var(--border-subdued);
}
.v-list {
min-width: auto;
margin: 0px 0px 10px;
padding: 20px 20px 12px;
border: var(--border-width) solid var(--border-subdued);
border: var(--theme--border-width) solid var(--border-subdued);
& > :deep(.group) {
margin-left: 0px;
@@ -311,12 +311,12 @@ function addKeyAsNode() {
padding: 0;
color: var(--theme--form--field--input--foreground-subdued);
background-color: var(--theme--background);
border: var(--border-width) solid var(--border-subdued);
border: var(--theme--border-width) solid var(--border-subdued);
border-radius: 100px;
transition: border-color var(--fast) var(--transition);
&:hover,
&.active {
border-color: var(--border-normal);
border-color: var(--theme--form--field--input--border-color);
}
&.active {
.expand_more {

2
app/src/interfaces/_system/system-input-translated-string/custom-translations-tooltip.vue
View File

@@ -154,7 +154,7 @@ const clicked = (toggleTooltip: () => void) => {
.v-list-item:not(:first-child) {
.header {
padding-top: 8px;
border-top: var(--border-width) solid var(--border-subdued);
border-top: var(--theme--border-width) solid var(--border-subdued);
}
}
</style>

2
app/src/interfaces/_system/system-input-translated-string/input-translated-string.vue
View File

@@ -217,7 +217,7 @@ function openNewCustomTranslationDrawer() {
padding: 2px 8px 0;
color: var(--theme--primary);
background-color: var(--theme--primary-background);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
transition: var(--fast) var(--transition);
transition-property: background-color, color;
user-select: none;

4
app/src/interfaces/_system/system-interface-options/system-interface-options.vue
View File

@@ -119,8 +119,8 @@ const optionsFields = computed(() => {
--form-vertical-gap: 24px;
padding: 12px;
border: var(--border-width) solid var(--border-normal);
border-radius: var(--border-radius);
border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
border-radius: var(--theme--border-radius);
:deep(.type-label) {
font-size: 1rem;

2
app/src/interfaces/_system/system-modules/system-modules.vue
View File

@@ -274,7 +274,7 @@ function remove(id: string) {
}
.v-list-item.enabled {
--v-list-item-border-color: var(--theme--primary);
--v-list-item-border-color: var(--theme--form--field--input--border-color-focus);
--v-list-item-color: var(--theme--primary-accent);
--v-list-item-background-color: var(--theme--primary-background);
--v-list-item-border-color-hover: var(--theme--primary-accent);

2
app/src/interfaces/_system/system-raw-editor/system-raw-editor.vue
View File

@@ -145,7 +145,7 @@ watch(
position: relative;
height: var(--input-height);
min-height: var(--input-height);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
:deep(.CodeMirror) {
width: 100%;

2
app/src/interfaces/_system/system-theme-overrides/system-theme-overrides-group.vue
View File

@@ -95,7 +95,7 @@ const collapsed = ref(true);
&:hover {
background-color: var(--background-subdued);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
}
.icon {

2
app/src/interfaces/_system/system-theme-overrides/system-theme-overrides-rule.vue
View File

@@ -83,7 +83,7 @@ const valueLength = computed(() => String(props.value ?? props.defaultValue).len
.value {
margin-right: 1ch;
border: none;
border-bottom: 1px solid var(--border-normal);
border-bottom: 1px solid var(--theme--form--field--input--border-color);
min-width: 5ch;
width: v-bind(valueLength);
max-width: 100%;

17
app/src/interfaces/_system/system-theme-overrides/system-theme-overrides.vue
View File

@@ -50,11 +50,24 @@ const { theme } = useTheme(darkMode, themeLight, themeDark, {}, {});
<style scoped lang="scss">
.theme-overrides {
border: 2px solid var(--border-normal);
border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
padding: var(--input-padding);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
max-height: var(--input-height-max);
overflow-y: auto;
background-color: var(--theme--form--field--input--background);
transition-duration: var(--fast);
transition-timing-function: var(--transition);
transition-property: box-shadow, border-color;
&:hover {
border-color: var(--theme--form--field--input--border-color-hover);
box-shadow: var(--theme--form--field--input--box-shadow-hover);
}
&:focus-within {
border-color: var(--theme--form--field--input--border-color-focus);
box-shadow: var(--theme--form--field--input--box-shadow-focus);
}
}
</style>

4
app/src/interfaces/file-image/file-image.vue
View File

@@ -226,7 +226,7 @@ const { createAllowed, updateAllowed } = useRelationPermissionsM2O(relationInfo)
height: var(--input-height-tall);
overflow: hidden;
background-color: var(--background-normal-alt);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
}
img {
@@ -383,6 +383,6 @@ img {
align-items: center;
justify-content: center;
height: var(--input-height-tall);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
}
</style>

2
app/src/interfaces/file/file.vue
View File

@@ -290,7 +290,7 @@ function useURLImport() {
margin-left: -8px;
overflow: hidden;
background-color: var(--background-normal);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
img {
width: 100%;

4
app/src/interfaces/group-accordion/accordion-section.vue
View File

@@ -128,10 +128,10 @@ function getFieldsForGroup(group: null | string, passed: string[] = []): Field[]
<style lang="scss" scoped>
.accordion-section {
border-top: var(--border-width) solid var(--border-normal);
border-top: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
&:last-child {
border-bottom: var(--border-width) solid var(--border-normal);
border-bottom: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
}
}

64
app/src/interfaces/input-block-editor/editorjs-overrides.css
View File

@@ -1,14 +1,14 @@
.codex-editor {
--bg-color: var(--background-normal) !important;
--front-color: var(--theme--form--field--input--foreground) !important;
--border-color: var(--border-normal) !important;
--border-color: var(--theme--form--field--input--border-color) !important;
}
.codex-editor .ce-toolbar__plus,
.codex-editor .ce-toolbar__settings-btn {
color: var(--theme--form--field--input--foreground);
background-color: var(--background-normal);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
}
.codex-editor .ce-toolbar__plus:hover,
@@ -41,16 +41,16 @@
}
.codex-editor .cdx-search-field {
border-radius: var(--border-radius) !important;
border-radius: var(--theme--border-radius) !important;
border: none;
background: var(--background-subdued);
}
.codex-editor .ce-popover {
background: var(--theme--background);
border-color: var(--border-normal);
border-width: var(--border-width);
border-radius: var(--border-radius);
border-color: var(--theme--form--field--input--border-color);
border-width: var(--theme--border-width);
border-radius: var(--theme--border-radius);
}
.codex-editor .ce-popover-item__title {
@@ -87,7 +87,7 @@
.codex-editor .ce-popover-item-icon {
background: var(--theme--background);
border: var(--border-width) solid var(--border-normal);
border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
box-shadow: none;
}
@@ -100,7 +100,7 @@
}
.codex-editor .ce-popover__items:not(:first-child) {
border-top: var(--border-width) solid var(--border-normal);
border-top: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
padding-top: 8px;
}
@@ -110,7 +110,7 @@
}
.codex-editor .image-tool--loading .image-tool__image {
border-color: var(--border-normal);
border-color: var(--theme--form--field--input--border-color);
}
.codex-editor .ce-inline-toolbar__toggler-and-button-wrapper {
@@ -119,7 +119,7 @@
.codex-editor .ce-inline-toolbar__dropdown {
margin: 0;
border-color: var(--border-normal);
border-color: var(--theme--form--field--input--border-color);
}
.codex-editor .ce-inline-tool {
@@ -167,9 +167,9 @@
.codex-editor .ce-inline-toolbar,
.codex-editor .ce-settings {
background: var(--background-subdued);
border-color: var(--border-normal);
border-width: var(--border-width);
border-radius: var(--border-radius);
border-color: var(--theme--form--field--input--border-color);
border-width: var(--theme--border-width);
border-radius: var(--theme--border-radius);
}
.codex-editor .cdx-settings-button:hover,
@@ -219,25 +219,25 @@
color: var(--theme--form--field--input--foreground);
font-size: inherit;
background-color: var(--theme--background);
border: var(--border-width) solid var(--border-normal);
border-radius: var(--border-radius);
border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
border-radius: var(--theme--border-radius);
box-shadow: unset;
}
.codex-editor .cdx-input:hover,
.codex-editor .ce-code__textarea:hover {
border-color: var(--border-normal-alt);
border-color: var(--theme--form--field--input--border-color-hover);
}
.codex-editor .cdx-input:focus,
.codex-editor .ce-code__textarea:focus {
border-color: var(--theme--primary);
border-color: var(--theme--form--field--input--border-color-focus);
}
.codex-editor .ce-inline-tool-input {
color: var(--theme--primary);
background: var(--background-normal);
border-top-color: var(--border-normal);
border-top-color: var(--theme--form--field--input--border-color);
}
/* Buttons */
@@ -248,8 +248,8 @@
font-size: var(--v-button-font-size);
text-decoration: none;
background-color: var(--v-button-background-color);
border: var(--border-width) solid var(--v-button-background-color);
border-radius: var(--border-radius);
border: var(--theme--border-width) solid var(--v-button-background-color);
border-radius: var(--theme--border-radius);
cursor: pointer;
}
@@ -265,7 +265,7 @@
.codex-editor .cdx-personality {
color: var(--theme--form--field--input--foreground);
background: var(--background-normal);
border-color: var(--border-normal);
border-color: var(--theme--form--field--input--border-color);
box-shadow: unset;
}
@@ -291,7 +291,7 @@
.codex-editor .image-tool {
--bg-color: var(--background-normal-alt);
--front-color: var(--theme--primary);
--border-color: var(--border-normal);
--border-color: var(--theme--form--field--input--border-color);
}
/* Personality */
@@ -315,8 +315,8 @@
.codex-editor .cdx-checklist__item-checkbox {
background: transparent;
border-color: var(--border-normal);
border-width: var(--border-width);
border-color: var(--theme--form--field--input--border-color);
border-width: var(--theme--border-width);
border-radius: 4px;
}
@@ -355,13 +355,13 @@
/* Attaches */
.codex-editor .cdx-attaches--with-file {
border: var(--border-width) solid var(--border-normal);
border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
}
.codex-editor .cdx-attaches--with-file .cdx-attaches__file-icon {
padding: 5px;
background: var(--background-normal-alt);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
margin-right: 12px;
}
@@ -379,7 +379,7 @@
.codex-editor .cdx-attaches--with-file .cdx-attaches__download-button {
background: var(--background-subdued);
border: var(--border-width) solid var(--border-normal);
border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
}
.codex-editor .cdx-attaches--with-file .cdx-attaches__download-button:hover {
@@ -408,7 +408,7 @@
.codex-editor .tc-wrap {
--color-background: var(--v-list-item-background-color-active);
--color-border: var(--border-normal);
--color-border: var(--theme--form--field--input--border-color);
--color-background-hover: var(--v-list-item-background-color-hover);
}
@@ -437,7 +437,7 @@
.codex-editor .tc-toolbox__toggler svg rect:first-child {
/* This is very ugly, but there no other way to set background of the element */
fill: var(--background-normal) !important;
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
}
.codex-editor .tc-toolbox__toggler:hover svg rect:first-child {
@@ -577,7 +577,7 @@
font-size: 18px;
font-style: italic;
line-height: 34px;
border-left: 2px dashed var(--border-normal);
border-left: 2px dashed var(--theme--form--field--input--border-color);
}
.codex-editor .ce-block video,
@@ -608,12 +608,12 @@
.codex-editor .ce-block table th,
.codex-editor .ce-block table td {
border: 1px solid var(--border-normal);
border: 1px solid var(--theme--form--field--input--border-color);
}
.codex-editor .ce-block .tc-table__wrap,
.codex-editor .ce-block .tc-table__cell {
border-color: var(--border-normal);
border-color: var(--theme--form--field--input--border-color);
}
.codex-editor .ce-block figure {

12
app/src/interfaces/input-block-editor/input-block-editor.vue
View File

@@ -195,22 +195,22 @@ function sanitizeValue(value: any): EditorJS.OutputData | null {
.disabled {
color: var(--theme--form--field--input--foreground-subdued);
background-color: var(--background-subdued);
border-color: var(--border-normal);
border-color: var(--theme--form--field--input--border-color);
pointer-events: none;
}
.bordered {
padding: var(--input-padding) 4px var(--input-padding) calc(var(--input-padding) + 8px) !important;
background-color: var(--theme--background);
border: var(--border-width) solid var(--border-normal);
border-radius: var(--border-radius);
border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
border-radius: var(--theme--border-radius);
&:hover {
border-color: var(--border-normal-alt);
border-color: var(--theme--form--field--input--border-color-hover);
}
&:focus-within {
border-color: var(--theme--primary);
border-color: var(--theme--form--field--input--border-color-focus);
}
}
@@ -235,7 +235,7 @@ function sanitizeValue(value: any): EditorJS.OutputData | null {
.uploader-preview-image {
margin-bottom: var(--form-vertical-gap);
background-color: var(--background-normal);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
}
.uploader-preview-image img {

14
app/src/interfaces/input-rich-text-html/get-editor-styles.ts
View File

@@ -115,7 +115,7 @@ code {
padding: 2px 4px;
font-family: ${cssVar('--theme--font-family-monospace')}, monospace;
background-color: ${cssVar('--background-normal')};
border-radius: ${cssVar('--border-radius')};
border-radius: ${cssVar('--theme--border-radius')};
overflow-wrap: break-word;
}
pre {
@@ -125,7 +125,7 @@ pre {
padding: 1em;
font-family: ${cssVar('--theme--font-family-monospace')}, monospace;
background-color: ${cssVar('--background-normal')};
border-radius: ${cssVar('--border-radius')};
border-radius: ${cssVar('--theme--border-radius')};
overflow: auto;
}
blockquote {
@@ -133,22 +133,22 @@ blockquote {
font-size: 15px;
line-height: 24px;
font-weight: 500;
border-left: 2px solid ${cssVar('--border-normal')};
border-left: 2px solid ${cssVar('--theme--form--field--input--border-color')};
padding-left: 1em;
margin-left: 0px;
}
video,
img {
max-width: 100%;
border-radius: ${cssVar('--border-radius')};
border-radius: ${cssVar('--theme--border-radius')};
height: auto;
}
iframe {
max-width: 100%;
border-radius: ${cssVar('--border-radius')};
border-radius: ${cssVar('--theme--border-radius')};
}
hr {
background-color: ${cssVar('--border-normal')};
background-color: ${cssVar('--theme--form--field--input--border-color')};
height: 1px;
border: none;
margin-top: 2em;
@@ -162,7 +162,7 @@ table {
}
table th,
table td {
border: 1px solid ${cssVar('--border-normal')};
border: 1px solid ${cssVar('--theme--form--field--input--border-color')};
padding: 0.4rem;
}
figure {

2
app/src/interfaces/input-rich-text-html/input-rich-text-html.vue
View File

@@ -519,7 +519,7 @@ function setFocus(val: boolean) {
height: var(--input-height-tall);
margin-bottom: 24px;
object-fit: cover;
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
}
.content {

38
app/src/interfaces/input-rich-text-html/tinymce-overrides.css
View File

@@ -90,19 +90,21 @@
.tox-tinymce {
min-height: 300px;
color: var(--theme--form--field--input--foreground);
border: 2px solid var(--border-normal);
border-radius: var(--border-radius);
border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
border-radius: var(--theme--border-radius);
transition: var(--fast) var(--transition);
transition-property: color, border-color;
box-shadow: var(--theme--form--field--input--box-shadow);
}
.wysiwyg:not(.disabled) .tox-tinymce:hover {
border-color: var(--border-normal-alt);
border-color: var(--theme--form--field--input--border-color-hover);
box-shadow: var(--theme--form--field--input--box-shadow-hover);
}
.wysiwyg:not(.disabled) .tox-tinymce.focus {
border-color: var(--theme--primary) !important;
box-shadow: 0 0 16px -8px var(--theme--primary) !important;
border-color: var(--theme--form--field--input--border-color-focus) !important;
box-shadow: var(--theme--form--field--input--box-shadow-focus) !important;
}
.tox .tox-toolbar,
@@ -111,7 +113,7 @@
min-height: 40px;
padding: 2px 0;
background: var(--background-subdued);
border-bottom: 2px solid var(--border-normal);
border-bottom: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
}
.tox .tox-pop__dialog .tox-toolbar {
@@ -148,7 +150,7 @@ body.dark .tox .tox-toolbar__overflow {
.tox .tox-tbtn:hover,
.tox .tox-split-button:focus {
color: var(--theme--form--field--input--foreground);
background: var(--border-normal);
background: var(--theme--form--field--input--border-color);
}
.tox .tox-tbtn--bespoke {
@@ -232,8 +234,8 @@ body.dark .tox .tox-toolbar__overflow {
font-size: 14px;
font-family: var(--theme--font-family-sans-serif);
background-color: var(--theme--background);
border: 2px solid var(--border-normal);
border-radius: var(--border-radius);
border: 2px solid var(--theme--form--field--input--border-color);
border-radius: var(--theme--border-radius);
transition: var(--fast) var(--transition);
}
@@ -255,12 +257,12 @@ body.dark .tox .tox-toolbar__overflow {
color: var(--theme--form--field--input--foreground);
font-family: var(--theme--font-family-sans-serif);
background-color: var(--background-subdued);
border: 2px solid var(--border-normal);
border-radius: var(--border-radius);
border: 2px solid var(--theme--form--field--input--border-color);
border-radius: var(--theme--border-radius);
}
.tox .tox-collection__item {
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
}
.tox .tox-collection--list .tox-collection__item {
@@ -284,7 +286,7 @@ body.dark .tox .tox-toolbar__overflow {
.tox .tox-textfield:focus,
.tox .tox-selectfield select:focus,
.tox .tox-textarea:focus {
border-color: var(--theme--primary);
border-color: var(--theme--form--field--input--border-color-focus);
}
.tox .tox-button {
@@ -303,7 +305,7 @@ body.dark .tox .tox-toolbar__overflow {
border: 2px solid var(--theme--primary);
border: none;
border-color: var(--theme--primary);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
cursor: pointer;
-webkit-transition: var(--fast) var(--transition);
transition: var(--fast) var(--transition);
@@ -362,7 +364,7 @@ body.dark .tox .tox-toolbar__overflow {
font-weight: 500;
font-size: 14px;
border-bottom: none;
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
transition: var(--fast) var(--transition);
transition-property: background-color, color;
}
@@ -382,7 +384,7 @@ body.dark .tox .tox-toolbar__overflow {
.tox .tox-pop__dialog,
.tox:not([dir='rtl']) .tox-toolbar__group:not(:last-of-type),
.tox .tox-collection--list .tox-collection__group {
border-color: var(--border-normal);
border-color: var(--theme--form--field--input--border-color);
}
.tox .tox-insert-table-picker__label {
@@ -390,7 +392,7 @@ body.dark .tox .tox-toolbar__overflow {
}
.tox .tox-insert-table-picker > div {
border-color: var(--border-normal);
border-color: var(--theme--form--field--input--border-color);
}
.tox .tox-insert-table-picker .tox-insert-table-picker__selected {
@@ -402,7 +404,7 @@ body.dark .tox .tox-toolbar__overflow {
}
.tox .tox-pop.tox-pop--top::before {
border-bottom-color: var(--border-normal);
border-bottom-color: var(--theme--form--field--input--border-color);
}
.tox .tox-dialog-wrap__backdrop .tox-rgba-preview {

25
app/src/interfaces/input-rich-text-md/input-rich-text-md.vue
View File

@@ -417,14 +417,18 @@ function edit(type: Alteration, options?: Record<string, any>) {
.interface-input-rich-text-md {
--v-button-background-color: transparent;
--v-button-color: var(--theme--form--field--input--foreground);
--v-button-background-color-hover: var(--border-normal);
--v-button-background-color-hover: var(--theme--form--field--input--border-color);
--v-button-color-hover: var(--theme--form--field--input--foreground);
min-height: 300px;
overflow: hidden;
font-family: var(--theme--font-family-sans-serif);
border: 2px solid var(--border-normal);
border-radius: var(--border-radius);
border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
border-radius: var(--theme--border-radius);
box-shadow: var(--theme--form--field--input--box-shadow);
transition-duration: var(--fast);
transition-timing-function: var(--transition);
transition-property: box-shadow, border-color;
}
.interface-input-rich-text-md :deep(.CodeMirror-scroll) {
@@ -435,9 +439,14 @@ function edit(type: Alteration, options?: Record<string, any>) {
background-color: var(--background-subdued);
}
.interface-input-rich-text-md:not(.disabled):hover {
border-color: var(--theme--form--field--input--border-color-hover);
box-shadow: var(--theme--form--field--input--box-shadow-hover);
}
.interface-input-rich-text-md:not(.disabled):focus-within {
border-color: var(--theme--primary);
box-shadow: 0 0 16px -8px var(--theme--primary);
border-color: var(--theme--form--field--input--border-color-focus);
box-shadow: var(--theme--form--field--input--box-shadow-focus);
}
textarea {
@@ -511,7 +520,7 @@ textarea {
min-height: 40px;
padding: 0 4px;
background-color: var(--background-subdued);
border-bottom: 2px solid var(--border-normal);
border-bottom: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
.v-button + .v-button {
margin-left: 2px;
@@ -524,9 +533,9 @@ textarea {
.view {
--v-button-background-color: var(--border-subdued);
--v-button-color: var(--theme--form--field--input--foreground-subdued);
--v-button-background-color-hover: var(--border-normal);
--v-button-background-color-hover: var(--theme--form--field--input--border-color);
--v-button-color-hover: var(--theme--form--field--input--foreground);
--v-button-background-color-active: var(--border-normal);
--v-button-background-color-active: var(--theme--form--field--input--border-color);
--v-button-color-active: var(--theme--form--field--input--foreground);
}
}

6
app/src/interfaces/list-m2m/list-m2m.vue
View File

@@ -629,7 +629,7 @@ const { createAllowed, updateAllowed, deleteAllowed, selectAllowed } = useRelati
.append {
position: sticky;
right: 0;
border-left: var(--border-width) solid var(--border-subdued);
border-left: var(--theme--border-width) solid var(--border-subdued);
}
}
}
@@ -638,8 +638,8 @@ const { createAllowed, updateAllowed, deleteAllowed, selectAllowed } = useRelati
<style lang="scss" scoped>
.bordered {
border: var(--border-width) solid var(--border-normal);
border-radius: var(--border-radius-outline);
border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
border-radius: var(--theme--border-radius);
padding: var(--v-card-padding);
}

2
app/src/interfaces/list-o2m-tree-view/nested-draggable.vue
View File

@@ -295,7 +295,7 @@ function stageEdits(item: Record<string, any>) {
.preview {
padding: 12px;
background-color: var(--card-face-color);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
box-shadow: 0px 0px 6px 0px rgb(var(--card-shadow-color), 0.2);
cursor: grab;
transition: var(--fast) var(--transition);

6
app/src/interfaces/list-o2m/list-o2m.vue
View File

@@ -588,7 +588,7 @@ function getLinkForItem(item: DisplayItem) {
.append {
position: sticky;
right: 0;
border-left: var(--border-width) solid var(--border-subdued);
border-left: var(--theme--border-width) solid var(--border-subdued);
}
}
}
@@ -597,8 +597,8 @@ function getLinkForItem(item: DisplayItem) {
<style lang="scss" scoped>
.bordered {
border: var(--border-width) solid var(--border-normal);
border-radius: var(--border-radius-outline);
border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
border-radius: var(--theme--border-radius);
padding: var(--v-card-padding);
}

10
app/src/interfaces/map/map.vue
View File

@@ -466,8 +466,8 @@ function handleKeyDown(event: any) {
.interface-map {
position: relative;
overflow: hidden;
border: var(--border-width) solid var(--border-normal);
border-radius: var(--border-radius);
border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
border-radius: var(--theme--border-radius);
.map {
position: relative;
@@ -492,7 +492,7 @@ function handleKeyDown(event: any) {
.v-info {
padding: 20px;
background-color: var(--theme--form--field--input--background);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
box-shadow: var(--card-shadow);
}
@@ -507,8 +507,8 @@ function handleKeyDown(event: any) {
padding: 10px;
color: var(--theme--form--field--input--foreground-subdued);
background-color: var(--theme--background);
border: var(--border-width) solid var(--theme--background);
border-radius: var(--border-radius);
border: var(--theme--border-width) solid var(--theme--background);
border-radius: var(--theme--border-radius);
span {
width: auto;

4
app/src/interfaces/map/options.vue
View File

@@ -110,7 +110,7 @@ onUnmounted(() => {
.map {
height: 400px;
overflow: hidden;
border: var(--border-width) solid var(--border-normal);
border-radius: var(--border-radius);
border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
border-radius: var(--theme--border-radius);
}
</style>

27
app/src/interfaces/select-color/select-color.vue
View File

@@ -246,7 +246,10 @@ function useColor() {
icon
:style="{
'--v-button-background-color': isValidColor ? hex : 'transparent',
border: lowContrast === false ? 'none' : 'var(--border-width) solid var(--border-normal)',
border:
lowContrast === false
? 'none'
: 'var(--theme--border-width) solid var(--theme--form--field--input--border-color)',
}"
@click="activateColorPicker"
>
@@ -391,7 +394,7 @@ function useColor() {
width: calc(var(--input-height) - 20px);
max-height: calc(var(--input-height) - 20px);
overflow: hidden;
border-radius: calc(var(--border-radius) + 2px);
border-radius: calc(var(--theme--border-radius) + 2px);
cursor: pointer;
}
@@ -413,7 +416,7 @@ function useColor() {
&.low-contrast {
--v-button-height: 18px;
--v-button-width: 18px;
border: 1px solid var(--border-normal-alt);
border: 1px solid var(--theme--form--field--input--border-color-hover);
}
}
@@ -441,7 +444,7 @@ function useColor() {
}
.color-data-inputs .color-data-input {
--border-radius: 0px;
--v-input-border-radius: 0px;
}
.color-data-inputs .color-data-input :deep(.input:focus-within),
@@ -457,36 +460,36 @@ function useColor() {
}
.color-data-inputs .color-data-input:not(:first-child) :deep(.input) {
margin-left: calc(-1 * var(--border-width));
margin-left: calc(-1 * var(--theme--border-width));
}
.color-data-inputs .color-data-input:first-child {
--border-radius: 4px 0px 0px 4px;
--v-input-border-radius: var(--theme--border-radius) 0px 0px var(--theme--border-radius);
}
.color-data-inputs .color-data-input:last-child {
--border-radius: 0px 4px 4px 0px;
--v-input-border-radius: 0px var(--theme--border-radius) var(--theme--border-radius) 0px;
}
.color-data-inputs.stacked .color-data-input:not(:first-child) :deep(.input) {
margin-top: calc(-2 * var(--border-width));
margin-top: calc(-2 * var(--theme--border-width));
margin-left: initial;
}
.color-data-inputs.stacked .color-data-input:not(:first-child):not(:nth-child(2)) :deep(.input) {
margin-left: calc(-1 * var(--border-width));
margin-left: calc(-1 * var(--theme--border-width));
}
.color-data-inputs.stacked .color-data-input:first-child {
--border-radius: 4px 4px 0px 0px;
--v-input-border-radius: var(--theme--border-radius) var(--theme--border-radius) 0px 0px;
}
.color-data-inputs.stacked .color-data-input:nth-child(2) {
--border-radius: 0px 0px 0px 4px;
--v-input-border-radius: 0px 0px 0px var(--theme--border-radius);
}
.color-data-inputs.stacked .color-data-input:last-child {
--border-radius: 0px 0px 4px 0px;
--v-input-border-radius: 0px 0px var(--theme--border-radius) 0px;
}
.color-data-alphas {

6
app/src/interfaces/select-multiple-checkbox-tree/select-multiple-checkbox-tree.vue
View File

@@ -84,8 +84,8 @@ const searchDebounced = ref('');
max-height: var(--input-height-max);
overflow: auto;
background-color: var(--theme--background);
border: var(--border-width) solid var(--border-normal);
border-radius: var(--border-radius);
border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
border-radius: var(--theme--border-radius);
}
.search {
@@ -110,7 +110,7 @@ const searchDebounced = ref('');
padding: 4px 8px;
text-align: right;
background-color: var(--theme--background);
border-top-left-radius: var(--border-radius);
border-top-left-radius: var(--theme--border-radius);
}
.footer > button {

4
app/src/interfaces/select-multiple-checkbox/select-multiple-checkbox.vue
View File

@@ -194,8 +194,8 @@ const { otherValues, addOtherValue, setOtherValue } = useCustomSelectionMultiple
width: 100%;
height: var(--input-height);
padding: 10px;
border: 2px dashed var(--border-normal);
border-radius: var(--border-radius);
border: 2px dashed var(--theme--form--field--input--border-color);
border-radius: var(--theme--border-radius);
input {
display: block;

4
app/src/interfaces/select-radio/select-radio.vue
View File

@@ -138,8 +138,8 @@ const customIcon = computed(() => {
width: 100%;
height: var(--input-height);
padding: 10px;
border: 2px dashed var(--border-normal);
border-radius: var(--border-radius);
border: 2px dashed var(--theme--form--field--input--border-color);
border-radius: var(--theme--border-radius);
input {
display: block;

2
app/src/interfaces/translations/language-select.vue
View File

@@ -63,7 +63,7 @@ const displayValue = computed(() => {
color: var(--theme--primary);
text-align: left;
background-color: var(--theme--primary-background);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
.display-value {
flex-grow: 1;

2
app/src/layouts/cards/components/card.vue
View File

@@ -149,7 +149,7 @@ function handleClick() {
border-color: var(--theme--primary-subdued);
border-style: solid;
border-width: 0px;
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
transition: border-width var(--fast) var(--transition);
&::after {

4
app/src/layouts/cards/components/header.vue
View File

@@ -127,8 +127,8 @@ function toggleDescending() {
margin-bottom: 36px;
padding: 0 8px;
background-color: var(--theme--background);
border-top: var(--border-width) solid var(--border-subdued);
border-bottom: var(--border-width) solid var(--border-subdued);
border-top: var(--theme--border-width) solid var(--border-subdued);
border-bottom: var(--theme--border-width) solid var(--border-subdued);
box-shadow: 0 0 0 2px var(--theme--background);
}

16
app/src/layouts/kanban/kanban.vue
View File

@@ -220,13 +220,13 @@ const textFieldConfiguration = computed<Field | undefined>(() => {
width: 320px;
padding: 8px 0;
background-color: var(--background-normal);
border: var(--border-width) solid var(--border-normal);
border-radius: var(--border-radius);
border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
border-radius: var(--theme--border-radius);
margin-right: 20px;
transition: border-color var(--transition) var(--fast);
&:active {
border-color: var(--border-normal-alt);
border-color: var(--theme--form--field--input--border-color-hover);
cursor: move;
}
@@ -261,7 +261,7 @@ const textFieldConfiguration = computed<Field | undefined>(() => {
font-size: 12px;
line-height: 20px;
background-color: var(--background-normal-alt);
border-radius: 12px; //var(--border-radius);
border-radius: 12px; //var(--theme--border-radius);
}
.actions {
@@ -288,7 +288,7 @@ const textFieldConfiguration = computed<Field | undefined>(() => {
margin: 2px 16px 6px 16px;
padding: 12px 16px;
background-color: var(--theme--background);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
box-shadow: 0px 2px 4px 0px rgba(var(--card-shadow-color), 0.1);
&:hover .title {
@@ -317,7 +317,7 @@ const textFieldConfiguration = computed<Field | undefined>(() => {
.image {
width: 100%;
margin-top: 10px;
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
margin-top: 4px;
max-height: 300px;
}
@@ -385,8 +385,8 @@ const textFieldConfiguration = computed<Field | undefined>(() => {
.add-group {
cursor: pointer;
padding: 8px 8px;
border: var(--border-width) dashed var(--border-subdued);
border-radius: var(--border-radius);
border: var(--theme--border-width) dashed var(--border-subdued);
border-radius: var(--theme--border-radius);
transition: border-color var(--transition) var(--fast);
.v-icon {

8
app/src/layouts/map/map.vue
View File

@@ -137,7 +137,7 @@ limitWritable.value = selectedSize;
.v-info {
padding: 40px;
background-color: var(--theme--background);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
box-shadow: var(--card-shadow);
pointer-events: none;
}
@@ -189,7 +189,7 @@ limitWritable.value = selectedSize;
font-size: 14px;
font-family: var(--theme--font-family-sans-serif);
background-color: var(--theme--background);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
box-shadow: var(--card-shadow);
transform: translate(-50%, -140%);
pointer-events: none;
@@ -207,8 +207,8 @@ limitWritable.value = selectedSize;
padding: 10px;
color: var(--theme--foreground-subdued);
background-color: var(--theme--background);
border: var(--border-width) solid var(--theme--background);
border-radius: var(--border-radius);
border: var(--theme--border-width) solid var(--theme--background);
border-radius: var(--theme--border-radius);
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1);
span {

4
app/src/modules/content/components/version-promote-drawer.vue
View File

@@ -283,7 +283,7 @@ function useTab() {
}
&.main {
border-radius: var(--border-radius) var(--border-radius) 0 0;
border-radius: var(--theme--border-radius) var(--theme--border-radius) 0 0;
&.active {
color: var(--theme--secondary);
background-color: var(--secondary-alt);
@@ -297,7 +297,7 @@ function useTab() {
}
&.current {
border-radius: 0 0 var(--border-radius) var(--border-radius);
border-radius: 0 0 var(--theme--border-radius) var(--theme--border-radius);
&.active {
color: var(--theme--primary);
background-color: var(--theme--primary-background);

2
app/src/modules/insights/routes/overview.vue
View File

@@ -421,8 +421,8 @@ async function batchDelete() {
<style scoped lang="scss">
.v-input {
&.search {
--v-input-border-radius: calc(44px / 2);
height: var(--v-button-height);
--border-radius: calc(44px / 2);
width: 200px;
margin-left: auto;

14
app/src/modules/insights/routes/panel-configuration.vue
View File

@@ -253,7 +253,7 @@ const stageChanges = () => {
margin-bottom: 40px;
padding-bottom: 2px;
font-weight: 700;
border-bottom: var(--border-width) solid var(--border-subdued);
border-bottom: var(--theme--border-width) solid var(--border-subdued);
}
.group + .group {
@@ -295,8 +295,8 @@ const stageChanges = () => {
width: 160px;
height: 100px;
margin-bottom: 8px;
border: var(--border-width) solid var(--border-subdued);
border-radius: var(--border-radius);
border: var(--theme--border-width) solid var(--border-subdued);
border-radius: var(--theme--border-radius);
transition: var(--fast) var(--transition);
transition-property: background-color, border-color;
}
@@ -327,12 +327,12 @@ const stageChanges = () => {
padding: 8px 16px;
background-color: var(--background-page);
border: 2px solid var(--theme--primary);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
box-shadow: 0 0 8px var(--theme--primary-75);
}
.interface:hover .preview {
border-color: var(--border-normal);
border-color: var(--theme--form--field--input--border-color);
}
.interface.active .preview {
@@ -370,8 +370,8 @@ const stageChanges = () => {
grid-column: 1 / span var(--columns);
background-color: var(--background-subdued);
border-top: var(--border-width) solid var(--border-normal);
border-bottom: var(--border-width) solid var(--border-normal);
border-top: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
border-bottom: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
}
:deep(.v-notice.normal) {

2
app/src/modules/settings/routes/data-model/collections/collections.vue
View File

@@ -277,8 +277,8 @@ async function onSort(updates: Collection[], removeGroup = false) {
<style scoped lang="scss">
.v-input.search {
--v-input-border-radius: calc(44px / 2);
height: var(--v-button-height);
--border-radius: calc(44px / 2);
width: 200px;
margin-left: auto;

4
app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-m2a.vue
View File

@@ -287,8 +287,8 @@ const unsortableJunctionFields = computed(() => {
color: var(--theme--foreground-subdued);
font-family: var(--theme--font-family-monospace);
background-color: var(--background-subdued);
border: var(--border-width) solid var(--border-normal);
border-radius: var(--border-radius);
border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
border-radius: var(--theme--border-radius);
}
.one-collection-field {

4
app/src/modules/settings/routes/data-model/field-detail/field-detail-simple/field-configuration.vue
View File

@@ -166,8 +166,8 @@ const options = computed({
grid-column: 1 / span var(--columns);
background-color: var(--background-subdued);
border-top: var(--border-width) solid var(--border-normal);
border-bottom: var(--border-width) solid var(--border-normal);
border-top: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
border-bottom: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
}
.setup {

10
app/src/modules/settings/routes/data-model/field-detail/field-detail-simple/field-detail-simple.vue
View File

@@ -183,7 +183,7 @@ function toggleInterface(id: string) {
margin-bottom: 40px;
padding-bottom: 2px;
font-weight: 700;
border-bottom: var(--border-width) solid var(--border-subdued);
border-bottom: var(--theme--border-width) solid var(--border-subdued);
}
.group + .group {
@@ -225,8 +225,8 @@ function toggleInterface(id: string) {
width: 160px;
height: 100px;
margin-bottom: 8px;
border: var(--border-width) solid var(--border-subdued);
border-radius: var(--border-radius);
border: var(--theme--border-width) solid var(--border-subdued);
border-radius: var(--theme--border-radius);
transition: var(--fast) var(--transition);
transition-property: background-color, border-color;
}
@@ -257,12 +257,12 @@ function toggleInterface(id: string) {
padding: 8px 16px;
background-color: var(--theme--background);
border: 2px solid var(--theme--primary);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
box-shadow: 0 0 8px var(--theme--primary-subdued);
}
.interface:hover .preview {
border-color: var(--border-normal);
border-color: var(--theme--form--field--input--border-color);
}
.interface.active .preview {

2
app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
View File

@@ -136,7 +136,7 @@ async function save() {
}
.v-input.search {
--border-radius: calc(44px / 2);
--v-input-border-radius: calc(44px / 2);
width: 200px;
margin-left: auto;

10
app/src/modules/settings/routes/data-model/fields/components/field-select.vue
View File

@@ -376,7 +376,7 @@ async function onGroupSortChange(fields: Field[]) {
padding: var(--input-padding);
padding-top: 40px;
padding-bottom: 16px;
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
> * {
position: relative;
@@ -443,19 +443,19 @@ async function onGroupSortChange(fields: Field[]) {
&.nested {
.field :deep(.input) {
border: var(--border-width) solid var(--theme--primary-subdued);
border: var(--theme--border-width) solid var(--theme--primary-subdued);
}
}
}
.field {
&.v-input :deep(.input) {
border: var(--border-width) solid var(--border-subdued);
border: var(--theme--border-width) solid var(--border-subdued);
}
&.v-input :deep(.input:hover) {
background-color: var(--card-face-color);
border: var(--border-width) solid var(--border-normal-alt);
border: var(--theme--border-width) solid var(--theme--form--field--input--border-color-hover);
}
.label {
@@ -520,7 +520,7 @@ async function onGroupSortChange(fields: Field[]) {
}
.sortable-ghost {
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
outline: 2px dashed var(--theme--primary);
> * {

6
app/src/modules/settings/routes/flows/components/logs-sidebar-detail.vue
View File

@@ -203,7 +203,7 @@ const steps = computed(() => {
width: calc(100% + 8px);
height: calc(100% + 8px);
background-color: var(--background-normal-alt);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
opacity: 0;
transition: opacity var(--fast) var(--transition);
content: '';
@@ -232,7 +232,7 @@ const steps = computed(() => {
.json {
background-color: var(--background-subdued);
font-family: var(--theme--font-family-monospace);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
padding: 20px;
margin-top: 20px;
white-space: pre-wrap;
@@ -248,7 +248,7 @@ const steps = computed(() => {
&::after {
content: '';
position: absolute;
width: var(--border-width);
width: var(--theme--border-width);
left: -11px;
top: 0;
background-color: var(--border-subdued);

2
app/src/modules/settings/routes/roles/item/components/permissions-overview-header.vue
View File

@@ -25,7 +25,7 @@ const { t } = useI18n();
display: flex;
padding: 12px;
background-color: var(--theme--form--field--input--background);
border-bottom: var(--border-width) solid var(--border-normal);
border-bottom: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
.name {
flex-grow: 1;

2
app/src/modules/settings/routes/roles/item/components/permissions-overview-row.vue
View File

@@ -129,7 +129,7 @@ function isLoading(action: string) {
}
& + .permissions-overview-row {
border-top: var(--border-width) solid var(--border-subdued);
border-top: var(--theme--border-width) solid var(--border-subdued);
}
}
</style>

4
app/src/modules/settings/routes/roles/item/components/permissions-overview.vue
View File

@@ -210,8 +210,8 @@ function useReset() {
.table {
max-width: 792px;
background-color: var(--theme--form--field--input--background);
border: var(--border-width) solid var(--border-normal);
border-radius: var(--border-radius);
border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
border-radius: var(--theme--border-radius);
}
.system-toggle {

2
app/src/modules/settings/routes/roles/permissions-detail/components/fields.vue
View File

@@ -109,7 +109,7 @@ const fields = computed({
padding: 16px;
font-family: var(--theme--font-family-monospace);
background-color: var(--background-subdued);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
}
}
</style>

2
app/src/modules/settings/routes/roles/permissions-detail/components/permissions.vue
View File

@@ -71,7 +71,7 @@ const fields = computed(() => [
padding: 16px;
font-family: var(--theme--font-family-monospace);
background-color: var(--background-subdued);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
}
}
</style>

2
app/src/modules/users/routes/item.vue
View File

@@ -460,7 +460,7 @@ function revert(values: Record<string, any>) {
margin-bottom: var(--form-vertical-gap);
padding: 20px;
background-color: var(--background-normal);
border-radius: calc(var(--border-radius) + 4px);
border-radius: calc(var(--theme--border-radius) + 4px);
.avatar {
--v-icon-color: var(--theme--foreground-subdued);

4
app/src/panels/bar-chart/panel-bar-chart.vue
View File

@@ -337,11 +337,11 @@ function setUpChart() {
<style>
.apexcharts-tooltip.apexcharts-theme-light {
border-color: var(--border-normal) !important;
border-color: var(--theme--form--field--input--border-color) !important;
}
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
border-color: var(--border-normal) !important;
border-color: var(--theme--form--field--input--border-color) !important;
margin-bottom: 0;
padding: 0 4px;
font-weight: 600 !important;

6
app/src/panels/line-chart/panel-line-chart.vue
View File

@@ -260,7 +260,7 @@ function setUpChart() {
},
crosshairs: {
stroke: {
color: 'var(--border-normal)',
color: 'var(--theme--form--field--input--border-color)',
},
},
},
@@ -329,11 +329,11 @@ function setUpChart() {
<style>
.apexcharts-tooltip.apexcharts-theme-light {
border-color: var(--border-normal) !important;
border-color: var(--theme--form--field--input--border-color) !important;
}
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
border-color: var(--border-normal) !important;
border-color: var(--theme--form--field--input--border-color) !important;
margin-bottom: 0;
padding: 0 4px;
font-weight: 600 !important;

4
app/src/panels/list/panel-list.vue
View File

@@ -95,10 +95,10 @@ async function saveEdits(item: Record<string, any>) {
.v-list-item {
height: 48px;
border-top: var(--border-width) solid var(--border-subdued);
border-top: var(--theme--border-width) solid var(--border-subdued);
}
.v-list-item:last-child {
border-bottom: var(--border-width) solid var(--border-subdued);
border-bottom: var(--theme--border-width) solid var(--border-subdued);
}
</style>

2
app/src/panels/metric-list/panel-metric-list.vue
View File

@@ -199,7 +199,7 @@ function getColor(input) {
}
.metric-list-item {
height: 36px;
border-bottom: var(--border-width) solid var(--border-subdued);
border-bottom: var(--theme--border-width) solid var(--border-subdued);
}
.metric-list-item:last-child {

4
app/src/panels/pie-chart/panel-pie-chart.vue
View File

@@ -283,11 +283,11 @@ function checkMatchingConditionalFill(
<style>
.apexcharts-tooltip.apexcharts-theme-light {
border-color: var(--border-normal) !important;
border-color: var(--theme--form--field--input--border-color) !important;
}
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
border-color: var(--border-normal) !important;
border-color: var(--theme--form--field--input--border-color) !important;
margin-bottom: 0;
padding: 0 4px;
font-weight: 600 !important;

6
app/src/panels/time-series/panel-time-series.vue
View File

@@ -250,7 +250,7 @@ function setupChart() {
},
crosshairs: {
stroke: {
color: 'var(--border-normal)',
color: 'var(--theme--form--field--input--border-color)',
},
},
},
@@ -343,11 +343,11 @@ function setupChart() {
<style>
.apexcharts-tooltip.apexcharts-theme-light {
border-color: var(--border-normal) !important;
border-color: var(--theme--form--field--input--border-color) !important;
}
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
border-color: var(--border-normal) !important;
border-color: var(--theme--form--field--input--border-color) !important;
margin-bottom: 0;
padding: 0 4px;
font-weight: 600 !important;

4
app/src/routes/login/components/sso-links.vue
View File

@@ -95,7 +95,7 @@ const errorFormatted = computed(() => {
height: var(--input-height);
background-color: var(--background-normal);
border: $sso-link-border-width var(--background-normal) solid;
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
transition: border-color var(--fast) var(--transition);
.sso-icon {
@@ -105,7 +105,7 @@ const errorFormatted = computed(() => {
width: var(--input-height);
margin: -$sso-link-border-width;
background-color: var(--background-normal-alt);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
span {
--v-icon-size: 28px;

2
app/src/routes/shared/shared.vue
View File

@@ -206,7 +206,7 @@ h2 {
width: calc(100% + 24px);
height: calc(100% + 24px);
background-color: var(--danger-alt);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
transition: var(--medium) var(--transition);
transition-property: background-color, padding, margin;
content: '';

12
app/src/styles/_markdown.scss
View File

@@ -100,7 +100,7 @@ code {
line-height: 24px;
overflow-wrap: break-word;
background-color: var(--background-normal);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
}
pre {
@@ -111,7 +111,7 @@ pre {
font-family: var(--theme--font-family-monospace), monospace;
line-height: 24px;
background-color: var(--background-normal);
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
}
blockquote {
@@ -120,7 +120,7 @@ blockquote {
font-weight: 500;
font-size: 15px;
line-height: 24px;
border-left: 2px solid var(--border-normal);
border-left: 2px solid var(--theme--form--field--input--border-color);
}
blockquote blockquote {
@@ -132,14 +132,14 @@ iframe,
img {
max-width: 100%;
height: auto;
border-radius: var(--border-radius);
border-radius: var(--theme--border-radius);
}
hr {
height: 1px;
margin-top: 2em;
margin-bottom: 2em;
background-color: var(--border-normal);
background-color: var(--theme--form--field--input--border-color);
border: none;
}
@@ -153,7 +153,7 @@ table {
table th,
table td {
padding: 0.4rem;
border: 1px solid var(--border-normal);
border: 1px solid var(--theme--form--field--input--border-color);
}
figure {

3
app/src/styles/_variables.scss
View File

@@ -9,9 +9,6 @@
--slow: 300ms;
--header-bar-height: 61px;
--content-padding: 12px;
--border-width: 2px;
--border-radius-outline: 6px;
--border-radius: 4px;
--input-height: 52px;
--input-height-tall: 168px;
--input-height-max: 500px;

Some files were not shown because too many files have changed in this diff Show More