"version": "1.0.1"

README.md

@@ -1,3 +1,15 @@
-# PeerTube light theme
+# BitTube light-theme
 
-BitTube Light theme for PeerTube.
+BitTube Light Theme for PeerTube.
+
+ # How to install in your PeerTube instance
+
+    - Open a browser and go to your instance homepage. 
+    - Login as root (or your administrator user).
+    - Go to Administration panel from left menu.
+    - On navigation bar (top), click on 'Plugins/Themes'.
+    - A bit below, click on 'Search' button (next to 'Installed' button).
+    - Below this, click on 'Themes' button.
+    - In the searchbox below, you can type the name of the Theme to easy find it.
+    - Choose your Theme and click Install (cloud icon).
+    - Before see the changes, you will need to hard reload your browser.

assets/style.css

@@ -10,43 +10,91 @@ body {
   --menuBackgroundColor: #ffffff;
   --whiteColor: #ffffff;
   --mainHoverColor: #0481bf;
+  --dangerBackgroundColor: #d9534f;
   /*font-family: "Open Sans",sans-serif;*/
 }
 
-#search-video{
+#custom-css #search-video{
   background: var(--mainBackgroundColor) !important;
 }
 
-.dropdown-menu{
+/* Top blue header */
+.topHeaderBlue {
+  position: fixed;
+  width: 100%;
+  height: 30px;
+  background: #fff;
+  z-index: 2;
+  background-color: #00ABFF;
+  z-index: 100;
+  left: 0px;
+}
+.messageTopHeader {
+  position: absolute;
+  float: left;
+  left: 27px;
+  top: 6px;
+  color: #ffffff;
+}
+.messageTopHeader a {
+  color: #ffffff8f;
+}
+
+/* Dropdowns */
+#custom-css .dropdown-menu{
   background-color: var(--menuBackgroundColor);
   color: var(--menuForegroundColor);
 }
-
+#custom-css .dropdown-menu a{
-.dropdown-menu a{
   color: var(--menuForegroundColor) !important;
 }
-
+#custom-css .dropdown-item:focus:not(.new-playlist-block), 
-.dropdown-item:focus, .dropdown-item:hover{
+#custom-css .dropdown-item:hover:not(.new-playlist-block),
+#custom-css .videos-header a button{
   color: var(--whiteColor) !important; 
   background-color: var(--mainColor);
 }
+#custom-css .dropdown-item:focus:not(.new-playlist-block),
+#custom-css .dropdown-item:hover:not(.new-playlist-block),
+#custom-css .dropdown-item:active:not(.new-playlist-block),
+#custom-css span.dropdown-item.custom-action:hover,
+#custom-css a.dropdown-item.with-icon:hover{
+  color: var(--whiteColor) !important; 
+  background-color: var(--mainColor) !important;
+}
 #custom-css .header{
   background-color: var(--menuBackgroundColor);
 }
-
 #custom-css .upload-button, #custom-css .upload-button:active, #custom-css .upload-button:focus{
   color: var(--whiteColor) !important; 
   background-color: var(--mainColor) !important;
 }
 
-.root .form-group-checkbox input:checked + span{
+#custom-css .root .form-group-checkbox input:checked + span{
   background: var(--mainColor) !important;
 }
 
-.peertube-select-container, input, textarea{
+#custom-css .dropdown-menu .dropdown-item:hover span[role="checkbox"],
+#custom-css .dropdown-menu .dropdown-item span[role="checkbox"]:checked{
+  border: 1px solid var(--mainBackgroundColor) !important
+}
+#custom-css .peertube-select-container, input[type="text"], textarea{
   border: 1px solid var(--mainBackgroundColor) !important;
 }
-/* Icons hovers */
+#custom-css .dropdown-menu input[type="submit"]{
+  border: 1px solid transparent !important; /* Removing black border in buttons */
+}
+#custom-css .header .options-row{
+  padding-left: 0;
+}
+#custom-css .header .options-row > div{
+  justify-content: space-between;
+}
+#custom-css .sub-header-container my-menu .menu-wrapper{
+  height: calc(100vh - 55px);
+  top: 52px;
+} 
+/* Icons && Icon hovers */
 #custom-css  a my-global-icon svg circle[stroke="#000000"],
 #custom-css  a my-global-icon svg g[stroke="#000000"],
 #custom-css  a my-global-icon svg path[stroke="#000000"],
