accrete 0.0.47__py3-none-any.whl → 0.0.49__py3-none-any.whl

accrete/contrib/ui/static/css/accrete.scss

@@ -1,62 +1,55 @@
-@charset "utf-8";
-
-$success: #48c78e;
-$lightgrey: #F5F5F5;
-$darkgrey: #5e636e;
-$link: #0a0a0a;
-$darkwhite: #FCFCFC;
-$form-box-bg: #FCFCFC;
-$table-cell-padding: .2rem .75rem .2rem 0;
-$navbar-height: 2.5rem;
-$column-gap: .2rem;
-$side-panel-width: 320px;
-$size-6: .9rem;
-$body-font-size: $size-6;
-$table-font-size: .85rem;
-$table-background-color: #FCFCFC;
-$border-radius: 4px;
-$input-shadow: none;
-$input-focus-border-color: $success;
-$input-focus-box-shadow-size: 0;
-$input-arrow: $success;
-$button-focus-box-shadow-size: 0;
-$button-active-border-color: $success;
-$button-focus-border-color: $success;
-$body-background-color: #FCFCFC;
-$button-background-color: #FCFCFC;
-$thead-background-color: #FCFCFC;
-$table-row-hover-background-color: #EEEEEE;
-
-.form-box {
-    background-color: $form-box-bg;
-    padding: 24px;
-    border-radius: 6px;
-    box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02);
-    margin-top: 12px;
+@use "../bulma/sass";
+
+:root {
+    --accrete-black: #14161A;
+    --accrete-white: #ffffff;
+    --accrete-dark: rgb(30, 31, 34);
+    --accrete-grey: #FCFCFC;
+    --accrete-hover-color: #F0F2F4;
+    --accrete-side-panel-width: 320px;
+    --accrete-query-tag-bg-color: #D3D3D3;
+    --accrete-field-bg-color: var(--bulma-scheme-main);
+    --accrete-navbar-link-color: var(--accrete-white);
+    --accrete-navbar-burger-color: var(--accrete-white);
+    --accrete-box-shadow: 0 2px 13px 0 lightgray;
+    --bulma-navbar-height: 2.5rem;
+    --bulma-navbar-item-color: var(--accrete-white);
+    --bulma-body-font-size: 0.9em;
+    --bulma-size-normal: .9rem;
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        --bulma-scheme-main: var(--accrete-grey);
+        --bulma-link-text: var(--accrete-black);
+        --bulma-link-text-hover: var(--accrete-black);
+        --bulma-link-text-active: var(--accrete-black);
+    }
 }
 
