// vim: syntax=qml

// Base variables

real uiScale: 1.0  /* TODO: Implement correctly, do not change for now */
real fontScale: uiScale

Behavior on uiScale   { HNumberAnimation {} }
Behavior on fontScale { HNumberAnimation {} }

int minimumSupportedWidth:  240 * uiScale
int minimumSupportedHeight: 120 * uiScale
int contentIsWideAbove:     439 * uiScale

int minimumSupportedWidthPlusSpacing:  minimumSupportedWidth + spacing * 2
int minimumSupportedHeightPlusSpacing: minimumSupportedHeight + spacing * 2

int baseElementsHeight: 36 * uiScale
int spacing:            12 * uiScale
int radius:             5
int animationDuration:  100

string preferredIconPack: "light-thin"

fontSize:
    int smaller: 13  * fontScale
    int small:   13 * fontScale
    int normal:  16 * fontScale
    int big:     22 * fontScale
    int bigger:  32 * fontScale
    int biggest: 48 * fontScale

fontFamily:
    string sans:  "Roboto"
    string serif: "Roboto Slab"
    string mono:  "Hack"

colors:
    int hue:        260
    int saturation: 40
    real intensity: 1.0
    real opacity:   1.0

    color weakBackground:   hsluv(hue, saturation, intensity * 12, opacity)
    color mediumBackground: hsluv(hue, saturation, intensity * 9, opacity)
    color strongBackground: hsluv(hue, saturation, intensity * 6, opacity)

    color inputBackground:
        hsluv(hue, saturation, intensity * 2, Math.min(0.6, opacity))

    color accentBackground:
        hsluv(hue, saturation * 1.25, intensity * 42, Math.min(0.6, opacity))

    color strongAccentBackground:
        hsluv(hue, saturation * 2, intensity * 52, Math.min(0.6, opacity))

    color brightText:  hsluv(0, 0, intensity * 100)
    color text:        hsluv(0, 0, intensity * 80)
    color halfDimText: hsluv(0, 0, intensity * 70)
    color dimText:     hsluv(0, 0, intensity * 55)
    color dimmerText:  hsluv(0, 0, intensity * 30)

    color errorText:   hsluv(0, saturation * 2.25, 50)
    color accentText:  hsluv(hue - 80, saturation * 2.25, 60)
    color link:        accentText
    color code:        hsluv(hue + 5, saturation * 1.5, intensity * 60)

    // Example of an animation, set running: true to enable
    NumberAnimation on hue
        running:  false
        from:     0
        to:       360
        duration: 10000
        loops:    Animation.Infinite


// Generic UI controls

controls:
    box:
        color background: colors.strongBackground
        int radius:       theme.radius

    popup:
        color background: colors.strongBackground

    header:
        color background: colors.strongBackground

    button:
        color background:     colors.inputBackground
        color text:           colors.text
        real disabledOpacity: 0.3

        color hoveredOverlay: hsluv(0, 0, 50, 0.3)
        color pressedOverlay: hsluv(0, 0, 50, 0.6)
        color checkedOverlay: colors.accentBackground

    interactiveRectangle:
        color background: "transparent"

        color hoveredOverlay: hsluv(0, 0, 50)
        color pressedOverlay: hsluv(0, 0, 50)
        color checkedOverlay: hsluv(0, 0, 50)

        real hoveredOpacity: 0.3
        real pressedOpacity: 0.2
        real checkedOpacity: 0.2

    textField:
        color background:        colors.inputBackground
        color focusedBackground: background

        int borderWidth:     1
        color border:        "transparent"
        color focusedBorder: colors.strongAccentBackground

        color text:        colors.text
        color focusedText: colors.text

    textArea:
        color background: colors.inputBackground
        color text:       colors.text

    avatar:
        int size:   baseElementsHeight
        int radius: theme.radius

        background:
            int saturation: colors.saturation - 5
            int lightness:  Math.min(50, colors.intensity * 20)
            real opacity:   1.0

        letter:
            int saturation: colors.saturation * 1.5
            int lightness:  colors.intensity * 60
            real opacity:   1.0

    displayName:
        int saturation: colors.saturation
        int lightness:  Math.min(55, colors.intensity * 55)


// Special UI parts

ui:
    // Supported: local file path or web URL
    url image: ""
    color background: colors.weakBackground


sidePane:
    real autoWidthRatio:  0.33 * uiScale
    int maximumAutoWidth: 320 * uiScale

    int autoCollapseBelowWidth: 128 * uiScale
    int collapsedWidth:         controls.avatar.size

    int autoReduceBelowWindowWidth:
        minimumSupportedWidthPlusSpacing + collapsedWidth

    color background: colors.strongBackground

    account:
        real collapsedOpacity: 0.3
        color background:      "transparent"
        color name:            colors.text

    room:
        real leftRoomOpacity: 0.65

        color background:     "transparent"
        color name:           colors.text
        color subtitle:       colors.dimText
        color lastEventDate:  colors.halfDimText

    settingsButton:
        color background: colors.inputBackground

    filterRooms:
        color background: colors.inputBackground


chat:
    roomHeader:
        color background: colors.strongBackground
        color name:       colors.text
        color topic:      colors.dimText

    roomSidePane:
        color background: colors.mediumBackground

    eventList:
        int ownEventsOnRightUnderWidth: 768
        color background:               "transparent"

    message:
        int radius:          theme.radius
        color background:    colors.strongBackground
        color ownBackground: hsluv(
            colors.hue, colors.saturation + 30, colors.intensity * 6, opacity
        )

        color body:          colors.text
        color date:          colors.dimText

        color greenText: hsluv(135, colors.saturation * 2.25, 80)
        color link:      colors.link
        color code:      colors.code

        string styleSheet:
            "a { color: " + link  + " }" +

            "code { font-family: " + fontFamily.mono + "; " +
                   "color: "       + code            + " }" +

            "h1, h2, h3 { font-weight: normal }" +
            "h1 { font-size: " + fontSize.biggest + "px }" +
            "h2 { font-size: " + fontSize.bigger + "px }" +
            "h3 { font-size: " + fontSize.big + "px }" +
            "h4 { font-size: " + fontSize.normal + "px }" +
            "h5 { font-size: " + fontSize.small + "px }" +
            "h6 { font-size: " + fontSize.smaller + "px }" +

            ".greentext { color: " + greenText + " }"

        string styleInclude:
            '<style type"text/css">\n' + styleSheet + '\n</style>\n'

    daybreak:
        color background: colors.strongBackground
        color text:       colors.text
        int radius:       theme.radius

    inviteBanner:
        color background: colors.mediumBackground

    leftBanner:
        color background: colors.mediumBackground

    unknownDevices:
        color background: colors.mediumBackground

    typingMembers:
        color background: colors.mediumBackground

    sendBox:
        color background: colors.strongBackground