@@ -2755,4 +2755,161 @@ tbody tr:hover {
27552755 background : # fff ;
27562756}
27572757
2758+ /* Logo Type Toggle */
2759+ .logo-type-toggle {
2760+ display : flex;
2761+ gap : 0 ;
2762+ margin-bottom : 12px ;
2763+ border : 1px solid var (--border );
2764+ border-radius : var (--radius-md );
2765+ overflow : hidden;
2766+ }
2767+ .logo-type-toggle button {
2768+ flex : 1 ;
2769+ padding : 8px 12px ;
2770+ border : none;
2771+ background : var (--bg-secondary );
2772+ color : var (--text-secondary );
2773+ font-size : 0.82rem ;
2774+ font-weight : 600 ;
2775+ cursor : pointer;
2776+ transition : var (--transition );
2777+ font-family : inherit;
2778+ }
2779+ .logo-type-toggle button : first-child {
2780+ border-right : 1px solid var (--border );
2781+ }
2782+ .logo-type-toggle button .active {
2783+ background : var (--accent-1 );
2784+ color : # fff ;
2785+ }
2786+ .logo-type-toggle button : hover : not (.active ) {
2787+ background : var (--bg-tertiary );
2788+ }
2789+
2790+ /* SVG Picker */
2791+ .svg-picker {
2792+ border : 1px solid var (--border );
2793+ border-radius : var (--radius-md );
2794+ overflow : hidden;
2795+ background : var (--bg-secondary );
2796+ }
2797+ .svg-picker-search {
2798+ width : 100% ;
2799+ padding : 10px 12px ;
2800+ border : none;
2801+ border-bottom : 1px solid var (--border );
2802+ background : var (--bg-tertiary );
2803+ color : var (--text-primary );
2804+ font-size : 0.85rem ;
2805+ font-family : inherit;
2806+ outline : none;
2807+ box-sizing : border-box;
2808+ }
2809+ .svg-picker-search ::placeholder {
2810+ color : var (--text-secondary );
2811+ }
2812+ .svg-picker-search : focus {
2813+ border-bottom-color : var (--accent-1 );
2814+ }
2815+ .svg-picker-grid {
2816+ display : grid;
2817+ grid-template-columns : repeat (auto-fill, minmax (44px , 1fr ));
2818+ gap : 4px ;
2819+ padding : 8px ;
2820+ max-height : 220px ;
2821+ overflow-y : auto;
2822+ }
2823+ .svg-picker-grid ::-webkit-scrollbar {
2824+ width : 6px ;
2825+ }
2826+ .svg-picker-grid ::-webkit-scrollbar-track {
2827+ background : transparent;
2828+ }
2829+ .svg-picker-grid ::-webkit-scrollbar-thumb {
2830+ background : var (--border );
2831+ border-radius : 3px ;
2832+ }
2833+ .svg-picker-item {
2834+ display : flex;
2835+ flex-direction : column;
2836+ align-items : center;
2837+ justify-content : center;
2838+ gap : 3px ;
2839+ padding : 6px 2px ;
2840+ border-radius : 6px ;
2841+ cursor : pointer;
2842+ transition : var (--transition );
2843+ border : 2px solid transparent;
2844+ background : transparent;
2845+ }
2846+ .svg-picker-item : hover {
2847+ background : var (--bg-tertiary );
2848+ }
2849+ .svg-picker-item .selected {
2850+ border-color : var (--accent-1 );
2851+ background : color-mix (in srgb, var (--accent-1 ) 15% , var (--bg-secondary ));
2852+ }
2853+ .svg-picker-item img {
2854+ width : 24px ;
2855+ height : 24px ;
2856+ object-fit : contain;
2857+ filter : grayscale (100% );
2858+ transition : var (--transition );
2859+ }
2860+ .svg-picker-item : hover img ,
2861+ .svg-picker-item .selected img {
2862+ filter : grayscale (0% );
2863+ }
2864+ .svg-picker-item span {
2865+ font-size : 0.6rem ;
2866+ color : var (--text-secondary );
2867+ text-align : center;
2868+ line-height : 1.1 ;
2869+ overflow : hidden;
2870+ text-overflow : ellipsis;
2871+ white-space : nowrap;
2872+ max-width : 44px ;
2873+ }
2874+ .svg-picker-empty {
2875+ text-align : center;
2876+ padding : 20px 12px ;
2877+ color : var (--text-secondary );
2878+ font-size : 0.82rem ;
2879+ }
2880+ .logo-preview-box {
2881+ margin-top : 8px ;
2882+ display : flex;
2883+ align-items : center;
2884+ gap : 10px ;
2885+ padding : 8px 12px ;
2886+ background : var (--bg-tertiary );
2887+ border-radius : var (--radius-md );
2888+ border : 1px solid var (--border );
2889+ }
2890+ .logo-preview-box img {
2891+ max-width : 48px ;
2892+ max-height : 48px ;
2893+ object-fit : contain;
2894+ border-radius : 4px ;
2895+ }
2896+ .logo-preview-box .logo-preview-label {
2897+ font-size : 0.8rem ;
2898+ color : var (--text-secondary );
2899+ }
2900+ .logo-preview-box .logo-preview-clear {
2901+ margin-left : auto;
2902+ background : none;
2903+ border : none;
2904+ color : var (--text-secondary );
2905+ cursor : pointer;
2906+ padding : 4px ;
2907+ border-radius : 4px ;
2908+ display : flex;
2909+ align-items : center;
2910+ }
2911+ .logo-preview-box .logo-preview-clear : hover {
2912+ color : var (--accent-red );
2913+ background : rgba (239 , 68 , 68 , 0.1 );
2914+ }
27582915
0 commit comments