flake: update + walker rework

home/programs/graphical/launchers/walker/style.css

@@ -1,90 +1,135 @@
-* {
-  color: #dcd7ba;
+#window,
+#box,
+#search,
+#password,
+#input,
+#typeahead,
+#spinner,
+#list,
+child,
+scrollbar,
+slider,
+#item,
+#text,
+#label,
+#sub,
+#activationlabel {
+  all: unset;
 }
 
 #window {
-  background: #1c1c23;
-  opacity: 0.9;
-  border: 4px solid #26262d;
+  background: none;
 }
 
 #box {
-  background: #16161d;
-  padding: 10px;
-  border-radius: 2px;
+  background: #303446;
+  padding: 16px;
+  border-radius: 8px;
+  box-shadow:
+    0 19px 38px rgba(0, 0, 0, 0.3),
+    0 15px 12px rgba(0, 0, 0, 0.22);
 }
 
-#searchwrapper {}
-
-#search,
-#typeahead {
-  border-radius: 0;
-  outline: none;
-  outline-width: 0px;
-  box-shadow: none;
-  border-bottom: none;
-  border: none;
-  background: #1f1f28;
-  padding-left: 10px;
-  padding-right: 10px;
-  padding-top: 0px;
-  padding-bottom: 0px;
-  border-radius: 2px;
-}
-
-#spinner {
-  opacity: 0;
-}
-
-#spinner.visible {
-  opacity: 1;
-}
-
-#typeahead {
+scrollbar {
   background: none;
+  padding-left: 8px;
+}
+
+slider {
+  min-width: 2px;
+  background: #7f849c;
   opacity: 0.5;
 }
 
-#search placeholder {
+#search {
+}
+
+#password,
+#input,
+#typeahead {
+  background: #363a4f;
+  background: none;
+  box-shadow: none;
+  border-radius: 0px;
+  border-radius: 32px;
+  color: #c6d0f5;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+#input {
+  background: none;
+}
+
+#input > *:first-child,
+#typeahead > *:first-child {
+  color: #7f849c;
+  margin-right: 7px;
+}
+
+#input > *:last-child,
+#typeahead > *:last-child {
+  color: #7f849c;
+}
+
+#spinner {
+}
+
+#typeahead {
+  color: #89b4fa;
+}
+
+#input placeholder {
   opacity: 0.5;
 }
 
 #list {
-  background: #1c1c23;
 }
 
-row:selected {
-  background: rgba(100, 100, 100, 0.3);
+child {
+  border-radius: 8px;
+  color: #cad3f5;
+  padding: 4px;
 }
 
-.item {
-  padding: 5px;
-  border-radius: 2px;
+child:selected,
+child:hover {
+  background: #414559;
+  box-shadow: none;
+  color: #cad3f5;
 }
 
-.icon {
-  padding-right: 5px;
+#item {
 }
 
-.textwrapper {}
+#icon {
+}
 
-.label {}
+#text {
+}
 
-.sub {
+#label {
+  font-weight: bold;
+  color: #cad3f5;
+}
+
+#sub {
   opacity: 0.5;
+  color: #cad3f5;
 }
 
-.activationlabel {
-  opacity: 0.25;
+#activationlabel {
+  opacity: 0.5;
+  padding-right: 4px;
 }
 
-.activation .activationlabel {
+.activation #activationlabel {
+  font-weight: bold;
+  color: #89b4fa;
   opacity: 1;
-  color: #76946a;
 }
 
-.activation .textwrapper,
-.activation .icon,
-.activation .search {
-  opacity: 0.5;
+.activation #text,
+.activation #icon,
+.activation #search {
 }