Merge branch 'dev'

README.md

@@ -18,7 +18,6 @@ Create file `theme.conf.user` in theme folder. See `slice/theme.conf` for refere
 
 ### 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`.
@@ -51,14 +50,22 @@ There are some things that can't be tested well in greeter (e.g. shutdown option
 
 ### 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):
+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/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/RadRussianRus/sddm-slice/wiki/Layer-2), [layer 3](https://github.com/RadRussianRus/sddm-slice/wiki/Layer-3).
+Info about other layers can be found on wiki: [layer 2](https://github.com/RadRussianRus/sddm-slice/wiki/Color-Scheme-Layer-2), [layer 3](https://github.com/RadRussianRus/sddm-slice/wiki/Color-Scheme-Layer-3).
+
+### Font scheme
+
+There are also many font options, so there is now [font scheme](https://github.com/RadRussianRus/sddm-slice/wiki/Font-Scheme) too. Most of them are optional, only mandatory option is from [layer 1](https://github.com/RadRussianRus/sddm-slice/wiki/Font-Scheme-Layer-1):
+
+* `font` - overall font. Defaults to `Roboto`.
+
+Info about other layers can be found on wiki: [layer 2](https://github.com/RadRussianRus/sddm-slice/wiki/Font-Scheme-Layer-2), [layer 3](https://github.com/RadRussianRus/sddm-slice/wiki/Font-Scheme-Layer-3).
 
 ## License
 

slice/FontScheme.qml

@@ -0,0 +1,169 @@
+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 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

@@ -14,8 +14,8 @@ Item
 
     transform: Scale
     {
-        origin.x: 54
+        origin.x: descriptionLabel.height + 10 + 2
-        origin.y: 29
+        origin.y: descriptionLabel.height + 10 / 2
         xScale: distance
         yScale: distance
     }
@@ -33,8 +33,8 @@ Item
     {
         id: powerItemIcon
         source: icon
-        sourceSize.width: 48
+        sourceSize.width: descriptionLabel.height + 10 - 4
-        sourceSize.height: 48
+        sourceSize.height: descriptionLabel.height + 10 - 4
         x: 2
         y: 2
     }
@@ -49,8 +49,8 @@ Item
 
     Rectangle
     {
-        width: 52
+        width: descriptionLabel.height + 10
-        height: 52
+        height: descriptionLabel.height + 10
         color: ( hover ? colors.iconBgHover : colors.iconBg )
     }
 
@@ -59,30 +59,27 @@ Item
         id: descriptionLabel
         text: itemRoot.title
         color: ( hover ? colors.textHover : colors.text )
+        width: parent.width - descriptionLabel.height + 10 - 2 - 24
 
-        font
+        font: fonts.listItemMed
-        {
+        elide: Text.ElideRight
-            family: config.font
-            pointSize: 28
-            bold: true
-        }
 
-        x: 64
+        x: descriptionLabel.height + 10 + 12
         y: 5
     }
 
     Rectangle
     {
-        x: 54
+        x: descriptionLabel.height + 10 + 2
-        width: parent.width - 54
+        width: parent.width - descriptionLabel.height + 10 - 2
-        height: 52
+        height: descriptionLabel.height + 10
         color: ( hover ? colors.textBgHover : colors.textBg )
     }
 
     MouseArea
     {
         width: descriptionLabel.x + descriptionLabel.width
-        height: 52
+        height: descriptionLabel.height + 10
         hoverEnabled: true
 
         onClicked: itemRoot.clicked()

slice/LoopListSessionItem.qml

@@ -19,12 +19,7 @@ Item
         text: sessionName
         color: ( hover ? colors.textHover : colors.text )
 
-        font
+        font: fonts.listItemMed
-        {
-            family: config.font
-            pointSize: 28
-            bold: true
-        }
 
         x: parent.x + 10
         y: 5

slice/LoopListUserItem.qml

@@ -7,13 +7,14 @@ Item
     id: itemRoot
     opacity: distance
     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
+        origin.x: itemRoot.height + 12
         xScale: distance
         yScale: distance
     }
@@ -27,56 +28,56 @@ Item
     {
         id: profilePicture
         source: userAvatar
-        sourceSize.width: 60
+        sourceSize.width: itemRoot.height - 8
-        sourceSize.height: 60
+        sourceSize.height: itemRoot.height - 8
         x: 4
         y: 4
     }
 
     Rectangle
     {
-        width: 68
+        width: itemRoot.height
-        height: 68
+        height: itemRoot.height
         color: ( hoverEnabled && hover ? colors.iconBgHover : colors.iconBg )
     }
 
 
     Text
     {
+        id: userNameText
         text: userName
         color: ( hoverEnabled && hover ? colors.textHover : colors.text )
         
-        font
+        font: fonts.listItemMed
-        {
-            family: config.font
-            pointSize: 28
-            bold: true
-        }
 
-        x: 80
+        elide: Text.ElideRight
+
+        x: itemRoot.height + 12
         y: 0
+
+        width: itemRoot.width - itemRoot.height - 26
     }
 
     Text
     {
+        id: userLoginText
         text: userLogin
         color: ( hoverEnabled && hover ? (userName == "" ? colors.textHover : colors.textDimmedHover ) : (userName == "" ? colors.text : colors.textDimmed ) )
-        y: userName == "" ? 6 : 36
+        y: userName == "" ? 7 : userNameText.height * 0.8
-        font
+        font: userName == "" ? fonts.listItemBig : fonts.listItemSub
-        {
+        x: itemRoot.height + 12
-            family: config.font
+
-            pointSize: userName == "" ? 36 : 20
+        elide: Text.ElideRight
-            bold: userName == ""
+
-        }
+        width: itemRoot.width - itemRoot.height - 26
-        x: 80
     }
 
     Rectangle
     {
-        x: 70
+        x: itemRoot.height + 2
         y: 0
-        width: parent.width - 70
+        width: parent.width - itemRoot.height - 2
-        height: 68
+        height: itemRoot.height
         color: ( hoverEnabled && hover ? colors.textBgHover : colors.textBg )
     }
 }

slice/Main.qml

@@ -70,6 +70,10 @@ Rectangle
         return Boolean(Number(str).valueOf()).valueOf();
     }
 
+    function not_null(str) {
+        return !(str === null || str === undefined);
+    }
+
     TextConstants { id: localeText }
     Debug { id: debug }
 
@@ -106,6 +110,7 @@ Rectangle
     }
 
     ColorScheme { id: colors }
