diff --git a/README.md b/README.md index 58edf0b..36cb95b 100644 --- a/README.md +++ b/README.md @@ -1 +1,3 @@ -# PeerTube theme Quickstart +# MDG PeerTube theme light + +Dies ist das Theme für den Peertube-Server des MDG Hamburgs. diff --git a/assets/style.css b/assets/style.css index e69de29..51c8145 100644 --- a/assets/style.css +++ b/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); +} diff --git a/client/video-watch-client-plugin.js b/client/video-watch-client-plugin.js deleted file mode 100644 index 50df4e7..0000000 --- a/client/video-watch-client-plugin.js +++ /dev/null @@ -1,7 +0,0 @@ -function register ({ registerHook, peertubeHelpers }) { - -} - -export { - register -} diff --git a/languages/fr.json b/languages/fr.json deleted file mode 100644 index 76a8eb7..0000000 --- a/languages/fr.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "Hello world": "Hello le monde" -} diff --git a/package.json b/package.json index 25e452e..b349097 100644 --- a/package.json +++ b/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" } } diff --git a/public/images/.gitkeep b/public/images/.gitkeep deleted file mode 100644 index e69de29..0000000