heckyel/yt-local
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Migration general theme: fix missing message-box style

Browse Source
This commit is contained in:
Jesús 2020-12-15 11:24:13 -05:00
parent 7a765dc664
commit e9215534d3
No known key found for this signature in database
GPG Key ID: F6EE7BC59A315766
14 changed files with 29 additions and 375 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
youtube/static/message_box.css Normal file
View File

@ -0,0 +1,12 @@
#message-box {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-style: outset;
padding: 20px;
background-color: var(--background);
opacity: 0;
transition-property: opacity;
transition-duration: 0.3s;
}

2
youtube/templates/base.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'; media-src 'self' https://*.googlevideo.com; {{ "img-src 'self' https://*.googleusercontent.com https://*.ggpht.com https://*.ytimg.com;" if not settings.proxy_images else "" }}">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'; media-src 'self' https://*.googlevideo.com; {{ "img-src 'self' https://*.googleusercontent.com https://*.ggpht.com https://*.ytimg.com;" if not settings.proxy_images else "" }}"/>
<title>{{ page_title }}</title>
<link title="Youtube local" href="/youtube.com/opensearch.xml" rel="search" type="application/opensearchdescription+xml"/>
<link href="/youtube.com/static/favicon.ico" type="image/x-icon" rel="icon"/>

3
youtube/templates/channel.html
View File

@ -7,7 +7,8 @@
{% extends "base.html" %}
{% import "common_elements.html" as common_elements %}
{% block style %}
<link href="/youtube.com/static/channel.css" rel="stylesheet">
<link href="/youtube.com/static/message_box.css" rel="stylesheet"/>
<link href="/youtube.com/static/channel.css" rel="stylesheet"/>
{% endblock style %}
{% block main %}

2
youtube/templates/home.html
View File

@ -1,7 +1,7 @@
{% set page_title = title %}
{% extends "base.html" %}
{% block style %}
<link href="/youtube.com/static/home.css" rel="stylesheet">
<link href="/youtube.com/static/home.css" rel="stylesheet"/>
{% endblock style %}
{% block main %}
<ul>

3
youtube/templates/local_playlist.html
View File

@ -2,7 +2,8 @@
{% extends "base.html" %}
{% import "common_elements.html" as common_elements %}
{% block style %}
<link href="/youtube.com/static/local_playlist.css" rel="stylesheet">
<link href="/youtube.com/static/message_box.css" rel="stylesheet"/>
<link href="/youtube.com/static/local_playlist.css" rel="stylesheet"/>
{% endblock style %}
{% block main %}

2
youtube/templates/local_playlists_list.html
View File

@ -2,7 +2,7 @@
{% extends "base.html" %}
{% block style %}
<link href="/youtube.com/static/home.css" rel="stylesheet">
<link href="/youtube.com/static/home.css" rel="stylesheet"/>
{% endblock style %}
{% block main %}

3
youtube/templates/playlist.html
View File

@ -2,7 +2,8 @@
{% extends "base.html" %}
{% import "common_elements.html" as common_elements %}
{% block style %}
<link href="/youtube.com/static/playlist.css" rel="stylesheet">
<link href="/youtube.com/static/message_box.css" rel="stylesheet"/>
<link href="/youtube.com/static/playlist.css" rel="stylesheet"/>
{% endblock style %}
{% block main %}

3
youtube/templates/search.html
View File

@ -3,7 +3,8 @@
{% extends "base.html" %}
{% import "common_elements.html" as common_elements %}
{% block style %}
<link href="/youtube.com/static/search.css" rel="stylesheet">
<link href="/youtube.com/static/message_box.css" rel="stylesheet"/>
<link href="/youtube.com/static/search.css" rel="stylesheet"/>
{% endblock style %}
{% block main %}

2
youtube/templates/settings.html
View File

@ -1,7 +1,7 @@
{% set page_title = 'Settings' %}
{% extends "base.html" %}
{% block style %}
<link href="/youtube.com/static/settings.css" rel="stylesheet">
<link href="/youtube.com/static/settings.css" rel="stylesheet"/>
{% endblock style %}
{% block main %}

