rahix/openflexure-microscope-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Style gallery filter for dark mode

Browse source
This commit is contained in:
Julian Stirling 2026-06-25 09:34:43 +01:00
parent 8abc068efb
commit 86fbbc75de
2 changed files with 51 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

42
webapp/src/assets/less/variables.less
View file

@ -270,6 +270,48 @@
} }
} }
// A button styled like text. For use in menus
.ofm-text-button {
display: block;
background: none;
border: none;
padding: 8px 10px;
cursor: pointer;
color: @global-color;
width: 100%;
text-align: left;
font-weight: 600;
}
.hook-inverse() {
.ofm-text-button{
color: @inverse-global-color;
}
}
/*
* Opaque - button-like colours
*
* The buttons are transparent. If an element overlays others it should
* Look the same as the buttons, but have no transparency.
*/
.ofm-opaque-element{
background: #f5f5f5;
}
.hook-inverse() {
.ofm-opaque-element{
background: #282626;
}
}
.ofm-opaque-highlight:hover {
background: #fff;
}
.hook-inverse() {
.ofm-opaque-highlight:hover {
background: #000;
}
}
/* /*
* Accordion * Accordion
*/ */

32
webapp/src/components/genericComponents/multiSelectDropdown.vue
View file

@ -1,15 +1,19 @@
<template> <template>
<div ref="multiselect" class="multi-select"> <div ref="multiselect" class="multi-select">
<div class="dropdown-top" :class="{ open: isOpen }" @click="isOpen = !isOpen"> <div
class="dropdown-top ofm-opaque-element ofm-opaque-highlight"
:class="{ open: isOpen }"
@click="isOpen = !isOpen"
>
<span class="dropdown-top-text">{{ title }}</span> <span class="dropdown-top-text">{{ title }}</span>
<span>{{ arrow }}</span> <span>{{ arrow }}</span>
</div> </div>
<div v-if="isOpen" class="dropdown-menu"> <div v-if="isOpen" class="dropdown-menu ofm-opaque-element">
<button class="text-button" @click="selectAll">Select All</button> <button class="ofm-text-button ofm-opaque-highlight" @click="selectAll">Select All</button>
<button class="text-button" @click="selectNone">Select None</button> <button class="ofm-text-button ofm-opaque-highlight" @click="selectNone">Select None</button>
<hr class="dropdown-separator" /> <hr class="dropdown-separator" />
<label v-for="option in options" :key="option" class="dropdown-item"> <label v-for="option in options" :key="option" class="dropdown-item ofm-opaque-highlight">
<input <input
type="checkbox" type="checkbox"
class="uk-checkbox" class="uk-checkbox"
@ -108,7 +112,6 @@ export default {
padding: 8px 12px; padding: 8px 12px;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
background: #f5f5f5;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -130,34 +133,17 @@ export default {
border-right: 1px solid #ccc; border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
background: #f5f5f5;
max-height: 250px; max-height: 250px;
overflow-y: auto; overflow-y: auto;
z-index: 1000; z-index: 1000;
} }
.text-button {
display: block;
background: none;
border: none;
padding: 8px 10px;
cursor: pointer;
width: 100%;
text-align: left;
font-weight: 600;
}
.dropdown-item { .dropdown-item {
display: block; display: block;
padding: 8px 12px; padding: 8px 12px;
cursor: pointer; cursor: pointer;
} }
.text-button:hover,
.dropdown-item:hover {
background: #fff;
}
.dropdown-separator { .dropdown-separator {
margin: 5px; margin: 5px;
} }