feat(popup): improve colors, refactor css, support rtl lang

CHANGELOG.md

@@ -28,6 +28,10 @@ All notable changes to this project will be documented in this file.
 
 - Improve codestyle
 
+### ⚙️ Miscellaneous Tasks
+
+- Update @commitlint/{cli,config-conventional}
+
 ## \[[0.9.2](https://gitea.usrspace.at/XimeX/usrspace-browser-addon/releases/tag/v0.9.2)] - 2023-05-24
 
 ### ⛰️ Features

src/popup.css

@@ -4,12 +4,14 @@
 	font-weight: normal;
 	src: url('font/Nunito-Regular.ttf') format('truetype');
 }
+
 @font-face {
 	font-family: 'Nunito Sans';
 	font-style: normal;
 	font-weight: bold;
 	src: url('font/Nunito-Bold.ttf') format('truetype');
 }
+
 @font-face {
 	font-family: 'Nunito Sans';
 	font-style: italic;
@@ -20,45 +22,57 @@
 :root {
 	--light-blue: #2aa1bf;
 	--dark-blue: #095c81;
-	--light-color: #0c0c0c;
-	--dark-color: #ffffff;
-	--light-background: #f9f9f9;
-	--dark-background: #4a4a4a;
-	--light-code-background: #ebebeb;
-	--dark-code-background: #383838;
+
+	--light-color: #15141a;
+	--dark-color: #fbfbfe;
+	--light-background: #ffffff;
+	--dark-background: #42414d;
+	--light-code-background: #f0f0f4;
+	--dark-code-background: #2b2a33;
+
+	--color: var(--light-color);
+	--background: var(--light-background);
+	--code-background: var(--light-code-background);
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--color: var(--dark-color);
+		--background: var(--dark-background);
+		--code-background: var(--dark-code-background);
+	}
 }
 
 body {
-	width: 360px;
+	inline-size: 360px;
 	padding: 6px 12px;
-	color: var(--light-color);
-	background-color: var(--light-background);
+	color: var(--color);
+	background-color: var(--background);
 	font-family: 'Nunito Sans';
 }
-@media (prefers-color-scheme: dark) {
-	body {
-		color: var(--dark-color);
-		background-color: var(--dark-background);
-	}
-}
 
 section.no-padding {
 	margin: 0 -12px -6px;
 }
+
 h2 {
 	margin: 6px 0 4px;
 }
+
 summary {
-	margin: 6px 12px 6px;
+	margin: 6px 12px;
 	cursor: pointer;
 }
+
 summary > h2 {
 	margin: 0;
 	display: inline-block;
 }
+
 time {
 	font-style: italic;
 }
+
 svg {
 	vertical-align: text-bottom;
 }
@@ -66,11 +80,13 @@ svg {
 .panel-section-list {
 	margin: 0 -12px;
 }
+
 .panel-list-item > .icon {
 	text-align: center;
-	width: 23px;
-	margin-right: 4px;
+	inline-size: 23px;
+	margin-inline-end: 4px;
 }
+
 .link {
 	cursor: pointer;
 }
@@ -78,29 +94,28 @@ svg {
 #state > svg,
 #calendar > .calendar-entry > svg,
 #calendar > .calendar-entry strong {
-	margin-right: 8px;
+	margin-inline-end: 8px;
 }
-#calendar > .calendar-entry {
+
+#calendar > .calendar-entry,
+#calendar > .calendar-entry > div > div {
 	display: flex;
 }
+
 #calendar address {
 	display: inline;
 }
 
 #space-api {
 	margin: 0;
-	padding: 0 8px;
-	height: 122px;
-	overflow-x: hidden;
-	overflow-y: scroll;
-	background-color: var(--light-code-background);
-}
-@media (prefers-color-scheme: dark) {
-	#space-api {
-		background-color: var(--dark-code-background);
-	}
+	padding: 4px 8px 8px;
+	block-size: 159px;
+	overflow-block: scroll;
+	background-color: var(--code-background);
 }
+
 #space-api code {
 	font-family: monospace;
 	font-size: 10px;
+	white-space: break-spaces;
 }