363
youtube/templates/shared.css
View File

@ -1,363 +0,0 @@
* {
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6, div, button{
margin:0;
padding:0;
}
address{
font-style:normal;
}
html{
font-family: {{ font_family }};
}
body{
margin:0;
padding: 0;
color:var(--text-color);
background-color:var(--background-color);
min-height:100vh;
display: flex;
flex-direction: column;
}
header{
background-color:#333333;
height: 50px;
display: flex;
justify-content: center;
}
#home-link{
align-self: center;
margin-left:10px;
color: #ffffff;
}
#site-search{
max-width: 600px;
margin-left:10px;
display: flex;
flex-grow: 1;
}
#site-search .search-box{
align-self:center;
height:25px;
border:0;
flex-grow: 1;
}
#site-search .search-button{
align-self:center;
height:25px;
border-style:solid;
border-width:1px;
}
#site-search .dropdown{
margin-left:5px;
align-self:center;
height:25px;
}
#site-search .dropdown button{
align-self:center;
height:25px;
border-style:solid;
border-width:1px;
}
#site-search .css-sucks{
width:0px;
height:0px;
}
#site-search .dropdown-content{
grid-template-columns: auto auto;
white-space: nowrap;
}
#site-search .dropdown-content h3{
grid-column:1 / span 2;
}
#playlist-edit{
margin-left: 10px;
align-self: center;
}
#local-playlists{
margin-right:5px;
color: #ffffff;
}
#playlist-name-selection{
}
#playlist-add-button{
padding-left: 10px;
padding-right: 10px;
}
#item-selection-reset{
padding-left: 10px;
padding-right: 10px;
}
main{
flex-grow: 1;
padding-bottom: 20px;
}
#message-box{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-style: outset;
padding: 20px;
background-color: var(--interface-color);
opacity: 0;
transition-property: opacity;
transition-duration: 0.3s;
}
.dropdown{
z-index:1;
}
.dropdown-content{
display:none;
background-color: var(--interface-color);
}
.dropdown:hover .dropdown-content{
/* For some reason, if this is just grid, it will insist on being 0px wide just like its 0px by 0px parent */
/* making it inline-grid happened to fix it */
display:inline-grid;
}
.item-list{
display: grid;
grid-row-gap: 10px;
}
.item-grid{
display: flex;
flex-wrap: wrap;
}
.item-grid > .playlist-item-box{
margin-right: 10px;
}
.item-grid > * {
margin-bottom: 10px;
}
.item-grid .horizontal-item-box .item{
width:370px;
}
.item-grid .vertical-item-box .item{
}
.item-box{
display: inline-flex;
flex-direction: row;
/* prevent overflow due to long titles with no spaces:
https://stackoverflow.com/a/43312314 */
min-width: 0;
}
.vertical-item-box{
}
.horizontal-item-box{
}
.item{
background-color:var(--interface-color);
text-decoration:none;
font-size: 0.8125rem;
color: #767676;
}
.horizontal-item-box .item {
flex-grow: 1;
display: grid;
align-content: start;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto auto auto 1fr;
/* prevent overflow due to long titles with no spaces:
https://stackoverflow.com/a/43312314 */
min-width: 0;
}
.vertical-item-box .item{
width: 168px;
}
.thumbnail-box{
font-size: 0px; /* prevent newlines and blank space from creating gaps */
position: relative;
display: block;
}
.horizontal-item-box .thumbnail-box{
grid-row: 1 / span 5;
margin-right: 4px;
}
.no-description .thumbnail-box{
width: 168px;
height:94px;
}
.has-description .thumbnail-box{
width: 246px;
height:138px;
}
.video-item .thumbnail-info{
position: absolute;
bottom: 2px;
right: 2px;
opacity: .8;
color: #ffffff;
font-size: 0.8125rem;
background-color: #000000;
}
.playlist-item .thumbnail-info{
position: absolute;
right: 0px;
bottom: 0px;
height: 100%;
width: 50%;
text-align:center;
white-space: pre-line;
opacity: .8;
color: #cfcfcf;
font-size: 0.8125rem;
background-color: #000000;
}
.playlist-item .thumbnail-info span{ /* trick to vertically center the text */
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
.thumbnail-img{ /* center it */
margin: auto;
display: block;
max-height: 100%;
max-width: 100%;
}
.horizontal-item-box .thumbnail-img{
height: 100%;
}
.item .title{
min-width: 0;
line-height:1.25em;
max-height:3.75em;
overflow-y: hidden;
overflow-wrap: break-word;
color: var(--text-color);
font-size: 1rem;
font-weight: 500;
text-decoration:initial;
}
.stats{
list-style: none;
padding: 0px;
margin: 0px;
}
.horizontal-stats{
max-height:2.4em;
overflow:hidden;
}
.horizontal-stats > li{
display: inline;
}
.horizontal-stats > li::after{
content: " | ";
}
.horizontal-stats > li:last-child::after{
content: "";
}
.vertical-stats{
display: flex;
flex-direction: column;
}
.stats address{
display: inline;
}
.vertical-stats li{
max-height: 1.3em;
overflow: hidden;
}
.item-checkbox{
justify-self:start;
align-self:center;
height:30px;
width:30px;
min-width:30px;
margin: 0px;
}
.page-button-row{
margin-top: 10px;
margin-bottom: 10px;
justify-self:center;
justify-content: center;
display: grid;
grid-auto-columns: 40px;
grid-auto-flow: column;
height: 40px;
}
.next-previous-button-row{
margin: 10px 0px;
display: flex;
justify-self:center;
justify-content: center;
height: 40px;
}
.page-button{
background-color: var(--interface-color);
border-style: outset;
border-width: 2px;
font-weight: bold;
text-align: center;
padding: 5px;
}
.next-page:nth-child(2){ /* only if there's also a previous page button */
margin-left: 10px;
}
.sort-button{
background-color: var(--interface-color);
padding: 2px;
justify-self: start;
}
/* error page stuff */
h1{
font-size: 2rem;
font-weight: normal;
}
#error-box, #error-message{
background-color: var(--interface-color);
width: 80%;
margin: auto;
margin-top: 20px;
padding: 5px;
}
#error-message{
white-space: pre-wrap;
}
#error-box > div, #error-box > p, #error-box > h1{
white-space: pre-wrap;
margin-bottom: 10px;
}
.code-box{
white-space: pre-wrap;
padding: 5px;
border-style:solid;
border-width:1px;
border-radius:5px;
}

