Thinner collapsibles to save some more space

Tomorrow will see about making the actual history

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>

css/index.css

@@ -33,10 +33,37 @@ body {
 	border: none;
 	text-align: center;
 	outline: none;
-	font-size: 15px;
-	padding: 5px;
+	padding: 0px;
+}
+
+.collapsible {
+	background-color: var(--c-primary);
+
+	margin-bottom: 2px;
 	margin-top: 5px;
-	margin-bottom: 5px;
+
+	transition-duration: 50ms;
+}
+
+.collapsible::before {
+	content: "";
+	display: block;
+
+	position: absolute;
+
+	width: 21px;
+	height: 21px;
+
+	background-color: var(--c-text);
+	mask-image: url("/res/icons/chevron-up.svg");
+	-webkit-mask-image: url("/res/icons/chevron-up.svg");
+	mask-size: contain;
+	-webkit-mask-size: contain;
+	rotate: 90deg;
+}
+
+.collapsible.active::before {
+	rotate: 180deg;
 }
 
 .display-none {
@@ -44,7 +71,11 @@ body {
 }
 
 .collapsible:hover {
-	background-color: #777;
+	background-color: var(--c-hover);
+}
+
+.collapsible:active {
+	filter: brightness(110%);
 }
 
 .content {