catalog/style.css at main · Imageomics/catalog · 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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

/*
 * These variables are set from config.yaml and can be customized there to override these default backups.
 * Default values (Imageomics colors) are provided as fallbacks.
 */
:root {
    --color-primary: #92991c;
    /* Primary brand color */
    --color-secondary: #5d8095;
    /* Secondary brand color */
    --color-accent: #0097b2;
    /* Accent color */
    --color-accent-dark: #4fd1eb;
    /* Dark mode accent color */
    --color-tag: #9bcb5e;
    /* Tag background color */
    --font-family: 'Inter';
    /* Font family */
}

/* Overall body and typography styles, controlling the font, background color, and text color of the entire page. */
body {
    font-family: var(--font-family, 'Inter'), sans-serif;
    /* Dark gray text */
    color: #1f2937;
}

/* Main content container for centering the content and setting a maximum width. */
.container {
    max-width: 1200px;
}

/* Styles for the main content cards, controlling their background color, border, and transition effects. */
.item-card {
    /* Secondary color border */
    border: 1px solid var(--color-secondary);
    transition: transform 0.2s, box-shadow 0.2s;
}

/* Adds a subtle lift and shadow on hover for a tactile effect. */
.item-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Styling for individual tags, controlling their background color and text color. */
.tag {
    /* Tag color */
    background-color: var(--color-tag);
    /* Dark text for contrast */
    color: #222222;
}

/* Archived badge — matches GitHub's archived repo label style. */
.archived-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #fff8c5;
    border: 1px solid #d4a72c;
    color: #633c01;
}

.dark .archived-badge {
    background-color: #2d2000;
    border-color: #9a6700;
    color: #e3b341;
}

/* Animation for the "New!" badge. */
.new-badge {
    /* Accent color  */
    background-color: var(--color-accent);
    animation: badge-pulse 1.5s infinite;
}

/* Style for the "New Release" badge shown on code repo cards. */
.release-badge {
    background-color: var(--color-accent);
}

/* Defines the pulsating animation for the new badge. */
@keyframes badge-pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

/* Styles for the loading state skeleton cards, controlling their background color and animation. */
.skeleton {
    background-color: #e5e7eb;
    background-image: linear-gradient(90deg, #e5e7eb 0px, #f9fafb 50%, #e5e7eb 100%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite linear;
}

.dark .skeleton {
    background-color: #1f2937;
    background-image: linear-gradient(90deg, #1f2937 0px, #374151 50%, #1f2937 100%);
}

/* Defines the animation for the skeleton cards to simulate loading. */
@keyframes skeleton-loading {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

/* Custom scrollbar for the tag container, controlling its height. */
.tag-container::-webkit-scrollbar {
    height: 6px;
}

/* Styles the scrollbar track, controlling its background color and border radius. */
.tag-container::-webkit-scrollbar-track {
    background-color: #f3f4f6;
    border-radius: 3px;
}

/* Styles the scrollbar thumb (the part you drag), controlling its background color and border radius. */
.tag-container::-webkit-scrollbar-thumb {
    background-color: var(--color-secondary);
    border-radius: 3px;
}

/* Hover state for the scrollbar thumb, changing its background color. */
.tag-container::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-accent);
}

.dark .tag-container::-webkit-scrollbar-track {
    background-color: #374151;
}

/* Changes the thumb (drag handle) to a lighter gray for contrast */
.dark .tag-container::-webkit-scrollbar-thumb {
    background-color: #9ca3af;
}

/* Changes the hover color */
.dark .tag-container::-webkit-scrollbar-thumb:hover {
    background-color: #d1d5db;
}