Major update: Changed: layout, fonts, configs, readme.

Assets/Password.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" width="512" height="512"><path d="M23.821,11.181v0C22.943,9.261,19.5,3,12,3S1.057,9.261.179,11.181a1.969,1.969,0,0,0,0,1.64C1.057,14.739,4.5,21,12,21s10.943-6.261,11.821-8.181A1.968,1.968,0,0,0,23.821,11.181ZM12,18a6,6,0,1,1,6-6A6.006,6.006,0,0,1,12,18Z"/><circle cx="12" cy="12" r="4"/></svg>

Assets/Password2.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512.19 512.19" style="enable-background:new 0 0 512.19 512.19;" xml:space="preserve" width="512" height="512">
+<g>
+	<path d="M496.543,200.771c-19.259-31.537-43.552-59.707-71.915-83.392l59.733-59.733c8.185-8.475,7.95-21.98-0.525-30.165   c-8.267-7.985-21.374-7.985-29.641,0l-64.96,65.045c-40.269-23.918-86.306-36.385-133.141-36.053   c-132.075,0-207.339,90.411-240.448,144.299c-20.862,33.743-20.862,76.379,0,110.123c19.259,31.537,43.552,59.707,71.915,83.392   l-59.733,59.733c-8.475,8.185-8.71,21.691-0.525,30.165c8.185,8.475,21.691,8.71,30.165,0.525c0.178-0.172,0.353-0.347,0.525-0.525   l65.109-65.109c40.219,23.915,86.201,36.402,132.992,36.117c132.075,0,207.339-90.411,240.448-144.299   C517.405,277.151,517.405,234.515,496.543,200.771z M128.095,255.833c-0.121-70.575,56.992-127.885,127.567-128.006   c26.703-0.046,52.75,8.275,74.481,23.793l-30.976,30.976c-13.004-7.842-27.887-12.022-43.072-12.096   c-47.128,0-85.333,38.205-85.333,85.333c0.074,15.185,4.254,30.068,12.096,43.072l-30.976,30.976   C136.414,308.288,128.096,282.394,128.095,255.833z M256.095,383.833c-26.561-0.001-52.455-8.319-74.048-23.787l30.976-30.976   c13.004,7.842,27.887,12.022,43.072,12.096c47.128,0,85.333-38.205,85.333-85.333c-0.074-15.185-4.254-30.068-12.096-43.072   l30.976-30.976c41.013,57.434,27.702,137.242-29.732,178.255C308.845,375.558,282.798,383.879,256.095,383.833z"/>
+</g>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+</svg>

Components/Clock.qml

