add support for custom css style (#1298)

* add support for custom css style
* move custom sass file in private folder
* rquested fixes

Author: reloxx13

assets/sass/framework.scss

@@ -34,3 +34,6 @@
 // Themes
 @use 'themes/classic';
 @use 'themes/modern';
+
+// Custom CSS
+@use '../../private/sass/custom';

docs/configuration/index.md

@@ -0,0 +1,4 @@
+# Customizing
+
+## [Sounds](sounds.md)
+## [Customizing SCSS styles](styles.md)

docs/customizing/index.md

@@ -0,0 +1,23 @@
+# Customizing SCSS styles
+
+Photobooth uses a small SCSS build pipeline based on `gulp` and `sass`. You can add your own styles that will be compiled to CSS and loaded together with the default styles.
+
+## Recommended: `_custom.scss` (loaded automatically)
+
+This means:
+
+-   If `private/sass/_custom.scss` exists, it is automatically imported into `framework.scss`.
+-   No template changes are needed – your styles are bundled into `resources/css/framework.css`, which is already loaded by Photobooth.
+
+To use this:
+
+1. Create a new file called `_custom.scss` in `private/sass`.
+2. Add your overrides or additional styles to this file.
+
+## Building the CSS
+
+From the project root run:
+
+-   `npm install` (first time only, to install Node.js dependencies)
+-   `npm run build:sass` to only compile SCSS, or
+-   `npm run build` to run the full asset build (SCSS, JS, etc.).

docs/configuration/sounds.md docs/customizing/sounds.mddocs/configuration/sounds.md renamed to docs/customizing/sounds.md

@@ -21,6 +21,20 @@ gulp.task('sass', async function () {
   try {
     const scssDir = './assets/sass';
     const outputDir = './resources/css';
+
+    const privateScssDir = './private/sass';
+
+    // Ensure the private sass directory exists
+    fs.mkdirSync(privateScssDir, { recursive: true });
+    // Create an optional _custom.scss file if it doesn't exist
+    const optionalCustomCss = path.join(privateScssDir, '_custom.scss');
+    if (!fs.existsSync(optionalCustomCss)) {
+      fs.writeFileSync(
+        optionalCustomCss,
+        '// auto-generated stub for optional custom overrides\n'
+      );
+    }
+
     const files = fs.readdirSync(scssDir);
 
     const scssFiles = files.filter(file => path.extname(file) === '.scss' && file !== 'tailwind.admin.scss');

docs/customizing/styles.md

@@ -39,6 +39,10 @@ nav:
     - gphoto2 Troubleshooting: faq/gphoto2-troubleshooting.md
     - GO2RTC Troubleshooting: faq/go2rtc-troubleshooting.md
     - Tutorials: faq/tutorials.md
+  - Customizing:
+    - Overview: customizing/index.md
+    - Sounds: customizing/sounds.md
+    - CSS styles: customizing/styles.md
   - Community & Contribution:
     - Chat on Telegram: https://t.me/PhotoboothGroup
     - Contributor Covenant Code of Conduct: code_of_conduct.md