Add wofi config

1 files changed, 129 insertions, 0 deletions

diff --git a/dot-config/wofi/style.css b/dot-config/wofi/style.css
new file mode 100644
index 0000000..7b35c6e
--- /dev/null
+++ b/dot-config/wofi/style.css
@@ -0,0 +1,129 @@
+/* TODO: hover colors */
+/* Debug GTK elements with: GTK_DEBUD=interactive wofi -n */
+@define-color fg #fff;
+@define-color bg #313244;
+@define-color mg #1e1e2e;
+@define-color hl #b4befe;
+
+* {
+    font-family: "Hack", monospace;
+    font-size: 1.04em;
+    padding: 0;
+    margin: 0;
+    border-radius: 0;
+    border: none;
+    box-shadow: none;
+    outline: unset;
+}
+
+#input {
+    color: @fg;
+    background: #0e0e1e;
+    /* box-shadow: inset 0px 2px 10px @bg; */
+    font-size: 2em;
+    padding: 18px 0;
+    border-radius: 10px 10px 0 0;
+}
+#input:focused {
+    background: black;
+    /* color: black; */
+}
+/* Input icon */
+#input image {
+    padding: 0 22px;
+    -gtk-icon-transform: scale(1);
+}
+
+/* Input delete/clear button */
+#input *:nth-child(4) {
+    /* -gtk-icon-transform: scale(0.8); */
+}
+
+/* scroll background */
+#scroll scrollbar * {
+    background: @mg;
+    padding: 1px;
+}
+/* scroll slider button */
+#scroll scrollbar * * * {
+    background: @hl;
+    padding: 2px;
+}
+
+#text {
+    color: @fg;
+}
+
+#img {
+    /* -gtk-icon-transform: scale(0.5); */
+    padding: 5px
+}
+
+#text:selected {
+    color: @fg;
+}
+
+#entry {
+    opacity: 0.5;
+}
+#entry image { margin-right: 5px; }
+#entry:selected {
+    opacity: 1;
+    background: none;
+    background: @mg;
+    outline: unset;
+    /* border-left: 5px solid @fg; */
+    /* box-shadow: inset 0px -2px 5px @mg, 0px -2px 2px @hl, inset 4px 0px 20px @mg; */
+    /* box-shadow: inset 0px 4px 5px @mg,inset 0px -4px 5px @mg, inset 4px 0px 20px @mg; */
+    /* box-shadow: inset 4px 0px 20px @mg; */
+}
+
+/* row padding */
+#entry box {
+    padding: 2px;
+}
+
+#entry expander #expander-box {
+    background: @bg;
+}
+#entry expander arrow {
+    margin-left: 10px;
+}
+#expander-box #entry image {
+    padding: 0 5px 0 26px;
+    opacity: 0;
+}
+
+expander list {
+    font-size: 80%;
+    background: @bg;
+}
+
+expander list #entry {
+    background: black;
+    /* box-shadow: inset 0px 4px 5px @mg,inset 0px -4px 5px @mg, inset 4px 0px 20px @mg; */
+}
+
+#expander-box #entry:hover,
+#expander-box #entry:hover #text {
+    background: @hl;
+    color: black;
+}
+
+/* Expander title */
+#entry:selected > expander {
+    background:#1e1e2e;
+    /* box-shadow: inset 4px 0px 20px @mg; */
+}
+#entry > expander > list {
+    background:#1e1e1e;
+}
+
+#window, #inner-box, #outer-box {
+    border-radius: 10px 10px 0 0;
+}
+
+#outer-box {
+    background-color: @bg;
+    border: 2px solid @hl;
+}