# xStyle custom CSS for Alkemics front

## What is this?

This repository aims to tweak some website visuals. Changes are made inside your broswer via an extension, so it doesn't actually break anything.

![example of banner](/public/illustration.png)

## How does it works?

Nothing is changed on the software itself: It's your broswer that applies more CSS rules to make it happens. It relies on the Chrome extension xStyle, and that make it easy to turn them on or off, just in case it conflict with the website.

1. Install xStyle from the [Chrome Web Store ⎋](https://chrome.google.com/webstore/detail/xstyle/hncgkmhphmncjohllpoleelnibpmccpj)
2. In the extension, create a new Style
3. Copy one of the files' content available here, in the text editor
4. You can use the file name as the style name, or use your own.

Repeate for each styles you want to enables.

## What each styles do?

* `PREP banner.css`: Change the Preproduction banner and login's footer
  ![example of PREP banner](public/PREP_banner.jpg)
* `PLLR banner.css`: Change your Pillar banner and login's footer
  ![example of PLLR banner](public/PLLR_banner.jpg)
* `PERF banner.css`: Change the Load Testing banner and login's footer
  ![example of PERF banner](public/PERF_banner.jpg)
* `PROD banner.css`: Change the Production banner and login's footer
  ![example of Prod banner](public/PROD_banner_animated.gif)
* `Whiter banner.css`: Look & feel, mainly changing text to pure white and the hover and active elements. A _must have_. Works with the others files.
* `Navbar color on Notif.css`: Emphase the notification banner by coloring the navbar as well, with a nice and tidy `transition`.
  ![example of Color switching](public/navbar-notification-animated.gif)
* `Squared logo place`: Remove the `border-radius` used for company logos, to allow more shapes than just circles.  
  ![example of a not-cicle logo that can takes all space](public/squared-logo.png)
* `Blinkers.less`: Enable your blinkers when you use pagination arrows.  
  ![Example of blinkers](public/pagniation-are-blinkers.gif)
* `Sigils.css`: Change the top-right user icon to a Shop or Factory depending on if you are logged as ar Retailer or a Supplier.
  * ![example of factory icon](public/user-white-factory.png) ![example of shop icon](public/user-white-shop.png)
* `Jirafy.less`: Animate the Jira navbar with a light rotation on buttons. Lighten the Create button as well.
  ![icon take less space](public/jirafy-small-icon.png)
  ![nice animation on click](public/jirafy-animated.gif)
