From f50fe7196e4a973955abd832526aea8267e53e01 Mon Sep 17 00:00:00 2001
From: Bill Thiede <git@xinu.tv>
Date: Tue, 20 Feb 2024 19:24:56 -0800
Subject: [PATCH] web: add bulk read/unerad functionality

---
 web/index.html          |  37 +++---
 web/src/state.rs        |  57 +++++++++
 web/src/view/desktop.rs |   3 +-
 web/src/view/mobile.rs  |  54 ++++++--
 web/src/view/mod.rs     | 133 +++++++++++++-------
 web/src/view/tablet.rs  |   3 +-
 web/static/main.css     | 268 ++++++++++++++++++++++++++++++++++++++++
 web/static/main.min.css |   1 +
 8 files changed, 484 insertions(+), 72 deletions(-)
 create mode 100644 web/static/main.css
 create mode 100644 web/static/main.min.css

diff --git a/web/index.html b/web/index.html
index 7466ac2..d406829 100644
--- a/web/index.html
+++ b/web/index.html
@@ -9,6 +9,8 @@
     integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
     crossorigin="anonymous" referrerpolicy="no-referrer" />
   <link rel="icon" href="https://static.xinu.tv/favicon/letterbox.svg" />
+  <!-- Pretty checkboxes -->
+  <link data-trunk rel="css" href="static/main.css" />
   <style>
     .message {
       display: inline-block;
@@ -63,6 +65,10 @@
       width: 100%;
     }
 
+    .index .edit {
+      width: 1.5em;
+    }
+
     .index .unread {
       font-weight: bold;
     }
@@ -80,16 +86,6 @@
       white-space: nowrap;
     }
 
-    .index .subject:hover .mark-read-button {
-      display: inline-flex;
-    }
-
-    .index .subject .mark-read-button {
-      display: none;
-      font-size: .6rem;
-      float: right;
-    }
-
     .index .date {
       width: 10em;
       white-space: nowrap;
@@ -156,9 +152,20 @@
     }
 
     .search-results .row {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+
       border-bottom: 1px #444 solid;
       padding-bottom: .5em;
       padding-top: .5em;
+      width: 100%;
+    }
+
+    .search-results .row .checkbox {}
+
+    .search-results .row .summary {
+      min-width: 0;
     }
 
     .search-results .row .subject {
@@ -185,13 +192,13 @@
 
     /* Hide quoted emails */
     /*
-div[name="quote"],
-blockquote[type="cite"],
-.gmail_quote {
+  div[name="quote"],
+  blockquote[type="cite"],
+  .gmail_quote {
   background-color: red;
   display: none;
-}
-*/
+  }
+  */
 
     .desktop .main-content {
       display: grid;
diff --git a/web/src/state.rs b/web/src/state.rs
index ee72256..30769e7 100644
--- a/web/src/state.rs
+++ b/web/src/state.rs
@@ -1,3 +1,5 @@
+use std::collections::HashSet;
+
 use graphql_client::GraphQLQuery;
 use log::{error, info};
 use seed::{app::subs, prelude::*, *};
@@ -224,6 +226,7 @@ pub fn update(msg: Msg, model: &mut Model, orders: &mut impl Orders<Msg>) {
                 results: data.search.nodes,
                 count: data.count as usize,
                 pager: data.search.page_info,
+                selected_threads: HashSet::new(),
             };
         }
 
@@ -256,6 +259,54 @@ pub fn update(msg: Msg, model: &mut Model, orders: &mut impl Orders<Msg>) {
         Msg::ShowThreadResult(bad) => {
             error!("show_thread_query error: {bad:#?}");
         }
+        Msg::SelectionMarkAsRead => {
+            if let Context::SearchResult {
+                selected_threads, ..
+            } = &mut model.context
+            {
+                let threads = selected_threads
+                    .iter()
+                    .map(|tid| format!("thread:{tid}"))
+                    .collect::<Vec<_>>()
+                    .join(" ");
+                orders
+                    .skip()
+                    .perform_cmd(async move { Msg::SetUnread(threads, false) });
+            }
+        }
+        Msg::SelectionMarkAsUnread => {
+            if let Context::SearchResult {
+                selected_threads, ..
+            } = &mut model.context
+            {
+                let threads = selected_threads
+                    .iter()
+                    .map(|tid| format!("thread:{tid}"))
+                    .collect::<Vec<_>>()
+                    .join(" ");
+                orders
+                    .skip()
+                    .perform_cmd(async move { Msg::SetUnread(threads, true) });
+            }
+        }
+        Msg::SelectionAddThread(tid) => {
+            if let Context::SearchResult {
+                selected_threads, ..
+            } = &mut model.context
+            {
+                selected_threads.insert(tid);
+                info!("selected threads {selected_threads:?}");
+            }
+        }
+        Msg::SelectionRemoveThread(tid) => {
+            if let Context::SearchResult {
+                selected_threads, ..
+            } = &mut model.context
+            {
+                selected_threads.remove(&tid);
+                info!("selected threads {selected_threads:?}");
+            }
+        }
     }
 }
 // `Model` describes our app state.