1
youtube/templates/status.html
View File

@ -4,4 +4,3 @@
{% block main %}
{{ message }}
{% endblock %}

2
youtube/templates/subscription_manager.html
View File

@ -1,7 +1,7 @@
{% set page_title = 'Subscription Manager' %}
{% extends "base.html" %}
{% block style %}
<link href="/youtube.com/static/subscription_manager.css" rel="stylesheet">
<link href="/youtube.com/static/subscription_manager.css" rel="stylesheet"/>
{% endblock style %}

3
youtube/templates/subscriptions.html
View File

@ -7,7 +7,8 @@
{% import "common_elements.html" as common_elements %}
{% block style %}
<link href="/youtube.com/static/subscription.css" rel="stylesheet">
<link href="/youtube.com/static/message_box.css" rel="stylesheet"/>
<link href="/youtube.com/static/subscription.css" rel="stylesheet"/>
{% endblock style %}
{% block main %}

3
youtube/templates/watch.html
View File

@ -3,7 +3,8 @@
{% import "common_elements.html" as common_elements %}
{% import "comments.html" as comments with context %}
{% block style %}
<link href="/youtube.com/static/watch.css" rel="stylesheet">
<link href="/youtube.com/static/message_box.css" rel="stylesheet"/>
<link href="/youtube.com/static/watch.css" rel="stylesheet"/>
{% endblock style %}
{% block main %}