From 24fcb0140be04fb4987655a3b6689b3b28cdb9ae Mon Sep 17 00:00:00 2001 From: RadRussianRus Date: Thu, 7 Jun 2018 04:21:46 +0300 Subject: [PATCH] Added color scheme and new configuration options --- README.md | 32 +++--- slice/ColorScheme.qml | 196 ++++++++++++++++++++++++++++++++++ slice/LoopListPowerItem.qml | 9 +- slice/LoopListSessionItem.qml | 5 +- slice/LoopListUserItem.qml | 11 +- slice/Main.qml | 26 ++--- slice/PagePower.qml | 5 + slice/PageSessions.qml | 10 ++ slice/PageUsers.qml | 68 ++++++++---- slice/SlicedButton.qml | 49 ++++++--- slice/theme.conf | 21 +--- 11 files changed, 337 insertions(+), 95 deletions(-) create mode 100644 slice/ColorScheme.qml diff --git a/README.md b/README.md index 391eca4..99894ab 100644 --- a/README.md +++ b/README.md @@ -16,31 +16,23 @@ Simple dark SDDM theme. Create file `theme.conf.user` in theme folder. See `slice/theme.conf` for reference. -### Available options +### Base options * `font` - overall font. Defaults to `Roboto`. * `background` - path to background image. If not set, falls back to `color_bg`. Not set by default. * `bg_mode` - background image fill mode. Can be either `aspect`, `fill`, `tile` or `none`. Defaults to `aspect`. * `parallax_bg_shift` - shifting of parallax background on tab change in pixels. `0` disables parallax motion. Negative values will scroll background in opposite direction. Default is `20`. -* `color_bg` - main background color. Defaults to `#222222`. -* `color_button_bg_idle` - button background color (in idle state). Defaults to `#888888`. -* `color_button_bg_hover` - button background color (in hover state). Defaults to `#aaaaaa`. -* `color_button_bg_selected` - selected button background color (in idle state). Defaults to `#dddddd`. -* `color_button_bg_selected_hover` - selected button background color (in hover state). Defaults to `#cccccc`. -* `color_button_text` - button text color (in any state). Defaults to `#1f1f1f`. -* `color_text` - main text and foreground elements color (such as progress bar and power icons). Defaults to `#dddddd`. -* `color_placeholder_text` - placeholder text color (in password field). Defaults to `#888888`. -* `color_input_bg` - input field background color. Defaults to `#22ffffff`. -* `color_input_text` - input field background color. Defaults to `#dddddd`. -* `color_selection_bg` - selected text background color. Defaults to `#555555`. -* `color_selection_text` - selected text color. Defaults to `#dddddd`. -* `color_text_bg` - text elements background color. Defaults to `#22ffffff`. -* `color_icon_bg` - image elements background color. Defaults to `#11ffffff`. -* `color_error_bg` - error message background color. Defaults to `#11ffffff`. -* `color_error_text` - error message text color. Defaults to `#dddddd`. -* `color_progress_bar` - progress bar color. Defaults to `#dddddd`. -* `color_progress_bar_slider` - progress bar slider color. Defaults to `#dddddd`. -* `color_progress_bar_bg` - progress bar background color. Defaults to `#888888`. + +### Color scheme + +There are many color options. In fact, too many. So now they are grouped by layers in [color scheme](https://github.com/RadRussianRus/sddm-slice/wiki/Color-scheme). Most of them are optional, only mandatory options are from [layer 1](https://github.com/RadRussianRus/sddm-slice/wiki/Layer-1): + +* `color_bg` - background color. Defaults to `#222222`. +* `color_main` - main color. Defaults to `#dddddd`. +* `color_dimmed` - dimmed main color. Defaults to `#888888`. +* `color_contrast` - color that contrasting to both main and dimmed. Defaults to `#1f1f1f`. + +Info about other layers can be found on wiki: [layer 2](https://github.com/RadRussianRus/sddm-slice/wiki/Layer-2), [layer 3](https://github.com/RadRussianRus/sddm-slice/wiki/Layer-3). ## License diff --git a/slice/ColorScheme.qml b/slice/ColorScheme.qml new file mode 100644 index 0000000..03f5ffa --- /dev/null +++ b/slice/ColorScheme.qml @@ -0,0 +1,196 @@ +import QtQuick 2.7 + +Item +{ + /* * * * * * * * * * * * * * * * * * + * + * Layer 1 options + * Required + * + * * * * * * * * * * * * * * * * * */ + + // Background + property color background: config.color_bg + + // Base colors + property color main: config.color_main + property color dimmed: config.color_dimmed + property color contrast: config.color_contrast + + + /* * * * * * * * * * * * * * * * * * + * + * Layer 2 options + * Common + * + * * * * * * * * * * * * * * * * * */ + + // Text elements + property color text: + { + if (config.color_text) return config.color_text + else return main + } + property color textDimmed: + { + if (config.color_text_dimmed) return config.color_text_dimmed + else return dimmed + } + property color textBg: { + if (config.color_text_bg) return config.color_text_bg + else return Qt.rgba(main.r, main.g, main.b, 0.1) + } + property color textHover: + { + if (config.color_text_hover) return config.color_text_hover + else return text + } + property color textDimmedHover: + { + if (config.color_text_dimmed_hover) return config.color_text_dimmed_hover + else return textDimmed + } + property color textBgHover: + { + if (config.color_text_bg_hover) return config.color_text_bg_hover + else if (config.color_text_bg) return config.color_text_bg + else return Qt.rgba(main.r, main.g, main.b, 0.15) + } + + // Icon elements + property color icon: + { + if (config.color_icon) return config.color_icon + else return text + } + property color iconBg: + { + if (config.color_icon_bg) return config.color_icon_bg + else return Qt.rgba(main.r, main.g, main.b, 0.05) + } + property color iconHover: + { + if (config.color_icon_hover) return config.color_icon_hover + else if (config.color_icon) return config.color_icon + else return textHover + } + property color iconBgHover: + { + if (config.color_icon_bg_hover) return config.color_icon_bg_hover + else if (config.color_icon_bg) return config.color_icon_bg + else return Qt.rgba(main.r, main.g, main.b, 0.1) + } + + // Button text + property color buttonText: + { + if (config.color_button_text) return config.color_button_text + else return contrast + } + property color buttonTextHover: + { + if (config.color_button_text_hover) return config.color_button_text_hover + else return buttonText + } + property color buttonTextHighlighted: + { + if (config.color_button_text_selected) return config.color_button_text_selected + else return contrast + } + property color buttonTextHoverHighlighted: + { + if (config.color_button_text_selected_hover) return config.color_button_text_selected_hover + else return buttonTextHighlighted + } + + // Button background + property color buttonBg: + { + if (config.color_button_bg) return config.color_button_bg + else return Qt.rgba(dimmed.r, dimmed.g, dimmed.b, 0.9) + } + property color buttonBgHover: + { + if (config.color_button_bg_hover) return config.color_button_bg_hover + else if (config.color_button_bg) return config.color_button_bg + else return dimmed + } + property color buttonBgHighlighted: + { + if (config.color_button_bg_selected) return config.color_button_bg_selected + else return Qt.rgba(main.r, main.g, main.b, 0.9) + } + property color buttonBgHoverHighlighted: + { + if (config.color_button_bg_selected_hover) return config.color_button_bg_selected_hover + else if (config.color_button_bg_selected) return config.color_button_bg_selected + else return main + } + + // Progress bar + property color progressBar: + { + if (config.color_progress_bar) return config.color_progress_bar + else return main + } + property color progressBarBg: + { + if (config.color_progress_bar_bg) return config.color_progress_bar_bg + else return dimmed + } + + + /* * * * * * * * * * * * * * * * * * + * + * Layer 3 options + * Control types + * + * * * * * * * * * * * * * * * * * */ + + // Error message + property color errorText: + { + if (config.color_error_text) return config.color_error_text + else return text + } + property color errorBg: + { + if (config.color_error_bg) return config.color_error_bg + else return textBg + } + + // Input field + property color inputText: + { + if (config.color_input_text) return config.color_input_text + else return text + } + property color inputBg: + { + if (config.color_input_bg) return config.color_input_bg + else return textBg + } + property color inputPlaceholderText: + { + if (config.color_placeholder_text) return config.color_placeholder_text + else return textDimmed + } + property color inputSelectionText: + { + if (config.color_selection_text) return config.color_selection_text + else return inputBg + } + property color inputSelectionBg: + { + if (config.color_selection_bg) return config.color_selection_bg + else return inputText + } + + // Progress bar + property color progressBarSlider: + { + if (config.color_progress_bar_slider) return config.color_progress_bar_slider + else return progressBar + } + +} diff --git a/slice/LoopListPowerItem.qml b/slice/LoopListPowerItem.qml index c8be061..b0e8b3d 100644 --- a/slice/LoopListPowerItem.qml +++ b/slice/LoopListPowerItem.qml @@ -7,6 +7,7 @@ Item opacity: distance property int duration: 100 width: parent.width + property bool hover: false signal clicked() signal entered() @@ -43,21 +44,21 @@ Item id: powerItemIconOverlay anchors.fill: powerItemIcon source: powerItemIcon - color: config.color_text + color: ( hover ? colors.iconHover : colors.icon ) } Rectangle { width: 52 height: 52 - color: config.color_icon_bg + color: ( hover ? colors.iconBgHover : colors.iconBg ) } Text { id: descriptionLabel text: itemRoot.title - color: config.color_text + color: ( hover ? colors.textHover : colors.text ) font { @@ -75,7 +76,7 @@ Item x: 54 width: parent.width - 54 height: 52 - color: config.color_text_bg + color: ( hover ? colors.textBgHover : colors.textBg ) } MouseArea diff --git a/slice/LoopListSessionItem.qml b/slice/LoopListSessionItem.qml index 21ba5a6..982f263 100644 --- a/slice/LoopListSessionItem.qml +++ b/slice/LoopListSessionItem.qml @@ -10,13 +10,14 @@ Item property real distance: 1.0 property string sessionName: "" + property bool hover: false Text { id: sessionNameLabel anchors.centerIn: parent text: sessionName - color: config.color_text + color: ( hover ? colors.textHover : colors.text ) font { @@ -35,6 +36,6 @@ Item y: sessionNameLabel.y - 5 width: sessionNameLabel.width + 20 height: sessionNameLabel.height + 10 - color: config.color_text_bg + color: ( hover ? colors.textBgHover : colors.textBg ) } } \ No newline at end of file diff --git a/slice/LoopListUserItem.qml b/slice/LoopListUserItem.qml index 3c7c404..43480ae 100644 --- a/slice/LoopListUserItem.qml +++ b/slice/LoopListUserItem.qml @@ -7,6 +7,9 @@ Item id: itemRoot opacity: distance width: parent.width + + property bool hover: false + property bool hoverEnabled: true transform: Scale { @@ -34,14 +37,14 @@ Item { width: 68 height: 68 - color: config.color_icon_bg + color: ( hoverEnabled && hover ? colors.iconBgHover : colors.iconBg ) } Text { text: userName - color: config.color_text + color: ( hoverEnabled && hover ? colors.textHover : colors.text ) font { @@ -57,7 +60,7 @@ Item Text { text: userLogin - color: config.color_text + color: ( hoverEnabled && hover ? (userName == "" ? colors.textHover : colors.textDimmedHover ) : (userName == "" ? colors.text : colors.textDimmed ) ) y: userName == "" ? 6 : 36 font { @@ -74,6 +77,6 @@ Item y: 0 width: parent.width - 70 height: 68 - color: config.color_text_bg + color: ( hoverEnabled && hover ? colors.textBgHover : colors.textBg ) } } \ No newline at end of file diff --git a/slice/Main.qml b/slice/Main.qml index a615a6d..1c3c920 100644 --- a/slice/Main.qml +++ b/slice/Main.qml @@ -5,7 +5,7 @@ import SddmComponents 2.0 Rectangle { id: root - color: config.color_bg + color: colors.background property variant geometry: screenModel.geometry(screenModel.primary) state: "stateUsers" @@ -21,9 +21,9 @@ Rectangle PropertyChanges { target: pageSessions; enabled: false; focus: false; x: areaMain.width } PropertyChanges { target: pageUsers; enabled: false; focus: false; x: areaMain.width * 2 } - PropertyChanges { target: buttonPagePower; selected: true } - PropertyChanges { target: buttonPageSessions; selected: false } - PropertyChanges { target: buttonPageUsers; selected: false } + PropertyChanges { target: buttonPagePower; highlighted: true } + PropertyChanges { target: buttonPageSessions; highlighted: false } + PropertyChanges { target: buttonPageUsers; highlighted: false } }, State @@ -36,9 +36,9 @@ Rectangle PropertyChanges { target: pageSessions; enabled: true ; focus: true ; x: 0 } PropertyChanges { target: pageUsers; enabled: false; focus: false; x: areaMain.width } - PropertyChanges { target: buttonPagePower; selected: false } - PropertyChanges { target: buttonPageSessions; selected: true } - PropertyChanges { target: buttonPageUsers; selected: false } + PropertyChanges { target: buttonPagePower; highlighted: false } + PropertyChanges { target: buttonPageSessions; highlighted: true } + PropertyChanges { target: buttonPageUsers; highlighted: false } }, State { @@ -50,9 +50,9 @@ Rectangle PropertyChanges { target: pageSessions; enabled: false; focus: false; x: -areaMain.width } PropertyChanges { target: pageUsers; enabled: true ; focus: true ; x: 0 } - PropertyChanges { target: buttonPagePower; selected: false } - PropertyChanges { target: buttonPageSessions; selected: false } - PropertyChanges { target: buttonPageUsers; selected: true } + PropertyChanges { target: buttonPagePower; highlighted: false } + PropertyChanges { target: buttonPageSessions; highlighted: false } + PropertyChanges { target: buttonPageUsers; highlighted: true } } ] @@ -90,6 +90,8 @@ Rectangle Behavior on x { NumberAnimation { duration: 150 } } } + ColorScheme { id: colors } + Item { id: areaTop @@ -215,7 +217,7 @@ Rectangle hasLeftSlice: false text: "Caps Lock" - selected: keyboard.capsLock + highlighted: keyboard.capsLock onClicked: keyboard.capsLock = !keyboard.capsLock } @@ -227,7 +229,7 @@ Rectangle y: 5 text: "Num Lock" - selected: keyboard.numLock + highlighted: keyboard.numLock onClicked: keyboard.numLock = !keyboard.numLock } diff --git a/slice/PagePower.qml b/slice/PagePower.qml index f22f7c5..129942d 100644 --- a/slice/PagePower.qml +++ b/slice/PagePower.qml @@ -58,6 +58,7 @@ Item id: powerShutdownButton title: localeText.shutdown distance: selectedIndex == 0 ? 1.0 : 0.6 + hover: selectedIndex == 0 icon: "icons/power-off.svg" Layout.alignment: Qt.AlignVCenter @@ -73,6 +74,7 @@ Item id: powerRebootButton title: localeText.reboot distance: selectedIndex == 1 ? 1.0 : 0.6 + hover: selectedIndex == 1 icon: "icons/reboot.svg" Layout.alignment: Qt.AlignVCenter @@ -90,6 +92,7 @@ Item id: powerSuspendButton title: qsTr("Suspend") distance: selectedIndex == 2 ? 1.0 : 0.6 + hover: selectedIndex == 2 icon: "icons/suspend.svg" Layout.alignment: Qt.AlignVCenter @@ -106,6 +109,7 @@ Item id: powerHibernateButton title: qsTr("Hibernate") distance: selectedIndex == 3 ? 1.0 : 0.6 + hover: selectedIndex == 3 icon: "icons/hibernate.svg" Layout.alignment: Qt.AlignVCenter @@ -122,6 +126,7 @@ Item id: powerHybridSleepButton title: qsTr("Hybrid Sleep") distance: selectedIndex == 4 ? 1.0 : 0.6 + hover: selectedIndex == 4 icon: "icons/hybrid-sleep.svg" //Layout.fillHeight: true diff --git a/slice/PageSessions.qml b/slice/PageSessions.qml index 7c99bb8..edeb3f7 100644 --- a/slice/PageSessions.qml +++ b/slice/PageSessions.qml @@ -44,6 +44,8 @@ Item MouseArea { id: topFarItemMouseArea + onEntered: { topFarItem.hover = true } + onExited: { topFarItem.hover = false } hoverEnabled: true x: -225 width: 450 @@ -56,6 +58,8 @@ Item MouseArea { id: topMidItemMouseArea + onEntered: { topMidItem.hover = true } + onExited: { topMidItem.hover = false } y: topFarItemMouseArea.height hoverEnabled: true x: -225 @@ -69,6 +73,8 @@ Item MouseArea { id: middleItemMouseArea + onEntered: { middleItem.hover = true } + onExited: { middleItem.hover = false } y: topMidItemMouseArea.y + topMidItemMouseArea.height hoverEnabled: true x: -225 @@ -82,6 +88,8 @@ Item MouseArea { id: botMidItemMouseArea + onEntered: { botMidItem.hover = true } + onExited: { botMidItem.hover = false } y: middleItemMouseArea.y + middleItemMouseArea.height hoverEnabled: true x: -225 @@ -95,6 +103,8 @@ Item MouseArea { id: botFarItemMouseArea + onEntered: { botFarItem.hover = true } + onExited: { botFarItem.hover = false } y: botMidItemMouseArea.y + botMidItemMouseArea.height hoverEnabled: true x: -225 diff --git a/slice/PageUsers.qml b/slice/PageUsers.qml index ecbabd3..2e42d4d 100644 --- a/slice/PageUsers.qml +++ b/slice/PageUsers.qml @@ -82,64 +82,75 @@ Item MouseArea { id: topFarItemMouseArea + onEntered: { topFarItem.hover = true } + onExited: { topFarItem.hover = false } hoverEnabled: true width: parent.width height: pageRoot.height / 6 - enabled: !hasLoginShown + //enabled: !hasLoginShown - onClicked: { scrollRepeat = 1; scroll_down(); } + onClicked: { if (!hasLoginShown) { scrollRepeat = 1; scroll_down(); } } } MouseArea { id: topMidItemMouseArea + onEntered: { topMidItem.hover = true } + onExited: { topMidItem.hover = false } y: topFarItemMouseArea.height hoverEnabled: true width: parent.width height: pageRoot.height / 5 - enabled: !hasLoginShown + propagateComposedEvents: true + //enabled: !hasLoginShown - onClicked: scroll_down() + onClicked: { if (!hasLoginShown) { scroll_down(); } } } MouseArea { id: middleItemMouseArea - y: topMidItemMouseArea.y + topMidItemMouseArea.height + onEntered: { middleItem.hover = true } + onExited: { middleItem.hover = false } + y: topMidItemMouseArea.y + topMidItemMouseArea.height - (hasLoginShown ? 60 : 0) hoverEnabled: true width: parent.width height: pageRoot.height / 4 - enabled: !hasLoginShown + //enabled: !hasLoginShown - onClicked: select_or_login() + onClicked: { (hasLoginShown ? back_to_selection() : select_or_login()) } } MouseArea { id: botMidItemMouseArea + onEntered: { botMidItem.hover = true } + onExited: { botMidItem.hover = false } y: middleItemMouseArea.y + middleItemMouseArea.height hoverEnabled: true width: parent.width height: pageRoot.height / 5 - enabled: !hasLoginShown + //enabled: !hasLoginShown - onClicked: scroll_up() + onClicked: { if (!hasLoginShown) { scroll_up(); } } } MouseArea { id: botFarItemMouseArea + onEntered: { botFarItem.hover = true } + onExited: { botFarItem.hover = false } y: botMidItemMouseArea.y + botMidItemMouseArea.height hoverEnabled: true width: parent.width height: pageRoot.height / 6 - enabled: !hasLoginShown + //enabled: !hasLoginShown - onClicked: { scrollRepeat = 1; scroll_up(); } + onClicked: { if (!hasLoginShown) { scrollRepeat = 1; scroll_up(); } } } @@ -220,9 +231,9 @@ Item width: parent.width - 20 height: 25 opacity: hasLoginShown ? 1 : 0 - color: config.color_input_text - selectionColor: config.color_selection_bg - selectedTextColor: config.color_selection_text + color: colors.inputText + selectionColor: colors.inputSelectionBg + selectedTextColor: colors.inputSelectionText echoMode: TextInput.Password clip: true @@ -248,7 +259,7 @@ Item opacity: hasLoginShown ? 1 : 0 visible: passwordField.text.length <= 0 - color: config.color_placeholder_text + color: colors.inputPlaceholderText font { @@ -265,8 +276,8 @@ Item y: hasLoginShown ? pageRoot.height / 2.3 + 30 : pageRoot.height / 2.3 + 55 width: parent.width height: 40 - color: config.color_input_bg opacity: hasLoginShown ? 1 : 0 + color: colors.inputBg } Rectangle @@ -276,7 +287,7 @@ Item width: parent.width height: 2 opacity: hasLoginShown ? 1 : 0 - color: config.color_progress_bar + color: colors.progressBar } Rectangle @@ -286,7 +297,7 @@ Item width: parent.width height: 2 opacity: 0 - color: config.color_progress_bar_bg + color: colors.progressBarBg } Rectangle @@ -297,7 +308,7 @@ Item width: parent.width / 5 height: 2 opacity: 0 - color: config.color_progress_bar_slider + color: colors.progressBarSlider } Rectangle @@ -308,7 +319,7 @@ Item width: 0 height: 2 opacity: 0 - color: config.color_progress_bar_slider + color: colors.progressBarSlider } SlicedButton @@ -317,7 +328,7 @@ Item x: userListContainer.width - widthFull y: hasLoginShown ? pageRoot.height / 2.3 + 74 : pageRoot.height / 2.3 + 109 paddingTop: 2 - selected: true + highlighted: true opacity: hasLoginShown ? 1 : 0 text: localeText.login @@ -346,7 +357,7 @@ Item y: pageRoot.height / 4.7 opacity: 0 - color: config.color_error_text + color: colors.errorText font { @@ -366,7 +377,7 @@ Item y: errorMessage.y - 5 width: errorMessage.width + 20 height: errorMessage.height + 10 - color: config.color_error_bg + color: colors.errorBg opacity: 0 Behavior on opacity { NumberAnimation { duration: userListContainer.scrollDuration } } @@ -624,6 +635,7 @@ Item { if (hasLoginShown) { + middleItem.hoverEnabled = false errorMessage.opacity = 0 errorMessageBg.opacity = 0 pageRoot.lockNav() @@ -634,6 +646,11 @@ Item } else { + topFarItem.hoverEnabled = false + topMidItem.hoverEnabled = false + middleItem.hoverEnabled = true + botMidItem.hoverEnabled = false + botFarItem.hoverEnabled = false userListHideOther.start() } } @@ -642,6 +659,11 @@ Item { if (hasLoginShown) { + topFarItem.hoverEnabled = true + topMidItem.hoverEnabled = true + middleItem.hoverEnabled = true + botMidItem.hoverEnabled = true + botFarItem.hoverEnabled = true userListShowOther.start() errorMessage.opacity = 0 errorMessageBg.opacity = 0 diff --git a/slice/SlicedButton.qml b/slice/SlicedButton.qml index adf358c..7149056 100644 --- a/slice/SlicedButton.qml +++ b/slice/SlicedButton.qml @@ -11,7 +11,7 @@ Item property bool hasLeftSlice: true property bool hasRightSlice: true - property bool selected: false + property bool highlighted: false readonly property int skew: 15 readonly property int paddingLeft: hasLeftSlice ? skew : 5 @@ -21,6 +21,19 @@ Item readonly property int widthFull: buttonText.width + paddingLeft + paddingRight readonly property int widthPartial: buttonText.width + paddingLeft + property color bgIdle: colors.buttonBg + property color bgHover: colors.buttonBgHover + + property color bgIdleHighlighted: colors.buttonBgHighlighted + property color bgHoverHighlighted: colors.buttonBgHoverHighlighted + + property color textIdle: colors.buttonText + property color textHover: colors.buttonTextHover + + property color textIdleHighlighted: colors.buttonTextHighlighted + property color textHoverHighlighted: colors.buttonTextHoverHighlighted + + signal clicked() Behavior on x @@ -28,7 +41,7 @@ Item PropertyAnimation { duration: 100 } } - onSelectedChanged: + onHighlightedChanged: { buttonBgSliceLeft.requestPaint() buttonBgSliceRight.requestPaint() @@ -48,19 +61,25 @@ Item PropertyChanges { target: buttonBgSliceLeft; - bgColor: selected ? config.color_button_bg_selected : config.color_button_bg_idle + bgColor: highlighted ? bgIdleHighlighted : bgIdle } PropertyChanges { target: buttonBgCenter; - color: selected ? config.color_button_bg_selected : config.color_button_bg_idle + color: highlighted ? bgIdleHighlighted : bgIdle } PropertyChanges { target: buttonBgSliceRight; - bgColor: selected ? config.color_button_bg_selected : config.color_button_bg_idle + bgColor: highlighted ? bgIdleHighlighted : bgIdle + } + + PropertyChanges + { + target: buttonText; + color: highlighted ? textIdleHighlighted : textIdle } }, State @@ -69,19 +88,25 @@ Item PropertyChanges { target: buttonBgSliceLeft; - bgColor: selected ? config.color_button_bg_selected_hover : config.color_button_bg_hover + bgColor: highlighted ? bgHoverHighlighted : bgHover } PropertyChanges { target: buttonBgCenter; - color: selected ? config.color_button_bg_selected_hover : config.color_button_bg_hover + color: highlighted ? bgHoverHighlighted : bgHover } PropertyChanges { target: buttonBgSliceRight; - bgColor: selected ? config.color_button_bg_selected_hover : config.color_button_bg_hover + bgColor: highlighted ? bgHoverHighlighted : bgHover + } + + PropertyChanges + { + target: buttonText; + color: highlighted ? textHoverHighlighted : textHover } } ] @@ -92,7 +117,7 @@ Item width: paddingLeft height: parent.height - property string bgColor: config.color_button_bg_idle + property string bgColor: colors.buttonBg onPaint: { @@ -128,7 +153,7 @@ Item Rectangle { id: buttonBgCenter - color: config.color_button_bg_idle + color: colors.buttonBg x: paddingLeft width: buttonText.width height: parent.height @@ -160,7 +185,7 @@ Item width: paddingRight height: parent.height - property string bgColor: config.color_button_bg_idle + property string bgColor: colors.buttonBg onPaint: { @@ -194,7 +219,7 @@ Item id: buttonText x: paddingLeft y: paddingTop - color: config.color_button_text + color: colors.buttonText font { diff --git a/slice/theme.conf b/slice/theme.conf index 80a7e9d..288805b 100644 --- a/slice/theme.conf +++ b/slice/theme.conf @@ -4,21 +4,6 @@ background= bg_mode=aspect parallax_bg_shift=20 color_bg=#222222 -color_button_bg_idle=#888888 -color_button_bg_hover=#aaaaaa -color_button_bg_selected=#dddddd -color_button_bg_selected_hover=#cccccc -color_button_text=#1f1f1f -color_text=#dddddd -color_placeholder_text=#888888 -color_input_bg=#22ffffff -color_input_text=#dddddd -color_selection_bg=#555555 -color_selection_text=#dddddd -color_text_bg=#22ffffff -color_icon_bg=#11ffffff -color_error_bg=#11ffffff -color_error_text=#dddddd -color_progress_bar=#dddddd -color_progress_bar_slider=#dddddd -color_progress_bar_bg=#888888 \ No newline at end of file +color_main=#dddddd +color_dimmed=#888888 +color_contrast=#1f1f1f \ No newline at end of file