List, UI-UX stuff

openprotest · Aug 22, 2024 · 650fd74 · 650fd74
1 parent 1e8b443
commit 650fd74
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 23 deletions.
diff --git a/Protest/Front/issues.css b/Protest/Front/issues.css
@@ -10,7 +10,7 @@
 
 .issues-info > .list-element-icon {
 	mask-image: url(mono/info.svg);
-	background-color: rgb(16,128,224);
+	background-color: rgb(rgb(32,148,240));
 }
 
 .issues-warning > .list-element-icon {

diff --git a/Protest/Front/issues.js b/Protest/Front/issues.js
@@ -131,7 +131,7 @@ class Issues extends List {
 		this.critButton.style.backgroundColor  = this.args.critFilter ? "var(--clr-critical)" : "";
 		this.errorButton.style.backgroundColor = this.args.errorFilter ? "var(--clr-error)" : "";
 		this.warnButton.style.backgroundColor  = this.args.warnFilter ? "var(--clr-warning)" : "";
-		this.infoButton.style.backgroundColor  = this.args.infoFilter ? "rgb(16,128,224)" : "";
+		this.infoButton.style.backgroundColor  = this.args.infoFilter ? "rgb(32,148,240)" : "";
 	}
 
 	UpdateAuthorization() { //overrides

diff --git a/Protest/Front/list.css b/Protest/Front/list.css
@@ -5,7 +5,7 @@
 	position: absolute;
 	left: 0;
 	right: 0;
-	top: 25px;
+	top: 30px;
 	bottom: 28px;
 
 	overflow-x: hidden;
@@ -17,7 +17,7 @@
 	left: 0;
 	right: 0;
 	top: 0px;
-	height: 25px;
+	height: 30px;
 
 	border-radius: 4px 4px 0 0;
 	background: var(--grd-toolbar);
@@ -26,11 +26,12 @@
 .list-title > div:not(:last-child) {
 	position: absolute;
 	top: 1px;
+	height: 28px;
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	text-transform: capitalize;
-	line-height: 23px;
+	line-height: 28px;
 	border-radius: 4px;
 
 	box-sizing: border-box;
@@ -47,36 +48,30 @@
 	background-color: rgb(64,64,64);
 }
 
-.list-title > .list-sort-ascend::before,
-.list-title > .list-sort-descend::before {
+.list-title > .list-sort-ascend::after,
+.list-title > .list-sort-descend::after {
 	position: absolute;
-	left: calc(100% - 16px);
-	transform: translateY(8px);
+	/*left: calc(100% - 16px);*/
+	transform: translate(4px, 10px);
 	content: "";
 	border: solid;
 	border-radius: 2px;
 	border-color: #C0C0C0 transparent;
 	transition: .2s;
 }
-.list-title > .list-sort-ascend::before {
-	border-width: 7px 5px 0 5px;
-}
-.list-title > .list-sort-descend::before {
-	border-width: 0 5px 7px 5px;
+.list-title > .list-sort-ascend::after {
+	border-width: 0 6px 8px 6px;
 }
-
-/*make room for the options button*/
-.list-title:hover > .list-sort-ascend:nth-last-child(2)::before,
-.list-title:hover > .list-sort-descend:nth-last-child(2)::before {
-	left: calc(100% - 40px);
+.list-title > .list-sort-descend::after {
+	border-width: 8px 6px 0 6px;
 }
 
 .list-columns-options {
 	position: absolute;
 	right: 0;
 	top: 0;
-	width: 20px;
-	height: 20px;
+	width: 22px;
+	height: 24px;
 	border-radius: 2px;
 	padding: 2px;
 	opacity: 0;

diff --git a/Protest/Front/root.css b/Protest/Front/root.css
@@ -135,8 +135,8 @@ div, svg {
 
 @media (prefers-color-scheme: dark) {
 	:root {
-		--clr-control: rgb(128,128,128);
-		--clr-highlight: rgb(176,176,176);
+		--clr-control: rgb(144,144,144);
+		--clr-highlight: rgb(188,188,188);
 		--clr-pane: rgb(176,176,176);
 		--clr-contrast: rgb(224,224,224);
 	}