Andy Smith
e8f85df720
* main: (104 commits) Default collection permissions to "all access" dep: update active_record-tenanted to 8758240b dep: bump Rails to 32d96235 Test for `Bubbles::RecoversController` Move readings under bubbles and out of double nesting Move bubble stagings out from double nesting Correct alpha ordering Fix indention Move bubble recovery out from double nesting Move bubbles publish out from the double nesting Move bubble pops out from double nesting Move controller to delete bubble image out from double nesting under bucket Revert "Scope searches by user" Scope searches by user Few more lazy loading avatars! Another lazy loading point Remove double nesting under bubbles for engagement Lets just preload all avatars for now No need for an array when there is only one dependency Scope data by account ...
107 lines
2.2 KiB
CSS
107 lines
2.2 KiB
CSS
@layer components {
|
|
.comments {
|
|
--avatar-size: 2.33em;
|
|
--comment-padding-block: var(--block-space);
|
|
--comment-padding-inline: var(--inline-space-double);
|
|
--comment-max: 70ch;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-inline: var(--inline-space);
|
|
place-items: center;
|
|
text-align: center;
|
|
|
|
@media (min-width: 160ch) {
|
|
padding-inline: calc(var(--tray-size) + var(--inline-space) * 1.5);
|
|
}
|
|
}
|
|
|
|
.comments__subscribers {
|
|
max-inline-size: var(--comment-max);
|
|
padding-inline: calc(var(--comment-padding-block) + var(--inline-space-double));
|
|
}
|
|
|
|
.comment {
|
|
margin-inline: auto;
|
|
max-inline-size: var(--comment-max);
|
|
position: relative;
|
|
|
|
house-md-toolbar {
|
|
margin-block-start: calc(var(--comment-padding-block) * -0.5);
|
|
}
|
|
|
|
.house-md-content {
|
|
padding: var(--comment-padding-block) 0 0;
|
|
}
|
|
}
|
|
|
|
.comment__author {
|
|
.btn {
|
|
font-weight: inherit;
|
|
}
|
|
}
|
|
|
|
.comment__avatar {
|
|
margin: calc(var(--comment-padding-block) * 0.5) calc(var(--comment-padding-inline) * -0.75);
|
|
z-index: 0;
|
|
|
|
.comment--mine_ & {
|
|
margin-inline: calc(var(--comment-padding-inline) * -0.75);
|
|
}
|
|
}
|
|
|
|
.comment__body {
|
|
p {
|
|
&:first-child {
|
|
margin-block-start: 0;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-block-end: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.comment__content {
|
|
background-color: var(--color-subtle-light);
|
|
border-radius: 0.2em;
|
|
padding:
|
|
var(--comment-padding-block)
|
|
var(--comment-padding-inline);
|
|
}
|
|
|
|
.comment__edit {
|
|
--btn-icon-size: 1.2rem;
|
|
|
|
display: none;
|
|
|
|
.comment--mine & {
|
|
display: grid;
|
|
}
|
|
}
|
|
|
|
.comment__event {
|
|
max-inline-size: var(--comment-max);
|
|
|
|
&::before {
|
|
/* Make up space for lack of avatar */
|
|
content: "";
|
|
display: flex;
|
|
inline-size: calc(var(--comment-padding-inline) * 0.75);
|
|
}
|
|
}
|
|
|
|
.comment__input {
|
|
--input-border-size: 0;
|
|
--input-padding: 0;
|
|
|
|
min-block-size: calc(9lh + (2 * var(--comment-padding-block)));
|
|
min-inline-size: 100%;
|
|
|
|
@supports (field-sizing: content) {
|
|
field-sizing: content;
|
|
min-block-size: calc(9lh + (2 * var(--comment-padding-block)));
|
|
}
|
|
}
|
|
}
|