blob: 39e320bcfadc73633e816ac3a5e019b4d8560080 (
plain)
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
|
@import "tailwindcss" source(none);
@source "../public/index.html";
:root {
--font-sans: "Overpass", sans-serif;
--immich-dark-primary: rgb(172 203 250);
--immich-dark-secondary: rgb(33 33 33);
--immich-dark-secondary-border: rgb(33 33 33 / .1);
--selected-bg: rgb(172 203 250 / .1);
--selected-border: rgb(172 203 250 / .1);
--immich-dark-hover-bg: rgb(17 24 39);
--immich-dark-hover-border: rgb(31 41 55);
}
main, #slideshow {
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.svgbtn {
@apply bg-none border-0 p-0 cursor-pointer;
}
/* slideshow */
.carousel-cell {
@apply h-full w-[70vw] m-3 md:w-[80vw] md:m-6;
img {
@apply align-middle h-full max-w-full object-contain;
}
}
#slideshow-share,
#slideshow-bottom-controls {
display: flex;
width: 80vw;
margin: auto;
justify-content: right;
}
#slideshow-bottom-controls {
display: grid;
grid-template-columns: repeat(3, 1fr);
margin: 48px auto;
max-width: 768px;
button {
width: 48px;
height: 48px;
margin: auto;
}
}
/* albums */
#albums {
height: 100%;
overflow: scroll;
margin-inline: 1rem;
}
#album-search {
display: block;
padding: 1rem;
border: 0;
margin: 1rem auto;
width: 100%;
max-width: 768px;
background-color: var(--immich-dark-secondary);
&:focus { outline: 2px solid rgb(55, 65, 81) }
}
#albums-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(768px, 1fr));
width: max-content;
margin: auto;
padding: 2rem;
}
#albums-container .album {
border: 1px solid transparent;
border-bottom: 1px solid var(--selected-border);
border-top: 1px solid var(--selected-border);
@apply flex relative h-40 gap-6 p-4 cursor-pointer
data-selected:bg-slate-950 data-selected:hover:bg-slate-900
hover:bg-gray-900
;
}
@media (max-width: 512px) {
#albums-container {
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
width: 100%;
}
}
#menu a {
@apply flex items-center justify-center no-underline w-full gap-4
hover:text-blue-300 hover:fill-blue-300
data-selected:text-blue-300 data-selected:fill-blue-300
;
}
|
