diff --git a/src/client/components/AdvancedSearch.vue b/src/client/components/AdvancedSearch.vue index 773248e4f0fd6008c4323b022e8924c3b1cd0524..8b59449f87004c2549c7e00859702fd0e0689ac5 100644 --- a/src/client/components/AdvancedSearch.vue +++ b/src/client/components/AdvancedSearch.vue @@ -227,7 +227,7 @@ function removeFilter (filterChip: FilterChip): void { } .filter-chip { - border-radius: 16px; + border-radius: var(--big-radius); border: 1px solid var(--primary); color: var(--primary); padding-left: 8px; @@ -260,25 +260,35 @@ function removeFilter (filterChip: FilterChip): void { flex-flow: row wrap; gap: var(--spacing); padding-left: var(--spacing); + padding-bottom: var(--spacing); max-width: 800px; } .checkbox { display: flex; - gap: calc(var(--spacing) / 2); + transition: color 0.1s; &:hover { color: var(--primary); } } -.checkbox input, +.checkbox input { + display: none; +} + .checkbox label { cursor: pointer; + border: 1px solid inherit; + border-radius: var(--big-radius); + padding: calc(var(--spacing) / 3) calc(var(--spacing) / 2); + transition: all 0.2s; } .checkbox input:checked+label { - color: var(--primary); + background-color: var(--primary); + border-color: var(--primary); + color: var(--black); } .advanced-search-dialog footer { diff --git a/src/client/components/AntibodiesTable.vue b/src/client/components/AntibodiesTable.vue index 79e33d4d1c43b3ba4d3e4cc655d2fd9ed92b884d..4dbd96278f97c9ed49f2ef5cc143e3d329cb398c 100644 --- a/src/client/components/AntibodiesTable.vue +++ b/src/client/components/AntibodiesTable.vue @@ -351,7 +351,7 @@ function download(): void { .loader { height: 23px; width: 23px; - border-radius: 50%; + border-radius: var(--big-radius); display: inline-block; border-top: 3px solid #FFF; border-right: 3px solid transparent; diff --git a/src/client/components/TheAntibodyPage.vue b/src/client/components/TheAntibodyPage.vue index 3425fc9d80b3d930c3782688f1a2f6f908e1f711..a03e57724a65f367c36efe01939b93cef75fed82 100644 --- a/src/client/components/TheAntibodyPage.vue +++ b/src/client/components/TheAntibodyPage.vue @@ -140,7 +140,7 @@ nav { .doc-link { border: 1px solid; border-color: inherit; - border-radius: 50%; + border-radius: var(--big-radius); margin-left: 7px; padding: 0 7px; } diff --git a/src/client/globals.css b/src/client/globals.css index c8a7d569d3ee29c43faa55013b9fa9efeb70a9a2..3383f5f09b2cdb9ecaceaac3103edd512b99ff58 100644 --- a/src/client/globals.css +++ b/src/client/globals.css @@ -20,6 +20,7 @@ --spacing: 20px; --spacing-table: 16px; --radius: 5px; + --big-radius: 24px; --button-padding: 0.5em 0.75em;