v.0.0.1

README.md

@@ -1 +1,3 @@
-# PeerTube theme Quickstart
+# MDG PeerTube theme light
+
+Dies ist das Theme für den Peertube-Server des MDG Hamburgs.

assets/style.css

@@ -0,0 +1,177 @@
+body#custom-css {
+  --is-dark: 1; /* Or --is-dark: 1 if it's a dark theme */
+  
+  /* Primary color variants (from darkest to lightest) */
+  --primary: #71b737;
+  --primary-700: #5a9228;
+  --primary-650: #62a02d;
+  --primary-600: #69ad32;
+  --primary-550: #71b737;
+  --primary-500: #7ec245;
+  --primary-450: #8bc954;
+  --primary-400: #98d063;
+  --primary-350: #a5d772;
+  --primary-300: #b2de81;
+  --primary-250: #bfe590;
+  --primary-200: #ccec9f;
+  --primary-150: #5a9228;
+  --primary-100: #e6fabd;
+  --primary-50: #f3fde6;
+  
+  --border-primary: #71b737;
+  --border-secondary: hsl(0, 0%, 32%);
+  
+  /* Base colors */
+  --bg: hsl(0, 0%, 12%);
+  --fg: hsl(0, 0%, 100%);
+  --fg-400: hsl(0, 0%, 95%);
+  --fg-350: hsl(0, 0%, 90%);
+  --fg-300: hsl(0, 0%, 85%);
+  --fg-250: hsl(0, 0%, 85%);
+  --fg-200: hsl(0, 0%, 85%);
+  --fg-100: hsl(0, 0%, 75%);
+  
+  /* Icon colors */
+  --icon-bg: hsl(0, 0%, 100%);
+  --active-icon-color: #ffffff;
+  --secondary-icon-color: hsl(221, 59%, 61%);
+  
+  /* On-primary colors (text/icons on primary background) */
+  --on-primary: hsl(0, 0%, 100%);
+  --on-primary-700: hsl(0, 0%, 100%);
+  --on-primary-650: hsl(0, 0%, 100%);
+  --on-primary-600: hsl(0, 0%, 100%);
+  --on-primary-550: hsl(0, 0%, 100%);
+  --on-primary-500: hsl(0, 0%, 100%);
+  --on-primary-450: hsl(0, 0%, 98%);
+  --on-primary-400: hsl(0, 0%, 20%);
+  --on-primary-350: hsl(0, 0%, 18%);
+  --on-primary-300: hsl(0, 0%, 16%);
+  --on-primary-250: hsl(0, 0%, 14%);
+  --on-primary-200: hsl(0, 0%, 12%);
+  --on-primary-150: hsl(0, 0%, 10%);
+  --on-primary-100: hsl(0, 0%, 8%);
+  --on-primary-50: hsl(0, 0%, 6%);
+  
+  /* Alert colors */
+  --alert-primary-fg: var(--on-primary);
+  --alert-primary-bg: #ca8047;
+  --alert-primary-border-color: #cd9e7a;
+
+  /* Header */
+  --header-bg: var(--bg);
+  --header-fg: hsl(0, 0%, 90%);
+  
+  /* Secondary background */
+  --bg-secondary: hsl(0, 0%, 22%);
+  --bg-secondary-50: hsl(0, 0%, 12%);
+  --bg-secondary-100: hsl(0, 0%, 17%);
+  --bg-secondary-150: hsl(0, 0%, 22%);
+  --bg-secondary-200: hsl(0, 0%, 22%);
+  --bg-secondary-250: hsl(0, 0%, 22%);
+  --bg-secondary-300: hsl(0, 0%, 22%);
+  --bg-secondary-350: hsl(0, 0%, 27%);
+  --bg-secondary-400: hsl(0, 0%, 32%);
+  --bg-secondary-450: hsl(0, 0%, 37%);
+  --bg-secondary-500: hsl(0, 0%, 42%);
+  --bg-secondary-550: hsl(0, 0%, 47%);
+  --bg-secondary-600: hsl(0, 0%, 52%);
+  /* Menu colors */
+  --menu-fg: hsl(0, 0%, 90%);
+  --menu-fg-600: hsl(0, 0%, 60%);
+  --menu-fg-550: hsl(0, 0%, 65%);
+  --menu-fg-500: hsl(0, 0%, 70%);
+  --menu-fg-450: hsl(0, 0%, 75%);
+  --menu-fg-400: hsl(0, 0%, 80%);
+  --menu-fg-350: hsl(0, 0%, 82%);
+  --menu-fg-300: hsl(0, 0%, 84%);
+  --menu-fg-250: hsl(0, 0%, 86%);
+  --menu-fg-200: hsl(0, 0%, 88%);
+  --menu-fg-150: hsl(0, 0%, 90%);
+  --menu-fg-100: hsl(0, 0%, 92%);
+  --menu-fg-50: hsl(0, 0%, 94%);
+  
+  --menu-bg: hsl(0, 0%, 22%);
+  --menu-bg-600: hsl(0, 0%, 18%);
+  --menu-bg-550: hsl(0, 0%, 19%);
+  --menu-bg-500: hsl(0, 0%, 20%);
+  --menu-bg-450: hsl(0, 0%, 21%);
+  --menu-bg-400: hsl(0, 0%, 24%);
+  --menu-bg-350: hsl(0, 0%, 26%);
+  --menu-bg-300: hsl(0, 0%, 28%);
+  --menu-bg-250: hsl(0, 0%, 30%);
+  --menu-bg-200: hsl(0, 0%, 32%);
+  
+  /* Input fields */
+  --input-fg: hsl(0, 0%, 95%);
+  --input-bg: hsl(0, 0%, 18%);
+  --input-bg-550: hsl(0, 0%, 20%);
+  --input-bg-600: hsl(0, 0%, 16%);
+  --input-bg-in-secondary: hsl(0, 0%, 16%);
+  --input-bg-in-modal: hsl(0, 0%, 18%);
+  --input-danger-fg: #ff6b6b;
+  --input-danger-bg: rgba(255, 107, 107, 0.1);
+  --input-placeholder-color: hsl(0, 0%, 55%);
+  --input-border-color: hsl(0, 0%, 32%);
+  --input-check-active-fg: #ffffff;
+  --input-check-active-bg: var(--primary);
+  --input-placeholder-color: var(--menu-fg-600);
+  
+  /* Textarea */
+  --textarea-fg: hsl(0, 0%, 95%);
+  --textarea-bg: hsl(0, 0%, 18%);
+  --textarea-bg-in-secondary: hsl(0, 0%, 16%);
+  --textarea-bg-in-modal: hsl(0, 0%, 18%);
+  --textarea-placeholder-color: var(--menu-fg-600);
+  
+  /* Support button */
+  --support-btn-bg: var(--primary);
+  --support-btn-fg: #ffffff;
+  --support-btn-heart-bg: #e74c3c;
+
+  /* PrimeNG Select components */
+  --p-select-focus-ring-color: var(--secondary-icon-color);
+  --p-select-placeholder-color: var(--menu-fg-600);
+  --p-multiselect-background: hsl(0, 0%, 18%);
+  --p-select-background: hsl(0, 0%, 18%);
+  --p-select-border-color: hsl(0, 0%, 32%);
+  --p-select-focus-border-color: hsl(0, 0%, 42%);
+  --p-select-option-focus-background: var(--primary-400);
+  --p-select-option-focus-color: #ffffff;
+  --p-select-option-background: var(--bg-secondary-350);
+  --p-select-option-color: #ffffff;
+  --p-select-overlay-color: hsl(0, 0%, 95%);
+  --p-select-overlay-background: hsl(0, 0%, 20%);
+  --p-select-overlay-border-color: hsl(0, 0%, 32%);
+  --p-select-dropdown-color: hsl(0, 0%, 90%);
+  --p-select-option-selected-focus-background: var(--primary-500);
+  --p-select-option-selected-focus-color: #ffffff;
+  --p-select-option-selected-background: var(--primary);
+
+  --p-datatable-header-background: var(--bg-secondary-350);
+  --p-datatable-header-color: var(--fg);
+  --p-datatable-header-cell-color: var(--fg);
+  --p-datatable-header-cell-background: var(--bg-secondary-300);
+  --p-datatable-row-background:var(--bg-secondary-400);
+  --p-datatable-row-color: var(--fg);
+  --p-datatable-header-cell-selected-color: var(--fg);
+  --p-datatable-header-cell-selected-background: var(--bg-secondary-300);
+  --p-paginator-background: var(--bg-secondary-450);
+  --p-paginator-color: var(--fg);
+  --p-paginator-current-page-report-color: var(--fg-350);
+  --p-datatable-body-cell-border-color: var(--fg-100);
+  --p-paginator-nav-button-selected-background: var(--fg-100);
+  --p-paginator-nav-button-selected-color: var(--bg);
+}
+
+#custom-css .video-thumbnail .play-overlay .icon::before {
+    background-color: hsl(221, 59%, 61%);
+}
+
+#custom-css .result-type {
+    background-color: var(--primary-500);
+}
+
+#custom-css ::selection {
+    background-color: var(--primary-700);
+}

