jellyfin-lookin theme, changes from master, bump to 0.3.0

Now uses a customized bootstrap that looks something like Jellyfin. Some
small ui changes were needed. This be overridden by downloading bs5's css and using the custom_css
option if you don't like it. sass file is included for your own modification. Changes made to master have been added also.

scss/README.md

@@ -0,0 +1,15 @@
+## SCSS
+
+* `bs5-jf.scss` contains the source for the customizations to bootstrap. To customize the UI, you can make modifications to this file and then compile it.
+
+Note: assumes that bootstrap is installed in `../node_modules/bootstrap` relative to itself.
+* Compilation requires a sass compiler of your choice, and `postcss-cli`, `autoprefixer` + `clean-css-cli` from npm.
+* If you're using `sassc`, run `./compile.sh bs5-jf.scss` in this directory. This will create a .css file, and minified .css file.
+* For `node-sass`, replace the `sassc` line in `compile.sh` with 
+```
+node-sass --output-style expanded --precision 6 $1 $css_file
+```
+and run as above.
+* If you're building from source, copy the minified css to `<jf-accounts git directory>/jellyfin_accounts/data/static/bs5-jf.css`.
+* If you're just customizing your install, set `custom_css` in your config as the path to your minified css.
+

scss/bs5-jf.scss

@@ -1,27 +1,40 @@
 $jf-blue: rgb(0, 164, 220);
 $jf-blue-hover: rgba(0, 164, 220, 0.2);
 $jf-blue-focus: rgb(12, 176, 232);
+$jf-blue-light: #4bb3dd;
+
 $jf-red: rgb(204, 0, 0);
+$jf-red-light: #e12026;
+$jf-yellower: #ffc107;
+$jf-yellow: #e1b222;
+$jf-orange: #ff870f;
+$jf-green: #6fbd45;
+$jf-green-dark: #008040;
 
 
-$jf-black: rgb(16, 16, 16);
-$jf-gray-90: rgb(32, 32, 32);
-$jf-gray-80: rgb(36, 36, 36); // jf-card
-$jf-gray-70: rgb(41, 41, 41); // jf-input
-$jf-gray-60: rgb(48, 48, 48); // jf-button
-$jf-gray-50: rgb(56, 56, 56); // jf-button-focus
+$jf-black: #101010; // 16 16 16 
+$jf-gray-90: #202020; // 32 32 32
+$jf-gray-80: #242424; // jf-card 36 36 36 
+$jf-gray-70: #292929; // jf-input 41 41 41
+$jf-gray-60: #303030; // jf-button 48 48 48
+$jf-gray-50: #383838; // jf-button-focus 56 56 56 
 $jf-text-bold: rgba(255, 255, 255, 0.87);
 $jf-text-primary: rgba(255, 255, 255, 0.8);
 $jf-text-secondary: rgb(153, 153, 153);
 
-$theme-colors: (
-    "primary":  $jf-blue,
-    "secondary": $jf-gray-50,
-    "success": $jf-blue-focus,
-    "danger": $jf-red,
-    "light": $jf-text-primary,
-    "dark": $jf-gray-90
-);
+$primary:  $jf-blue;
+$secondary: $jf-gray-50;
+$success: $jf-green-dark;
+$danger: $jf-red-light;
+$light: $jf-text-primary;
+$dark: $jf-gray-90;
+$info: $jf-yellow;
+$warning: $jf-yellower;
+
+
+
+$enable-gradients: false;
+$enable-shadows: false;
 
 $enable-rounded: false;
 $body-bg: $jf-black;
@@ -32,11 +45,14 @@ $component-active-bg: $jf-blue-focus;
 $text-muted: $jf-text-secondary;
 $link-color: $jf-blue-focus;
 $btn-link-disabled-color: $jf-text-secondary;
-$input-bg: $jf-gray-70;
+$input-bg: $jf-gray-90;
 $input-color: $jf-text-primary;
 $input-focus-bg: $jf-gray-60;
 $input-focus-border-color: $jf-blue-focus;
-$input-disabled-bg: $jf-gray-90;
+$input-disabled-bg: $jf-gray-70;
+input:disabled {
+    color: $text-muted;
+}
 $input-border-color: $jf-gray-60;
 $input-placeholder-color: $text-muted;
 
@@ -45,7 +61,76 @@ $form-check-input-border: $jf-gray-50;
 $form-check-input-checked-color: $jf-blue-focus;
 $form-check-input-checked-bg-color: $jf-blue-hover;
 
+$input-group-addon-bg: $input-bg;
 
-// roughly @ line 696
+$form-select-disabled-color: $jf-text-secondary;
+$form-select-disabled-bg: $input-disabled-bg;
+$form-select-indicator-color: $jf-gray-50;
+
+$card-bg: $jf-gray-80;
+$card-border-color: null;
+
+$tooltip-color: $jf-text-bold;
+$tooltip-bg: $jf-gray-50;
+
+$modal-content-bg: $jf-gray-80;
+$modal-content-border-color: $jf-gray-50;
+$modal-header-border-color: null;
+$modal-footer-border-color: null;
+
+$list-group-bg: $card-bg;
+$list-group-border-color: $jf-gray-50;
+$list-group-hover-bg: $jf-blue-hover;
+$list-group-active-bg: $jf-blue-focus;
+$list-group-action-color: $jf-text-primary;
+$list-group-action-hover-color: $jf-text-bold;
+$list-group-action-active-color: $jf-text-bold;
+$list-group-action-active-bg: $jf-blue-focus;
+
+// idk why but i had to put these above and below the import
+.list-group-item-danger {
+    color: $jf-text-bold;
+    background-color: $danger;
+}
+
+.list-group-item-success {
+    color: $jf-text-bold;
+    background-color: $success;
+}
 
 @import "../node_modules/bootstrap/scss/bootstrap";
+
+.btn-primary, .btn-outline-primary:hover, .btn-outline-primary:active {
+    color: $jf-text-bold;
+}
+
+.close {
+    color: $jf-text-secondary;
+}
+
+.close:hover, .close:active {
+    color: $jf-text-primary;
+}
+
+.icon-button {
+    color: $text-muted;
+}
+
+.icon-button:hover {
+    color: $jf-text-bold;
+}
+
+.text-bright {
+    color: $jf-text-bold;
+}
+
+.list-group-item-danger {
+    color: $jf-text-bold;
+    background-color: $danger;
+}
+
+.list-group-item-success {
+    color: $jf-text-bold;
+    background-color: $success;
+}
+

scss/compile.sh

@@ -0,0 +1,10 @@
+#!/bin/bash
+css_file=$(echo $1 | sed 's/scss/css/g')
+min_file=$(echo $1 | sed 's/scss/min.css/g')
+sassc -t expanded -p 6 $1 $css_file
+echo "Compiled."
+postcss $css_file --replace --use autoprefixer
+echo "Prefixed."
+echo "Written to $css_file."
+cleancss --level 1 --format breakWith=lf --source-map --source-map-inline-sources --output $min_file $css_file
+echo "Minified version written to $min_file."