architwin 1.12.4 → 1.13.0

package/static/atwinui.css

@@ -75,8 +75,271 @@
     --button-bg-color: var(--bg-secondary);
     --button-border-color: var(--border-color);
     --button-font-weight: normal;
+
+    --bg-dark-gray: rgb(48, 48, 48);
+        /* pipe color category */
+    --bg-dark-red: rgb(130, 0, 0); 
+    --bg-red: rgb(255, 0, 0);
+    --bg-amber: rgb(250, 170, 0);
+    --bg-chartreuse: rgb(251, 255, 0);
+    --bg-light-chartreuse: rgb(237, 255, 0, 1);
+    --bg-light-green:rgb(137, 255, 0);
+    --bg-dark-green: rgb(0, 138, 0);
+    --bg-sky-blue:  rgb(169, 229, 255, 1);
+    --bg-purple: rgb(109, 0, 255);
+    --bg-dark-purple: rgb(56, 0, 152);
+
+}
+
+/*pipe  color  category*/
+.at_pipe_category-bg-dark-red {
+    background-color: var(--bg-dark-red);
+}
+
+.at_pipe_category-bg-red {
+    background-color: var(--bg-red);
+}
+
+.at_pipe_category-bg-amber {
+    background-color: var(--bg-amber);
+}
+
+.at_pipe_category-bg-light-chartreuse {
+    background-color: var(--bg-light-chartreuse);
+}
+
+.at_pipe_category-bg-chartreuse {
+    background-color: var(--bg-chartreuse);
+}
+
+.at_pipe_category-bg-light-green {
+    background-color: var(--bg-light-green);
+}
+
+.at_pipe_category-bg-dark-green {
+    background-color: var(--bg-dark-green);
+}
+
+.at_pipe_category-bg-sky-blue {
+    background-color: var(--bg-sky-blue);
+}
+
+.at_pipe_category-bg-purple {
+    background-color: var(--bg-purple);
+}
+
+.at_pipe_category-bg-dark-purple {
+    background-color: var(--bg-dark-purple);
+}
+
+/* end pipe color category  */
+
+.at_pipe-save-btn{
+    /* background: var(--bg-highlight-light); */
+    color: var(--text-color-light);
+    line-height: 20px;
+}
+
+/* pipe circle */
+.at_circle {
+  width: 35px;
+  height: 35px;
+  border-radius: 50%;
+  display: inline-grid;
+  place-items: center;
+  position: relative;
+  color: white; /* for checkmark */
+  font-size: 18px;
+  cursor: pointer;
+}
+
+.at_circle.selected::after {
+  content: "✓";
+  position: absolute;
+  color: black;
+  font-size: 20px;
+  font-weight: 900;
+}
+/* end circle */
+
+/* pipe classes */
+
+
+.at_dropdown-option{
+    transition: background-color 0.2s ease;
+}
+
+.at_dropdown-option.selected{
+    background-color: var(--bg-secondary-light);
+    color: var(--text-color-dark);
+    border-radius: 2px;
+}
+
+.at_dropdown-option:hover{
+    background-color: var(--bg-secondary-light);
+    color: var(--text-color-dark);
+    border-radius: 2px;
+}
+
+.at_locate_area_container {
+    cursor: pointer;
+    width: 100%;
+    transition: background-color 0.2s ease;
+}
+
+.at_locate_area_container.selected {
+    background-color: var(--bg-secondary-light);
+    color: var(--text-color-dark);
+    border-radius: 2px;
+}
+
+.at_locate_area_container:hover {
+    background-color: var(--bg-secondary-light);
+    color: var(--text-color-dark);
+    border-radius: 2px;
+}
+
+.at_pipe-dots-bg{
+    color: black;
+    line-height: 20px;
+}
+
+.at_draw_pipe_btn{
+    white-space: nowrap;
+    width: 100%;
+    font-weight: 900;
+}
+
+.at_pipe-vertex-bg{
+    /* background-color: var(--bg-lime-yellow); */
+    color: black;
+    line-height: 20px;
+    
+}
+
+
+.at_pipe_content{
+    background-color: var(--bg-dark-gray);
+    padding: 5px;
+    font-size: 12px;
+    text-align: center;
+}
+.at_pipe_container{
+    background-color: var(--bg-accent-forest);
+    padding: 10px;
+    border-radius: 10px;
+    /* height: 40vh; */
+}
+.at_pipe_category-container{
+    font-size: 35px;
+}
+
+.at_pipe_label {
+    position: absolute;
+    top: 20px; 
+    /* left: 12px;   */
+    text-align: left;
+    display: inline-block;
+    /* padding: 0 4px; */
+    height: 14px;
+    line-height: 14px;
+    font-size: 14px;
+    font-weight: 400;
+    color: var(--text-color-light);
+    cursor: text;
+    transition: all .15s ease-in-out;
+}
+
+.at_pipe_input {
+    position: relative;
+    display: block;
+    width: 100%;
+    border: 0;
+    border-bottom: 1px solid var(--bg-highlight-light);
+    color: var(--text-color-light);
+    background-color: transparent;
+    margin: 0px auto;
+    /* padding: 6px 4px 4px 14px; */
+    height: 40px;
+    outline: none !important;
+    /* font-size: 14px; */
+    transition: all .1s ease-in-out;
+}
+.at_pipe_input:hover, .at_pipe_input:focus { border-bottom: 2px solid var(--bg-highlight-light); }
+
+.at_pipe_input:valid + label, .at_pipe_input:focus + label { 
+    top: -4px;
+    color: var(--text-color-light);
+    font-weight: bold;
+}
+/* end pipe classes */
+
+/* collapse classes */
+
+.at_collapse_container{
+    width: 100%;
+    /* height: calc(100vh - 298px); */
+    overflow: auto;
+}
+
+.at_collapsible_section{
+    margin-bottom: 0 20px;
+}
+
+.at_collapse-content{
+    /* height: 400px; */
+}
+
+.at_collapsible_container {
+    width: 100%;
+    max-width: 600px;
+    margin: 0 auto;
+    font-family: Arial, sans-serif;
+}
+
+.at_collapsible_header {
+
+    cursor: pointer;
+    border-bottom: none;
+}
+
+.at_collapsible_content {
+    height: 0;
+    overflow: hidden;
+    border: none;
+}
+
+.at_collapsible_content.expand {
+    height: 100%; 
+}
+
+.at-collapse-toggle-btn{
+    display: inline-block;
+    transform: rotate(-90deg); 
 }
 
