Skip to main content

Override CSS styling of screens

In the screen settings, you may paste CSS styles to override the default stylesheets.

CSS Reset​

We ensure consistent browser styling by using the following CSS reset:

normalize.css v8 - MIT License - github.com/necolas/normalize.css

Default stylesheet​

/* General styles */

html {
    color-scheme: dark; /* dark browser & scrollbar mode  */
}

body {
    font-family: system-ui, sans-serif;
    font-weight: normal;
    background: #333333;    /* Defined in screen settings */
    color: #ffffff;         /* Defined in screen settings */
    font-size: 1.5em;
    line-height: 1.4;
}

img, svg {
    vertical-align: middle;
}

/* Header: Logo or Text */

header {
    display: flex;
    align-items: stretch;
    position: sticky;
    top: 0;
    background: #333333;    /* Defined in screen settings */
    padding: 1em 1.5em;
}

.header-date {
    width: 25%;
    font-size: 0.75em;
    opacity: 0.6;
}

.header-logo {
    width: 50%;
    font-weight: bold;
    margin: 0;
    text-align: center;
    white-space: nowrap;
    flex-grow: 1;
}

.header-logo h1 {
    margin: 0;
}

.header-corner {
    width: 25%;
    text-align: right;
    font-size: 14px;
    opacity: 0.6;
    line-height: 2;
}

.header-logo-image {
    background: transparent no-repeat center center url('url/to/image'); /* automatically links to uploaded image */
    background-size: contain;
    width: 100%;
    height: 70px;
}

/* Wrapper */
main {
    margin: 1.5em;
}

/* Column grid layout */
.columns {
    columns: 1;
    column-gap: 4em;
    column-rule: solid 8px rgba(255, 255, 255, 0.1);
}

@media only screen and (orientation : landscape) {
    .columns {
        columns: 2;
    }
}

.row {
    display: flex;
    align-items: flex-start;
    break-inside: avoid;
    page-break-after: always;
    gap: 1em;
    margin: 0 0 1em;
}


/* Resources */

.suite,
.resource,
.staff {
    width: 280px;
    height: 60px;
    display: flex;
    align-items: center;
    gap: 0.5em;
    flex-shrink: 0;
    flex-grow: 0;
    box-sizing: border-box;
}

.suite,
.resource {
    border-left: .3em solid transparent;
    padding: 0 0 0 0.5em;
}

.staff-image,
.resource-image {
    width: 2em;
    height: 2em;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.resource-image {
    border-radius: .2em;
}

.staff-image {
    border-radius: 50%;
}

.suite-text,
.staff-text,
.resource-text {
    min-width: 0;
}

.suite-text-name,
.staff-text-name,
.resource-text-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.suite-text-room-number,
.staff-text-byline,
.resource-text-byline {
    font-size: 0.8em;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Bookings */

.bookings {
    width: 100%;
}

.booking + .booking {
    border-top: 4px solid rgba(255, 255, 255, 0.1);
    padding-top: .3em;
    margin-top: .5em;
}

.booking-time {
    display: inline-block;
    font-size: 0.8em;
    white-space: nowrap;
    padding: .05em .4em;
    border-radius: .3em;
    background: rgba(255, 255, 255, 0.1);
}


/* Projects */

.project {
    display: flex;
    align-items: center;
}

.project-color {
    width: .3em;
    height: 1em;
    margin-right: 0.5em;
    flex-shrink: 0;
}

.project-name {
    font-style: italic;
    font-size: 0.8em;
}


/* Message box */

footer {
    position: sticky;
    bottom: 0;
    background: #ff0000;    /* Defined in screen settings */
    z-index: 10;
}

.message {
    background: #ff0000;    /* Defined in screen settings */
    padding: 0.7em 1.5em;
    font-size: 0.95em;
    line-height: 1;
}

footer p {
    margin: 0;
}

/* Error information */

.text-error,
.text-offline,
.warning-icon,
.warning-offline {
    display: none;
}

.reload-failed .text-error,
.connection-lost .text-offline {
    display: inline;
    margin: 0 0 0 .5em;
    font-weight: bold;
    background: #ff0000;
    color: #ffffff;
    border-radius: .5em;
    padding: .1em .5em;
}

.reload-failed .warning-icon,
.connection-lost .warning-offline {
    display: inline;
    color: #ff0000;
    margin: 0 0 0 .2em;
}

Your styles​

The above default styling, incl. the normalize.css reset styles, are always loaded in the document body. Your custom styles will be inserted after the above stylesheet, allowing you to override any of the defaults.

The use of !important should not be necessary.

Adjustment of the overall font size is easily done by setting a different body font size, e.g.

body {
    font-size: 1.3em;
}

Default DOM / available selectors & classes​

The structure of the generated screen view is as follows.

<html>
<body>
    <header>
        <div class="header-date"></div>
        <div class="header-logo">
            <!-- if a logo / image has been set: -->
            <div class="header-logo-image"></div>
            <!-- otherwise: -->
            <h1><!-- Title --></h1>
        </div>
        <div class="header-corner"></div>
    </header>

    <main>
        <div class="columns">
            <!-- for each suite / staff / resource, a row is added -->
            <div class="row">
                <div class="resource">
                    <div class="resource-name">
                        <div class="resource-color" style="background-color: #123456;"></div>
                        <span><!-- resource name --></span>
                    </div>
                    <div class="resource-room-number"></div>
                </div>
                <div class="resource-bookings">
                    <!-- each booking as a separate div -->
                    <div class="booking">
                        <div class="booking-name"></div>
                        <div class="project">
                            <div class="project-color" style="background-color: #123456;"></div>
                            <div class="project-name"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- if a message has been set: -->
    <footer>
        <div class="message"></div>
    </footer>
</body>
</html>
Last updated on