nodebb-plugin-sso-biogrenci 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/static/style.less CHANGED
@@ -1,76 +1,198 @@
1
- // bi'öğrenci Fırsatlar Page
2
- .biogrenci-page {
3
- max-width: 1200px;
4
- margin: 0 auto;
5
- padding: 20px;
6
- }
7
-
8
- .biogrenci-header {
1
+ // ============================================
2
+ // bi'öğrenci Plugin Styles
3
+ // ============================================
4
+
5
+ @biogrenci-primary: #1a73e8;
6
+ @biogrenci-primary-dark: #1557b0;
7
+ @biogrenci-success: #2e7d32;
8
+ @biogrenci-warning: #e65100;
9
+ @biogrenci-bg: #f8f9fa;
10
+ @biogrenci-border: #e8eaed;
11
+ @biogrenci-text: #202124;
12
+ @biogrenci-text-secondary: #5f6368;
13
+ @biogrenci-radius: 12px;
14
+ @biogrenci-radius-sm: 8px;
15
+ @biogrenci-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
16
+ @biogrenci-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
17
+
18
+ // ============================================
19
+ // Hero Section
20
+ // ============================================
21
+ .biogrenci-hero {
22
+ background: linear-gradient(135deg, @biogrenci-primary 0%, #4285f4 50%, #6ea8fe 100%);
23
+ border-radius: @biogrenci-radius;
24
+ padding: 48px 24px;
25
+ margin-bottom: 32px;
9
26
  text-align: center;
10
- margin-bottom: 30px;
27
+ color: #fff;
28
+ position: relative;
29
+ overflow: hidden;
11
30
 
12
- .biogrenci-logo {
13
- width: 48px;
14
- height: 48px;
15
- margin-bottom: 10px;
31
+ &::before {
32
+ content: '';
33
+ position: absolute;
34
+ top: -50%;
35
+ right: -20%;
36
+ width: 300px;
37
+ height: 300px;
38
+ background: rgba(255, 255, 255, 0.06);
39
+ border-radius: 50%;
40
+ }
41
+
42
+ &::after {
43
+ content: '';
44
+ position: absolute;
45
+ bottom: -30%;
46
+ left: -10%;
47
+ width: 200px;
48
+ height: 200px;
49
+ background: rgba(255, 255, 255, 0.04);
50
+ border-radius: 50%;
51
+ }
52
+
53
+ .biogrenci-hero-content {
54
+ position: relative;
55
+ z-index: 1;
56
+ }
57
+
58
+ .biogrenci-hero-icon {
59
+ width: 72px;
60
+ height: 72px;
61
+ background: rgba(255, 255, 255, 0.2);
62
+ border-radius: 50%;
63
+ display: flex;
64
+ align-items: center;
65
+ justify-content: center;
66
+ margin: 0 auto 16px;
67
+ backdrop-filter: blur(8px);
68
+
69
+ i {
70
+ font-size: 32px;
71
+ color: #fff;
72
+ }
16
73
  }
17
74
 
18
75
  h2 {
19
- margin: 0 0 5px;
76
+ margin: 0 0 8px;
20
77
  font-size: 28px;
21
78
  font-weight: 700;
79
+ letter-spacing: -0.5px;
22
80
  }
23
81
 
24
82
  .biogrenci-subtitle {
25
- color: #666;
26
83
  margin: 0;
84
+ opacity: 0.9;
85
+ font-size: 15px;
27
86
  }
28
87
  }
29
88
 
30
- .biogrenci-filters {
89
+ // ============================================
90
+ // Page Container
91
+ // ============================================
92
+ .biogrenci-page {
93
+ max-width: 1200px;
94
+ margin: 0 auto;
95
+ padding: 20px;
96
+ }
97
+
98
+ // ============================================
99
+ // Toolbar (Search + Filters + Sort)
100
+ // ============================================
101
+ .biogrenci-toolbar {
31
102
  display: flex;
32
103
  gap: 12px;
33
104
  align-items: center;
34
- margin-bottom: 24px;
105
+ margin-bottom: 28px;
35
106
  flex-wrap: wrap;
107
+ background: #fff;
108
+ padding: 16px;
109
+ border-radius: @biogrenci-radius;
110
+ box-shadow: @biogrenci-shadow;
111
+ border: 1px solid @biogrenci-border;
112
+ }
36
113
 
37
- .biogrenci-search {
38
- flex: 1;
39
- min-width: 200px;
40
-
41
- input {
42
- border-radius: 8px;
43
- }
114
+ .biogrenci-search {
115
+ flex: 1;
116
+ min-width: 200px;
117
+ position: relative;
118
+
119
+ i {
120
+ position: absolute;
121
+ left: 12px;
122
+ top: 50%;
123
+ transform: translateY(-50%);
124
+ color: @biogrenci-text-secondary;
125
+ font-size: 14px;
44
126
  }
45
127
 
46
- .biogrenci-filter-buttons {
47
- display: flex;
48
- gap: 6px;
49
- }
128
+ input {
129
+ padding-left: 36px;
130
+ border-radius: @biogrenci-radius-sm;
131
+ border: 1px solid @biogrenci-border;
132
+ height: 40px;
133
+ transition: border-color 0.2s, box-shadow 0.2s;
50
134
 
51
- #biogrenci-sort {
52
- width: auto;
53
- border-radius: 8px;
135
+ &:focus {
136
+ border-color: @biogrenci-primary;
137
+ box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15);
138
+ }
54
139
  }
55
140
  }
56
141
 
142
+ .biogrenci-filter-buttons {
143
+ display: flex;
144
+ gap: 6px;
145
+ }
146
+
57
147
  .biogrenci-filter {
58
148
  border-radius: 20px !important;
59
- padding: 6px 16px;
149
+ padding: 7px 16px;
60
150
  font-size: 13px;
61
- border: 1px solid #ddd;
151
+ font-weight: 500;
152
+ border: 1px solid @biogrenci-border;
62
153
  background: #fff;
154
+ color: @biogrenci-text-secondary;
63
155
  cursor: pointer;
64
- transition: all 0.2s;
156
+ transition: all 0.2s ease;
157
+ white-space: nowrap;
158
+
159
+ i {
160
+ margin-right: 4px;
161
+ font-size: 12px;
162
+ }
65
163
 
66
- &.active,
67
164
  &:hover {
68
- background: #1a73e8;
165
+ background: @biogrenci-bg;
166
+ border-color: #dadce0;
167
+ color: @biogrenci-text;
168
+ }
169
+
170
+ &.active {
171
+ background: @biogrenci-primary;
69
172
  color: #fff;
70
- border-color: #1a73e8;
173
+ border-color: @biogrenci-primary;
174
+ box-shadow: 0 2px 6px rgba(26, 115, 232, 0.3);
71
175
  }
72
176
  }
73
177
 
178
+ #biogrenci-sort {
179
+ width: auto;
180
+ min-width: 140px;
181
+ border-radius: @biogrenci-radius-sm;
182
+ border: 1px solid @biogrenci-border;
183
+ height: 40px;
184
+ color: @biogrenci-text-secondary;
185
+ cursor: pointer;
186
+
187
+ &:focus {
188
+ border-color: @biogrenci-primary;
189
+ box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15);
190
+ }
191
+ }
192
+
193
+ // ============================================
194
+ // Card Grid
195
+ // ============================================
74
196
  .biogrenci-grid {
75
197
  display: grid;
76
198
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
@@ -78,76 +200,129 @@
78
200
  }
79
201
 
80
202
  .biogrenci-card {
81
- border: 1px solid #e0e0e0;
82
- border-radius: 12px;
203
+ border: 1px solid @biogrenci-border;
204
+ border-radius: @biogrenci-radius;
83
205
  overflow: hidden;
84
206
  background: #fff;
85
- transition: box-shadow 0.2s, transform 0.2s;
207
+ transition: box-shadow 0.25s ease, transform 0.25s ease;
208
+ display: flex;
209
+ flex-direction: column;
86
210
 
87
211
  &:hover {
88
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
89
- transform: translateY(-2px);
212
+ box-shadow: @biogrenci-shadow-hover;
213
+ transform: translateY(-4px);
90
214
  }
91
215
 
92
216
  .biogrenci-card-img {
93
- height: 160px;
217
+ height: 170px;
94
218
  overflow: hidden;
95
- background: #f5f5f5;
219
+ background: @biogrenci-bg;
220
+ display: flex;
221
+ align-items: center;
222
+ justify-content: center;
96
223
 
97
224
  img {
98
225
  width: 100%;
99
226
  height: 100%;
100
227
  object-fit: cover;
228
+ transition: transform 0.3s ease;
229
+ }
230
+
231
+ &:hover img {
232
+ transform: scale(1.05);
233
+ }
234
+ }
235
+
236
+ .biogrenci-card-img-placeholder {
237
+ background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%);
238
+
239
+ i {
240
+ color: @biogrenci-primary;
241
+ opacity: 0.3;
101
242
  }
102
243
  }
103
244
 
104
245
  .biogrenci-card-body {
105
- padding: 16px;
246
+ padding: 20px;
247
+ display: flex;
248
+ flex-direction: column;
249
+ flex: 1;
106
250
  }
107
251
 
108
252
  .biogrenci-card-top {
109
253
  display: flex;
110
254
  align-items: center;
111
255
  gap: 8px;
112
- margin-bottom: 8px;
256
+ margin-bottom: 10px;
113
257
  }
114
258
 
115
259
  .biogrenci-card-title {
116
260
  font-size: 16px;
117
261
  font-weight: 600;
118
262
  margin: 0 0 8px;
119
- line-height: 1.3;
263
+ line-height: 1.4;
264
+ color: @biogrenci-text;
120
265
  }
121
266
 
122
267
  .biogrenci-card-desc {
123
268
  font-size: 13px;
124
- color: #666;
125
- margin: 0 0 12px;
269
+ color: @biogrenci-text-secondary;
270
+ margin: 0 0 16px;
126
271
  display: -webkit-box;
127
272
  -webkit-line-clamp: 2;
128
273
  -webkit-box-orient: vertical;
129
274
  overflow: hidden;
275
+ line-height: 1.5;
276
+ flex: 1;
130
277
  }
131
278
 
132
279
  .biogrenci-claim-btn {
133
280
  width: 100%;
134
- border-radius: 8px;
281
+ border-radius: @biogrenci-radius-sm;
135
282
  font-weight: 600;
136
- background: #1a73e8;
283
+ font-size: 14px;
284
+ background: @biogrenci-primary;
285
+ color: #fff;
137
286
  border: none;
138
- padding: 10px;
287
+ padding: 11px 16px;
288
+ transition: background 0.2s, box-shadow 0.2s;
289
+ margin-top: auto;
290
+
291
+ i {
292
+ margin-right: 6px;
293
+ }
294
+
295
+ &:hover {
296
+ background: @biogrenci-primary-dark;
297
+ box-shadow: 0 2px 8px rgba(26, 115, 232, 0.35);
298
+ color: #fff;
299
+ }
300
+
301
+ &:active {
302
+ transform: scale(0.98);
303
+ }
304
+
305
+ &.claimed {
306
+ background: @biogrenci-success;
307
+ cursor: default;
308
+ }
139
309
  }
140
310
  }
141
311
 
312
+ // ============================================
313
+ // Badges
314
+ // ============================================
142
315
  .biogrenci-badge {
143
316
  font-size: 11px;
144
- padding: 3px 10px;
317
+ padding: 4px 10px;
145
318
  border-radius: 12px;
146
319
  font-weight: 600;
320
+ letter-spacing: 0.2px;
321
+ white-space: nowrap;
147
322
 
148
323
  &.badge-kupon {
149
324
  background: #e8f5e9;
150
- color: #2e7d32;
325
+ color: @biogrenci-success;
151
326
  }
152
327
 
153
328
  &.badge-qr {
@@ -157,15 +332,19 @@
157
332
 
158
333
  &.badge-affiliate {
159
334
  background: #fff3e0;
160
- color: #e65100;
335
+ color: @biogrenci-warning;
161
336
  }
162
337
  }
163
338
 
164
339
  .biogrenci-brand {
165
340
  font-size: 12px;
166
341
  color: #999;
342
+ font-weight: 500;
167
343
  }
168
344
 
345
+ // ============================================
346
+ // Coupon / QR Results
347
+ // ============================================
169
348
  .biogrenci-coupon-result {
170
349
  display: flex;
171
350
  align-items: center;
@@ -174,49 +353,147 @@
174
353
 
175
354
  .biogrenci-coupon-code {
176
355
  background: #f0f7ff;
177
- border: 2px dashed #1a73e8;
356
+ border: 2px dashed @biogrenci-primary;
178
357
  padding: 8px 16px;
179
- border-radius: 8px;
358
+ border-radius: @biogrenci-radius-sm;
180
359
  font-weight: 700;
181
- font-size: 16px;
182
- letter-spacing: 1px;
183
- font-family: monospace;
360
+ font-size: 15px;
361
+ letter-spacing: 1.5px;
362
+ font-family: 'Courier New', monospace;
363
+ color: @biogrenci-primary;
364
+ }
365
+
366
+ .biogrenci-copy-btn {
367
+ background: @biogrenci-bg;
368
+ border: 1px solid @biogrenci-border;
369
+ border-radius: @biogrenci-radius-sm;
370
+ padding: 8px 12px;
371
+ color: @biogrenci-text-secondary;
372
+ transition: all 0.2s;
373
+
374
+ &:hover {
375
+ background: @biogrenci-primary;
376
+ color: #fff;
377
+ border-color: @biogrenci-primary;
378
+ }
379
+ }
380
+
381
+ .biogrenci-go-btn {
382
+ color: @biogrenci-primary;
383
+ font-weight: 600;
384
+ font-size: 13px;
385
+ text-decoration: none;
386
+
387
+ &:hover {
388
+ text-decoration: underline;
389
+ }
184
390
  }
185
391
  }
186
392
 
187
393
  .biogrenci-qr-result {
188
394
  text-align: center;
189
- padding: 10px;
395
+ padding: 16px;
396
+ background: #fff;
397
+ border-radius: @biogrenci-radius-sm;
190
398
 
191
- svg {
399
+ svg, img {
192
400
  max-width: 200px;
193
401
  height: auto;
194
402
  }
195
403
  }
196
404
 
405
+ // ============================================
406
+ // Loading & Empty States
407
+ // ============================================
197
408
  .biogrenci-loading,
198
409
  .biogrenci-empty {
199
410
  grid-column: 1 / -1;
200
411
  text-align: center;
201
- padding: 60px 20px;
202
- color: #999;
203
- font-size: 16px;
412
+ padding: 80px 20px;
413
+ color: @biogrenci-text-secondary;
414
+
415
+ i {
416
+ display: block;
417
+ margin-bottom: 16px;
418
+ opacity: 0.4;
419
+ }
420
+
421
+ h4 {
422
+ margin: 0 0 8px;
423
+ font-weight: 600;
424
+ color: @biogrenci-text;
425
+ }
426
+
427
+ p {
428
+ margin: 0;
429
+ font-size: 14px;
430
+ }
204
431
  }
205
432
 
433
+ .biogrenci-error i {
434
+ color: #d93025;
435
+ }
436
+
437
+ .biogrenci-spinner {
438
+ width: 40px;
439
+ height: 40px;
440
+ border: 3px solid @biogrenci-border;
441
+ border-top-color: @biogrenci-primary;
442
+ border-radius: 50%;
443
+ margin: 0 auto 16px;
444
+ animation: biogrenci-spin 0.8s linear infinite;
445
+ }
446
+
447
+ @keyframes biogrenci-spin {
448
+ to { transform: rotate(360deg); }
449
+ }
450
+
451
+ // ============================================
452
+ // Pagination
453
+ // ============================================
206
454
  .biogrenci-pagination {
207
455
  display: flex;
208
456
  justify-content: center;
209
457
  align-items: center;
210
458
  gap: 16px;
211
- margin-top: 30px;
459
+ margin-top: 32px;
212
460
  padding: 20px 0;
213
461
 
214
462
  #biogrenci-page-info {
215
463
  font-weight: 600;
464
+ color: @biogrenci-text-secondary;
465
+ font-size: 14px;
216
466
  }
217
467
  }
218
468
 
469
+ .biogrenci-page-btn {
470
+ border-radius: @biogrenci-radius-sm !important;
471
+ padding: 8px 20px;
472
+ font-weight: 500;
473
+ border: 1px solid @biogrenci-border;
474
+ background: #fff;
475
+ color: @biogrenci-text;
476
+ transition: all 0.2s;
477
+
478
+ i {
479
+ font-size: 12px;
480
+ }
481
+
482
+ &:hover:not(:disabled) {
483
+ background: @biogrenci-primary;
484
+ color: #fff;
485
+ border-color: @biogrenci-primary;
486
+ }
487
+
488
+ &:disabled {
489
+ opacity: 0.4;
490
+ cursor: not-allowed;
491
+ }
492
+ }
493
+
494
+ // ============================================
219
495
  // Profile Section
496
+ // ============================================
220
497
  .biogrenci-profile-section {
221
498
  max-width: 600px;
222
499
  margin: 0 auto;
@@ -224,62 +501,64 @@
224
501
 
225
502
  .biogrenci-profile-card {
226
503
  background: #fff;
227
- border: 1px solid #e0e0e0;
228
- border-radius: 12px;
229
- padding: 30px;
504
+ border: 1px solid @biogrenci-border;
505
+ border-radius: @biogrenci-radius;
506
+ padding: 40px 30px;
230
507
  text-align: center;
508
+ box-shadow: @biogrenci-shadow;
231
509
 
232
510
  .biogrenci-profile-icon {
233
- width: 64px;
234
- height: 64px;
235
- background: #e8f0fe;
511
+ width: 72px;
512
+ height: 72px;
513
+ background: linear-gradient(135deg, #e8f0fe, #d2e3fc);
236
514
  border-radius: 50%;
237
515
  display: flex;
238
516
  align-items: center;
239
517
  justify-content: center;
240
- margin: 0 auto 16px;
518
+ margin: 0 auto 20px;
241
519
 
242
520
  i {
243
- font-size: 28px;
244
- color: #1a73e8;
521
+ font-size: 30px;
522
+ color: @biogrenci-primary;
245
523
  }
246
524
  }
247
525
 
248
526
  h3 {
249
- margin: 0 0 20px;
527
+ margin: 0 0 24px;
250
528
  font-weight: 600;
529
+ color: @biogrenci-text;
251
530
  }
252
531
  }
253
532
 
254
533
  .biogrenci-linked {
255
534
  .biogrenci-linked-badge {
256
- display: inline-block;
535
+ display: inline-flex;
536
+ align-items: center;
537
+ gap: 6px;
257
538
  background: #e8f5e9;
258
- color: #2e7d32;
259
- padding: 8px 20px;
260
- border-radius: 20px;
539
+ color: @biogrenci-success;
540
+ padding: 10px 24px;
541
+ border-radius: 24px;
261
542
  font-weight: 600;
262
543
  font-size: 15px;
263
- margin-bottom: 12px;
264
-
265
- i { margin-right: 6px; }
544
+ margin-bottom: 16px;
266
545
  }
267
546
 
268
547
  .biogrenci-verified-badge {
269
- display: inline-block;
548
+ display: inline-flex;
549
+ align-items: center;
550
+ gap: 4px;
270
551
  background: #fff3e0;
271
- color: #e65100;
552
+ color: @biogrenci-warning;
272
553
  padding: 6px 16px;
273
554
  border-radius: 20px;
274
555
  font-size: 13px;
275
556
  font-weight: 600;
276
557
  margin-bottom: 12px;
277
-
278
- i { margin-right: 4px; }
279
558
  }
280
559
 
281
560
  .biogrenci-education {
282
- color: #555;
561
+ color: @biogrenci-text-secondary;
283
562
  font-size: 14px;
284
563
  margin-bottom: 8px;
285
564
 
@@ -290,31 +569,50 @@
290
569
  }
291
570
 
292
571
  hr {
293
- margin: 20px 0;
294
- border-color: #eee;
572
+ margin: 24px 0;
573
+ border-color: @biogrenci-border;
295
574
  }
296
575
  }
297
576
 
298
577
  .biogrenci-not-linked {
299
578
  p {
300
579
  margin: 0 0 12px;
580
+ color: @biogrenci-text-secondary;
301
581
  }
302
582
 
303
583
  .btn-primary {
304
- background: #1a73e8;
584
+ background: @biogrenci-primary;
305
585
  border: none;
306
- border-radius: 8px;
307
- padding: 10px 24px;
586
+ border-radius: @biogrenci-radius-sm;
587
+ padding: 12px 28px;
308
588
  font-weight: 600;
589
+ font-size: 15px;
590
+ transition: background 0.2s, box-shadow 0.2s;
309
591
 
310
- i { margin-right: 6px; }
592
+ i { margin-right: 8px; }
593
+
594
+ &:hover {
595
+ background: @biogrenci-primary-dark;
596
+ box-shadow: 0 2px 8px rgba(26, 115, 232, 0.35);
597
+ }
311
598
  }
312
599
  }
313
600
 
601
+ // ============================================
314
602
  // Responsive
315
- @media (max-width: 600px) {
316
- .biogrenci-filters {
603
+ // ============================================
604
+ @media (max-width: 768px) {
605
+ .biogrenci-hero {
606
+ padding: 32px 16px;
607
+
608
+ h2 {
609
+ font-size: 22px;
610
+ }
611
+ }
612
+
613
+ .biogrenci-toolbar {
317
614
  flex-direction: column;
615
+ gap: 10px;
318
616
 
319
617
  .biogrenci-search {
320
618
  width: 100%;
@@ -322,10 +620,34 @@
322
620
 
323
621
  .biogrenci-filter-buttons {
324
622
  flex-wrap: wrap;
623
+ width: 100%;
624
+ }
625
+
626
+ #biogrenci-sort {
627
+ width: 100%;
325
628
  }
326
629
  }
327
630
 
328
631
  .biogrenci-grid {
329
632
  grid-template-columns: 1fr;
330
633
  }
634
+
635
+ .biogrenci-profile-card {
636
+ padding: 24px 16px;
637
+ }
638
+ }
639
+
640
+ @media (max-width: 480px) {
641
+ .biogrenci-page {
642
+ padding: 12px;
643
+ }
644
+
645
+ .biogrenci-hero {
646
+ padding: 24px 12px;
647
+ border-radius: @biogrenci-radius-sm;
648
+ }
649
+
650
+ .biogrenci-filter i {
651
+ display: none;
652
+ }
331
653
  }