@@ -60,7 +108,8 @@ body {
 #custom-css .dropdown-item:hover my-global-icon svg path[stroke="#000000"],
 #custom-css .dropdown-item:hover my-global-icon svg polygon[stroke="#000000"],
 #custom-css .dropdown-item:hover my-global-icon svg rect[stroke="#000000"],
-#custom-css .dropdown-item:hover my-global-icon svg ellipse[stroke="#000000"]{
+#custom-css .dropdown-item:hover my-global-icon svg ellipse[stroke="#000000"],
+#custom-css .videos-header a button my-global-icon svg g[stroke="#000000"]{
   stroke: var(--whiteColor) !important;
 }
 
@@ -82,4 +131,44 @@ body {
 
 #custom-css .upload-button my-global-icon svg g[stroke="#000000"] {
   stroke: var(--whiteColor) !important;
+}
+ /* Delete buttons */
+ #custom-css .delete-me button:hover,
+ #custom-css .delete-me button,
+ #custom-css .action-button-delete,
+ #custom-css .action-button-delete:active,
+ #custom-css .action-button-delete-selection{
+   background-color: var(--dangerBackgroundColor);
+   color: var(--whiteColor);
+ }
+ #custom-css .top-buttons .delete-history{
+   background-color: var(--dangerBackgroundColor);
+   color: var(--whiteColor);
+ }
+
+ /* Icons from buttons */
+#custom-css .upload-button my-global-icon svg g[stroke="#000000"],
+#custom-css a.add-button my-global-icon svg circle[stroke="#000000"],
+#custom-css a.create-button my-global-icon svg circle[stroke="#000000"],
+#custom-css a.create-caption my-global-icon svg circle[stroke="#000000"]{
+  stroke: var(--whiteColor) !important;
+}
+#custom-css a.add-button my-global-icon svg rect[fill="#000000"],
+#custom-css a.create-button my-global-icon svg rect[fill="#000000"],
+#custom-css a.create-caption my-global-icon svg rect[fill="#000000"]{
+  fill: var(--whiteColor) !important;
+}
+  /* Trash bin icon */
+  #custom-css my-global-icon[iconname="delete"] svg path[stroke="#000000"]{
+    stroke: var(--whiteColor) !important;
+  }
+  #custom-css my-global-icon[iconname="delete"] svg path[fill="#000000"],
+  #custom-css my-global-icon[iconname="delete"] svg rect[fill="#000000"]{
+    fill: var(--whiteColor) !important;
+  }
+
+  /* Pagination */
+#custom-css .ui-paginator .ui-paginator-element:hover:not(.ui-state-disabled){
+  color: var(--whiteColor);
+  background-color: var(--mainHoverColor);
 }

client/common-client-plugin.js

@@ -0,0 +1,30 @@
+function register ({ registerHook, peertubeHelpers }) {
+  
+  const baseStaticUrl = peertubeHelpers.getBaseStaticRoute()
+  const filterUrl = baseStaticUrl + '/images/filter_black.png';
+  const keyboardUrl = baseStaticUrl + '/images/keyboard_black.png';
+  const languagesUrl = baseStaticUrl + '/images/languages_black.png';
+  const style = document.createElement('style')
+  document.head.appendChild(style)
+  const sheet = style.sheet
+      // Change filter icon
+      let rule = "#custom-css .icon.icon-filter { "
+      rule+= " background-image: url('"+ filterUrl +"');"
+      rule+= " } "
+      sheet.insertRule(rule, 0)
+      // Change keyboard icon
+      rule = " #custom-css .icon.icon-language { "
+      rule+= " background-image: url('"+ languagesUrl +"');"
+      rule+= " } "
+      sheet.insertRule(rule, 0)
+      // Change languages icon
+      rule = " #custom-css .icon.icon-shortcuts{ "
+      rule+= " background-image: url('"+ keyboardUrl +"'); -webkit-filter: none; filter: none"
+      rule+= " } "
+      sheet.insertRule(rule, 0)
+  // END
+}
+
+export {
+  register
+}

client/video-watch-client-plugin.js

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "peertube-theme-bittube-light-mode",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "BitTube light theme",
   "engine": {
     "peertube": ">=1.3.0"
@@ -12,10 +12,17 @@
   "homepage": "https://github.com/ipbc-dev/peertube-theme-bittube-light-mode",
   "author": "BitTube",
   "bugs": "https://github.com/ipbc-dev/peertube-theme-bittube-light-mode/issues",
-  "staticDirs": {},
+  "staticDirs": {
+    "images": "public/images"
+  },
   "css": [
     "assets/style.css"
   ],
-  "clientScripts": [],
+  "clientScripts": [
+    {
+      "script": "client/common-client-plugin.js",
+      "scopes": [ "common" ]
+    }
+  ],
   "translations": {}
 }