(ns dmr.styles (:require [spade.core :as spade] [garden.selectors :as s]) (:require-macros [garden.def :refer [defcssfn]] [spade.core :refer [defglobal defclass]])) (def gruvbox-colors {:dark0-hard :#1d2021 :dark0 :#282828 :dark0-soft :#32302f :dark1 :#3c3836 :dark2 :#504945 :dark3 :#665c54 :dark4 :#7c6f64 :gray-245 :#928374 :gray-244 :#928374 :light0-hard :#f9f5d7 :light0 :#fbf1c7 :light0-soft :#f2e5bc :light1 :#ebdbb2 :light2 :#d5c4a1 :light3 :#bdae93 :light4 :#a89984 :bright-red :#fb4934 :bright-green :#b8bb26 :bright-yellow :#fabd2f :bright-blue :#83a598 :bright-purple :#d3869b :bright-aqua :#8ec07c :bright-orange :#fe8019 :neutral-red :#cc241d :neutral-green :#98971a :neutral-yellow :#d79921 :neutral-blue :#458588 :neutral-purple :#b16286 :neutral-aqua :#689d6a :neutral-orange :#d65d0e :faded-red :#9d0006 :faded-green :#79740e :faded-yellow :#b57614 :faded-blue :#076678 :faded-purple :#8f3f71 :faded-aqua :#427b58 :faded-orange :#af3a03}) ; TODO: put this in an atom and put it in the appstate (def colorscheme gruvbox-colors) (defcssfn calc) (def mono-font ["Source Code Pro" "monospace"]) (defglobal defaults [:body { :color (colorscheme :dark1) :font-family mono-font :font-size :100% :line-height :1.2rem :background-color (colorscheme :light0-hard)}]) (defclass screen [] {:display :flex :justify-content :center}) (defclass main-panel [] {:width :88ch}) (defclass history-style [] {:list-style-type :none :padding 0} [(s/> :li :.input) {:font-weight :bold :background-color (colorscheme :light0-soft) :padding-bottom :0.4rem :margin-bottom :0.4rem}]) (defn- content-after [x] [(s/& s/after) {:content (str "'" x "'")}]) (defclass spell-panel [] {} [:h1 {:margin-top :0.2rem :margin-bottom :0.2rem :background-color (colorscheme :dark1) :color (colorscheme :light0-soft) :padding :0.2rem}] [:span.level {:font-style :italic :margin-right :0.5rem} (content-after ",")] [:span.school {:font-style :italic}] [:section.description {:font-style :italic}] [:section.higher-level {:margin-top :0.5rem} [s/first-child {:font-weight :bold} (content-after ": ")]]) (defclass property-list [] {:padding-left 0 :margin-top :0.5rem :margin-bottom :0.5rem} [:li {:list-style-type :none}] [(s/> :li :span) {:margin-right :0.5rem}] [(s/> :li s/first-child) {:font-weight :bold :margin-right :0.5rem} (content-after ":")]) (defclass prompt-style [] {:background-color (colorscheme :light0-soft) :font-family mono-font ;:font-weight :bold :margin "1.4rem 0 0.5rem" :padding-left :0.4rem :position :relative :white-space :nowrap} [:&:before {:content "'λ '" :font-weight :bold}] [:input {:background :none :border :none :font-family mono-font :font-weight :bold :font-size :100% :color (colorscheme :dark1) :height :1.2rem :margin-bottom 0 :margin-left 0 :margin-right 0 :margin-top 0 :padding 0 :width (calc "100% - 2ch")} [:&:focus {:outline :none}]])