diff --git a/src/gui/Base/HUserAvatar.qml b/src/gui/Base/HUserAvatar.qml index 768d0ba3..82a6bc6a 100644 --- a/src/gui/Base/HUserAvatar.qml +++ b/src/gui/Base/HUserAvatar.qml @@ -35,9 +35,9 @@ HAvatar { "user-power-50" colorize: - invited ? theme.chat.roomPane.member.invitedIcon : - admin ? theme.chat.roomPane.member.adminIcon : - theme.chat.roomPane.member.moderatorIcon + invited ? theme.chat.roomPane.listView.member.invitedIcon : + admin ? theme.chat.roomPane.listView.member.adminIcon : + theme.chat.roomPane.listView.member.moderatorIcon HoverHandler { id: membershipIcon } diff --git a/src/gui/Base/MultiviewPane.qml b/src/gui/Base/MultiviewPane.qml index fd37145f..1dedca69 100644 --- a/src/gui/Base/MultiviewPane.qml +++ b/src/gui/Base/MultiviewPane.qml @@ -6,32 +6,12 @@ import QtQuick.Layouts 1.12 HDrawer { id: pane - defaultSize: buttonRepeater.summedImplicitWidth minimumSize: buttonRepeater.count > 0 ? buttonRepeater.itemAt(0).implicitWidth : 0 - background: HColumnLayout{ - Rectangle { - color: buttonsBackgroundColor - - Layout.fillWidth: true - Layout.preferredHeight: buttonFlow.height - - Behavior on Layout.preferredHeight { HNumberAnimation {} } - } - - Rectangle { - color: backgroundColor - - Layout.fillWidth: true - Layout.fillHeight: true - } - } - property color buttonsBackgroundColor - property color backgroundColor readonly property alias buttonRepeater: buttonRepeater readonly property alias swipeView: swipeView @@ -42,14 +22,20 @@ HDrawer { HColumnLayout { anchors.fill: parent - HFlow { - id: buttonFlow - populate: null + Rectangle { + color: buttonsBackgroundColor Layout.fillWidth: true + Layout.preferredHeight: childrenRect.height - HRepeater { - id: buttonRepeater + HFlow { + id: buttonFlow + width: parent.width + populate: null + + HRepeater { + id: buttonRepeater + } } } diff --git a/src/gui/MainPane/Account.qml b/src/gui/MainPane/Account.qml index da77ffae..299b1439 100644 --- a/src/gui/MainPane/Account.qml +++ b/src/gui/MainPane/Account.qml @@ -8,16 +8,16 @@ import "../Base" HTileDelegate { id: account rightPadding: 0 - backgroundColor: theme.mainPane.account.background + backgroundColor: theme.mainPane.listView.account.background opacity: collapsed && ! mainPane.filter ? - theme.mainPane.account.collapsedOpacity : 1 + theme.mainPane.listView.account.collapsedOpacity : 1 title.text: model.display_name || model.id title.font.pixelSize: theme.fontSize.big title.color: hovered ? utils.nameColor(model.display_name || model.id.substring(1)) : - theme.mainPane.account.name + theme.mainPane.listView.account.name image: HUserAvatar { userId: model.id diff --git a/src/gui/MainPane/AccountRoomsDelegate.qml b/src/gui/MainPane/AccountRoomsDelegate.qml index e8d3d786..6afe1a39 100644 --- a/src/gui/MainPane/AccountRoomsDelegate.qml +++ b/src/gui/MainPane/AccountRoomsDelegate.qml @@ -27,7 +27,7 @@ Column { view: accountRooms.view opacity: collapsed || noFilterResults ? - theme.mainPane.account.collapsedOpacity : 1 + theme.mainPane.listView.account.collapsedOpacity : 1 } HListView { diff --git a/src/gui/MainPane/AccountRoomsList.qml b/src/gui/MainPane/AccountRoomsList.qml index 11f75c59..bc504d34 100644 --- a/src/gui/MainPane/AccountRoomsList.qml +++ b/src/gui/MainPane/AccountRoomsList.qml @@ -231,4 +231,10 @@ HListView { interval: 200 onTriggered: activate() } + + Rectangle { + anchors.fill: parent + z: -100 + color: theme.mainPane.listView.background + } } diff --git a/src/gui/MainPane/BottomBar.qml b/src/gui/MainPane/BottomBar.qml index ddae296b..100f7e0a 100644 --- a/src/gui/MainPane/BottomBar.qml +++ b/src/gui/MainPane/BottomBar.qml @@ -4,60 +4,67 @@ import QtQuick 2.12 import QtQuick.Layouts 1.12 import "../Base" -HRowLayout { +Rectangle { // Hide filter field overflowing for a sec on size changes clip: true + color: theme.mainPane.bottomBar.background + property AccountRoomsList mainPaneList readonly property alias addAccountButton: addAccountButton readonly property alias filterField: filterField property alias roomFilter: filterField.text - HButton { - id: addAccountButton - icon.name: "add-account" - toolTip.text: qsTr("Add another account") - backgroundColor: theme.mainPane.settingsButton.background - onClicked: pageLoader.showPage("AddAccount/AddAccount") - Layout.fillHeight: true - } + HRowLayout { + anchors.fill: parent - HTextField { - id: filterField - saveName: "roomFilterField" + HButton { + id: addAccountButton + icon.name: "add-account" + toolTip.text: qsTr("Add another account") + backgroundColor: theme.mainPane.bottomBar.settingsButtonBackground + onClicked: pageLoader.showPage("AddAccount/AddAccount") - placeholderText: qsTr("Filter rooms") - backgroundColor: theme.mainPane.filterRooms.background - bordered: false - opacity: width >= 16 * theme.uiScale ? 1 : 0 - - Layout.fillWidth: true - Layout.fillHeight: true - - Keys.onUpPressed: mainPaneList.previous(false) // do not activate - Keys.onDownPressed: mainPaneList.next(false) - - Keys.onEnterPressed: Keys.onReturnPressed(event) - Keys.onReturnPressed: { - if (event.modifiers & Qt.ShiftModifier) { - mainPaneList.toggleCollapseAccount() - return - } - - if (window.settings.clearRoomFilterOnEnter) { - mainPaneList.setCollapseAccount(false) - text = "" - } - - mainPaneList.requestActivate() + Layout.fillHeight: true } - Keys.onEscapePressed: { - if (window.settings.clearRoomFilterOnEscape) text = "" - mainUI.pageLoader.forceActiveFocus() - } + HTextField { + id: filterField + saveName: "roomFilterField" - Behavior on opacity { HNumberAnimation {} } + placeholderText: qsTr("Filter rooms") + backgroundColor: theme.mainPane.bottomBar.filterFieldBackground + bordered: false + opacity: width >= 16 * theme.uiScale ? 1 : 0 + + Layout.fillWidth: true + Layout.fillHeight: true + + Keys.onUpPressed: mainPaneList.previous(false) // do not activate + Keys.onDownPressed: mainPaneList.next(false) + + Keys.onEnterPressed: Keys.onReturnPressed(event) + Keys.onReturnPressed: { + if (event.modifiers & Qt.ShiftModifier) { + mainPaneList.toggleCollapseAccount() + return + } + + if (window.settings.clearRoomFilterOnEnter) { + mainPaneList.setCollapseAccount(false) + text = "" + } + + mainPaneList.requestActivate() + } + + Keys.onEscapePressed: { + if (window.settings.clearRoomFilterOnEscape) text = "" + mainUI.pageLoader.forceActiveFocus() + } + + Behavior on opacity { HNumberAnimation {} } + } } } diff --git a/src/gui/MainPane/Room.qml b/src/gui/MainPane/Room.qml index 4689edf6..74619c78 100644 --- a/src/gui/MainPane/Room.qml +++ b/src/gui/MainPane/Room.qml @@ -7,8 +7,8 @@ import ".." import "../Base" HTileDelegate { - backgroundColor: theme.mainPane.room.background - opacity: model.left ? theme.mainPane.room.leftRoomOpacity : 1 + backgroundColor: theme.mainPane.listView.room.background + opacity: model.left ? theme.mainPane.listView.room.leftRoomOpacity : 1 topPadding: theme.spacing / (model.index === 0 ? 1 : 1.5) bottomPadding: theme.spacing / (model.index === view.count - 1 ? 1 : 1.5) @@ -21,7 +21,7 @@ HTileDelegate { mxc: model.avatar_url } - title.color: theme.mainPane.room.name + title.color: theme.mainPane.listView.room.name title.text: model.display_name || qsTr("Empty room") additionalInfo.children: HIcon { @@ -33,7 +33,7 @@ HTileDelegate { Behavior on Layout.maximumWidth { HNumberAnimation {} } } - subtitle.color: theme.mainPane.room.subtitle + subtitle.color: theme.mainPane.listView.room.subtitle subtitle.textFormat: Text.StyledText subtitle.font.italic: lastEvent && lastEvent.event_type === "RoomMessageEmote" @@ -55,11 +55,12 @@ HTileDelegate { return text.replace( /< *span +class=['"]?quote['"]? *>(.+?)<\/ *span *>/g, - `$1`, + `` + + `$1`, ) } - rightInfo.color: theme.mainPane.room.lastEventDate + rightInfo.color: theme.mainPane.listView.room.lastEventDate rightInfo.text: { model.last_event_date < new Date(1) ? "" : diff --git a/src/gui/MainPane/TopBar.qml b/src/gui/MainPane/TopBar.qml index b2903ab5..1d90d472 100644 --- a/src/gui/MainPane/TopBar.qml +++ b/src/gui/MainPane/TopBar.qml @@ -12,6 +12,7 @@ Rectangle { anchors.fill: parent HButton { + backgroundColor: "transparent" icon.name: "placeholder-logo" icon.color: theme.mainPane.topBar.placeholderLogo @@ -29,6 +30,7 @@ Rectangle { } HButton { + backgroundColor: "transparent" icon.name: "developper-console" toolTip.text: qsTr("Developper console") @@ -38,6 +40,7 @@ Rectangle { } HButton { + backgroundColor: "transparent" icon.name: "reload-config-files" toolTip.text: qsTr("Reload config files") @@ -47,6 +50,7 @@ Rectangle { } HButton { + backgroundColor: "transparent" icon.name: "settings" toolTip.text: qsTr("Open config folder") diff --git a/src/gui/Pages/Chat/RoomPane/MemberDelegate.qml b/src/gui/Pages/Chat/RoomPane/MemberDelegate.qml index 19cc9482..3a293d01 100644 --- a/src/gui/Pages/Chat/RoomPane/MemberDelegate.qml +++ b/src/gui/Pages/Chat/RoomPane/MemberDelegate.qml @@ -6,9 +6,9 @@ import "../../../Base" HTileDelegate { id: memberDelegate - backgroundColor: theme.chat.roomPane.member.background + backgroundColor: theme.chat.roomPane.listView.member.background contentOpacity: - model.invited ? theme.chat.roomPane.member.invitedOpacity : 1 + model.invited ? theme.chat.roomPane.listView.member.invitedOpacity : 1 image: HUserAvatar { userId: model.id @@ -23,10 +23,10 @@ HTileDelegate { title.color: memberDelegate.hovered ? utils.nameColor(model.display_name || model.id.substring(1)) : - theme.chat.roomPane.member.name + theme.chat.roomPane.listView.member.name subtitle.text: model.display_name ? model.id : "" - subtitle.color: theme.chat.roomPane.member.subtitle + subtitle.color: theme.chat.roomPane.listView.member.subtitle contextMenu: HMenu { HMenuItem { diff --git a/src/gui/Pages/Chat/RoomPane/MemberView.qml b/src/gui/Pages/Chat/RoomPane/MemberView.qml index 98f328c6..7c0e1681 100644 --- a/src/gui/Pages/Chat/RoomPane/MemberView.qml +++ b/src/gui/Pages/Chat/RoomPane/MemberView.qml @@ -27,56 +27,72 @@ HColumnLayout { Layout.fillWidth: true Layout.fillHeight: true + + Rectangle { + anchors.fill: parent + z: -100 + color: theme.chat.roomPane.listView.background + } } - HRowLayout { + Rectangle { + color: theme.chat.roomPane.bottomBar.background + + Layout.fillWidth: true Layout.minimumHeight: theme.baseElementsHeight Layout.maximumHeight: Layout.minimumHeight - HTextField { - id: filterField - saveName: "memberFilterField" - saveId: chat.roomId + HRowLayout { + anchors.fill: parent - placeholderText: qsTr("Filter members") - backgroundColor: theme.chat.roomPane.filterMembers.background - bordered: false - opacity: width >= 16 * theme.uiScale ? 1 : 0 + HTextField { + id: filterField + saveName: "memberFilterField" + saveId: chat.roomId - Layout.fillWidth: true - Layout.fillHeight: true + placeholderText: qsTr("Filter members") + backgroundColor: + theme.chat.roomPane.bottomBar.filterMembers.background + bordered: false + opacity: width >= 16 * theme.uiScale ? 1 : 0 - Behavior on opacity { HNumberAnimation {} } - } + Layout.fillWidth: true + Layout.fillHeight: true - HButton { - id: inviteButton - icon.name: "room-send-invite" - backgroundColor: theme.chat.roomPane.inviteButton.background - enabled: chat.roomInfo.can_invite + Behavior on opacity { HNumberAnimation {} } + } - toolTip.text: - enabled ? - qsTr("Invite members to this room") : - qsTr("No permission to invite members to this room") + HButton { + id: inviteButton + icon.name: "room-send-invite" + backgroundColor: + theme.chat.roomPane.bottomBar.inviteButton.background + enabled: chat.roomInfo.can_invite - topPadding: 0 // XXX - bottomPadding: 0 + toolTip.text: + enabled ? + qsTr("Invite members to this room") : + qsTr("No permission to invite members to this room") - onClicked: utils.makePopup( - "Popups/InviteToRoomPopup.qml", - chat, - { - userId: chat.userId, - roomId: chat.roomId, - roomName: chat.roomInfo.display_name, - invitingAllowed: Qt.binding(() => inviteButton.enabled), - }, - ) + topPadding: 0 // XXX + bottomPadding: 0 - // onEnabledChanged: if (openedPopup && ! enabled) + onClicked: utils.makePopup( + "Popups/InviteToRoomPopup.qml", + chat, + { + userId: chat.userId, + roomId: chat.roomId, + roomName: chat.roomInfo.display_name, + invitingAllowed: + Qt.binding(() => inviteButton.enabled), + }, + ) - Layout.fillHeight: true + // onEnabledChanged: if (openedPopup && ! enabled) + + Layout.fillHeight: true + } } } } diff --git a/src/gui/Pages/Chat/RoomPane/RoomPane.qml b/src/gui/Pages/Chat/RoomPane/RoomPane.qml index 5ab0f722..7ee51748 100644 --- a/src/gui/Pages/Chat/RoomPane/RoomPane.qml +++ b/src/gui/Pages/Chat/RoomPane/RoomPane.qml @@ -9,8 +9,8 @@ MultiviewPane { saveName: "roomPane" edge: Qt.RightEdge - buttonsBackgroundColor: theme.chat.roomPaneButtons.background - backgroundColor: theme.chat.roomPane.background + buttonsBackgroundColor: theme.chat.roomPane.topBar.background + background: Rectangle { color: theme.chat.roomPane.background } buttonRepeater.model: [ diff --git a/src/gui/Pages/Chat/Timeline/EventContent.qml b/src/gui/Pages/Chat/Timeline/EventContent.qml index c5cf5ee8..636bb31e 100644 --- a/src/gui/Pages/Chat/Timeline/EventContent.qml +++ b/src/gui/Pages/Chat/Timeline/EventContent.qml @@ -154,7 +154,7 @@ HRowLayout { (pureMedia ? 0 : parent.leftPadding + parent.rightPadding), ) height: contentColumn.height - z: -1 + z: -100 color: isOwn? theme.chat.message.ownBackground : theme.chat.message.background diff --git a/src/themes/Glass.qpl b/src/themes/Glass.qpl index 2f318627..e8c13826 100644 --- a/src/themes/Glass.qpl +++ b/src/themes/Glass.qpl @@ -30,49 +30,47 @@ fontFamily: 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 + int hue: 240 + + real intensity: 1.0 + real coloredTextIntensity: intensity * 75 + + int saturation: 60 + int bgSaturation: saturation / 1.5 + int coloredTextSaturation: saturation + 20 + + real opacity: 0.7 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 strongBackground: hsluv(hue, bgSaturation * 2, 0, opacity) - color accentBackground: - hsluv(hue, saturation * 1.5, intensity * 42, 1) - - color accentElement: - hsluv(hue, saturation * 1.5, intensity * 52, 1) - - color strongAccentElement: - hsluv(hue, saturation * 1.5, intensity * 72, 1) + color accentBackground: hsluv(hue, saturation, intensity * 42, 1) + color accentElement: hsluv(hue, saturation * 1.5, intensity * 52, 1) + color strongAccentElement: hsluv(hue, saturation * 1.5, intensity * 72, 1) color positiveBackground: - hsluv(155, saturation * 1.5, intensity * 52, Math.max(0.6, opacity)) + hsluv(155, saturation * 1.5, intensity * 52, opacity) color middleBackground: - hsluv(60, saturation * 1.5, intensity * 52, Math.max(0.6, opacity)) + hsluv(60, saturation * 1.5, intensity * 52, opacity) color negativeBackground: - hsluv(0, saturation * 1.5, intensity * 52, Math.max(0.6, opacity)) + hsluv(0, saturation * 1.5, intensity * 52, 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) + color warningText: hsluv(60, coloredTextSaturation, coloredTextIntensity) + color errorText: hsluv(0, coloredTextSaturation, coloredTextIntensity) + color accentText: hsluv(hue, coloredTextSaturation, coloredTextIntensity) + + color link: hsluv(hue, coloredTextSaturation, coloredTextIntensity) + color code: hsluv(hue + 10, coloredTextSaturation, coloredTextIntensity) // Example of an animation, set running: true to enable NumberAnimation on hue @@ -156,7 +154,9 @@ controls: color subtitle: colors.dimText listView: - color highlight: colors.strongBackground + color highlight: hsluv( + colors.hue, colors.bgSaturation * 2, 0, colors.opacity / 2, + ) color smallPaneHighlight: colors.accentBackground textField: @@ -234,8 +234,8 @@ controls: real opacity: 1.0 displayName: - int saturation: colors.saturation + 12 - int lightness: Math.min(72, colors.intensity * 72) + int saturation: colors.coloredTextSaturation + int lightness: colors.coloredTextIntensity - 4 // Specific interface parts @@ -249,39 +249,40 @@ ui: 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) - + color gradientStartColor: hsluv(0, 0, 0, 0.5) + color gradientEndColor: hsluv(0, 0, 0, 0.5) mainPane: - color background: colors.mediumBackground + color background: "transparent" topBar: color background: colors.strongBackground - color placeholderLogo: colors.strongAccentElement + color placeholderLogo: icons.colorize color nameVersionLabel: colors.text - account: - real collapsedOpacity: 0.3 - color background: "transparent" - color name: colors.text + listView: + color background: colors.mediumBackground - room: - real leftRoomOpacity: 0.65 + account: + real collapsedOpacity: 0.3 + color background: "transparent" + color name: colors.text - color background: "transparent" - color name: colors.text - color lastEventDate: colors.halfDimText + room: + real leftRoomOpacity: 0.65 - color subtitle: colors.dimText - color subtitleQuote: hsluv(135, colors.saturation * 2.25, 65) + color background: "transparent" + color name: colors.text + color lastEventDate: colors.halfDimText - settingsButton: - color background: colors.strongBackground - - filterRooms: + color subtitle: colors.dimText + color subtitleQuote: chat.message.quote + + bottomBar: color background: colors.strongBackground + color settingsButtonBackground: "transparent" + color filterFieldBackground: "transparent" chat: @@ -290,29 +291,35 @@ chat: color name: colors.text color topic: colors.dimText - roomPaneButtons: - color background: chat.roomHeader.background - roomPane: - color background: colors.mediumBackground + color background: "transparent" - 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: + topBar: color background: colors.strongBackground - filterMembers: + listView: + 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) + + bottomBar: color background: colors.strongBackground + inviteButton: + color background: "transparent" + + filterMembers: + color background: "transparent" + eventList: int ownEventsOnRightUnderWidth: 768 * theme.uiScale color background: "transparent" @@ -323,12 +330,7 @@ chat: 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 ownBackground: colors.strongBackground color body: colors.text color date: colors.dimText @@ -336,7 +338,9 @@ chat: color noticeBody: colors.halfDimText int noticeLineWidth: 1 - color quote: hsluv(135, colors.saturation * 1.5, colors.intensity * 80) + color quote: hsluv( + 135, colors.coloredTextSaturation, colors.coloredTextIntensity, + ) color link: colors.link color code: colors.code diff --git a/src/themes/Midnight.qpl b/src/themes/Midnight.qpl index 9b08dded..c0328b13 100644 --- a/src/themes/Midnight.qpl +++ b/src/themes/Midnight.qpl @@ -30,49 +30,47 @@ fontFamily: string mono: "Hack" colors: - int hue: 240 - int saturation: 60 - int bgSaturation: saturation - real intensity: 1.0 - real opacity: 1.0 - real bgOpacity: 1.0 + int hue: 240 + + real intensity: 1.0 + real coloredTextIntensity: intensity * 75 + + int saturation: 60 + int bgSaturation: saturation + int coloredTextSaturation: saturation + 20 + + real opacity: 1.0 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 strongBackground: hsluv(hue, bgSaturation * 2,intensity * 2, 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 accentBackground: hsluv(hue, saturation, intensity * 32, 1) + color accentElement: hsluv(hue, saturation * 1.5, intensity * 52, 1) + color strongAccentElement: hsluv(hue, saturation * 1.5, intensity * 72, 1) color positiveBackground: - hsluv(155, saturation * 1.5, intensity * 52, Math.max(0.6, opacity)) + hsluv(155, saturation * 1.5, intensity * 52, opacity) color middleBackground: - hsluv(60, saturation * 1.5, intensity * 52, Math.max(0.6, opacity)) + hsluv(60, saturation * 1.5, intensity * 52, opacity) color negativeBackground: - hsluv(0, saturation * 1.5, intensity * 52, Math.max(0.6, opacity)) + hsluv(0, saturation * 1.5, intensity * 52, 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) + color warningText: hsluv(60, coloredTextSaturation, coloredTextIntensity) + color errorText: hsluv(0, coloredTextSaturation, coloredTextIntensity) + color accentText: hsluv(hue, coloredTextSaturation, coloredTextIntensity) + + color link: hsluv(hue, coloredTextSaturation, coloredTextIntensity) + color code: hsluv(hue + 10, coloredTextSaturation, coloredTextIntensity) // Example of an animation, set running: true to enable NumberAnimation on hue @@ -152,11 +150,16 @@ controls: color boxHoveredBorder: colors.accentElement color boxPressedBorder: colors.strongAccentElement - color text: controls.button.text + color text: controls.button.text color subtitle: colors.dimText listView: - color highlight: colors.strongBackground + color highlight: hsluv( + colors.hue, + colors.bgSaturation * 2, + colors.intensity * 2, + colors.opacity / 2, + ) color smallPaneHighlight: colors.accentBackground textField: @@ -234,8 +237,8 @@ controls: real opacity: 1.0 displayName: - int saturation: colors.saturation + 12 - int lightness: Math.min(72, colors.intensity * 72) + int saturation: colors.coloredTextSaturation + int lightness: colors.coloredTextIntensity - 4 // Specific interface parts @@ -250,45 +253,46 @@ ui: point gradientEnd: Qt.point(window.width, window.height) color gradientStartColor: - hsluv(colors.hue - 50, 100, colors.intensity * 8, colors.bgOpacity) + hsluv(colors.hue - 50, 100, colors.intensity * 8) color gradientEndColor: - hsluv(colors.hue + 20, 30, colors.intensity * 22, colors.bgOpacity) + hsluv(colors.hue + 20, 30, colors.intensity * 22) // To have a solid color instead, // set gradientStartColor and gradientEndColor to the same value, e.g.: - // color gradientStartColor: hsluv(0, 0, 0, colors.bgOpacity) - // color gradientEndColor: hsluv(0, 0, 0, colors.bgOpacity) - + // color gradientStartColor: hsluv(0, 0, 0, 0.5) + // color gradientEndColor: hsluv(0, 0, 0, 0.5) mainPane: - color background: colors.mediumBackground + color background: "transparent" topBar: color background: colors.strongBackground - color placeholderLogo: colors.strongAccentElement + color placeholderLogo: icons.colorize color nameVersionLabel: colors.text - account: - real collapsedOpacity: 0.3 - color background: "transparent" - color name: colors.text + listView: + color background: colors.mediumBackground - room: - real leftRoomOpacity: 0.65 + account: + real collapsedOpacity: 0.3 + color background: "transparent" + color name: colors.text - color background: "transparent" - color name: colors.text - color lastEventDate: colors.halfDimText + room: + real leftRoomOpacity: 0.65 - color subtitle: colors.dimText - color subtitleQuote: hsluv(135, colors.saturation * 2.25, 65) + color background: "transparent" + color name: colors.text + color lastEventDate: colors.halfDimText - settingsButton: - color background: colors.strongBackground - - filterRooms: + color subtitle: colors.dimText + color subtitleQuote: chat.message.quote + + bottomBar: color background: colors.strongBackground + color settingsButtonBackground: "transparent" + color filterFieldBackground: "transparent" chat: @@ -297,29 +301,35 @@ chat: color name: colors.text color topic: colors.dimText - roomPaneButtons: - color background: chat.roomHeader.background - roomPane: - color background: colors.mediumBackground + color background: "transparent" - 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: + topBar: color background: colors.strongBackground - filterMembers: + listView: + 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) + + bottomBar: color background: colors.strongBackground + inviteButton: + color background: "transparent" + + filterMembers: + color background: "transparent" + eventList: int ownEventsOnRightUnderWidth: 768 * theme.uiScale color background: "transparent" @@ -330,12 +340,7 @@ chat: 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 ownBackground: colors.strongBackground color body: colors.text color date: colors.dimText @@ -343,7 +348,9 @@ chat: color noticeBody: colors.halfDimText int noticeLineWidth: 1 - color quote: hsluv(135, colors.saturation * 1.5, colors.intensity * 80) + color quote: hsluv( + 135, colors.coloredTextSaturation, colors.coloredTextIntensity, + ) color link: colors.link color code: colors.code