Settings to more closely emulate Google Photos #550
Description
I spent some time editing a custom.css to make ImmichFrame more closely emulate the look of the Nest Hub Google Photos screensaver. I thought I would share them here in case others wanted to do the same. Whether it's just for other user's reference or if they can be incorporated into the ImmichFrame code - either way that's fine with me. I assume the current default layout was made with the intention of emulating the look of the Photos Screensaver?
Example:
custom.css:
/* ===========================================
FONT IMPORT (must be at top)
=========================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;600&display=swap');
/* ===========================================
GLOBAL CLOCK STYLES
=========================================== */
/* Apply Google-style font, color, and tighter letter-spacing */
#clock, #photodate {
font-family: 'Inter', sans-serif;
letter-spacing: -0.05em;
}
/* Align all clock elements to the left */
#clock {
text-align: left;
}
/* ===========================================
CLOCK DATE
=========================================== */
#clockdate {
text-align: left;
margin-left: 0.3rem; /* Align left edge with clocktime */
opacity: 0.85; /* Slightly transparent like Google's style */
font-weight: 200;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
/* ===========================================
CLOCK TIME
=========================================== */
#clocktime {
display: inline-block; /* Allow time and weather to sit side by side */
margin-top: -0.25rem; /* Reduce vertical gap between date and time */
font-weight: 300;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
}
/* ===========================================
WEATHER DISPLAY
=========================================== */
#clockweather {
display: inline-block; /* Sit beside clocktime */
vertical-align: middle;
margin-left: -0.5rem; /* Reduce horizontal gap between time and weather */
}
#clockweatherinfo {
transform: scale(0.85); /* Reduce overall scale of weather info */
font-weight: 300;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
/* Hide location text (e.g., "San Francisco,") */
div.weather-location {
display: none;
}
/* Fine-tune vertical alignment of temperature text */
.weather-temperature {
position: relative;
top: 1px;
}
/* Adjust weather icon position (icon has built-in whitespace) */
img.icon-weather {
margin-right: -0.15rem; /* Reduce gap between icon and temperature */
position: relative;
top: -2px; /* Nudge icon up for better alignment */
}
/* Replace "°C" with just "°" */
.weather-unit {
font-size: 0; /* Hide original text */
}
.weather-unit::before {
content: "°";
font-size: 1.25rem;
}
/* Responsive font sizes for the degree symbol */
@media (min-width: 768px) {
.weather-unit::before {
font-size: 1.5rem;
}
}
@media (min-width: 1024px) {
.weather-unit::before {
font-size: 1.875rem;
}
}
/* ===========================================
PHOTO DATE
=========================================== */
#photodate {
padding-bottom: 0.98rem; /* Align baseline with clocktime */
font-weight: 200;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
/* Hide calendar icon */
#photodate .info-icon {
display: none;
}
settings.yml:
General:
DownloadImages: false
RenewImagesDuration: 30
RefreshAlbumPeopleInterval: 12
PhotoDateFormat: "LL-dd-yyyy"
ImageLocationFormat: "City,State,Country"
UnitSystem: "metric"
Webhook: null
Language: en
Interval: 45
TransitionDuration: 2
ShowClock: true
ClockFormat: "h:mm"
ShowProgressBar: false
ShowPhotoDate: true
ShowImageDesc: false
ShowPeopleDesc: false
ShowAlbumName: false
ShowImageLocation: false
PrimaryColor: "#FFFFFF"
SecondaryColor: "#000000"
Style: none
BaseFontSize: '17px'
ShowWeatherDescription: false
ImageZoom: true
ImagePan: false
ImageFill: false
Layout: splitview