Merge pull request #16 from KamaleiZestri/master

Qt5 -> Qt6 Compatability

.gitignore

@@ -1 +1 @@
-slice/theme.conf.user
+theme.conf.user

Main.qml

@@ -1,12 +1,15 @@
 import QtQuick 2.7
-import QtGraphicalEffects 1.0
+import Qt5Compat.GraphicalEffects
 import SddmComponents 2.0
 
+import "slice"
+
 Rectangle
 {
     id: root
-    color: config.color_bg
+    color: colors.background
     property variant geometry: screenModel.geometry(screenModel.primary)
+    //property bool virtualkeyboard: bool(config.virtualkeyboard)
 
     state: "stateUsers"
     states:
@@ -15,70 +18,110 @@ Rectangle
         {
             name: "statePower"
             
-            PropertyChanges { target: background; x: geometry.x }
+            PropertyChanges { target: background; x: (config.parallax_bg_shift < 0 ? geometry.x - Math.abs(config.parallax_bg_shift*2) : geometry.x ) }
 
             PropertyChanges { target: pagePower;    enabled: true ; focus: true ; x: 0 }
             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
         {
             name: "stateSessions"
 
-            PropertyChanges { target: background; x: geometry.x - 20 }
+            PropertyChanges { target: background; x: geometry.x - Math.abs(config.parallax_bg_shift) }
 
             PropertyChanges { target: pagePower;    enabled: false; focus: false; x: -areaMain.width }
             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
         {
             name: "stateUsers"
 
-            PropertyChanges { target: background; x: geometry.x - 40 }
+            PropertyChanges { target: background; x: (config.parallax_bg_shift > 0 ? geometry.x - Math.abs(config.parallax_bg_shift*2) : geometry.x )  }
 
             PropertyChanges { target: pagePower;    enabled: false; focus: false; x: -areaMain.width * 2 }
             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  }
         }
     ]
 
+    function bool(str) {
+        if (str === null || str === undefined)
+            return false;
+
+        str = str.toLowerCase();
+
+        if (str === "false" || str === "no")
+            return false;
+        else if (str === "true" || str === "yes")
+            return true;
+
+        return Boolean(Number(str).valueOf()).valueOf();
+    }
+
+    function not_null(str) {
+        return !(str === null || str === undefined);
+    }
+
     TextConstants { id: localeText }
+    Debug { id: debug }
+
+    function bgFillMode() {
+
+        switch(config.bg_mode)
+        {
+            case "aspect":
+                return Image.PreserveAspectCrop;
+
+            case "fill":
+                return Image.Stretch;
+
+            case "tile":
+                return Image.Tile;
+
+            default:
+                return Image.Pad;
+        }
+    }
 
     Background
     {
         id: background
-        x: geometry.x - 40
+        x: (config.parallax_bg_shift > 0 ? geometry.x - Math.abs(config.parallax_bg_shift*2) : geometry.x )
         y: geometry.y
-        width: geometry.width + 40
+        width: geometry.width + Math.abs(config.parallax_bg_shift*2)
         height: geometry.height
         source: config.background
-        fillMode: Image.PreserveAspectCrop
+        fillMode: bgFillMode()
         visible: status != Image.Error
 
         Behavior on x { NumberAnimation { duration: 150 } }
     }
 
+    ColorScheme { id: colors }
+    FontScheme { id: fonts }
+
     Item
     {
         id: areaTop
         x: 0
         y: 0
         width: root.width
-        height: 35
+        height: Math.max(buttonPagePower.height, buttonPageSessions.height, buttonPageUsers.height) + 10
 
         SlicedButton
         {
@@ -86,12 +129,14 @@ Rectangle
             x: 5
             y: 5
 
-            hasLeftSlice: false
-            text: sddm.hostName ? sddm.hostName : "Hostname"
+            skewLeft: 0
+            text: debug.hostName ? debug.hostName : "Hostname"
 
-            enabled: sddm.canPowerOff || sddm.canReboot || sddm.canSuspend || sddm.canHibernate || sddm.canHybridSleep
+            enabled: debug.canPowerOff || debug.canReboot || debug.canSuspend || debug.canHibernate || debug.canHybridSleep
 
             onClicked: if (enabled) root.state = "statePower"
+
+            font: fonts.slicesTop
         }
 
         SlicedButton
@@ -103,6 +148,8 @@ Rectangle
             text: pageSessions.currentSessionName
 
             onClicked: root.state = "stateSessions"
+
+            font: fonts.slicesTop
         }
 
         SlicedButton
@@ -114,6 +161,8 @@ Rectangle
             text: pageUsers.currentUserLogin
 
             onClicked: root.state = "stateUsers"
+
+            font: fonts.slicesTop
         }
     }
 
@@ -123,7 +172,7 @@ Rectangle
         x: 0
         y: areaTop.height
         width: root.width
-        height: root.height - (areaTop.height * 2)
+        height: root.height - areaTop.height - areaBottom.height
 
         PagePower
         {
@@ -131,9 +180,6 @@ Rectangle
             width: areaMain.width
             height: areaMain.height
 
-            Keys.onTabPressed: { root.state = "stateSessions" }
-            Keys.onBacktabPressed: { root.state = "stateUsers" }
-
             Behavior on x { NumberAnimation { duration: 150 } }
         }
 
@@ -143,15 +189,6 @@ Rectangle
             width: areaMain.width
             height: areaMain.height
 
-            Keys.onTabPressed: { root.state = "stateUsers" }
-            Keys.onBacktabPressed:
-            {
-                if (buttonPagePower.enabled)
-                    root.state = "statePower"
-                else
-                    root.state = "stateSessions"
-            }
-
             Behavior on x { NumberAnimation { duration: 150 } }
 
             onSelectedIndexChanged: pageUsers.selectedSessionIndex = selectedIndex
@@ -164,63 +201,85 @@ Rectangle
             id: pageUsers
             width: areaMain.width
             height: areaMain.height
-
-            Keys.onTabPressed:
-            {
-                if (buttonPagePower.enabled)
-                    root.state = "statePower"
-                else
-                    root.state = "stateSessions"
-            }
-            Keys.onBacktabPressed: { root.state = "stateSessions" }
+            y: inputPanel.visible && inputPanel.y != areaMain.height + areaBottom.height ? -150 : 0
 
             Behavior on x { NumberAnimation { duration: 150 } }
+            Behavior on y { NumberAnimation { duration: 150 } }
 
             onLockNav: areaTop.enabled = false
             onUnlockNav: areaTop.enabled = true
         }
+
+        Loader {
+            id: inputPanel
+            source: "slice/VirtualKeyboard.qml"
+            width: areaMain.width
+            y: areaMain.height - 350 - areaBottom.height
+            Behavior on y { NumberAnimation { duration: 150 } }
+            //visible: virtualkeyboard
+            visible: false
+        }
     }
 
     Item
     {
         id: areaBottom
         x: 0
-        y: areaTop.height + areaMain.height
+        y: root.height - height
         width: root.width
-        height: 35
+        height: Math.max(
+                    buttonCapsLock.height,
+                    buttonNumLock.height,
+                    buttonKeyboardLayout.height,
+                    buttonWeekday.height,
+                    buttonDate.height,
+                    buttonTime.height
+                ) + 10
 
         SlicedButton
         {
             id: buttonCapsLock
             x: 5
-            y: 5
+            y: areaBottom.height - height - 5
 
-            hasLeftSlice: false
+            skewLeft: 0
             text: "Caps Lock"
-            selected: keyboard.capsLock
+            highlighted: keyboard.capsLock
 
             onClicked: keyboard.capsLock = !keyboard.capsLock
+
+            font: fonts.slicesBottomLeft
         }
 
         SlicedButton
         {
             id: buttonNumLock
             x: buttonCapsLock.x + buttonCapsLock.widthPartial + 3
-            y: 5
+            y: areaBottom.height - height - 5
 
             text: "Num Lock"
-            selected: keyboard.numLock
+            highlighted: keyboard.numLock
 
             onClicked: keyboard.numLock = !keyboard.numLock
+
+            font: fonts.slicesBottomLeft
         }
 
         SlicedButton
         {
             id: buttonKeyboardLayout
             x: buttonNumLock.x + buttonNumLock.widthPartial + 3
-            y: 5
+            y: areaBottom.height - height - 5
 
             text: keyboard.layouts[keyboard.currentLayout].longName
+            onClicked: {
+                var newId = keyboard.currentLayout+1;
+                if (newId >= keyboard.layouts.length)
+                    newId = 0;
+                keyboard.currentLayout = newId;
+            }
+
+            font: fonts.slicesBottomLeft
         }
 
         Item
@@ -232,42 +291,51 @@ Rectangle
             SlicedButton
             {
                 id: buttonWeekday
+                enabled: false
                 x: 5
-                y: 5
+                y: areaBottom.height - height - 5
 
                 function updateTime()
                 {
                     text = new Date().toLocaleString(Qt.locale(),
                         "dddd")
                 }
+
+                font: fonts.slicesBottomRight
             }
 
             SlicedButton
             {
                 id: buttonDate
+                enabled: false
                 x: buttonWeekday.x + buttonWeekday.widthPartial + 3
-                y: 5
+                y: areaBottom.height - height - 5
 
                 function updateTime()
                 {
                     text = new Date().toLocaleString(Qt.locale(),
                         "dd.MM.yyyy")
                 }
+
+                font: fonts.slicesBottomRight
             }
 
             SlicedButton
             {
                 id: buttonTime
+                enabled: false
                 x: buttonDate.x + buttonDate.widthPartial + 3
-                y: 5
+                y: areaBottom.height - height - 5
 
-                hasRightSlice: false
+                skewRight: 0
 
                 function updateTime()
                 {
                     text = new Date().toLocaleString(Qt.locale(),
                         "hh:mm:ss")
                 }
+
+                font: fonts.slicesBottomRight
             }
         }
 
