├── screenshot.png
├── README.md
├── javascript.js
└── design.css


/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PhieF/Theme-Peertube-Vaurk/HEAD/screenshot.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | #Vaurk
2 | 
3 | ## a PeerTube theme
4 | 
5 | Designed by @KazukyAkayashi@mamot.fr
6 | 
7 | 
8 | 
9 | ![Screenshot](/screenshot.png)


--------------------------------------------------------------------------------
/javascript.js:
--------------------------------------------------------------------------------
 1 | document.getElementsByClassName("icon-logo")[0].style.display = "none";
 2 | 
 3 | //searchbox
 4 | var searchBox = document.getElementById('search-video');
 5 | searchBox.parentNode.removeChild(searchBox)
 6 | 
 7 | document.getElementsByClassName("header")[0].insertBefore(searchBox, document.getElementsByClassName("header-right")[0])
 8 | 
 9 | //remove search icon
10 | 
11 | document.getElementsByClassName("icon-search")[0].style.display = "none";


--------------------------------------------------------------------------------
/design.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |   designed by @KazukyAkayashi@mamot.fr
  3 |   based on exode.me blue theme, variable name might not be accurate ;)
  4 | 
  5 | */
  6 | 
  7 | :root {
  8 |     --blue-button: #dc4b3b;
  9 |     --blue-button-hover: #e27265;
 10 |     --dark-blue: #dc4b3b;
 11 |     --less-dark-blue: #dc4b3b;
 12 | }
 13 | 
 14 | menu[_ngcontent-c2] .panel-block[_ngcontent-c2] {
 15 |     margin-left: 0px;
 16 | }
 17 | 
 18 | menu[_ngcontent-c2] .panel-block[_ngcontent-c2] a[_ngcontent-c2] {
 19 |     height: 100%;
 20 |     line-height: 40px;
 21 |     padding-left: 26px;
 22 |     display: block;
 23 | }
 24 | 
 25 | menu[_ngcontent-c2] .block-title[_ngcontent-c2] {
 26 |     padding-left: 26px
 27 | }
 28 | 
 29 | menu[_ngcontent-c2] .panel-block[_ngcontent-c2] a[_ngcontent-c2]:hover {
 30 |     background: #f4efef;
 31 | }
 32 | 
 33 | .header[_ngcontent-c0] .top-left-block[_ngcontent-c0] .icon.icon-menu[_ngcontent-c0] {}
 34 | 
 35 | .top-left-block {
 36 |     flex: unset !important;
 37 | }
 38 | 
 39 | #search-video {
 40 |     margin: auto !important;
 41 | }
 42 | 
 43 | .upload-button[_ngcontent-c1],
 44 | .upload-button[_ngcontent-c1]:active,
 45 | .upload-button[_ngcontent-c1]:focus,
 46 | menu[_ngcontent-c2] .button-block[_ngcontent-c2] .login-button[_ngcontent-c2],
 47 | menu[_ngcontent-c2] .button-block[_ngcontent-c2] .login-button[_ngcontent-c2]:active,
 48 | menu[_ngcontent-c2] .button-block[_ngcontent-c2] .login-button[_ngcontent-c2]:focus,
 49 | .privacy-concerns .privacy-concerns-okay {
 50 |     color: #fff;
 51 |     background-color: var(--blue-button) !important;
 52 | }
 53 | 
 54 | .privacy-concerns a {
 55 |     color: var(--blue-button) !important;
 56 | }
 57 | 
 58 | input[type="submit"],
 59 | input[type="submit"]:active,
 60 | .button-file,
 61 | .add-button,
 62 | .submit-button {
 63 |     background-color: var(--blue-button) !important;
 64 | }
 65 | 
 66 | input[type="submit"]:hover,
 67 | .button-file:hover,
 68 | .add-button:hover,
 69 | .submit-button:hover,
 70 | .privacy-concerns .privacy-concerns-okay:hover {
 71 |     background-color: var(--blue-button-hover) !important;
 72 | }
 73 | 
 74 | .upload-button[_ngcontent-c1]:hover,
 75 | menu[_ngcontent-c2] .button-block[_ngcontent-c2] .login-button[_ngcontent-c2]:hover {
 76 |     color: #fff;
 77 |     background-color: var(--blue-button-hover) !important;
 78 | }
 79 | 
 80 | .title-menu-left {
 81 |     z-index: 1;
 82 | }
 83 | 
 84 | .header[_ngcontent-c0] {
 85 |     background-color: var(--dark-blue);
 86 |     color: white;
 87 | }
 88 | 
 89 | my-header {
 90 |     color: black !important;
 91 | }
 92 | 
 93 | menu[_ngcontent-c2] {
 94 |     background-color: black;
 95 | }
 96 | 
 97 | .main-col {
 98 |     transition: margin-left 0.5s ease-in-out .1s;
 99 | }
100 | 
101 | .icon-logo {
102 |     display: none;
103 | }
104 | 
105 | .header[_ngcontent-c0] .top-left-block[_ngcontent-c0] .icon.icon-menu[_ngcontent-c0] {
106 |     margin: 0px;
107 |     height: 100%;
108 |     width: 53px;
109 |     margin-right: 10px;
110 |     background-image: url("https://blog.phie.fi/peertube/peertubered.png");
111 |     background-color: #dc4b3b;
112 | }
113 | 
114 | .inner-form-title,
115 | .account-title {
116 |     color: var(--less-dark-blue) !important;
117 | }
118 | 
119 | input[type="checkbox"]:checked+label {
120 |     background: var(--less-dark-blue) !important;
121 | }
122 | 
123 | p-table p-paginator .ui-paginator-bottom a.ui-state-active,
124 | p-table p-paginator .ui-paginator-bottom a.ui-state-active:active,
125 | p-table p-paginator .ui-paginator-bottom a.ui-state-active:focus,
126 | p-table p-paginator .ui-paginator-bottom a.ui-state-active:hover {
127 |     background: var(--less-dark-blue) !important;
128 | }
129 | 
130 | .title-page.active,
131 | .title-page.title-page-single {
132 |     border-bottom: 2px solid var(--dark-blue) !important;
133 | }
134 | 
135 | menu {
136 |     background-color: white !important;
137 |     color: black !important;
138 | }
139 | 
140 | menu a {
141 |     color: black !important;
142 | }
143 | 
144 | .logged-in-email {
145 |     color: black !important;
146 | }
147 | 
148 | .header {
149 |     background: #363e48 !important;
150 |     color: white !important;
151 | }


--------------------------------------------------------------------------------