Further styling to staff view grid
This commit is contained in:
@@ -81,7 +81,7 @@
|
|||||||
>
|
>
|
||||||
{#if isRightTime(service.sta, service.ata || service.eta)}
|
{#if isRightTime(service.sta, service.ata || service.eta)}
|
||||||
RT
|
RT
|
||||||
{:else if service.sta && service.c} CAN {:else}
|
{:else if service.sta && service.c} CANC {:else}
|
||||||
{realArrival}
|
{realArrival}
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
@@ -116,15 +116,19 @@
|
|||||||
.departure-board {
|
.departure-board {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
margin: 5px auto;
|
height: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
overflow: hidden;
|
overscroll-behavior-y: contain;
|
||||||
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header.container {
|
.header.container {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
|
padding-top: 7px;
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: 2;
|
z-index: 10;
|
||||||
background: var(--color-bg-dark);
|
background: var(--color-bg-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -172,23 +176,29 @@
|
|||||||
padding-bottom: 7px;
|
padding-bottom: 7px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cell > div {
|
/* Cancellation Logic */
|
||||||
display: block;
|
.service.cancelled,
|
||||||
width: 100%;
|
.service.cancelled .cell.orig,
|
||||||
}
|
.service.cancelled .cell.dest {
|
||||||
|
|
||||||
/* Row Logic */
|
|
||||||
.service.cancelled {
|
|
||||||
color: rgb(255, 131, 131);
|
color: rgb(255, 131, 131);
|
||||||
}
|
}
|
||||||
|
.service.cancelled .cell.plt,
|
||||||
|
.service.cancelled .cell.act {
|
||||||
|
text-decoration: line-through;
|
||||||
|
opacity: 0.25;
|
||||||
|
}
|
||||||
|
.service.cancelled .cell.sch {
|
||||||
|
text-decoration: line-through;
|
||||||
|
}
|
||||||
|
|
||||||
/* Special Row Styles */
|
/* Meta Row Styles */
|
||||||
.operator.row,
|
.operator.row,
|
||||||
.delay-reason.row,
|
.delay-reason.row,
|
||||||
.cancel-reason.row {
|
.cancel-reason.row {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-size: 0.88rem;
|
font-size: 0.88rem;
|
||||||
|
font-stretch: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cancel-reason.row {
|
.cancel-reason.row {
|
||||||
@@ -232,7 +242,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.operator.row {
|
.operator.row {
|
||||||
/* font-family: 'URW Gothic', sans-serif; */
|
font-stretch: 110%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: rgb(187, 187, 255);
|
color: rgb(187, 187, 255);
|
||||||
}
|
}
|
||||||
@@ -320,16 +330,9 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
font-stretch: 100%;
|
font-stretch: 100%;
|
||||||
}
|
}
|
||||||
/* Colour orig and dest values when cancelled */
|
|
||||||
.service-row.serviceCancelled .orig-cell,
|
|
||||||
.service-row.serviceCancelled .dest-cell {
|
|
||||||
color: rgb(255, 131, 131);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cell.pass {
|
.cell.pass {
|
||||||
grid-column: span 2;
|
grid-column: span 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cell.sch,
|
.cell.sch,
|
||||||
.cell.act {
|
.cell.act {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|||||||
@@ -1,425 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import type { ApiStationsBoard } from '@owlboard/owlboard-ts';
|
|
||||||
import { formatUkTime, estClass, delayClassFromTimePair } from '$lib/utils/time';
|
|
||||||
import { fade } from 'svelte/transition';
|
|
||||||
|
|
||||||
let { services }: { services: ApiStationsBoard.BoardService[] } = $props();
|
|
||||||
|
|
||||||
const getRowKey = (s: ApiStationsBoard.BoardService) =>
|
|
||||||
`${s.r}${s.sta ?? ''}${s.std ?? ''}${s.wtp ?? ''}`;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<table class="departure-board">
|
|
||||||
<colgroup>
|
|
||||||
<col style="width:10%;" />
|
|
||||||
<!-- ID (Headcode) -->
|
|
||||||
<col style="width:17%;" />
|
|
||||||
<!-- ORIG (Origin) -->
|
|
||||||
<col style="width:17%;" />
|
|
||||||
<!-- DEST (Destination) -->
|
|
||||||
<col style="width:9%;" />
|
|
||||||
<!-- PLT (Platform) -->
|
|
||||||
<col style="width: 12%;" />
|
|
||||||
<!-- STA -->
|
|
||||||
<col style="width: 12%;" />
|
|
||||||
<!-- ETA/ATA -->
|
|
||||||
<col style="width: 12%;" />
|
|
||||||
<!-- STD -->
|
|
||||||
<col style="width: 11%;" />
|
|
||||||
<!-- ETD/ATD -->
|
|
||||||
</colgroup>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th colspan="4" aria-hidden="true"></th>
|
|
||||||
<th scope="colgroup" colspan="2" class="upper-head"><abbr title="Arrival">Arr</abbr></th>
|
|
||||||
<th scope="colgroup" colspan="2" class="upper-head"><abbr title="Departure">Dep</abbr></th>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th scope="col"><abbr title="Headcode">ID</abbr></th>
|
|
||||||
<th scope="col"><abbr title="Origin">Orig</abbr></th>
|
|
||||||
<th scope="col"><abbr title="Destination">Dest</abbr></th>
|
|
||||||
<th scope="col"><abbr title="Platform">Plt</abbr></th>
|
|
||||||
<th scope="col"><abbr title="Scheduled">Sch</abbr></th>
|
|
||||||
<th scope="col"><abbr title="Actual/Expected">Act</abbr></th>
|
|
||||||
<th scope="col"><abbr title="Scheduled">Sch</abbr></th>
|
|
||||||
<th scope="col"><abbr title="Actual/Expected">Act</abbr></th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
{#each services as service (getRowKey(service))}
|
|
||||||
<tbody>
|
|
||||||
<tr
|
|
||||||
in:fade={{ duration: 150, delay: 150 }}
|
|
||||||
out:fade={{ duration: 150 }}
|
|
||||||
class="service-row"
|
|
||||||
class:serviceCancelled={service.c}
|
|
||||||
class:servicePass={service.wtp}
|
|
||||||
class:serviceNonPassenger={!service.ip}
|
|
||||||
>
|
|
||||||
<td class="id-cell">{service.h}</td>
|
|
||||||
<td class="orig-cell"
|
|
||||||
><abbr title={service.og.n.toLocaleUpperCase()}>{service.og.t}</abbr></td
|
|
||||||
>
|
|
||||||
<td class="dest-cell"
|
|
||||||
><abbr title={service.dt.n.toLocaleUpperCase()}>{service.dt.t}</abbr></td
|
|
||||||
>
|
|
||||||
<td class="plt-cell" class:platSup={service.ps} class:platChange={service.pc}
|
|
||||||
>{service.p || '-'}</td
|
|
||||||
>
|
|
||||||
|
|
||||||
<!-- Handle different display for a passing train -->
|
|
||||||
{#if service.wtp}
|
|
||||||
<td class="pass-cell" colspan="2">Pass</td>
|
|
||||||
<td class="time-cell">{formatUkTime(service.wtp)}</td>
|
|
||||||
<!-- If cancelled, show '-', otherwise check for RT or show time -->
|
|
||||||
<td
|
|
||||||
class="time-cell {estClass(service.atp, service.etp)} {delayClassFromTimePair(
|
|
||||||
service.wtp,
|
|
||||||
service.atp || service.etp
|
|
||||||
)}"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
{service.c
|
|
||||||
? '-'
|
|
||||||
: delayClassFromTimePair(service.wtp, service.atp || service.etp) === 'delay-rt'
|
|
||||||
? 'RT'
|
|
||||||
: formatUkTime(service.atp || service.etp)}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
{:else}
|
|
||||||
<td class="time-cell">{formatUkTime(service.sta)}</td>
|
|
||||||
|
|
||||||
<!-- Arrival Actual/Expected -->
|
|
||||||
<td
|
|
||||||
class="time-cell {estClass(service.ata, service.eta)} {delayClassFromTimePair(
|
|
||||||
service.sta,
|
|
||||||
service.ata || service.eta
|
|
||||||
)}"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
{service.c
|
|
||||||
? '-'
|
|
||||||
: delayClassFromTimePair(service.sta, service.ata || service.eta) === 'delay-rt'
|
|
||||||
? 'RT'
|
|
||||||
: formatUkTime(service.ata || service.eta)}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td class="time-cell">{formatUkTime(service.std)}</td>
|
|
||||||
|
|
||||||
<!-- Departure Actual/Expected -->
|
|
||||||
<td
|
|
||||||
class="time-cell {estClass(service.atd, service.etd)} {delayClassFromTimePair(
|
|
||||||
service.std,
|
|
||||||
service.atd || service.etd
|
|
||||||
)}"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
{service.c
|
|
||||||
? '-'
|
|
||||||
: delayClassFromTimePair(service.std, service.atd || service.etd) === 'delay-rt'
|
|
||||||
? 'RT'
|
|
||||||
: formatUkTime(service.atd || service.etd)}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
{/if}
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
{#if service.o}
|
|
||||||
<tr
|
|
||||||
class="toc-coach-row"
|
|
||||||
in:fade={{ duration: 150, delay: 150 }}
|
|
||||||
out:fade={{ duration: 150 }}
|
|
||||||
>
|
|
||||||
<td colspan="8">
|
|
||||||
{service.o}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
{/if}
|
|
||||||
{#if service.c && service.cr?.r}
|
|
||||||
<tr class="cancel-row" in:fade={{ duration: 150, delay: 150 }} out:fade={{ duration: 150 }}>
|
|
||||||
<td colspan="8">
|
|
||||||
{service.cr.r}
|
|
||||||
{#if service.cr.l}
|
|
||||||
{service.cr.n ? 'near' : 'at'}
|
|
||||||
{service.cr.l}
|
|
||||||
{/if}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
{/if}
|
|
||||||
{#if service.dr?.r}
|
|
||||||
<tr class="delay-row" in:fade={{ duration: 150, delay: 150 }} out:fade={{ duration: 150 }}>
|
|
||||||
<td colspan="9">
|
|
||||||
{service.dr.r}
|
|
||||||
{#if service.dr.l}
|
|
||||||
{service.dr.n ? 'near' : 'at'}
|
|
||||||
{service.dr.l}
|
|
||||||
{/if}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
{/if}
|
|
||||||
</tbody>
|
|
||||||
{/each}
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.departure-board {
|
|
||||||
width: 100%;
|
|
||||||
margin: 5px auto;
|
|
||||||
border-collapse: collapse;
|
|
||||||
table-layout: fixed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.departure-board td {
|
|
||||||
font-family: 'Inconsolata Variable', monospace;
|
|
||||||
font-size: clamp(1rem, 0.475rem + 2.8vw, 1.35rem);
|
|
||||||
font-variant-ligatures: additional-ligatures;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
thead,
|
|
||||||
.cancel-row td,
|
|
||||||
.delay-row td {
|
|
||||||
letter-spacing: -0.15ch;
|
|
||||||
}
|
|
||||||
|
|
||||||
thead {
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
z-index: 2;
|
|
||||||
background: var(--color-bg-dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
abbr {
|
|
||||||
text-decoration: none;
|
|
||||||
border-bottom: none;
|
|
||||||
cursor: help;
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody tr:first-child td {
|
|
||||||
border-top: 5px solid transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Row Logic */
|
|
||||||
.serviceCancelled {
|
|
||||||
color: rgb(255, 131, 131);
|
|
||||||
}
|
|
||||||
|
|
||||||
.servicePass td {
|
|
||||||
opacity: 0.75;
|
|
||||||
font-weight: 200;
|
|
||||||
}
|
|
||||||
|
|
||||||
.serviceNonPassenger td {
|
|
||||||
opacity: 0.5;
|
|
||||||
font-weight: 290;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Special Row Styles */
|
|
||||||
.cancel-row td,
|
|
||||||
.delay-row td {
|
|
||||||
font-size: 0.88rem;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cancel-row td[colspan],
|
|
||||||
.delay-row td[colspan] {
|
|
||||||
padding-left: 0ch;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cancel-row td {
|
|
||||||
color: rgb(255, 131, 131);
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delay-row td {
|
|
||||||
color: var(--delay-orange);
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
@media (min-width: 375px) {
|
|
||||||
.cancel-row td,
|
|
||||||
.delay-row td {
|
|
||||||
font-size: 1.08rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (min-width: 420px) {
|
|
||||||
.cancel-row td,
|
|
||||||
.delay-row td {
|
|
||||||
font-size: 1.12rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (min-width: 550px) {
|
|
||||||
.cancel-row td,
|
|
||||||
.delay-row td {
|
|
||||||
font-size: 1.18rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (min-width: 620px) {
|
|
||||||
.cancel-row td,
|
|
||||||
.delay-row td {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.toc-coach-row td {
|
|
||||||
font-family: 'URW Gothic', sans-serif;
|
|
||||||
font-size: 0.7rem;
|
|
||||||
padding: 0;
|
|
||||||
color: rgb(187, 187, 255);
|
|
||||||
}
|
|
||||||
@media (min-width: 400px) {
|
|
||||||
.toc-coach-row td {
|
|
||||||
font-size: 0.8rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (min-width: 550px) {
|
|
||||||
.toc-coach-row td {
|
|
||||||
font-size: 0.85rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Column Specifics */
|
|
||||||
.id-cell {
|
|
||||||
text-align: left;
|
|
||||||
font-weight: 400;
|
|
||||||
font-stretch: 85%;
|
|
||||||
filter: brightness(0.75);
|
|
||||||
}
|
|
||||||
@media (min-width: 400px) {
|
|
||||||
.id-cell {
|
|
||||||
font-stretch: 90%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.orig-cell,
|
|
||||||
.dest-cell {
|
|
||||||
font-stretch: 80%;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
.orig-cell {
|
|
||||||
text-align: left;
|
|
||||||
color: var(--location-yellow);
|
|
||||||
}
|
|
||||||
.dest-cell {
|
|
||||||
text-align: right;
|
|
||||||
color: var(--location-yellow);
|
|
||||||
}
|
|
||||||
@media (min-width: 350px) {
|
|
||||||
.orig-cell,
|
|
||||||
.dest-cell {
|
|
||||||
font-stretch: 85%;
|
|
||||||
}
|
|
||||||
@media (min-width: 400px) {
|
|
||||||
.orig-cell,
|
|
||||||
.dest-cell {
|
|
||||||
font-stretch: 90%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (min-width: 490px) {
|
|
||||||
.orig-cell,
|
|
||||||
.dest-cell {
|
|
||||||
font-stretch: 95%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (min-width: 520px) {
|
|
||||||
.orig-cell,
|
|
||||||
.dest-cell {
|
|
||||||
font-stretch: 100%;
|
|
||||||
}
|
|
||||||
.orig-cell {
|
|
||||||
text-align: right;
|
|
||||||
padding-right: 7px;
|
|
||||||
}
|
|
||||||
.dest-cell {
|
|
||||||
text-align: left;
|
|
||||||
padding-left: 7px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (min-width: 600px) {
|
|
||||||
.orig-cell,
|
|
||||||
.dest-cell {
|
|
||||||
letter-spacing: 0.05ch;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.plt-cell {
|
|
||||||
text-align: center;
|
|
||||||
font-weight: 410;
|
|
||||||
font-stretch: 100%;
|
|
||||||
}
|
|
||||||
@media (min-width: 525px) {
|
|
||||||
.plt-cell {
|
|
||||||
font-stretch: 110%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.plt-cell.platSup {
|
|
||||||
font-weight: 200;
|
|
||||||
opacity: 0.3;
|
|
||||||
}
|
|
||||||
.plt-cell.platChange {
|
|
||||||
animation: fast-pulse 2s ease-out infinite;
|
|
||||||
}
|
|
||||||
.service-row.serviceCancelled .plt-cell {
|
|
||||||
text-decoration: line-through;
|
|
||||||
}
|
|
||||||
.pass-cell {
|
|
||||||
text-align: center;
|
|
||||||
font-stretch: 100%;
|
|
||||||
}
|
|
||||||
/* Colour orig and dest values when cancelled */
|
|
||||||
.service-row.serviceCancelled .orig-cell,
|
|
||||||
.service-row.serviceCancelled .dest-cell {
|
|
||||||
color: rgb(255, 131, 131);
|
|
||||||
}
|
|
||||||
|
|
||||||
.time-cell {
|
|
||||||
text-align: center;
|
|
||||||
font-stretch: 72%;
|
|
||||||
}
|
|
||||||
@media (min-width: 350px) {
|
|
||||||
.time-cell {
|
|
||||||
font-stretch: 77%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (min-width: 400px) {
|
|
||||||
.time-cell {
|
|
||||||
font-stretch: 82%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (min-width: 525px) {
|
|
||||||
.time-cell {
|
|
||||||
font-stretch: 90%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (min-width: 600px) {
|
|
||||||
.time-cell {
|
|
||||||
font-stretch: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* RT Logic */
|
|
||||||
.time-cell.delay-rt span {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.time-cell.delay-rt::after {
|
|
||||||
content: 'RT';
|
|
||||||
}
|
|
||||||
|
|
||||||
.time-cell.delay-early {
|
|
||||||
color: var(--early-blue);
|
|
||||||
}
|
|
||||||
|
|
||||||
.time-cell.delay-late {
|
|
||||||
color: var(--delay-orange);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Time Types */
|
|
||||||
.est {
|
|
||||||
font-style: italic;
|
|
||||||
opacity: 0.75;
|
|
||||||
font-weight: 350;
|
|
||||||
}
|
|
||||||
.act {
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -45,7 +45,7 @@
|
|||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 10;
|
z-index: 12;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
width: 95%;
|
width: 95%;
|
||||||
max-width: 750px;
|
max-width: 750px;
|
||||||
|
|||||||
@@ -5,7 +5,6 @@
|
|||||||
import StationAlertCard from '$lib/components/ui/station-board/StationAlertCard.svelte';
|
import StationAlertCard from '$lib/components/ui/station-board/StationAlertCard.svelte';
|
||||||
|
|
||||||
import { formatUkDateTime, formatUkTime } from '$lib/utils/time';
|
import { formatUkDateTime, formatUkTime } from '$lib/utils/time';
|
||||||
import StaffServicesTable from '$lib/components/ui/station-board/StaffServicesTable.svelte';
|
|
||||||
import StaffServicesGrid from '$lib/components/ui/station-board/StaffServicesGrid.svelte';
|
import StaffServicesGrid from '$lib/components/ui/station-board/StaffServicesGrid.svelte';
|
||||||
|
|
||||||
let { data } = $props();
|
let { data } = $props();
|
||||||
@@ -109,10 +108,6 @@
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Wake Lock API Handling
|
|
||||||
// Load Data Invalidation Handling
|
|
||||||
// Refresh countdown logic
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class="board-wrapper">
|
<section class="board-wrapper">
|
||||||
@@ -145,6 +140,7 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
padding: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
gap: 0;
|
gap: 0;
|
||||||
}
|
}
|
||||||
@@ -152,6 +148,10 @@
|
|||||||
.no-service {
|
.no-service {
|
||||||
display: block;
|
display: block;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.15ch;
|
||||||
|
font-size: 1.4rem;
|
||||||
max-width: 75%;
|
max-width: 75%;
|
||||||
font-family: 'URW Gothic', sans-serif;
|
font-family: 'URW Gothic', sans-serif;
|
||||||
}
|
}
|
||||||
@@ -230,10 +230,6 @@
|
|||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.live-indicator {
|
|
||||||
margin: 0.25rem auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-list-wrapper {
|
.service-list-wrapper {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|||||||
Reference in New Issue
Block a user