+    FontScheme { id: fonts }
 
     Item
     {
@@ -113,7 +118,7 @@ Rectangle
         x: 0
         y: 0
         width: root.width
-        height: 35
+        height: Math.max(buttonPagePower.height, buttonPageSessions.height, buttonPageUsers.height) + 10
 
         SlicedButton
         {
@@ -127,6 +132,8 @@ Rectangle
             enabled: debug.canPowerOff || debug.canReboot || debug.canSuspend || debug.canHibernate || debug.canHybridSleep
 
             onClicked: if (enabled) root.state = "statePower"
+
+            font: fonts.slicesTop
         }
 
         SlicedButton
@@ -138,6 +145,8 @@ Rectangle
             text: pageSessions.currentSessionName
 
             onClicked: root.state = "stateSessions"
+
+            font: fonts.slicesTop
         }
 
         SlicedButton
@@ -149,6 +158,8 @@ Rectangle
             text: pageUsers.currentUserLogin
 
             onClicked: root.state = "stateUsers"
+
+            font: fonts.slicesTop
         }
     }
 
@@ -158,7 +169,7 @@ Rectangle
         x: 0
         y: areaTop.height
         width: root.width
-        height: root.height - (areaTop.height * 2)
+        height: root.height - areaTop.height - areaBottom.height
 
         PagePower
         {
@@ -220,42 +231,55 @@ Rectangle
     {
         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
             text: "Caps Lock"
             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"
             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
+
+            font: fonts.slicesBottomLeft
         }
 
         Item
@@ -268,33 +292,37 @@ Rectangle
             {
                 id: buttonWeekday
                 x: 5
-                y: 5
+                y: areaBottom.height - height - 5
 
                 function updateTime()
                 {
                     text = new Date().toLocaleString(Qt.locale(),
                         "dddd")
                 }
+
+                font: fonts.slicesBottomRight
             }
 
             SlicedButton
             {
                 id: buttonDate
                 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
                 x: buttonDate.x + buttonDate.widthPartial + 3
-                y: 5
+                y: areaBottom.height - height - 5
 
                 hasRightSlice: false
 
@@ -303,6 +331,8 @@ Rectangle
                     text = new Date().toLocaleString(Qt.locale(),
                         "hh:mm:ss")
                 }
+
+                font: fonts.slicesBottomRight
             }
         }
 

slice/PageUsers.qml

