ArikTube headline brand: logo + red accent theme

Header/homepage brand text becomes 'ArikTube' with an inline
play-button logo. Everything else keeps the Invidious name --
this fork extends Invidious, it does not rebrand it.
Blue accents (rgb 0,182,240 / #075A9E / #008bec) become a red
scheme (#cc0000 fills, #ff5252 dark-theme text, red seekbar).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
NeskireDK 2026-08-12 17:46:37 +02:00
parent 48c6110a83
commit cce26864ad
5 changed files with 20 additions and 20 deletions

View File

@ -91,7 +91,7 @@ button.simulated_a {
} }
body a.channel-owner { body a.channel-owner {
background-color: #008bec; background-color: #cc0000;
color: #fff; color: #fff;
border-radius: 9px; border-radius: 9px;
padding: 1px 6px; padding: 1px 6px;
@ -340,7 +340,7 @@ input[type="search"]::-webkit-search-cancel-button {
} }
.searchbar #searchbutton:hover { .searchbar #searchbutton:hover {
color: rgb(0, 182, 240); color: rgb(204, 0, 0);
} }
.user-field { .user-field {
@ -541,7 +541,7 @@ span > select {
.light-theme summary:focus, .light-theme summary:focus,
.light-theme .simulated_a:hover, .light-theme .simulated_a:hover,
.light-theme .simulated_a:active { .light-theme .simulated_a:active {
color: #075A9E !important; color: #990000 !important;
} }
.light-theme .pure-button-primary:hover, .light-theme .pure-button-primary:hover,
@ -549,8 +549,8 @@ span > select {
.light-theme .pure-button-secondary:hover, .light-theme .pure-button-secondary:hover,
.light-theme .pure-button-secondary:focus { .light-theme .pure-button-secondary:focus {
color: #fff !important; color: #fff !important;
border-color: rgba(0, 182, 240, 0.75) !important; border-color: rgba(204, 0, 0, 0.75) !important;
background-color: rgba(0, 182, 240, 0.75) !important; background-color: rgba(204, 0, 0, 0.75) !important;
} }
.light-theme .pure-button-secondary:not(.low-profile) { .light-theme .pure-button-secondary:not(.low-profile) {
@ -586,7 +586,7 @@ span > select {
.no-theme summary:focus, .no-theme summary:focus,
.no-theme .simulated_a:hover, .no-theme .simulated_a:hover,
.no-theme .simulated_a:active { .no-theme .simulated_a:active {
color: #075A9E !important; color: #990000 !important;
} }
.no-theme .pure-button-primary:hover, .no-theme .pure-button-primary:hover,
@ -594,8 +594,8 @@ span > select {
.no-theme .pure-button-secondary:hover, .no-theme .pure-button-secondary:hover,
.no-theme .pure-button-secondary:focus { .no-theme .pure-button-secondary:focus {
color: #fff !important; color: #fff !important;
border-color: rgba(0, 182, 240, 0.75) !important; border-color: rgba(204, 0, 0, 0.75) !important;
background-color: rgba(0, 182, 240, 0.75) !important; background-color: rgba(204, 0, 0, 0.75) !important;
} }
.no-theme .pure-button-secondary:not(.low-profile) { .no-theme .pure-button-secondary:not(.low-profile) {
@ -644,7 +644,7 @@ span > select {
.dark-theme summary:focus, .dark-theme summary:focus,
.dark-theme .simulated_a:hover, .dark-theme .simulated_a:hover,
.dark-theme .simulated_a:active { .dark-theme .simulated_a:active {
color: rgb(0, 182, 240); color: rgb(255, 82, 82);
} }
.dark-theme .pure-button-primary:hover, .dark-theme .pure-button-primary:hover,
@ -652,8 +652,8 @@ span > select {
.dark-theme .pure-button-secondary:hover, .dark-theme .pure-button-secondary:hover,
.dark-theme .pure-button-secondary:focus { .dark-theme .pure-button-secondary:focus {
color: #fff !important; color: #fff !important;
border-color: rgb(0, 182, 240) !important; border-color: rgb(204, 0, 0) !important;
background-color: rgba(0, 182, 240, 1) !important; background-color: rgba(204, 0, 0, 1) !important;
} }
.dark-theme .pure-button-secondary { .dark-theme .pure-button-secondary {
@ -704,7 +704,7 @@ body.dark-theme {
.no-theme a:focus, .no-theme a:focus,
.no-theme .simulated_a:hover, .no-theme .simulated_a:hover,
.no-theme .simulated_a:active { .no-theme .simulated_a:active {
color: rgb(0, 182, 240); color: rgb(255, 82, 82);
} }
.no-theme .pure-button-primary:hover, .no-theme .pure-button-primary:hover,
@ -712,8 +712,8 @@ body.dark-theme {
.no-theme .pure-button-secondary:hover, .no-theme .pure-button-secondary:hover,
.no-theme .pure-button-secondary:focus { .no-theme .pure-button-secondary:focus {
color: #fff !important; color: #fff !important;
border-color: rgb(0, 182, 240) !important; border-color: rgb(204, 0, 0) !important;
background-color: rgba(0, 182, 240, 1) !important; background-color: rgba(204, 0, 0, 1) !important;
} }
.no-theme .pure-button-secondary { .no-theme .pure-button-secondary {

View File

@ -23,5 +23,5 @@
.watch-on-invidious > a:hover, .watch-on-invidious > a:hover,
.watch-on-invidious > a:focus { .watch-on-invidious > a:focus {
color: rgba(0, 182, 240, 1);; color: rgba(255, 82, 82, 1);;
} }

View File

@ -156,7 +156,7 @@ ul.vjs-menu-content::-webkit-scrollbar {
.vjs-menu li.vjs-selected, .vjs-menu li.vjs-selected,
.vjs-menu li.vjs-selected:focus, .vjs-menu li.vjs-selected:focus,
.vjs-menu li.vjs-selected:hover { .vjs-menu li.vjs-selected:hover {
background-color: rgba(0, 182, 240, 0.75); background-color: rgba(204, 0, 0, 0.75);
} }
/* Progress Bar */ /* Progress Bar */
@ -171,11 +171,11 @@ ul.vjs-menu-content::-webkit-scrollbar {
.video-js .vjs-slider:hover, .video-js .vjs-slider:hover,
.video-js button:hover { .video-js button:hover {
color: rgba(0, 182, 240, 1); color: rgba(255, 82, 82, 1);
} }
.video-js.player-style-invidious .vjs-play-progress { .video-js.player-style-invidious .vjs-play-progress {
background-color: rgba(0, 182, 240, 1); background-color: rgba(255, 0, 0, 1);
} }
/* Overlay */ /* Overlay */

View File

@ -10,7 +10,7 @@
<div class="pure-g h-box" id="search-widget"> <div class="pure-g h-box" id="search-widget">
<div class="pure-u-1" id="logo"> <div class="pure-u-1" id="logo">
<h1 href="/" class="pure-menu-heading">Invidious</h1> <h1 href="/" class="pure-menu-heading"><svg viewBox="0 0 28 20" width="52" height="38" aria-hidden="true" style="vertical-align:-16%"><rect width="28" height="20" rx="5" fill="#f00"/><path d="M11.2 5.2 19 10l-7.8 4.8z" fill="#fff"/></svg> ArikTube</h1>
</div> </div>
<div class="pure-u-1-4"></div> <div class="pure-u-1-4"></div>
<div class="pure-u-1 pure-u-md-12-24 searchbar"> <div class="pure-u-1 pure-u-md-12-24 searchbar">

View File

@ -33,7 +33,7 @@
<div class="pure-g navbar h-box"> <div class="pure-g navbar h-box">
<% if navbar_search %> <% if navbar_search %>
<div class="pure-u-1 pure-u-md-4-24"> <div class="pure-u-1 pure-u-md-4-24">
<a href="/" class="index-link pure-menu-heading">Invidious</a> <a href="/" class="index-link pure-menu-heading"><svg viewBox="0 0 28 20" width="26" height="19" aria-hidden="true" style="vertical-align:-12%"><rect width="28" height="20" rx="5" fill="#f00"/><path d="M11.2 5.2 19 10l-7.8 4.8z" fill="#fff"/></svg> ArikTube</a>
</div> </div>
<div class="pure-u-1 pure-u-md-12-24 searchbar"> <div class="pure-u-1 pure-u-md-12-24 searchbar">
<% autofocus = false %><%= rendered "components/search_box" %> <% autofocus = false %><%= rendered "components/search_box" %>