surtic86andClaude Opus 5
202813a1e6
A percentage padding is of the containing block's width, and the hero phone is positioned absolutely in the hero visual at a quarter of its width, so its 3.4% bezel came out four times too thick. The bezel is now the screen's margin, a percentage of the phone's own width wherever the phone sits; the gallery phones look as before. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
130 lines
3.5 KiB
CSS
130 lines
3.5 KiB
CSS
/*
|
||
* Device frames drawn around SealShare's screenshots: a laptop for the desktop captures
|
||
* (1512 × 982, a MacBook 14 viewport) and a phone for the phone captures (393 × 852, an iPhone 15
|
||
* Pro viewport). The screen keeps the capture's aspect ratio, so the frame holds its shape while an
|
||
* image loads. The screenshots come from `composer screenshots` (tests/Screenshots/).
|
||
*
|
||
* The bezels and the deck are hardware, drawn in fixed tints of their own; what shows through the
|
||
* screen before an image paints and the shadow under a device are colour roles from theme.css, which
|
||
* must be loaded first. Dark follows <html data-theme>, and the system setting without JavaScript.
|
||
*
|
||
* <div class="device device--laptop">
|
||
* <div class="device__screen"><picture>…<img …></picture></div>
|
||
* </div>
|
||
*/
|
||
|
||
.device {
|
||
--bezel: #1b1530;
|
||
--bezel-edge: #3a3355;
|
||
--deck: #c9c2dd;
|
||
--deck-shadow: #8f88a8;
|
||
--device-shadow: color-mix(in srgb, var(--md-sys-color-shadow) 40%, transparent);
|
||
|
||
position: relative;
|
||
width: 100%;
|
||
}
|
||
|
||
:root[data-theme="dark"] .device {
|
||
--bezel: #05020f;
|
||
--bezel-edge: #2a2244;
|
||
--deck: #4b426a;
|
||
--deck-shadow: #231649;
|
||
}
|
||
|
||
@media (prefers-color-scheme: dark) {
|
||
:root:not([data-theme]) .device {
|
||
--bezel: #05020f;
|
||
--bezel-edge: #2a2244;
|
||
--deck: #4b426a;
|
||
--deck-shadow: #231649;
|
||
}
|
||
}
|
||
|
||
.device__screen {
|
||
position: relative;
|
||
overflow: hidden;
|
||
background-color: var(--md-sys-color-surface-container-high);
|
||
}
|
||
|
||
.device__screen img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
object-position: top center;
|
||
}
|
||
|
||
/* ---------------------------------------------------------------- laptop */
|
||
|
||
.device--laptop {
|
||
padding-bottom: 3.2%;
|
||
margin-inline: 4%;
|
||
width: auto;
|
||
}
|
||
|
||
.device--laptop .device__lid {
|
||
position: relative;
|
||
padding: 2.4% 2.4% 3%;
|
||
border-radius: 3.2% 3.2% 0 0 / 4.8% 4.8% 0 0;
|
||
background: var(--bezel);
|
||
box-shadow: inset 0 0 0 1px var(--bezel-edge), 0 24px 48px -24px var(--device-shadow);
|
||
}
|
||
|
||
.device--laptop .device__screen {
|
||
aspect-ratio: 1512 / 982;
|
||
border-radius: 0.6%;
|
||
}
|
||
|
||
/* The camera notch at the top of the lid. */
|
||
.device--laptop .device__lid::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0.9%;
|
||
left: 50%;
|
||
width: 1%;
|
||
aspect-ratio: 1;
|
||
border-radius: 50%;
|
||
background: var(--bezel-edge);
|
||
translate: -50% 0;
|
||
}
|
||
|
||
/* The deck: wider than the lid, with a thumb recess in the middle. */
|
||
.device--laptop::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset-inline: -4%;
|
||
bottom: 0;
|
||
height: 3.2%;
|
||
border-radius: 0 0 40% 40% / 0 0 100% 100%;
|
||
background: linear-gradient(var(--deck), var(--deck-shadow));
|
||
}
|
||
|
||
.device--laptop::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: 1.8%;
|
||
z-index: 1;
|
||
width: 14%;
|
||
height: 1.4%;
|
||
border-radius: 0 0 var(--md-sys-shape-corner-md) var(--md-sys-shape-corner-md);
|
||
background: var(--deck-shadow);
|
||
translate: -50% 0;
|
||
}
|
||
|
||
/* ---------------------------------------------------------------- phone */
|
||
|
||
/* The bezel is the screen's margin, not the phone's padding: a percentage margin is of the phone's
|
||
own width, where a padding would be of whatever the phone is positioned in (the hero). */
|
||
.device--phone {
|
||
display: flow-root;
|
||
border-radius: 15% / 7%;
|
||
background: var(--bezel);
|
||
box-shadow: inset 0 0 0 2px var(--bezel-edge), 0 24px 48px -20px var(--device-shadow);
|
||
}
|
||
|
||
.device--phone .device__screen {
|
||
margin: 3.4%;
|
||
aspect-ratio: 393 / 852;
|
||
border-radius: 12.5% / 5.8%;
|
||
}
|