Link to article: Site-69 II: CSS.
:root {
--header-gradient-color-bottom: 40, 90, 40;
--swatch-topmenu-bg-color: 20, 45, 20;
/* BHL tweaks */
--zero: 0;
/* Base colours for map */
--h: 72;
--l: 60%;
/* https://icon-sets.iconify.design/bx/cctv/ CC BY 4.0 */
--icon-cctv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20.916 9.564a.998.998 0 0 0-.513-1.316L7.328 2.492c-.995-.438-2.22.051-2.645 1.042l-2.21 5.154a2.001 2.001 0 0 0 1.052 2.624L9.563 13.9L8.323 17H4v-3H2v8h2v-3h4.323c.823 0 1.552-.494 1.856-1.258l1.222-3.054l5.205 2.23a1 1 0 0 0 1.31-.517l.312-.71l1.701.68l2-5l-1.536-.613zm-4.434 5.126L4.313 9.475l2.208-5.152l12.162 5.354z'/%3E%3C/svg%3E");
/* https://icon-sets.iconify.design/bx/microphone/ CC BY 4.0 */
--icon-mic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M16 12V6c0-2.217-1.785-4.021-3.979-4.021a.933.933 0 0 0-.209.025A4.006 4.006 0 0 0 8 6v6c0 2.206 1.794 4 4 4s4-1.794 4-4m-6 0V6c0-1.103.897-2 2-2a.89.89 0 0 0 .163-.015C13.188 4.06 14 4.935 14 6v6c0 1.103-.897 2-2 2s-2-.897-2-2'/%3E%3Cpath fill='%23000' d='M6 12H4c0 4.072 3.061 7.436 7 7.931V22h2v-2.069c3.939-.495 7-3.858 7-7.931h-2c0 3.309-2.691 6-6 6s-6-2.691-6-6'/%3E%3C/svg%3E");
/* https://icon-sets.iconify.design/mdi/warning-circle-outline/ Apache 2.0 */
--icon-new: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='2 2 20 20'%3E%3Cpath fill='%23000' d='M11 15h2v2h-2zm0-8h2v6h-2zm1-5C6.47 2 2 6.5 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2m0 18a8 8 0 0 1-8-8a8 8 0 0 1 8-8a8 8 0 0 1 8 8a8 8 0 0 1-8 8'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) {
:root {
scroll-behavior: smooth;
}
}
:root, .map__room, .footage__selector, .footage__period, .footage__display, .footage__display a[href^='#u-'] {
--swatch-gba-dark: hsl(var(--h), var(--sat, 60%), 15%);
--swatch-gba-medium: hsl(var(--h), var(--sat, 30%), 30%);
--swatch-gba-light: hsl(var(--h), var(--sat, 55%), calc(var(--l) + 10%));
--swatch-gba-pale: hsl(var(--h), var(--sat, 80%), var(--l));
--swatch-gba-hpale: hsl(var(--h), var(--sat, 70%), calc(var(--l) + 20%));
}
/* Render either each entry (.footage__display) or the entire set (.footage__period) as a single event, depending on whether event mode or room mode is active.
In room mode, the entire block displays as that room, and all entries are shown in it.
In event mode (#u-all), each entry displays itself, the entire block is undecorated. */
:root:has(.targets #u-hangar:target) .footage__period, :root:not(:has(.targets #u-hangar:target)) .footage__display--hangar,
:root:has(.targets #u-server-room:target) .footage__period, :root:not(:has(.targets #u-server-room:target)) .footage__display--server-room,
:root:has(.targets #u-pantry:target) .footage__period, :root:not(:has(.targets #u-pantry:target)) .footage__display--pantry,
:root:has(.targets #u-cafe:target) .footage__period, :root:not(:has(.targets #u-cafe:target)) .footage__display--cafe,
:root:has(.targets #u-break-room:target) .footage__period, :root:not(:has(.targets #u-break-room:target)) .footage__display--break-room,
:root:has(.targets #u-security:target) .footage__period, :root:not(:has(.targets #u-security:target)) .footage__display--security,
:root:has(.targets #u-records-store:target) .footage__period, :root:not(:has(.targets #u-records-store:target)) .footage__display--records-store,
:root:has(.targets #u-office:target) .footage__period, :root:not(:has(.targets #u-office:target)) .footage__display--office,
:root:has(.targets #u-cell-1:target) .footage__period, :root:not(:has(.targets #u-cell-1:target)) .footage__display--cell-1,
:root:has(.targets #u-cell-2:target) .footage__period, :root:not(:has(.targets #u-cell-2:target)) .footage__display--cell-2,
:root:has(.targets #u-cell-3:target) .footage__period, :root:not(:has(.targets #u-cell-3:target)) .footage__display--cell-3,
:root:has(.targets #u-cell-4:target) .footage__period, :root:not(:has(.targets #u-cell-4:target)) .footage__display--cell-4,
:root:has(.targets #u-cell-5:target) .footage__period, :root:not(:has(.targets #u-cell-5:target)) .footage__display--cell-5,
:root:has(.targets #u-cell-6:target) .footage__period, :root:not(:has(.targets #u-cell-6:target)) .footage__display--cell-6,
:root:has(.targets #u-main-cell:target) .footage__period, :root:not(:has(.targets #u-main-cell:target)) .footage__display--main-cell,
:root:has(.targets #u-main-cell-airlock:target) .footage__period, :root:not(:has(.targets #u-main-cell-airlock:target)) .footage__display--main-cell-airlock,
:root:has(.targets #u-foyer:target) .footage__period, :root:not(:has(.targets #u-foyer:target)) .footage__display--foyer,
:root:has(.targets #u-armoury:target) .footage__period, :root:not(:has(.targets #u-armoury:target)) .footage__display--armoury,
:root:has(.targets #u-storage:target) .footage__period, :root:not(:has(.targets #u-storage:target)) .footage__display--storage,
:root:has(.targets #u-vehicle-bay:target) .footage__period, :root:not(:has(.targets #u-vehicle-bay:target)) .footage__display--vehicle-bay,
:root:has(.targets #u-server-room-corridor:target) .footage__period, :root:not(:has(.targets #u-server-room-corridor:target)) .footage__display--server-room-corridor,
:root:has(.targets #u-offices-corridor:target) .footage__period, :root:not(:has(.targets #u-offices-corridor:target)) .footage__display--offices-corridor,
:root:has(.targets #u-cells-corridor:target) .footage__period, :root:not(:has(.targets #u-cells-corridor:target)) .footage__display--cells-corridor,
:root:has(.targets #u-north-ring-corridor:target) .footage__period, :root:not(:has(.targets #u-north-ring-corridor:target)) .footage__display--north-ring-corridor,
:root:has(.targets #u-east-ring-corridor:target) .footage__period, :root:not(:has(.targets #u-east-ring-corridor:target)) .footage__display--east-ring-corridor,
:root:has(.targets #u-south-ring-corridor:target) .footage__period, :root:not(:has(.targets #u-south-ring-corridor:target)) .footage__display--south-ring-corridor,
:root:has(.targets #u-west-ring-corridor:target) .footage__period, :root:not(:has(.targets #u-west-ring-corridor:target)) .footage__display--west-ring-corridor,
:root:has(.targets #u-armoury-corridor:target) .footage__period, :root:not(:has(.targets #u-armoury-corridor:target)) .footage__display--armoury-corridor,
:root:has(.targets #u-exterior:target) .footage__period, :root:not(:has(.targets #u-exterior:target)) .footage__display--exterior {
display: none;
position: relative;
margin: 1rem 0;
--document-padding-inline: 1.5rem;
padding: 0.5rem var(--document-padding-inline);
border: 0.2rem solid var(--swatch-gba-medium);
border-radius: 0.4rem;
background-color: var(--swatch-gba-hpale);
animation: footage-display-fade 0.2s linear both;
}
.footage__period { display: block !important }
@keyframes footage-display-fade {
0% { opacity: 0.5 }
100% { opacity: 1 }
}
@media (max-width: 700px) {
.footage__display { --document-padding-inline: 0.75rem }
}
.footage__display h2 {
font-family: inherit;
letter-spacing: inherit;
font-weight: 650;
margin-top: 0.75rem;
margin-bottom: 1rem;
font-size: 1.3rem;
}
.footage__display p {
margin-right: -0.5ch;
}
.footage__display--passive p {
font-style: italic;
opacity: 0.7;
}
.footage__display a[href^='#u-'] {
display: inline-block;
vertical-align: 0;
background-color: var(--swatch-gba-hpale);
color: black;
text-decoration: underline 3px var(--swatch-gba-pale);
filter: brightness(1.05);
}
.footage__display a[href^='#u-']:hover {
background-color: white;
color: var(--swatch-gba-dark);
}
.footage__display-start, .footage__display-end {
display: block;
text-align: center;
}
:is(.footage__display-start, .footage__display-end)::before {
font-weight: bold;
opacity: 0.5;
}
.footage__display:not(:has(p:nth-of-type(2))) :is(.footage__display-start, .footage__display-end) {
display: none;
}
/* Footage tags denoting audio / video */
.footage__feed {
text-transform: uppercase;
font-weight: 600;
color: #000c;
font-size: 0.85rem;
letter-spacing: 0.02rem;
background: #0001;
border: thin solid var(--swatch-gba-light);
border-radius: 0.3rem;
padding: 0.3rem 0.7rem 0.3rem 0.3rem;
display: inline-block;
margin-block: 0rem;
float: right;
}
.footage__feed .room-icon {
margin-right: 0.3rem;
}
/* Room colours */
.map__room--pantry, .footage__selector--pantry, .footage__display--pantry, .footage__display a[href='#u-pantry'], :root:has(.targets #u-pantry:target) .footage__period,
.map__room--cafe, .footage__selector--cafe, .footage__display--cafe, .footage__display a[href='#u-cafe'], :root:has(.targets #u-cafe:target) .footage__period,
.map__room--toilet, .footage__selector--toilet, .footage__display--toilet, .footage__display a[href='#u-toilet'], :root:has(.targets #u-toilet:target) .footage__period,
.map__room--foyer, .footage__selector--foyer, .footage__display--foyer, .footage__display a[href='#u-foyer'], :root:has(.targets #u-foyer:target) .footage__period {
--h: 172;
}
.map__room--hangar, .footage__selector--hangar, .footage__display--hangar, .footage__display a[href='#u-hangar'], :root:has(.targets #u-hangar:target) .footage__period,
.map__room--vehicle-bay, .footage__selector--vehicle-bay, .footage__display--vehicle-bay, .footage__display a[href='#u-vehicle-bay'], :root:has(.targets #u-vehicle-bay:target) .footage__period {
--h: 32;
}
.map__room--break-room, .footage__selector--break-room, .footage__display--break-room, .footage__display a[href='#u-break-room'], :root:has(.targets #u-break-room:target) .footage__period,
.map__room--security, .footage__selector--security, .footage__display--security, .footage__display a[href='#u-security'], :root:has(.targets #u-security:target) .footage__period,
.map__room--office, .footage__selector--office, .footage__display--office, .footage__display a[href='#u-office'], :root:has(.targets #u-office:target) .footage__period {
--h: 12;
}
.map__room--cell-1, .footage__selector--cell-1, .footage__display--cell-1, .footage__display a[href='#u-cell-1'], :root:has(.targets #u-cell-1:target) .footage__period,
.map__room--cell-2, .footage__selector--cell-2, .footage__display--cell-2, .footage__display a[href='#u-cell-2'], :root:has(.targets #u-cell-2:target) .footage__period,
.map__room--cell-3, .footage__selector--cell-3, .footage__display--cell-3, .footage__display a[href='#u-cell-3'], :root:has(.targets #u-cell-3:target) .footage__period,
.map__room--cell-4, .footage__selector--cell-4, .footage__display--cell-4, .footage__display a[href='#u-cell-4'], :root:has(.targets #u-cell-4:target) .footage__period,
.map__room--cell-5, .footage__selector--cell-5, .footage__display--cell-5, .footage__display a[href='#u-cell-5'], :root:has(.targets #u-cell-5:target) .footage__period,
.map__room--cell-6, .footage__selector--cell-6, .footage__display--cell-6, .footage__display a[href='#u-cell-6'], :root:has(.targets #u-cell-6:target) .footage__period {
--h: 122;
}
.map__room--main-cell, .footage__selector--main-cell, .footage__display--main-cell, .footage__display a[href='#u-main-cell'], :root:has(.targets #u-main-cell:target) .footage__period,
.map__room--main-cell-airlock, .footage__selector--main-cell-airlock, .footage__display--main-cell-airlock, .footage__display a[href='#u-main-cell-airlock'], :root:has(.targets #u-main-cell-airlock:target) .footage__period {
--h: 252;
--l: 65%;
}
.map__room--records-store, .footage__selector--records-store, .footage__display--records-store, .footage__display a[href='#u-records-store'], :root:has(.targets #u-records-store:target) .footage__period,
.map__room--server-room, .footage__selector--server-room, .footage__display--server-room, .footage__display a[href='#u-server-room'], :root:has(.targets #u-server-room:target) .footage__period,
.map__room--armoury, .footage__selector--armoury, .footage__display--armoury, .footage__display a[href='#u-armoury'], :root:has(.targets #u-armoury:target) .footage__period,
.map__room--storage, .footage__selector--storage, .footage__display--storage, .footage__display a[href='#u-storage'], :root:has(.targets #u-storage:target) .footage__period {
--h: 52;
--l: 65%;
}
.footage__selector--exterior, .footage__display--exterior, .footage__display a[href='#u-exterior'], :root:has(.targets #u-exterior:target) .footage__period {
--h: 190;
background: radial-gradient(ellipse at bottom, white, white, rgb(225, 240, 255));
}
.footage__display--exterior, .footage__display a[href='#u-exterior'], :root:has(.targets #u-exterior:target) .footage__period {
box-shadow:
inset 0px 0px 8rem 0rem #00000001,
inset 0px 0px 5rem 0rem #00000002,
inset 0px 0px 2rem 0rem #00000003;
}
.footage__selector--all {
--sat: 0%;
}
.footage__display :is([href='#u-server-room-corridor'], [href='#u-offices-corridor'], [href='#u-cells-corridor'], [href='#u-armoury-corridor'], [href='#u-north-ring-corridor'], [href='#u-east-ring-corridor'], [href='#u-south-ring-corridor'], [href='#u-west-ring-corridor']) {
/* Reset corridor links to default colour */
--h: 72;
}
/* Map/footage hover links */
:root:has([href='#u-pantry']:hover) .map__room--pantry,
:root:has([href='#u-storage']:hover) .map__room--storage,
:root:has([href='#u-foyer']:hover) .map__room--foyer,
:root:has([href='#u-hangar']:hover) .map__room--hangar,
:root:has([href='#u-server-room']:hover) .map__room--server-room,
:root:has([href='#u-cafe']:hover) .map__room--cafe,
:root:has([href='#u-cell-1']:hover) .map__room--cell-1,
:root:has([href='#u-cell-2']:hover) .map__room--cell-2,
:root:has([href='#u-cell-3']:hover) .map__room--cell-3,
:root:has([href='#u-cell-4']:hover) .map__room--cell-4,
:root:has([href='#u-cell-5']:hover) .map__room--cell-5,
:root:has([href='#u-cell-6']:hover) .map__room--cell-6,
:root:has([href='#u-armoury']:hover) .map__room--armoury,
:root:has([href='#u-toilet']:hover) .map__room--toilet,
:root:has([href='#u-vehicle-bay']:hover) .map__room--vehicle-bay,
:root:has([href='#u-main-cell']:hover) .map__room--main-cell,
:root:has([href='#u-main-cell-airlock']:hover) .map__room--main-cell-airlock,
:root:has([href='#u-office']:hover) .map__room--office,
:root:has([href='#u-security']:hover) .map__room--security,
:root:has([href='#u-records-store']:hover) .map__room--records-store,
:root:has([href='#u-break-room']:hover) .map__room--break-room,
:root:has([href='#u-offices-corridor']:hover) .map__room--offices-corridor,
:root:has([href='#u-server-room-corridor']:hover) .map__room--server-room-corridor,
:root:has([href='#u-cells-corridor']:hover) .map__room--cells-corridor,
:root:has([href='#u-north-ring-corridor']:hover) .map__room--north-ring-corridor,
:root:has([href='#u-east-ring-corridor']:hover) .map__room--east-ring-corridor,
:root:has([href='#u-south-ring-corridor']:hover) .map__room--south-ring-corridor,
:root:has([href='#u-west-ring-corridor']:hover) .map__room--west-ring-corridor,
:root:has([href='#u-armoury-corridor']:hover) .map__room--armoury-corridor,
.map__room:hover {
background: repeating-conic-gradient(white 0% 25%, var(--swatch-gba-hpale) 0% 50%) 50% / 6px 6px;
}
:root:has([href='#u-pantry']:hover) .footage__selector--pantry,
:root:has([href='#u-storage']:hover) .footage__selector--storage,
:root:has([href='#u-foyer']:hover) .footage__selector--foyer,
:root:has([href='#u-hangar']:hover) .footage__selector--hangar,
:root:has([href='#u-server-room']:hover) .footage__selector--server-room,
:root:has([href='#u-cafe']:hover) .footage__selector--cafe,
:root:has([href='#u-cell-1']:hover) .footage__selector--cell-1,
:root:has([href='#u-cell-2']:hover) .footage__selector--cell-2,
:root:has([href='#u-cell-3']:hover) .footage__selector--cell-3,
:root:has([href='#u-cell-4']:hover) .footage__selector--cell-4,
:root:has([href='#u-cell-5']:hover) .footage__selector--cell-5,
:root:has([href='#u-cell-6']:hover) .footage__selector--cell-6,
:root:has([href='#u-armoury']:hover) .footage__selector--armoury,
:root:has([href='#u-toilet']:hover) .footage__selector--toilet,
:root:has([href='#u-vehicle-bay']:hover) .footage__selector--vehicle-bay,
:root:has([href='#u-main-cell']:hover) .footage__selector--main-cell,
:root:has([href='#u-main-cell-airlock']:hover) .footage__selector--main-cell-airlock,
:root:has([href='#u-office']:hover) .footage__selector--office,
:root:has([href='#u-security']:hover) .footage__selector--security,
:root:has([href='#u-records-store']:hover) .footage__selector--records-store,
:root:has([href='#u-break-room']:hover) .footage__selector--break-room,
:root:has([href='#u-offices-corridor']:hover) .footage__selector--offices-corridor,
:root:has([href='#u-server-room-corridor']:hover) .footage__selector--server-room-corridor,
:root:has([href='#u-cells-corridor']:hover) .footage__selector--cells-corridor,
:root:has([href='#u-north-ring-corridor']:hover) .footage__selector--north-ring-corridor,
:root:has([href='#u-east-ring-corridor']:hover) .footage__selector--east-ring-corridor,
:root:has([href='#u-south-ring-corridor']:hover) .footage__selector--south-ring-corridor,
:root:has([href='#u-west-ring-corridor']:hover) .footage__selector--west-ring-corridor,
:root:has([href='#u-armoury-corridor']:hover) .footage__selector--armoury-corridor,
:root:has([href='#u-exterior']:hover) .footage__selector--exterior {
--_shadow-3d-height: 0.2rem;
background-color: white;
}
/* Selected room on the map */
:root:has(.targets [id=u-pantry]:target) .map__room--pantry,
:root:has(.targets [id=u-storage]:target) .map__room--storage,
:root:has(.targets [id=u-foyer]:target) .map__room--foyer,
:root:has(.targets [id=u-hangar]:target) .map__room--hangar,
:root:has(.targets [id=u-server-room]:target) .map__room--server-room,
:root:has(.targets [id=u-cafe]:target) .map__room--cafe,
:root:has(.targets [id=u-cell-1]:target) .map__room--cell-1,
:root:has(.targets [id=u-cell-2]:target) .map__room--cell-2,
:root:has(.targets [id=u-cell-3]:target) .map__room--cell-3,
:root:has(.targets [id=u-cell-4]:target) .map__room--cell-4,
:root:has(.targets [id=u-cell-5]:target) .map__room--cell-5,
:root:has(.targets [id=u-cell-6]:target) .map__room--cell-6,
:root:has(.targets [id=u-armoury]:target) .map__room--armoury,
:root:has(.targets [id=u-toilet]:target) .map__room--toilet,
:root:has(.targets [id=u-vehicle-bay]:target) .map__room--vehicle-bay,
:root:has(.targets [id=u-main-cell]:target) .map__room--main-cell,
:root:has(.targets [id=u-main-cell-airlock]:target) .map__room--main-cell-airlock,
:root:has(.targets [id=u-office]:target) .map__room--office,
:root:has(.targets [id=u-security]:target) .map__room--security,
:root:has(.targets [id=u-records-store]:target) .map__room--records-store,
:root:has(.targets [id=u-break-room]:target) .map__room--break-room,
:root:has(.targets [id=u-offices-corridor]:target) .map__room--offices-corridor,
:root:has(.targets [id=u-server-room-corridor]:target) .map__room--server-room-corridor,
:root:has(.targets [id=u-cells-corridor]:target) .map__room--cells-corridor,
:root:has(.targets [id=u-north-ring-corridor]:target) .map__room--north-ring-corridor,
:root:has(.targets [id=u-east-ring-corridor]:target) .map__room--east-ring-corridor,
:root:has(.targets [id=u-south-ring-corridor]:target) .map__room--south-ring-corridor,
:root:has(.targets [id=u-west-ring-corridor]:target) .map__room--west-ring-corridor,
:root:has(.targets [id=u-armoury-corridor]:target) .map__room--armoury-corridor {
font-weight: bold;
background: var(--swatch-gba-light);
text-decoration: none;
cursor: default;
border: 0.4rem dashed white;
box-sizing: border-box;
}
/* Selected room in the buttons */
:root:has(.targets [id=u-pantry]:target) .footage__selector--pantry,
:root:has(.targets [id=u-storage]:target) .footage__selector--storage,
:root:has(.targets [id=u-foyer]:target) .footage__selector--foyer,
:root:has(.targets [id=u-hangar]:target) .footage__selector--hangar,
:root:has(.targets [id=u-server-room]:target) .footage__selector--server-room,
:root:has(.targets [id=u-cafe]:target) .footage__selector--cafe,
:root:has(.targets [id=u-cell-1]:target) .footage__selector--cell-1,
:root:has(.targets [id=u-cell-2]:target) .footage__selector--cell-2,
:root:has(.targets [id=u-cell-3]:target) .footage__selector--cell-3,
:root:has(.targets [id=u-cell-4]:target) .footage__selector--cell-4,
:root:has(.targets [id=u-cell-5]:target) .footage__selector--cell-5,
:root:has(.targets [id=u-cell-6]:target) .footage__selector--cell-6,
:root:has(.targets [id=u-armoury]:target) .footage__selector--armoury,
:root:has(.targets [id=u-toilet]:target) .footage__selector--toilet,
:root:has(.targets [id=u-vehicle-bay]:target) .footage__selector--vehicle-bay,
:root:has(.targets [id=u-main-cell]:target) .footage__selector--main-cell,
:root:has(.targets [id=u-main-cell-airlock]:target) .footage__selector--main-cell-airlock,
:root:has(.targets [id=u-office]:target) .footage__selector--office,
:root:has(.targets [id=u-security]:target) .footage__selector--security,
:root:has(.targets [id=u-records-store]:target) .footage__selector--records-store,
:root:has(.targets [id=u-break-room]:target) .footage__selector--break-room,
:root:has(.targets [id=u-offices-corridor]:target) .footage__selector--offices-corridor,
:root:has(.targets [id=u-server-room-corridor]:target) .footage__selector--server-room-corridor,
:root:has(.targets [id=u-cells-corridor]:target) .footage__selector--cells-corridor,
:root:has(.targets [id=u-north-ring-corridor]:target) .footage__selector--north-ring-corridor,
:root:has(.targets [id=u-east-ring-corridor]:target) .footage__selector--east-ring-corridor,
:root:has(.targets [id=u-south-ring-corridor]:target) .footage__selector--south-ring-corridor,
:root:has(.targets [id=u-west-ring-corridor]:target) .footage__selector--west-ring-corridor,
:root:has(.targets [id=u-armoury-corridor]:target) .footage__selector--armoury-corridor,
:root:has(.targets [id=u-exterior]:target) .footage__selector--exterior,
:root:has(.targets [id=u-all]:target) .footage__selector--all,
.footage__selector:active {
transform: none;
background-color: var(--swatch-gba-hpale);
color: var(--swatch-gba-dark);
cursor: default;
box-shadow:
0px 0px 0px transparent,
inset 0px 0.2rem 0px 0px var(--swatch-gba-medium);
padding-bottom: 0;
}
/* Rooms mode only / entries mode only text */
:root:has(.targets [id=u-all]:target) .rooms-only,
:root:has(.targets [id=u-all]:not(:target)) :is(
.entries-only,
.footage__display-heading:not(.footage__display--first-of-room .footage__display-heading)
) {
display: none;
}
/* Selected room filter for entries */
:root:has(.targets [id=u-pantry]:target) .footage__display--pantry,
:root:has(.targets [id=u-storage]:target) .footage__display--storage,
:root:has(.targets [id=u-foyer]:target) .footage__display--foyer,
:root:has(.targets [id=u-hangar]:target) .footage__display--hangar,
:root:has(.targets [id=u-server-room]:target) .footage__display--server-room,
:root:has(.targets [id=u-cafe]:target) .footage__display--cafe,
:root:has(.targets [id=u-cell-1]:target) .footage__display--cell-1,
:root:has(.targets [id=u-cell-2]:target) .footage__display--cell-2,
:root:has(.targets [id=u-cell-3]:target) .footage__display--cell-3,
:root:has(.targets [id=u-cell-4]:target) .footage__display--cell-4,
:root:has(.targets [id=u-cell-5]:target) .footage__display--cell-5,
:root:has(.targets [id=u-cell-6]:target) .footage__display--cell-6,
:root:has(.targets [id=u-armoury]:target) .footage__display--armoury,
:root:has(.targets [id=u-toilet]:target) .footage__display--toilet,
:root:has(.targets [id=u-vehicle-bay]:target) .footage__display--vehicle-bay,
:root:has(.targets [id=u-main-cell]:target) .footage__display--main-cell,
:root:has(.targets [id=u-main-cell-airlock]:target) .footage__display--main-cell-airlock,
:root:has(.targets [id=u-office]:target) .footage__display--office,
:root:has(.targets [id=u-security]:target) .footage__display--security,
:root:has(.targets [id=u-records-store]:target) .footage__display--records-store,
:root:has(.targets [id=u-break-room]:target) .footage__display--break-room,
:root:has(.targets [id=u-offices-corridor]:target) .footage__display--offices-corridor,
:root:has(.targets [id=u-server-room-corridor]:target) .footage__display--server-room-corridor,
:root:has(.targets [id=u-cells-corridor]:target) .footage__display--cells-corridor,
:root:has(.targets [id=u-north-ring-corridor]:target) .footage__display--north-ring-corridor,
:root:has(.targets [id=u-east-ring-corridor]:target) .footage__display--east-ring-corridor,
:root:has(.targets [id=u-south-ring-corridor]:target) .footage__display--south-ring-corridor,
:root:has(.targets [id=u-west-ring-corridor]:target) .footage__display--west-ring-corridor,
:root:has(.targets [id=u-armoury-corridor]:target) .footage__display--armoury-corridor,
:root:has(.targets [id=u-exterior]:target) .footage__display--exterior,
:root:has(.targets [id=u-all]:target) .footage__display:not(.footage__display--passive) {
display: block !important;
opacity: 1;
}
/* Show the new event alert in red, but make it black after being clicked */
.footage__selector .room-icon--new {
background-color: transparent;
animation: new-events-notification 2s ease forwards;
animation-play-state: paused;
display: none;
}
@keyframes new-events-notification {
0%, 70% { background-color: #f21a; }
100% { background-color: transparent; }
}
/* Fade out indicator on selected room */
:root:has(.targets [id=u-pantry]:target) .footage__selector--pantry .room-icon--new,
:root:has(.targets [id=u-storage]:target) .footage__selector--storage .room-icon--new,
:root:has(.targets [id=u-foyer]:target) .footage__selector--foyer .room-icon--new,
:root:has(.targets [id=u-hangar]:target) .footage__selector--hangar .room-icon--new,
:root:has(.targets [id=u-server-room]:target) .footage__selector--server-room .room-icon--new,
:root:has(.targets [id=u-cafe]:target) .footage__selector--cafe .room-icon--new,
:root:has(.targets [id=u-cell-1]:target) .footage__selector--cell-1 .room-icon--new,
:root:has(.targets [id=u-cell-2]:target) .footage__selector--cell-2 .room-icon--new,
:root:has(.targets [id=u-cell-3]:target) .footage__selector--cell-3 .room-icon--new,
:root:has(.targets [id=u-cell-4]:target) .footage__selector--cell-4 .room-icon--new,
:root:has(.targets [id=u-cell-5]:target) .footage__selector--cell-5 .room-icon--new,
:root:has(.targets [id=u-cell-6]:target) .footage__selector--cell-6 .room-icon--new,
:root:has(.targets [id=u-armoury]:target) .footage__selector--armoury .room-icon--new,
:root:has(.targets [id=u-toilet]:target) .footage__selector--toilet .room-icon--new,
:root:has(.targets [id=u-vehicle-bay]:target) .footage__selector--vehicle-bay .room-icon--new,
:root:has(.targets [id=u-main-cell]:target) .footage__selector--main-cell .room-icon--new,
:root:has(.targets [id=u-main-cell-airlock]:target) .footage__selector--main-cell-airlock .room-icon--new,
:root:has(.targets [id=u-office]:target) .footage__selector--office .room-icon--new,
:root:has(.targets [id=u-security]:target) .footage__selector--security .room-icon--new,
:root:has(.targets [id=u-records-store]:target) .footage__selector--records-store .room-icon--new,
:root:has(.targets [id=u-break-room]:target) .footage__selector--break-room .room-icon--new,
:root:has(.targets [id=u-offices-corridor]:target) .footage__selector--offices-corridor .room-icon--new,
:root:has(.targets [id=u-server-room-corridor]:target) .footage__selector--server-room-corridor .room-icon--new,
:root:has(.targets [id=u-cells-corridor]:target) .footage__selector--cells-corridor .room-icon--new,
:root:has(.targets [id=u-north-ring-corridor]:target) .footage__selector--north-ring-corridor .room-icon--new,
:root:has(.targets [id=u-east-ring-corridor]:target) .footage__selector--east-ring-corridor .room-icon--new,
:root:has(.targets [id=u-south-ring-corridor]:target) .footage__selector--south-ring-corridor .room-icon--new,
:root:has(.targets [id=u-west-ring-corridor]:target) .footage__selector--west-ring-corridor .room-icon--new,
:root:has(.targets [id=u-armoury-corridor]:target) .footage__selector--armoury-corridor .room-icon--new,
:root:has(.targets [id=u-exterior]:target) .footage__selector--exterior .room-icon--new,
:root:has(.targets [id=u-all]:target) .footage__selector .room-icon--new {
animation-play-state: running;
}
/* Show the new event alert only for rooms with more than one event */
:root:has(.footage__display--hangar:not(.footage__display--passive)) :is(.map__room--hangar, .footage__selector--hangar .room-icon--new),
:root:has(.footage__display--server-room:not(.footage__display--passive)) :is(.map__room--server-room, .footage__selector--server-room .room-icon--new),
:root:has(.footage__display--pantry:not(.footage__display--passive)) :is(.map__room--pantry, .footage__selector--pantry .room-icon--new),
:root:has(.footage__display--cafe:not(.footage__display--passive)) :is(.map__room--cafe, .footage__selector--cafe .room-icon--new),
:root:has(.footage__display--break-room:not(.footage__display--passive)) :is(.map__room--break-room, .footage__selector--break-room .room-icon--new),
:root:has(.footage__display--security:not(.footage__display--passive)) :is(.map__room--security, .footage__selector--security .room-icon--new),
:root:has(.footage__display--records-store:not(.footage__display--passive)) :is(.map__room--records-store, .footage__selector--records-store .room-icon--new),
:root:has(.footage__display--office:not(.footage__display--passive)) :is(.map__room--office, .footage__selector--office .room-icon--new),
:root:has(.footage__display--cell-1:not(.footage__display--passive)) :is(.map__room--cell-1, .footage__selector--cell-1 .room-icon--new),
:root:has(.footage__display--cell-2:not(.footage__display--passive)) :is(.map__room--cell-2, .footage__selector--cell-2 .room-icon--new),
:root:has(.footage__display--cell-3:not(.footage__display--passive)) :is(.map__room--cell-3, .footage__selector--cell-3 .room-icon--new),
:root:has(.footage__display--cell-4:not(.footage__display--passive)) :is(.map__room--cell-4, .footage__selector--cell-4 .room-icon--new),
:root:has(.footage__display--cell-5:not(.footage__display--passive)) :is(.map__room--cell-5, .footage__selector--cell-5 .room-icon--new),
:root:has(.footage__display--cell-6:not(.footage__display--passive)) :is(.map__room--cell-6, .footage__selector--cell-6 .room-icon--new),
:root:has(.footage__display--main-cell:not(.footage__display--passive)) :is(.map__room--main-cell, .footage__selector--main-cell .room-icon--new),
:root:has(.footage__display--main-cell-airlock:not(.footage__display--passive)) :is(.map__room--main-cell-airlock, .footage__selector--main-cell-airlock .room-icon--new),
:root:has(.footage__display--foyer:not(.footage__display--passive)) :is(.map__room--foyer, .footage__selector--foyer .room-icon--new),
:root:has(.footage__display--armoury:not(.footage__display--passive)) :is(.map__room--armoury, .footage__selector--armoury .room-icon--new),
:root:has(.footage__display--toilet:not(.footage__display--passive)) :is(.map__room--toilet, .footage__selector--toilet .room-icon--new),
:root:has(.footage__display--storage:not(.footage__display--passive)) :is(.map__room--storage, .footage__selector--storage .room-icon--new),
:root:has(.footage__display--vehicle-bay:not(.footage__display--passive)) :is(.map__room--vehicle-bay, .footage__selector--vehicle-bay .room-icon--new),
:root:has(.footage__display--server-room-corridor:not(.footage__display--passive)) :is(.map__room--server-room-corridor, .footage__selector--server-room-corridor .room-icon--new),
:root:has(.footage__display--offices-corridor:not(.footage__display--passive)) :is(.map__room--offices-corridor, .footage__selector--offices-corridor .room-icon--new),
:root:has(.footage__display--cells-corridor:not(.footage__display--passive)) :is(.map__room--cells-corridor, .footage__selector--cells-corridor .room-icon--new),
:root:has(.footage__display--north-ring-corridor:not(.footage__display--passive)) :is(.map__room--north-ring-corridor, .footage__selector--north-ring-corridor .room-icon--new),
:root:has(.footage__display--east-ring-corridor:not(.footage__display--passive)) :is(.map__room--east-ring-corridor, .footage__selector--east-ring-corridor .room-icon--new),
:root:has(.footage__display--south-ring-corridor:not(.footage__display--passive)) :is(.map__room--south-ring-corridor, .footage__selector--south-ring-corridor .room-icon--new),
:root:has(.footage__display--west-ring-corridor:not(.footage__display--passive)) :is(.map__room--west-ring-corridor, .footage__selector--west-ring-corridor .room-icon--new),
:root:has(.footage__display--armoury-corridor:not(.footage__display--passive)) :is(.map__room--armoury-corridor, .footage__selector--armoury-corridor .room-icon--new),
:root:has(.footage__display--exterior:not(.footage__display--passive)) :is(.map__room--exterior, .footage__selector--exterior .room-icon--new) {
content: "";
display: inline-flex;
}
/* Dialogue */
.dialogue {
background: rgba(0,0,0,0.05);
padding: 0.5rem 1rem;
display: grid;
br { display: none }
grid-template-columns: 9ch auto;
grid-template-areas: "speaker content" "context content";
}
.dialogue__speaker {
font-weight: bold;
grid-area: speaker;
}
.dialogue__context {
font-size: 80%;
grid-area: context;
margin-top: -0.4em;
}
.dialogue__content {
grid-area: content;
}
:not(.dialogue) + .dialogue{
border-top-left-radius: 1ch;
border-top-right-radius: 1ch;
}
.dialogue:not(:has(+ .dialogue)),
.dialogue:has(+ :not(.dialogue)) {
border-bottom-left-radius: 1ch;
border-bottom-right-radius: 1ch;
}
.now-playing:any-link {
background: rgba(255,255,255,0.2);
border-radius: 0.5ch;
margin-block: 0.5em;
padding: 0.5em;
text-align: center;
}
.now-playing::before, .now-playing::after {
content: " \f008 ";
font-family: "FontAwesome";
}