client/video-watch-client-plugin.js

@@ -1,7 +0,0 @@
-function register ({ registerHook, peertubeHelpers }) {
-
-}
-
-export {
-  register
-}

languages/fr.json

@@ -1,3 +0,0 @@
-{
-  "Hello world": "Hello le monde"
-}

package.json

@@ -1,30 +1,24 @@
 {
-  "name": "peertube-theme-quickstart",
-  "version": "0.0.2",
-  "description": "PeerTube theme quickstart",
+  "name": "peertube-theme-mdg-light",
+  "version": "0.0.1",
+  "description": "MDG PeerTube theme light",
   "engine": {
-    "peertube": ">=1.3.0"
+    "peertube": ">=7.3.0"
   },
   "keywords": [
     "peertube",
     "theme"
   ],
-  "homepage": "https://framagit.org/framasoft/peertube/peertube-theme-quickstart",
-  "author": "Chocobozzz",
-  "bugs": "https://framagit.org/framasoft/peertube/peertube-theme-quickstart/issues",
+  "homepage": "https://gitea.mdg-hamburg.de/julian.kiedaisch/peertube-theme-mdg-light",
+  "author": "Julian Kiedaisch",
+  "bugs": "https://gitea.mdg-hamburg.de/julian.kiedaisch/peertube-theme-mdg-light/issues",
   "staticDirs": {
-    "images": "public/images"
   },
   "css": [
     "assets/style.css"
   ],
   "clientScripts": [
-    {
-      "script": "client/common-client-plugin.js",
-      "scopes": [ "common" ]
-    }
   ],
   "translations": {
-    "fr-FR": "./languages/fr.json"
   }
 }