appscms-tools-theme 5.2.3 → 5.2.5

data/assets/css/ai-image-home.css

@@ -1,760 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-body {
-    font-family: var(--font-family);
-    background: var(--white-color);
-    overflow-x: hidden;
-}
-
-/* header css */
-
-.navbar{
-    background-color: white;
-}
-.navbar-brand {
-    color: var(--black-color) !important;
-}
-
-.nav-item {
-    padding: 0 1rem;
-}
-
-.nav-item .nav-link {
-    color: var(--black-color);
-}
-
-.btn-generate,
-.login-btn {
-    width: auto;
-    background: linear-gradient(90deg, hsl(20.5 90.2% 48.2%), #ec4899);
-    border-color: var(--primary-color);
-    color: white;
-    font-weight: 500;
-    padding: 0.7rem 1rem;
-    width: 100%;
-    border-radius: 0.375rem;
-    border: none;
-    color: white;
-    font-size: 15px;
-    margin-bottom: 0px !important;
-}
-
-/* auth / login  / signup css */
-
-.side-modal-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
-    display: none;
-    z-index: 100;
-}
-
-.side-modal {
-    position: fixed;
-    z-index: 10000;
-    top: 0;
-    right: -90%;
-    width: 28%;
-    height: 100%;
-    background-color: white;
-    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
-    transition: right 0.3s ease-in-out;
-    overflow-y: auto;
-}
-
-.close-modal-btn {
-    background: #000;
-    color: white;
-    border: none;
-    padding: 5px 20px;
-    border-radius: 8px;
-    cursor: pointer;
-    font-weight: 600;
-}
-
-.close-modal-btn:hover {
-    background: #4f46e5;
-}
-
-.auth-container {
-    background-color: white;
-    border-radius: 8px;
-    padding: 30px;
-    width: 400px;
-    max-width: 90%;
-}
-
-
-.user-avatar {
-    position: absolute;
-    top: 20px;
-    right: 20px;
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    background-color: #1b2de7;
-    color: white;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-weight: bold;
-    cursor: pointer;
-}
-
-.user-profile-header {
-    padding: 0px 0px 0px 20px;
-    display: none;
-}
-
-.profile-button {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    background-color: var(--primary-color);
-    color: white;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    font-weight: bold;
-    position: relative;
-}
-
-.user-modal {
-    z-index: 9;
-    position: absolute;
-    top: 55px;
-    right: 0px;
-    width: 300px;
-    background-color: white;
-    border-radius: 8px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    display: none;
-    overflow: hidden;
-}
-
-.user-modal-header {
-    padding: 20px;
-    display: flex;
-    align-items: center;
-}
-
-.google-btn {
-    background-color: #4884ed;
-}
-
-.google-btn svg {
-    background-color: #fff;
-    border-radius: 30px;
-    padding: 3px;
-}
-
-.facebook-btn {
-    background-color: #3c5997;
-}
-
-.or-divider {
-    display: flex;
-    align-items: center;
-    text-align: center;
-    margin: 20px 0;
-    color: #777;
-}
-
-.or-divider::before,
-.or-divider::after {
-    content: "";
-    flex: 1;
-    border-bottom: 1px solid #ddd;
-}
-
-.or-divider::before {
-    margin-right: 10px;
-}
-
-.or-divider::after {
-    margin-left: 10px;
-}
-
-.input-group {
-    position: relative;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: stretch;
-    width: 100%;
-    margin-bottom: 1rem;
-}
-
-.input-group input {
-    width: 100%;
-    padding: 12px 40px 12px 40px;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    font-size: 16px;
-    box-sizing: border-box;
-}
-
-.input-group .icon {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    color: #999;
-    font-size: 16px;
-}
-
-.input-group i {
-    position: absolute;
-    left: 12px;
-    top: 50%;
-    transform: translateY(-50%);
-    color: #777;
-}
-
-.password-toggle {
-    position: absolute;
-    right: 12px;
-    top: 50%;
-    transform: translateY(-50%);
-    color: #777;
-    cursor: pointer;
-}
-
-.log-subinfo {
-    font-size: 16px;
-    font-weight: normal;
-    color: #555;
-    margin-bottom: 30px;
-}
-
-.log-info {
-    font-size: 28px;
-    margin-bottom: 10px;
-    color: #000;
-}
-
-.social-btn {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    padding: 12px;
-    border: none;
-    border-radius: 4px;
-    font-size: 16px;
-    margin-bottom: 10px;
-    cursor: pointer;
-    color: white;
-    text-align: center;
-}
-
-.google-btn svg {
-    width: 24px;
-    height: 24px;
-    display: inline-block;
-    margin-right: 10px;
-}
-
-.google-btn svg {
-    background-color: #fff;
-    border-radius: 30px;
-    padding: 3px;
-}
-
-.icon {
-    width: 24px;
-    height: 24px;
-    display: inline-block;
-    margin-right: 10px;
-}
-
-.google-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none"><path fill="#4285F4" d="M21.533 12.187c0-.82-.067-1.417-.21-2.037h-9.357v3.698h5.492c-.11.92-.709 2.303-2.038 3.233l-.018.124 2.958 2.292.205.02c1.882-1.738 2.968-4.296 2.968-7.33"></path><path fill="#34A853" d="M11.966 21.931c2.69 0 4.95-.886 6.6-2.414l-3.146-2.436c-.841.587-1.97.997-3.454.997-2.636 0-4.872-1.739-5.67-4.141l-.117.01-3.076 2.38-.04.112a9.96 9.96 0 0 0 8.903 5.492"></path><path fill="#FBBC05" d="M6.296 13.937a6.1 6.1 0 0 1-.332-1.971c0-.687.122-1.351.321-1.971l-.005-.132-3.115-2.42-.102.05A10 10 0 0 0 2 11.965a10 10 0 0 0 1.063 4.473z"></path><path fill="#EB4335" d="M11.966 5.853c1.87 0 3.133.809 3.853 1.484l2.813-2.746C16.904 2.985 14.656 2 11.966 2a9.96 9.96 0 0 0-8.903 5.492l3.222 2.503c.809-2.403 3.045-4.142 5.68-4.142"></path></g></svg>');
-}
-
-.facebook-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="white" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-7H9v-2h2V8.5C11 7.12 12.12 6 13.5 6H16v2h-2c-.55 0-1 .45-1 1v1h3v2h-3v7z"/></svg>');
-}
-
-.email-icon {
-    position: absolute;
-    top: 10px;
-    left: 10px;
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="%23777" d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>');
-}
-
-.password-icon {
-    position: absolute;
-    top: 10px;
-    left: 10px;
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="%23777" d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/></svg>');
-}
-
-.eye-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="%23777" d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>');
-}
-
-.google-btn svg {
-    width: 24px;
-    height: 24px;
-    display: inline-block;
-    margin-right: 10px;
-}
-
-#forgotPasswordForm {
-    display: none;
-}
-
-#forgotPasswordForm h2 {
-    font-weight: 600;
-    font-size: 20px;
-    color: var(--black-color);
-}
-
-#forgotPasswordForm p {
-    color: var(--black-color)
-}
-
-#signupForm h1 {
-    font-size: 30px;
-    color: var(--black-color);
-}
-
-#signupForm p {
-    color: var(--black-color)
-}
-
-.back-btn {
-    display: flex;
-    align-items: center;
-    margin-bottom: 20px;
-    cursor: pointer;
-    color: #1b2de7;
-    font-size: 14px;
-}
-
-.back-btn:hover {
-    text-decoration: underline;
-}
-
-.back-icon {
-    margin-right: 8px;
-}
-
-.reset-success {
-    text-align: center;
-    background-color: #e8f4ff;
-    padding: 15px;
-    border-radius: 4px;
-    margin-top: 15px;
-    display: none;
-}
-
-.success-icon {
-    color: #1b2de7;
-    font-size: 24px;
-    margin-bottom: 10px;
-}
-
-.twitter-btn {
-    background-color: #000000;
-}
-
-.twitter-btn svg {
-    width: 24px;
-    height: 24px;
-    display: inline-block;
-    margin-right: 10px;
-}
-
-.user-modal-header {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 70px;
-    background-color: white;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    padding: 0 20px;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-}
-
-
-.forgot-password {
-    text-align: center;
-    margin-top: 16px;
-}
-
-.forgot-password a {
-    color: #007bff;
-    text-decoration: none;
-    font-size: 14px;
-}
-
-.forgot-password a:hover {
-    text-decoration: underline;
-}
-
-.profile-user-avatar {
-    width: 60px;
-    height: 60px;
-    border-radius: 50%;
-    background-color: var(--primary-color);
-    color: white;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-weight: bold;
-    font-size: 24px;
-    margin-right: 20px;
-}
-
-.modal-item {
-    display: flex;
-    align-items: center;
-    padding: 20px;
-    border-top: 1px solid #eee;
-    color: #000;
-    text-decoration: none;
-    transition: background-color 0.2s;
-    cursor: pointer;
-}
-
-.modal-item:hover {
-    background-color: #ddd;
-    color:  black;
-    text-decoration: none;
-}
-
-.item-icon {
-    margin-right: 20px;
-    font-size: 20px;
-    min-width: 24px;
-    text-align: center;
-}
-
-.item-text {
-    flex-grow: 1;
-}
-
-.item-arrow svg {
-    height: 13px;
-    width: 13px;
-}
-
-
-/* headings css */
-
-.appscms-h1{
-    font-size: 50px;
-    font-weight: 700;
-}
-
-.appscms-h2{
-    font-size: 18px;
-    font-weight: 300;
-}
-
-
-
-
-.container {
-    max-width: 1200px;
-    margin: 0 auto;
-}
-
-.category-nav {
-    display: flex;
-    justify-content: start;
-    gap: 8px;
-    overflow-x: auto;
-    padding: 10px 0;
-    scrollbar-width: thin;
-    scrollbar-color: #ddd transparent;
-}
-
-.category-nav::-webkit-scrollbar {
-    height: 6px;
-}
-
-.category-nav::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-.category-nav::-webkit-scrollbar-thumb {
-    background: #ddd;
-    border-radius: 3px;
-}
-
-.category-tab {
-    padding: 12px 24px;
-    background: #f8f8f8;
-    border: none;
-    border-radius: 8px;
-    font-size: 15px;
-    font-weight: 500;
-    color: #333;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    white-space: nowrap;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-}
-
-.category-tab:hover {
-    background: #f8f8f8;
-    transform: translateY(-2px);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-}
-
-.category-tab.active {
-    background: #333;
-    color: white;
-    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.3);
-}
-
-/* Content area for demonstration */
-.content-area {
-    margin-top: 40px;
-    padding: 40px;
-    background: white;
-    border-radius: 12px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-    min-height: 400px;
-}
-
-.content-area h2 {
-    color: #333;
-    margin-bottom: 20px;
-}
-
-.content-area p {
-    color: #666;
-    line-height: 1.6;
-}
-.image-item.hidden {
-    display: none;
-}
-
-.count-badge {
-    background: rgba(0, 0, 0, 0.1);
-    padding: 2px 8px;
-    border-radius: 10px;
-    font-size: 0.8em;
-    margin-left: 5px;
-    font-weight: bold;
-}
-
-.category-tab.active .count-badge {
-    background: #fff;
-    /* Active tab par white badge */
-    color: #000;
-}
-
-.tag-filter-section {
-    padding: 20px 0;
-}
-
-.tag-filters {
-    display: flex;
-    gap: 12px;
-    flex-wrap: wrap;
-}
-
-.tag {
-    padding: 8px 18px;
-    border-radius: 999px;
-    border: 1px solid #e5e7eb;
-    background: #fff;
-    font-size: 14px;
-    cursor: pointer;
-    transition: all 0.25s ease;
-}
-
-/* Hover */
-.tag:hover {
-    background: #f3f4f6;
-}
-
-/* Active */
-.tag.active {
-    background: #111827;
-    color: #fff;
-    border-color: #111827;
-}
-
-/* Special tags */
-.tag.hot {
-    border-color: #ef4444;
-    color: #ef4444;
-}
-
-.tag.trending {
-    border-color: #2563eb;
-    color: #2563eb;
-}
-
-/* Active override for special */
-.tag.hot.active {
-    background: #ef4444;
-    color: #fff;
-}
-
-.tag.trending.active {
-    background: #2563eb;
-    color: #fff;
-}
-
-.search-container {
-    max-width: 800px;
-    margin: 2rem auto;
-}
-
-.search {
-    position: relative;
-    width: 100%;
-}
-
-.search-input {
-    width: 100%;
-    padding: 16px 50px 16px 16px;
-    font-size: 15px;
-    border: 1px solid #e0e0e0;
-    border-radius: 12px;
-    outline: none;
-    background: #fff;
-    transition: all 0.3s ease;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-}
-
-.search-input:focus {
-    border-color: #000;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-}
-
-.search-input::placeholder {
-    color: #999;
-}
-
-.search-icon {
-    position: absolute;
-    right: 18px;
-    top: 50%;
-    transform: translateY(-50%);
-    color: #666;
-    pointer-events: none;
-    transition: color 0.3s ease;
-}
-
-.search-input:focus~.search-icon {
-    color: #000;
-}
-
-/* Clear button */
-.clear-btn {
-position: absolute;
-    right: 16px;
-    top: 53%;
-    transform: translateY(-50%);
-    background: transparent;
-    border: none;
-    width: 30px;
-    height: 30px;
-    border-radius: 50%;
-    cursor: pointer;
-    display: none;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.2s ease;
-    color: #000;
-    font-size: 2rem;
-    line-height: 1;
-}
-
-.clear-btn:hover {
-    background: #e0e0e0;
-    color: #000;
-}
-
-.search-input:not(:placeholder-shown)~.clear-btn {
-    display: flex;
-}
-
-#try_style_btn {
-    background: #facc15e6;
-    color: #000;
-    /* width: 50px; */
-    /* height: 50px; */
-    position: absolute;
-    border: none;
-    /* top: 0; */
-    bottom: 10px;
-    right: 10px;
-    border-radius: 50px;
-    font-size: 12px;
-    padding: 8px 25px;
-}
-
-.image-gallery {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-    gap: 20px;
-    padding: 20px;
-    border-radius: 30px;
-}
-
-.image-item {
-    position: relative;
-    border-radius: 30px;
-    overflow: hidden;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    transition: transform 0.3s ease;
-}
-
-.image-item:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
-}
-
-.image-item img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    display: block;
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-    .nav-item {
-        padding: 0.3rem 0 !important;
-    }
-    .side-modal{
-        width: 90%;
-    }
-    .auth-container {
-        padding: 30px 0;
-    }
-    .category-tab {
-        padding: 10px 20px;
-        font-size: 14px;
-    }
-
-    .content-area {
-        padding: 24px;
-    }
-
-    .appscms-h1{
-        font-size: 30px;
-    }
-     .appscms-h2{
-        font-size: 16px;
-    }
-
-}