From ddeaf41404a399364e366078635a7dd010058bb4 Mon Sep 17 00:00:00 2001 From: rocket_2019 <74113535+rocket2021@users.noreply.github.com> Date: Mon, 31 Oct 2022 20:41:26 +0100 Subject: [PATCH 1/5] Create index1.css --- assets/css/index1.css | 389 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 389 insertions(+) create mode 100644 assets/css/index1.css diff --git a/assets/css/index1.css b/assets/css/index1.css new file mode 100644 index 00000000..751b9eb9 --- /dev/null +++ b/assets/css/index1.css @@ -0,0 +1,389 @@ +.login-buttom { + margin-right: 15px; + border: 1px solid; + padding: 10px; +} +/*/Modul/*/ +.d-modal { + z-index: 3; + display: none; + padding-top: 100px; + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgb(0, 0, 0); + background-color: rgba(0, 0, 0, 0.4); +} + +.d-modal-content { + margin: auto; + background-color: #fff; + position: relative; + padding: 0; + outline: 0; + width: 600px; +} +.d-container { + padding: 0.01em 16px; +} +.d-panel { + margin-top: 16px; + margin-bottom: 16px; +} +@media (max-width: 600px) { + .d-modal-content { + margin: 0 10px; + width: auto !important; + } + .d-modal { + padding-top: 30px; + } +} +@media (max-width: 768px) { + .d-modal-content { + width: 500px; + } + .d-modal { + padding-top: 50px; + } +} +@media (min-width: 993px) { + .d-modal-content { + width: 900px; + } + .d-hide-large { + display: none !important; + } +} +.d-teal, +.hover-teal:hover { + color: #fff !important; + background-color: #009688 !important; +} +.d-button1 { + background-color: #000; + padding: 12px 12px; + text-align: center; + text-decoration: none; + font-size: 17px; + border: none; + color: #fff; + display: inline-block; + vertical-align: middle; + overflow: hidden; + text-decoration: none; + text-align: center; + cursor: pointer; + white-space: nowrap; +} +/*end*/ +x1 { + font-size: 30px; +} +.datenschutz { + margin-left: 250px; + bottom: 0; + display: block; + text-decoration: none; + font-size: 24px; + display: block; + background: #384859; + width: (100% - 250px); +} +.datenschutz a { + text-decoration: none; + font-size: 24px; + color: #ffffff; + background: #384859; +} + +.sidebar .item .sub-menu { + background: rgba(255, 255, 255, 0.1); + display: none; +} +.rotate { + transform: rotate(90deg); +} +/**/ +body { + padding: 0; + overflow-x: hidden; +} +@media screen and (min-width: 780px) { +header { + z-index: 2000; + position: fixed; + padding: 20px; + width: calc(100% - 0%); + top: 0; + height: 30px; +} +} +header { + background: #22242a; + padding: 20px; +} +.left_area h3 { + color: #fff; + margin: 0; + text-transform: uppercase; + font-size: 22px; + font-weight: 900; +} + +.left_area span { + color: #19b3d3; +} +.right_area { + float: right; + display: contents; +} +.logout_btn { + padding: 5px; + background: #19b3d3; + text-decoration: none; + float: right; + margin-top: -30px; + margin-right: 40px; + border-radius: 2px; + font-size: 15px; + font-weight: 600; + color: #fff; + transition: 0.5s; + /*/transition-property: background;/*/ +} + +.logout_btn:hover { + background: #0b87a6; +} + +.sidebar { + z-index: 2; + top: 0; + background: #333; + margin-top: 70px; + /*/padding-top: 30px;/*/ + position: fixed; + left: -250px; + width: 250px; + height: calc(100% - 8%); + transition: 0.5s; + transition-property: left; + overflow-y: auto; +} + +.profile_info { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.sidebar .profile_info .profile_image { + width: 100px; + height: 100px; + border-radius: 100px; + margin-bottom: 10px; +} + +.sidebar .profile_info h4 { + color: #ccc; + margin-top: 0; + margin-bottom: 20px; +} + +.sidebar .profile_info a { + padding-left: 0px; + display: block; +} + +.sidebar a { + color: #fff; + display: block; + width: 100%; + line-height: 60px; + text-decoration: none; + padding-left: 40px; + box-sizing: border-box; + transition: 0.5s; + transition-property: background; + margin-left: 165px; +} + +.sidebar a:hover { + background: #19b3d3; +} + +.sidebar i { + padding-right: 10px; +} + +label #sidebar_btn { + z-index: 1; + color: #fff; + position: fixed; + cursor: pointer; + left: 300px; + font-size: 20px; + margin: 5px 0; + transition: 0.5s; + transition-property: color; +} + +label #sidebar_btn:hover { + color: #19b3d3; +} + +#check:checked ~ .sidebar { + left: 0; + background-color: #2f323a; +} + +#check:checked ~ .topnav { + min-width: 85%; +} + +#check:checked ~ .sidebar a span { + display: inline-block; +} + +.sidebar a span { + display: none; +} + +#check:checked ~ .sidebar a { + /*/font-size: 20px;/*/ + margin-left: 0; + /*/width: 100%;/*/ +} + +.sidebar a { + font-size: 20px; + margin-left: 165px; + width: 100%; +} + +.content { + width: (100% - 250px); + margin-top: 60px; + padding: 20px; + margin-left: 60px; + min-height: 100vh; + transition: 0.5s; +} + +#check:checked ~ .content { + /*margin-left: 60px;*/ +} + +#check:checked ~ .sidebar .profile_info { + display: flex; +} + +.sidebar .profile_info { + display: none; +} + +#check { + display: none; +} + +.mobile_nav { + display: none; +} + +.content .card p { + background: #fff; + padding: 15px; + margin-bottom: 10px; + font-size: 14px; + opacity: 0.8; +} + +/* Responsive CSS */ + +@media screen and (max-width: 780px) { + .sidebar { + display: none; + } + + #sidebar_btn { + display: none; + } + + .content { + margin-left: 0; + margin-top: 0; + padding: 10px 20px; + transition: 0s; + } + + #check:checked ~ .content { + margin-left: 0; + } + + .mobile_nav { + display: block; + width: calc(100% - 0%); + } + + .nav_bar { + background: #222; + width: (100% - 0px); + margin-top: 70px; + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 20px; + } + + .nav_bar .mobile_profile_image { + width: 50px; + height: 50px; + border-radius: 50%; + } + + .nav_bar .nav_btn { + color: #fff; + font-size: 22px; + cursor: pointer; + transition: 0.5s; + transition-property: color; + } + + .nav_bar .nav_btn:hover { + color: #19b3d3; + } + + .mobile_nav_items { + background: #2f323a; + display: none; + } + + .mobile_nav_items a { + color: #fff; + display: block; + text-align: center; + letter-spacing: 1px; + line-height: 60px; + text-decoration: none; + box-sizing: border-box; + transition: 0.5s; + transition-property: background; + } + + .mobile_nav_items a:hover { + background: #19b3d3; + } + + .mobile_nav_items i { + padding-right: 10px; + } + + .active { + display: block; + } +} From a9a74e9d2aec08009989be4ca81aa47c793d8c08 Mon Sep 17 00:00:00 2001 From: rocket_2019 <74113535+rocket2021@users.noreply.github.com> Date: Mon, 31 Oct 2022 20:42:25 +0100 Subject: [PATCH 2/5] Create video-inv.css --- assets/css/video-inv.css | 37 +++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 assets/css/video-inv.css diff --git a/assets/css/video-inv.css b/assets/css/video-inv.css new file mode 100644 index 00000000..3f997fde --- /dev/null +++ b/assets/css/video-inv.css @@ -0,0 +1,37 @@ +@media (min-width: 1200px) { +.video-title{ + width: 78% + } +.video-infos{ + width:60%; +} +.video-playlist{ + right: 0; + position: absolute; + width: 20%; + top:9vh; + background-color: ; +} +#player-container{ + width: 80%; + left: 0; + position: sticky; + margin: 0; +} +.content { + margin-top: 50px; + margin-left: 45px; + width: 95%; +} + #contents { + width: 100%; + } +footer{ + width: 80%; +} +} + +.dark-theme .video-title{background-color: #444;} +.dark-theme .video-settings{background-color: #28323D;} +.dark-theme .video-infos{ background-color: #333;} +.dark-theme .video-playlist{background-color: #28323D;} From c0834c6d852f3ec7ea9ccaa5f5c6eefefa7a2ca8 Mon Sep 17 00:00:00 2001 From: rocket_2019 <74113535+rocket2021@users.noreply.github.com> Date: Mon, 31 Oct 2022 21:04:45 +0100 Subject: [PATCH 3/5] Update template.ecr --- src/invidious/views/template.ecr | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/invidious/views/template.ecr b/src/invidious/views/template.ecr index 98f72eba..92765ddb 100644 --- a/src/invidious/views/template.ecr +++ b/src/invidious/views/template.ecr @@ -18,6 +18,10 @@ + + + + <% From 1d53b72e6514c4b9cfbfd2aa59a21997270c6735 Mon Sep 17 00:00:00 2001 From: rocket_2019 <74113535+rocket2021@users.noreply.github.com> Date: Sat, 12 Nov 2022 14:12:08 +0100 Subject: [PATCH 4/5] Update template.ecr --- src/invidious/views/template.ecr | 203 ++++++++++++++++++------------- 1 file changed, 120 insertions(+), 83 deletions(-) diff --git a/src/invidious/views/template.ecr b/src/invidious/views/template.ecr index 92765ddb..435eefe4 100644 --- a/src/invidious/views/template.ecr +++ b/src/invidious/views/template.ecr @@ -31,92 +31,105 @@ -theme"> -
-
-
-
- <% if navbar_search %> -
- Invidious -
-
- <% autofocus = false %><%= rendered "components/search_box" %> -
- <% end %> - -
- <% if env.get? "user" %> -
- " class="pure-menu-heading"> - <% if env.get("preferences").as(Preferences).dark_mode == "dark" %> - - <% else %> - - <% end %> - -
-
- " href="/feed/subscriptions" class="pure-menu-heading"> - <% notification_count = env.get("user").as(Invidious::User).notifications.size %> - <% if notification_count > 0 %> - <%= notification_count %> - <% else %> - - <% end %> - -
-
- " href="/preferences?referer=<%= env.get?("current_page") %>" class="pure-menu-heading"> - - -
- <% if env.get("preferences").as(Preferences).show_nick %> -
- <%= HTML.escape(env.get("user").as(Invidious::User).email) %> -
- <% end %> -
-
" method="post"> - "> - - "> - -
-
- <% else %> -
- " class="pure-menu-heading"> - <% if env.get("preferences").as(Preferences).dark_mode == "dark" %> - - <% else %> - - <% end %> - -
-
- " href="/preferences?referer=<%= env.get?("current_page") %>" class="pure-menu-heading"> - - -
- <% if CONFIG.login_enabled %> -
- " class="pure-menu-heading"> - <%= translate(locale, "Log in") %> - -
- <% end %> - <% end %> -
+ + +
+ +
+ <% if navbar_search %> +
+
+

Invidious | UTNW
- - <% if CONFIG.banner %> +
+
+ <% autofocus = false %><%= rendered "components/search_box" %> +
+ <% end %> +
+
+ <% if env.get? "user" %> +
+ " class="pure-menu-heading"> + <% if env.get("preferences").as(Preferences).dark_mode == "dark" %> + + <% else %> + + <% end %> + +
+
+ " href="/feed/subscriptions" class="pure-menu-heading"> + <% notification_count = env.get("user").as(Invidious::User).notifications.size %> + <% if notification_count > 0 %> + <%= notification_count %> + <% else %> + + <% end %> + +
+
+ " href="/preferences?referer=<%= env.get?("current_page") %>" class="pure-menu-heading"> + + +
+ <% if env.get("preferences").as(Preferences).show_nick %> +
+ <%= env.get("user").as(Invidious::User).email %> +
+ <% end %> +
+
" method="post"> + "> + +
+
+ <% else %> +
+ " class="pure-menu-heading"> + <% if env.get("preferences").as(Preferences).dark_mode == "dark" %> + + <% else %> + + <% end %> + +
+
+ " href="/preferences?referer=<%= env.get?("current_page") %>" class="pure-menu-heading"> + + +
+ <% if CONFIG.login_enabled %> + + <% end %> + <% end %> +
+
+
+ +
+ <%= rendered "components/feed_menu" %> +
+ +
+
+
+ <% if CONFIG.banner %>

<%= CONFIG.banner %>

- <% end %> - - <%= content %> - + <% end %> + <%= content %> +
+