Nyxt: Use new status format style.

.config/nyxt/init.lisp

@@ -193,62 +193,82 @@ format."
                                       "~/common-lisp"
                                       "~/.local/share/emacs/site-lisp"))
 
-(defvar my-status-style
-  #.(cl-css:css
-     '((body
-        :background "rgb(200, 0, 0)"
-        :font-size "12px"
-        :color "rgb(32, 32, 32)"
-        :padding 0
-        :line-height "16px"
-        :margin 0)
-       ("#modes"
-        :border-right "2px solid rgb(120, 120, 120)"
-        :display "inline-block"
-        :padding "0 5px 0 5px"
-        :margin "0 5px 0 0")
-       (.status-menu
-        :padding-left "4px")
-       (.button
-        :background-color "rgb(160, 160, 160)"
-        :color "black"
-        :height "100%"
-        :text-decoration "none"
-        :border-radius "2px"
-        :padding-left "2px"
-        :padding-right "2px"
-        :margin-left "2px"
-        :margin-right "2px")
-       (|.button:hover|
-        :color "white"))))
+(defun my-status-style (&key (mode-background-color "rgb(120,120,120)"))
+  (cl-css:css
+   `((body
+      :background "rgb(160, 160, 160)"
+      :font-size "14px"
+      :color "rgb(32, 32, 32)"
+      :padding 0
+      :margin 0
+      :line-height "20px")
+     (".arrow"
+      :width "10px"
+      :height "20px")
+     (".arrow-right"
+      :clip-path "polygon(0 100%, 100% 50%, 0 0)")
+     (".arrow-left"
+      :clip-path "polygon(0 50%, 100% 100%, 100% 0)")
+     ("#container"
+      :display "grid"
+      ;; Columns: controls, arrow, url, arrow, modes
+      :grid-template-columns "115px 10px auto 10px auto"
+      :overflow-y "hidden")
+     ("#controls"
+      :background-color "rgb(80,80,80)"
+      :padding-left "5px"
+      :overflow "hidden"
+      :white-space "nowrap")
+     ("#url"
+      :background-color "rgb(160,160,160)"
+      :min-width "100px"
+      :text-overflow "ellipsis"
+      :overflow-x "hidden"
+      :white-space "nowrap"
+      :padding-left "15px"
+      :padding-right "10px"
+      :margin-left "-10px")
+     ("#modes"
+      :background-color ,mode-background-color
+      :color "rgb(230, 230, 230)"
+      :text-align "right"
+      :padding-right "5px"
+      ;; Uncomment the following to trim the mode list.
+      ;; :text-overflow "ellipsis"
+      ;; :overflow-x "hidden"
+      :white-space "nowrap")
+     (.button
+      :color "rgb(230, 230, 230)"
+      :text-decoration "none"
+      :padding-left "2px"
+      :padding-right "2px"
+      :margin-left "2px"
+      :margin-right "2px")
+     (|.button:hover|
+      :color "black"))))
 
 (defun my-format-status (window)
   (let ((buffer (current-buffer window)))
     (if (or (internal-buffer-p buffer)
             (find-submode buffer 'proxy-mode))
         (setf (style (status-buffer window))
-              (getf (mopu:slot-properties 'status-buffer 'style) :initform))
+              (my-status-style))
         (setf (style (status-buffer window))
-              my-status-style))
+              (my-status-style :mode-background-color "rgb(255,0,0)")))
     (markup:markup
-     (:div :id "modes"
-           (:b
-            (format nil "~{~a~^ ~}"
-                    (mapcar (lambda (m) (str:replace-all "-mode" "" (str:downcase (mode-name m))))
-                            (modes buffer)))))
-     (:a :class "button" :title "Backwards" :href (nyxt::lisp-url '(nyxt/web-mode:history-backwards)) "←")
-     (:a :class "button" :title "Forwards" :href (nyxt::lisp-url '(nyxt/web-mode:history-forwards)) "→")
-     (:a :class "button" :title "Reload" :href (nyxt::lisp-url '(nyxt:reload-current-buffer)) "↺")
-     (:a :class "button" :title "Execute" :href (nyxt::lisp-url '(nyxt:execute-command)) "⚙")
-     (:a :class "button" :title "Buffers" :href (nyxt::lisp-url '(nyxt::list-buffers)) "≡")
-     (:span (if (and (web-buffer-p buffer)
-                     (eq (slot-value buffer 'nyxt::load-status) :loading))
-                "Loading: " ""))
-     (:a :class "button"
-         :href (nyxt::lisp-url '(nyxt:set-url-from-current-url))
-         (format nil " ~a — ~a"
-                 (object-display (url buffer))
-                 (title buffer))))))
+     (:div :id "container"
+           (:div :id "controls"
+                 (markup:raw (format-status-buttons)))
+           (:div :class "arrow arrow-right"
+                 :style "background-color:rgb(80,80,80)" "")
+           (:div :id "url"
+                 (markup:raw
+                  (format-status-load-status buffer)
+                  (format-status-url buffer)))
+           (:div :class "arrow arrow-left"
+                 :style "background-color:rgb(220,120,120);background-color:rgb(120,120,120)" "")
+           (:div :id "modes"
+                 (format-status-modes buffer))))))
 
 (define-configuration window
   ((status-formatter #'my-format-status)))