// 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:     472 * 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
real loadingElementsOpacity:  0.8
real disabledElementsOpacity: 0.3


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:        264
    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 * 1.25, intensity * 2, Math.max(0.6, opacity))

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

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

    color positiveBackground:
        hsluv(155, saturation * 2.25, intensity * 52, Math.max(0.6, opacity))

    color middleBackground:
        hsluv(60, saturation * 2.25, intensity * 52, Math.max(0.6, opacity))

    color negativeBackground:
        hsluv(0, saturation * 2.25, intensity * 52, Math.max(0.6, opacity))

    color alertBackground:
        hsluv(0, saturation * 2.25, intensity * 52, Math.max(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, 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

icons:
    string preferredPack: "thin"

    // "transparent" to disable colorizing
    color colorize:         hsluv(0, 0, colors.intensity * 90)
    color disabledColorize: "white"


// Generic UI controls

controls:
    loader:
        int defaultDimension: 80
        color colorize: "white"

    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

        color hoveredOverlay: hsluv(0, 0, 50, 0.2)
        color pressedOverlay: hsluv(0, 0, 50, 0.5)
        color checkedOverlay: colors.accentBackground

    menu:
        color background: controls.button.background
        color border:     "black"
        real borderWidth: 2

    menuItem:
        color background: "transparent"
        color text:       controls.button.text

        color hoveredOverlay: controls.button.hoveredOverlay
        color pressedOverlay: controls.button.hoveredOverlay
        color checkedOverlay: controls.button.hoveredOverlay

    checkBox:
        color checkIconColorize: colors.accentBackground
        color boxBackground:     controls.button.background

        color boxBorder:        hsluv(0, 0, 50, 0.3)
        color boxHoveredBorder: colors.accentBackground
        color boxPressedBorder: colors.strongAccentBackground

        color text: controls.button.text

    listView:
        color highlight: hsluv(0, 0, 50, 0.3)

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

        int borderWidth:     1
        color border:        "transparent"
        color focusedBorder: colors.accentBackground
        color errorBorder:   colors.negativeBackground

        color text:            colors.text
        color focusedText:     colors.text
        color placeholderText: colors.dimText

    textArea:
        color background:      colors.inputBackground
        color text:            colors.text
        color placeholderText: controls.textField.placeholderText

    toolTip:
        int delay:        500
        color background: colors.inputBackground
        color text:       colors.text
        color border:     "black"
        int borderWidth:  2

    progressBar:
        int height:       Math.max(2, spacing / 2)
        color background: colors.inputBackground
        color foreground: colors.accentBackground

    slider:
        int radius:       2
        int height:       controls.progressBar.height
        color background: controls.progressBar.background
        color foreground: controls.progressBar.foreground

        handle:
            int size: 20
            color inside: hsluv(0, 0, 90)
            color pressedInside: "white"
            color border: "black"
            color pressedBorder: colors.strongAccentBackground

    image:
        int maxPauseIndicatorSize: 64

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

        hoveredImage:
            int size: 192
            color background: hsluv(0, 0, 0, 0.4)

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

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

    displayName:
        int saturation: colors.saturation + 25
        int lightness:  Math.min(60, colors.intensity * 60)


// Special UI parts

ui:
    // Image can be an URL or local file path.
    // If not specified, the gradient will be shown instead.
    url image: ""

    point gradientStart: Qt.point(0, 0)
    point gradientEnd:   Qt.point(window.width, window.height)

    color gradientStartColor:
        hsluv(colors.hue - 50, 100, colors.intensity * 8, 1.0)
    color gradientEndColor:
        hsluv(colors.hue + 20, 30, colors.intensity * 22, 1.0)

    // To have a solid color instead,
    // set gradientStartColor and gradientEndColor to the same value, e.g.:
    // color gradientStartColor: hsluv(0, 0, 0, 0.8)
    // color gradientEndColor: hsluv(0, 0, 0, 0.8)



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 lastEventDate:  colors.halfDimText

        color subtitle:      colors.dimText
        color subtitleQuote: hsluv(135, colors.saturation * 2.25, 65)

    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

        member:
            color background: "transparent"
            color name:       colors.text
            color subtitle:   colors.dimText

        inviteButton:
            color background: colors.inputBackground

        filterMembers:
            color background: colors.inputBackground

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

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

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

        color quote: hsluv(135, colors.saturation * 2.25, 75)
        color link:  colors.link
        color code:  colors.code

        string styleSheet:
            "* { white-space: pre-wrap }" +
            "a { color: " + link  + " }" +
            "p { margin-top: 0 }" +

            "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 }" +

            ".sender { margin-bottom: " + spacing / 2 + " }" +
            ".quote  { color: " + quote + " }"

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

        // TODO rename
        int fileMinWidth: 256
        int thumbnailWidth: 256
        int videoWidth: 640
        int audioWidth: 320

    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: hsluv(
            colors.hue, colors.saturation, colors.intensity * 9, 0.52
        )

    composer:
        color background: colors.strongBackground

        uploadButton:
            color background: "transparent"


mediaPlayer:
    hoverPreview:
        int maxHeight: 192

    progress:
        int height:        8
        color background:  hsluv(0, 0, 0, 0.5)

    controls:
        int iconHeight:        20
        int volumeSliderWidth: 100
        int speedSliderWidth:  100
        color background:      hsluv(
            colors.hue, colors.saturation * 1.25, colors.intensity * 2, 0.85,
        )