├── .eslintrc.js ├── .github └── workflows │ └── build.yml ├── .gitignore ├── .npmrc ├── .vscode ├── extensions.json └── settings.json ├── CHANGELOG.md ├── README.md ├── docs ├── images │ ├── bg-patterns.png │ ├── dark-de-list.png │ ├── dark-login.png │ ├── dark-power.png │ ├── de-list.png │ ├── login.png │ ├── power.png │ └── theme-config.png └── lightdm-webkit2-greeter-manual ├── index.html ├── jsconfig.json ├── package-lock.json ├── package.json ├── postcss.config.cjs ├── public ├── favicon.ico ├── fonts │ ├── Lato-Bold.woff │ ├── Lato-Bold.woff2 │ ├── Lato-Light.woff │ ├── Lato-Light.woff2 │ ├── Lato-Regular.woff │ ├── Lato-Regular.woff2 │ ├── Lato-Thin.woff │ └── Lato-Thin.woff2 ├── images │ ├── default-profile.png │ ├── profiles │ │ ├── captain.png │ │ └── stark.png │ └── sessions │ │ ├── awesome.png │ │ ├── bspwm.png │ │ ├── budgie.png │ │ ├── cinnamon.png │ │ ├── deepin.png │ │ ├── dwm.png │ │ ├── elementary.png │ │ ├── enlightenment.png │ │ ├── gnome.png │ │ ├── i3-with-shmlog.png │ │ ├── i3.png │ │ ├── liri.png │ │ ├── lxde.png │ │ ├── mate.png │ │ ├── plasma.png │ │ ├── plasmawayland.png │ │ ├── qtile.png │ │ ├── session-default.png │ │ ├── sway.png │ │ ├── ubuntu.png │ │ ├── xfce.png │ │ └── xmonad.png └── index.theme ├── src ├── App.svelte ├── components │ ├── 404.svelte │ ├── BackgroundPatterns.svelte │ ├── BackgroundPictures.svelte │ ├── DMlist.svelte │ ├── Footer.svelte │ ├── Header.svelte │ ├── Login.svelte │ ├── LoginSettings.svelte │ ├── Power.svelte │ ├── Settings.svelte │ ├── SiteLayout.svelte │ ├── base │ │ ├── Cancel.svelte │ │ ├── ColorDrops.svelte │ │ ├── Fireflies.svelte │ │ ├── FloatingBubbles.svelte │ │ ├── GridAnimatedWall.svelte │ │ ├── Icon.svelte │ │ ├── ModeSwitch.svelte │ │ ├── ShootingStars.svelte │ │ ├── SiteLayout.svelte │ │ ├── Toggle.svelte │ │ └── datetime.svelte │ └── content.json ├── constants │ ├── lightdm.js │ ├── settings.js │ └── variables.js ├── global.postcss ├── helpers │ ├── functions.js │ └── getAbsolutePath.js ├── main.js ├── store │ └── index.js ├── styles │ └── fonts.scss └── vite-env.d.ts ├── svelte.config.cjs ├── tailwind.config.js └── vite.config.js /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | es6: true, 5 | jest: true, 6 | node: true 7 | }, 8 | extends: ['eslint:recommended'], 9 | overrides: [ 10 | { 11 | files: ['**/*.svelte'], 12 | processor: 'svelte3/svelte3' 13 | } 14 | ], 15 | parserOptions: { 16 | ecmaVersion: 2019, 17 | sourceType: 'module' 18 | }, 19 | plugins: ['import', 'svelte3'], 20 | rules: { 21 | ParseError: 0 22 | }, 23 | settings: { 24 | 'svelte3/ignore-styles': () => true 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /.github/workflows/build.yml: -------------------------------------------------------------------------------- 1 | # This workflow will do a clean install of node dependencies, build the source code and create tagged release 2 | 3 | name: Build and Release CI 4 | 5 | on: 6 | push: 7 | tags: 8 | - '[0-9]+.[0-9]+.[0-9]+' 9 | 10 | jobs: 11 | release-project: 12 | name: Release Static site to Github Releases 13 | runs-on: ubuntu-latest 14 | needs: build-project 15 | steps: 16 | - name: Download site content 17 | uses: actions/download-artifact@v2 18 | with: 19 | name: reactive 20 | - name: Archive site content 21 | uses: thedoctor0/zip-release@master 22 | with: 23 | filename: reactive.zip 24 | - name: Create Github Release 25 | id: create-new-release 26 | uses: actions/create-release@v1 27 | env: 28 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 29 | with: 30 | tag_name: ${{ github.ref }} 31 | release_name: Release ${{ github.ref }} 32 | - name: Get the version 33 | id: get_version 34 | run: echo ::set-output name=VERSION::${GITHUB_REF/refs\/tags\//} 35 | - name: Upload release asset 36 | uses: actions/upload-release-asset@v1 37 | env: 38 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 39 | with: 40 | upload_url: ${{ steps.create-new-release.outputs.upload_url }} 41 | asset_path: ./reactive.zip 42 | asset_name: lightdm-webkit2-theme-reactive-${{ steps.get_version.outputs.VERSION }}.tar.gz 43 | asset_content_type: application/tar+gzip 44 | 45 | build-project: 46 | name: Build Project 47 | runs-on: ubuntu-latest 48 | strategy: 49 | matrix: 50 | node-version: [15.x] 51 | steps: 52 | - uses: actions/checkout@v2 53 | - name: Use Node.js ${{ matrix.node-version }} 54 | uses: actions/setup-node@v2 55 | with: 56 | node-version: ${{ matrix.node-version }} 57 | - run: npm i 58 | - run: npm run build:lightdm 59 | 60 | - name: Upload static site 61 | uses: actions/upload-artifact@v2 62 | with: 63 | name: reactive 64 | path: reactive/ 65 | 66 | - run: npm run build:ghpages 67 | - name: Deploy to Pages 68 | uses: JamesIves/github-pages-deploy-action@4.1.3 69 | with: 70 | branch: demo/page 71 | folder: reactive 72 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /dist/ 3 | .DS_Store 4 | /reactive/ -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | tag-version-prefix="" -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["svelte.svelte-vscode"] 3 | } 4 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.formatOnSave": true, 3 | "editor.codeActionsOnSave": { 4 | "source.fixAll.eslint": true 5 | }, 6 | "eslint.validate": [ 7 | "javascript", 8 | "svelte" 9 | ], 10 | "[svelte]": { 11 | "editor.defaultFormatter": "svelte.svelte-vscode" 12 | }, 13 | } -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. 4 | 5 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), 6 | and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). 7 | 8 | ## [0.4.8] - 2021-12-30 9 | 10 | ### Fixes 11 | 12 | - fix for issue #22 - add default image for dmlist 13 | 14 | ## [0.4.7] - 2021-12-30 15 | 16 | ### Added 17 | 18 | - feature to show profile picture put user home directory with a name of `.face` 19 | 20 | ## [0.4.6] - 2021-12-26 21 | 22 | ### Added 23 | 24 | - feature to add background images 25 | - feature to add background patterns 26 | 27 | ### Changed 28 | 29 | - minor design updates to use card layout in the settings pages 30 | 31 | ### Updated 32 | 33 | - updated tailwind to use v3 34 | 35 | ## [0.4.5] - 2021-12-17 36 | 37 | ### fixed 38 | 39 | - fixed issue for December month 40 | 41 | ## [0.4.4] - 2021-06-17 42 | 43 | ### Changed 44 | 45 | - cleanups and minor design fixes for login screen 46 | 47 | ## [0.4.3] - 2021-05-29 48 | 49 | ### Changed 50 | 51 | - update gh pages to use relative path 52 | 53 | ## [0.4.2] - 2021-05-29 54 | 55 | ### Added 56 | 57 | - DE name updates on footer and saves to localStorage 58 | - Bug fixes and improvements 59 | 60 | ### Changed 61 | 62 | - updated some Tailwind CSS classes and clean up 63 | 64 | ## [0.4.1] - 2021-05-22 65 | 66 | ### Changed 67 | 68 | - optimization and clean ups 69 | 70 | ## [0.4.0] - 2021-05-22 71 | 72 | ### Added 73 | 74 | - Functionality to choose Desktop Environment and implement tailwind-jit 75 | 76 | ## [0.3.0] - 2021-05-17 77 | 78 | ### Changed 79 | 80 | - github actions to not use `v` in tag 81 | - cleanups on html 82 | 83 | ## [0.2.1] - 2021-05-15 84 | 85 | ### Added 86 | 87 | - github actions 88 | 89 | ## [0.2.0] - 2021-05-15 90 | 91 | ### Added 92 | 93 | - login form and power options 94 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Reactive - A LightDM Webkit2 Greeter theme 2 | 3 | Fast, Modern and simple theme for lightdm webkit2 greeter written in Svelte javascript frontend framework for less bloat. 4 | 5 | #### :star: Star Statement! :smile: 6 | If you like this theme or using it, please don't forget to give a :star:Star:star: to this repository for motivation and support. 7 | 8 | [![Build and Release CI](https://github.com/gitneeraj/lightdm-webkit2-theme-reactive/actions/workflows/build.yml/badge.svg)](https://github.com/gitneeraj/lightdm-webkit2-theme-reactive/actions/workflows/build.yml) 9 | 10 | ## Live Demo 11 | 12 | Check out the theme in action [here](https://gitneeraj.github.io/lightdm-webkit2-theme-reactive/) 13 | 14 | ## Screenshots 15 | 16 | ![login screen](docs/images/login.png) 17 | ![theme config](docs/images/theme-config.png) 18 | ![background patterns](docs/images/bg-patterns.png) 19 | ![desktop env screen](docs/images/de-list.png) 20 | ![power options screen](docs/images/power.png) 21 | ![dark login screen](docs/images/dark-login.png) 22 | ![dark de list screen](docs/images/dark-de-list.png) 23 | ![dark power screen](docs/images/dark-power.png) 24 | 25 | ## Features 26 | 27 | - Simple login screen 28 | - Choose desktop environment/Window Manager to login 29 | - Power options to shutdown, restart & suspend 30 | - Choose for DARK or LIGHT theme 31 | - Change background images (defaults to `/usr/share/backgrounds` location) 32 | - Change login box placement and its style (with or without card) 33 | - TODO: customize profile pictures 34 | - TODO: customize colors 35 | - Have any cool feature? Sure, let me know on reddit @unkowncoder 36 | 37 | ## :hammer_and_wrench: Installation 38 | 39 | This theme requires `lightdm-webkit2-greeter` to be installed in prior. 40 | 41 | ### Arch Linux 42 | 43 | This package is available in AUR repository. So following should be the preferred method to install. You can choose your favirote AUR helper(e.g. YAY or PARU) 44 | 45 | ```sh 46 | paru -S lightdm-webkit2-theme-reactive 47 | ``` 48 | 49 | ### Non Arch linux users 50 | 51 | If you are on any other linux distro than Arch, you can choose to build it from source. But make sure you have all the required toolkit to do so. Here are general steps to install the theme - 52 | 53 | ```sh 54 | git clone https://aur.archlinux.org/lightdm-webkit2-theme-reactive.git 55 | cd lightdm-webkit2-theme-reactive 56 | makepkg -si 57 | ``` 58 | 59 | After the installation, you'll have to set the theme to 'reactive'. This can be done in lightdm-webkit2-greeter's config file. Usually the config can be located at `/etc/lightdm/lightdm-webkit2-greeter.conf`. Here change/update the `webkit_theme` to `reactive`. Below is an example - 60 | 61 | ``` 62 | [greeter] 63 | webkit_theme = reactive 64 | ``` 65 | In case you don't wish to use this theme, make sure you revert this file to the old one. 66 | 67 | ### Background images 68 | By default `/usr/share/backgrounds` will be scanned to fetch any background images that is placed there. You can also update the below setting to your custom path in file `/etc/lightdm/lightdm-webkit2-greeter.conf` 69 | 70 | ``` 71 | [branding] 72 | background_images = /usr/share/backgrounds 73 | ``` 74 | ### Profile Pictures 75 | ~~In order to let this theme pick up the profile picture for the user, make sure you place the picture inside your home folder with the name of `.face`. After deciding on your profile picture selection, move or place it in your home dir with the name of `.face`(just that). Make sure your picture does not exceed the deminsions of 200x200 pixels. Example: `/home/neeraj/.face`~~ 76 | 77 | ~~That's it! This theme should automatically pick up that picture(as you typed your valid username or for saved username) and set it as profile picture in the greeter.~~ 78 | 79 | Add `Icon=/var/lib/AccountsService/icons/` to the bottom of `/var/lib/AccountsService/users/` and place a profile image at `/var/lib/AccountsService/icons/` 80 | 81 | For more info - https://wiki.archlinux.org/title/LightDM#Changing_your_avatar 82 | 83 | ### :bouquet: Credits 84 | 85 | The DE/WM images are borrowed from [manilarome](https://github.com/manilarome)'s glorious theme 86 | 87 | ## :scroll: Note 88 | 89 | This theme is still in active development and some feature may be added/removed before it hits 1.0.0. If you encounter any issues related to its functionality, please create a issue on the github repo. Thanks & Peace! 90 | -------------------------------------------------------------------------------- /docs/images/bg-patterns.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/docs/images/bg-patterns.png -------------------------------------------------------------------------------- /docs/images/dark-de-list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/docs/images/dark-de-list.png -------------------------------------------------------------------------------- /docs/images/dark-login.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/docs/images/dark-login.png -------------------------------------------------------------------------------- /docs/images/dark-power.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/docs/images/dark-power.png -------------------------------------------------------------------------------- /docs/images/de-list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/docs/images/de-list.png -------------------------------------------------------------------------------- /docs/images/login.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/docs/images/login.png -------------------------------------------------------------------------------- /docs/images/power.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/docs/images/power.png -------------------------------------------------------------------------------- /docs/images/theme-config.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/docs/images/theme-config.png -------------------------------------------------------------------------------- /docs/lightdm-webkit2-greeter-manual: -------------------------------------------------------------------------------- 1 | lightdm-webkit2-greeter(1) General Commands Manual lightdm-webkit2-greeter(1) 2 | 3 | NAME 4 | lightdm-webkit2-greeter 5 | 6 | SYNOPSIS 7 | LightDM greeter that uses webkit2 for theming via HTML/JavaScript. 8 | 9 | DESCRIPTION 10 | lightdm-webkit2-greeter is a LightDM greeter that uses webkit2 for theming. Themes can be written using a combination 11 | of HTML and Javascript. 12 | 13 | THEME JAVASCRIPT API 14 | Please note that all properties and functions which are marked as "deprecated" are only available for backwards 15 | compatibility and will be removed in a future version of lightdm-webkit2-greeter. Theme authors should not use any 16 | deprecated properties or functions in new works and should update any existing works which make use of deprecated 17 | properties and/or functions to ensure continued proper functionality. 18 | 19 | The following functions must be provided by the greeter theme and callable on the global "window" object. 20 | 21 | show_prompt(text, type) 22 | This will be called when LightDM needs to prompt the user for some reason, such as asking for a password. The 23 | "text" parameter will be the text of the prompt, and the "type" parameter will either be "text" for a visible 24 | prompt, or "password" for a prompt that the input should be hidden. 25 | 26 | show_message(text, type) 27 | This will be called when LightDM needs to display some info for the user. The "text" parameter will be the text of 28 | the message, and the "type" parameter will either be "info" for an information message, or "error" for an error 29 | message that LightDM has encountered. 30 | 31 | authentication_complete() 32 | This function is called by LightDM when authentication has completed. 33 | 34 | autologin_timer_expired() 35 | This function is called by LightDM when an autologin user's login timer has expired. The greeter should reset the 36 | authentication process. 37 | 38 | The following functions are available for the greeter to call to execute actions within LightDM. 39 | 40 | lightdm.authenticate(username) 41 | Specifies the username of the user we'd like to start authenticating as. Note that if you call 42 | lightdm.authenticate with no argument, LightDM (via PAM) will issue a show_prompt() call to ask for the username. 43 | The older function lightdm.start_authentication() has been deprecated. 44 | 45 | lightdm.authenticate_as_guest() 46 | Authenticates as the guest user. 47 | 48 | lightdm.cancel_authentication() 49 | Cancels the authentication of any user currently in the process of authenticating. 50 | 51 | lightdm.cancel_autologin() 52 | Cancels the authentication of the autologin user. The older function lightdm.cancel_timed_login() has been 53 | deprecated. 54 | 55 | lightdm.get_hint(hint_name) 56 | Returns the value of a named hint provided by LightDM. 57 | 58 | lightdm.suspend() 59 | Suspends the system, if the greeter has the authority to do so. 60 | 61 | lightdm.hibernate() 62 | Hibernates the system, if the greeter has the authority to do so. 63 | 64 | lightdm.start_session_sync(session) 65 | Once LightDM has successfully authenticated the user, start the user's session by calling this function. "session" 66 | is the authenticated user's session. If no session is passed, start the authenticated user with the system default 67 | session. The older function lightdm.login(user, session) has been deprecated. 68 | 69 | lightdm.respond(text) 70 | When LightDM has prompted for input, provide the response to LightDM. The deprecated function was 71 | "provide_secret". This is still available for backwards compatibility, but authors of greeters should move to 72 | using lightdm.respond(). 73 | 74 | lightdm.restart() 75 | Restarts the system, if the greeter has the authority to do so. 76 | 77 | lightdm.set_language(lang) 78 | Will set the language for the current LightDM session. 79 | 80 | lightdm.shutdown() 81 | Shuts down the system, if the greeter has the authority to do so. 82 | 83 | Variables available within the greeter are: 84 | 85 | lightdm.authentication_user 86 | String. The username of the authentication user being authenticated or null if no authentication is in progress. 87 | 88 | lightdm.autologin_guest 89 | Boolean. Indicates the guest user should be used for autologin. 90 | 91 | lightdm.autologin_timeout 92 | Number. The number of seconds to wait before automatically logging in. The older variable lightdm.timed_user_delay 93 | has been deprecated. 94 | 95 | lightdm.autologin_user 96 | String. The name of the user account that should be logged into automatically after timed login delay has passed. 97 | The older variable lightdm.timed_login_user has been deprecated. 98 | 99 | lightdm.can_hibernate 100 | Boolean. Whether or not the system can be made to hibernate by the greeter. 101 | 102 | lightdm.can_restart 103 | Boolean. Whether or not the system can be restarted by the greeter. 104 | 105 | lightdm.can_shutdown 106 | Boolean. Whether or not the system can be shutdown by the greeter. 107 | 108 | lightdm.can_suspend 109 | Boolean. Whether or not the system can be suspended by the greeter. 110 | 111 | lightdm.default_session 112 | String. The name of the default session (as configured in lightdm.conf). 113 | 114 | lightdm.has_guest_account 115 | Boolean. A guest account is available for login. 116 | 117 | lightdm.hide_users 118 | Boolean. The whole list of users should not be displayed. 119 | 120 | lightdm.hostname 121 | String. The hostname of the system. 122 | 123 | lightdm.is_authenticated 124 | Boolean. Indicates if the user has successfully authenticated. 125 | 126 | lightdm.in_authentication 127 | Boolean. Indicates if lightdm is currently in the authentication phase. 128 | 129 | lightdm.language 130 | String. The currently selected language. The older variable name lightdm.default_language is deprecated. 131 | 132 | lightdm.layout 133 | String. The name of the currently active keyboard layout. To change the layout, assign a valid layout name to this 134 | variable. The older variable name lightdm.default_layout is deprecated. 135 | 136 | lightdm.layouts 137 | Array. The keyboard layouts that are available on the system. Returns an Array of LightDMLayout objects. 138 | 139 | lightdm.num_users 140 | Number. The number of users able to log in. 141 | 142 | lightdm.select_guest 143 | Boolean. The guest user should be selected by default for login. 144 | 145 | lightdm.select_user 146 | String. The username that should be selected by default for login. 147 | 148 | lightdm.sessions 149 | Array. The sessions that are available on the system. Returns an Array of LightDMSession objects. 150 | 151 | lightdm.users 152 | Array. The users that are able to log in. Returns an Array of LightDMUser objects. 153 | 154 | The following calls can be made to read configuration keys out of the lightdm-webkit2-greeter configuration file. 155 | 156 | config.get_str(section, key) 157 | Returns the string value associated with key under the "section" in the configuration file. 158 | 159 | config.get_num(section, key) 160 | Returns the numeric value associated with key under the "section" in the configuration file. 161 | 162 | config.get_bool(section, key) 163 | Returns the boolean value associated with key under the "section" in the configuration file. 164 | 165 | The greeterutil object has some utility functions associated with it which are intended to make a theme author's work 166 | easier. 167 | 168 | greeterutil.dirlist(path) 169 | Returns an array of strings of filenames present at "path", or Null if the path does not exist. 170 | 171 | greeterutil.txt2html(txt) 172 | Returns a simple HTML conversion of the passed text. Newlines are replaced with
, and the characters &, <, >, 173 | and " are replaced with their HTML equivalents. 174 | 175 | Please see the LightDM API documentation for the complete list of calls available. The lightdm-webkit2-greeter 176 | implements all of the LightDM API. 177 | 178 | CONFIGURATION 179 | /etc/lightdm/lightdm-webkit2-greeter.conf 180 | Keyfile that contains one key: webkit-theme. This should point to which theme the greeter should use. 181 | 182 | FILES 183 | /usr/share/lightdm-webkit/themes 184 | Directory where themes should be stored. 185 | 186 | EXAMPLES 187 | Please see the "antergos" and "simple" themes that are shipped with lightdm-webkit2-greeter. 188 | 189 | SEE ALSO 190 | http://people.ubuntu.com/~robert-ancell/lightdm/reference/core.html 191 | 192 | AUTHOR 193 | The legacy lightdm-webkit-greeter was written by Robert Ancell . It was ported to webkit2 194 | by the Antergos Developers . Also includes code improvements contributed by Scott Balneaves 195 | . 196 | 197 | 2016.01.10 lightdm-webkit2-greeter(1) 198 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Reactive - LightDM Webkit2 Greeter Theme 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "moduleResolution": "node", 4 | "target": "esnext", 5 | "module": "esnext", 6 | /** 7 | * svelte-preprocess cannot figure out whether you have 8 | * a value or a type, so tell TypeScript to enforce using 9 | * `import type` instead of `import` for Types. 10 | */ 11 | "importsNotUsedAsValues": "error", 12 | "isolatedModules": true, 13 | "resolveJsonModule": true, 14 | /** 15 | * To have warnings / errors of the Svelte compiler at the 16 | * correct position, enable source maps by default. 17 | */ 18 | "sourceMap": true, 19 | "esModuleInterop": true, 20 | "skipLibCheck": true, 21 | "forceConsistentCasingInFileNames": true, 22 | "baseUrl": ".", 23 | /** 24 | * Typecheck JS in `.svelte` and `.js` files by default. 25 | * Disable this if you'd like to use dynamic types. 26 | */ 27 | "checkJs": true 28 | }, 29 | /** 30 | * Use global.d.ts instead of compilerOptions.types 31 | * to avoid limiting type declarations. 32 | */ 33 | "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"] 34 | } 35 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lightdm-webkit2-theme-reactive", 3 | "version": "0.4.9", 4 | "scripts": { 5 | "dev": "vite", 6 | "build:lightdm": "type=lightdm vite build", 7 | "build:ghpages": "type=ghpages vite build", 8 | "build:web": "vite build", 9 | "serve": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "@sveltejs/vite-plugin-svelte": "^1.0.0-next.7", 13 | "autoprefixer": "^10.2.5", 14 | "cssnano": "^5.0.1", 15 | "eslint": "^7.26.0", 16 | "eslint-plugin-import": "^2.22.1", 17 | "eslint-plugin-svelte3": "^3.2.0", 18 | "postcss": "^8.2.10", 19 | "postcss-load-config": "^3.0.1", 20 | "prettier": "^2.3.0", 21 | "prettier-plugin-svelte": "^2.3.0", 22 | "svelte": "^3.37.0", 23 | "svelte-preprocess": "^4.7.1", 24 | "tailwindcss": "^3.0.7", 25 | "vite": "^2.3.4" 26 | }, 27 | "dependencies": { 28 | "svelte-routing": "^1.6.0" 29 | }, 30 | "prettier": { 31 | "arrowParens": "avoid", 32 | "bracketSpacing": true, 33 | "singleQuote": true, 34 | "svelteSortOrder": "options-scripts-markup-styles", 35 | "trailingComma": "none", 36 | "semi": false 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /postcss.config.cjs: -------------------------------------------------------------------------------- 1 | const tailwindcss = require("tailwindcss"); 2 | const autoprefixer = require("autoprefixer"); 3 | const cssnano = require("cssnano"); 4 | 5 | const mode = process.env.NODE_ENV; 6 | const dev = mode === "development"; 7 | 8 | module.exports = { 9 | plugins: [ 10 | // Some plugins, like postcss-nested, need to run before Tailwind 11 | tailwindcss, 12 | // But others, like autoprefixer, need to run after 13 | autoprefixer, 14 | 15 | !dev && cssnano({ 16 | preset: "default", 17 | }), 18 | ], 19 | }; 20 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/public/favicon.ico -------------------------------------------------------------------------------- /public/fonts/Lato-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/public/fonts/Lato-Bold.woff -------------------------------------------------------------------------------- /public/fonts/Lato-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/public/fonts/Lato-Bold.woff2 -------------------------------------------------------------------------------- /public/fonts/Lato-Light.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/public/fonts/Lato-Light.woff -------------------------------------------------------------------------------- /public/fonts/Lato-Light.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/public/fonts/Lato-Light.woff2 -------------------------------------------------------------------------------- /public/fonts/Lato-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/public/fonts/Lato-Regular.woff -------------------------------------------------------------------------------- /public/fonts/Lato-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/public/fonts/Lato-Regular.woff2 -------------------------------------------------------------------------------- /public/fonts/Lato-Thin.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/public/fonts/Lato-Thin.woff -------------------------------------------------------------------------------- /public/fonts/Lato-Thin.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/public/fonts/Lato-Thin.woff2 -------------------------------------------------------------------------------- /public/images/default-profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/public/images/default-profile.png -------------------------------------------------------------------------------- /public/images/profiles/captain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/public/images/profiles/captain.png -------------------------------------------------------------------------------- /public/images/profiles/stark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/public/images/profiles/stark.png -------------------------------------------------------------------------------- /public/images/sessions/awesome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/public/images/sessions/awesome.png -------------------------------------------------------------------------------- /public/images/sessions/bspwm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/public/images/sessions/bspwm.png -------------------------------------------------------------------------------- /public/images/sessions/budgie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/public/images/sessions/budgie.png -------------------------------------------------------------------------------- /public/images/sessions/cinnamon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/public/images/sessions/cinnamon.png -------------------------------------------------------------------------------- /public/images/sessions/deepin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/public/images/sessions/deepin.png -------------------------------------------------------------------------------- /public/images/sessions/dwm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/public/images/sessions/dwm.png -------------------------------------------------------------------------------- /public/images/sessions/elementary.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/public/images/sessions/elementary.png -------------------------------------------------------------------------------- /public/images/sessions/enlightenment.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/public/images/sessions/enlightenment.png -------------------------------------------------------------------------------- /public/images/sessions/gnome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/public/images/sessions/gnome.png -------------------------------------------------------------------------------- /public/images/sessions/i3-with-shmlog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/public/images/sessions/i3-with-shmlog.png -------------------------------------------------------------------------------- /public/images/sessions/i3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/public/images/sessions/i3.png -------------------------------------------------------------------------------- /public/images/sessions/liri.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/public/images/sessions/liri.png -------------------------------------------------------------------------------- /public/images/sessions/lxde.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/public/images/sessions/lxde.png -------------------------------------------------------------------------------- /public/images/sessions/mate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/public/images/sessions/mate.png -------------------------------------------------------------------------------- /public/images/sessions/plasma.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/public/images/sessions/plasma.png -------------------------------------------------------------------------------- /public/images/sessions/plasmawayland.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/public/images/sessions/plasmawayland.png -------------------------------------------------------------------------------- /public/images/sessions/qtile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/public/images/sessions/qtile.png -------------------------------------------------------------------------------- /public/images/sessions/session-default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/public/images/sessions/session-default.png -------------------------------------------------------------------------------- /public/images/sessions/sway.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/public/images/sessions/sway.png -------------------------------------------------------------------------------- /public/images/sessions/ubuntu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/public/images/sessions/ubuntu.png -------------------------------------------------------------------------------- /public/images/sessions/xfce.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/public/images/sessions/xfce.png -------------------------------------------------------------------------------- /public/images/sessions/xmonad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitneeraj/lightdm-webkit2-theme-reactive/99b2a1c95ce39ccd2f43bcb82f51ffc5ffcdd4f9/public/images/sessions/xmonad.png -------------------------------------------------------------------------------- /public/index.theme: -------------------------------------------------------------------------------- 1 | [theme] 2 | name=reactive 3 | description=A reactive lightdm webkit2 theme 4 | engine=lightdm-webkit2-greeter 5 | url=index.html 6 | session=dwm 7 | -------------------------------------------------------------------------------- /src/App.svelte: -------------------------------------------------------------------------------- 1 | 28 | 29 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /src/components/404.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 |

Not Found

7 | Login 8 |
9 | -------------------------------------------------------------------------------- /src/components/BackgroundPatterns.svelte: -------------------------------------------------------------------------------- 1 | 25 | 26 |
27 |

Background Patterns

28 |
    29 |
  • 30 |

    Animated Grid Walls

    31 | handleOnChange(animatedWalls, 'animatedWalls')} 34 | /> 35 |
    • 36 |
  • 37 |

    Shooting Stars

    38 | handleOnChange(shootingStars, 'shootingStars')} 41 | /> 42 |
    • 43 |
  • 44 |

    Floating Bubbles

    45 | 48 | handleOnChange(floatingBubbles, 'floatingBubbles')} 49 | /> 50 |
    • 51 |
  • 52 |

    Fireflies

    53 | handleOnChange(fireflies, 'fireflies')} 56 | /> 57 |
    • 58 |
  • 59 |

    Color Drops

    60 | handleOnChange(colorDrops, 'colorDrops')} 63 | /> 64 |
    • 65 |
