mirror of
https://github.com/iv-org/invidious.git
synced 2025-08-21 02:39:00 -05:00
60c8c55ff2
In order to support both a theme toggle and to automatically use the user's selected theme based on browser/system defaults the stylesheets has to be duplicated twice since the latter requires the css to be wrapped around a media query. This duplication is a painful experience to deal with when adding or changing existing styles. Even more so when it involves jumping around the behemoth default.css from and back to whatever sections you were just working on. I don't believe the we the Invidious team will be able to agree to a proper solution anytime soon (eg css post-processor, modern css light-dark feature, etc) so this commit is here as a stopgap measure. The workaround is to move the theming styles to two separate files which are read at runtime and used to generate a combined stylesheet with the necessary duplication for the media query. This combined stylesheet is then delivered on a new route added to Invidious, bypassing the static file handler.
179 lines
9.6 KiB
Plaintext
179 lines
9.6 KiB
Plaintext
<%
|
|
locale = env.get("preferences").as(Preferences).locale
|
|
dark_mode = env.get("preferences").as(Preferences).dark_mode
|
|
%>
|
|
<!DOCTYPE html>
|
|
<html lang="<%= locale %>">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<%= yield_content "header" %>
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=<%= ASSET_COMMIT %>">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=<%= ASSET_COMMIT %>">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=<%= ASSET_COMMIT %>">
|
|
<link rel="manifest" href="/site.webmanifest?v=<%= ASSET_COMMIT %>">
|
|
<link rel="mask-icon" href="/safari-pinned-tab.svg?v=<%= ASSET_COMMIT %>" color="#575757">
|
|
<meta name="msapplication-TileColor" content="#575757">
|
|
<meta name="theme-color" content="#575757">
|
|
<link title="Invidious" type="application/opensearchdescription+xml" rel="search" href="/opensearch.xml">
|
|
<link rel="stylesheet" href="/css/pure-min.css?v=<%= ASSET_COMMIT %>">
|
|
<link rel="stylesheet" href="/css/grids-responsive-min.css?v=<%= ASSET_COMMIT %>">
|
|
<link rel="stylesheet" href="/css/ionicons.min.css?v=<%= ASSET_COMMIT %>">
|
|
<link rel="stylesheet" href="/css/default.css?v=<%= ASSET_COMMIT %>">
|
|
<link rel="stylesheet" href="/css/theme.css?v=<%= ASSET_COMMIT %>">
|
|
<link rel="stylesheet" href="/css/carousel.css?v=<%= ASSET_COMMIT %>">
|
|
<script src="/js/_helpers.js?v=<%= ASSET_COMMIT %>"></script>
|
|
</head>
|
|
|
|
<body class="<%= dark_mode.blank? ? "no" : dark_mode %>-theme">
|
|
<span style="display:none" id="dark_mode_pref"><%= dark_mode %></span>
|
|
<div class="pure-g">
|
|
<div class="pure-u-1 pure-u-xl-20-24" id="contents">
|
|
<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>
|
|
</div>
|
|
<div class="pure-u-1 pure-u-md-12-24 searchbar">
|
|
<% autofocus = false %><%= rendered "components/search_box" %>
|
|
</div>
|
|
<% end %>
|
|
|
|
<div class="pure-u-1 pure-u-md-8-24 user-field">
|
|
<% if env.get? "user" %>
|
|
<div class="pure-u-1-4">
|
|
<a id="toggle_theme" href="/toggle_theme?referer=<%= env.get?("current_page") %>" class="pure-menu-heading" title="<%= translate(locale, "toggle_theme") %>">
|
|
<% if dark_mode == "dark" %>
|
|
<i class="icon ion-ios-sunny"></i>
|
|
<% else %>
|
|
<i class="icon ion-ios-moon"></i>
|
|
<% end %>
|
|
</a>
|
|
</div>
|
|
<div class="pure-u-1-4">
|
|
<a id="notification_ticker" title="<%= translate(locale, "Subscriptions") %>" href="/feed/subscriptions" class="pure-menu-heading">
|
|
<% notification_count = env.get("user").as(Invidious::User).notifications.size %>
|
|
<% if CONFIG.enable_user_notifications && notification_count > 0 %>
|
|
<span id="notification_count"><%= notification_count %></span> <i class="icon ion-ios-notifications"></i>
|
|
<% else %>
|
|
<i class="icon ion-ios-notifications-outline"></i>
|
|
<% end %>
|
|
</a>
|
|
</div>
|
|
<div class="pure-u-1-4">
|
|
<a title="<%= translate(locale, "Preferences") %>" href="/preferences?referer=<%= env.get?("current_page") %>" class="pure-menu-heading">
|
|
<i class="icon ion-ios-cog"></i>
|
|
</a>
|
|
</div>
|
|
<% if env.get("preferences").as(Preferences).show_nick %>
|
|
<div class="pure-u-1-4" style="overflow: hidden; white-space: nowrap;">
|
|
<span id="user_name"><%= HTML.escape(env.get("user").as(Invidious::User).email) %></span>
|
|
</div>
|
|
<% end %>
|
|
<div class="pure-u-1-4">
|
|
<form action="/signout?referer=<%= env.get?("current_page") %>" method="post">
|
|
<input type="hidden" name="csrf_token" value="<%= HTML.escape(env.get?("csrf_token").try &.as(String) || "") %>">
|
|
<a class="pure-menu-heading" href="#">
|
|
<input style="all:unset" type="submit" value="<%= translate(locale, "Log out") %>">
|
|
</a>
|
|
</form>
|
|
</div>
|
|
<% else %>
|
|
<div class="pure-u-1-3">
|
|
<a id="toggle_theme" href="/toggle_theme?referer=<%= env.get?("current_page") %>" class="pure-menu-heading" title="<%= translate(locale, "toggle_theme") %>">
|
|
<% if dark_mode == "dark" %>
|
|
<i class="icon ion-ios-sunny"></i>
|
|
<% else %>
|
|
<i class="icon ion-ios-moon"></i>
|
|
<% end %>
|
|
</a>
|
|
</div>
|
|
<div class="pure-u-1-3">
|
|
<a title="<%= translate(locale, "Preferences") %>" href="/preferences?referer=<%= env.get?("current_page") %>" class="pure-menu-heading">
|
|
<i class="icon ion-ios-cog"></i>
|
|
</a>
|
|
</div>
|
|
<% if CONFIG.login_enabled %>
|
|
<div class="pure-u-1-3">
|
|
<a href="/login?referer=<%= env.get?("current_page") %>" class="pure-menu-heading">
|
|
<%= translate(locale, "Log in") %>
|
|
</a>
|
|
</div>
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<% if CONFIG.banner %>
|
|
<div class="h-box">
|
|
<h3><%= CONFIG.banner %></h3>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%= content %>
|
|
|
|
<footer>
|
|
<div class="pure-g">
|
|
<div class="pure-u-1 pure-u-md-1-3">
|
|
<span>
|
|
<i class="icon ion-logo-github"></i>
|
|
<% if CONFIG.modified_source_code_url %>
|
|
<a href="https://github.com/iv-org/invidious"><%= translate(locale, "footer_original_source_code") %></a> /
|
|
<a href="<%= CONFIG.modified_source_code_url %>"><%= translate(locale, "footer_modfied_source_code") %></a>
|
|
<% else %>
|
|
<a href="https://github.com/iv-org/invidious"><%= translate(locale, "footer_source_code") %></a>
|
|
<% end %>
|
|
</span>
|
|
<span>
|
|
<i class="icon ion-ios-paper"></i>
|
|
<a href="https://github.com/iv-org/documentation"><%= translate(locale, "footer_documentation") %></a>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="pure-u-1 pure-u-md-1-3">
|
|
<span>
|
|
<a href="https://github.com/iv-org/invidious/blob/master/LICENSE"><%= translate(locale, "Released under the AGPLv3 on Github.") %></a>
|
|
</span>
|
|
<span>
|
|
<i class="icon ion-logo-javascript"></i>
|
|
<a rel="jslicense" href="/licenses"><%= translate(locale, "View JavaScript license information.") %></a>
|
|
</span>
|
|
<span>
|
|
<i class="icon ion-ios-paper"></i>
|
|
<a href="/privacy"><%= translate(locale, "View privacy policy.") %></a>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="pure-u-1 pure-u-md-1-3">
|
|
<span>
|
|
<i class="icon ion-ios-wallet"></i>
|
|
<a href="https://invidious.io/donate/"><%= translate(locale, "footer_donate_page") %></a>
|
|
</span>
|
|
<span><%= translate(locale, "Current version: ") %> <%= CURRENT_VERSION %>-<%= CURRENT_COMMIT %> @ <%= CURRENT_BRANCH %></span>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
</div>
|
|
</div>
|
|
<script src="/js/handlers.js?v=<%= ASSET_COMMIT %>"></script>
|
|
<script src="/js/themes.js?v=<%= ASSET_COMMIT %>"></script>
|
|
<% if env.get? "user" %>
|
|
<script src="/js/sse.js?v=<%= ASSET_COMMIT %>"></script>
|
|
<script id="notification_data" type="application/json">
|
|
<%=
|
|
{
|
|
"upload_text" => HTML.escape(translate(locale, "`x` uploaded a video")),
|
|
"live_upload_text" => HTML.escape(translate(locale, "`x` is live"))
|
|
}.to_pretty_json
|
|
%>
|
|
</script>
|
|
<% if CONFIG.enable_user_notifications %>
|
|
<script src="/js/notifications.js?v=<%= ASSET_COMMIT %>"></script>
|
|
<% end %>
|
|
<% end %>
|
|
</body>
|
|
|
|
</html>
|