@@ -303,14 +371,14 @@ Rectangle
             switch (root.state)
             {
                 case "statePower":
-                    if (wheel.pixelDelta.y < 0)
+                    if (wheel.angleDelta.y < 0)
                         pagePower.scroll_up()
                     else
                         pagePower.scroll_down()
                     break
 
                 case "stateSessions":
-                    if (wheel.pixelDelta.y < 0)
+                    if (wheel.angleDelta.y < 0)
                         pageSessions.scroll_up()
                     else
                         pageSessions.scroll_down()
@@ -319,7 +387,7 @@ Rectangle
                 case "stateUsers":
                     if (!pageUsers.hasLoginShown)
                     {
-                        if (wheel.pixelDelta.y < 0)
+                        if (wheel.angleDelta.y < 0)
                             pageUsers.scroll_up()
                         else
                             pageUsers.scroll_down()
@@ -328,5 +396,44 @@ Rectangle
             }
         }
     }
+
+    function nextScreen() {
+        switch(root.state)
+        {
+            case "statePower":
+                root.state = "stateSessions";
+                break;
+
+            case "stateSessions":
+                root.state = "stateUsers";
+                break;
+
+            case "stateUsers":
+                root.state = (buttonPagePower.enabled) ? "statePower" : "stateSessions";
+                break;
+        }
+    }
+
+    function previousScreen() {
+        switch(root.state)
+        {
+            case "statePower":
+                root.state = "stateUsers";
+                break;
+
+            case "stateSessions":
+                root.state = (buttonPagePower.enabled) ? "statePower" : "stateUsers";
+                break;
+
+            case "stateUsers":
+                root.state = "stateSessions";
+                break;
+        }
+    }
+
+    Keys.onTabPressed: nextScreen()
+    Keys.onBacktabPressed: previousScreen()
+    Keys.onLeftPressed: previousScreen()
+    Keys.onRightPressed: nextScreen()
 }
 

README.md

@@ -1,47 +1,77 @@
 # Slice (SDDM Theme)
 
-Simple dark SDDM theme.
+Simple dark SDDM theme with many customization options.
 
