helix
/
invidious
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move themes into default.css

Browse Source 
Now that themes are controlled with a class instead of setting
media="none" on the stylesheet link and both themes already being
duplicated in default.css for the automatic themeing it makes sense
to have all theme related CSS in the same place.

This commit also fixes the missing dark theme on embeds.
pull/1479/head
saltycrys 4 years ago
parent de777907f2
commit ff46c18164
5 changed files with 61 additions and 71 deletions
Show Stats Download Patch File Download Diff File

43
assets/css/darktheme.css
Unescape Escape View File

@ -1,43 +0,0 @@
/*
* Dark theme
* Same as (prefers-color-scheme: dark) in default.css
*/
.dark-theme a:hover,
.dark-theme a:active {
color: rgb(0, 182, 240);
}
.dark-theme a {
color: #a0a0a0;
text-decoration: none;
}
body.dark-theme {
background-color: rgba(35, 35, 35, 1);
color: #f0f0f0;
}
.dark-theme .pure-form legend {
color: #f0f0f0;
}
.dark-theme .pure-menu-heading {
color: #f0f0f0;
}
.dark-theme input,
.dark-theme select,
.dark-theme textarea {
color: rgba(35, 35, 35, 1);
}
.dark-theme .pure-form input[type="file"] {
color: #f0f0f0;
}
.dark-theme .navbar > .searchbar input {
background-color: inherit;
color: inherit;
}

62
assets/css/default.css
Unescape Escape View File

@ -487,10 +487,26 @@ video.video-js {
} }
/* /*
* Automatic theme support * Light theme
* Same as lighttheme.css and darktheme.css
*/ */
.light-theme a:hover,
.light-theme a:active {
color: #167ac6 !important;
}
.light-theme a {
color: #61809b;
text-decoration: none;
}
/* All links that do not fit with the default color goes here */
.light-theme a:not([data-id]) > .icon,
.light-theme .pure-u-lg-1-5 > .h-box > a[href^="/watch?"],
.light-theme .playlist-restricted > ol > li > a {
color: #303030;
}
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
.no-theme a:hover, .no-theme a:hover,
.no-theme a:active { .no-theme a:active {
@ -510,6 +526,48 @@ video.video-js {
} }
} }
/*
* Dark theme
*/
.dark-theme a:hover,
.dark-theme a:active {
color: rgb(0, 182, 240);
}
.dark-theme a {
color: #a0a0a0;
text-decoration: none;
}
body.dark-theme {
background-color: rgba(35, 35, 35, 1);
color: #f0f0f0;
}
.dark-theme .pure-form legend {
color: #f0f0f0;
}
.dark-theme .pure-menu-heading {
color: #f0f0f0;
}
.dark-theme input,
.dark-theme select,
.dark-theme textarea {
color: rgba(35, 35, 35, 1);
}
.dark-theme .pure-form input[type="file"] {
color: #f0f0f0;
}
.dark-theme .navbar > .searchbar input {
background-color: inherit;
color: inherit;
}
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.no-theme a:hover, .no-theme a:hover,
.no-theme a:active { .no-theme a:active {

22
assets/css/lighttheme.css
Unescape Escape View File

@ -1,22 +0,0 @@
/*
* Light theme
* Same as (prefers-color-scheme: light) in default.css
*/
.light-theme a:hover,
.light-theme a:active {
color: #167ac6 !important;
}
.light-theme a {
color: #61809b;
text-decoration: none;
}
/* All links that do not fit with the default color goes here */
.light-theme a:not([data-id]) > .icon,
.light-theme .pure-u-lg-1-5 > .h-box > a[href^="/watch?"],
.light-theme .playlist-restricted > ol > li > a {
color: #303030;
}

3
src/invidious/views/embed.ecr
Unescape Escape View File

@ -9,12 +9,11 @@
<link rel="stylesheet" href="/css/videojs-overlay.css?v=<%= ASSET_COMMIT %>"> <link rel="stylesheet" href="/css/videojs-overlay.css?v=<%= ASSET_COMMIT %>">
<script src="/js/videojs-overlay.min.js?v=<%= ASSET_COMMIT %>"></script> <script src="/js/videojs-overlay.min.js?v=<%= ASSET_COMMIT %>"></script>
<link rel="stylesheet" href="/css/default.css?v=<%= ASSET_COMMIT %>"> <link rel="stylesheet" href="/css/default.css?v=<%= ASSET_COMMIT %>">
<link rel="stylesheet" href="/css/darktheme.css?v=<%= ASSET_COMMIT %>">
<link rel="stylesheet" href="/css/embed.css?v=<%= ASSET_COMMIT %>"> <link rel="stylesheet" href="/css/embed.css?v=<%= ASSET_COMMIT %>">
<title><%= HTML.escape(video.title) %> - Invidious</title> <title><%= HTML.escape(video.title) %> - Invidious</title>
</head> </head>
<body> <body class="dark-theme">
<script id="video_data" type="application/json"> <script id="video_data" type="application/json">
<%= <%=
{ {

2
src/invidious/views/template.ecr
Unescape Escape View File

@ -18,8 +18,6 @@
<link rel="stylesheet" href="/css/grids-responsive-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/ionicons.min.css?v=<%= ASSET_COMMIT %>">
<link rel="stylesheet" href="/css/default.css?v=<%= ASSET_COMMIT %>"> <link rel="stylesheet" href="/css/default.css?v=<%= ASSET_COMMIT %>">
<link rel="stylesheet" href="/css/darktheme.css?v=<%= ASSET_COMMIT %>">
<link rel="stylesheet" href="/css/lighttheme.css?v=<%= ASSET_COMMIT %>">
</head> </head>
<% locale = LOCALES[env.get("preferences").as(Preferences).locale]? %> <% locale = LOCALES[env.get("preferences").as(Preferences).locale]? %>

Write Preview
Loading…
Cancel
Save