diff options
Diffstat (limited to 'web_src/css/features')
-rw-r--r-- | web_src/css/features/expander.css | 96 | ||||
-rw-r--r-- | web_src/css/features/projects.css | 27 | ||||
-rw-r--r-- | web_src/css/features/tribute.css | 32 |
3 files changed, 106 insertions, 49 deletions
diff --git a/web_src/css/features/expander.css b/web_src/css/features/expander.css new file mode 100644 index 0000000000..f560b2a9fd --- /dev/null +++ b/web_src/css/features/expander.css @@ -0,0 +1,96 @@ +text-expander .suggestions, +.tribute-container { + position: absolute; + max-height: min(300px, 95vh); + max-width: min(500px, 95vw); + overflow-x: hidden; + overflow-y: auto; + white-space: nowrap; + background: var(--color-menu); + box-shadow: 0 6px 18px var(--color-shadow); + border-radius: var(--border-radius); + border: 1px solid var(--color-secondary); + z-index: 100; /* needs to be > 20 to be on top of dropzone's .dz-details */ +} + +text-expander { + display: block; + position: relative; +} + +text-expander .suggestions { + padding: 0; + margin-top: 24px; + list-style: none; +} + +text-expander .suggestions li, +.tribute-item { + display: flex; + align-items: center; + cursor: pointer; + gap: 6px; + font-weight: var(--font-weight-medium); +} + +text-expander .suggestions li, +.tribute-container li { + padding: 3px 6px; +} + +text-expander .suggestions li + li, +.tribute-container li + li { + border-top: 1px solid var(--color-secondary); +} + +text-expander .suggestions li:first-child { + border-radius: var(--border-radius) var(--border-radius) 0 0; +} + +text-expander .suggestions li:last-child { + border-radius: 0 0 var(--border-radius) var(--border-radius); +} + +text-expander .suggestions li:only-child { + border-radius: var(--border-radius); +} + +text-expander .suggestions .fullname, +.tribute-container li .fullname { + font-weight: var(--font-weight-normal); + color: var(--color-text-light-1); + overflow: hidden; + text-overflow: ellipsis; +} + +text-expander .suggestions li:hover, +text-expander .suggestions li:hover *, +text-expander .suggestions li[aria-selected="true"], +text-expander .suggestions li[aria-selected="true"] *, +.tribute-container li.highlight, +.tribute-container li.highlight * { + background: var(--color-primary); + color: var(--color-primary-contrast); +} + +text-expander .suggestions img, +.tribute-item img { + width: 21px; + height: 21px; + object-fit: contain; + aspect-ratio: 1; +} + +.tribute-container { + display: block; +} + +.tribute-container ul { + margin: 0; + padding: 0; + list-style: none; +} + +.tribute-container li.no-match { + cursor: default; +} diff --git a/web_src/css/features/projects.css b/web_src/css/features/projects.css index 80c9d89638..7fd5150970 100644 --- a/web_src/css/features/projects.css +++ b/web_src/css/features/projects.css @@ -5,12 +5,13 @@ flex-wrap: nowrap; overflow: auto; margin: 0 0.5em; + min-height: max(calc(100vh - 400px), 300px); max-height: calc(100vh - 120px); } .project-header { padding: 0.5em 0; - overflow-x: auto; /* in fullscreen mode, the position is fixed, so we can't use "flex wrap" which would change the height */ + flex-wrap: wrap; } .project-header h2 { @@ -101,17 +102,11 @@ opacity: 0; } -.fullscreen.projects-view .project-header { - position: fixed; - z-index: 1000; - top: 0; - left: 0; - right: 0; - padding: 0.5em; - width: 100%; - max-width: 100%; - background-color: var(--color-body); - border-bottom: 1px solid var(--color-secondary); +.fullscreen.projects-view { + position: absolute; + inset: 0; + display: flex; + flex-direction: column; } /* Hide project-description in full-screen due to its variable height. No need to show it for better space use. */ @@ -120,9 +115,7 @@ } .fullscreen.projects-view #project-board { - position: absolute; - top: 60px; - left: 0; - right: 0; - max-height: calc(100vh - 70px); + flex: 1; + max-height: unset; + padding-bottom: 0.5em; } diff --git a/web_src/css/features/tribute.css b/web_src/css/features/tribute.css deleted file mode 100644 index 99a026b9bc..0000000000 --- a/web_src/css/features/tribute.css +++ /dev/null @@ -1,32 +0,0 @@ -@import "tributejs/dist/tribute.css"; - -.tribute-container { - box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25); - border-radius: var(--border-radius); -} - -.tribute-container ul { - margin-top: 0 !important; - background: var(--color-body) !important; -} - -.tribute-container li { - padding: 3px 0.5rem !important; -} - -.tribute-container li span.fullname { - font-weight: var(--font-weight-normal); - font-size: 0.8rem; -} - -.tribute-container li.highlight, -.tribute-container li:hover { - background: var(--color-primary) !important; - color: var(--color-primary-contrast) !important; -} - -.tribute-item { - display: flex; - align-items: center; - gap: 6px; -} |