moment/src/themes/Glass.qpl

// vim: syntax=qml

// Base variables

real uiScale: 1.0

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

int baseElementsHeight:       36 * uiScale
int spacing:                  12 * uiScale
int radius:                   5 * uiScale
int animationDuration:        100
real loadingElementsOpacity:  0.8
real disabledElementsOpacity: 0.3


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

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

colors:
    int hue:          240
    int saturation:   60
    int bgSaturation: saturation / 1.5
    real intensity:   1.0
    real opacity:     0.7
    real bgOpacity:   0.5

    color weakBackground:   hsluv(hue, bgSaturation, intensity * 9, opacity)
    color mediumBackground: hsluv(hue, bgSaturation, intensity * 6.8, opacity)
    color strongBackground:
        hsluv(hue, bgSaturation * 2, intensity * 2, Math.max(0.6, opacity))

    color accentBackground:
        hsluv(hue, saturation * 1.5, intensity * 32, Math.max(0.9, opacity))

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

    color strongAccentElement:
        hsluv(hue, saturation * 1.5, intensity * 72, Math.max(0.6, opacity))

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

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

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

    color alertBackground: negativeBackground


    color brightText:  hsluv(0, 0, intensity * 100)
    color text:        hsluv(0, 0, intensity * 85)
    color halfDimText: hsluv(0, 0, intensity * 72)
    color dimText:     hsluv(0, 0, intensity * 60)

    color warningText: hsluv(60, saturation * 1.5, 72)
    color errorText:   hsluv(0, saturation * 1.5, 72)
    color accentText:  hsluv(hue, saturation * 1.5, 72)
    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"

    int smallDimension: 16 * uiScale
    int dimension: 22 * uiScale


// Generic UI controls

controls:
    box:
        int defaultWidth: minimumSupportedWidth
        color background: colors.mediumBackground
        int radius:       theme.radius

    popup:
        int defaultWidth: minimumSupportedWidth * 1.75
        color background: colors.mediumBackground

    header:
        color background: colors.mediumBackground

    button:
        color background: colors.strongBackground
        color text:       colors.text

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

    tab:
        color text:                controls.button.text
        color background:          controls.button.background
        color alternateBackground: hsluv(
            colors.hue,
            colors.bgSaturation * 1.25,
            colors.intensity * 4,
            Math.max(0.6, colors.opacity)
        )

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

    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.accentElement
        color boxBackground:     controls.button.background
        int boxSize:             24 * uiScale

        color boxBorder:        "black"
        color boxHoveredBorder: colors.accentElement
        color boxPressedBorder: colors.strongAccentElement

        color text: controls.button.text
        color subtitle: colors.dimText

    listView:
        color highlight: colors.strongBackground

    textField:
        color background:        colors.strongBackground
        color focusedBackground: background

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

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

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

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

    progressBar:
        int height:             Math.max(2, spacing / 2)
        color background:       colors.strongBackground
        color foreground:       colors.accentElement
        color pausedForeground: colors.middleBackground
        color errorForeground:  colors.negativeBackground

    circleProgressBar:
        int thickness:          Math.max(2, spacing / 2)
        color background:       colors.strongBackground
        color foreground:       colors.accentElement
        color errorForeground:  colors.negativeBackground
        color text:             colors.text
        real indeterminateSpan: 0.5  // 0-1

    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.strongAccentElement

    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
            int lightness:  Math.min(50, colors.intensity * 23)
            real opacity:   1.0

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

    displayName:
        int saturation: colors.saturation + 12
        int lightness:  Math.min(67, colors.intensity * 67)


// 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(0, 0, 0, colors.bgOpacity)
    color gradientEndColor: hsluv(0, 0, 0, colors.bgOpacity)



mainPane:
    color background: colors.mediumBackground

    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.strongBackground

    filterRooms:
        color background: colors.strongBackground


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

    roomPaneButtons:
        color background: chat.roomHeader.background

    roomPane:
        color background: colors.mediumBackground

        member:
            real invitedOpacity: 0.5

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

            color adminIcon:     hsluv(60, colors.saturation * 2.25, 60)
            color moderatorIcon: adminIcon
            color invitedIcon:   hsluv(0, colors.saturation * 2.25, 60)

        inviteButton:
            color background: colors.strongBackground

        filterMembers:
            color background: colors.strongBackground

    eventList:
        int ownEventsOnRightUnderWidth: 768 * theme.uiScale
        color background:               "transparent"

    message:
        int avatarSize:          58 * uiScale
        int collapsedAvatarSize: 28 * uiScale

        int radius:          theme.radius
        color background:    colors.mediumBackground
        color ownBackground: hsluv(
            colors.hue,
            colors.bgSaturation * 2,
            colors.intensity * 5,
            Math.max(0.6, opacity),
        )

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

        color noticeBody:    colors.halfDimText
        int noticeLineWidth: 1

        color quote: hsluv(135, colors.saturation * 1.5, colors.intensity * 80)
        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'

        // Prefered minimum width of file messages
        int fileMinWidth: 256 * uiScale

        // Don't scale down thumbnails below this size in pixels, if
        // the becomes too small to show it at normal size.
        size thumbnailMinSize: Qt.size(256 * uiScale, 256 * uiScale)

        // How much of the chat height thumbnails can take at most,
        // by default 0.4 for 40%.
        real thumbnailMaxHeightRatio: 0.4 * Math.min(1, uiScale)

    daybreak:
        color background: colors.mediumBackground
        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
        )

    fileTransfer:
        color background: chat.typingMembers.background

    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 iconSize:          icons.dimension
        int volumeSliderWidth: 100
        int speedSliderWidth:  100
        color background:      hsluv(
            colors.hue, colors.saturation * 1.25, colors.intensity * 2, 0.85,
        )