wagtail-cjkcms 24.10.1__py2.py3-none-any.whl → 24.12.2__py2.py3-none-any.whl

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.
Files changed (31) hide show
  1. cjkcms/.DS_Store +0 -0
  2. cjkcms/__init__.py +1 -1
  3. cjkcms/blocks/__init__.py +2 -0
  4. cjkcms/blocks/content/countdown.py +116 -0
  5. cjkcms/models/admin_sidebar.py +4 -1
  6. cjkcms/models/snippet_models.py +22 -7
  7. cjkcms/static/vendor/simplycountdown/css/circle.css +73 -0
  8. cjkcms/static/vendor/simplycountdown/css/cyber.css +155 -0
  9. cjkcms/static/vendor/simplycountdown/css/dark.css +85 -0
  10. cjkcms/static/vendor/simplycountdown/css/light.css +85 -0
  11. cjkcms/static/vendor/simplycountdown/css/losange.css +83 -0
  12. cjkcms/static/vendor/simplycountdown/js/simplyCountdown.umd.js +2 -0
  13. cjkcms/static/vendor/simplycountdown/js/simplyCountdown.umd.js.map +1 -0
  14. cjkcms/templates/.DS_Store +0 -0
  15. cjkcms/templates/cjkcms/.DS_Store +0 -0
  16. cjkcms/templates/cjkcms/blocks/button_block.html +1 -1
  17. cjkcms/templates/cjkcms/blocks/countdown.html +24 -0
  18. cjkcms/templates/cjkcms/pages/search.html +5 -0
  19. cjkcms/templatetags/cjkcms_tags.py +17 -6
  20. cjkcms/tests/media/images/test.original.png +0 -0
  21. cjkcms/tests/media/original_images/test.png +0 -0
  22. cjkcms/tests/test_countdown_block.py +100 -0
  23. cjkcms/tests/test_search_blocks.py +10 -10
  24. cjkcms/tests/test_urls.py +8 -6
  25. cjkcms/views.py +52 -43
  26. {wagtail_cjkcms-24.10.1.dist-info → wagtail_cjkcms-24.12.2.dist-info}/METADATA +1 -1
  27. {wagtail_cjkcms-24.10.1.dist-info → wagtail_cjkcms-24.12.2.dist-info}/RECORD +31 -16
  28. {wagtail_cjkcms-24.10.1.dist-info → wagtail_cjkcms-24.12.2.dist-info}/WHEEL +1 -1
  29. {wagtail_cjkcms-24.10.1.dist-info → wagtail_cjkcms-24.12.2.dist-info}/LICENSE +0 -0
  30. {wagtail_cjkcms-24.10.1.dist-info → wagtail_cjkcms-24.12.2.dist-info}/entry_points.txt +0 -0
  31. {wagtail_cjkcms-24.10.1.dist-info → wagtail_cjkcms-24.12.2.dist-info}/top_level.txt +0 -0
cjkcms/.DS_Store ADDED
Binary file
cjkcms/__init__.py CHANGED
@@ -1,4 +1,4 @@
1
- VERSION = (24, 10, 1, "")
1
+ VERSION = (24, 12, 2, "")
2
2
 
3
3
  __version_info__ = VERSION
4
4
  __version__ = ".".join(map(str, VERSION[:3])) + (f"-{VERSION[3]}" if VERSION[3] else "")
cjkcms/blocks/__init__.py CHANGED
@@ -34,6 +34,7 @@ from .content_blocks import ( # noqa
34
34
  HighlightBlock,
35
35
  )
36
36
  from .content.events import PublicEventBlock, EventCalendarBlock
37
+ from .content.countdown import CountdownBlock
37
38
  from .layout_blocks import CardGridBlock, GridBlock, HeroBlock
38
39
  from cjkcms.settings import cms_settings
39
40
 
@@ -77,6 +78,7 @@ CONTENT_STREAMBLOCKS = HTML_STREAMBLOCKS + [
77
78
  ("reusable_content", ReusableContentBlock()),
78
79
  ("event_calendar", EventCalendarBlock()),
79
80
  ("highlight", HighlightBlock()),
81
+ ("countdown", CountdownBlock()),
80
82
  ]
