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

View File

@ -23,5 +23,5 @@
.watch-on-invidious > a:hover,
.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:focus,
.vjs-menu li.vjs-selected:hover {
background-color: rgba(0, 182, 240, 0.75);
background-color: rgba(204, 0, 0, 0.75);
}
/* Progress Bar */
@ -171,11 +171,11 @@ ul.vjs-menu-content::-webkit-scrollbar {
.video-js .vjs-slider: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 {
background-color: rgba(0, 182, 240, 1);
background-color: rgba(255, 0, 0, 1);
}
/* Overlay */

View File

@ -10,7 +10,7 @@
<div class="pure-g h-box" id="search-widget">
<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 class="pure-u-1-4"></div>
<div class="pure-u-1 pure-u-md-12-24 searchbar">

View File

@ -33,7 +33,7 @@
<div class="pure-g navbar h-box">
<% if navbar_search %>
<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 class="pure-u-1 pure-u-md-12-24 searchbar">
<% autofocus = false %><%= rendered "components/search_box" %>