Merge pull request 'Some minor UI improvements' (#25) from fr33zing/poketube:arctic-ui into main

Reviewed-on: https://codeberg.org/Ashley/poketube/pulls/25
This commit is contained in:
Ashley 2023-01-14 07:26:23 +00:00
commit 206549b81c
4 changed files with 38 additions and 9 deletions

View file

@ -73,6 +73,7 @@
--ptd-margin-base: 4px;
--ptd-avatar-size: 32px;
--ptd-toolbar-height: 56px;
--ptd-button-spacing: 6px;
/* margins */
--ptd-margin-2x: 8px;
@ -131,6 +132,21 @@ a {
color: var(--text-link);
}
a.avatar {
height: 36px;
margin-left: 6px;
font-size: 0;
}
.video-chnl-info-pill > a:first-child {
margin-right: -8px;
}
/* If the "Encryption duh" duplication bug is fixed, remove this rule. */
.new-button.button-encryption + a[title="Encryption duh"] {
display: none;
}
.video > .info > .title {
font-family: var(--text-font-primary);
width: 10em;
@ -260,7 +276,7 @@ a {
font-family: Inter;
clear: both;
margin-top: 1.1em;
padding: 4.5px;
padding: 5px 0;
background: #0009;
margin-right: -13px;
width: fit-content;
@ -282,7 +298,7 @@ a {
grid-area: buttons;
display: flex;
flex-direction: row;
column-gap: 3px;
column-gap: var(--ptd-button-spacing);
height: min-content;
width: -moz-fit-content;
width: fit-content;
@ -557,6 +573,10 @@ a {
display: block;
}
label[for="loggedout-dropdown"] {
cursor: pointer;
}
.new-button.engagement:hover {
background-color: #0009;
}

View file

@ -322,7 +322,7 @@ a.icon-button > img {
color: var(--text-primary);
justify-content: center;
align-content: center;
column-gap: 4px;
column-gap: var(--ptd-button-spacing);
text-decoration: none;
height: 36px;
line-height: 32px;

View file

@ -213,6 +213,15 @@ font-stretch: ultra-expanded;
font-weight: 1000;
}
.product-container {
display: flex;
justify-content: center;
position: relative;
top: 11.5em;
padding-bottom: 2em;
overflow: hidden;
}
.btn-explore {
padding: 20px;
display: flex;
@ -253,13 +262,13 @@ font-stretch: ultra-expanded;
margin-block-end: 1em;
margin-inline-start: 0;
margin-inline-end: 0;
margin-top: 0;
margin-top: 1rem;
margin-bottom: 1rem;
margin-left: 0.2rem;
font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
margin-top: 12px;
z-index: 10; /* Was 2 */"
}
</style>
@ -316,8 +325,8 @@ z-index: 10; /* Was 2 */"
<a href="/discover" class="btn-explore">Discover Videos</a>
</div>
</div>
<div style="display: flex;justify-content: center;">
<img src="/css/product.svg" style="width: 25em;margin-top: 11.2em;transform: scale(1.3);margin-right: 1em;margin-bottom: 1em;">
<div class="product-container">
<img src="/css/product.svg" style="width: 25em;transform: scale(1.3);margin-right: 1em;margin-bottom: 1em;">
</div>
</div>

View file

@ -596,7 +596,7 @@ display: block;" autoplay controls
<% if (!video.Channel.Name.endsWith(' - Topic')) { %>
<% if (!video.Title.endsWith('Audio)')) { %>
<div class="new-button button-lite" style=";margin-left: -4px;">
<div class="new-button button-lite">
<a title="Low Bandwidth? try PokeTube Lite!" style="color:var(--text-color);text-decoration: none" href="/lite?v=<%=video.id%>">
<div class="pill-button">