website/styles.css at main · Startup-Nights/website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    .tito-widget {
        margin: 0 !important;
    }

    /* combination of partner form + facts container */
    .tito-widget .tito-widget-form {
        @apply bg-sn-black-lightest border-2 border-transparent rounded-3xl p-4 md:p-6 lg:p-8 text-gray-200 text-base font-medium leading-6;
    }

    .tito-widget .tito-widget-form input {
        @apply w-full rounded-xl border-white/10 bg-gray-400/10 px-[calc(theme(spacing.3)-1px)] py-[calc(theme(spacing[1.5])-1px)] text-base leading-7 text-gray-200 placeholder-gray-500 shadow-sm focus:border-sn-yellow focus:ring-sn-yellow sm:leading-6;
    }

    /* tax text which has a special color in the original styling */
    .tito-widget .tito-widget-form div.tito-price-details-regular > span.tito-release--tax {
        @apply text-gray-400;
        /* same color but it needs important to work */
        color: rgb(156 163 175) !important;
    }

    /* buttons to increase the ticket count */
    .tito-widget .tito-widget-form .tito-quantity svg[data-icon="plus-circle"] {
        @apply text-sn-yellow-dark;
    }

    /* buttons to decreate the ticket count */
    .tito-widget .tito-widget-form .tito-quantity svg[data-icon="minus-circle"] {
        @apply text-gray-400;
    }

    /* ticket divider (bottom) */
    .tito-widget .tito-widget-form .tito-ticket-release {
        @apply border-b border-gray-400;
    }

    /* submit button padding */
    .tito-widget .tito-widget-form .tito-form-actions {
        @apply pb-0;
    }

    /* submit button */
    .tito-widget .tito-widget-form .tito-submit {
        @apply flex w-full items-center justify-center border-2 border-transparent rounded-xl bg-sn-yellow py-1.5 px-3 text-base font-semibold leading-7 sm:text-sm sm:leading-6 text-black hover:bg-sn-yellow-dark focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 tracking-wide;
    }

    /* discount color */
    .tito-widget .tito-discounted-from {
        @apply text-sn-yellow-dark;
        /* same color but it needs important to work */
        color: #EBB400 !important;
    }

    /* ticket checkmark */
    .tito-widget .tito-quantity [type="checkbox"] {
        @apply bg-sn-black-lightest text-sn-yellow-dark w-5 h-5 rounded-full;
        color: #EBB400 !important;
    }

    .tito-widget .tito-quantity [type="checkbox"]:hover {
        @apply bg-sn-black-light text-sn-yellow-dark;
        background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23EBB400' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e") !important;
        background-repeat: no-repeat;
        background-position: center;
    }

    .tito-widget .tito-quantity [type="checkbox"]:checked {
        background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23EBB400' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e") !important;
        background-repeat: no-repeat;
        background-position: center;
    }

    .tito-widget .tito-discount-code-field::placeholder {
        color: #FDC900 !important;
        @apply font-normal;
    }

    .tito-widget .tito-discount-code-field {
        @apply font-normal;
    }

    .tito-widget .tito-widget-form input {
        --tw-shadow: 0 0 0 0 rgb(0 0 0 / 0.0) !important;
        --tw-shadow-colored: 0 0 0 0 var(--tw-shadow-color) !important;
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        /* @apply bg-sn-black-lightest; */
        background-color: rgb(36, 36, 36) !important;
    }

    /* react photo album gallery */
    .react-photo-album .react-photo-album--photo {
        border-radius: 0.75rem !important;
    }
}