@@ -23,7 +23,8 @@ Column {
     Label {
         id: timeLabel
         anchors.horizontalCenter: parent.horizontalCenter
-        font.pointSize: root.font.pointSize * 3
+        font.pointSize: root.font.pointSize * 9
+        font.bold: true
         color: root.palette.text
         renderType: Text.QtRendering
         function updateTime() {
@@ -35,6 +36,8 @@ Column {
         id: dateLabel
         anchors.horizontalCenter: parent.horizontalCenter
         color: root.palette.text
+        font.pointSize: root.font.pointSize * 2
+        font.bold: true
         renderType: Text.QtRendering
         function updateTime() {
             text = new Date().toLocaleDateString(Qt.locale(config.Locale), config.DateFormat == "short" ? Locale.ShortFormat : config.DateFormat !== "" ? config.DateFormat : Locale.LongFormat)

Components/Input.qml

@@ -168,11 +168,13 @@ Column {
         TextField {
             id: username
             text: config.ForceLastUser == "true" ? selectUser.currentText : null
+            font.bold: true
             font.capitalization: config.AllowBadUsernames == "false" ? Font.Capitalize : Font.MixedCase
             anchors.centerIn: parent
             height: root.font.pointSize * 3
             width: parent.width
             placeholderText: config.TranslatePlaceholderUsername || textConstants.userName
+            placeholderTextColor: config.placeholderColor
             selectByMouse: true
             horizontalAlignment: TextInput.AlignHCenter
             renderType: Text.QtRendering
@@ -181,8 +183,9 @@ Column {
                     selectAll()
             }
             background: Rectangle {
-                color: "transparent"
+                color: "#222222"
-                border.color: root.palette.text
+                opacity: 0.2
+                border.color: "transparent"
                 border.width: parent.activeFocus ? 2 : 1
                 radius: config.RoundCorners || 0
             }
@@ -205,31 +208,101 @@ Column {
                 }
             ]
         }
-
     }
     
     Item {
         id: passwordField
+
         height: root.font.pointSize * 4.5
         width: parent.width / 2
         anchors.horizontalCenter: parent.horizontalCenter
     
+
+        Button {
+
+            id: secretCheckBox
+
+            width: parent.height
+            height: parent.height
+            anchors.left: parent.left
+            z: 2
+
+            background: Rectangle {
+                color: "transparent"
+                border.color: "transparent"
+            }
+
+            CheckBox {
+            id: revealSecret
+            width: parent.width
+            height: parent.height
+            hoverEnabled: true
+        
+            indicator: Button {
+                    id: passwordIcon
+                    width: selectUser.height * 1
+                    height: parent.height
+                    anchors.left: parent.left
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.leftMargin: selectUser.height * 0
+                    icon.height: parent.height * 0.25
+                    icon.width: parent.height * 0.25
+                    enabled: false
+                    icon.color: root.palette.text
+                    icon.source: Qt.resolvedUrl("../Assets/Password.svg")
+                    
+                    background: Rectangle {
+                        color: "transparent"
+                        border.color: "transparent"
+                    }
+            }
+
+            states: [
+                State {
+                    name: "unchecked"
+                    when: revealSecret.checked
+                    PropertyChanges {
+                        target: passwordIcon
+                        icon.source: Qt.resolvedUrl("../Assets/Password.svg")
+                    }
+                },
+                State {
+                    name: "checked"
+                    when: revealSecret.enabled
+                    PropertyChanges {
+                        target: passwordIcon
+                        icon.source: Qt.resolvedUrl("../Assets/Password2.svg")
+                    }
+                }
+            ]
+
+            Keys.onReturnPressed: toggle()
+            Keys.onEnterPressed: toggle()
+            KeyNavigation.down: loginButton
+
+        }
+
+        }
+
         TextField {
             id: password
             anchors.centerIn: parent
             height: root.font.pointSize * 3
             width: parent.width
+            font.bold: true
             focus: config.ForcePasswordFocus == "true" ? true : false
             selectByMouse: true
             echoMode: revealSecret.checked ? TextInput.Normal : TextInput.Password
             placeholderText: config.TranslatePlaceholderPassword || textConstants.password
+            placeholderTextColor: config.placeholderColor
             horizontalAlignment: TextInput.AlignHCenter
             passwordCharacter: "•"
             passwordMaskDelay: config.ForceHideCompletePassword == "true" ? undefined : 1000
             renderType: Text.QtRendering
             background: Rectangle {
-                color: "transparent"
+                color: "#222222"
-                border.color: root.palette.text
+                opacity: 0.2
+                border.color: "transparent"
                 border.width: parent.activeFocus ? 2 : 1
                 radius: config.RoundCorners || 0
             }
@@ -262,141 +335,6 @@ Column {
         ]        
     }
 
-    Item {
-        id: secretCheckBox
-        height: root.font.pointSize * 7
-        width: parent.width / 2
-        anchors.horizontalCenter: parent.horizontalCenter
-
-        CheckBox {
-            id: revealSecret
-            width: parent.width
-            hoverEnabled: true
-
-            indicator: Rectangle {
-                id: indicator
-                anchors.left: parent.left
-                anchors.top: parent.top
-                anchors.topMargin: 3
-                anchors.leftMargin: 4
-                implicitHeight: root.font.pointSize
-                implicitWidth: root.font.pointSize
-                color: "transparent"
-                border.color: root.palette.text
-                border.width: parent.activeFocus ? 2 : 1
-                Rectangle {
-                    id: dot
-                    anchors.centerIn: parent
-                    implicitHeight: parent.width - 6
-                    implicitWidth: parent.width - 6
-                    color: root.palette.text
-                    opacity: revealSecret.checked ? 1 : 0
-                }
-            }
-
-            contentItem: Text {
-                id: indicatorLabel
-                text: config.TranslateShowPassword || "Show Password"
-                anchors.verticalCenter: indicator.verticalCenter
-                horizontalAlignment: Text.AlignLeft
-                anchors.left: indicator.right
-                anchors.leftMargin: indicator.width / 2
-                font.pointSize: root.font.pointSize * 0.8
-                font.family: root.font.family
-                color: root.palette.text
-            }
-
-            Keys.onReturnPressed: toggle()
-            Keys.onEnterPressed: toggle()
-            KeyNavigation.down: loginButton
-
-            background: Rectangle {
-                color: "transparent"
-                border.width: parent.activeFocus ? 1 : 0
-                border.color: parent.activeFocus ? root.palette.text : "transparent"
-                height: parent.activeFocus ? 2 : 0
-                width: (indicator.width + indicatorLabel.contentWidth + indicatorLabel.anchors.leftMargin + 2)
-                anchors.top: indicatorLabel.bottom
-                anchors.left: parent.left
-                anchors.leftMargin: 3
-                anchors.topMargin: 8
-            }
-        }
-
-        states: [
-            State {
-                name: "pressed"
-                when: revealSecret.down
-                PropertyChanges {
-                    target: revealSecret.contentItem
-                    color: Qt.darker(root.palette.highlight, 1.1)
-                }
-                PropertyChanges {
-                    target: dot
-                    color: Qt.darker(root.palette.highlight, 1.1)
-                }
-                PropertyChanges {
-                    target: indicator
-                    border.color: Qt.darker(root.palette.highlight, 1.1)
-                }
-                PropertyChanges {
-                    target: revealSecret.background
-                    border.color: Qt.darker(root.palette.highlight, 1.1)
-                }
-            },
-            State {
-                name: "hovered"
-                when: revealSecret.hovered
-                PropertyChanges {
-                    target: indicatorLabel
-                    color: Qt.lighter(root.palette.highlight, 1.1)
-                }
-                PropertyChanges {
-                    target: indicator
-                    border.color: Qt.lighter(root.palette.highlight, 1.1)
-                }
-                PropertyChanges {
-                    target: dot
-                    color: Qt.lighter(root.palette.highlight, 1.1)
-                }
-                PropertyChanges {
-                    target: revealSecret.background
-                    border.color: Qt.lighter(root.palette.highlight, 1.1)
-                }
-            },
-            State {
-                name: "focused"
-                when: revealSecret.activeFocus
-                PropertyChanges {
-                    target: indicatorLabel
-                    color: root.palette.highlight
-                }
-                PropertyChanges {
-                    target: indicator
-                    border.color: root.palette.highlight
-                }
-                PropertyChanges {
-                    target: dot
-                    color: root.palette.highlight
-                }
-                PropertyChanges {
-                    target: revealSecret.background
-                    border.color: root.palette.highlight
-                }
-            }
-        ]
-
-        transitions: [
-            Transition {
-                PropertyAnimation {
-                    properties: "color, border.color, opacity"
-                    duration: 150
-                }
-            }
-        ]
-
-    }
-
     Item {
         height: root.font.pointSize * 2.3
         width: parent.width / 2
@@ -543,7 +481,6 @@ Column {
 
     SessionButton {
         id: sessionSelect
-        textConstantSession: textConstants.session
         loginButtonWidth: loginButton.background.width
     }
 

Components/SessionButton.qml

@@ -13,7 +13,6 @@ Item {
     height: root.font.pointSize
     width: parent.width / 2
     anchors.horizontalCenter: parent.horizontalCenter
-
     property var selectedSession: selectSession.currentIndex
     property string textConstantSession
     property int loginButtonWidth
@@ -68,7 +67,7 @@ Item {
 
         contentItem: Text {
             id: displayedItem
-            text: (config.TranslateSession || (textConstantSession + ":")) + " " + selectSession.currentText
+            text: selectSession.currentText
             color: root.palette.text
             verticalAlignment: Text.AlignVCenter
             anchors.left: parent.left

Components/SystemButtons.qml

@@ -31,6 +31,7 @@ RowLayout {
             icon.source: modelData ? Qt.resolvedUrl("../Assets/" + modelData[0] + ".svg") : ""
             icon.height: 2 * Math.round((root.font.pointSize * 3) / 2)
             icon.width: 2 * Math.round((root.font.pointSize * 3) / 2)
+            icon.color: config.IconColor
             display: AbstractButton.TextUnderIcon
             visible: config.ForceHideSystemButtons != "true" && modelData[2]
             hoverEnabled: true
@@ -57,10 +58,12 @@ RowLayout {
                     when: parent.children[index].down
                     PropertyChanges {
                         target: parent.children[index]
+                        icon.color: root.palette.highlight
                         palette.buttonText: Qt.darker(root.palette.highlight, 1.1)
                     }
                     PropertyChanges {
                         target: parent.children[index].background
+                        icon.color: root.palette.highlight
                         border.color: Qt.darker(root.palette.highlight, 1.1)
                     }
                 },
@@ -69,10 +72,12 @@ RowLayout {
                     when: parent.children[index].hovered
                     PropertyChanges {
                         target: parent.children[index]
+                        icon.color: root.palette.highlight
                         palette.buttonText: Qt.lighter(root.palette.highlight, 1.1)
                     }
                     PropertyChanges {
                         target: parent.children[index].background
+                        icon.color: root.palette.highlight
                         border.color: Qt.lighter(root.palette.highlight, 1.1)
                     }
                 },
@@ -81,10 +86,12 @@ RowLayout {
                     when: parent.children[index].activeFocus
                     PropertyChanges {
                         target: parent.children[index]
+                        icon.color: root.palette.highlight
                         palette.buttonText: root.palette.highlight
                     }
                     PropertyChanges {
                         target: parent.children[index].background
+                        icon.color: root.palette.highlight
                         border.color: root.palette.highlight
                     }
                 }

README.md

@@ -4,8 +4,9 @@ A theme for the [SDDM login manager](https://github.com/sddm/sddm) based on [`Su
 Screen resolution: 1080p.
 
 ### Preview
-![Preview](./Previews/preview.png)
+![Preview](./Previews/preview1.png)
-
+![Preview](./Previews/preview2.png)
+![Preview](./Previews/preview3.png)
 ### Dependencies
 
 ```sh

theme.conf

@@ -50,6 +50,12 @@ AccentColor="#343746"
 BackgroundColor="#21222C"
 ## Used for the user and session selection background as well as for ScreenPadding and FormBackground when either is true. If PartialBlur and FormBackground are both enabled this color will blend with the blur effect.
 
+placeholderColor="#bbbbbb"
+## Placholder text color. Example: username, password.
+
+IconColor="#ffffff"
+## System icon colors
+
 OverrideLoginButtonTextColor=""
 ## The text of the login button may become difficult to read depending on your color choices. Use this option to set it independently for legibility.
 
@@ -65,7 +71,7 @@ RoundCorners="20"
 ScreenPadding="0"
 ## Integer in pixels. Increase or delete this to have a padding of color BackgroundColor all around your screen. This makes your login greeter appear as if it was a canvas. Cool!
 
-Font="Roboto mono"
+Font="Open Sans"
 ## If you want to choose a custom font it will have to be available to the X root user. See https://wiki.archlinux.org/index.php/fonts#Manual_installation
 
 FontSize=""
@@ -109,25 +115,23 @@ Locale=""
 HourFormat="HH:mm"
 ## Defaults to Locale.ShortFormat - Accepts "long" or a custom string like "hh:mm A". See http://doc.qt.io/qt-5/qml-qtqml-date.html
 
-DateFormat="dddd, d of MMMM"
+DateFormat="dddd d MMMM"
 ## Defaults to Locale.LongFormat - Accepts "short" or a custom string like "dddd, d 'of' MMMM". See http://doc.qt.io/qt-5/qml-qtqml-date.html
 
 
 
 ## [Translations]
 
-HeaderText="Welcome!"
+HeaderText=""
 ## Header can be empty to not display any greeting at all. Keep it short.
 
 ## SDDM may lack proper translation for every element. Suger defaults to SDDM translations. Please help translate SDDM as much as possible for your language: https://github.com/sddm/sddm/wiki/Localization. These are in order as they appear on screen.
 
 TranslatePlaceholderUsername=""
 TranslatePlaceholderPassword=""
-TranslateShowPassword=""
 TranslateLogin=""
 TranslateLoginFailedWarning=""
 TranslateCapslockWarning=""
-TranslateSession=""
 TranslateSuspend=""
 TranslateHibernate=""
 TranslateReboot=""