main.scss

TLDR

The main.scss file is responsible for importing other stylesheet files and defining the styling for various elements in the application.

Classes

html

Defines styling for the html element.

.focalboard-body and #focalboard-app

Defines styling for the body of the application, including setting the display to flex, setting the background color and font family, and applying some global styles.

.focalboard-plugin-root

Defines styling for the root element of the focalboard plugin.

.TeamIcon

Defines styling for the TeamIcon element.

input, textarea, select, button

Defines styling for input, textarea, select, and button elements.

a

Defines styling for anchor elements.

hr

Defines styling for horizontal rule elements.

.page-loading

Defines styling for the page loading element.

#root, #frame, .BoardPage

Defines styling for root, frame, and BoardPage elements.

.dragover

Defines styling when an element is being dragged over.

.octo-spacer

Defines styling for the octo-spacer element.

.octo-icon

Defines styling for octo-icon elements, including the font-family and line-height.

.text-light

Defines styling for text-light elements.

.octo-icontitle

Defines styling for octo-icontitle elements.

.octo-propertyvalue

Defines styling for octo-propertyvalue elements, including font-size and color.

.editable

Defines styling for editable elements.

.octo-placeholder

Defines styling for placeholder elements.

[contentEditable='true']

Defines styling for elements with contentEditable=true attribute.

.octo-block

Defines styling for octo-block elements, including display, flex-direction, and width.

.octo-block-margin

Defines styling for octo-block-margin elements.

.emoji-mart-category-list

Defines styling for emoji-mart-category-list elements.

END

@import 'typography';
@import 'modifiers';
@import 'z-index';

html {
    height: 100%;
}

.focalboard-body,
#focalboard-app {
    display: flex;
    flex-direction: column;
    overflow: hidden;

    width: 100%;
    height: 100%;
    color: rgb(var(--center-channel-color-rgb));
    background: rgb(var(--center-channel-bg-rgb));
    padding: 0;
    margin: 0;
}

.focalboard-plugin-root {
    height: 100%;
}

.focalboard-body {
    --cursor-color: rgb(var(--center-channel-color-rgb));

    padding: 0;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    /* -webkit-font-smoothing: auto; */
    font-size: 14px;
    line-height: 24px;

    * {
        box-sizing: border-box;
        outline: 0;
        user-select: none;
    }

    .TeamIcon {
        box-sizing: content-box;
    }

    input,
    textarea,
    select,
    button {
        font-size: 100%; /* Normalize */
    }

    input,
    textarea {
        background: rgb(var(--center-channel-bg-rgb));
        color: rgb(var(--center-channel-color-rgb));
        border-radius: 4px;
        user-select: text;
    }

    a {
        text-decoration: none;
        color: rgb(var(--link-color-rgb));
    }

    hr {
        width: 100%;
        height: 1px;
        border: 0;
        color: rgba(var(--center-channel-color-rgb), 0.09);
        background-color: rgba(var(--center-channel-color-rgb), 0.09);
        margin-bottom: 8px;
    }

    #focalboard-app {
        button {
            &.style--none {
                background: transparent;
                border: 0;
                padding: 0;
            }
        }
    }

    .page-loading {
        margin: 50px auto;
    }

    /* App frame */

    #root {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        overflow: auto;
    }

    #frame,
    #main,
    .BoardPage {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* Main app */

    .dragover {
        background-color: rgba(128, 192, 255, 0.4);
    }

    .octo-spacer {
        flex: 1;
    }

    /* Icons */

    .octo-icon {
        font-family: 'Apple Color Emoji', 'Segoe UI Emoji', NotoColorEmoji,
            'Noto Color Emoji', 'Segoe UI Symbol', 'Android Emoji', EmojiSymbols;
        line-height: 1.2;
        align-self: baseline;
        overflow: visible;
        font-weight: normal;
    }

    .text-light {
        color: rgba(var(--center-channel-color-rgb), 0.56);
    }

    .octo-icontitle {
        flex: 0 0 auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        min-width: 0;
    }

    /*-- Property list --*/

    .octo-propertyvalue {
        max-width: 100%;
        font-size: 12px;
        color: rgb(var(--center-channel-color-rgb));

        &.empty {
            color: rgba(var(--center-channel-color-rgb), 0.4);
        }

        .IconButton.delete-value {
            width: 16px;
            min-width: 16px;
            height: 16px;

            i {
                font-size: 16px;
            }
        }
    }

    /*-- Editable --*/

    .Editable {
        cursor: text;
    }

    .Editable.active {
        min-width: 100px;
    }

    .octo-placeholder {
        color: rgba(var(--center-channel-color-rgb), 0.4);
    }

    [contentEditable='true'] {
        user-select: text;
    }

    [contentEditable='true']:empty::before {
        content: attr(placeholder);
        display: block;
        color: rgba(var(--center-channel-color-rgb), 0.4);
    }

    .octo-propertyvalue.Editable.active,
    .octo-table-cell .Editable.active {
        border-radius: 3px;
        box-shadow: rgba(15, 15, 15, 0.05) 0 0 0 1px,
            rgba(15, 15, 15, 0.1) 0 3px 6px, rgba(15, 15, 15, 0.2) 0 9px 24px;
    }

    .octo-block img {
        max-width: 500px;
        max-height: 500px;
        margin: 5px 0;
        object-fit: contain;
        flex: none;
    }

    .octo-content {
        width: 100%;
    }

    .octo-block {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        width: 100%;

        &:hover {
            @include z-index(block-hover);
            position: relative;
        }

        > * {
            flex: 1 1 auto;
        }

        > .octo-block-margin {
            flex: 0 0 auto;
        }

        @media screen and (max-width: 975px) {
            padding-right: 10px;
        }
    }

    .octo-block-margin {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-end;

        @media not screen and (max-width: 975px) {
            width: 48px;
        }
    }

    .emoji-mart-category-list {
        display: flex;
        flex-wrap: wrap;
    }
}