aboutsummaryrefslogtreecommitdiffstats
path: root/web_src/css/features
diff options
context:
space:
mode:
Diffstat (limited to 'web_src/css/features')
-rw-r--r--web_src/css/features/colorpicker.css32
-rw-r--r--web_src/css/features/expander.css96
-rw-r--r--web_src/css/features/gitgraph.css71
-rw-r--r--web_src/css/features/projects.css30
-rw-r--r--web_src/css/features/tribute.css32
5 files changed, 146 insertions, 115 deletions
diff --git a/web_src/css/features/colorpicker.css b/web_src/css/features/colorpicker.css
index b7436783df..4c517e6348 100644
--- a/web_src/css/features/colorpicker.css
+++ b/web_src/css/features/colorpicker.css
@@ -1,15 +1,13 @@
-.js-color-picker-input {
+.color-picker-combo {
display: flex;
- position: relative;
+ position: relative; /* to position the preview square */
}
-.js-color-picker-input input {
- padding-top: 8px !important;
- padding-bottom: 8px !important;
+.color-picker-combo input {
padding-left: 32px !important;
}
-.js-color-picker-input .preview-square {
+.color-picker-combo .preview-square {
position: absolute;
aspect-ratio: 1;
height: 16px;
@@ -22,7 +20,7 @@
background-size: 8px 8px;
}
-.js-color-picker-input .preview-square::after {
+.color-picker-combo .preview-square::after {
content: "";
position: absolute;
width: 100%;
@@ -31,6 +29,26 @@
background-color: currentcolor;
}
+.color-picker-combo .precolors {
+ display: flex;
+ margin-left: 1em;
+ align-items: center;
+ gap: 0.125em;
+}
+
+.color-picker-combo .precolors .generate-random-color {
+ padding: 0;
+ width: 30px;
+ height: 30px;
+ min-height: 0;
+}
+
+.color-picker-combo .precolors .color {
+ display: inline-block;
+ width: 15px;
+ height: 15px;
+}
+
hex-color-picker {
width: 180px;
height: 120px;
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/gitgraph.css b/web_src/css/features/gitgraph.css
index 865c82e003..8bdafc3c99 100644
--- a/web_src/css/features/gitgraph.css
+++ b/web_src/css/features/gitgraph.css
@@ -10,14 +10,6 @@
align-items: center;
}
-#git-graph-container .color-buttons {
- margin-right: 0;
-}
-
-#git-graph-container .ui.header.dividing {
- padding-bottom: 10px;
-}
-
#git-graph-container #flow-select-refs-dropdown {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
@@ -31,25 +23,6 @@
align-items: center;
}
-#git-graph-container #flow-select-refs-dropdown .ui.label .truncate {
- display: inline-block;
- max-width: 140px;
- overflow: hidden;
- text-overflow: ellipsis;
- vertical-align: top;
- white-space: nowrap;
-}
-
-#git-graph-container #flow-select-refs-dropdown .default.text {
- padding-top: 4px;
- padding-bottom: 4px;
-}
-
-#git-graph-container #flow-select-refs-dropdown input.search {
- position: relative;
- top: 1px;
-}
-
#git-graph-container li {
list-style-type: none;
height: 24px;
@@ -57,16 +30,20 @@
white-space: nowrap;
display: flex;
align-items: center;
- gap: 0.25em;
+ gap: 0.5em;
}
-#git-graph-container li .ui.label.commit-id-short {
- padding-top: 2px;
- padding-bottom: 2px;
+#git-graph-container li > span {
+ flex-shrink: 0;
}
-#git-graph-container li .node-relation {
- font-family: var(--fonts-monospace);
+#git-graph-container li > span.message {
+ flex-shrink: 1;
+}
+
+#git-graph-container li .ui.label.commit-id-short {
+ padding: 2px 4px;
+ height: 20px;
}
#git-graph-container li .author {
@@ -78,17 +55,6 @@
font-size: 80%;
}
-#git-graph-container li a:not(.ui):hover {
- text-decoration: underline;
-}
-
-#git-graph-container li a em {
- color: var(--color-red);
- border-bottom: 1px dotted var(--color-secondary);
- text-decoration: none;
- font-style: normal;
-}
-
#git-graph-container #rel-container {
max-width: 30%;
overflow-x: auto;
@@ -105,34 +71,23 @@
width: 100%;
}
-#git-graph-container #rev-list li.highlight.hover {
- background-color: var(--color-secondary-alpha-30);
-}
-
-#git-graph-container #rev-list .commit-refs .button {
+#git-graph-container li .commit-refs .ui.button,
+#git-graph-container li .commit-refs .ui.label.tag-label {
padding: 2px 4px;
margin-right: 0.25em;
display: inline-block;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
+ line-height: var(--line-height-default);
min-height: 0;
}
-#git-graph-container #graph-raw-list {
- margin: 0;
-}
-
#git-graph-container.monochrome #rel-container .flow-group {
stroke: var(--color-secondary-dark-5);
fill: var(--color-secondary-dark-5);
}
-#git-graph-container.monochrome #rel-container .flow-group.highlight {
- stroke: var(--color-secondary-dark-12);
- fill: var(--color-secondary-dark-12);
-}
-
#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-1 {
stroke: #499a37;
fill: #499a37;
diff --git a/web_src/css/features/projects.css b/web_src/css/features/projects.css
index 80c9d89638..25cb530f85 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 {
@@ -70,7 +71,7 @@
.card-attachment-images {
display: inline-block;
white-space: nowrap;
- overflow: scroll;
+ overflow: auto;
cursor: default;
scroll-snap-type: x mandatory;
text-align: center;
@@ -84,6 +85,7 @@
scroll-snap-align: center;
margin-right: 2px;
aspect-ratio: 1;
+ object-fit: contain;
}
.card-attachment-images img:only-child {
@@ -101,17 +103,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 +116,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;
-}
generated by cgit v1.2.3 (git 2.39.1) at 2025-07-12 12:56:31 +0000