-thead {
-    background: $darkwhite !important;
-}
+@media (prefers-color-scheme: dark) {
+    :root {
+        --hover-color: #1F2229;
+        --bulma-scheme-main: var(--dark);
+        --bulma-link-text: var(--white);
+        --bulma-link-text-hover: var(--white);
+        --bulma-link-text-active: var(--white);
+        --bulma-button-h: var(--dark);
 
-.fade.htmx-swapping {
-    opacity: 0;
-    transition: opacity 400ms ease-out;
+    }
 }
 
-.fade.htmx-added {
-    opacity: 0;
-    transition: opacity 200ms ease-in-out;
+.box {
+    box-shadow: var(--accrete-box-shadow);
+    margin-top: 8px;
 }
 
-form.htmx-request {
-    opacity: 0;
-    transition: opacity 3s linear;
-  }
+thead {
+    background-color: var(--bulma-scheme-main) !important;
+}
 
-#main {
-    padding-top: $navbar-height;
-    height: 100vh;
+tbody > tr:hover {
+    background-color: var(--accrete-hover-color) !important;
 }
 
 td > a {
@@ -64,21 +57,126 @@ td > a {
     width:100%;
 }
 
-td, th {
-    font-size: $table-font-size;
-}
-
 td {
     vertical-align: middle !important;
 }
 
-.columns:not(:last-child) {
+.table {
+    --bulma-table-cell-padding: 0.3em 0.65em;
+}
+
+.navbar-link {
+    color: var(--accrete-navbar-link-color);
+}
+
+.select:not(.is-multiple):not(.is-loading)::after {
+    border-color: var(--bulma-success);
+}
+
+.field {
+    margin-bottom: 0 !important;
+}
+
+.field.has-addons {
     margin-bottom: 0 !important;
 }
 
+.field:not(:last-child) {
+    margin-bottom: 0 !important;
+}
+
+.label.has-field {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+    font-weight: 300;
+    word-break: break-word;
+    padding: 12px 12px 12px 0;
+}
+
+.label.has-field * input {
+    border-top: transparent;
+    border-right: transparent;
+    border-left: transparent;
+    border-radius: 0;
+    box-shadow: none;
+    background-color: var(--accrete-field-bg-color);
+}
+
+.label.has-field * select {
+    border-top: transparent;
+    border-right: transparent;
+    border-left: transparent;
+    border-radius: 0;
+    box-shadow: none;
+    background-color: var(--accrete-field-bg-color);
+}
+
+.label.has-field * .button {
+    border-top: transparent;
+    border-right: transparent;
+    border-left: transparent;
+    box-shadow: none;
+    height: 100%;
+    border-radius: 0;
+    background-color: var(--accrete-field-bg-color);
+}
+
+.label.is-required {
+    font-weight: 700;
+}
+
+.label.is-detail {
+    font-weight: 300;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.label.is-detail > div {
+    border-bottom: 1px #ccc solid;
+    font-weight: 400;
+}
+
+.label.is-detail * p {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-left: .5em;
+    min-height: 2.5em;
+}
+
+.label.is-detail * a.button {
+    border: transparent;
+}
+
+.label.is-detail * a.button:first-child {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.input {
+    background-color: var(--accrete-field-bg-color);
+    box-shadow: none;
+}
+
+.input:focus {
+    box-shadow: none;
+    border-color: var(--bulma-success);
+}
+
+select:focus {
+    box-shadow: none!important;
+    border-color: var(--bulma-success) !important;
+}
+
+.responsive-heading {
+    display: none;
+}
+
 .side-panel {
-    min-width: $side-panel-width;
-    max-width: $side-panel-width;
+    width: var(--accrete-side-panel-width);
     position: sticky;
     top: 0;
     height: 100%;
@@ -115,10 +213,10 @@ td {
 }
 
 .query-param > p:hover, .query-param:focus > p {
-    background: lightgray;
+    background: var(--accrete-hover-color);
     cursor: pointer;
     outline: none;
-    border-radius: 4px;
+    border-radius: var(--bulma-radius);
 }
 
 .query-tag-container {
@@ -133,8 +231,8 @@ td {
     flex-grow: 1;
     justify-content: space-between;
     margin-bottom: 4px;
-    background-color: lightgray;
-    border-radius: 4px;
+    background-color: var(--accrete-query-tag-bg-color);
+    border-radius: var(--bulma-radius);
     cursor: pointer;
 }
 
@@ -161,8 +259,8 @@ td {
 .query-tag-edit {
     background-color: transparent;
     border: none;
-    border-bottom-left-radius: 5px;
-    border-top-left-radius: 5px;
+    border-bottom-left-radius: var(--bulma-radius);
+    border-top-left-radius: var(--bulma-radius);
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -172,7 +270,7 @@ td {
 }
 
 .query-tag-edit:hover {
-    background-color: $lightgrey;
+    background-color: var(--accrete-hover-color);
 }
 
 .query-tag-operator {
@@ -182,9 +280,7 @@ td {
 .query-group-operator {
     display: flex;
     flex-direction: row;
-    //width: fit-content;
     align-items: center;
-    //justify-content: center;
 }
 
 .query-group-operator * button {
@@ -192,7 +288,7 @@ td {
     background-color: transparent;
     border: none;
     cursor: pointer;
-    border-radius: $border-radius;
+    border-radius: var(--bulma-radius);
 }
 
 .query-group-selector {
@@ -202,20 +298,20 @@ td {
 }
 
 .selected-query-tag {
-    background-color: $success !important;
+    background-color: var(--bulma-success) !important;
 }
 
 .selected-query-group-selector {
-    outline: 3px solid $success;
+    outline: 3px solid var(--bulma-success);
 }
 
 .selected-query-group:not(:first-child) {
-    border-left: 4px solid $success !important;
+    border-left: var(--bulma-radius) solid var(--bulma-success) !important;
     padding-left: 7px !important;
 }
 
 .selected-query-edit {
-    background-color: $success !important;
+    background-color: var(--bulma-success) !important;
 }
 
 .query-group:not(:first-child) {
@@ -232,130 +328,49 @@ td {
     text-indent: 13px;
 }
 
-.field {
-    margin-bottom: 0 !important;
+#modal-filter-button.is-active {
+    background-color: var(--bulma-success);
 }
 
-.field.has-addons {
-    margin-bottom: 0 !important;
-}
-
-.field:not(:last-child) {
-    margin-bottom: 0 !important;
-}
-
-.label.has-field {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: end;
-    font-weight: 300;
-    word-break: break-word;
-    padding: 12px 12px 12px 0;
-}
-
-.label.has-field * input {
-    border-top: transparent;
-    border-right: transparent;
-    border-left: transparent;
-    border-radius: 0;
-    background-color: transparent;
-}
-
-.label.has-field * select {
-    border-top: transparent;
-    border-right: transparent;
-    border-left: transparent;
-    border-radius: 0;
-    background-color: transparent;
-}
-
-.label.has-field * .button {
-    border-top: transparent;
-    border-right: transparent;
-    border-left: transparent;
-    border-radius: 0;
-    background-color: transparent;
-}
-
-.label.is-required {
-    font-weight: 700;
-}
-
-.label.is-detail {
-    font-weight: 300;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-}
-
-.label.is-detail:hover {
-    //font-weight: 400;
-}
-
-.label.is-detail > div {
-    border-bottom: 1px #ccc solid;
-    font-weight: 400;
-}
-
-.label.is-detail:hover > div {
-    //border-bottom: 1px #1e1f22 solid;
-    //font-weight: 400;
-}
-
-.label.is-detail * p {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    padding-left: .5em;
-    min-height: 2.5em;
-}
-
-.button {
-    //background-color: transparent !important;
-}
-
-.label.is-detail * a.button {
-    border: transparent;
-}
-
-.label.is-detail * a.button:first-child {
-    padding-left: 0;
-    padding-right: 0;
+.navbar-brand-dropdown {
+    z-index: 9999;
+    position: absolute;
+    top: var(--bulma-navbar-height);
+    margin-top: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-bottom-left-radius: 0;
 }
 
-.responsive-heading {
-    display: none;
+.navbar-brand-dropdown-item:hover {
+    background-color: var(--accrete-hover-color);
 }
 
-.htmx-settling progress {
-    opacity: 0;
+.navbar-brand:hover {
+    cursor: pointer;
 }
 
-progress {
-    transition: opacity 300ms ease-in;
+.navbar-item {
+    color: var(--bulma-navbar-item-color)
 }
 
-.navbar-brand-dropdown {
-    z-index: 999;
-    position: absolute;
-    top:$navbar-height;
+.navbar-burger {
+    color: var(--accrete-navbar-burger-color);
 }
 
-.navbar-brand:hover {
-    cursor: pointer;
+.navbar.is-success {
+    --bulma-navbar-dropdown-item-h: var(--bulma-scheme-h);
+    --bulma-navbar-dropdown-item-s: var(--bulma-scheme-s);
+    --bulma-navbar-dropdown-item-l: var(--bulma-scheme-main-l);
 }
 
-.navbar-brand-dropdown-item:hover {
-    background-color: $lightgrey;
+.button.has-icon:hover {
+    background-color: var(--accrete-hover-color);
 }
 
 @media screen and (max-width: 768px) {
-    .label.has-field {
-        padding: 12px 0 12px 0;
-    }
 
-    table.hax-box * td {
+    table.has-box * td {
         width: 100%;
         float: left;
         text-align: left !important;
@@ -364,22 +379,25 @@ progress {
         padding-left: 1rem !important;
     }
 
-    table.hax-box * tr {
-        margin-bottom: 10px;
+    table.has-box * tr {
+        margin: 8px 0 8px 0;
         display: inline-block;
         width: 100%;
-        border: 1px #ccc solid;
-        border-radius: 6px;
+        border: none;
+        box-shadow: var(--accrete-box-shadow);
+        border-radius: var(--bulma-radius);
     }
 
-    table.hax-box > thead {
+    table.has-box * tr:hover {
+        background-color: var(--bulma-scheme-main) !important;
+    }
+
+    table.has-box > thead {
         display: none;
     }
 
-    table.hax-box * span.responsive-heading {
+    table.has-box * span.responsive-heading {
         display: inline-block;
     }
 
 }
-
-@import "../bulma/bulma.sass";