jschulthess/qortal-ui
1
0
Fork 0
forked from Qortal/qortal-ui
Code Issues Pull Requests Projects Releases Wiki Activity

Fixed gif collection wrapper overflow issue

Browse Source
This commit is contained in:
Justin Ferrari 2023-03-24 21:17:04 -05:00
parent 00d0ea23ce
commit 0b20b5a0ef
2 changed files with 604 additions and 578 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs-css.js
View File

@ -137,7 +137,7 @@ display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow-x: hidden;
} }
.collection-gifs { .collection-gifs {
@ -175,7 +175,8 @@ height: 150px;
object-fit: cover; object-fit: cover;
border: 1px solid transparent; border: 1px solid transparent;
transition: all 0.2s cubic-bezier(0, 0.55, 0.45, 1); transition: all 0.2s cubic-bezier(0, 0.55, 0.45, 1);
box-shadow: rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px; box-shadow: rgb(50 50 93 / 25%) 0px 6px 12px -2px,
rgb(0 0 0 / 30%) 0px 3px 7px -3px;
} }
.collection-gif:hover { .collection-gif:hover {
@ -354,7 +355,8 @@ color: var(--chat-bubble-msg-color);
.collection-back-button:hover { .collection-back-button:hover {
border: none; border: none;
box-sizing: border-box; box-sizing: border-box;
box-shadow: rgb(0 0 0 / 14%) 0px 4px 5px 0px, rgb(0 0 0 / 12%) 0px 1px 10px 0px, rgb(0 0 0 / 20%) 0px 2px 4px -1px; box-shadow: rgb(0 0 0 / 14%) 0px 4px 5px 0px,
rgb(0 0 0 / 12%) 0px 1px 10px 0px, rgb(0 0 0 / 20%) 0px 2px 4px -1px;
} }
.collection-back-button-arrow { .collection-back-button-arrow {
@ -444,7 +446,8 @@ background-color: #03a8f475;
} }
@keyframes lds-circle { @keyframes lds-circle {
0%, 100% { 0%,
100% {
animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5); animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
} }
0% { 0% {
@ -487,7 +490,9 @@ background-color: #03a8f475;
.subscribe-button:hover { .subscribe-button:hover {
cursor: pointer; cursor: pointer;
box-shadow: 0px 3px 4px 0px hsla(0,0%,0%,0.14), 0px 3px 3px -2px hsla(0,0%,0%,0.12), 0px 1px 8px 0px hsla(0,0%,0%,0.2); box-shadow: 0px 3px 4px 0px hsla(0, 0%, 0%, 0.14),
0px 3px 3px -2px hsla(0, 0%, 0%, 0.12),
0px 1px 8px 0px hsla(0, 0%, 0%, 0.2);
} }
.unsubscribe-button { .unsubscribe-button {
@ -509,7 +514,8 @@ background-color: #03a8f475;
.unsubscribe-button:hover { .unsubscribe-button:hover {
cursor: pointer; cursor: pointer;
box-shadow: 0px 3px 4px 0px hsla(0,0%,0%,0.14), 0px 3px 3px -2px hsla(0,0%,0%,0.12), 0px 1px 8px 0px hsla(0,0%,0%,0.2); box-shadow: 0px 3px 4px 0px hsla(0, 0%, 0%, 0.14),
0px 3px 3px -2px hsla(0, 0%, 0%, 0.12),
0px 1px 8px 0px hsla(0, 0%, 0%, 0.2);
} }
`; `;

28
qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifsExplore-css.js
View File

@ -14,7 +14,26 @@ display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; max-height: 500px;
overflow-y: auto;
overflow-x: hidden;
}
.collection-wrapper::-webkit-scrollbar-track {
background-color: whitesmoke;
border-radius: 7px;
}
.collection-wrapper::-webkit-scrollbar {
width: 6px;
border-radius: 7px;
background-color: whitesmoke;
}
.collection-wrapper::-webkit-scrollbar-thumb {
background-color: rgb(180, 176, 176);
border-radius: 7px;
transition: all 0.3s ease-in-out;
} }
.collection-card { .collection-card {
@ -90,7 +109,7 @@ transition: all 0.3s ease-in-out;
.clear-search-icon:hover { .clear-search-icon:hover {
cursor: pointer; cursor: pointer;
background-color: #e4e3e389 background-color: #e4e3e389;
} }
.gifs-loading-message { .gifs-loading-message {
@ -120,7 +139,8 @@ animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
} }
@keyframes lds-circle { @keyframes lds-circle {
0%, 100% { 0%,
100% {
animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5); animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
} }
0% { 0% {
@ -134,4 +154,4 @@ animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
transform: rotateY(3600deg); transform: rotateY(3600deg);
} }
} }
` `;