mirror of
https://github.com/coollabsio/coolify.git
synced 2026-11-06 13:10:37 -04:00
style(ui): use neutral colors for selection checkmarks
This commit is contained in:
@@ -21,7 +21,7 @@
|
||||
:style="`background: ${themeColor}`"></span>
|
||||
Custom
|
||||
</span>
|
||||
<svg x-show="theme === 'custom'" class="size-3.5 text-coollabs dark:text-warning"
|
||||
<svg x-show="theme === 'custom'" class="size-3.5 text-black dark:text-fg"
|
||||
viewBox="0 0 12 12" fill="none" aria-hidden="true">
|
||||
<path d="{{ $checkPath }}" stroke="currentColor" stroke-width="1.4"
|
||||
stroke-linecap="round" stroke-linejoin="round" />
|
||||
@@ -34,7 +34,7 @@
|
||||
class="flex h-8 w-full items-center justify-between rounded-md px-2 text-left text-xs text-neutral-600 transition-colors hover:bg-neutral-200 hover:text-neutral-950 dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-fg">
|
||||
<span>{{ $option['label'] }}</span>
|
||||
<svg x-show="theme === '{{ $option['value'] }}'"
|
||||
class="size-3.5 text-coollabs dark:text-warning" viewBox="0 0 12 12" fill="none"
|
||||
class="size-3.5 text-black dark:text-fg" viewBox="0 0 12 12" fill="none"
|
||||
aria-hidden="true">
|
||||
<path d="{{ $checkPath }}" stroke="currentColor" stroke-width="1.4"
|
||||
stroke-linecap="round" stroke-linejoin="round" />
|
||||
@@ -54,7 +54,7 @@
|
||||
class="flex h-8 w-full items-center justify-between rounded-md px-2 text-left text-xs text-neutral-600 transition-colors hover:bg-neutral-200 hover:text-neutral-950 dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-fg">
|
||||
<span>{{ $option['label'] }}</span>
|
||||
<svg x-show="pageWidth === '{{ $option['value'] }}'"
|
||||
class="size-3.5 text-coollabs dark:text-warning" viewBox="0 0 12 12" fill="none"
|
||||
class="size-3.5 text-black dark:text-fg" viewBox="0 0 12 12" fill="none"
|
||||
aria-hidden="true">
|
||||
<path d="{{ $checkPath }}" stroke="currentColor" stroke-width="1.4"
|
||||
stroke-linecap="round" stroke-linejoin="round" />
|
||||
@@ -99,7 +99,7 @@
|
||||
<div class="p-3">
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<span class="text-sm font-semibold text-black dark:text-fg">{{ $option['label'] }}</span>
|
||||
<x-reicon name="check-circle" class="size-4 text-coollabs dark:text-warning"
|
||||
<x-reicon name="check-circle" class="size-4 text-black dark:text-fg"
|
||||
x-show="theme === 'custom'" x-cloak />
|
||||
</div>
|
||||
<p class="mt-1 text-xs leading-5 text-neutral-500 dark:text-fg-dim">
|
||||
@@ -129,7 +129,7 @@
|
||||
<span class="text-sm font-semibold text-black dark:text-fg">
|
||||
{{ $option['label'] }}
|
||||
</span>
|
||||
<x-reicon name="check-circle" class="size-4 text-coollabs dark:text-warning"
|
||||
<x-reicon name="check-circle" class="size-4 text-black dark:text-fg"
|
||||
x-show="theme === '{{ $option['value'] }}'" x-cloak />
|
||||
</div>
|
||||
<p class="mt-1 text-xs leading-5 text-neutral-500 dark:text-fg-dim">
|
||||
@@ -172,7 +172,7 @@
|
||||
<div class="p-3">
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<span class="text-sm font-semibold text-black dark:text-fg">{{ $option['label'] }}</span>
|
||||
<x-reicon name="check-circle" class="size-4 text-coollabs dark:text-warning"
|
||||
<x-reicon name="check-circle" class="size-4 text-black dark:text-fg"
|
||||
x-show="pageWidth === '{{ $option['value'] }}'" x-cloak />
|
||||
</div>
|
||||
<p class="mt-1 text-xs leading-5 text-neutral-500 dark:text-fg-dim">{{ $option['description'] }}</p>
|
||||
|
||||
@@ -124,7 +124,7 @@
|
||||
class="flex h-8 w-full items-center rounded-md px-2 text-left text-[12px] text-neutral-600 transition-colors hover:bg-neutral-100 hover:text-black dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-fg"
|
||||
x-on:click="typeFilter = option.value; close()">
|
||||
<span class="flex-1" x-text="option.label"></span>
|
||||
<svg x-show="typeFilter === option.value" class="size-3.5 text-warning"
|
||||
<svg x-show="typeFilter === option.value" class="size-3.5 text-black dark:text-fg"
|
||||
viewBox="0 0 12 12" fill="none" aria-hidden="true">
|
||||
<path d="m2.5 6.25 2.1 2.1 4.9-5" stroke="currentColor" stroke-width="1.4"
|
||||
stroke-linecap="round" stroke-linejoin="round" />
|
||||
@@ -146,7 +146,7 @@
|
||||
class="flex h-8 w-full items-center rounded-md px-2 text-left text-[12px] text-neutral-600 transition-colors hover:bg-neutral-100 hover:text-black dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-fg"
|
||||
x-on:click="sortBy = option.value; close()">
|
||||
<span class="flex-1" x-text="option.label"></span>
|
||||
<svg x-show="sortBy === option.value" class="size-3.5 text-warning"
|
||||
<svg x-show="sortBy === option.value" class="size-3.5 text-black dark:text-fg"
|
||||
viewBox="0 0 12 12" fill="none" aria-hidden="true">
|
||||
<path d="m2.5 6.25 2.1 2.1 4.9-5" stroke="currentColor" stroke-width="1.4"
|
||||
stroke-linecap="round" stroke-linejoin="round" />
|
||||
|
||||
@@ -104,7 +104,7 @@
|
||||
</p>
|
||||
</div>
|
||||
<x-reicon name="check"
|
||||
class="size-4 shrink-0 text-coollabs dark:text-warning" />
|
||||
class="size-4 shrink-0 text-black dark:text-fg" />
|
||||
</div>
|
||||
@endif
|
||||
|
||||
|
||||
@@ -66,7 +66,7 @@
|
||||
class="flex h-9 w-full items-center rounded-md px-2 text-left text-[12px] text-neutral-600 transition-colors hover:bg-neutral-100 hover:text-black dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-fg"
|
||||
x-on:click="sortBy = option.value; close(); page = 1">
|
||||
<span class="flex-1" x-text="option.label"></span>
|
||||
<svg x-show="sortBy === option.value" class="size-3.5 text-warning"
|
||||
<svg x-show="sortBy === option.value" class="size-3.5 text-black dark:text-fg"
|
||||
viewBox="0 0 12 12" fill="none" aria-hidden="true">
|
||||
<path d="m2.5 6.25 2.1 2.1 4.9-5" stroke="currentColor"
|
||||
stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
:aria-selected="resourceType === option.value"
|
||||
@click="resourceType = option.value; close()">
|
||||
<span x-text="option.label"></span>
|
||||
<x-reicon name="check-circle" class="size-3.5 text-accent"
|
||||
<x-reicon name="check-circle" class="size-3.5 text-black dark:text-fg"
|
||||
x-show="resourceType === option.value" />
|
||||
</button>
|
||||
</template>
|
||||
@@ -71,7 +71,7 @@
|
||||
:aria-selected="selectedCategory === ''"
|
||||
@click="selectedCategory = ''; categorySearch = ''; categoryOpen = false">
|
||||
<span>All categories</span>
|
||||
<x-reicon name="check-circle" class="size-3.5 text-accent"
|
||||
<x-reicon name="check-circle" class="size-3.5 text-black dark:text-fg"
|
||||
x-show="selectedCategory === ''" />
|
||||
</button>
|
||||
<template
|
||||
@@ -81,7 +81,7 @@
|
||||
:aria-selected="selectedCategory === category"
|
||||
@click="selectedCategory = category; categorySearch = ''; categoryOpen = false">
|
||||
<span class="truncate" x-text="category"></span>
|
||||
<x-reicon name="check-circle" class="size-3.5 text-accent"
|
||||
<x-reicon name="check-circle" class="size-3.5 text-black dark:text-fg"
|
||||
x-show="selectedCategory === category" />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
@@ -140,7 +140,7 @@
|
||||
class="flex h-9 w-full items-center rounded-md px-2 text-left text-[12px] text-neutral-600 transition-colors hover:bg-neutral-100 hover:text-black dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-fg"
|
||||
x-on:click="sortBy = option.value; close(); page = 1">
|
||||
<span class="flex-1" x-text="option.label"></span>
|
||||
<svg x-show="sortBy === option.value" class="size-3.5 text-warning"
|
||||
<svg x-show="sortBy === option.value" class="size-3.5 text-black dark:text-fg"
|
||||
viewBox="0 0 12 12" fill="none" aria-hidden="true">
|
||||
<path d="m2.5 6.25 2.1 2.1 4.9-5" stroke="currentColor"
|
||||
stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
|
||||
|
||||
@@ -194,7 +194,7 @@
|
||||
class="flex h-8 w-full items-center rounded-md px-2 text-left text-[12px] text-neutral-600 transition-colors hover:bg-neutral-100 hover:text-black dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-fg"
|
||||
x-on:click="typeFilter = option.value; close()">
|
||||
<span class="flex-1" x-text="option.label"></span>
|
||||
<svg x-show="typeFilter === option.value" class="size-3.5 text-warning"
|
||||
<svg x-show="typeFilter === option.value" class="size-3.5 text-black dark:text-fg"
|
||||
viewBox="0 0 12 12" fill="none" aria-hidden="true">
|
||||
<path d="m2.5 6.25 2.1 2.1 4.9-5" stroke="currentColor" stroke-width="1.4"
|
||||
stroke-linecap="round" stroke-linejoin="round" />
|
||||
@@ -216,7 +216,7 @@
|
||||
class="flex h-8 w-full items-center rounded-md px-2 text-left text-[12px] text-neutral-600 transition-colors hover:bg-neutral-100 hover:text-black dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-fg"
|
||||
x-on:click="sortBy = option.value; close()">
|
||||
<span class="flex-1" x-text="option.label"></span>
|
||||
<svg x-show="sortBy === option.value" class="size-3.5 text-warning"
|
||||
<svg x-show="sortBy === option.value" class="size-3.5 text-black dark:text-fg"
|
||||
viewBox="0 0 12 12" fill="none" aria-hidden="true">
|
||||
<path d="m2.5 6.25 2.1 2.1 4.9-5" stroke="currentColor" stroke-width="1.4"
|
||||
stroke-linecap="round" stroke-linejoin="round" />
|
||||
|
||||
@@ -86,7 +86,7 @@
|
||||
class="flex h-9 w-full items-center rounded-md px-2 text-left text-[12px] text-neutral-600 transition-colors hover:bg-neutral-100 hover:text-black dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-fg"
|
||||
x-on:click="sortBy = option.value; close(); page = 1">
|
||||
<span class="flex-1" x-text="option.label"></span>
|
||||
<svg x-show="sortBy === option.value" class="size-3.5 text-warning"
|
||||
<svg x-show="sortBy === option.value" class="size-3.5 text-black dark:text-fg"
|
||||
viewBox="0 0 12 12" fill="none" aria-hidden="true">
|
||||
<path d="m2.5 6.25 2.1 2.1 4.9-5" stroke="currentColor"
|
||||
stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
|
||||
|
||||
@@ -142,7 +142,7 @@
|
||||
:class="option.functional ? 'bg-success' : 'bg-error'"></span>
|
||||
<span class="min-w-0 flex-1 truncate" x-text="option.name"></span>
|
||||
<x-reicon name="check-circle"
|
||||
class="size-3.5 shrink-0 text-coollabs dark:text-warning"
|
||||
class="size-3.5 shrink-0 text-black dark:text-fg"
|
||||
x-show="option.uuid === '{{ $server->uuid }}'" />
|
||||
</a>
|
||||
</template>
|
||||
|
||||
@@ -59,7 +59,7 @@
|
||||
class="flex h-9 w-full items-center rounded-md px-2 text-left text-[12px] text-neutral-600 transition-colors hover:bg-neutral-100 hover:text-black dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-fg"
|
||||
x-on:click="sortBy = option.value; close(); page = 1">
|
||||
<span class="flex-1" x-text="option.label"></span>
|
||||
<svg x-show="sortBy === option.value" class="size-3.5 text-warning"
|
||||
<svg x-show="sortBy === option.value" class="size-3.5 text-black dark:text-fg"
|
||||
viewBox="0 0 12 12" fill="none" aria-hidden="true">
|
||||
<path d="m2.5 6.25 2.1 2.1 4.9-5" stroke="currentColor"
|
||||
stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
|
||||
|
||||
Reference in New Issue
Block a user