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
return (
<div className="card-stack uploadPage-wraper">
<div className="card-stack uploadPage-wrapper">
<ChannelSelect hideAnon={isLivestreamMode} disabled={disabled} autoSet channelToSet={claimChannelId} />
<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;
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 {
max-height: 100% !important;
}
div {
border-radius: unset;
}
}
.video-js {

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

@ -25,7 +25,6 @@
// The default is coded for list-layout;
// --tile and other modifiers adjust accordingly.
.ads__claim-item {
border-bottom: 1px solid var(--color-border);
margin-top: var(--spacing-m);
margin-bottom: var(--spacing-m);
padding: var(--spacing-m);
@ -83,6 +82,9 @@
}
&:hover {
.ads__title {
color: var(--color-primary);
}
.ad__container {
box-shadow: 0 0 0 1px rgba(var(--color-primary-dynamic), 1) inset;
}
@ -131,13 +133,13 @@
.ads__subtitle {
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);
line-height: 1rem;
font-size: var(--font-xsmall);
.icon {
color: var(--color-text);
color: var(--color-text) !important;
width: 2.1rem;
height: 2.1rem;
float: left;
@ -192,7 +194,9 @@
padding-left: var(--spacing-s);
.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 {
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) {
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;
.channelPage-wrapper {
.comment__badge {
.icon {
width: 70%;
margin-right: 10%;
}
}
.button-group {
.button__content {
.icon {

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

@ -171,8 +171,11 @@
}
}
.vjs-progress-control {
top: 32px;
.video-js {
.vjs-progress-control.vjs-control {
top: 38px;
margin: unset !important;
max-width: 100%;
.vjs-slider {
margin: 0 !important;
div,
@ -181,6 +184,7 @@
}
}
}
}
.content__info {
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-icon-placeholder {
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-right-color: var(--color-input-prefix-border);
//color: white;
background-color: var(--color-header-button);
background-color: var(--color-border);
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 {
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 {

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

@ -74,8 +74,15 @@
.claim__menu-button {
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 {
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 {
background-color: rgba(var(--color-header-button-base), 0.9) !important;
}
@ -153,22 +161,64 @@
.button-toggle--active,
.channel__list-item,
.button--secondary,
input {
background-color: rgba(var(--color-header-button-base), 0.9) !important;
.button--secondary {
// background-color: rgba(var(--color-header-button-base), 0.9) !important;
box-shadow: 0 0 0 2px var(--color-border) inset;
}
.channel__list-item {
&:hover {
box-shadow: unset;
background-color: var(--color-primary);
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 {
color: var(--color-text);
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] {
&:hover {
.channel__list-item--selected {

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

@ -38,14 +38,14 @@ $control-bar-icon-size: 0.8rem;
position: absolute;
display: block;
align-items: center;
width: 100%;
width: calc(100% - var(--spacing-m) * 2);
height: 1rem;
bottom: 90%;
margin: 1px 23px !important;
max-width: 96.5%;
margin: 1px var(--spacing-m) !important;
@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 {
@ -189,13 +189,45 @@ $control-bar-icon-size: 0.8rem;
}
[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;
margin-bottom: calc(var(--spacing-xxs) * -1); // Prevents accidental dismissal when the gap is hovered.
li {
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 {

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

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