+.at-collapse-toggle-btn.active{
+    transform: rotate(0deg); 
+}
+
+.at_collapsible_content div {
+    margin: 0;
+}
+
+.at_collapsible_content span{
+    cursor: pointer;
+}
+
+/* end collapse classed */
+
+
+
+.at_align_item_end{
+    align-items: end
+}
+
+
+
 .at_topLeft {
     top: var(--position-top);
     left: var(--position-left);
@@ -1801,3 +2064,7 @@
 .at_default_coordinate_system {
     margin-top: 15px;
 }
+
+.at_comment_unsend_container{
+    cursor: pointer;
+}

package/static/utility.css

@@ -1,5 +1,70 @@
 /* Width Utility Classes */
 
+/* .at_h-full-screen{
+  height: calc(100vh - 64px);
+} */
+
+.at_has_border{
+  border: 3px solid ;
+}
+.at_h-responsive-64{
+ height: calc(100vh - 64px);
+}
+
+.at_h-responsive-10{
+ height: calc(100vh - 10px);
+}
+
+.at_h-responsive-224{
+ height: calc(100vh - 224px);
+}
+
+.at_h-responsive-250{
+ height: calc(100vh - 250px);
+}
+
+.at_h-responsive-268{
+ height: calc(100vh - 268px);
+}
+.at_h-responsive-290{
+height: calc(100vh - 290px)
+}
+
+.at_h-responsive-304{
+height: calc(100vh - 304px)
+}
+
+.at_h-responsive-650{
+   height: calc(100vh - 650px);
+}
+
+.at_p-2{
+  padding: 0.5rem;
+}
+
+.at_px-1{
+  padding:0 0.2rem;
+}
+
+.at_px-2{
+  padding:0 0.5rem;
+}
+
+.at_py-2{
+  padding:0.5rem 0;
+}
+
+.at_py-3{
+  padding:0.75rem 0;
+}
+
+.at_pt-2{
+  padding-top:0.5rem ;
+}
+
+.at_mb-2{
+  margin-bottom: 5px;
+}
 .at_w-auto {
   width: auto;
 }
@@ -242,6 +307,9 @@ width: 100vw;
   .at_text_xl {
     font-size: 1.25rem;
   }
+  .at_text-xxl{
+    font-size: 32px;
+  } 
 
   .at_text_white {
     color: white;
@@ -295,11 +363,19 @@ width: 100vw;
   .at_mb_1 {
     margin-bottom: 0.25rem !important;
   }
-
+  
   .at_mb_2 {
     margin-bottom: 0.5rem !important;
   }
   
+  .at_mb_3 {
+    margin-bottom:  0.75rem !important;
+  }
+
+   .at_mb_4 {
+    margin-bottom: 1rem !important;
+  }
+  
   .at_gap_1 {
     gap: 0.25rem;
   }
@@ -324,6 +400,10 @@ width: 100vw;
     display: inline-block
   }
 
+  .no_scroll{
+    overflow: hidden !important;
+  }
+
   /* Spinner container style */
   .at_spinner {
     border: 8px solid grey;