99 text-align : center ;
1010 width : 100% ;
1111 margin : 10px ;
12- font-size : 1.1rem ;
13- color : rgba (255 , 255 , 255 , 0.6 );
1412 }
1513
1614 .plugin {
17- width : calc (33.33 % - 20 px );
15+ width : calc (33% - 30 px );
1816 min-width : 250px ;
19- margin : 10px ;
20- background : rgba (255 , 255 , 255 , 0.05 );
21- backdrop-filter : blur (20px );
22- border : 1px solid rgba (255 , 255 , 255 , 0.1 );
17+ margin : 10px 0 0 10px ;
18+ background-color : var (--secondary-color );
2319 color : var (--secondary-text-color );
24- padding : 16 px ;
20+ padding : 10 px ;
2521 text-align : center ;
26- border-radius : 16 px ;
22+ border-radius : 4 px ;
2723 text-decoration : none ;
28- transition : all 0.3s cubic-bezier (0.4 , 0 , 0.2 , 1 );
29- box-sizing : border-box ;
30- display : flex ;
31- flex-direction : column ;
3224
3325 h2 {
34- margin-bottom : 8px ;
35- font-size : 1.1rem ;
36- font-weight : 600 ;
26+ margin-bottom : 5px ;
3727 }
3828
3929 @media screen and (max-width : 925px ) {
40- width : calc (50% - 20 px );
30+ width : calc (50% - 35 px );
4131 }
4232
4333 @media screen and (max-width : 600px ) {
44- width : calc (100% - 20 px );
34+ width : calc (100% - 40 px );
4535 }
4636
4737 & :hover {
48- transform : translateY (-4px );
49- background : rgba (255 , 255 , 255 , 0.08 );
50- border-color : rgba (51 , 153 , 255 , 0.3 );
51- box-shadow : 0 20px 40px rgba (0 , 0 , 0 , 0.3 );
52-
53- .plugin-icon {
54- transform : scale (1.05 );
55- }
38+ box-shadow : -2px 2px 12px 2px rgba ($color : #000000 , $alpha : 0.4 );
5639 }
5740
5841 .plugin-icon {
6245 background-position : center ;
6346 background-size : 100px ;
6447 margin : auto ;
65- border-radius : 16px ;
66- transition : transform 0.3s ease ;
67- }
68-
69- .plugin-info {
70- display : flex ;
71- flex-direction : column ;
72- flex : 1 ;
73-
74- >p {
75- margin : 4px 0 ;
76- font-size : 0.85rem ;
77- color : rgba (255 , 255 , 255 , 0.5 );
78- }
79-
80- >small {
81- font-size : 0.75rem ;
82- color : rgba (255 , 255 , 255 , 0.4 );
83- }
84- }
85-
86- .plugin-actions {
87- margin-top : auto ;
88- padding-top : 12px ;
89- border-top : 1px solid rgba (255 , 255 , 255 , 0.1 );
90- display : flex ;
91- justify-content : center ;
92- align-items : center ;
93- gap : 8px ;
94-
95- & :empty {
96- display : none ;
97- }
98-
99- .action-btn {
100- width : 36px ;
101- height : 36px ;
102- display : flex ;
103- align-items : center ;
104- justify-content : center ;
105- border-radius : 10px ;
106- background : rgba (255 , 255 , 255 , 0.08 );
107- transition : all 0.2s ease ;
108- cursor : pointer ;
109-
110- .icon {
111- margin : 0 ;
112- }
113-
114- & :hover {
115- background : rgba (255 , 255 , 255 , 0.15 );
116- transform : scale (1.1 );
117- }
118-
119- & .btn-delete :hover {
120- background : rgba (255 , 85 , 51 , 0.2 );
121- color : #ff5533 ;
122- }
123-
124- & .btn-edit :hover {
125- background : rgba (51 , 153 , 255 , 0.2 );
126- color : #3399ff ;
127- }
128- }
129-
130- .status-btn {
131- padding : 8px 16px ;
132- border-radius : 8px ;
133- font-size : 0.75rem ;
134- font-weight : 600 ;
135- text-transform : uppercase ;
136- letter-spacing : 0.5px ;
137- cursor : pointer ;
138- transition : all 0.2s ease ;
139-
140- & .pending {
141- background : linear-gradient (135deg , #3399ff 0% , #2277dd 100% );
142- color : white ;
143- border : none ;
144-
145- & :hover {
146- transform : scale (1.05 );
147- box-shadow : 0 4px 12px rgba (51 , 153 , 255 , 0.4 );
148- }
149- }
150-
151- & .approved {
152- background : rgba (51 , 255 , 153 , 0.15 );
153- color : #33ff99 ;
154- border : 1px solid rgba (51 , 255 , 153 , 0.3 );
155-
156- & :hover {
157- background : rgba (51 , 255 , 153 , 0.25 );
158- transform : scale (1.05 );
159- }
160- }
161-
162- & .rejected {
163- background : rgba (255 , 85 , 51 , 0.15 );
164- color : #ff5533 ;
165- border : 1px solid rgba (255 , 85 , 51 , 0.3 );
166-
167- & :hover {
168- background : rgba (255 , 85 , 51 , 0.25 );
169- }
170- }
171- }
172- }
173-
174- .icon-buttons {
175- margin-top : auto ;
176- padding-top : 12px ;
177- border-top : 1px solid rgba (255 , 255 , 255 , 0.1 );
178- display : flex ;
179- justify-content : center ;
180- gap : 8px ;
181-
182- .icon {
183- width : 36px ;
184- height : 36px ;
185- display : flex ;
186- align-items : center ;
187- justify-content : center ;
188- border-radius : 10px ;
189- background : rgba (255 , 255 , 255 , 0.08 );
190- transition : all 0.2s ease ;
191-
192- & :hover {
193- background : rgba (255 , 255 , 255 , 0.15 );
194- transform : scale (1.1 );
195- }
196-
197- & .danger :hover {
198- background : rgba (255 , 85 , 51 , 0.2 );
199- }
200- }
20148 }
20249 }
20350
20451 .info {
20552 display : flex ;
20653 justify-content : center ;
207- flex-wrap : wrap ;
208- gap : 6px 0 ;
20954 cursor : default ;
210- font-size : 0.9rem ;
211- color : rgba (255 , 255 , 255 , 0.7 );
21255
21356 >* :not (:last-child )::after {
21457 content : ' •' ;
21558 font-weight : bolder ;
216- margin : 0 8px ;
217- color : rgba (255 , 255 , 255 , 0.3 );
59+ margin : 0 5px ;
21860 }
21961 }
22062
22163 .status-indicator {
222- text-transform : uppercase ;
64+ text-transform : capitalize ;
22365 cursor : pointer ;
224- padding : 4px 12px ;
225- border-radius : 20px ;
226- font-size : 0.7rem ;
227- font-weight : 600 ;
228- letter-spacing : 0.5px ;
229- transition : all 0.2s ease ;
230-
231- & :hover {
232- transform : scale (1.05 );
233- }
23466 }
23567
23668 .pending {
237- color : #ffaa33 ;
238- background : rgba (255 , 170 , 51 , 0.15 );
239- border : 1px solid rgba (255 , 170 , 51 , 0.3 );
69+ color : #39f ;
24070 }
24171
24272 .approved {
243- color : #33ff99 ;
244- background : rgba (51 , 255 , 153 , 0.15 );
245- border : 1px solid rgba (51 , 255 , 153 , 0.3 );
73+ color : #3f9 ;
24674 }
24775
24876 .deleted ,
24977 .rejected {
250- color : #ff5533 ;
251- background : rgba (255 , 85 , 51 , 0.15 );
252- border : 1px solid rgba (255 , 85 , 51 , 0.3 );
78+ color : #f33 ;
25379 }
25480}
0 commit comments