architwin 1.5.2 → 1.5.4

package/static/atwinui.css

@@ -18,20 +18,20 @@
 
     /* Color Themes */
     --bg-azusa: hsla(191, 22%, 10%, var(--container-opacity));
-    --bg-light: hsl(0,0%,100%, var(--container-opacity));
+    --bg-light: hsl(0, 0%, 100%, var(--container-opacity));
     --bg-retro: hsl(45, 47%, 80%, var(--container-opacity));
     --bg-forest: hsl(0, 12%, 8%, var(--container-opacity));
     --bg-aqua: hsl(219, 53%, 43%, var(--container-opacity));
     --bg-night: hsl(222, 46%, 11%, var(--container-opacity));
 
-    
+
     --bg-secondary-azusa: hsl(191, 22%, 10%);
     --bg-secondary-light: hsl(213, 22%, 80%);
     --bg-secondary-retro: hsl(45, 31%, 67%);
     --bg-secondary-forest: hsl(161, 37%, 15%);
     --bg-secondary-aqua: hsl(205, 54%, 50%);
     --bg-secondary-night: hsl(217, 33%, 17%);
-    
+
     --bg-accent-azusa: hsla(329, 77%, 68%, 0.721);
     --bg-accent-light: hsl(180, 2%, 90%);
     --bg-accent-retro: hsl(44, 47%, 68%);
@@ -57,7 +57,7 @@
 
     /* Container.js */
     --container-border-radius: var(--border-radius);
-    --container-bg-color: hsl(191,21,10);
+    --container-bg-color: hsl(191, 21, 10);
     --container-opacity: 0.755;
     --container-padding: 10px;
     --container-margin: 6px;
@@ -145,16 +145,20 @@
 }
 
 .at_scrollable_container::-webkit-scrollbar {
-    width: 3px;               /* width of the entire scrollbar */
+    width: 3px;
+    /* width of the entire scrollbar */
 }
 
 .at_scrollable_container::-webkit-scrollbar-track {
-    background: transparent;        /* color of the tracking area */
+    background: transparent;
+    /* color of the tracking area */
 }
 
 .at_scrollable_container::-webkit-scrollbar-thumb {
-    background-color: var(--bg-secondary);   /* color of the scroll thumb */
-    border-radius: 1px;       /* roundness of the scroll thumb */
+    background-color: var(--bg-secondary);
+    /* color of the scroll thumb */
+    border-radius: 1px;
+    /* roundness of the scroll thumb */
 }
 
 .at_flex_tiles {
@@ -321,7 +325,7 @@
     color: var(--text-color-light);
     border-radius: var(--container-border-radius);
     padding: var(--container-padding);
-    justify-content: var(--container-justify-content);  
+    justify-content: var(--container-justify-content);
     flex-wrap: var(--container-wrap);
     gap: 16px;
     flex-direction: column;
@@ -345,7 +349,7 @@
     border-radius: var(--container-border-radius);
     padding: 8px 4px;
     background-color: var(--bg-highlight);
-    color:  var(--text-color-light);
+    color: var(--text-color-light);
     text-align: center;
     font-weight: bold;
     font-size: 1em;
@@ -396,7 +400,9 @@
     border: 0;
     font-weight: bolder;
     color: white;
-    padding: /*8px*/ 0px 6px;
+    padding:
+        /*8px*/
+        0px 6px;
     /* margin-top: 4px; */
     margin-bottom: 2px;
     border-radius: var(--border-radius);
@@ -496,6 +502,7 @@
     border-color: #ffffff;
     /* Change to the desired focus color */
 }
+
 /*Alert*/
 
 .at_alert {
@@ -516,7 +523,7 @@
 /*Color classes*/
 /* Primary Background Colors */
 .at_primary_azusa {
-    background-color:var(--bg-primary);
+    background-color: var(--bg-primary);
     color: var(--text-color-light);
 }
 
@@ -742,114 +749,117 @@
 
 .at_css3DElement {
     opacity: 0;
-	transition: opacity 1000ms;
+    transition: opacity 1000ms;
 }
 
 /* CSS Class for Chat Bubble Container */
 .at_chat_container {
     display: flex;
     flex-direction: column;
-    margin: 0 auto; 
+    margin: 0 auto;
     padding: 10px;
-  }
-  
-  /* CSS Class for Chat Bubble */
-  .at_chat_bubble {
+}
+
+/* CSS Class for Chat Bubble */
+.at_chat_bubble {
     display: flex;
-    max-width: 70%; 
+    max-width: 70%;
     margin: 2px 10px 10px 10px;
     padding: 10px;
     border-radius: 15px;
-    word-wrap: break-word; /* Wrap long words */
+    word-wrap: break-word;
+    /* Wrap long words */
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  }
-  
-  /* CSS Class for Sent Chat Bubble */
-  .at_chat_bubble_sent {
-    background-color: var(--bg-highlight); 
-    color: var(--text-color-light); 
-    align-self: flex-end; 
-  }
-  
-  /* CSS Class for Received Chat Bubble */
-  .at_chat_bubble_received {
-    background-color: var(--bg-accent); 
-    color: var(--text-color-light); 
+}
+
+/* CSS Class for Sent Chat Bubble */
+.at_chat_bubble_sent {
+    background-color: var(--bg-highlight);
+    color: var(--text-color-light);
+    align-self: flex-end;
+}
+
+/* CSS Class for Received Chat Bubble */
+.at_chat_bubble_received {
+    background-color: var(--bg-accent);
+    color: var(--text-color-light);
     align-self: flex-start;
-  }
-  
-  /* CSS Class for Chat Avatar */
-  .at_chat_avatar {
+}
+
+/* CSS Class for Chat Avatar */
+.at_chat_avatar {
     max-width: 30px;
     max-height: 30px;
-    border: 2px solid #fff; 
-    border-radius: 12px; 
+    border: 2px solid #fff;
+    border-radius: 12px;
     margin: 2px;
     padding: 4px 8px;
     font-weight: bolder;
     text-align: center;
-  }
-
-  .at_chat_avatar_received {
-    background-color: var(--bg-highlight); 
-    color: var(--text-color-light); 
-  }
-
-  .at_chat_avatar_sender {
-    background-color: var(--bg-accent); 
-    color: var(--text-color-light); 
-  }
-  
-  .at_chat_media {
+}
+
+.at_chat_avatar_received {
+    background-color: var(--bg-highlight);
+    color: var(--text-color-light);
+}
+
+.at_chat_avatar_sender {
+    background-color: var(--bg-accent);
+    color: var(--text-color-light);
+}
+
+.at_chat_media {
     max-width: 60%;
-  }
+}
 