81
83
 
82
84
  NAVIGATION_STREAMBLOCKS = [
@@ -0,0 +1,116 @@
1
+ from cjkcms.blocks.base_blocks import BaseBlock
2
+ from wagtail import blocks
3
+ from django.utils.translation import gettext_lazy as _
4
+ from datetime import datetime, timedelta, timezone
5
+ import re
6
+
7
+
8
+ def convert_to_utc(naive_dt, utc_offset_str):
9
+ # Parse the UTC offset string (e.g., "UTC+05:30" or "UTC-02:00")
10
+ match = re.match(r"UTC([+-])(\d{2}):(\d{2})", utc_offset_str)
11
+ if not match:
12
+ raise ValueError("Invalid UTC offset format. Use 'UTC±HH:MM'.")
13
+
14
+ sign = match.group(1)
15
+ hours = int(match.group(2))
16
+ minutes = int(match.group(3))
17
+
18
+ # Calculate the total offset in minutes
19
+ total_offset = timedelta(hours=hours, minutes=minutes)
20
+ if sign == "-":
21
+ total_offset = -total_offset
22
+
23
+ # Create a timezone with the given offset
24
+ tz = timezone(total_offset)
25
+
26
+ # Attach the offset to the naive datetime, making it timezone-aware
27
+ aware_local_dt = naive_dt.replace(tzinfo=tz)
28
+
29
+ # Convert the timezone-aware datetime to UTC
30
+ utc_dt = aware_local_dt.astimezone(timezone.utc)
31
+
32
+ return utc_dt
33
+
34
+
35
+ class CountdownBlock(BaseBlock):
36
+ """
37
+ Display a countdown to a specific date
38
+ """
39
+
40
+ title = blocks.CharBlock(
41
+ required=False,
42
+ max_length=255,
43
+ label=_("Title"),
44
+ )
45
+
46
+ start_date = blocks.DateTimeBlock(
47
+ required=True,
48
+ label=_("Start date and time"),
49
+ help_text=_("Format: YYYY-MM-DD HH:MM"),
50
+ )
51
+
52
+ timezone = blocks.CharBlock(
53
+ required=True,
54
+ default="UTC",
55
+ max_length=255,
56
+ label=_("Timezone"),
57
+ help_text=_("Timezone relative to UTC, e.g. UTC+01:00"),
58
+ )
59
+
60
+ url = blocks.URLBlock(
61
+ max_length=255,
62
+ label=_("Link"),
63
+ required=False,
64
+ help_text=_("Optional link"),
65
+ )
66
+
67
+ # hide_after_end_date = blocks.BooleanBlock(
68
+ # required=False,
69
+ # default=False,
70
+ # label=_("Hide after end date"),
71
+ # help_text=_("Hide this after end date, or show zeros if false"),
72
+ # )
73
+
74
+ theme = blocks.ChoiceBlock(
75
+ choices=[
76
+ ("light", _("Light")),
77
+ ("dark", _("Dark")),
78
+ ("cyber", _("Cyberpunk")),
79
+ ("losange", _("Losange")),
80
+ ("circle", _("Circle")),
81
+ # ("flipbook", _("Flipbook")),
82
+ ],
83
+ default="light",
84
+ label=_("Theme"),
85
+ )
86
+
87
+ def get_context(self, value, parent_context=None):
88
+ context = super().get_context(value, parent_context=parent_context)
89
+ sd = value.get("start_date")
90
+
91
+ naive_datetime = datetime(
92
+ sd.year, sd.month, sd.day, sd.hour, sd.minute
93
+ ) # Naive datetime
94
+
95
+ tz = value.get("timezone")
96
+ if tz == "UTC" or tz == "":
97
+ tz = "UTC+00:00"
98
+
99
+ utc_offset_string = tz # String containing UTC offset
100
+ utc = convert_to_utc(naive_datetime, utc_offset_string)
101
+
102
+ # print(naive_datetime, utc, utc_offset_string)
103
+ context["year"] = utc.year
104
+ context["month"] = utc.month
105
+ context["day"] = utc.day
106
+ context["hour"] = utc.hour
107
+ context["minute"] = utc.minute
108
+ context["second"] = 0
109
+ return context
110
+
111
+ class Meta:
112
+ template = "cjkcms/blocks/countdown.html"
113
+ icon = "history"
114
+ label = "Countdown"
115
+ ordering = ["start_date"]
116
+ label_format = _("Countdown to {start_date}")
@@ -1,4 +1,4 @@
1
- from .snippet_models import Navbar, EventCalendar
1
+ from .snippet_models import Navbar, NavbarForm, EventCalendar
2
2
  from wagtail.snippets.views.snippets import SnippetViewSet
3
3
 
4
4
 
@@ -16,6 +16,9 @@ class NavbarSnippet(SnippetViewSet):
16
16
  "name",
17
17
  ]
