agw/overleaf-cep
1
0
Fork 0
mirror of https://github.com/yu-i-i/overleaf-cep.git synced 2026-11-12 13:13:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

Enable themed modals

Browse Source
This commit is contained in:
yu-i-i
2026-09-27 18:11:28 +02:00
parent f0ac2f4051
commit 7bc2c7f2fa
18 changed files with 122 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/web/modules/reference-picker/frontend/components/reference-picker-modal.tsx
+1 -1
View File
@@ -299,7 +299,7 @@ const scrollToReference = useCallback((key: string) => {
}, [focusArea, focusedIndex])
return (
<OLModal show={show} onHide={onClose} size="lg">
<OLModal show={show} onHide={onClose} size="lg" themed="true">
<OLModalHeader>
<OLModalTitle>{t('references_picker_title')}</OLModalTitle>
</OLModalHeader>
services/web/modules/reference-picker/frontend/styles/reference-picker.scss
+29 -6
View File
@@ -1,3 +1,21 @@
:root {
--badge-bg-color-existing: var(--ds-color-green-900);
--badge-bg-color-nonexistent: var(--ds-color-red-950);
--badge-bg-color-existing-hover: var(--ds-color-green-800);
--badge-close-color: var(--content-primary-dark);
--badge-close-bg-color-hover: var(--bg-dark-tertiary);
--search-result-at-focus-bg-color: var(--ds-color-teal-950);
}
@include theme('light') {
--badge-bg-color-existing: var(--ds-color-green-50);
--badge-bg-color-nonexistent: var(--ds-color-red-50);
--badge-bg-color-existing-hover: var(--ds-color-green-100);
--badge-close-color: var(--content-primary);
--badge-close-bg-color-hover: var(--bg-light-tertiary);
--search-result-at-focus-bg-color: var(--ds-color-teal-50);
}
.references-search-modal {
.selected-key-tags {
position: relative;
@@ -11,26 +29,31 @@
font-size: var(--font-size-02);
margin-top: -10px;
margin-bottom: 8px;
box-shadow: 0 1px 0 var(--ds-color-neutral-100);
box-shadow: 0 1px 0 var(--border-divider-themed);
padding-bottom: 6px;
}
.selected-key-tags .existing-key-tag .badge-tag {
background-color: var(--ds-color-green-50) !important;
background-color: var(--badge-bg-color-existing) !important;
}
.selected-key-tags .nonexistent-key-tag .badge-tag {
background-color: var(--ds-color-red-50) !important;
background-color: var(--badge-bg-color-nonexistent) !important;
}
.existing-key-tag .badge-tag-content-btn:hover {
background-color: var(--ds-color-green-100);
background-color: var(--badge-bg-color-existing-hover);
}
.nonexistent-key-tag .badge-tag-content-btn:hover {
background-color: transparent;
}
.badge-close {
color: var(--badge-close-color);
}
.badge-close:hover,
.badge-close:focus {
background-color: var(--ds-color-neutral-100);
background-color: var(--badge-close-bg-color-hover);
}
.search-results {
.search-results-scroll-container {
max-height: calc(100vh - 330px);
@@ -38,7 +61,7 @@
}
.search-result-hit {
&:focus {
background: var(--ds-color-yellow-50);
background: var(--search-result-at-focus-bg-color);
outline: none;
}
}