tesses50
/
freetube
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Style improvements to Channel & Trending pages (#1736) 

* Fixes #1733

* Improves Trending & Channel tab styling

Removes :focus styling for unintended effects with auto-focusing on Trending page. Replaces underline with bold text weight & primary color bottom border on selected/active tab. Replaces animated background color change with bold text weight on tab:hover. Changes inactive tab color to tertiary. Removes unnecessary margin beneath tabs. Removes some of the empty vertical space between Channel info section & channel banner. Adds margin changes to maintain good appearance on smaller screens.
This commit is contained in:
Jason 2021-09-23 06:42:30 +00:00 committed by GitHub
parent 710c354dda
commit b205aaeee5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/renderer/views/Channel/Channel.css
View File

@ -21,6 +21,7 @@
width: 100%; width: 100%;
position: relative; position: relative;
background-color: var(--card-bg-color); background-color: var(--card-bg-color);
margin-top: 10px;
} }
.channelInfo { .channelInfo {
@ -52,7 +53,8 @@
.subscribeButton { .subscribeButton {
height: 50px; height: 50px;
min-width: 150px; min-width: 150px;
align-self: center align-self: center;
margin-bottom: 10px;
} }
.channelSearch { .channelSearch {
@ -67,6 +69,8 @@
.channelInfoTabs { .channelInfoTabs {
position: relative; position: relative;
width: 100%; width: 100%;
margin-top: -16px;
margin-bottom: -13px;
} }
.tab { .tab {
@ -74,21 +78,19 @@
font-size: 15px; font-size: 15px;
cursor: pointer; cursor: pointer;
align-self: flex-end; align-self: flex-end;
-webkit-transition: background 0.2s ease-out; color: var(--tertiary-text-color);
-moz-transition: background 0.2s ease-out;
-o-transition: background 0.2s ease-out;
transition: background 0.2s ease-out;
} }
.selectedTab { .selectedTab {
text-decoration: underline; color: var(--primary-text-color);
border-bottom: 3px solid var(--primary-color);
margin-bottom: -3px;
font-weight: bold;
box-sizing: border-box;
} }
.tab:hover { .tab:hover {
background-color: var(--side-nav-hover-color); font-weight: bold;
-moz-transition: background 0.2s ease-in;
-o-transition: background 0.2s ease-in;
transition: background 0.2s ease-in;
} }
.aboutTab { .aboutTab {
@ -105,6 +107,10 @@
white-space: pre-wrap; white-space: pre-wrap;
} }
.channelSearch {
margin-top: 10px;
}
.elementList { .elementList {
margin-top: 15px; margin-top: 15px;
} }

20
src/renderer/views/Trending/Trending.css
View File

@ -14,10 +14,17 @@
width: 100%; width: 100%;
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr;
margin-top: -3px;
color: var(--tertiary-text-color);
margin-bottom: 10px;
} }
.selectedTab { .selectedTab {
text-decoration: underline; border-bottom: 3px solid var(--primary-color);
color: var(--primary-text-color);
font-weight: bold;
box-sizing: border-box;
margin-bottom: -3px;
} }
.tab { .tab {
@ -26,17 +33,10 @@
font-size: 15px; font-size: 15px;
cursor: pointer; cursor: pointer;
align-self: flex-end; align-self: flex-end;
-webkit-transition: background 0.2s ease-out;
-moz-transition: background 0.2s ease-out;
-o-transition: background 0.2s ease-out;
transition: background 0.2s ease-out;
} }
.tab:hover, .tab:focus { .tab:hover {
background-color: var(--side-nav-hover-color); font-weight: bold;
-moz-transition: background 0.2s ease-in;
-o-transition: background 0.2s ease-in;
transition: background 0.2s ease-in;
} }
@media only screen and (max-width: 350px) { @media only screen and (max-width: 350px) {