mirror of
https://github.com/MichMich/MagicMirror.git
synced 2025-07-03 14:26:07 +00:00
3a2a52c864
1. Base your pull requests against the `develop` branch. Done 2. Include these infos in the description: - Does the pull request solve a **related** issue? No - If so, can you reference the issue like this `Fixes #<issue_number>`? N/A - What does the pull request accomplish? Use a list if needed. With some combinations of sunrise and sunset times (usually when the time till rise/set is >9:59), the information will break across multiple lines. This prevents that by adding CSS. - If it includes major visual changes please add screenshots. I don't consider it major. 3. Please run `npm run lint:prettier` before submitting so that style issues are fixed. Done 4. Don't forget to add an entry about your changes to the CHANGELOG.md file. Done --------- Co-authored-by: veeck <gitkraken@veeck.de>
119 lines
2.1 KiB
CSS
119 lines
2.1 KiB
CSS
.clock-grid {
|
|
display: inline-flex;
|
|
gap: 15px;
|
|
}
|
|
|
|
.clock-grid-left {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.clock-grid-right {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.clock-grid-top {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.clock-grid-bottom {
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
.clock-circle {
|
|
place-self: center;
|
|
position: relative;
|
|
border-radius: 50%;
|
|
background-size: 100%;
|
|
}
|
|
|
|
.clock-face {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.clock-face::after {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 6px;
|
|
height: 6px;
|
|
margin: -3px 0 0 -3px;
|
|
background: var(--color-text-bright);
|
|
border-radius: 3px;
|
|
content: "";
|
|
display: block;
|
|
}
|
|
|
|
.clock-hour {
|
|
width: 0;
|
|
height: 0;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin: -2px 0 -2px -25%; /* numbers must match negative length & thickness */
|
|
padding: 2px 0 2px 25%; /* indicator length & thickness */
|
|
background: var(--color-text-bright);
|
|
transform-origin: 100% 50%;
|
|
border-radius: 3px 0 0 3px;
|
|
}
|
|
|
|
.clock-minute {
|
|
width: 0;
|
|
height: 0;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin: -35% -2px 0; /* numbers must match negative length & thickness */
|
|
padding: 35% 2px 0; /* indicator length & thickness */
|
|
background: var(--color-text-bright);
|
|
transform-origin: 50% 100%;
|
|
border-radius: 3px 0 0 3px;
|
|
}
|
|
|
|
.clock-second {
|
|
width: 0;
|
|
height: 0;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin: -38% -1px 0 0; /* numbers must match negative length & thickness */
|
|
padding: 38% 1px 0 0; /* indicator length & thickness */
|
|
|
|
/* background: #888888 !important; */
|
|
|
|
/* use this instead of secondsColor */
|
|
|
|
/* have to use !important, because the code explicitly sets the color currently */
|
|
transform-origin: 50% 100%;
|
|
}
|
|
|
|
.module.clock .digital {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
}
|
|
|
|
.module.clock .sun,
|
|
.module.clock .moon {
|
|
display: flex;
|
|
white-space: nowrap;
|
|
gap: 10px;
|
|
}
|
|
|
|
.module.clock .sun > *,
|
|
.module.clock .moon > * {
|
|
flex: 1;
|
|
}
|
|
|
|
.module.clock .clock-hour-digital {
|
|
color: var(--color-text-bright);
|
|
}
|
|
|
|
.module.clock .clock-minute-digital {
|
|
color: var(--color-text-bright);
|
|
}
|
|
|
|
.module.clock .clock-second-digital {
|
|
color: var(--color-text-dimmed);
|
|
}
|