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

Design Patch 8 (#1316)

Browse source 
* Design patch 8 - Fixing issues & updating menus
This commit is contained in:
Rave | 図書館猫 2022-04-09 16:07:06 +02:00 committed by GitHub
parent 4b93be049c
commit 65d0c9c6c3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 76 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -29,10 +29,10 @@
// height:1em;
margin-top: 1px;
padding-top: 2px;
}
@media (max-width: $breakpoint-small) {
font-size: var(--font-small);
// font-size: var(--font-small) !important;
}
}
}
@ -123,7 +123,8 @@ a.button--alt {
@media (max-width: $breakpoint-small) {
.button__label {
div:first-of-type {
top: 23% !important;
//top: 23% !important;
top: 0%;
}
}
}

2
ui/scss/component/_card.scss
View file

@ -11,7 +11,7 @@
margin-bottom: var(--spacing-m);
@media (max-width: $breakpoint-small) {
overflow-y: scroll;
// overflow-y: scroll;
height: 100%;
border-top: 1px solid var(--color-border);
// background-color:var(--color-background);

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

@ -127,6 +127,16 @@ $actions-z-index: 2;
.media__info-text:first-of-type {
opacity: 1;
}
.MuiAutocomplete-root {
}
.MuiOutlinedInput-root {
background-color: var(--color-input-bg);
.MuiOutlinedInput-notchedOutline {
border: unset !important;
}
}
}
.channel-cover {
position: relative;
@ -749,7 +759,6 @@ $actions-z-index: 2;
}
.claim__menu-button {
right: calc(var(--spacing-m) - 8px) !important;
margin-top: var(--spacing-xxs);
.icon {
@ -757,6 +766,9 @@ $actions-z-index: 2;
}
&:hover {
background-color: rgba(var(--color-header-button-base), 0.9);
border-radius: 50%;
outline: 2px solid var(--color-header-background);
.icon {
stroke: var(--color-primary);
}
@ -780,11 +792,6 @@ $actions-z-index: 2;
@media (max-width: $breakpoint-small) {
.claim-preview--channel {
a:first-of-type {
.button__content {
align-items: unset;
}
}
.claim-preview__actions {
flex-flow: row;
.section__actions {

28
ui/scss/component/_claim-list.scss
View file

@ -5,7 +5,8 @@
background-color: rgba(var(--color-header-background-base), 0.6);
.claim__menu-button {
margin-right: var(--spacing-m);
// margin-right: var(--spacing-m);
right: 9px;
}
.media__thumb {
@ -24,13 +25,23 @@
}
}
.claim__menu-button {
.icon {
transition: transform 0.2s;
}
}
[aria-expanded='true'].claim__menu-button {
opacity: 1;
background-color: var(--color-header-background);
border-radius: var(--border-radius);
// background-color: var(--color-header-background);
background-color: rgba(var(--color-header-button-base), 0.9);
//border-radius: var(--border-radius);
border-radius: 50%;
outline: 2px solid var(--color-header-background);
.icon {
stroke: var(--color-primary);
stroke: var(--color-primary) !important;
transform: rotate(90deg);
}
}
@ -308,7 +319,7 @@
}
.claim__menu-button {
right: -8px !important;
// right: -8px !important;
margin-top: 6px;
&:hover {
@ -619,6 +630,13 @@
.claim-preview__actions {
margin-top: 0px;
}
@media (max-width: $breakpoint-small) {
a.button--no-style:first-of-type {
.button__content {
align-items: unset;
}
}
}
}
.claim-preview__text {

18
ui/scss/component/_comments.scss
View file

@ -89,7 +89,7 @@ $thumbnailWidthSmall: 2rem;
.comment__thumbnail-wrapper {
flex: 0;
margin-top: var(--spacing-xxs);
// margin-top: var(--spacing-xxs);
}
.comment__content {
@ -189,12 +189,22 @@ $thumbnailWidthSmall: 2rem;
}
}
.menu__button {
.icon {
transition: transform 0.2s;
}
}
[aria-expanded='true'].menu__button {
opacity: 1;
background: var(--color-header-background);
border-radius: var(--border-radius);
// background: var(--color-header-background);
background-color: rgba(var(--color-header-button-base), 0.9);
// border-radius: var(--border-radius);
border-radius: 50%;
outline: 2px solid var(--color-header-background);
.icon {
stroke: var(--color-primary);
transform: rotate(90deg);
}
}
}
@ -342,7 +352,7 @@ $thumbnailWidthSmall: 2rem;
.comment__menu-option {
display: flex;
align-items: center;
padding: var(--spacing-s);
padding: var(--spacing-xs) var(--spacing-s) var(--spacing-xs) var(--spacing-s);
font-size: var(--font-xsmall);
.menu__link {

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

@ -189,11 +189,6 @@ body {
margin-top: var(--spacing-xs) !important;
.claim-preview__wrapper {
padding: 0 !important;
a {
.button__content {
align-items: unset;
}
}
.claim-preview-info {
margin-top: 2px;
margin-bottom: -2px;

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

@ -193,6 +193,12 @@
top: calc(var(--spacing-m) * -1) !important;
left: calc(var(--spacing-m) * -1) !important;
}
.claim__menu-button {
right: calc(var(--spacing-m) - 8px) !important;
}
&:hover {
background-color: rgba(var(--color-header-background-base), 0.9);
}
}
.claim-preview__wrapper {
.claim-preview__repost-author {
@ -240,7 +246,7 @@
padding: var(--spacing-m) !important;
.claim__menu-button {
right: calc(var(--spacing-m) - 8px) !important;
// right: calc(var(--spacing-m) - 8px) !important;
margin-top: var(--spacing-xxs);
.icon {

2
ui/scss/component/_textarea-suggestions.scss
View file

@ -86,7 +86,7 @@
}
.card__main-actions .commentCreate .MuiOutlinedInput-notchedOutline {
border: 1px solid var(--color-border) !important;
// border: 1px solid var(--color-border) !important;
border-radius: var(--border-radius) !important;
}

5
ui/scss/component/menu-button.scss
View file

@ -158,8 +158,9 @@ reach-portal {
.menu__link {
display: flex;
align-items: center;
padding: var(--spacing-s);
padding-right: var(--spacing-l);
// padding: var(--spacing-s);
// padding-right: var(--spacing-l);
padding: var(--spacing-xs) var(--spacing-s) var(--spacing-xs) var(--spacing-s);
height: var(--button-height);
.icon {

9
ui/scss/component/section.scss
View file

@ -197,15 +197,12 @@
}
button {
height: 2rem;
// height: 2rem;
height: var(--height-button);
padding: 0px var(--spacing-s);
.button__content {
height: unset;
span {
font-size: var(--font-xxsmall);
}
// height: unset;
}
}

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

@ -116,7 +116,8 @@ ol {
padding-bottom: var(--spacing-m);
.claim__menu-button {
right: -8px;
// right: -8px;
right: 2px;
}
}
}
@ -1136,16 +1137,6 @@ img {
@media (max-width: $breakpoint-small) {
padding: var(--spacing-s);
padding-top: 0;
.card__main-actions {
.claim-preview__wrapper {
a {
.button__content {
align-items: unset;
}
}
}
}
}
}
@ -1223,6 +1214,9 @@ img {
.claim-link {
width: 40%;
margin-top: var(--spacing-xs);
@media (max-width: $breakpoint-small) {
width: 100%;
}
}
}
}

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

@ -117,7 +117,7 @@
@media (max-width: $breakpoint-small) {
:root {
--font-body: 0.8rem;
// --font-body: 0.8rem;
--body-scrollbar-width: 0px;
}
}