@@ -187,7 +187,7 @@ 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)
@@ -227,9 +227,8 @@ Item
         {
             id: passwordField
             x: 10
-            y: hasLoginShown ? pageRoot.height / 2.3 + 37 : pageRoot.height / 2.3 + 62
+            y: (passwordFieldBg.height - height) / 2 + passwordFieldBg.y
             width: parent.width - 20
-            height: 25
             opacity: hasLoginShown ? 1 : 0
             color: colors.inputText
             selectionColor: colors.inputSelectionBg
@@ -239,12 +238,7 @@ Item
             clip: true
             selectByMouse: true
             
-            font
+            font: fonts.input
-            {
-                family: config.font
-                bold: true
-                pointSize: 18
-            }
 
             Component.onCompleted: forceActiveFocus()
 
@@ -254,28 +248,23 @@ Item
         {
             id: passwordFieldPlaceholder
             x: passwordField.x
-            y: passwordField.y
+            y: (passwordFieldBg.height - height) / 2 + passwordFieldBg.y
             width: passwordField.width
             opacity: hasLoginShown ? 1 : 0
             visible: passwordField.text.length <= 0
 
             color: colors.inputPlaceholderText
 
-            font
+            font: fonts.placeholder
-            {
-                family: config.font
-                bold: true
-                pointSize: 18
-            }
 
             text: localeText.password
         }
 
         Rectangle {
             id: passwordFieldBg
-            y: hasLoginShown ? pageRoot.height / 2.3 + 30 : pageRoot.height / 2.3 + 55
+            y: middleItem.y + middleItem.height + 2
             width: parent.width
-            height: 40
+            height: Math.max(fonts.input.pointSize, fonts.placeholder.pointSize) + 20
             opacity: hasLoginShown ? 1 : 0
             color: colors.inputBg
         }
@@ -283,7 +272,7 @@ Item
         Rectangle
         {
             id: progressBar
-            y: hasLoginShown ? pageRoot.height / 2.3 + 70 : pageRoot.height / 2.3 + 105
+            y: passwordFieldBg.y + passwordFieldBg.height
             width: parent.width
             height: 2
             opacity: hasLoginShown ? 1 : 0
@@ -326,7 +315,7 @@ Item
         {
             id: buttonUserLogin
             x: userListContainer.width - widthFull
-            y: hasLoginShown ? pageRoot.height / 2.3 + 74 : pageRoot.height / 2.3 + 109
+            y: progressBar.y + progressBar.height + 2
             paddingTop: 2
             highlighted: true
             opacity: hasLoginShown ? 1 : 0
@@ -334,19 +323,23 @@ Item
             text: localeText.login
 
             onClicked: select_or_login()
+
+            font: fonts.slicesLoginButtons
         }
 
         SlicedButton
         {
             id: buttonUserBack
             x: userListContainer.width - widthFull - buttonUserLogin.widthPartial - 3
-            y: hasLoginShown ? pageRoot.height / 2.3 + 74 : pageRoot.height / 2.3 + 109
+            y: buttonUserLogin.y
             paddingTop: 2
             opacity: hasLoginShown ? 1 : 0
 
             text: qsTr("Back")
 
             onClicked: back_to_selection()
+
+            font: fonts.slicesLoginButtons
         }
 
         Text
@@ -359,12 +352,7 @@ Item
 
             color: colors.errorText
 
-            font
+            font: fonts.error
-            {
-                family: config.font
-                bold: true
-                pointSize: 18
-            }
 
             Behavior on opacity { NumberAnimation { duration: userListContainer.scrollDuration } }
 
@@ -428,7 +416,7 @@ 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: passwordField; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
             NumberAnimation { target: passwordFieldPlaceholder; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
@@ -437,12 +425,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
@@ -467,12 +449,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
@@ -561,7 +537,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: passwordFieldBg; 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 }
@@ -578,7 +554,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: passwordFieldBg; 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 }
@@ -586,7 +562,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:
             {

slice/SlicedButton.qml

@@ -3,9 +3,16 @@ 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 real fontSize: 13
     property string text: ""
 
     property bool hasLeftSlice: true
@@ -221,16 +228,9 @@ Item
         y: paddingTop
         color: colors.buttonText
 
-        font
+        font: buttonRoot.font
-        {
-            family: config.font
-            bold: true
-            pointSize: fontSize
-            capitalization: Font.AllUppercase
-        }
 
         text: ""
-
     }
 
     MouseArea