LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Design patch 22-05-31 (#1598)

Browse source 
* Redesign form elements with background

* Adjust list ads

* Fix progress bar in mini player

* Fix progress bar on mobile

* Fix progress bar in theater mode

* Redesign repost modal

* Update channel selector in modal

* Remove border radius from embedded media

* Adjust quality selector

* Adjust updated player theme for light mode

* Rename wrapper class
This commit is contained in:
Rave | 図書館猫 2022-05-31 11:14:59 +02:00 committed by GitHub
parent 9779c19e88
commit ea3d8e01ef
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 193 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui/component/publishForm/view.jsx
View file

@ -593,7 +593,7 @@ function PublishForm(props: Props) {
// Editing claim uri // Editing claim uri
return ( return (
<div className="card-stack uploadPage-wraper"> <div className="card-stack uploadPage-wrapper">
<ChannelSelect hideAnon={isLivestreamMode} disabled={disabled} autoSet channelToSet={claimChannelId} /> <ChannelSelect hideAnon={isLivestreamMode} disabled={disabled} autoSet channelToSet={claimChannelId} />
<PublishFile <PublishFile

2
ui/component/viewers/videoViewer/internal/plugins/videojs-http-streaming--override/playlist-selectors.js
View file

@ -206,7 +206,7 @@ export const lastBandwidthSelector = function() {
const originalHeight = hlsQualitySelector.config.originalHeight; const originalHeight = hlsQualitySelector.config.originalHeight;
if (hlsQualitySelector?.getCurrentQuality() === 'auto') { if (hlsQualitySelector?.getCurrentQuality() === 'auto') {
hlsQualitySelector._qualityButton.menuButton_.$('.vjs-icon-placeholder').innerHTML = __('Auto %quality% --[Video quality popup. Long form.]--', { quality: selectedBandwidth.attributes.RESOLUTION.height + 'p' }); hlsQualitySelector._qualityButton.menuButton_.$('.vjs-icon-placeholder').innerHTML = __('Auto <span>%quality%</span> --[Video quality popup. Long form.]--', { quality: selectedBandwidth.attributes.RESOLUTION.height + 'p' });
} }

3
ui/component/viewers/videoViewer/internal/plugins/videojs-mobile-ui/plugin.scss
View file

@ -16,6 +16,9 @@
.vjs-touch-overlay { .vjs-touch-overlay {
max-height: 100% !important; max-height: 100% !important;
} }
div {
border-radius: unset;
}
} }
.video-js { .video-js {

42
ui/scss/component/_ads.scss
View file

@ -25,7 +25,6 @@
// The default is coded for list-layout; // The default is coded for list-layout;
// --tile and other modifiers adjust accordingly. // --tile and other modifiers adjust accordingly.
.ads__claim-item { .ads__claim-item {
border-bottom: 1px solid var(--color-border);
margin-top: var(--spacing-m); margin-top: var(--spacing-m);
margin-bottom: var(--spacing-m); margin-bottom: var(--spacing-m);
padding: var(--spacing-m); padding: var(--spacing-m);
@ -83,6 +82,9 @@
} }
&:hover { &:hover {
.ads__title {
color: var(--color-primary);
}
.ad__container { .ad__container {
box-shadow: 0 0 0 1px rgba(var(--color-primary-dynamic), 1) inset; box-shadow: 0 0 0 1px rgba(var(--color-primary-dynamic), 1) inset;
} }
@ -131,13 +133,13 @@
.ads__subtitle { .ads__subtitle {
margin-top: var(--spacing-s); margin-top: var(--spacing-s);
color: rgba(var(--color-text-base), 0.6); color: rgba(var(--color-text-base), 0.6) !important;
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
line-height: 1rem; line-height: 1rem;
font-size: var(--font-xsmall); font-size: var(--font-xsmall);
.icon { .icon {
color: var(--color-text); color: var(--color-text) !important;
width: 2.1rem; width: 2.1rem;
height: 2.1rem; height: 2.1rem;
float: left; float: left;
@ -192,7 +194,9 @@
padding-left: var(--spacing-s); padding-left: var(--spacing-s);
.ads__title { .ads__title {
color: white; color: var(--color-text);
font-size: var(--font-small);
font-weight: var(--font-weight-bold);
} }
} }
@ -216,8 +220,36 @@
} }
.ads__claim-text--small { .ads__claim-text--small {
font-size: var(--font-small); // font-size: var(--font-small);
color: var(--color-text);
font-weight: var(--font-weight-bold);
font-size: var(--font-body);
width: 100%;
.ads__title {
margin-bottom: var(--spacing-s);
}
.ads__subtitle {
color: rgba(var(--color-text-base), 0.6) !important;
font-size: var(--font-xsmall);
.icon {
color: var(--color-text) !important;
width: 2.1rem;
height: 2.1rem;
margin-right: var(--spacing-s);
float: left;
}
}
a {
display: block;
span {
display: unset;
}
}
span::after {
white-space: pre; /* or pre-wrap */
}
@media (max-width: $breakpoint-small) { @media (max-width: $breakpoint-small) {
font-size: var(--font-xsmall); font-size: var(--font-xsmall);
} }

7
ui/scss/component/_channel.scss
View file

@ -3,13 +3,6 @@ $metadata-z-index: 1;
$actions-z-index: 2; $actions-z-index: 2;
.channelPage-wrapper { .channelPage-wrapper {
.comment__badge {
.icon {
width: 70%;
margin-right: 10%;
}
}
.button-group { .button-group {
.button__content { .button__content {
.icon { .icon {

8
ui/scss/component/_content.scss
View file

@ -171,8 +171,11 @@
} }
} }
.vjs-progress-control { .video-js {
top: 32px; .vjs-progress-control.vjs-control {
top: 38px;
margin: unset !important;
max-width: 100%;
.vjs-slider { .vjs-slider {
margin: 0 !important; margin: 0 !important;
div, div,
@ -181,6 +184,7 @@
} }
} }
} }
}
.content__info { .content__info {
margin-top: -50px; margin-top: -50px;

11
ui/scss/component/_file-render.scss
View file

@ -611,6 +611,17 @@ $control-bar-icon-size: 0.8rem;
.vjs-quality-selector { .vjs-quality-selector {
.vjs-icon-placeholder { .vjs-icon-placeholder {
font-size: $control-bar-font-size; font-size: $control-bar-font-size;
span {
display: block;
margin-left: 24%;
margin-right: 24%;
font-size: var(--font-xxxsmall);
background: var(--color-primary);
font-weight: var(--font-weight-bold);
border-radius: var(--border-radius);
margin-top: -1px;
padding-top: 1px;
}
} }
} }

4
ui/scss/component/_form-field.scss
View file

@ -416,9 +416,9 @@ fieldset-group {
border-color: var(--color-input-border); border-color: var(--color-input-border);
border-right-color: var(--color-input-prefix-border); border-right-color: var(--color-input-prefix-border);
//color: white; //color: white;
background-color: var(--color-header-button); background-color: var(--color-border);
color: var(--color-text); color: var(--color-text);
box-shadow: 0px 0px 0px 2px rgba(var(--color-text-base), 0.1) inset; // box-shadow: 0px 0px 0px 2px rgba(var(--color-text-base), 0.1) inset;
} }
} }

33
ui/scss/component/_main.scss
View file

@ -748,6 +748,39 @@ body {
.card__main-actions { .card__main-actions {
border-top: unset; border-top: unset;
} }
input,
select {
box-shadow: 0 0 0 2px var(--color-border) inset;
&:hover {
background-color: var(--color-input-toggle-bg-hover);
}
&:focus-visible {
background-color: var(--color-input-toggle-bg-hover) !important;
box-shadow: 0 0 0 2px var(--color-primary) inset;
}
}
.checkbox,
.radio {
label {
&::before {
top: unset;
border: unset;
box-shadow: 0 0 0 2px var(--color-border) inset;
}
&::after {
top: 6px;
}
}
}
.checkbox {
label {
&::after {
top: 8px !important;
}
}
}
} }
.button--secondary { .button--secondary {

62
ui/scss/component/_modal.scss
View file

@ -74,8 +74,15 @@
.claim__menu-button { .claim__menu-button {
right: var(--spacing-xxs) !important; right: var(--spacing-xxs) !important;
} }
&:hover { }
// background-color: unset;
.repost-wrapper {
.claim-preview__wrapper {
padding-top: var(--spacing-m);
border: 2px solid var(--color-border);
.claim-preview__actions {
margin-top: unset;
}
} }
} }
@ -145,7 +152,8 @@
} }
.button-toggle { .button-toggle {
background-color: rgba(var(--color-header-button-base), 0.4) !important; // background-color: rgba(var(--color-header-button-base), 0.4) !important;
background-color: var(--color-header-background) !important;
&:hover { &:hover {
background-color: rgba(var(--color-header-button-base), 0.9) !important; background-color: rgba(var(--color-header-button-base), 0.9) !important;
} }
@ -153,22 +161,64 @@
.button-toggle--active, .button-toggle--active,
.channel__list-item, .channel__list-item,
.button--secondary, .button--secondary {
input { // background-color: rgba(var(--color-header-button-base), 0.9) !important;
background-color: rgba(var(--color-header-button-base), 0.9) !important; box-shadow: 0 0 0 2px var(--color-border) inset;
} }
.channel__list-item { .channel__list-item {
&:hover { &:hover {
box-shadow: unset;
background-color: var(--color-primary); background-color: var(--color-primary);
color: var(--color-primary-contrast); color: var(--color-primary-contrast);
} }
} }
input,
select {
background-color: var(--color-header-background) !important;
box-shadow: 0 0 0 2px var(--color-border) inset;
&:hover {
background-color: var(--color-input-toggle-bg-hover) !important;
}
&:focus-visible {
border: unset;
background-color: var(--color-input-toggle-bg-hover) !important;
box-shadow: 0 0 0 2px var(--color-primary) inset;
}
}
label { label {
color: var(--color-text); color: var(--color-text);
font-size: var(--font-medium); font-size: var(--font-medium);
} }
.checkbox,
.radio {
label {
&::before {
top: unset;
border: unset;
box-shadow: 0 0 0 2px var(--color-border) inset;
}
&::after {
top: 6px;
}
}
&:hover {
input {
border: unset !important;
// outline:unset !important;
}
}
}
.checkbox {
label {
&::after {
top: 8px !important;
}
}
}
[data-reach-menu-button] { [data-reach-menu-button] {
&:hover { &:hover {
.channel__list-item--selected { .channel__list-item--selected {

42
ui/scss/component/_videojs.scss
View file

@ -38,14 +38,14 @@ $control-bar-icon-size: 0.8rem;
position: absolute; position: absolute;
display: block; display: block;
align-items: center; align-items: center;
width: 100%; width: calc(100% - var(--spacing-m) * 2);
height: 1rem; height: 1rem;
bottom: 90%; bottom: 90%;
margin: 1px 23px !important; margin: 1px var(--spacing-m) !important;
max-width: 96.5%;
@media (max-width: $breakpoint-small) { @media (max-width: $breakpoint-small) {
max-width: 94.5%; width: calc(100% - var(--spacing-s) * 2);
margin: 1px var(--spacing-s) !important;
} }
.vjs-vtt-thumbnail-display { .vjs-vtt-thumbnail-display {
@ -189,13 +189,45 @@ $control-bar-icon-size: 0.8rem;
} }
[dir] .vjs-menu-button-popup .vjs-menu .vjs-menu-content { [dir] .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
background-color: rgba(43, 51, 63); //background-color: rgba(43, 51, 63);
background-color: rgba(var(--color-header-button-base), 0.9);
backdrop-filter: blur(4px);
border-radius: var(--border-radius);
border: 2px solid var(--color-header-background);
max-height: 20em; max-height: 20em;
margin-bottom: calc(var(--spacing-xxs) * -1); // Prevents accidental dismissal when the gap is hovered. margin-bottom: calc(var(--spacing-xxs) * -1); // Prevents accidental dismissal when the gap is hovered.
li { li {
font-size: $control-bar-popup-font-size; font-size: $control-bar-popup-font-size;
} }
.vjs-menu-title {
color: var(--color-text);
background-color: var(--color-header-background);
}
.vjs-menu-item {
color: var(--color-text);
margin: 2px;
margin-left: var(--spacing-s);
margin-right: var(--spacing-s);
&:first-child {
margin-top: var(--spacing-xxs);
}
&:last-child {
margin-bottom: var(--spacing-xxs);
}
&:hover {
color: var(--color-primary-contrast);
background-color: var(--color-primary);
border-radius: var(--border-radius);
}
}
.vjs-selected {
background-color: var(--color-primary);
border-radius: var(--border-radius);
color: var(--color-primary-contrast);
}
} }
.vjs-slider-horizontal { .vjs-slider-horizontal {

2
ui/scss/init/_gui.scss
View file

@ -722,7 +722,7 @@ img {
} }
} }
.uploadPage-wraper { .uploadPage-wrapper {
&.card-stack { &.card-stack {
.card:not(:last-of-type) { .card:not(:last-of-type) {
margin-bottom: var(--spacing-l) !important; margin-bottom: var(--spacing-l) !important;