| @@ -74,19 +74,8 @@ | ||
| 74 | 74 | border-bottom: 1px solid #fff; |
| 75 | 75 | color: #000; |
| 76 | 76 | } |
| 77 | 77 | |
| 78 | -/* Tab Content */ | |
| 79 | -.mxchat-tab-content { | |
| 80 | - display: none; | |
| 81 | - padding: 25px; | |
| 82 | - background: white; | |
| 83 | - border: 1px solid #ddd; | |
| 84 | - border-radius: 10px; | |
| 85 | - box-shadow: 0 2px 15px rgba(0,0,0,0.05); | |
| 86 | - animation: fadeIn 0.3s ease-in-out; | |
| 87 | -} | |
| 88 | - | |
| 89 | 78 | #default-db.mxchat-tab-content, #pinecone-db.mxchat-tab-content { |
| 90 | 79 | border: none; |
| 91 | 80 | box-shadow: none; |
| 92 | 81 | padding: 0px; |
| @@ -2815,6 +2804,467 @@ | ||
| 2815 | 2804 | } |
| 2816 | 2805 | } |
| 2817 | 2806 | |
| 2818 | 2807 | |
| 2808 | +.video-tutorials-section { | |
| 2809 | + max-width: 1200px; | |
| 2810 | + margin: 0 auto; | |
| 2811 | + padding: 2rem 0; | |
| 2812 | +} | |
| 2819 | 2813 | |
| 2814 | +.section-intro { | |
| 2815 | + text-align: center; | |
| 2816 | + margin-bottom: 2rem; | |
| 2817 | + font-size: 1.1rem; | |
| 2818 | +} | |
| 2820 | 2819 | |
| 2820 | +.tutorial-grid { | |
| 2821 | + display: grid; | |
| 2822 | + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| 2823 | + gap: 2rem; | |
| 2824 | + margin-bottom: 3rem; | |
| 2825 | +} | |
| 2826 | + | |
| 2827 | +.tutorial-item { | |
| 2828 | + border: 1px solid #e0e0e0; | |
| 2829 | + border-radius: 8px; | |
| 2830 | + padding: 1.5rem; | |
| 2831 | + box-shadow: 0 2px 5px rgba(0,0,0,0.05); | |
| 2832 | + transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| 2833 | + background-color: #fff; | |
| 2834 | +} | |
| 2835 | + | |
| 2836 | +.tutorial-item:hover { | |
| 2837 | + transform: translateY(-5px); | |
| 2838 | + box-shadow: 0 5px 15px rgba(0,0,0,0.1); | |
| 2839 | +} | |
| 2840 | + | |
| 2841 | +.tutorial-item h3 { | |
| 2842 | + margin-top: 0; | |
| 2843 | + font-size: 1.2rem; | |
| 2844 | + color: #333; | |
| 2845 | + border-bottom: 2px solid #f0f0f0; | |
| 2846 | + padding-bottom: 0.75rem; | |
| 2847 | + margin-bottom: 1rem; | |
| 2848 | +} | |
| 2849 | + | |
| 2850 | +.video-description p { | |
| 2851 | + margin-bottom: 1rem; | |
| 2852 | + color: #555; | |
| 2853 | +} | |
| 2854 | + | |
| 2855 | +.video-description small { | |
| 2856 | + color: #888; | |
| 2857 | + font-style: italic; | |
| 2858 | +} | |
| 2859 | + | |
| 2860 | +.video-link { | |
| 2861 | + display: inline-flex; | |
| 2862 | + align-items: center; | |
| 2863 | + text-decoration: none; | |
| 2864 | + color: #0073aa; | |
| 2865 | + font-weight: 500; | |
| 2866 | + margin-top: 0.5rem; | |
| 2867 | + padding: 0.5rem 1rem; | |
| 2868 | + border-radius: 4px; | |
| 2869 | + background-color: #f7f7f7; | |
| 2870 | + transition: background-color 0.2s ease; | |
| 2871 | +} | |
| 2872 | + | |
| 2873 | +.video-link:hover { | |
| 2874 | + background-color: #e6f3fa; | |
| 2875 | + color: #004d74; | |
| 2876 | +} | |
| 2877 | + | |
| 2878 | +.video-icon { | |
| 2879 | + margin-right: 0.5rem; | |
| 2880 | + display: inline-flex; | |
| 2881 | + color: #e62117; | |
| 2882 | +} | |
| 2883 | + | |
| 2884 | +.support-section { | |
| 2885 | + margin-top: 3rem; | |
| 2886 | + padding-top: 2rem; | |
| 2887 | + border-top: 1px solid #e0e0e0; | |
| 2888 | + text-align: center; | |
| 2889 | +} | |
| 2890 | + | |
| 2891 | +.support-content { | |
| 2892 | + max-width: 800px; | |
| 2893 | + margin: 0 auto; | |
| 2894 | + background-color: #f9f9f9; | |
| 2895 | + padding: 2rem; | |
| 2896 | + border-radius: 8px; | |
| 2897 | +} | |
| 2898 | + | |
| 2899 | +.support-content p { | |
| 2900 | + margin-bottom: 1rem; | |
| 2901 | + font-size: 1.1rem; | |
| 2902 | + line-height: 1.6; | |
| 2903 | +} | |
| 2904 | + | |
| 2905 | +.support-content a { | |
| 2906 | + color: #0073aa; | |
| 2907 | + font-weight: 500; | |
| 2908 | + text-decoration: none; | |
| 2909 | + padding: 0.2rem 0.4rem; | |
| 2910 | + border-radius: 3px; | |
| 2911 | + transition: background-color 0.2s; | |
| 2912 | +} | |
| 2913 | + | |
| 2914 | +.support-content a:hover { | |
| 2915 | + background-color: #e6f3fa; | |
| 2916 | + text-decoration: underline; | |
| 2917 | +} | |
| 2918 | + | |
| 2919 | +.api-info-item h4 { | |
| 2920 | + margin-top: 0; | |
| 2921 | + color: #333; | |
| 2922 | + margin-bottom: 1rem; | |
| 2923 | +} | |
| 2924 | + | |
| 2925 | +@media (max-width: 768px) { | |
| 2926 | + .tutorial-grid { | |
| 2927 | + grid-template-columns: 1fr; | |
| 2928 | + } | |
| 2929 | + | |
| 2930 | + .tutorial-item { | |
| 2931 | + padding: 1rem; | |
| 2932 | + } | |
| 2933 | + | |
| 2934 | + .support-content { | |
| 2935 | + padding: 1.5rem; | |
| 2936 | + } | |
| 2937 | +} | |
| 2938 | + | |
| 2939 | +/* Additional CSS for the main admin page */ | |
| 2940 | + | |
| 2941 | +/* Pro and Add-on notice messages */ | |
| 2942 | +.mxchat-pro-notice, | |
| 2943 | +.mxchat-addon-notice { | |
| 2944 | + margin: 0; | |
| 2945 | + line-height: 1.6; | |
| 2946 | + color: #333; | |
| 2947 | +} | |
| 2948 | + | |
| 2949 | +.mxchat-pro-notice a, | |
| 2950 | +.mxchat-addon-notice a { | |
| 2951 | + color: #7873f5; | |
| 2952 | + text-decoration: none; | |
| 2953 | + font-weight: 600; | |
| 2954 | + transition: color 0.2s ease; | |
| 2955 | +} | |
| 2956 | + | |
| 2957 | +.mxchat-pro-notice a:hover, | |
| 2958 | +.mxchat-addon-notice a:hover { | |
| 2959 | + color: #fa73e6; | |
| 2960 | + text-decoration: underline; | |
| 2961 | +} | |
| 2962 | + | |
| 2963 | +/* Tutorial Grid & Items */ | |
| 2964 | +.tutorial-grid { | |
| 2965 | + display: grid; | |
| 2966 | + grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); | |
| 2967 | + gap: 24px; | |
| 2968 | + margin-top: 20px; | |
| 2969 | +} | |
| 2970 | + | |
| 2971 | +.tutorial-item { | |
| 2972 | + background: #f8f9ff; | |
| 2973 | + border-radius: 12px; | |
| 2974 | + padding: 24px; | |
| 2975 | + transition: all 0.3s ease; | |
| 2976 | + border: 1px solid rgba(120, 115, 245, 0.1); | |
| 2977 | +} | |
| 2978 | + | |
| 2979 | +.tutorial-item:hover { | |
| 2980 | + transform: translateY(-3px); | |
| 2981 | + box-shadow: 0 6px 20px rgba(120, 115, 245, 0.12); | |
| 2982 | +} | |
| 2983 | + | |
| 2984 | +.tutorial-item h3 { | |
| 2985 | + margin-top: 0; | |
| 2986 | + margin-bottom: 16px; | |
| 2987 | + color: #333; | |
| 2988 | + font-size: 1.2rem; | |
| 2989 | +} | |
| 2990 | + | |
| 2991 | +.video-description p { | |
| 2992 | + color: #666; | |
| 2993 | + font-size: 0.95rem; | |
| 2994 | + margin-bottom: 16px; | |
| 2995 | +} | |
| 2996 | + | |
| 2997 | +.video-description small { | |
| 2998 | + color: #888; | |
| 2999 | + font-size: 0.85rem; | |
| 3000 | + font-style: italic; | |
| 3001 | +} | |
| 3002 | + | |
| 3003 | +.video-link { | |
| 3004 | + display: inline-flex; | |
| 3005 | + align-items: center; | |
| 3006 | + gap: 8px; | |
| 3007 | + padding: 8px 16px; | |
| 3008 | + background: white; | |
| 3009 | + border-radius: 8px; | |
| 3010 | + text-decoration: none; | |
| 3011 | + color: #7873f5; | |
| 3012 | + font-weight: 600; | |
| 3013 | + font-size: 0.9rem; | |
| 3014 | + border: 1px solid rgba(120, 115, 245, 0.2); | |
| 3015 | + transition: all 0.2s ease; | |
| 3016 | +} | |
| 3017 | + | |
| 3018 | +.video-link:hover { | |
| 3019 | + background: #eef0ff; | |
| 3020 | + color: #fa73e6; | |
| 3021 | +} | |
| 3022 | + | |
| 3023 | +.video-icon { | |
| 3024 | + display: flex; | |
| 3025 | + align-items: center; | |
| 3026 | + justify-content: center; | |
| 3027 | +} | |
| 3028 | + | |
| 3029 | +/* Support Section */ | |
| 3030 | +.support-section { | |
| 3031 | + margin-top: 40px; | |
| 3032 | + padding: 24px; | |
| 3033 | + background: #f8f9ff; | |
| 3034 | + border-radius: 12px; | |
| 3035 | + border: 1px solid rgba(120, 115, 245, 0.1); | |
| 3036 | +} | |
| 3037 | + | |
| 3038 | +.support-section h3 { | |
| 3039 | + margin-top: 0; | |
| 3040 | + color: #333; | |
| 3041 | +} | |
| 3042 | + | |
| 3043 | +.support-content p { | |
| 3044 | + color: #666; | |
| 3045 | + margin-bottom: 12px; | |
| 3046 | +} | |
| 3047 | + | |
| 3048 | +.support-content a { | |
| 3049 | + color: #7873f5; | |
| 3050 | + text-decoration: none; | |
| 3051 | + font-weight: 600; | |
| 3052 | +} | |
| 3053 | + | |
| 3054 | +.support-content a:hover { | |
| 3055 | + color: #fa73e6; | |
| 3056 | + text-decoration: underline; | |
| 3057 | +} | |
| 3058 | + | |
| 3059 | +/* Updated tab navigation */ | |
| 3060 | +.mxchat-tabs { | |
| 3061 | + display: flex; | |
| 3062 | + gap: 2px; | |
| 3063 | + margin-bottom: 20px; | |
| 3064 | + border-bottom: 1px solid rgba(120, 115, 245, 0.1); | |
| 3065 | +} | |
| 3066 | + | |
| 3067 | +.mxchat-tab-button { | |
| 3068 | + padding: 12px 24px; | |
| 3069 | + background: none; | |
| 3070 | + border: none; | |
| 3071 | + border-bottom: 2px solid transparent; | |
| 3072 | + color: #666; | |
| 3073 | + cursor: pointer; | |
| 3074 | + font-size: 14px; | |
| 3075 | + transition: all 0.2s ease; | |
| 3076 | +} | |
| 3077 | + | |
| 3078 | +.mxchat-tab-button:hover { | |
| 3079 | + color: #7873f5; | |
| 3080 | +} | |
| 3081 | + | |
| 3082 | +.mxchat-tab-button.active { | |
| 3083 | + color: #7873f5; | |
| 3084 | + border-bottom-color: #7873f5; | |
| 3085 | +} | |
| 3086 | + | |
| 3087 | +/* Tab content */ | |
| 3088 | +.mxchat-tab-content { | |
| 3089 | + display: none; | |
| 3090 | +} | |
| 3091 | + | |
| 3092 | +.mxchat-tab-content.active { | |
| 3093 | + display: block; | |
| 3094 | +} | |
| 3095 | + | |
| 3096 | + | |
| 3097 | + | |
| 3098 | + | |
| 3099 | +/* Pro Notification Styling */ | |
| 3100 | +.mxchat-pro-card { | |
| 3101 | + background: linear-gradient(90deg, #f8f9ff 0%, #f0f4ff 100%); | |
| 3102 | + border-left: 4px solid #6366f1; | |
| 3103 | + border-radius: 8px; | |
| 3104 | + box-shadow: 0 2px 10px rgba(99, 102, 241, 0.1); | |
| 3105 | + margin-bottom: 25px; | |
| 3106 | + overflow: hidden; | |
| 3107 | +} | |
| 3108 | + | |
| 3109 | +.mxchat-pro-notification { | |
| 3110 | + display: flex; | |
| 3111 | + flex-direction: row; | |
| 3112 | + align-items: center; | |
| 3113 | + justify-content: space-between; | |
| 3114 | + padding: 20px 24px; | |
| 3115 | +} | |
| 3116 | + | |
| 3117 | +@media (max-width: 768px) { | |
| 3118 | + .mxchat-pro-notification { | |
| 3119 | + flex-direction: column; | |
| 3120 | + text-align: center; | |
| 3121 | + gap: 15px; | |
| 3122 | + } | |
| 3123 | +} | |
| 3124 | + | |
| 3125 | +.mxchat-pro-content { | |
| 3126 | + flex: 1; | |
| 3127 | +} | |
| 3128 | + | |
| 3129 | +.mxchat-pro-content h3 { | |
| 3130 | + margin-top: 0; | |
| 3131 | + margin-bottom: 8px; | |
| 3132 | + font-size: 18px; | |
| 3133 | + color: #4338ca; | |
| 3134 | + font-weight: 600; | |
| 3135 | +} | |
| 3136 | + | |
| 3137 | +.mxchat-pro-content p { | |
| 3138 | + margin: 0; | |
| 3139 | + color: #4b5563; | |
| 3140 | + font-size: 14px; | |
| 3141 | + line-height: 1.5; | |
| 3142 | +} | |
| 3143 | + | |
| 3144 | +.mxchat-pro-cta { | |
| 3145 | + display: flex; | |
| 3146 | + flex-direction: column; | |
| 3147 | + gap: 8px; | |
| 3148 | + min-width: 180px; | |
| 3149 | +} | |
| 3150 | + | |
| 3151 | +.mxchat-button { | |
| 3152 | + display: inline-block; | |
| 3153 | + background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%); | |
| 3154 | + color: white !important; | |
| 3155 | + font-weight: 600; | |
| 3156 | + padding: 10px 20px; | |
| 3157 | + border-radius: 6px; | |
| 3158 | + text-decoration: none !important; | |
| 3159 | + text-align: center; | |
| 3160 | + transition: all 0.2s ease; | |
| 3161 | + box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3); | |
| 3162 | +} | |
| 3163 | + | |
| 3164 | +.mxchat-button:hover { | |
| 3165 | + transform: translateY(-2px); | |
| 3166 | + box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4); | |
| 3167 | +} | |
| 3168 | + | |
| 3169 | +.mxchat-link { | |
| 3170 | + color: #6366f1 !important; | |
| 3171 | + text-decoration: none !important; | |
| 3172 | + text-align: center; | |
| 3173 | + font-size: 14px; | |
| 3174 | + padding: 4px; | |
| 3175 | +} | |
| 3176 | + | |
| 3177 | +.mxchat-link:hover { | |
| 3178 | + text-decoration: underline !important; | |
| 3179 | +} | |
| 3180 | + | |
| 3181 | + | |
| 3182 | + | |
| 3183 | + | |
| 3184 | + | |
| 3185 | + | |
| 3186 | + | |
| 3187 | +/* API Key field styles */ | |
| 3188 | +.api-key-wrapper { | |
| 3189 | + margin-bottom: 15px; | |
| 3190 | + padding: 15px; | |
| 3191 | + border-radius: 5px; | |
| 3192 | + border-left: 4px solid #2271b1; | |
| 3193 | + background-color: #f0f6fc; | |
| 3194 | + transition: all 0.3s ease; | |
| 3195 | +} | |
| 3196 | + | |
| 3197 | +/* Row-level visibility handling */ | |
| 3198 | +tr.mxchat-setting-row { | |
| 3199 | + display: table-row; | |
| 3200 | + transition: all 0.3s ease; | |
| 3201 | +} | |
| 3202 | + | |
| 3203 | +tr.mxchat-setting-row.highlighted { | |
| 3204 | + animation: highlight-row 1.5s ease; | |
| 3205 | +} | |
| 3206 | + | |
| 3207 | +.api-key-wrapper input[type="password"] { | |
| 3208 | + margin-right: 10px; | |
| 3209 | +} | |
| 3210 | + | |
| 3211 | +.api-key-wrapper button { | |
| 3212 | + background: #f6f7f7; | |
| 3213 | + border: 1px solid #c3c4c7; | |
| 3214 | + color: #50575e; | |
| 3215 | + cursor: pointer; | |
| 3216 | + border-radius: 3px; | |
| 3217 | + padding: 0 10px; | |
| 3218 | + height: 30px; | |
| 3219 | + line-height: 28px; | |
| 3220 | + font-size: 13px; | |
| 3221 | +} | |
| 3222 | + | |
| 3223 | +.api-key-wrapper button:hover { | |
| 3224 | + background: #f0f0f1; | |
| 3225 | +} | |
| 3226 | + | |
| 3227 | +.api-key-notice { | |
| 3228 | + margin-top: 8px !important; | |
| 3229 | + color: #1e1e1e; | |
| 3230 | + font-style: italic; | |
| 3231 | +} | |
| 3232 | + | |
| 3233 | +@keyframes highlight-field { | |
| 3234 | + 0% { | |
| 3235 | + background-color: #e5f5fa; | |
| 3236 | + } | |
| 3237 | + 50% { | |
| 3238 | + background-color: #c7e8f3; | |
| 3239 | + } | |
| 3240 | + 100% { | |
| 3241 | + background-color: #f0f6fc; | |
| 3242 | + } | |
| 3243 | +} | |
| 3244 | + | |
| 3245 | +@keyframes highlight-row { | |
| 3246 | + 0% { background-color: transparent; } | |
| 3247 | + 50% { background-color: #e5f5fa; } | |
| 3248 | + 100% { background-color: transparent; } | |
| 3249 | +} | |
| 3250 | + | |
| 3251 | +/* Customize the look based on provider */ | |
| 3252 | +.api-key-wrapper[data-provider="openai"] { | |
| 3253 | + border-left-color: #10a37f; | |
| 3254 | +} | |
| 3255 | + | |
| 3256 | +.api-key-wrapper[data-provider="xai"] { | |
| 3257 | + border-left-color: #0077e6; | |
| 3258 | +} | |
| 3259 | + | |
| 3260 | +.api-key-wrapper[data-provider="claude"] { | |
| 3261 | + border-left-color: #a065d5; | |
| 3262 | +} | |
| 3263 | + | |
| 3264 | +.api-key-wrapper[data-provider="deepseek"] { | |
| 3265 | + border-left-color: #3b7fc4; | |
| 3266 | +} | |
| 3267 | + | |
| 3268 | +.api-key-wrapper[data-provider="voyage"] { | |
| 3269 | + border-left-color: #ff6b00; | |
| 3270 | +} | |
