Initial commit

2025-10-01 01:39:07 +00:00
commit b430bf3b96
826 changed files with 255287 additions and 0 deletions
--- a/styles/layout/_topbar.scss
+++ b/styles/layout/_topbar.scss
@@ -0,0 +1,178 @@
+.layout-rightmenu-button {
+    background: linear-gradient(271.89deg, rgba(70,82,104,1), rgba(115,130,161,1));
+    border-radius: 6px 0px 0px 6px;
+    border-color: transparent;
+    border-left: 0 none;
+    box-shadow: 0px 0px 10px rgb(15 139 253 / 25%);
+    right: 0;
+    color: #fff;
+    span {
+        font-weight: 400 !important;
+    }
+    &:enabled:hover {
+        background: linear-gradient(271.89deg, rgba(70,82,104,0.5), rgba(115,130,161,0.5));
+        border-color: transparent;
+    }
+}
+.layout-topbar {
+    margin-bottom: 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .topbar-start {
+        display: flex;
+        align-items: center;
+        position: relative;
+        z-index: 999;
+        .topbar-menubutton {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: 2rem;
+            border-radius: var(--border-radius);
+            width: 2.5rem;
+            height: 2.5rem;
+            flex-shrink: 0;
+            transition: background-color var(--transition-duration);
+
+            i {
+                font-size: 1.25rem;
+                color: var(--text-color);
+                transition: color var(--transition-duration);
+            }
+
+            &:hover {
+                background-color: var(--primary-color);
+
+                i {
+                    color: var(--primary-color-text);
+                }
+            }
+        }
+    }
+
+    .topbar-menu {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        margin: 0;
+        padding: 0 1.15rem 0 0.85rem;
+        padding-right: 0;
+        list-style: none;
+        flex-grow: 1;
+        color: var(--topbar-item-text-color);
+        margin-right: -2rem;
+
+        li {
+            margin-left: 1.5rem;
+            &.topbar-item {
+                margin-left: 1.5rem;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                position: relative;
+
+                img {
+                    width: 2rem;
+                    height: 2rem;
+                }
+
+                button {
+                    border-radius: 50%;
+                    width: 2rem;
+                    height: 2rem;
+                    transition: box-shadow var(--transition-duration);
+
+                    &:focus {
+                        box-shadow: var(--focus-ring);
+                    }
+                }
+
+                ul {
+                    position: absolute;
+                    bottom: -9.4rem;
+                    right: 0;
+                    display: none;
+                    color: var(--text-color);
+                    background: var(--surface-ground);
+                    box-shadow: var(--box-shadow);
+                    &.active-topbar-menu {
+                        display: block;
+                    }
+
+                    a {
+                        color: var(--text-color);
+                    }
+
+
+                   
+                }
+            }
+            .topbar-search {
+                display: flex;
+                align-items: center;
+                flex-shrink: 0;
+                .topbar-searchbutton {
+                   display: flex;
+                }
+        
+                .search-input-wrapper {
+                    position: relative;
+                    width: 0;
+                    opacity: 0;
+                    visibility: hidden;
+                    transition: 400ms cubic-bezier(0.86, 0, 0.07, 1);
+        
+                    span {
+                        width: 100%;
+        
+                        .p-inputtext {
+                            width: 100%;
+                            position: relative;
+                            border-radius: 40px;
+                            padding: 9px;
+                        }
+        
+                        i {
+                            font-size: 18px;
+                            margin-top: -9px;
+                        }
+                    }
+                }
+        
+                &.topbar-search-active {
+                    .topbar-searchbutton {
+                        opacity: 0;
+                        display: none;
+                        pointer-events: none;
+                        cursor: default;
+                        transition: opacity .1s;
+                        transition-delay: .1s;
+                    }
+                    
+                    .search-input-wrapper {
+                        width: 190px;
+                        opacity: 1;
+                        visibility: visible;
+                        border-radius: var(--border-radius);
+                        i {
+                            display: block;
+                        }
+                        input{
+                            border-radius: var(--border-radius);
+                        }
+                    }
+                }
+            }
+
+            button {
+                span {
+                    color: var(--item-text-color);
+                }
+            }
+          
+        }
+    }
+}
+