@@ -287,6 +338,7 @@ pub enum Context {
         results: Vec<FrontPageQuerySearchNodes>,
         count: usize,
         pager: FrontPageQuerySearchPageInfo,
+        selected_threads: HashSet<String>,
     },
     ThreadResult(ShowThreadQueryThread),
 }
@@ -337,4 +389,9 @@ pub enum Msg {
     ShowThreadResult(
         Result<graphql_client::Response<graphql::show_thread_query::ResponseData>, gloo_net::Error>,
     ),
+
+    SelectionMarkAsRead,
+    SelectionMarkAsUnread,
+    SelectionAddThread(String),
+    SelectionRemoveThread(String),
 }
diff --git a/web/src/view/desktop.rs b/web/src/view/desktop.rs
index b6965d7..2a1741a 100644
--- a/web/src/view/desktop.rs
+++ b/web/src/view/desktop.rs
@@ -18,7 +18,8 @@ pub(super) fn view(model: &Model) -> Node<Msg> {
             results,
             count,
             pager,
-        } => view_search_results(&query, results.as_slice(), *count, pager),
+            selected_threads,
+        } => view_search_results(&query, results.as_slice(), *count, pager, selected_threads),
     };
     fn view_tag_li(display_name: &str, indent: usize, t: &Tag, search_unread: bool) -> Node<Msg> {
         let href = if search_unread {
diff --git a/web/src/view/mobile.rs b/web/src/view/mobile.rs
index 9c29778..cd3065c 100644
--- a/web/src/view/mobile.rs
+++ b/web/src/view/mobile.rs
@@ -1,3 +1,5 @@
+use std::collections::HashSet;
+
 use seed::{prelude::*, *};
 
 use crate::{
@@ -16,7 +18,8 @@ pub(super) fn view(model: &Model) -> Node<Msg> {
             results,
             count,
             pager,
-        } => search_results(&query, results.as_slice(), *count, pager),
+            selected_threads,
+        } => search_results(&query, results.as_slice(), *count, pager, selected_threads),
     };
     div![
         view_header(&model.query, &model.refreshing_state),
@@ -30,6 +33,7 @@ fn search_results(
     results: &[FrontPageQuerySearchNodes],
     count: usize,
     pager: &FrontPageQuerySearchPageInfo,
+    selected_threads: &HashSet<String>,
 ) -> Node<Msg> {
     if query.is_empty() {
         set_title("all mail");
@@ -38,20 +42,45 @@ fn search_results(
     }
     let rows = results.iter().map(|r| {
         let tid = r.thread.clone();
+        let check_tid = r.thread.clone();
         let datetime = human_age(r.timestamp as i64);
         let unread_idx = r.tags.iter().position(|e| e == &"unread");
         let mut tags = r.tags.clone();
         if let Some(idx) = unread_idx {
             tags.remove(idx);
         };
-        a![
-            C!["has-text-light"],
-            IF!(unread_idx.is_some() => C!["unread"]),
-            attrs! {
-                At::Href => urls::thread(&tid)
-            },
-            div![
-                C!["row"],
+        div![
+            C!["row"],
+            label![
+                C!["b-checkbox", "checkbox", "is-large"],
+                input![attrs! {
+                    At::Type=>"checkbox",
+                    At::Checked=>selected_threads.contains(&tid).as_at_value(),
+                }],
+                span![C!["check"]],
+                ev(Ev::Input, move |e| {
+                    if let Some(input) = e
+                        .target()
+                        .as_ref()
+                        .expect("failed to get reference to target")
+                        .dyn_ref::<web_sys::HtmlInputElement>()
+                    {
+                        if input.checked() {
+                            Msg::SelectionAddThread(check_tid)
+                        } else {
+                            Msg::SelectionRemoveThread(check_tid)
+                        }
+                    } else {
+                        Msg::Noop
+                    }
+                }),
+            ],
+            a![
+                C!["has-text-light", "summary"],
+                IF!(unread_idx.is_some() => C!["unread"]),
+                attrs! {
+                    At::Href => urls::thread(&tid)
+                },
                 div![C!["subject"], &r.subject],
                 span![C!["from", "is-size-7"], pretty_authors(&r.authors)],
                 div![
@@ -61,10 +90,11 @@ fn search_results(
             ]
         ]
     });
+    let show_bulk_edit = !selected_threads.is_empty();
     div![
         C!["search-results"],
-        search_toolbar(count, pager),
-        div![C!["index"], rows,],
-        search_toolbar(count, pager),
+        search_toolbar(count, pager, show_bulk_edit),
+        div![C!["index"], rows],
+        search_toolbar(count, pager, show_bulk_edit),
     ]
 }
diff --git a/web/src/view/mod.rs b/web/src/view/mod.rs
index 53c88ba..0165382 100644
--- a/web/src/view/mod.rs
+++ b/web/src/view/mod.rs
@@ -112,15 +112,17 @@ fn view_search_results(
     results: &[FrontPageQuerySearchNodes],
     count: usize,
     pager: &FrontPageQuerySearchPageInfo,
+    selected_threads: &HashSet<String>,
 ) -> Node<Msg> {
-    info!("pager {pager:?}");
     if query.is_empty() {
         set_title("all mail");
     } else {
         set_title(query);
     }
+    let show_bulk_edit = !selected_threads.is_empty();
     let rows = results.iter().map(|r| {
         let tid = r.thread.clone();
+        let check_tid = r.thread.clone();
         let datetime = human_age(r.timestamp as i64);
         let unread_idx = r.tags.iter().position(|e| e == &"unread");
         let mut tags = r.tags.clone();
@@ -129,6 +131,31 @@ fn view_search_results(
         };
         tr![
             IF!(unread_idx.is_some() => C!["unread"]),
+            td![label![
+                C!["checkbox"],
+                input![
+                    attrs! {
+                        At::Type=>"checkbox",
+                        At::Checked=>selected_threads.contains(&tid).as_at_value(),
+                    },
+                    ev(Ev::Input, move |e| {
+                        if let Some(input) = e
+                            .target()
+                            .as_ref()
+                            .expect("failed to get reference to target")
+                            .dyn_ref::<web_sys::HtmlInputElement>()
+                        {
+                            if input.checked() {
+                                Msg::SelectionAddThread(check_tid)
+                            } else {
+                                Msg::SelectionRemoveThread(check_tid)
+                            }
+                        } else {
+                            Msg::Noop
+                        }
+                    }),
+                ]
+            ]],
             td![
                 C!["from"],
                 pretty_authors(&r.authors),
@@ -144,15 +171,6 @@ fn view_search_results(
                         At::Href => urls::thread(&tid)
                     },
                     &r.subject,
-                    button![
-                        C!["mark-read-button", "button", "is-dark", "is-small"],
-                        "Read",
-                        ev(Ev::Click, move |e| {
-                            e.stop_propagation();
-                            e.prevent_default();
-                            Msg::SetUnread(format!("thread:{tid}"), false)
-                        }),
-                    ]
                 ]
             ],
             td![C!["date"], datetime]
@@ -160,7 +178,7 @@ fn view_search_results(
     });
 
     div![
-        search_toolbar(count, pager),
+        search_toolbar(count, pager, show_bulk_edit),
         table![
             C![
                 "table",
@@ -171,53 +189,83 @@ fn view_search_results(
                 "is-striped",
             ],
             thead![tr![
+                th![C!["edit"], ""],
                 th![C!["from"], "From"],
                 th![C!["subject"], "Subject"],
                 th![C!["date"], "Date"]
             ]],
             tbody![rows]
         ],
-        search_toolbar(count, pager)
+        search_toolbar(count, pager, show_bulk_edit)
     ]
 }
 
-fn search_toolbar(count: usize, pager: &FrontPageQuerySearchPageInfo) -> Node<Msg> {
+fn search_toolbar(
+    count: usize,
+    pager: &FrontPageQuerySearchPageInfo,
+    show_bulk_edit: bool,
+) -> Node<Msg> {
     let start = pager
         .start_cursor
         .as_ref()
         .map(|i| i.parse().unwrap_or(0))
         .unwrap_or(0);
     nav![
-        C!["pagination"],
-        a![
-            C![
-                "pagination-previous",
-                "button",
-                //IF!(!pager.has_previous_page => "is-static"),
-            ],
-            IF!(!pager.has_previous_page => attrs!{ At::Disabled=>true }),
-            "<",
-            IF!(pager.has_previous_page => ev(Ev::Click, |_| Msg::PreviousPage)),
-        ],
-        a![
-            C![
-                "pagination-next",
-                "button",
-                //IF!(!pager.has_next_page => "is-static")
-            ],
-            IF!(!pager.has_next_page => attrs!{ At::Disabled=>true }),
-            ">",
-            IF!(pager.has_next_page => ev(Ev::Click, |_| Msg::NextPage))
-        ],
-        ul![
-            C!["pagination-list"],
-            li![format!(
-                "{} - {} of {}",
-                start,
-                count.min(start + SEARCH_RESULTS_PER_PAGE),
-                count
-            )],
+        C!["level"],
+        div![
+            C!["level-left"],
+            IF!(show_bulk_edit =>
+            span![
+                C!["level-item", "buttons"],
+                button![
+                    C!["button"],
+                    attrs!{At::Title => "Mark as read"},
+                    span![C!["icon", "is-small"], i![C!["far", "fa-envelope-open"]]],
+                    ev(Ev::Click, |_| Msg::SelectionMarkAsRead),
+                ],
+                button![
+                    C!["button"],
+                    attrs!{At::Title => "Mark as unread"},
+                    span![C!["icon", "is-small"], i![C!["far", "fa-envelope"]]],
+                    ev(Ev::Click, |_| Msg::SelectionMarkAsUnread),
+                ],
+            ]),
         ],
+        div![
+            C!["level-right"],
+            nav![
+                C!["level-item", "pagination"],
+                a![
+                    C![
+                        "pagination-previous",
+                        "button",
+                        //IF!(!pager.has_previous_page => "is-static"),
+                    ],
+                    IF!(!pager.has_previous_page => attrs!{ At::Disabled=>true }),
+                    "<",
+                    IF!(pager.has_previous_page => ev(Ev::Click, |_| Msg::PreviousPage)),
+                ],
+                a![
+                    C![
+                        "pagination-next",
+                        "button",
+                        //IF!(!pager.has_next_page => "is-static")
+                    ],
+                    IF!(!pager.has_next_page => attrs!{ At::Disabled=>true }),
+                    ">",
+                    IF!(pager.has_next_page => ev(Ev::Click, |_| Msg::NextPage))
+                ],
+                ul![
+                    C!["pagination-list"],
+                    li![format!(
+                        "{} - {} of {}",
+                        start,
+                        count.min(start + SEARCH_RESULTS_PER_PAGE),
+                        count
+                    )],
+                ],
+            ]
+        ]
     ]
 }
 
@@ -558,7 +606,6 @@ fn view_footer(render_time_ms: u128) -> Node<Msg> {
 // `view` describes what to display.
 pub fn view(model: &Model) -> Node<Msg> {
     let start = Instant::now();
-    info!("refreshing {:?}", model.refreshing_state);
     let win = seed::window();
     let w = win
         .inner_width()
diff --git a/web/src/view/tablet.rs b/web/src/view/tablet.rs
index 2e270cd..39ce606 100644
--- a/web/src/view/tablet.rs
+++ b/web/src/view/tablet.rs
@@ -15,7 +15,8 @@ pub(super) fn view(model: &Model) -> Node<Msg> {
             results,
             count,
             pager,
-        } => view_search_results(&query, results.as_slice(), *count, pager),
+            selected_threads,
+        } => view_search_results(&query, results.as_slice(), *count, pager, selected_threads),
     };
     div![
         C!["main-content"],
diff --git a/web/static/main.css b/web/static/main.css
new file mode 100644
index 0000000..f503017
--- /dev/null
+++ b/web/static/main.css
@@ -0,0 +1,268 @@
+/* Bulma Utilities */
+.b-checkbox.checkbox {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+/* Box-shadow on hover */
+.b-checkbox.checkbox {
+  outline: none;
+  display: inline-flex;
+  align-items: center;
+}
+
+.b-checkbox.checkbox:not(.button) {
+  margin-right: 0.5em;
+}
+
+.b-checkbox.checkbox:not(.button) + .checkbox:last-child {
+  margin-right: 0;
+}
+
+.b-checkbox.checkbox input[type=checkbox] {
+  position: absolute;
+  left: 0;
+  opacity: 0;
+  outline: none;
+  z-index: -1;
+}
+
+.b-checkbox.checkbox input[type=checkbox] + .check {
+  width: 1.25em;
+  height: 1.25em;
+  flex-shrink: 0;
+  border-radius: 4px;
+  border: 2px solid #7a7a7a;
+  transition: background 150ms ease-out;
+  background: transparent;
+}
+
+.b-checkbox.checkbox input[type=checkbox]:checked + .check {
+  background: #00d1b2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;
+  border-color: #00d1b2;
+}
+
+.b-checkbox.checkbox input[type=checkbox]:checked + .check.is-white {
+  background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%230a0a0a' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;
+  border-color: white;
+}
+
+.b-checkbox.checkbox input[type=checkbox]:checked + .check.is-black {
+  background: #0a0a0a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:white' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;
+  border-color: #0a0a0a;
+}
+
+.b-checkbox.checkbox input[type=checkbox]:checked + .check.is-light {
+  background: whitesmoke url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:rgba(0, 0, 0, 0.7)' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;
+  border-color: whitesmoke;
+}
+
+.b-checkbox.checkbox input[type=checkbox]:checked + .check.is-dark {
+  background: #363636 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;
+  border-color: #363636;
+}
+
+.b-checkbox.checkbox input[type=checkbox]:checked + .check.is-primary {
+  background: #00d1b2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;
+  border-color: #00d1b2;
+}
+
+.b-checkbox.checkbox input[type=checkbox]:checked + .check.is-link {
+  background: #485fc7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;
+  border-color: #485fc7;
+}
+
+.b-checkbox.checkbox input[type=checkbox]:checked + .check.is-info {
+  background: #3e8ed0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;
+  border-color: #3e8ed0;
+}
+
+.b-checkbox.checkbox input[type=checkbox]:checked + .check.is-success {
+  background: #48c78e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;
+  border-color: #48c78e;
+}
+
+.b-checkbox.checkbox input[type=checkbox]:checked + .check.is-warning {
+  background: #ffe08a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:rgba(0, 0, 0, 0.7)' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;
+  border-color: #ffe08a;
+}
+
+.b-checkbox.checkbox input[type=checkbox]:checked + .check.is-danger {
+  background: #f14668 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;
+  border-color: #f14668;
+}
+
+.b-checkbox.checkbox input[type=checkbox]:indeterminate + .check, .b-checkbox.checkbox input[type=checkbox].is-indeterminate + .check {
+  background: #00d1b2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:%23fff' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center;
+  border-color: #00d1b2;
+}
+
+.b-checkbox.checkbox input[type=checkbox]:indeterminate + .check.is-white, .b-checkbox.checkbox input[type=checkbox].is-indeterminate + .check.is-white {
+  background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:%230a0a0a' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center;
+  border-color: white;
+}
+
+.b-checkbox.checkbox input[type=checkbox]:indeterminate + .check.is-black, .b-checkbox.checkbox input[type=checkbox].is-indeterminate + .check.is-black {
+  background: #0a0a0a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:white' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center;
+  border-color: #0a0a0a;
+}
+
+.b-checkbox.checkbox input[type=checkbox]:indeterminate + .check.is-light, .b-checkbox.checkbox input[type=checkbox].is-indeterminate + .check.is-light {
+  background: whitesmoke url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:rgba(0, 0, 0, 0.7)' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center;
+  border-color: whitesmoke;
+}
+
+.b-checkbox.checkbox input[type=checkbox]:indeterminate + .check.is-dark, .b-checkbox.checkbox input[type=checkbox].is-indeterminate + .check.is-dark {
+  background: #363636 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:%23fff' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center;
+  border-color: #363636;
+}
+
+.b-checkbox.checkbox input[type=checkbox]:indeterminate + .check.is-primary, .b-checkbox.checkbox input[type=checkbox].is-indeterminate + .check.is-primary {
+  background: #00d1b2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:%23fff' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center;
+  border-color: #00d1b2;
+}
+
+.b-checkbox.checkbox input[type=checkbox]:indeterminate + .check.is-link, .b-checkbox.checkbox input[type=checkbox].is-indeterminate + .check.is-link {
+  background: #485fc7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:%23fff' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center;
+  border-color: #485fc7;
+}
+
+.b-checkbox.checkbox input[type=checkbox]:indeterminate + .check.is-info, .b-checkbox.checkbox input[type=checkbox].is-indeterminate + .check.is-info {
+  background: #3e8ed0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:%23fff' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center;
+  border-color: #3e8ed0;
+}
+
+.b-checkbox.checkbox input[type=checkbox]:indeterminate + .check.is-success, .b-checkbox.checkbox input[type=checkbox].is-indeterminate + .check.is-success {
+  background: #48c78e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:%23fff' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center;
+  border-color: #48c78e;
+}
+
+.b-checkbox.checkbox input[type=checkbox]:indeterminate + .check.is-warning, .b-checkbox.checkbox input[type=checkbox].is-indeterminate + .check.is-warning {
+  background: #ffe08a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:rgba(0, 0, 0, 0.7)' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center;
+  border-color: #ffe08a;
+}
+
+.b-checkbox.checkbox input[type=checkbox]:indeterminate + .check.is-danger, .b-checkbox.checkbox input[type=checkbox].is-indeterminate + .check.is-danger {
+  background: #f14668 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:%23fff' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center;
+  border-color: #f14668;
+}
+
+.b-checkbox.checkbox input[type=checkbox]:focus + .check {
+  box-shadow: 0 0 0.5em rgba(122, 122, 122, 0.8);
+}
+
+.b-checkbox.checkbox input[type=checkbox]:focus:checked + .check {
+  box-shadow: 0 0 0.5em rgba(0, 209, 178, 0.8);
+}
+
+.b-checkbox.checkbox input[type=checkbox]:focus:checked + .check.is-white {
+  box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.8);
+}
+
+.b-checkbox.checkbox input[type=checkbox]:focus:checked + .check.is-black {
+  box-shadow: 0 0 0.5em rgba(10, 10, 10, 0.8);
+}
+
+.b-checkbox.checkbox input[type=checkbox]:focus:checked + .check.is-light {
+  box-shadow: 0 0 0.5em rgba(245, 245, 245, 0.8);
+}
+
+.b-checkbox.checkbox input[type=checkbox]:focus:checked + .check.is-dark {
+  box-shadow: 0 0 0.5em rgba(54, 54, 54, 0.8);
+}
+
+.b-checkbox.checkbox input[type=checkbox]:focus:checked + .check.is-primary {
+  box-shadow: 0 0 0.5em rgba(0, 209, 178, 0.8);
+}
+
+.b-checkbox.checkbox input[type=checkbox]:focus:checked + .check.is-link {
+  box-shadow: 0 0 0.5em rgba(72, 95, 199, 0.8);
+}
+
+.b-checkbox.checkbox input[type=checkbox]:focus:checked + .check.is-info {
+  box-shadow: 0 0 0.5em rgba(62, 142, 208, 0.8);
+}
+
+.b-checkbox.checkbox input[type=checkbox]:focus:checked + .check.is-success {
+  box-shadow: 0 0 0.5em rgba(72, 199, 142, 0.8);
+}
+
+.b-checkbox.checkbox input[type=checkbox]:focus:checked + .check.is-warning {
+  box-shadow: 0 0 0.5em rgba(255, 224, 138, 0.8);
+}
+
+.b-checkbox.checkbox input[type=checkbox]:focus:checked + .check.is-danger {
+  box-shadow: 0 0 0.5em rgba(241, 70, 104, 0.8);
+}
+
+.b-checkbox.checkbox .control-label {
+  padding-left: calc(0.75em - 1px);
+}
+
+.b-checkbox.checkbox.button {
+  display: flex;
+}
+
+.b-checkbox.checkbox[disabled] {
+  opacity: 0.5;
+}
+
+.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled) + .check {
+  border-color: #00d1b2;
+}
+
+.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled) + .check.is-white {
+  border-color: white;
+}
+
+.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled) + .check.is-black {
+  border-color: #0a0a0a;
+}
+
+.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled) + .check.is-light {
+  border-color: whitesmoke;
+}
+
+.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled) + .check.is-dark {
+  border-color: #363636;
+}
+
+.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled) + .check.is-primary {
+  border-color: #00d1b2;
+}
+
+.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled) + .check.is-link {
+  border-color: #485fc7;
+}
+
+.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled) + .check.is-info {
+  border-color: #3e8ed0;
+}
+
+.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled) + .check.is-success {
+  border-color: #48c78e;
+}
+
+.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled) + .check.is-warning {
+  border-color: #ffe08a;
+}
+
+.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled) + .check.is-danger {
+  border-color: #f14668;
+}
+
+.b-checkbox.checkbox.is-small {
+  border-radius: 2px;
+  font-size: 0.75rem;
+}
+
+.b-checkbox.checkbox.is-medium {
+  font-size: 1.25rem;
+}
+
+.b-checkbox.checkbox.is-large {
+  font-size: 1.5rem;
+}
diff --git a/web/static/main.min.css b/web/static/main.min.css
new file mode 100644
index 0000000..6511ede
--- /dev/null
+++ b/web/static/main.min.css
@@ -0,0 +1 @@
+.b-checkbox.checkbox{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.b-checkbox.checkbox{outline:none;display:inline-flex;align-items:center}.b-checkbox.checkbox:not(.button){margin-right:0.5em}.b-checkbox.checkbox:not(.button)+.checkbox:last-child{margin-right:0}.b-checkbox.checkbox input[type=checkbox]{position:absolute;left:0;opacity:0;outline:none;z-index:-1}.b-checkbox.checkbox input[type=checkbox]+.check{width:1.25em;height:1.25em;flex-shrink:0;border-radius:4px;border:2px solid #7a7a7a;transition:background 150ms ease-out;background:rgba(0,0,0,0)}.b-checkbox.checkbox input[type=checkbox]:checked+.check{background:#00d1b2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;border-color:#00d1b2}.b-checkbox.checkbox input[type=checkbox]:checked+.check.is-white{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%230a0a0a' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;border-color:#fff}.b-checkbox.checkbox input[type=checkbox]:checked+.check.is-black{background:#0a0a0a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;border-color:#0a0a0a}.b-checkbox.checkbox input[type=checkbox]:checked+.check.is-light{background:#f5f5f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:rgba(0,0,0,0.7)' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;border-color:#f5f5f5}.b-checkbox.checkbox input[type=checkbox]:checked+.check.is-dark{background:#363636 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;border-color:#363636}.b-checkbox.checkbox input[type=checkbox]:checked+.check.is-primary{background:#00d1b2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;border-color:#00d1b2}.b-checkbox.checkbox input[type=checkbox]:checked+.check.is-link{background:#485fc7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;border-color:#485fc7}.b-checkbox.checkbox input[type=checkbox]:checked+.check.is-info{background:#3e8ed0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;border-color:#3e8ed0}.b-checkbox.checkbox input[type=checkbox]:checked+.check.is-success{background:#48c78e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;border-color:#48c78e}.b-checkbox.checkbox input[type=checkbox]:checked+.check.is-warning{background:#ffe08a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:rgba(0,0,0,0.7)' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;border-color:#ffe08a}.b-checkbox.checkbox input[type=checkbox]:checked+.check.is-danger{background:#f14668 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;border-color:#f14668}.b-checkbox.checkbox input[type=checkbox]:indeterminate+.check,.b-checkbox.checkbox input[type=checkbox].is-indeterminate+.check{background:#00d1b2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:%23fff' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center;border-color:#00d1b2}.b-checkbox.checkbox input[type=checkbox]:indeterminate+.check.is-white,.b-checkbox.checkbox input[type=checkbox].is-indeterminate+.check.is-white{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:%230a0a0a' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center;border-color:#fff}.b-checkbox.checkbox input[type=checkbox]:indeterminate+.check.is-black,.b-checkbox.checkbox input[type=checkbox].is-indeterminate+.check.is-black{background:#0a0a0a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:%23fff' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center;border-color:#0a0a0a}.b-checkbox.checkbox input[type=checkbox]:indeterminate+.check.is-light,.b-checkbox.checkbox input[type=checkbox].is-indeterminate+.check.is-light{background:#f5f5f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:rgba(0,0,0,0.7)' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center;border-color:#f5f5f5}.b-checkbox.checkbox input[type=checkbox]:indeterminate+.check.is-dark,.b-checkbox.checkbox input[type=checkbox].is-indeterminate+.check.is-dark{background:#363636 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:%23fff' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center;border-color:#363636}.b-checkbox.checkbox input[type=checkbox]:indeterminate+.check.is-primary,.b-checkbox.checkbox input[type=checkbox].is-indeterminate+.check.is-primary{background:#00d1b2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:%23fff' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center;border-color:#00d1b2}.b-checkbox.checkbox input[type=checkbox]:indeterminate+.check.is-link,.b-checkbox.checkbox input[type=checkbox].is-indeterminate+.check.is-link{background:#485fc7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:%23fff' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center;border-color:#485fc7}.b-checkbox.checkbox input[type=checkbox]:indeterminate+.check.is-info,.b-checkbox.checkbox input[type=checkbox].is-indeterminate+.check.is-info{background:#3e8ed0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:%23fff' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center;border-color:#3e8ed0}.b-checkbox.checkbox input[type=checkbox]:indeterminate+.check.is-success,.b-checkbox.checkbox input[type=checkbox].is-indeterminate+.check.is-success{background:#48c78e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:%23fff' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center;border-color:#48c78e}.b-checkbox.checkbox input[type=checkbox]:indeterminate+.check.is-warning,.b-checkbox.checkbox input[type=checkbox].is-indeterminate+.check.is-warning{background:#ffe08a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:rgba(0,0,0,0.7)' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center;border-color:#ffe08a}.b-checkbox.checkbox input[type=checkbox]:indeterminate+.check.is-danger,.b-checkbox.checkbox input[type=checkbox].is-indeterminate+.check.is-danger{background:#f14668 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:%23fff' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center;border-color:#f14668}.b-checkbox.checkbox input[type=checkbox]:focus+.check{box-shadow:0 0 0.5em rgba(122,122,122,0.8)}.b-checkbox.checkbox input[type=checkbox]:focus:checked+.check{box-shadow:0 0 0.5em rgba(0,209,178,0.8)}.b-checkbox.checkbox input[type=checkbox]:focus:checked+.check.is-white{box-shadow:0 0 0.5em rgba(255,255,255,0.8)}.b-checkbox.checkbox input[type=checkbox]:focus:checked+.check.is-black{box-shadow:0 0 0.5em rgba(10,10,10,0.8)}.b-checkbox.checkbox input[type=checkbox]:focus:checked+.check.is-light{box-shadow:0 0 0.5em rgba(245,245,245,0.8)}.b-checkbox.checkbox input[type=checkbox]:focus:checked+.check.is-dark{box-shadow:0 0 0.5em rgba(54,54,54,0.8)}.b-checkbox.checkbox input[type=checkbox]:focus:checked+.check.is-primary{box-shadow:0 0 0.5em rgba(0,209,178,0.8)}.b-checkbox.checkbox input[type=checkbox]:focus:checked+.check.is-link{box-shadow:0 0 0.5em rgba(72,95,199,0.8)}.b-checkbox.checkbox input[type=checkbox]:focus:checked+.check.is-info{box-shadow:0 0 0.5em rgba(62,142,208,0.8)}.b-checkbox.checkbox input[type=checkbox]:focus:checked+.check.is-success{box-shadow:0 0 0.5em rgba(72,199,142,0.8)}.b-checkbox.checkbox input[type=checkbox]:focus:checked+.check.is-warning{box-shadow:0 0 0.5em rgba(255,224,138,0.8)}.b-checkbox.checkbox input[type=checkbox]:focus:checked+.check.is-danger{box-shadow:0 0 0.5em rgba(241,70,104,0.8)}.b-checkbox.checkbox .control-label{padding-left:calc(0.75em - 1px)}.b-checkbox.checkbox.button{display:flex}.b-checkbox.checkbox[disabled]{opacity:0.5}.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled)+.check{border-color:#00d1b2}.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled)+.check.is-white{border-color:#fff}.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled)+.check.is-black{border-color:#0a0a0a}.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled)+.check.is-light{border-color:#f5f5f5}.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled)+.check.is-dark{border-color:#363636}.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled)+.check.is-primary{border-color:#00d1b2}.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled)+.check.is-link{border-color:#485fc7}.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled)+.check.is-info{border-color:#3e8ed0}.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled)+.check.is-success{border-color:#48c78e}.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled)+.check.is-warning{border-color:#ffe08a}.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled)+.check.is-danger{border-color:#f14668}.b-checkbox.checkbox.is-small{border-radius:2px;font-size:.75rem}.b-checkbox.checkbox.is-medium{font-size:1.25rem}.b-checkbox.checkbox.is-large{font-size:1.5rem}