18
18
 
19
+ def get_form_class(self, for_update=False):
20
+ return NavbarForm
21
+
19
22
 
20
23
  class EventCalendarSnippet(SnippetViewSet):
21
24
  model = EventCalendar
@@ -25,6 +25,7 @@ from django.conf import settings
25
25
  from cjkcms.fields import CjkcmsStreamField
26
26
  from wagtail_color_panel.fields import ColorField
27
27
  from wagtail_color_panel.edit_handlers import NativeColorPanel
28
+ from django.forms import ModelForm
28
29
 
29
30
 
30
31
  @register_snippet
@@ -342,7 +343,7 @@ class Navbar(models.Model):
342
343
  language = models.CharField(
343
344
  blank=True,
344
345
  max_length=10,
345
- choices=[("_all_", _("All languages"))],
346
+ choices=[],
346
347
  default="_all_",
347
348
  verbose_name=_("Show in language"),
348
349
  help_text=_("Select a language to limit display to specific locale."),
@@ -371,24 +372,38 @@ class Navbar(models.Model):
371
372
  def __str__(self):
372
373
  return self.name
373
374
 
375
+ @staticmethod
376
+ def get_available_langs():
377
+ available_langs = [("_all_", _("All languages"))]
378
+ if hasattr(settings, "WAGTAIL_CONTENT_LANGUAGES"):
379
+ available_langs += settings.WAGTAIL_CONTENT_LANGUAGES
380
+ return available_langs
381
+
374
382
  def __init__(self, *args, **kwargs):
375
383
  """
376
384
  Inject custom choices and defaults into the form fields
377
385
  to enable customization of settings without causing migration issues.
378
386
  """
379
387
  super().__init__(*args, **kwargs)
380
- # Set choices dynamically.
381
-
382
- available_langs = [("_all_", _("All languages"))]
383
- if hasattr(settings, "WAGTAIL_CONTENT_LANGUAGES"):
384
- available_langs += settings.WAGTAIL_CONTENT_LANGUAGES
385
388
 
386
- self._meta.get_field("language").choices = available_langs # type: ignore
389
+ self._meta.get_field("language").choices = Navbar.get_available_langs() # type: ignore
387
390
  # Set default dynamically.
388
391
  if not self.id: # type: ignore
389
392
  self.language = "_all_"
390
393
 
391
394
 
395
+ class NavbarForm(ModelForm):
396
+ class Meta:
397
+ model = Navbar
398
+ fields = "__all__"
399
+
400
+ def __init__(self, *args, **kwargs):
401
+ super().__init__(*args, **kwargs)
402
+
403
+ # Set the dynamic choices
404
+ self.fields["language"].choices = Navbar.get_available_langs()
405
+
406
+
392
407
  @register_snippet
393
408
  class Footer(models.Model):
394
409
  """
@@ -0,0 +1,73 @@
1
+ .simply-countdown-circle {
2
+ --sc-circle-primary: #6366f1;
3
+ --sc-circle-secondary: #818cf8;
4
+ --sc-circle-bg: #1e1b4b;
5
+ --sc-circle-text: #fff;
6
+
7
+ display: flex;
8
+ flex-wrap: wrap;
9
+ justify-content: center;
10
+ gap: 1.5rem;
11
+ font-family: "Inter", sans-serif;
12
+ }
13
+
14
+ .simply-countdown-circle > .simply-section {
15
+ position: relative;
16
+ width: 100px;
17
+ height: 100px;
18
+ padding: 1rem;
19
+ display: flex;
20
+ align-items: center;
21
+ justify-content: center;
22
+ flex-direction: column;
23
+ border-radius: 50%;
24
+ background: linear-gradient(45deg, var(--sc-circle-primary), var(--sc-circle-secondary));
25
+ box-shadow: 0 0 25px -5px var(--sc-circle-primary);
26
+ animation: pulse-circle 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
27
+ }
28
+
29
+ .simply-countdown-circle > .simply-section::before {
30
+ content: "";
31
+ position: absolute;
32
+ inset: 6px;
33
+ border-radius: 50%;
34
+ background: var(--sc-circle-bg);
35
+ z-index: 0;
36
+ }
37
+
38
+ .simply-countdown-circle > .simply-section > div {
39
+ position: relative;
40
+ z-index: 1;
41
+ color: var(--sc-circle-text);
42
+ text-align: center;
43
+ }
44
+
45
+ .simply-countdown-circle .simply-amount {
46
+ display: block;
47
+ font-size: 1.75rem;
48
+ font-weight: 700;
49
+ line-height: 1;
50
+ background: linear-gradient(to right, var(--sc-circle-primary), var(--sc-circle-secondary));
51
+ -webkit-background-clip: text;
52
+ background-clip: text;
53
+ -webkit-text-fill-color: transparent;
54
+ }
55
+
56
+ .simply-countdown-circle .simply-word {
57
+ font-size: 0.7rem;
58
+ text-transform: uppercase;
59
+ letter-spacing: 0.05em;
60
+ opacity: 0.8;
61
+ }
62
+
63
+ @keyframes pulse-circle {
64
+ 0%,
65
+ 100% {
66
+ transform: scale(1);
67
+ opacity: 1;
68
+ }
69
+ 50% {
70
+ transform: scale(0.98);
71
+ opacity: 0.9;
72
+ }
73
+ }
@@ -0,0 +1,155 @@
1
+ /**
2
+ * Project : simply-countdown
3
+ * File : simplyCountdown.theme.cyberpunk
4
+ * Author : Vincent Loy <vincent.loy1@gmail.com>
5
+ * Theme : Modern Cyberpunk
6
+ */
7
+
8
+ .simply-countdown-cyber {
9
+ overflow: visible;
10
+ display: flex;
11
+ flex-wrap: wrap;
12
+ justify-content: center;
13
+ gap: 1.75rem;
14
+ font-family: "Inter", system-ui, -apple-system, sans-serif;
15
+ perspective: 1000px;
16
+ }
17
+
18
+ .simply-countdown-cyber > .simply-section {
19
+ width: 70px;
20
+ height: 70px;
21
+ padding: 1.5rem;
22
+ position: relative;
23
+ display: flex;
24
+ align-items: center;
25
+ justify-content: center;
26
+ background: linear-gradient(135deg, rgba(23, 25, 35, 0.9), rgba(15, 17, 25, 0.95));
27
+ border-radius: 0.5rem;
28
+ transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
29
+ backdrop-filter: blur(12px);
30
+ transform-style: preserve-3d;
31
+ }
32
+
33
+ .simply-countdown-cyber > .simply-section::before {
34
+ content: "";
35
+ position: absolute;
36
+ inset: -1px;
37
+ background: linear-gradient(135deg, rgba(120, 240, 255, 0.2), rgba(255, 90, 220, 0.2));
38
+ border-radius: 0.5rem;
39
+ z-index: -1;
40
+ opacity: 0;
41
+ transition: opacity 0.3s ease;
42
+ }
43
+
44
+ .simply-countdown-cyber > .simply-section::after {
45
+ content: "";
46
+ position: absolute;
47
+ inset: -2px;
48
+ background: linear-gradient(135deg, #78f0ff, #ff5adc);
49
+ border-radius: 0.5rem;
50
+ z-index: -2;
51
+ opacity: 0.15;
52
+ filter: blur(4px);
53
+ animation: pulse 4s ease-in-out infinite;
54
+ }
55
+
56
+ .simply-countdown-cyber > .simply-section .glass-overlay {
57
+ position: absolute;
58
+ inset: 0;
59
+ background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
60
+ border-radius: 0.5rem;
61
+ }
62
+
63
+ .simply-countdown-cyber > .simply-section:hover {
64
+ transform: translateY(-4px) translateZ(10px) rotateX(5deg);
65
+ box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5), 0 0 20px rgba(120, 240, 255, 0.2), 0 0 0 1px rgba(120, 240, 255, 0.1);
66
+ }
67
+
68
+ .simply-countdown-cyber > .simply-section:hover::before {
69
+ opacity: 1;
70
+ }
71
+
72
+ .simply-countdown-cyber > .simply-section > div {
73
+ display: flex;
74
+ flex-direction: column;
75
+ gap: 0.4rem;
76
+ align-items: center;
77
+ transform-style: preserve-3d;
78
+ }
79
+
80
+ .simply-countdown-cyber > .simply-section .simply-amount {
81
+ font-size: 1.75rem;
82
+ font-weight: 700;
83
+ background: linear-gradient(to bottom right, #78f0ff, #ff5adc);
84
+ -webkit-background-clip: text;
85
+ background-clip: text;
86
+ color: transparent;
87
+ text-shadow: 0 0 20px rgba(120, 240, 255, 0.3), 0 0 40px rgba(120, 240, 255, 0.2);
88
+ letter-spacing: -0.02em;
89
+ transform: translateZ(10px);
90
+ }
91
+
92
+ .simply-countdown-cyber > .simply-section .simply-word {
93
+ font-size: 0.6rem;
94
+ font-weight: 500;
95
+ text-transform: uppercase;
96
+ letter-spacing: 0.2em;
97
+ color: rgba(255, 255, 255, 0.7);
98
+ transform: translateZ(5px);
99
+ position: relative;
100
+ }
101
+
102
+ .simply-countdown-cyber > .simply-section .simply-word::after {
103
+ content: "";
104
+ position: absolute;
105
+ left: -10%;
106
+ bottom: -4px;
107
+ width: 120%;
108
+ height: 1px;
109
+ background: linear-gradient(to right, rgba(120, 240, 255, 0), rgba(120, 240, 255, 0.5), rgba(255, 90, 220, 0.5), rgba(255, 90, 220, 0));
110
+ }
111
+
112
+ @media (min-width: 640px) {
113
+ .simply-countdown-cyber > .simply-section {
114
+ width: 80px;
115
+ height: 80px;
116
+ padding: 1.75rem;
117
+ }
118
+
119
+ .simply-countdown-cyber > .simply-section .simply-amount {
120
+ font-size: 2rem;
121
+ }
122
+
123
+ .simply-countdown-cyber > .simply-section .simply-word {
124
+ font-size: 0.75rem;
125
+ }
126
+ }
127
+
128
+ @media (min-width: 1024px) {
129
+ .simply-countdown-cyber > .simply-section {
130
+ width: 100px;
131
+ height: 100px;
132
+ padding: 2rem;
133
+ }
134
+
135
+ .simply-countdown-cyber > .simply-section .simply-amount {
136
+ font-size: 2.5rem;
137
+ }
138
+
139
+ .simply-countdown-cyber > .simply-section .simply-word {
140
+ font-size: 0.8rem;
141
+ }
142
+ }
143
+
144
+ /* Add subtle animation for extra futuristic feel */
145
+ @keyframes pulse {
146
+ 0%,
147
+ 100% {
148
+ opacity: 0.15;
149
+ transform: scale(1);
150
+ }
151
+ 50% {
152
+ opacity: 0.25;
153
+ transform: scale(1.05);
154
+ }
155
+ }
@@ -0,0 +1,85 @@
1
+ /**
2
+ * Project : simply-countdown
3
+ * File : simplyCountdown.theme.dark
4
+ * Author : Vincent Loy <vincent.loy1@gmail.com>
5
+ * Theme : Dark Modern
6
+ */
7
+
8
+ .simply-countdown-dark {
9
+ overflow: hidden;
10
+ display: flex;
11
+ flex-wrap: wrap;
12
+ justify-content: center;
13
+ gap: 1.25rem;
14
+ font-family: "Inter", system-ui, -apple-system, sans-serif;
15
+ }
16
+
17
+ .simply-countdown-dark > .simply-section {
18
+ width: 65px;
19
+ height: 65px;
20
+ padding: 1.5rem;
21
+ display: flex;
22
+ align-items: center;
23
+ justify-content: center;
24
+ background: rgba(15, 23, 42, 0.75);
25
+ border: 1px solid rgba(51, 65, 85, 0.6);
26
+ border-radius: 1rem;
27
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.05);
28
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
29
+ backdrop-filter: blur(10px);
30
+ }
31
+
32
+ .simply-countdown-dark > .simply-section > div {
33
+ display: flex;
34
+ flex-direction: column;
35
+ line-height: 1;
36
+ align-items: center;
37
+ }
38
+
39
+ .simply-countdown-dark > .simply-section .simply-amount {
40
+ font-size: 1.5rem;
41
+ font-weight: 700;
42
+ color: #f1f5f9;
43
+ line-height: 1.2;
44
+ letter-spacing: -0.025em;
45
+ }
46
+
47
+ .simply-countdown-dark > .simply-section .simply-word {
48
+ font-size: 0.6rem;
49
+ font-weight: 500;
50
+ color: #94a3b8;
51
+ text-transform: uppercase;
52
+ letter-spacing: 0.1em;
53
+ }
54
+
55
+ @media (min-width: 640px) {
56
+ .simply-countdown-dark > .simply-section {
57
+ width: 75px;
58
+ height: 75px;
59
+ padding: 1.75rem;
60
+ }
61
+
62
+ .simply-countdown-dark > .simply-section .simply-amount {
63
+ font-size: 1.75rem;
64
+ }
65
+
66
+ .simply-countdown-dark > .simply-section .simply-word {
67
+ font-size: 0.75rem;
68
+ }
69
+ }
70
+
71
+ @media (min-width: 1024px) {
72
+ .simply-countdown-dark > .simply-section {
73
+ width: 90px;
74
+ height: 90px;
75
+ padding: 2rem;
76
+ }
77
+
78
+ .simply-countdown-dark > .simply-section .simply-amount {
79
+ font-size: 2rem;
80
+ }
81
+
82
+ .simply-countdown-dark > .simply-section .simply-word {
83
+ font-size: 0.8rem;
84
+ }
85
+ }
@@ -0,0 +1,85 @@
1
+ /**
2
+ * Project : simply-countdown
3
+ * File : simplyCountdown.theme.default
4
+ * Author : Vincent Loy <vincent.loy1@gmail.com>
5
+ * Theme : Light Modern
6
+ */
7
+
8
+ .simply-countdown-light {
9
+ overflow: hidden;
10
+ display: flex;
11
+ flex-wrap: wrap;
12
+ justify-content: center;
13
+ gap: 1.25rem;
14
+ font-family: "Inter", system-ui, -apple-system, sans-serif;
15
+ }
16
+
17
+ .simply-countdown-light > .simply-section {
18
+ width: 65px;
19
+ height: 65px;
20
+ padding: 1.5rem;
21
+ display: flex;
22
+ align-items: center;
23
+ justify-content: center;
24
+ background: rgba(255, 255, 255, 0.9);
25
+ border: 1px solid rgba(226, 232, 240, 0.8);
26
+ border-radius: 1rem;
27
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03), 0 0 0 1px rgba(0, 0, 0, 0.02);
28
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
29
+ backdrop-filter: blur(10px);
30
+ }
31
+
32
+ .simply-countdown-light > .simply-section > div {
33
+ display: flex;
34
+ flex-direction: column;
35
+ line-height: 1;
36
+ align-items: center;
37
+ }
38
+
39
+ .simply-countdown-light > .simply-section .simply-amount {
40
+ font-size: 1.5rem;
41
+ font-weight: 700;
42
+ color: #1e293b;
43
+ line-height: 1.2;
44
+ letter-spacing: -0.025em;
45
+ }
46
+
47
+ .simply-countdown-light > .simply-section .simply-word {
48
+ font-size: 0.6rem;
49
+ font-weight: 500;
50
+ color: #64748b;
51
+ text-transform: uppercase;
52
+ letter-spacing: 0.1em;
53
+ }
54
+
55
+ @media (min-width: 640px) {
56
+ .simply-countdown-light > .simply-section {
57
+ width: 75px;
58
+ height: 75px;
59
+ padding: 1.75rem;
60
+ }
61
+
62
+ .simply-countdown-light > .simply-section .simply-amount {
63
+ font-size: 1.75rem;
64
+ }
65
+
66
+ .simply-countdown-light > .simply-section .simply-word {
67
+ font-size: 0.75rem;
68
+ }
69
+ }
70
+
71
+ @media (min-width: 1024px) {
72
+ .simply-countdown-light > .simply-section {
73
+ width: 90px;
74
+ height: 90px;
75
+ padding: 2rem;
76
+ }
77
+
78
+ .simply-countdown-light > .simply-section .simply-amount {
79
+ font-size: 2rem;
80
+ }
81
+
82
+ .simply-countdown-light > .simply-section .simply-word {
83
+ font-size: 0.8rem;
84
+ }
85
+ }
@@ -0,0 +1,83 @@
1
+ /**
2
+ * Project : simply-countdown
3
+ * File : simplyCountdown.theme.losange
4
+ * Author : Vincent Loy <vincent.loy1@gmail.com>
5
+ */
6
+
7
+ .simply-countdown-losange {
8
+ overflow: visible;
9
+ display: flex;
10
+ flex-wrap: wrap;
11
+ justify-content: center;
12
+ gap: 3rem;
13
+ font-family: "Inter", sans-serif;
14
+ }
15
+
16
+ .simply-countdown-losange > .simply-section {
17
+ width: 70px;
18
+ height: 70px;
19
+ display: flex;
20
+ justify-content: center;
21
+ align-items: center;
22
+ transform: rotate(-45deg);
23
+ background: linear-gradient(135deg, #4f46e5, #7c3aed);
24
+ border-radius: 0.5rem;
25
+ transition: all 0.2s ease-in-out;
26
+ }
27
+
28
+ .simply-countdown-losange > .simply-section > div {
29
+ transform: rotate(45deg);
30
+ display: flex;
31
+ flex-direction: column;
32
+ line-height: 1.2;
33
+ }
34
+
35
+ .simply-countdown-losange > .simply-section .simply-amount,
36
+ .simply-countdown-losange > .simply-section .simply-word {
37
+ display: block;
38
+ text-align: center;
39
+ }
40
+
41
+ .simply-countdown-losange > .simply-section .simply-amount {
42
+ font-size: 1.25rem;
43
+ font-weight: 700;
44
+ color: #fff;
45
+ }
46
+
47
+ .simply-countdown-losange > .simply-section .simply-word {
48
+ font-size: 0.65rem;
49
+ font-weight: 500;
50
+ color: rgba(255, 255, 255, 0.9);
51
+ text-transform: uppercase;
52
+ letter-spacing: 0.05em;
53
+ }
54
+
55
+ @media (min-width: 640px) {
56
+ .simply-countdown-losange > .simply-section {
57
+ width: 80px;
58
+ height: 80px;
59
+ }
60
+
61
+ .simply-countdown-losange > .simply-section .simply-amount {
62
+ font-size: 1.5rem;
63
+ }
64
+
65
+ .simply-countdown-losange > .simply-section .simply-word {
66
+ font-size: 0.7rem;
67
+ }
68
+ }
69
+
70
+ @media (min-width: 1024px) {
71
+ .simply-countdown-losange > .simply-section {
72
+ width: 90px;
73
+ height: 90px;
74
+ }
75
+
76
+ .simply-countdown-losange > .simply-section .simply-amount {
77
+ font-size: 1.75rem;
78
+ }
79
+
80
+ .simply-countdown-losange > .simply-section .simply-word {
81
+ font-size: 0.75rem;
82
+ }
83
+ }