66 | 67 |
68 | -------------------------------------------------------------------------------- /src/components/BackgroundPictures.svelte: -------------------------------------------------------------------------------- 1 | 29 | 30 |
31 |

Backgrounds

32 |
35 |
    38 |
  • 41 | 55 |
    • 56 | {#each backgrounds as background} 57 |
  • 60 | 74 |
    • 75 | {/each} 76 |
77 |
78 | 79 |
80 | -------------------------------------------------------------------------------- /src/components/DMlist.svelte: -------------------------------------------------------------------------------- 1 | 19 | 20 |
21 |
24 |
    27 | {#each DEList as { key, name }} 28 |
  • 31 | 52 |
    • 53 | {/each} 54 |
55 | 56 |
57 |
58 | 59 | 64 | -------------------------------------------------------------------------------- /src/components/Footer.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
13 |
14 | 15 | 16 | {DEName} 17 | 18 |
19 |
20 | 21 | 22 | 23 |
24 |
25 | -------------------------------------------------------------------------------- /src/components/Header.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |
10 |
11 | 12 | 13 | 14 |
15 |
16 | 17 | 18 |
19 |
20 | -------------------------------------------------------------------------------- /src/components/Login.svelte: -------------------------------------------------------------------------------- 1 | 49 | 50 |
53 |
57 | 113 |
114 | -------------------------------------------------------------------------------- /src/components/LoginSettings.svelte: -------------------------------------------------------------------------------- 1 | 22 | 23 |
24 |

Login settings

25 |
    26 |
  • 27 |

    Position of login form

    28 |
      29 | {#each positions as position} 30 |
    • 31 | 41 |
      • 42 | {/each} 43 |
    44 |
    • 45 |
  • 46 |

    Login box type

    47 |
      48 | {#each box as boxType} 49 |
    • 50 | 60 |
      • 61 | {/each} 62 |
    63 |
    • 64 |
65 | 66 |
67 | -------------------------------------------------------------------------------- /src/components/Power.svelte: -------------------------------------------------------------------------------- 1 | 17 | 18 |
19 |
20 | 27 | 34 | 41 |
42 | 43 | 44 |
45 | -------------------------------------------------------------------------------- /src/components/Settings.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 |

Theme Configurations

10 |
    11 |
  • 12 | 13 |
    • 22 |
  • 23 | 24 | 30 | Background Pictures 31 | 32 |
    • 33 |
  • 34 | 35 | 41 | Background Patterns 42 | 43 |
    • 44 |
45 | 46 |
47 | -------------------------------------------------------------------------------- /src/components/SiteLayout.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
19 | {#if $settings.backgroundSettings.animatedWalls} 20 | 21 | {/if} 22 | 23 | {#if $settings.backgroundSettings.shootingStars} 24 | 25 | {/if} 26 | 27 | {#if $settings.backgroundSettings.floatingBubbles} 28 | 29 | {/if} 30 | 31 | {#if $settings.backgroundSettings.fireflies} 32 | 33 | {/if} 34 | 35 | {#if $settings.backgroundSettings.colorDrops} 36 | 37 | {/if} 38 |
39 |
40 | 41 |
42 |
43 |
44 | -------------------------------------------------------------------------------- /src/components/base/Cancel.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | Go Back 9 | 10 | -------------------------------------------------------------------------------- /src/components/base/ColorDrops.svelte: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 | 148 | 1479 | -------------------------------------------------------------------------------- /src/components/base/FloatingBubbles.svelte: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 | 54 | 567 | -------------------------------------------------------------------------------- /src/components/base/GridAnimatedWall.svelte: -------------------------------------------------------------------------------- 1 | 30 | 31 | 32 |
36 | 37 |
38 |
39 |
40 |
41 | 42 | 43 |
44 |
45 |
46 |
47 | 48 | 49 |
50 |
51 |
52 | 53 | 54 |
55 |
56 |
57 | 58 | 59 |
60 |
61 |
62 | 63 | 64 |
65 |
66 |
67 | 68 | 69 |
70 |
71 |
72 | 73 | 74 |
75 |
76 |
77 |
78 | -------------------------------------------------------------------------------- /src/components/base/Icon.svelte: -------------------------------------------------------------------------------- 1 | 88 | 89 | {@html displayIcon.svg} 98 | -------------------------------------------------------------------------------- /src/components/base/ModeSwitch.svelte: -------------------------------------------------------------------------------- 1 | 22 | 23 | 40 | -------------------------------------------------------------------------------- /src/components/base/ShootingStars.svelte: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 | 54 | 435 | -------------------------------------------------------------------------------- /src/components/base/SiteLayout.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 |
17 | {#if $settings.backgroundSettings.animatedWalls === 'true'} 18 | 19 | {/if} 20 | 21 | {#if $settings.backgroundSettings.shootingStars === 'true'} 22 | 23 | {/if} 24 | 25 | {#if $settings.backgroundSettings.floatingBubbles === 'true'} 26 | 27 | {/if} 28 | 29 |
30 |
31 | 32 |
33 |
34 |
35 | -------------------------------------------------------------------------------- /src/components/base/Toggle.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 11 | 12 | 66 | -------------------------------------------------------------------------------- /src/components/base/datetime.svelte: -------------------------------------------------------------------------------- 1 | 33 | 34 |
35 | {day} 36 | {months[month]} 37 | {year} 38 | {hour} : {min} : {sec <= 9 ? `0${sec}` : sec} 39 |
40 | -------------------------------------------------------------------------------- /src/components/content.json: -------------------------------------------------------------------------------- 1 | { 2 | "loginSettings": { 3 | "positions": [ 4 | { 5 | "type": "left", 6 | "text": "Left", 7 | "value": "justify-start" 8 | }, 9 | { 10 | "type": "center", 11 | "text": "Center", 12 | "value": "justify-center" 13 | }, 14 | { 15 | "type": "right", 16 | "text": "Right", 17 | "value": "justify-end" 18 | } 19 | ], 20 | "box": [ 21 | { 22 | "type": "with-card", 23 | "text": "With Card", 24 | "value": "card" 25 | }, 26 | { 27 | "type": "without-card", 28 | "text": "Without Card", 29 | "value": "flex items-center" 30 | } 31 | ] 32 | }, 33 | "backgroundSettings": { 34 | "backgroundPatterns": [ 35 | { 36 | "type": "grid-animated-walls", 37 | "text": "Animated Grid Walls" 38 | } 39 | ] 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/constants/lightdm.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-unused-vars */ 2 | const lightdm = () => { 3 | const defaultLightDM = { 4 | in_authentication: false, 5 | is_authenticated: false, 6 | authentication_user: null, 7 | default_session: 'default', 8 | can_suspend: true, 9 | can_hibernate: true, 10 | can_shutdown: true, 11 | can_restart: true, 12 | select_user: 'johnny', 13 | sessions: [ 14 | { 15 | name: 'DWM', 16 | key: 'dwm' 17 | }, 18 | { 19 | name: 'awesome wm', 20 | key: 'awesome' 21 | }, 22 | { 23 | name: 'bspwm', 24 | key: 'bspwm' 25 | }, 26 | { 27 | name: 'KDE Plasma', 28 | key: 'plasma' 29 | }, 30 | { 31 | name: 'Gnome 3', 32 | key: 'gnome' 33 | }, 34 | { 35 | name: 'XFCE 4', 36 | key: 'xfce' 37 | }, 38 | { 39 | name: 'Cinnamon', 40 | key: 'cinnamon' 41 | }, 42 | { 43 | name: 'i3wm', 44 | key: 'i3' 45 | }, 46 | { 47 | name: 'xmonad', 48 | key: 'xmonad' 49 | }, 50 | { 51 | name: 'Deepin', 52 | key: 'deepin' 53 | }, 54 | { 55 | name: 'Budgie', 56 | key: 'budgie' 57 | }, 58 | { 59 | name: 'Ubuntu', 60 | key: 'ubuntu' 61 | }, 62 | { 63 | name: 'Elementary OS', 64 | key: 'elementary' 65 | }, 66 | { 67 | name: 'Enlightenment', 68 | key: 'enlightenment' 69 | }, 70 | { 71 | name: 'Liri', 72 | key: 'liri' 73 | }, 74 | { 75 | name: 'LXDE', 76 | key: 'lxde' 77 | }, 78 | { 79 | name: 'Mate', 80 | key: 'mate' 81 | } 82 | ], 83 | users: [ 84 | { 85 | display_name: 'Captain America', 86 | username: 'captain', 87 | image: 'images/profiles/captain.png' 88 | }, 89 | { 90 | display_name: 'Tony Stark', 91 | username: 'stark', 92 | image: 'images/profiles/stark.png' 93 | } 94 | ], 95 | languages: [ 96 | { 97 | name: 'American English', 98 | code: 'en_US.utf8' 99 | } 100 | ], 101 | language: 'American English', 102 | authenticate: username => { 103 | return setTimeout(() => Promise.resolve(), 1000) 104 | }, 105 | cancel_authentication: () => { 106 | defaultLightDM.is_authenticated = false 107 | console.log('cancelling authentication...') 108 | }, 109 | respond: password => { 110 | if (password === 'toor') { 111 | defaultLightDM.is_authenticated = true 112 | } 113 | // @ts-ignore 114 | window.authentication_complete() 115 | }, 116 | start_session_sync: session => { 117 | console.log(`Logged with session: '${session}'!`) 118 | }, 119 | shutdown: () => { 120 | console.log('System is shutting down...') 121 | }, 122 | restart: () => { 123 | console.log('System is rebooting...') 124 | }, 125 | hibernate: () => { 126 | console.log('System is hibernating...') 127 | }, 128 | suspend: () => { 129 | console.log('System is suspending...') 130 | } 131 | } 132 | 133 | // @ts-ignore 134 | return window.lightdm || defaultLightDM 135 | } 136 | 137 | export default lightdm() 138 | -------------------------------------------------------------------------------- /src/constants/settings.js: -------------------------------------------------------------------------------- 1 | export default { 2 | loginSettings: { 3 | position: 'justify-center', 4 | box: 'card' 5 | }, 6 | backgroundSettings: { 7 | backgroundImage: 'none', 8 | animatedWalls: true 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/constants/variables.js: -------------------------------------------------------------------------------- 1 | export const DEFAULT_USERNAME = 'r-defaultUsername' 2 | export const DEFAULT_SESSION = 'r-defaultSession' 3 | export const BASE_URL = 'r-baseurl' 4 | export const SETTINGS = 'r-settings' 5 | -------------------------------------------------------------------------------- /src/global.postcss: -------------------------------------------------------------------------------- 1 | /* Write your global styles here, in PostCSS syntax */ 2 | @import './styles/fonts.scss'; 3 | 4 | @tailwind base; 5 | @tailwind components; 6 | @tailwind utilities; 7 | 8 | @layer components { 9 | .font-family-regular { 10 | font-family: 'Lato Regular', sans-serif; 11 | } 12 | .font-family-light { 13 | font-family: 'Lato Light', sans-serif; 14 | } 15 | .form-controls { 16 | @apply px-2 py-2 mb-3 text-center rounded focus:shadow-md outline-none transition ease-out duration-300 bg-white bg-opacity-10 text-gray-900 placeholder-gray-300 border-2 border-gray-50 border-opacity-5 border-solid dark:text-gray-300; 17 | } 18 | .icon-btn { 19 | @apply focus:outline-none text-gray-100 mt-2 dark:text-gray-400; 20 | } 21 | .icon-link { 22 | @apply flex items-center text-gray-100 dark:text-gray-400 border-2 border-opacity-0 border-transparent p-2 hover:bg-opacity-10 hover:backdrop-filter hover:backdrop-blur-sm hover:rounded-sm hover:border-2 hover:bg-white hover:border-gray-50 hover:border-opacity-10 hover:border-solid; 23 | } 24 | .card { 25 | @apply flex items-center shadow-lg bg-opacity-20 backdrop-filter backdrop-blur-sm rounded-lg border-2 bg-white border-gray-50 border-opacity-10 border-solid dark:bg-gray-700 dark:bg-opacity-60; 26 | } 27 | .li-card { 28 | @apply text-xl py-2 mb-3 flex justify-center items-center text-gray-100 dark:text-gray-400 shadow-lg bg-opacity-20 backdrop-filter backdrop-blur-sm rounded-lg border-2 bg-white border-gray-50 border-opacity-10 border-solid dark:bg-gray-700 dark:bg-opacity-60 cursor-pointer hover:bg-opacity-10 dark:hover:bg-opacity-20 transition duration-200; 29 | } 30 | .wrapper { 31 | @apply flex flex-col items-center; 32 | } 33 | .heading { 34 | @apply text-center text-3xl text-gray-100 dark:text-gray-400 mb-8 font-family-light; 35 | } 36 | .paragraph-text { 37 | @apply mt-2 text-lg; 38 | } 39 | } 40 | 41 | .sitelayout-wrapper { 42 | position: relative; 43 | overflow: hidden; 44 | display: grid; 45 | grid-template-columns: 1fr 1fr; 46 | grid-template-rows: 0.05fr 1fr 0.05fr; 47 | grid-template-areas: 48 | 'header header' 49 | 'main main' 50 | 'footer footer'; 51 | height: 100vh; 52 | } 53 | 54 | header, 55 | main, 56 | footer { 57 | display: flex; 58 | justify-content: space-between; 59 | padding: 8px; 60 | align-items: center; 61 | } 62 | 63 | header { 64 | grid-area: header; 65 | } 66 | 67 | main { 68 | grid-area: main; 69 | justify-content: center; 70 | } 71 | 72 | footer { 73 | grid-area: footer; 74 | } 75 | -------------------------------------------------------------------------------- /src/helpers/functions.js: -------------------------------------------------------------------------------- 1 | // @ts-nocheck 2 | import { 3 | isAuthenticationError, 4 | isLogin, 5 | isAuthenticated, 6 | settings 7 | } from '../store' 8 | import lightdm from '../constants/lightdm' 9 | import { DEFAULT_SESSION, SETTINGS } from '../constants/variables' 10 | 11 | export const setLocalStorage = (key, value) => { 12 | window.localStorage.setItem(key, value) 13 | } 14 | 15 | export const getLocalStorage = key => { 16 | return window.localStorage.getItem(key) 17 | } 18 | 19 | const authenticationSuccess = () => { 20 | let session = getLocalStorage(DEFAULT_SESSION) || lightdm.sessions[0].key 21 | isAuthenticationError.update(() => false) 22 | isLogin.update(() => false) 23 | isAuthenticated.update(() => true) 24 | lightdm.start_session_sync(session) 25 | } 26 | 27 | const authenticationFail = () => { 28 | isAuthenticated.update(() => false) 29 | isLogin.update(() => false) 30 | isAuthenticationError.update(() => true) 31 | setTimeout(() => { 32 | isAuthenticationError.update(() => false) 33 | }, 5000) 34 | } 35 | 36 | export const initiateAuthenticationComplete = () => { 37 | // @ts-ignore 38 | window.authentication_complete = () => { 39 | if (lightdm.is_authenticated) { 40 | authenticationSuccess() 41 | } else { 42 | authenticationFail() 43 | } 44 | } 45 | } 46 | 47 | export const updateSettings = (newSettings, settingName) => { 48 | const oldSettings = JSON.parse(getLocalStorage(SETTINGS)) 49 | const finalSettings = { 50 | ...oldSettings, 51 | [settingName]:{ 52 | ...oldSettings[settingName], 53 | ...newSettings 54 | } 55 | } 56 | setLocalStorage( 57 | SETTINGS, 58 | JSON.stringify(finalSettings) 59 | ) 60 | settings.update(() => (finalSettings)) 61 | } 62 | 63 | export const getImages = async (dir) => { 64 | const backgroundImagesDir = 65 | (window.greeter_config && 66 | window.greeter_config.branding && 67 | window.greeter_config.branding.background_images) || 68 | '/usr/share/backgrounds' 69 | 70 | return window.theme_utils && await window.theme_utils.dirlist(dir ? dir : backgroundImagesDir) 71 | } 72 | 73 | 74 | export const findImages = async (dirlist) => { 75 | let images = [], 76 | subdirs = [], 77 | recursion = 0 78 | // Check image files/dir, and push it to its respective array 79 | for (let file of dirlist) { 80 | if (file.match(/(png|PNG)|(jpg|JPEG)|(bmp|BMP)/)) { 81 | images.push(file) 82 | } else if (!file.match(/\w+\.\w+/)) { 83 | subdirs.push(file) 84 | } 85 | } 86 | // Search recursively 87 | if (subdirs.length && recursion < 3) { 88 | recursion++ 89 | for (let dir of subdirs) { 90 | let list = await getImages(dir) 91 | 92 | if (list && list.length) { 93 | var toadd = await findImages(list) 94 | images.push.apply(images, toadd) 95 | } 96 | } 97 | } 98 | // Return array of images 99 | return images 100 | } 101 | 102 | export const getUser = (username) => { 103 | return lightdm.users.filter(user => user.username === username) 104 | } 105 | -------------------------------------------------------------------------------- /src/helpers/getAbsolutePath.js: -------------------------------------------------------------------------------- 1 | export const getAbsolutePath = () => 2 | window.location.protocol === 'file:' 3 | ? '/usr/share/lightdm-webkit/themes/reactive/' 4 | : '' 5 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import "./global.postcss" 2 | import App from './App.svelte' 3 | 4 | const app = new App({ 5 | target: document.getElementById('app') 6 | }) 7 | 8 | export default app 9 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import { writable } from 'svelte/store' 2 | 3 | import lightdm from '../constants/lightdm' 4 | import { getLocalStorage } from '../helpers/functions' 5 | import { DEFAULT_SESSION, SETTINGS } from '../constants/variables' 6 | import initialSettings from '../constants/settings' 7 | 8 | export const defaultSession = writable( 9 | getLocalStorage(DEFAULT_SESSION) || lightdm.sessions[0].key 10 | ) 11 | export const isAuthenticated = writable(lightdm.is_authenticated) 12 | export const inAuthentication = writable(lightdm.in_authentication) 13 | export const isAuthenticationError = writable(false) 14 | export const isLogin = writable(false) 15 | export const settings = writable( 16 | JSON.parse(getLocalStorage(SETTINGS)) || initialSettings 17 | ) 18 | -------------------------------------------------------------------------------- /src/styles/fonts.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Lato Bold"; 3 | src: url("/fonts/Lato-Bold.woff2") format("woff2"), 4 | url("/fonts/Lato-Bold.woff") format("woff"); 5 | } 6 | @font-face { 7 | font-family: "Lato Light"; 8 | src: url("/fonts/Lato-Light.woff2") format("woff2"), 9 | url("/fonts/Lato-Light.woff") format("woff"); 10 | } 11 | @font-face { 12 | font-family: "Lato Regular"; 13 | src: url("/fonts/Lato-Regular.woff2") format("woff2"), 14 | url("/fonts/Lato-Regular.woff") format("woff"); 15 | } 16 | @font-face { 17 | font-family: "Lato Thin"; 18 | src: url("/fonts/Lato-Thin.woff2") format("woff2"), 19 | url("/fonts/Lato-Thin.woff") format("woff"); 20 | } 21 | -------------------------------------------------------------------------------- /src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /svelte.config.cjs: -------------------------------------------------------------------------------- 1 | const preprocess = require("svelte-preprocess"); 2 | module.exports = { 3 | preprocess: [ 4 | preprocess({ 5 | postcss: true 6 | }), 7 | ], 8 | }; 9 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | const colors = require('tailwindcss/colors') 2 | 3 | module.exports = { 4 | content: ['./index.html', './src/**/*.{js,svelte,json}'], 5 | darkMode: 'class', // or 'media' or 'class' 6 | theme: { 7 | extend: { 8 | colors: { 9 | ...colors 10 | }, 11 | animation: { 12 | shake: 'shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both', 13 | float: 'float 6s ease-in-out infinite' 14 | }, 15 | keyframes: { 16 | shake: { 17 | '10%, 90%': { transform: 'translate3d(-1px, 0, 0)' }, 18 | '20%, 80%': { transform: 'translate3d(2px, 0, 0)' }, 19 | '30%, 50%, 70%': { transform: 'translate3d(-4px, 0, 0)' }, 20 | '40%, 60%': { transform: 'translate3d(4px, 0, 0)' } 21 | }, 22 | float: { 23 | '0%': { 24 | 'box-shadow': '0 5px 15px 0px rgba(0,0,0,0.6)', 25 | transform: 'translatey(0px)' 26 | }, 27 | '50%': { 28 | 'box-shadow': '0 25px 15px 0px rgba(0,0,0,0.2)', 29 | transform: 'translatey(-20px)' 30 | }, 31 | '100%': { 32 | 'box-shadow': '0 5px 15px 0px rgba(0,0,0,0.6)', 33 | transform: 'translatey(0px)' 34 | } 35 | } 36 | } 37 | } 38 | }, 39 | plugins: [] 40 | } 41 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import svelte from '@sveltejs/vite-plugin-svelte' 3 | 4 | export default () => { 5 | let path = '/' 6 | 7 | if(process.env.type === 'lightdm'){ 8 | path = '/usr/share/lightdm-webkit/themes/reactive/' 9 | }else if (process.env.type === 'ghpages'){ 10 | path = '/lightdm-webkit2-theme-reactive/' 11 | } 12 | 13 | return defineConfig({ 14 | plugins: [svelte()], 15 | base: path, 16 | build: { 17 | outDir: 'reactive' 18 | } 19 | }) 20 | } 21 | --------------------------------------------------------------------------------