-[![Theme preview (YouTube)](http://img.youtube.com/vi/y2zzlDdJTUU/0.jpg)](https://youtu.be/y2zzlDdJTUU)
+[![Theme preview (YouTube)](https://user-images.githubusercontent.com/2903496/45325970-142dd700-b55b-11e8-8396-dc6aba6282e5.png)](https://youtu.be/X6lXkBwo--s)
 
-## Installing
+## Install from KDE system settings
+
+If you're using KDE, you can install theme from `System Settings > Startup and Shutdown > Login Screen (SDDM)`. You can download this repo as zip and install with `Install From File...`, or you can find it in `Get New Login Screens...` window.
+
+## Manual install
 
 1. Install `Qt Graphical Effects` QML module
-2. Install Roboto font (optional, you can change to other font, see below)
-3. `git clone https://github.com/RadRussianRus/sddm-slice.git`
-4. `cp -r sddm-slice/slice /usr/share/sddm/themes/slice`
-5. Open `/etc/sddm.conf` and put `Current=slice` in `[Theme]` section
+2. Install Roboto font (optional, you can change to other font, [see below](#font-scheme))
+3. `git clone https://github.com/EricKotato/sddm-slice.git`
+4. `cp -r sddm-slice /usr/share/sddm/themes/sddm-slice`
+5. Open `/etc/sddm.conf` and put `Current=sddm-slice` in `[Theme]` section
 
 ## Configuration
 
-Create file `theme.conf.user` in theme folder. See `slice/theme.conf` for reference.
+Create file `theme.conf.user` in theme folder. See `theme.conf` for reference. Also sample configs can be found [in wiki](https://github.com/EricKotato/sddm-slice/wiki#sample-configs).
 
-### Available options
+### Base options
+
+* `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`.
+* `manual` - enables manual login mode and disables user selection. You can use "0/1", "true/false" and "yes/no" on this option. Disabled by default.
+
+### Color scheme
+
+There are many color options. In fact, too many. So now they are grouped by layers in [color scheme](https://github.com/EricKotato/sddm-slice/wiki/Color-Scheme). Most of them are optional, only mandatory options are from [layer 1](https://github.com/EricKotato/sddm-slice/wiki/Color-Scheme-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/EricKotato/sddm-slice/wiki/Color-Scheme-Layer-2), [layer 3](https://github.com/EricKotato/sddm-slice/wiki/Color-Scheme-Layer-3).
+
+### Font scheme
+
+There are also many font options, so there is now [font scheme](https://github.com/EricKotato/sddm-slice/wiki/Font-Scheme) too. Most of them are optional, only mandatory option is from [layer 1](https://github.com/EricKotato/sddm-slice/wiki/Font-Scheme-Layer-1):
 
 * `font` - overall font. Defaults to `Roboto`.
-* `background` - path to background image. If not set, falls back to `color_bg`. Not set by default.
-* `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 color. Defaults to `#dddddd`.
-* `color_progress_bar_bg` - progress bar background color. Defaults to `#888888`.
+
+Info about other layers can be found on wiki: [layer 2](https://github.com/EricKotato/sddm-slice/wiki/Font-Scheme-Layer-2), [layer 3](https://github.com/EricKotato/sddm-slice/wiki/Font-Scheme-Layer-3).
+
+### Debug mode options
+
+There are some things that can't be tested well in greeter (e.g. shutdown options or login error). So there is a debug mode.
+
+#### Boolean options
+
+> You can use "0/1", "true/false" and "yes/no" on boolean options. All debug options are disabled by default.
+
+* `debug` - activates debug mode.
+* `debug_can_power_off` - sets `sddm.canPowerOff` (shows "Shutdown").
+* `debug_can_reboot` - sets `sddm.canReboot` (shows "Reboot").
+* `debug_can_suspend` - sets `sddm.canSuspend` (shows "Suspend").
+* `debug_can_hibernate` - sets `sddm.canHibernate` (shows "Hibernate").
+* `debug_can_hybrid_sleep` - sets `sddm.canHybridSleep` (shows "Hybrid Sleep").
+* `debug_login_error` - forces login error.
+
+#### Number options
+
+* `debug_login_timeout` - time between pressing "Login" and login error in seconds. Not effective if `debug_login_error` is disabled.
+
+#### String options
+
+* `debug_hostname` - sets `sddm.hostName`.
 
 ## License
 
 Icons: [Material Design Icons](https://github.com/Templarian/MaterialDesign)
 
-[![CC-BY-SA](https://i.creativecommons.org/l/by-sa/4.0/88x31.png)](http://creativecommons.org/licenses/by-sa/4.0/)
+[![CC-BY-SA](https://i.creativecommons.org/l/by-sa/4.0/88x31.png)](http://creativecommons.org/licenses/by-sa/4.0/)

metadata.desktop

@@ -2,11 +2,12 @@
 Name=Slice
 Description=Simple SDDM theme.
 Author=RadRussianRus
-Copyright=(c) 2018, RadRussianRus
+Copyright=(c) 2020, RadRussianRus
 License=CC-BY-SA
 Type=sddm-theme
-Website=https://github.com/RadRussianRus/slice-sddm
-Version=1.0
+Screenshot=screenshot.png
+Website=https://github.com/RadRussianRus/sddm-slice
+Version=1.5.1
 MainScript=Main.qml
 TranslationsDirectory=translations
-ConfigFile=theme.conf
+ConfigFile=theme.conf

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

slice/Debug.qml

@@ -0,0 +1,38 @@
+import QtQuick 2.7
+import SddmComponents 2.0
+
+Item
+{
+    readonly property bool active: bool(config.debug)
+
+    function debugbool(config_value, real_property)
+    {
+        return (active && bool(config_value)) || real_property;
+    }
+
+    function debugnum(config_value, real_property)
+    {
+        if (config_value === null || config_value === undefined)
+            return real_property;
+
+        return active ? Number(config_value).valueOf() : real_property;
+    }
+
+    function debugstr(config_value, real_property)
+    {
+        if (config_value === null || config_value === undefined)
+            return real_property;
+
+        return active ? config_value : real_property;
+    }
+
+    readonly property bool canPowerOff: debugbool(config.debug_can_power_off, sddm.canPowerOff)
+    readonly property bool canReboot: debugbool(config.debug_can_reboot, sddm.canReboot)
+    readonly property bool canSuspend: debugbool(config.debug_can_suspend, sddm.canSuspend)
+    readonly property bool canHibernate: debugbool(config.debug_can_hibernate, sddm.canHibernate)
+    readonly property bool canHybridSleep: debugbool(config.debug_can_hybrid_sleep, sddm.canHybridSleep)
+    readonly property bool loginError: debugbool(config.debug_login_error, false)
+    readonly property int loginTimeout: debugnum(config.debug_login_timeout, 0)
+    readonly property string hostName: debugstr(config.debug_hostname, sddm.hostName)
+
+}

slice/FontScheme.qml

@@ -0,0 +1,178 @@
+import QtQuick 2.7
+
+Item
+{
+    /* * * * * * * * * * * * * * * * * *
+     *
+     *  Functions
+     *
+     * * * * * * * * * * * * * * * * * */
+
+    function cap(str)
+    {
+        str = str.toLowerCase();
+
+        switch (str)
+        {
+            case 'upper':
+                return Font.AllUppercase;
+
+            case 'lower':
+                return Font.AllLowercase;
+
+            case 'smallcaps':
+                return Font.SmallCaps;
+
+            case 'capitalize':
+                return Font.Capitalize;
+
+            default:
+                return Font.MixedCase;
+        }
+    }
+
+
+    /* * * * * * * * * * * * * * * * * *
+     *
+     *  Layer 1 options
+     *  Required
+     *
+     * * * * * * * * * * * * * * * * * */
+
+    property string main: config.font
+
+
+    /* * * * * * * * * * * * * * * * * *
+     *
+     *  Layer 2 options
+     *  Common
+     *
+     * * * * * * * * * * * * * * * * * */
+
+    property font slices: Qt.font({
+        family:                  config.font_slices             ?        config.font_slices             : config.font,
+        pointSize:               config.font_slices_size        ? Number(config.font_slices_size)       : 13,
+        bold:           not_null(config.font_slices_bold)       ?   bool(config.font_slices_bold)       : true,
+        italic:         not_null(config.font_slices_italic)     ?   bool(config.font_slices_italic)     : false,
+        underline:      not_null(config.font_slices_underline)  ?   bool(config.font_slices_underline)  : false,
+        capitalization: not_null(config.font_slices_capitalize) ?    cap(config.font_slices_capitalize) : Font.AllUppercase
+    });
+
+    property font inputGroup: Qt.font({
+        family:                  config.font_input_group             ?        config.font_input_group             : config.font,
+        pointSize:               config.font_input_group_size        ? Number(config.font_input_group_size)       : 18,
+        bold:           not_null(config.font_input_group_bold)       ?   bool(config.font_input_group_bold)       : false,
+        italic:         not_null(config.font_input_group_italic)     ?   bool(config.font_input_group_italic)     : false,
+        underline:      not_null(config.font_input_group_underline)  ?   bool(config.font_input_group_underline)  : false,
+        capitalization: not_null(config.font_input_group_capitalize) ?    cap(config.font_input_group_capitalize) : Font.MixedCase
+    });
+
+    property font listItemBig: Qt.font({
+        family:                  config.font_list_item_big             ?        config.font_list_item_big             : config.font,
+        pointSize:               config.font_list_item_big_size        ? Number(config.font_list_item_big_size)       : 36,
+        bold:           not_null(config.font_list_item_big_bold)       ?   bool(config.font_list_item_big_bold)       : true,
+        italic:         not_null(config.font_list_item_big_italic)     ?   bool(config.font_list_item_big_italic)     : false,
+        underline:      not_null(config.font_list_item_big_underline)  ?   bool(config.font_list_item_big_underline)  : false,
+        capitalization: not_null(config.font_list_item_big_capitalize) ?    cap(config.font_list_item_big_capitalize) : Font.MixedCase
+    });
+
+    property font listItemMed: Qt.font({
+        family:                  config.font_list_item_med             ?        config.font_list_item_med             : config.font,
+        pointSize:               config.font_list_item_med_size        ? Number(config.font_list_item_med_size)       : 28,
+        bold:           not_null(config.font_list_item_med_bold)       ?   bool(config.font_list_item_med_bold)       : true,
+        italic:         not_null(config.font_list_item_med_italic)     ?   bool(config.font_list_item_med_italic)     : false,
+        underline:      not_null(config.font_list_item_med_underline)  ?   bool(config.font_list_item_med_underline)  : false,
+        capitalization: not_null(config.font_list_item_med_capitalize) ?    cap(config.font_list_item_med_capitalize) : Font.MixedCase
+    });
+
+    property font listItemSub: Qt.font({
+        family:                  config.font_list_item_sub             ?        config.font_list_item_sub             : config.font,
+        pointSize:               config.font_list_item_sub_size        ? Number(config.font_list_item_sub_size)       : 20,
+        bold:           not_null(config.font_list_item_sub_bold)       ?   bool(config.font_list_item_sub_bold)       : false,
+        italic:         not_null(config.font_list_item_sub_italic)     ?   bool(config.font_list_item_sub_italic)     : false,
+        underline:      not_null(config.font_list_item_sub_underline)  ?   bool(config.font_list_item_sub_underline)  : false,
+        capitalization: not_null(config.font_list_item_sub_capitalize) ?    cap(config.font_list_item_sub_capitalize) : Font.MixedCase
+    });
+
+    property font error: Qt.font({
+        family:                  config.font_error             ?        config.font_error             : config.font,
+        pointSize:               config.font_error_size        ? Number(config.font_error_size)       : 18,
+        bold:           not_null(config.font_error_bold)       ?   bool(config.font_error_bold)       : true,
+        italic:         not_null(config.font_error_italic)     ?   bool(config.font_error_italic)     : false,
+        underline:      not_null(config.font_error_underline)  ?   bool(config.font_error_underline)  : false,
+        capitalization: not_null(config.font_error_capitalize) ?    cap(config.font_error_capitalize) : Font.MixedCase
+    });
+
+    /* * * * * * * * * * * * * * * * * *
+     *
+     *  Layer 3 options
+     *  Control types
+     *
+     * * * * * * * * * * * * * * * * * */
+
+    // Slices
+    property font slicesTop: Qt.font({
+        family:                  config.font_slices_top             ?        config.font_slices_top             : slices.family,
+        pointSize:               config.font_slices_top_size        ? Number(config.font_slices_top_size)       : slices.pointSize,
+        bold:           not_null(config.font_slices_top_bold)       ?   bool(config.font_slices_top_bold)       : slices.bold,
+        italic:         not_null(config.font_slices_top_italic)     ?   bool(config.font_slices_top_italic)     : slices.italic,
+        underline:      not_null(config.font_slices_top_underline)  ?   bool(config.font_slices_top_underline)  : slices.underline,
+        capitalization: not_null(config.font_slices_top_capitalize) ?    cap(config.font_slices_top_capitalize) : slices.capitalization
+    });
+
+    property font slicesBottomLeft: Qt.font({
+        family:                  config.font_slices_bottom_left             ?        config.font_slices_bottom_left             : slices.family,
+        pointSize:               config.font_slices_bottom_left_size        ? Number(config.font_slices_bottom_left_size)       : slices.pointSize,
+        bold:           not_null(config.font_slices_bottom_left_bold)       ?   bool(config.font_slices_bottom_left_bold)       : slices.bold,
+        italic:         not_null(config.font_slices_bottom_left_italic)     ?   bool(config.font_slices_bottom_left_italic)     : slices.italic,
+        underline:      not_null(config.font_slices_bottom_left_underline)  ?   bool(config.font_slices_bottom_left_underline)  : slices.underline,
+        capitalization: not_null(config.font_slices_bottom_left_capitalize) ?    cap(config.font_slices_bottom_left_capitalize) : slices.capitalization
+    });
+
+    property font slicesBottomRight: Qt.font({
+        family:                  config.font_slices_bottom_right             ?        config.font_slices_bottom_right             : slices.family,
+        pointSize:               config.font_slices_bottom_right_size        ? Number(config.font_slices_bottom_right_size)       : slices.pointSize,
+        bold:           not_null(config.font_slices_bottom_right_bold)       ?   bool(config.font_slices_bottom_right_bold)       : slices.bold,
+        italic:         not_null(config.font_slices_bottom_right_italic)     ?   bool(config.font_slices_bottom_right_italic)     : slices.italic,
+        underline:      not_null(config.font_slices_bottom_right_underline)  ?   bool(config.font_slices_bottom_right_underline)  : slices.underline,
+        capitalization: not_null(config.font_slices_bottom_right_capitalize) ?    cap(config.font_slices_bottom_right_capitalize) : slices.capitalization
+    });
+
+    property font slicesLoginButtons: Qt.font({
+        family:                  config.font_slices_login_buttons             ?        config.font_slices_login_buttons             : slices.family,
+        pointSize:               config.font_slices_login_buttons_size        ? Number(config.font_slices_login_buttons_size)       : slices.pointSize,
+        bold:           not_null(config.font_slices_login_buttons_bold)       ?   bool(config.font_slices_login_buttons_bold)       : slices.bold,
+        italic:         not_null(config.font_slices_login_buttons_italic)     ?   bool(config.font_slices_login_buttons_italic)     : slices.italic,
+        underline:      not_null(config.font_slices_login_buttons_underline)  ?   bool(config.font_slices_login_buttons_underline)  : slices.underline,
+        capitalization: not_null(config.font_slices_login_buttons_capitalize) ?    cap(config.font_slices_login_buttons_capitalize) : slices.capitalization
+    });
+
+    // Input group
+    property font input: Qt.font({
+        family:                  config.font_input             ?        config.font_input             : inputGroup.family,
+        pointSize:               config.font_input_size        ? Number(config.font_input_size)       : inputGroup.pointSize,
+        bold:           not_null(config.font_input_bold)       ?   bool(config.font_input_bold)       : inputGroup.bold,
+        italic:         not_null(config.font_input_italic)     ?   bool(config.font_input_italic)     : inputGroup.italic,
+        underline:      not_null(config.font_input_underline)  ?   bool(config.font_input_underline)  : inputGroup.underline,
+        capitalization: not_null(config.font_input_capitalize) ?    cap(config.font_input_capitalize) : inputGroup.capitalization
+    });
+
+    property font loginInput: Qt.font({
+        family:                  config.font_login_input             ?        config.font_login_input             : inputGroup.family,
+        pointSize:               config.font_login_input_size        ? Number(config.font_login_input_size)       : inputGroup.pointSize,
+        bold:           not_null(config.font_login_input_bold)       ?   bool(config.font_login_input_bold)       : true,
+        italic:         not_null(config.font_login_input_italic)     ?   bool(config.font_login_input_italic)     : inputGroup.italic,
+        underline:      not_null(config.font_login_input_underline)  ?   bool(config.font_login_input_underline)  : inputGroup.underline,
+        capitalization: not_null(config.font_login_input_capitalize) ?    cap(config.font_login_input_capitalize) : inputGroup.capitalization
+    });
+
+    property font placeholder: Qt.font({
+        family:                  config.font_placeholder             ?        config.font_placeholder             : inputGroup.family,
+        pointSize:               config.font_placeholder_size        ? Number(config.font_placeholder_size)       : inputGroup.pointSize,
+        bold:           not_null(config.font_placeholder_bold)       ?   bool(config.font_placeholder_bold)       : inputGroup.bold,
+        italic:         not_null(config.font_placeholder_italic)     ?   bool(config.font_placeholder_italic)     : inputGroup.italic,
+        underline:      not_null(config.font_placeholder_underline)  ?   bool(config.font_placeholder_underline)  : inputGroup.underline,
+        capitalization: not_null(config.font_placeholder_capitalize) ?    cap(config.font_placeholder_capitalize) : inputGroup.capitalization
+    });
+
+}

slice/LoopListPowerItem.qml

@@ -1,5 +1,5 @@
 import QtQuick 2.7
-import QtGraphicalEffects 1.0
+import Qt5Compat.GraphicalEffects
 
 Item
 {
@@ -7,14 +7,15 @@ Item
     opacity: distance
     property int duration: 100
     width: parent.width
+    property bool hover: false
 
     signal clicked()
     signal entered()
 
     transform: Scale
     {
-        origin.x: 54
-        origin.y: 29
+        origin.x: descriptionLabel.height + 10 + 2
+        origin.y: descriptionLabel.height + 10 / 2
         xScale: distance
         yScale: distance
     }
@@ -28,14 +29,22 @@ Item
     property string icon: "icons/no_avatar.svg"
     property string title: ""
 
+    Rectangle
+    {
+        width: descriptionLabel.height + 10
+        height: descriptionLabel.height + 10
+        color: ( hover ? colors.iconBgHover : colors.iconBg )
+    }
+
     Image
     {
         id: powerItemIcon
         source: icon
-        sourceSize.width: 48
-        sourceSize.height: 48
+        sourceSize.width: descriptionLabel.height + 10 - 4
+        sourceSize.height: descriptionLabel.height + 10 - 4
         x: 2
         y: 2
+        opacity: 0
     }
 
     ColorOverlay
@@ -43,45 +52,36 @@ Item
         id: powerItemIconOverlay
         anchors.fill: powerItemIcon
         source: powerItemIcon
-        color: config.color_text
+        color: ( hover ? colors.iconHover : colors.icon )
+        opacity: parent.opacity
     }
 
     Rectangle
     {
-        width: 52
-        height: 52
-        color: config.color_icon_bg
+        x: descriptionLabel.height + 10 + 2
+        width: parent.width - descriptionLabel.height + 10 - 2
+        height: descriptionLabel.height + 10
+        color: ( hover ? colors.textBgHover : colors.textBg )
     }
 
     Text
     {
         id: descriptionLabel
         text: itemRoot.title
-        color: config.color_text
+        color: ( hover ? colors.textHover : colors.text )
+        width: parent.width - descriptionLabel.height + 10 - 2 - 24
 
-        font
-        {
-            family: config.font
-            pointSize: 28
-            bold: true
-        }
+        font: fonts.listItemMed
+        elide: Text.ElideRight
 
-        x: 64
+        x: descriptionLabel.height + 10 + 12
         y: 5
     }
 
-    Rectangle
-    {
-        x: 54
-        width: parent.width - 54
-        height: 52
-        color: config.color_text_bg
-    }
-
     MouseArea
     {
         width: descriptionLabel.x + descriptionLabel.width
-        height: 52
+        height: descriptionLabel.height + 10
         hoverEnabled: true
 
         onClicked: itemRoot.clicked()

slice/LoopListSessionItem.qml

@@ -1,33 +1,17 @@
 import QtQuick 2.7
-import QtGraphicalEffects 1.0
+import Qt5Compat.GraphicalEffects
 import SddmComponents 2.0
 
 Item
 {
     id: itemRoot
-    opacity: distance
-    scale: distance
+    opacity: computedDistance
+    scale: computedDistance
 
     property real distance: 1.0
+    readonly property real computedDistance: Math.sin(Math.PI / 2 * distance)
     property string sessionName: ""
-
-    Text
-    {
-        id: sessionNameLabel
-        anchors.centerIn: parent
-        text: sessionName
-        color: config.color_text
-
-        font
-        {
-            family: config.font
-            pointSize: 28
-            bold: true
-        }
-
-        x: parent.x + 10
-        y: 5
-    }
+    property bool hover: false
 
     Rectangle
     {
@@ -35,6 +19,19 @@ Item
         y: sessionNameLabel.y - 5
         width: sessionNameLabel.width + 20
         height: sessionNameLabel.height + 10
-        color: config.color_text_bg
+        color: ( hover ? colors.textBgHover : colors.textBg )
+    }
+
+    Text
+    {
+        id: sessionNameLabel
+        anchors.centerIn: parent
+        text: sessionName
+        color: ( hover ? colors.textHover : colors.text )
+
+        font: fonts.listItemMed
+
+        x: parent.x + 10
+        y: 5
     }
 }

slice/LoopListUserItem.qml

@@ -1,79 +1,83 @@
 import QtQuick 2.7
-import QtGraphicalEffects 1.0
+import Qt5Compat.GraphicalEffects
 import SddmComponents 2.0
 
 Item
 {
     id: itemRoot
-    opacity: distance
+    opacity: computedDistance
     width: parent.width
+    height: userName == "" ? userLoginText.height + 14 : userNameText.height + userLoginText.height - 4
+    
+    property bool hover: false
+    property bool hoverEnabled: true
 
     transform: Scale
     {
-        origin.x: 80
-        xScale: distance
-        yScale: distance
+        origin.x: itemRoot.height + 12
+        xScale: computedDistance
+        yScale: computedDistance
     }
 
     property real distance: 1.0
+    readonly property real computedDistance: Math.sin(Math.PI / 2 * distance)
     property string userName: ""
     property string userLogin: ""
     property string userAvatar: "icons/no_avatar.svg"
 
+    Rectangle
+    {
+        width: itemRoot.height
+        height: itemRoot.height
+        color: ( hoverEnabled && hover ? colors.iconBgHover : colors.iconBg )
+    }
+
     Image
     {
         id: profilePicture
         source: userAvatar
-        sourceSize.width: 60
-        sourceSize.height: 60
+        sourceSize.width: itemRoot.height - 8
+        sourceSize.height: itemRoot.height - 8
         x: 4
         y: 4
     }
 
     Rectangle
     {
-        width: 68
-        height: 68
-        color: config.color_icon_bg
+        x: itemRoot.height + 2
+        y: 0
+        width: parent.width - itemRoot.height - 2
+        height: itemRoot.height
+        color: ( hoverEnabled && hover ? colors.textBgHover : colors.textBg )
     }
 
-
     Text
     {
+        id: userNameText
         text: userName
-        color: config.color_text
+        color: ( hoverEnabled && hover ? colors.textHover : colors.text )
         
-        font
-        {
-            family: config.font
-            pointSize: 28
-            bold: true
-        }
+        font: fonts.listItemMed
 
-        x: 80
+        elide: Text.ElideRight
+
+        x: itemRoot.height + 12
         y: 0
+
+        width: itemRoot.width - itemRoot.height - 26
     }
 
     Text
     {
+        id: userLoginText
         text: userLogin
-        color: config.color_text
-        y: userName == "" ? 6 : 36
-        font
-        {
-            family: config.font
-            pointSize: userName == "" ? 36 : 20
-            bold: userName == ""
-        }
-        x: 80
-    }
+        color: ( hoverEnabled && hover ? (userName == "" ? colors.textHover : colors.textDimmedHover ) : (userName == "" ? colors.text : colors.textDimmed ) )
+        y: userName == "" ? 7 : userNameText.height * 0.8
+        font: userName == "" ? fonts.listItemBig : fonts.listItemSub
+        x: itemRoot.height + 12
 
-    Rectangle
-    {
-        x: 70
-        y: 0
-        width: parent.width - 70
-        height: 68
-        color: config.color_text_bg
+        elide: Text.ElideRight
+
+        width: itemRoot.width - itemRoot.height - 26
     }
 }

slice/PagePower.qml

@@ -1,5 +1,5 @@
 import QtQuick 2.7
-import QtGraphicalEffects 1.0
+import Qt5Compat.GraphicalEffects
 import SddmComponents 2.0
 import QtQuick.Layouts 1.3
 
@@ -10,11 +10,11 @@ Item
 
     property int selectedIndex:
     {
-        if (sddm.canPowerOff) return 0
-        else if (sddm.canReboot) return 1
-        else if (sddm.canSuspend) return 2
-        else if (sddm.canHibernate) return 3
-        else if (sddm.canHybridSleep) return 4
+        if (debug.canPowerOff) return 0
+        else if (debug.canReboot) return 1
+        else if (debug.canSuspend) return 2
+        else if (debug.canHibernate) return 3
+        else if (debug.canHybridSleep) return 4
         else return 0
     }
 
@@ -58,12 +58,13 @@ 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
             Layout.minimumHeight: 48
 
-            visible: sddm.canPowerOff
+            visible: debug.canPowerOff
             onEntered: selectedIndex = 0
             onClicked: { selectedIndex = 0; execute() }
         }
@@ -73,12 +74,13 @@ Item
             id: powerRebootButton
             title: localeText.reboot
             distance: selectedIndex == 1 ? 1.0 : 0.6
+            hover: selectedIndex == 1
             icon: "icons/reboot.svg"
 
             Layout.alignment: Qt.AlignVCenter
             Layout.minimumHeight: 48
 
-            visible: sddm.canReboot
+            visible: debug.canReboot
 
             onEntered: selectedIndex = 1
             onClicked: { selectedIndex = 1; execute() }
@@ -90,12 +92,13 @@ Item
             id: powerSuspendButton
             title: qsTr("Suspend")
             distance: selectedIndex == 2 ? 1.0 : 0.6
+            hover: selectedIndex == 2
             icon: "icons/suspend.svg"
 
             Layout.alignment: Qt.AlignVCenter
             Layout.minimumHeight: 48
 
-            visible: sddm.canSuspend
+            visible: debug.canSuspend
 
             onEntered: selectedIndex = 2
             onClicked: { selectedIndex = 2; execute() }
@@ -106,12 +109,13 @@ Item
             id: powerHibernateButton
             title: qsTr("Hibernate")
             distance: selectedIndex == 3 ? 1.0 : 0.6
+            hover: selectedIndex == 3
             icon: "icons/hibernate.svg"
 
             Layout.alignment: Qt.AlignVCenter
             Layout.minimumHeight: 48
 
-            visible: sddm.canHibernate
+            visible: debug.canHibernate
 
             onEntered: selectedIndex = 3
             onClicked: { selectedIndex = 3; execute() }
@@ -122,13 +126,14 @@ 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
             Layout.alignment: Qt.AlignVCenter
             Layout.minimumHeight: 48
 
-            visible: sddm.canHybridSleep
+            visible: debug.canHybridSleep
 
             onEntered: selectedIndex = 4
             onClicked: { selectedIndex = 4; execute() }
@@ -163,23 +168,23 @@ Item
             switch (result)
             {
                 case 0:
-                    if (sddm.canPowerOff) actionFound = true
+                    if (debug.canPowerOff) actionFound = true
                     break
 
                 case 1:
-                    if (sddm.canReboot) actionFound = true
+                    if (debug.canReboot) actionFound = true
                     break
 
                 case 2:
-                    if (sddm.canSuspend) actionFound = true
+                    if (debug.canSuspend) actionFound = true
                     break
 
                 case 3:
-                    if (sddm.canHibernate) actionFound = true
+                    if (debug.canHibernate) actionFound = true
                     break
 
                 case 4:
-                    if (sddm.canHybridSleep) actionFound = true
+                    if (debug.canHybridSleep) actionFound = true
                     break
             }
 
@@ -206,23 +211,23 @@ Item
             switch (result)
             {
                 case 0:
-                    if (sddm.canPowerOff) actionFound = true
+                    if (debug.canPowerOff) actionFound = true
                     break
 
                 case 1:
-                    if (sddm.canReboot) actionFound = true
+                    if (debug.canReboot) actionFound = true
                     break
 
                 case 2:
-                    if (sddm.canSuspend) actionFound = true
+                    if (debug.canSuspend) actionFound = true
                     break
 
                 case 3:
-                    if (sddm.canHibernate) actionFound = true
+                    if (debug.canHibernate) actionFound = true
                     break
 
                 case 4:
-                    if (sddm.canHybridSleep) actionFound = true
+                    if (debug.canHybridSleep) actionFound = true
                     break
             }
 

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

slice/PageUsers.qml

@@ -10,6 +10,7 @@ Item
     property int scrollRepeat: 0
     property string currentUserLogin: get_login(0)
     property bool hasLoginShown: true
+    property bool manual: bool(config.manual)
 
     signal lockNav()
     signal unlockNav()
@@ -67,8 +68,12 @@ Item
 
     onFocusChanged:
     {
-        if (focus && hasLoginShown)
-            passwordField.forceActiveFocus()
+        if (focus && hasLoginShown) {
+            if (manual)
+                loginField.forceActiveFocus()
+            else
+                passwordField.forceActiveFocus()
+        }
     }
 
     Item
@@ -82,64 +87,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(); } }
 
         }
 
@@ -176,10 +192,11 @@ Item
         LoopListUserItem
         {
             id: middleItem
-            y: hasLoginShown ? pageRoot.height / 2.3 - 40 : pageRoot.height / 2.3
+            y: hasLoginShown ? pageRoot.height / 2.3 - (middleItem.height / 2 + passwordFieldBg.height + progressBar.height + 2 + buttonUserLogin.height) / 2 : pageRoot.height / 2.3
             userName: get_name(0)
             userLogin: get_login(0)
             userAvatar: get_avatar(0)
+            visible: !manual
         }
 
         LoopListUserItem
@@ -212,150 +229,178 @@ Item
             userAvatar: get_avatar(3)
         }
 
-        TextInput
-        {
-            id: passwordField
-            x: 10
-            y: hasLoginShown ? pageRoot.height / 2.3 + 37 : pageRoot.height / 2.3 + 62
-            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
+        Item {
+            id: loginControls
+            y: manual ? middleItem.y : middleItem.y + middleItem.height + 2
+            width: parent.width
 
-            echoMode: TextInput.Password
-            clip: true
-            selectByMouse: true
-            
-            font
+            Rectangle
             {
-                family: config.font
-                bold: true
-                pointSize: 18
+                id: loginFieldBg
+                y: 0
+                width: parent.width
+                height: Math.max(fonts.input.pointSize, fonts.placeholder.pointSize) + 20
+                opacity: hasLoginShown && manual ? 1 : 0
+                color: colors.inputBg
             }
 
-            Component.onCompleted: forceActiveFocus()
-
-        }
-
-        Text
-        {
-            id: passwordFieldPlaceholder
-            x: passwordField.x
-            y: passwordField.y
-            width: passwordField.width
-            opacity: hasLoginShown ? 1 : 0
-            visible: passwordField.text.length <= 0
-
-            color: config.color_placeholder_text
-
-            font
+            TextInput
             {
-                family: config.font
-                bold: true
-                pointSize: 18
+                id: loginField
+                x: 10
+                y: (loginFieldBg.height - height) / 2 + loginFieldBg.y
+                width: parent.width - 20
+                opacity: hasLoginShown && manual ? 1 : 0
+                color: colors.inputText
+                selectionColor: colors.inputSelectionBg
+                selectedTextColor: colors.inputSelectionText
+
+                clip: true
+                selectByMouse: true
+                
+                font: fonts.loginInput
+
+                Component.onCompleted: if (manual) forceActiveFocus()
+                Keys.onTabPressed: passwordField.forceActiveFocus()
             }
 
-            text: localeText.password
-        }
-
-        Rectangle {
-            id: passwordFieldBg
-            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
-        }
-
-        Rectangle
-        {
-            id: progressBar
-            y: hasLoginShown ? pageRoot.height / 2.3 + 70 : pageRoot.height / 2.3 + 105
-            width: parent.width
-            height: 2
-            opacity: hasLoginShown ? 1 : 0
-            color: config.color_progress_bar
-        }
-
-        Rectangle
-        {
-            id: progressBarBg
-            y: progressBar.y
-            width: parent.width
-            height: 2
-            opacity: 0
-            color: config.color_progress_bar_bg
-        }
-
-        Rectangle
-        {
-            id: progressBarSlider1
-            x: 0
-            y: progressBar.y
-            width: parent.width / 5
-            height: 2
-            opacity: 0
-            color: config.color_progress_bar_slider
-        }
-
-        Rectangle
-        {
-            id: progressBarSlider2
-            x: parent.width
-            y: progressBar.y
-            width: 0
-            height: 2
-            opacity: 0
-            color: config.color_progress_bar_slider
-        }
-
-        SlicedButton
-        {
-            id: buttonUserLogin
-            x: userListContainer.width - widthFull
-            y: hasLoginShown ? pageRoot.height / 2.3 + 74 : pageRoot.height / 2.3 + 109
-            paddingTop: 2
-            selected: true
-            opacity: hasLoginShown ? 1 : 0
-
-            text: localeText.login
-
-            onClicked: select_or_login()
-        }
-
-        SlicedButton
-        {
-            id: buttonUserBack
-            x: userListContainer.width - widthFull - buttonUserLogin.widthPartial - 3
-            y: hasLoginShown ? pageRoot.height / 2.3 + 74 : pageRoot.height / 2.3 + 109
-            paddingTop: 2
-            opacity: hasLoginShown ? 1 : 0
-
-            text: qsTr("Back")
-
-            onClicked: back_to_selection()
-        }
-
-        Text
-        {
-            id: errorMessage
-            text: localeText.loginFailed
-            anchors.horizontalCenter: parent.horizontalCenter
-            y: pageRoot.height / 4.7
-            opacity: 0
-
-            color: config.color_error_text
-
-            font
+            Text
             {
-                family: config.font
-                bold: true
-                pointSize: 18
+                id: loginFieldPlaceholder
+                x: loginField.x
+                y: (loginFieldBg.height - height) / 2 + loginFieldBg.y
+                width: loginField.width
+                opacity: hasLoginShown && manual ? 1 : 0
+                visible: loginField.text.length <= 0
+
+                color: colors.inputPlaceholderText
+
+                font: fonts.placeholder
+
+                text: localeText.userName
             }
 
-            Behavior on opacity { NumberAnimation { duration: userListContainer.scrollDuration } }
+            Rectangle
+            {
+                id: passwordFieldBg
+                y: manual ? loginFieldBg.y + loginFieldBg.height + 2 : 0
+                width: parent.width
+                height: Math.max(fonts.input.pointSize, fonts.placeholder.pointSize) + 20
+                opacity: hasLoginShown ? 1 : 0
+                color: colors.inputBg
+            }
+
+            TextInput
+            {
+                id: passwordField
+                x: 10
+                y: (passwordFieldBg.height - height) / 2 + passwordFieldBg.y
+                width: parent.width - 20
+                opacity: hasLoginShown ? 1 : 0
+                color: colors.inputText
+                selectionColor: colors.inputSelectionBg
+                selectedTextColor: colors.inputSelectionText
+
+                echoMode: TextInput.Password
+                clip: true
+                selectByMouse: true
+                
+                font: fonts.input
+
+                Component.onCompleted: forceActiveFocus()
+                Keys.onBacktabPressed: { if (manual) loginField.forceActiveFocus(); else event.accepted = false; }
+
+            }
+
+            Text
+            {
+                id: passwordFieldPlaceholder
+                x: passwordField.x
+                y: (passwordFieldBg.height - height) / 2 + passwordFieldBg.y
+                width: passwordField.width
+                opacity: hasLoginShown ? 1 : 0
+                visible: passwordField.text.length <= 0
+
+                color: colors.inputPlaceholderText
+
+                font: fonts.placeholder
+
+                text: localeText.password
+            }
+
+            Rectangle
+            {
+                id: progressBar
+                y: passwordFieldBg.y + passwordFieldBg.height
+                width: parent.width
+                height: 2
+                opacity: hasLoginShown ? 1 : 0
+                color: colors.progressBar
+            }
+
+            Rectangle
+            {
+                id: progressBarBg
+                y: progressBar.y
+                width: parent.width
+                height: 2
+                opacity: 0
+                color: colors.progressBarBg
+            }
+
+            Rectangle
+            {
+                id: progressBarSlider1
+                x: 0
+                y: progressBar.y
+                width: parent.width / 5
+                height: 2
+                opacity: 0
+                color: colors.progressBarSlider
+            }
+
+            Rectangle
+            {
+                id: progressBarSlider2
+                x: parent.width
+                y: progressBar.y
+                width: 0
+                height: 2
+                opacity: 0
+                color: colors.progressBarSlider
+            }
+
+            SlicedButton
+            {
+                id: buttonUserLogin
+                x: userListContainer.width - widthFull
+                y: progressBar.y + progressBar.height + 2
+                paddingTop: 2
+                highlighted: true
+                opacity: hasLoginShown ? 1 : 0
+
+                text: localeText.login
+
+                onClicked: select_or_login()
+
+                font: fonts.slicesLoginButtons
+            }
+
+            SlicedButton
+            {
+                id: buttonUserBack
+                x: userListContainer.width - widthFull - buttonUserLogin.widthPartial - 3
+                y: buttonUserLogin.y
+                paddingTop: 2
+                opacity: hasLoginShown ? 1 : 0
+                visible: !manual
+
+                text: qsTr("Back")
+
+                onClicked: back_to_selection()
+
+                font: fonts.slicesLoginButtons
+            }
 
         }
 
@@ -366,12 +411,28 @@ 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 } }
         }
 
+        Text
+        {
+            id: errorMessage
+            text: localeText.loginFailed
+            anchors.horizontalCenter: parent.horizontalCenter
+            y: pageRoot.height / 4.7
+            opacity: 0
+
+            color: colors.errorText
+
+            font: fonts.error
+
+            Behavior on opacity { NumberAnimation { duration: userListContainer.scrollDuration } }
+
+        }
+
         ParallelAnimation
         {
             id: progressBarLoop
@@ -417,8 +478,11 @@ Item
             NumberAnimation { target: botMidItem; property: "distance"; to: 0; duration: userListContainer.scrollDuration }
             NumberAnimation { target: botFarItem; property: "distance"; to: 0; duration: userListContainer.scrollDuration }
 
-            NumberAnimation { target: middleItem; property: "y"; to: pageRoot.height / 2.3 - 40; duration: userListContainer.scrollDuration }
+            NumberAnimation { target: middleItem; property: "y"; to: pageRoot.height / 2.3 - (middleItem.height / 2 + passwordFieldBg.height + progressBar.height + 2 + buttonUserLogin.height) / 2; duration: userListContainer.scrollDuration }
 
+            NumberAnimation { target: loginField; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
+            NumberAnimation { target: loginFieldPlaceholder; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
+            NumberAnimation { target: loginFieldBg; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
             NumberAnimation { target: passwordField; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
             NumberAnimation { target: passwordFieldPlaceholder; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
             NumberAnimation { target: passwordFieldBg; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
@@ -426,12 +490,6 @@ Item
             NumberAnimation { target: buttonUserBack; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
             NumberAnimation { target: buttonUserLogin; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
 
-            NumberAnimation { target: passwordField; property: "y"; to: pageRoot.height / 2.3 + 37; duration: userListContainer.scrollDuration }
-            NumberAnimation { target: passwordFieldBg; property: "y"; to: pageRoot.height / 2.3 + 30; duration: userListContainer.scrollDuration }
-            NumberAnimation { target: progressBar; property: "y"; to: pageRoot.height / 2.3 + 70; duration: userListContainer.scrollDuration }
-            NumberAnimation { target: buttonUserBack; property: "y"; to: pageRoot.height / 2.3 + 74; duration: userListContainer.scrollDuration }
-            NumberAnimation { target: buttonUserLogin; property: "y"; to: pageRoot.height / 2.3 + 74; duration: userListContainer.scrollDuration }
-
             onStopped: 
             {
                 hasLoginShown = true
@@ -449,6 +507,9 @@ Item
 
             NumberAnimation { target: middleItem; property: "y"; to: pageRoot.height / 2.3; duration: userListContainer.scrollDuration }
 
+            NumberAnimation { target: loginField; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
+            NumberAnimation { target: loginFieldPlaceholder; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
+            NumberAnimation { target: loginFieldBg; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
             NumberAnimation { target: passwordField; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
             NumberAnimation { target: passwordFieldPlaceholder; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
             NumberAnimation { target: passwordFieldBg; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
@@ -456,12 +517,6 @@ Item
             NumberAnimation { target: buttonUserBack; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
             NumberAnimation { target: buttonUserLogin; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
 
-            NumberAnimation { target: passwordField; property: "y"; to: pageRoot.height / 2.3 + 62; duration: userListContainer.scrollDuration }
-            NumberAnimation { target: passwordFieldBg; property: "y"; to: pageRoot.height / 2.3 + 55; duration: userListContainer.scrollDuration }
-            NumberAnimation { target: progressBar; property: "y"; to: pageRoot.height / 2.3 + 105; duration: userListContainer.scrollDuration }
-            NumberAnimation { target: buttonUserBack; property: "y"; to: pageRoot.height / 2.3 + 109; duration: userListContainer.scrollDuration }
-            NumberAnimation { target: buttonUserLogin; property: "y"; to: pageRoot.height / 2.3 + 109; duration: userListContainer.scrollDuration }
-
             onStopped:
             {
                 hasLoginShown = false
@@ -550,7 +605,7 @@ Item
             id: loginEnterAnimation
             NumberAnimation { target: passwordField; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
             NumberAnimation { target: passwordFieldBg; property: "height"; to: 0; duration: userListContainer.scrollDuration }
-            NumberAnimation { target: passwordFieldBg; property: "y"; to: pageRoot.height / 2.3 + 70; duration: userListContainer.scrollDuration }
+            NumberAnimation { target: loginControls; property: "y"; to: pageRoot.height / 2.3 - (middleItem.height / 2 + progressBar.height + 2) / 2; duration: userListContainer.scrollDuration }
             NumberAnimation { target: passwordFieldPlaceholder; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
             NumberAnimation { target: buttonUserBack; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
             NumberAnimation { target: buttonUserLogin; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
@@ -567,7 +622,7 @@ Item
             id: loginExitAnimation
             NumberAnimation { target: passwordField; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
             NumberAnimation { target: passwordFieldBg; property: "height"; to: 40; duration: userListContainer.scrollDuration }
-            NumberAnimation { target: passwordFieldBg; property: "y"; to: pageRoot.height / 2.3 + 30; duration: userListContainer.scrollDuration }
+            NumberAnimation { target: loginControls; property: "y"; to: pageRoot.height / 2.3 - (middleItem.height / 2 + passwordFieldBg.height + progressBar.height + 2 + buttonUserLogin.height) / 2; duration: userListContainer.scrollDuration }
             NumberAnimation { target: passwordFieldPlaceholder; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
             NumberAnimation { target: buttonUserBack; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
             NumberAnimation { target: buttonUserLogin; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
@@ -575,7 +630,7 @@ Item
             NumberAnimation { target: progressBarSlider1; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
             NumberAnimation { target: progressBarSlider2; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
             NumberAnimation { target: progressBarBg; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
-            NumberAnimation { target: middleItem; property: "y"; to: pageRoot.height / 2.3 - 40; duration: userListContainer.scrollDuration }
+            NumberAnimation { target: middleItem; property: "y"; to: pageRoot.height / 2.3 - (middleItem.height / 2 + passwordFieldBg.height + progressBar.height + 2 + buttonUserLogin.height) / 2; duration: userListContainer.scrollDuration }
 
             onStopped:
             {
@@ -624,34 +679,79 @@ Item
     {
         if (hasLoginShown)
         {
+            middleItem.hoverEnabled = false
             errorMessage.opacity = 0
             errorMessageBg.opacity = 0
             pageRoot.lockNav()
             pageRoot.enabled = false
             progressBarLoop.start()
             loginEnterAnimation.start()
-            sddm.login(currentUserLogin, passwordField.text, selectedSessionIndex)
+            if (debug.loginError)
+                loginTimeoutTimer.start()
+            else {
+                if (manual)
+                    sddm.login(loginField.text, passwordField.text, selectedSessionIndex)
+                else
+                    sddm.login(currentUserLogin, passwordField.text, selectedSessionIndex)
+            }
         }
-        else
+        else if (!manual)
         {
+            topFarItem.hoverEnabled = false
+            topMidItem.hoverEnabled = false
+            middleItem.hoverEnabled = true
+            botMidItem.hoverEnabled = false
+            botFarItem.hoverEnabled = false
             userListHideOther.start()
         }
     }
 
     function back_to_selection()
     {
-        if (hasLoginShown)
+        if (hasLoginShown && !manual)
         {
+            topFarItem.hoverEnabled = true
+            topMidItem.hoverEnabled = true
+            middleItem.hoverEnabled = true
+            botMidItem.hoverEnabled = true
+            botFarItem.hoverEnabled = true
             userListShowOther.start()
             errorMessage.opacity = 0
             errorMessageBg.opacity = 0
         }
     }
 
-    Keys.onUpPressed: scroll_down()
-    Keys.onDownPressed: scroll_up()
-    Keys.onEnterPressed: select_or_login()
-    Keys.onReturnPressed: select_or_login()
+    Timer
+    {
+        id: loginTimeoutTimer
+        interval: debug.loginTimeout * 1000
+        onTriggered: sddm.onLoginFailed()
+    }
+
+    Keys.onUpPressed: {
+        if (manual && hasLoginShown && passwordField.activeFocus) {
+            loginField.forceActiveFocus()
+        } else
+            scroll_down()
+    }
+    Keys.onDownPressed: {
+        if (manual && hasLoginShown && loginField.activeFocus) {
+            passwordField.forceActiveFocus()
+        } else
+            scroll_up()
+    }
+    Keys.onEnterPressed: {
+        if (hasLoginShown && !passwordField.activeFocus)
+            passwordField.forceActiveFocus()
+        else
+            select_or_login()
+    }
+    Keys.onReturnPressed: {
+        if (hasLoginShown && !passwordField.activeFocus)
+            passwordField.forceActiveFocus()
+        else
+            select_or_login()
+    }
     Keys.onEscapePressed: back_to_selection()
     
 }

slice/SlicedButton.qml

@@ -3,24 +3,42 @@ import QtQuick 2.7
 Item
 {
     id: buttonRoot
-    height: 25
+    height: paddingTop * 2 + buttonText.height
+
+    property font font: Qt.font({
+        family: config.font,
+        bold: true,
+        pointSize: 13,
+        capitalization: Font.AllUppercase,
+        smooth: false
+    });
 
-    property int fontSize: 13
     property string text: ""
 
-    property bool hasLeftSlice: true
-    property bool hasRightSlice: true
+    property bool highlighted: false
+    property int skewLeft:  15
+    property int skewRight: 15
 
-    property bool selected: false
-    readonly property int skew: 15
-
-    readonly property int paddingLeft: hasLeftSlice ? skew : 5
+    readonly property int paddingLeft: Math.max(Math.abs(skewLeft), 5)
     property int paddingTop: 3
-    readonly property int paddingRight: hasRightSlice ? skew : 5
+    readonly property int paddingRight: Math.max(Math.abs(skewRight), 5)
 
     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,10 +46,9 @@ Item
         PropertyAnimation { duration: 100 }
     }
 
-    onSelectedChanged:
+    onHighlightedChanged:
     {
-        buttonBgSliceLeft.requestPaint()
-        buttonBgSliceRight.requestPaint()
+        buttonBg.requestPaint()
     }
 
     onTextChanged:
@@ -47,20 +64,14 @@ Item
             name: "idle"
             PropertyChanges
             {
-                target: buttonBgSliceLeft;
-                bgColor: selected ? config.color_button_bg_selected : config.color_button_bg_idle
+                target: buttonBg;
+                bgColor: highlighted ? bgIdleHighlighted : bgIdle
             }
 
             PropertyChanges
             {
-                target: buttonBgCenter;
-                color: selected ? config.color_button_bg_selected : config.color_button_bg_idle
-            }
-
-            PropertyChanges
-            {
-                target: buttonBgSliceRight;
-                bgColor: selected ? config.color_button_bg_selected : config.color_button_bg_idle
+                target: buttonText;
+                color: highlighted ? textIdleHighlighted : textIdle
             }
         },
         State
@@ -68,144 +79,87 @@ Item
             name: "hover"
             PropertyChanges
             {
-                target: buttonBgSliceLeft;
-                bgColor: selected ? config.color_button_bg_selected_hover : config.color_button_bg_hover
+                target: buttonBg;
+                bgColor: highlighted ? bgHoverHighlighted : bgHover
             }
 
             PropertyChanges
             {
-                target: buttonBgCenter;
-                color: selected ? config.color_button_bg_selected_hover : config.color_button_bg_hover
-            }
-
-            PropertyChanges
-            {
-                target: buttonBgSliceRight;
-                bgColor: selected ? config.color_button_bg_selected_hover : config.color_button_bg_hover
+                target: buttonText;
+                color: highlighted ? textHoverHighlighted : textHover
             }
         }
     ]
 
     Canvas
     {
-        id: buttonBgSliceLeft
+        id: buttonBg
 
-        width: paddingLeft
+        width: widthFull
         height: parent.height
-        property string bgColor: config.color_button_bg_idle
+        property string bgColor: colors.buttonBg
 
         onPaint:
         {
-
-            var context = getContext("2d")
+            var context = getContext("2d");
             context.clearRect(0, 0, width, height);
             context.fillStyle = bgColor
-
             context.beginPath()
 
-            if (buttonRoot.hasLeftSlice)
-                context.moveTo(paddingLeft, 0)
-            else
-            {
-                context.moveTo(0, 0)
-                context.lineTo(paddingLeft, 0)
+            context.moveTo(paddingLeft, height);
+
+            if (skewLeft > 0) {
+                context.lineTo(0, height);
+                context.lineTo(skewLeft, 0);
+            } else if (skewLeft < 0) {
+                context.lineTo(Math.abs(skewLeft), height);
+                context.lineTo(0, 0);
+            } else {
+                context.lineTo(0, height);
+                context.lineTo(0, 0);
             }
 
-            context.lineTo(paddingLeft, height)
-            context.lineTo(0, height)
-            
+            context.lineTo(widthPartial, 0);
+
+            if (skewRight > 0) {
+                context.lineTo(width, 0);
+                context.lineTo(width-skewRight, height);
+            } else if (skewRight < 0) {
+                context.lineTo(width+skewRight, 0);
+                context.lineTo(width, height);
+            } else {
+                context.lineTo(width, 0);
+                context.lineTo(width, height);
+            }
+
+            context.lineTo(paddingLeft, height);
+
             context.closePath()
             context.fill()
         }
 
-
         Behavior on x
         {
             PropertyAnimation { duration: 100 }
         }
-    }
-
-    Rectangle
-    {
-        id: buttonBgCenter
-        color: config.color_button_bg_idle
-        x: paddingLeft
-        width: buttonText.width
-        height: parent.height
 
         Behavior on width
-        {
-            PropertyAnimation
-            {
-                duration: 100
-                onStopped:
-                {
-                    buttonRoot.showTextAnimation.start()
-                }
-            }
-        }
-
-
-        Behavior on x
         {
             PropertyAnimation { duration: 100 }
         }
+
     }
 
-    Canvas
-    {
-        id: buttonBgSliceRight
-
-        x: widthPartial
-
-        width: paddingRight
-        height: parent.height
-        property string bgColor: config.color_button_bg_idle
-
-        onPaint:
-        {
-            var context = getContext("2d")
-            context.clearRect(0, 0, paddingRight, height);
-            context.fillStyle = bgColor
-
-            context.beginPath()
-
-            context.moveTo(0, 0)
-            context.lineTo(paddingRight, 0)
-
-            if (!buttonRoot.hasRightSlice)
-                context.lineTo(paddingRight, height)
-            
-            context.lineTo(0, height)
-            
-            context.closePath()
-            context.fill()
-        }
-
-        Behavior on x
-        {
-            PropertyAnimation { duration: 100 }
-        }
-    }
-
-
     Text
     {
         id: buttonText
         x: paddingLeft
         y: paddingTop
-        color: config.color_button_text
+        color: colors.buttonText
 
-        font
-        {
-            family: config.font
-            bold: true
-            pointSize: fontSize
-            capitalization: Font.AllUppercase
-        }
+        font: buttonRoot.font
 
         text: ""
-
     }
 
     MouseArea
@@ -219,15 +173,13 @@ Item
         onEntered: 
         {
             buttonRoot.state = "hover"
-            buttonBgSliceLeft.requestPaint()
-            buttonBgSliceRight.requestPaint()
+            buttonBg.requestPaint()
         }
 
         onExited:
         {
             buttonRoot.state = "idle"
-            buttonBgSliceLeft.requestPaint()
-            buttonBgSliceRight.requestPaint()
+            buttonBg.requestPaint()
         }
 
         onClicked: buttonRoot.clicked()

slice/VirtualKeyboard.qml

@@ -0,0 +1,7 @@
+import QtQuick 2.7
+import QtQuick.VirtualKeyboard 2.1
+
+InputPanel {
+    id: inputPanel
+    width: parent.width
+}

slice/theme.conf

@@ -1,22 +0,0 @@
-[General]
-font=Roboto
-background=
-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

theme.conf

@@ -0,0 +1,10 @@
+[General]
+font=Roboto
+background=
+bg_mode=aspect
+parallax_bg_shift=20
+color_bg=#222222
+color_main=#dddddd
+color_dimmed=#888888
+color_contrast=#1f1f1f
+manual=false

translations/nl.ts

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE TS>
+<TS version="2.1" language="nl">
+<context>
+    <name>PagePower</name>
+    <message>
+        <source>Suspend</source>
+        <translation>Pauzestand</translation>
+    </message>
+    <message>
+        <source>Hibernate</source>
+        <translation>Slaapstand</translation>
+    </message>
+    <message>
+        <source>Hybrid Sleep</source>
+        <translation>Hybride slaapstand</translation>
+    </message>
+</context>
+<context>
+    <name>PageUsers</name>
+    <message>
+        <source>Back</source>
+        <translation>Terug</translation>
+    </message>
+</context>
+</TS>