blob: f4bf0a0112c842e1385a5e4f8c2be4cd4b2bef4e (
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
105
106
107
108
109
110
111
112
|
@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);
@apply scheme-dark;
}
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 {
margin: 48px auto;
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 {
grid-template-columns: repeat(auto-fill, minmax(var(--breakpoint-md), 1fr));
@apply grid w-max m-auto p-8;
}
#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-3 cursor-pointer
data-selected:bg-slate-950 data-selected:hover:bg-slate-900
hover:bg-gray-900
;
}
/* settings */
fieldset {
@apply border rounded-2xl p-6 border-gray-500 flex flex-col gap-4;
}
fieldset h2 {
@apply font-bold text-blue-300 fill-blue-300 text-xl;
}
fieldset label {
@apply font-medium text-blue-200
}
.rounded-input {
@apply rounded-2xl bg-zinc-800 p-4
}
.rounded-button {
@apply rounded-full w-fit bg-blue-200 px-4 py-2 text-black font-medium;
}
#menu a {
@apply flex items-center justify-center no-underline w-full gap-4 p-3 rounded-full
hover:text-blue-300 hover:fill-blue-300
data-selected:text-blue-300 data-selected:fill-blue-300
data-selected:bg-gray-900
;
}
|