-  .at_chat_textarea {
+.at_chat_textarea {
     background-color: white;
     color: black;
     border: none;
     resize: none;
     outline: none;
     padding: 10px;
-    font-size: 1em; /* Adjust font size as needed */
-  }
+    font-size: 1em;
+    /* Adjust font size as needed */
+}
 
-  .at_send_chat_button {
+.at_send_chat_button {
     padding: 4px 8px;
     cursor: pointer;
     font-size: 25px;
-  }
+}
 
-  .at_send_chat_button:hover {
+.at_send_chat_button:hover {
     background-color: var(--bg-accent);
     color: var(--text-color-light);
-  }
+}
 
-  /* MODAL CLASSES */
+/* MODAL CLASSES */
 
-  #at-modal-overlay {
-    display: none; 
+#at-modal-overlay {
+    display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgba(0,0,0,0.8);
+    background: rgba(0, 0, 0, 0.8);
     animation: slide-down 0.3s ease;
     animation-fill-mode: forwards;
     transform: translateY(-100%);
-  }
+}
 
-    @keyframes slide-down {
+@keyframes slide-down {
     from {
         transform: translateY(-100%);
     }
+
     to {
         transform: translateY(0);
     }
-    }
+}
 
-  .at_modal { 
+.at_modal {
     max-width: 480px;
     height: 260px;
     max-height: 300px;
@@ -857,27 +867,28 @@
     background-color: #ffff;
     border-radius: 5px;
     padding: 0rem 1rem;
-    animation:scale-up-center .4s cubic-bezier(.39,.575,.565,1.000) both
-  }
+    animation: scale-up-center .4s cubic-bezier(.39, .575, .565, 1.000) both
+}
 
-  @keyframes scale-up-center {
+@keyframes scale-up-center {
     0% {
-      transform: scale(.5)
+        transform: scale(.5)
     }
+
     100% {
-      transform: scale(1)
+        transform: scale(1)
     }
-  } 
+}
 
-  .at_close-icon {
-   font-size: 2rem;
-   text-align: right;
-   cursor: pointer;
+.at_close-icon {
+    font-size: 2rem;
+    text-align: right;
+    cursor: pointer;
 }
 
 .at_modal-content {
-   text-align: center;
-   padding-top: 10px;
+    text-align: center;
+    padding-top: 10px;
 }
 
 .at_modal-content-heading {
@@ -905,38 +916,39 @@
     border: none;
     text-transform: uppercase;
     font-weight: 600;
-  }
+}
 
-  .at_close-button:hover {
+.at_close-button:hover {
     background-color: #c73259;
     outline: #fff;
-  }
+}
 
-  .at_open-modal-btn:hover,
-  .at_open-modal-btn:focus{
+.at_open-modal-btn:hover,
+.at_open-modal-btn:focus {
     background-color: #ffff;
     color: #4E56EE;
     border: 1px solid #4E56EE;
-  }
+}
 
-  @media screen and (max-width: 540px) { 
+@media screen and (max-width: 540px) {
 
-    .at_modal { 
-      max-width: 300px;
-      height: 320px;
-      padding: 0rem 1rem;
+    .at_modal {
+        max-width: 300px;
+        height: 320px;
+        padding: 0rem 1rem;
     }
 
-  } 
+}
 
 
-  /* CUSTOM CLASSES */
-  .at_tag_list_pane {
+/* CUSTOM CLASSES */
+.at_tag_list_pane {
     margin: 6px 6px 0px 6px !important;
     gap: 0px !important;
     padding: 10px 10px 5px 10px !important;
-  }
+}
 
-  .at_disabled {
+.at_disabled {
     pointer-events: none;
-  }
+    opacity: 0.4;
+}