419003adb2
1. In many cases, the `flex-list` has previous and next `gt-hidden` siblings, so relax the CSS selector to remove all ".segument .flex-list" paddings. 2. Make the "Add key" button can toggle 3. Move help message into the related segment(panel). Otherwise users would misread the message, eg: the SSH help seemed for GPG because they are so near 4. Move modal element into the segment element, otherwise it affects the layout
113 lines
2.4 KiB
CSS
113 lines
2.4 KiB
CSS
.flex-list {
|
|
list-style: none;
|
|
}
|
|
|
|
.flex-item {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: flex-start;
|
|
padding: 1em 0;
|
|
}
|
|
|
|
.flex-item-baseline {
|
|
align-items: baseline;
|
|
}
|
|
|
|
.flex-item-center {
|
|
align-items: center;
|
|
}
|
|
|
|
.flex-item .flex-item-leading {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.flex-item .flex-item-main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
flex-basis: 60%; /* avoid wrapping the "flex-item-trailing" too aggressively */
|
|
min-width: 0; /* make the "text truncate" work, otherwise the flex axis is not limited and the text just overflows */
|
|
}
|
|
|
|
.flex-item-header {
|
|
display: flex;
|
|
gap: .25rem;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.flex-item a:not(.label, .button):hover {
|
|
color: var(--color-primary) !important;
|
|
}
|
|
|
|
.flex-item .flex-item-icon svg {
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.flex-item .flex-item-trailing {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
flex-grow: 0;
|
|
flex-wrap: wrap;
|
|
justify-content: end;
|
|
}
|
|
|
|
.flex-item .flex-item-title {
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: .25rem;
|
|
max-width: 100%;
|
|
color: var(--color-text);
|
|
font-size: 16px;
|
|
font-weight: var(--font-weight-semibold);
|
|
word-break: break-word;
|
|
min-width: 0;
|
|
}
|
|
|
|
.flex-item .flex-item-title a {
|
|
color: var(--color-text);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.flex-item .flex-item-body {
|
|
font-size: 13px;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: .25rem;
|
|
color: var(--color-text-light-2);
|
|
word-break: break-word;
|
|
}
|
|
|
|
.flex-item .flex-item-body a {
|
|
color: inherit;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.flex-list > .flex-item + .flex-item {
|
|
border-top: 1px solid var(--color-secondary);
|
|
}
|
|
|
|
/* Fomantic UI segment has default "padding: 1em", so here it removes the padding-top and padding-bottom accordingly (there might also be some `gt-hidden` siblings).
|
|
Developers could also use "flex-space-fitted" class to remove the first item's padding-top and the last item's padding-bottom */
|
|
.flex-list.flex-space-fitted > .flex-item:first-child,
|
|
.ui.segment > .flex-list > .flex-item:first-child {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.flex-list.flex-space-fitted > .flex-item:last-child,
|
|
.ui.segment > .flex-list > .flex-item:last-child {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
/* If there is a divider besides the flex-list, some padding/margin are not needs */
|
|
.divider + .flex-list > .flex-item:first-child {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.flex-list + .divider {
|
|
margin-top: 0;
|
|
}
|