| @@ -4,8 +4,11 @@ | ||
| 4 | 4 | |
| 5 | 5 | #system_prompt_instructions { |
| 6 | 6 | transition: height 0.3s ease; |
| 7 | 7 | } |
| 8 | +.red-warning { | |
| 9 | + color: red; | |
| 10 | +} | |
| 8 | 11 | |
| 9 | 12 | .mxchat-form-intent { |
| 10 | 13 | background-color: rgba(240, 240, 245, 0.5); |
| 11 | 14 | } |
| @@ -71,19 +74,8 @@ | ||
| 71 | 74 | border-bottom: 1px solid #fff; |
| 72 | 75 | color: #000; |
| 73 | 76 | } |
| 74 | 77 | |
| 75 | -/* Tab Content */ | |
| 76 | -.mxchat-tab-content { | |
| 77 | - display: none; | |
| 78 | - padding: 25px; | |
| 79 | - background: white; | |
| 80 | - border: 1px solid #ddd; | |
| 81 | - border-radius: 10px; | |
| 82 | - box-shadow: 0 2px 15px rgba(0,0,0,0.05); | |
| 83 | - animation: fadeIn 0.3s ease-in-out; | |
| 84 | -} | |
| 85 | - | |
| 86 | 78 | #default-db.mxchat-tab-content, #pinecone-db.mxchat-tab-content { |
| 87 | 79 | border: none; |
| 88 | 80 | box-shadow: none; |
| 89 | 81 | padding: 0px; |
| @@ -2812,6 +2804,291 @@ | ||
| 2812 | 2804 | } |
| 2813 | 2805 | } |
| 2814 | 2806 | |
| 2815 | 2807 | |
| 2808 | +.video-tutorials-section { | |
| 2809 | + max-width: 1200px; | |
| 2810 | + margin: 0 auto; | |
| 2811 | + padding: 2rem 0; | |
| 2812 | +} | |
| 2816 | 2813 | |
| 2814 | +.section-intro { | |
| 2815 | + text-align: center; | |
| 2816 | + margin-bottom: 2rem; | |
| 2817 | + font-size: 1.1rem; | |
| 2818 | +} | |
| 2817 | 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 | +} | |
