Fix ShowMore and paddings in Comments (#461)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2021-12-01 14:09:14 +03:00 committed by GitHub
parent c44f384644
commit 36c31a1f84
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 28 additions and 33 deletions

View File

@ -80,25 +80,15 @@ table {
border-spacing: 0; border-spacing: 0;
} }
// input:-webkit-autofill,
// input:-webkit-autofill:hover,
// input:-webkit-autofill:focus,
// input:-webkit-autofill:active {
// -webkit-animation: autofill 0s forwards;
// }
// @-webkit-keyframes autofill {
// 100% {
// background: transparent;
// color: inherit;
// }
// }
/* Common */ /* Common */
* { * {
--modal-padding: 1.5rem; --modal-padding: 1.5rem;
} }
p:first-child { margin-block-start: 0; } // First and last padding
p:last-child { margin-block-end: 0; }
/* Flex */
.flex { display: flex; } .flex { display: flex; }
.inline-flex { display: inline-flex; } .inline-flex { display: inline-flex; }
.flex-grow { flex-grow: 1; } .flex-grow { flex-grow: 1; }
@ -181,13 +171,6 @@ table {
&:hover .icon { color: var(--theme-caption-color); } &:hover .icon { color: var(--theme-caption-color); }
} }
/* Tables */
// .activity-table > tr:last-child > .no-icon-cell {
// min-height: auto;
// height: auto;
// &::after { content: none; }
// }
/* Margins & Paddings */ /* Margins & Paddings */
.step-lr75 + .step-lr75 { margin-left: .75rem; } .step-lr75 + .step-lr75 { margin-left: .75rem; }
.step-tb75 + .step-tb75 { margin-top: .75rem; } .step-tb75 + .step-tb75 { margin-top: .75rem; }

View File

@ -52,7 +52,7 @@
&.crop { &.crop {
overflow: hidden; overflow: hidden;
max-height: 15rem; max-height: 15rem;
mask: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 75%); mask: linear-gradient(to top, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .9) 2.5rem, rgba(0, 0, 0, 1) 3rem);
} }
} }
@ -63,8 +63,9 @@
bottom: 0; bottom: 0;
margin: 0 auto; margin: 0 auto;
padding: .5rem 1rem; padding: .5rem 1rem;
width: fit-content; width: max-content;
font-weight: 500;
font-size: .75rem; font-size: .75rem;
color: var(--theme-caption-color); color: var(--theme-caption-color);
background: var(--theme-card-bg); background: var(--theme-card-bg);
@ -72,20 +73,33 @@
box-shadow: 0px 8px 15px rgba(0, 0, 0, .1); box-shadow: 0px 8px 15px rgba(0, 0, 0, .1);
backdrop-filter: blur(120px); backdrop-filter: blur(120px);
border-radius: 2.5rem; border-radius: 2.5rem;
user-select: none;
cursor: pointer; cursor: pointer;
opacity: .3; opacity: .9;
transform: scale(.9); transform: scale(.97);
transition: opacity .1s ease-in-out, transform .1s ease-in-out; transition: opacity .1s ease-in-out, transform .1s ease-in-out;
&:hover { &:hover {
opacity: 1; opacity: 1;
transform: scale(1); transform: scale(1);
} }
&:active { &:active {
opacity: .9; opacity: .95;
transform: scale(.95); transform: scale(.99);
} }
&.outter { bottom: -2.25rem; } &.outter {
bottom: -1.85rem;
opacity: .7;
transform: scale(.80);
&:hover {
opacity: 1;
transform: scale(.83);
}
&:active {
opacity: .95;
transform: scale(.82);
}
}
} }
</style> </style>

View File

@ -265,7 +265,7 @@
.menuOptions { .menuOptions {
margin-left: .5rem; margin-left: .5rem;
opacity: .6; opacity: .8;
cursor: pointer; cursor: pointer;
&:hover { opacity: 1; } &:hover { opacity: 1; }
} }

View File

@ -40,7 +40,7 @@
let refInput: ReferenceInput let refInput: ReferenceInput
</script> </script>
<div class:editing={editing}> <div class:editing>
{#if edit} {#if edit}
<ReferenceInput bind:this={refInput} content={value.message} on:message={onMessage} showSend={false}/> <ReferenceInput bind:this={refInput} content={value.message} on:message={onMessage} showSend={false}/>
<div class='flex-row-reverse safari-gap-2 reverse'> <div class='flex-row-reverse safari-gap-2 reverse'>
@ -55,7 +55,5 @@
</div> </div>
<style lang="scss"> <style lang="scss">
.editing { .editing { border: 1px solid var(--primary-button-focused-border); }
border: 1px solid var(--primary-button-focused-border);
}
</style> </style>