a6076ce76c
* Improve feed item pane header (fixes #4141) * Show item pane custom head when headerMode is none (fixes #4116) * fx115: Fix button style on windows (fixes #4120) * Move split-menu-button styles to SCSS
128 lines
2.1 KiB
SCSS
128 lines
2.1 KiB
SCSS
item-pane-header {
|
|
&:not([hidden]) {
|
|
display: flex;
|
|
}
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
padding: 8px;
|
|
border-bottom: 1px solid var(--fill-quinary);
|
|
|
|
max-height: 25%;
|
|
overflow-y: auto;
|
|
scrollbar-color: var(--color-scrollbar) var(--color-scrollbar-background);
|
|
|
|
.head-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
@include compact {
|
|
gap: 4px;
|
|
}
|
|
|
|
@include comfortable {
|
|
gap: 8px;
|
|
}
|
|
|
|
.title-head {
|
|
align-self: stretch;
|
|
|
|
.title {
|
|
margin-top: calc(0px - var(--editable-text-padding-block));
|
|
flex: 1 1 0;
|
|
font-weight: 600;
|
|
line-height: 1.333;
|
|
|
|
editable-text {
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
.creator-year {
|
|
color: var(--fill-secondary);
|
|
}
|
|
|
|
.bib-entry {
|
|
line-height: 1.5;
|
|
|
|
&.loading {
|
|
color: var(--fill-secondary);
|
|
}
|
|
}
|
|
|
|
.creator-year, .bib-entry {
|
|
// Set padding to match editable-text in tight mode, plus 1px for border
|
|
padding-inline: calc(var(--editable-text-tight-padding-inline) + 1px);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
}
|
|
|
|
.custom-head {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-self: stretch;
|
|
gap: 8px;
|
|
|
|
@media (-moz-platform: macos) {
|
|
// The extent of the button is about 2px wider than its optical width
|
|
// need to compensate for that
|
|
gap: 4px;
|
|
}
|
|
|
|
&:empty {
|
|
display: none;
|
|
}
|
|
|
|
button {
|
|
// Allow the button to grow/shrink to fit the container
|
|
width: 0;
|
|
margin: 0;
|
|
flex-grow: 1;
|
|
|
|
padding: 2px 6px;
|
|
|
|
@media (-moz-platform: macos) {
|
|
height: 24px;
|
|
padding: 3px 0px 1px 0px;
|
|
|
|
&:is(.split-menu-button) {
|
|
padding: 3px 2px 1px 3px;
|
|
}
|
|
}
|
|
|
|
.button-text {
|
|
width: 0;
|
|
flex-grow: 1;
|
|
justify-content: center;
|
|
|
|
&::before {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
&:is(.no-shrink-button) {
|
|
width: auto;
|
|
flex-shrink: 0;
|
|
|
|
.button-text {
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.no-title-head {
|
|
&:not(.has-custom-head) {
|
|
padding: 0;
|
|
border: none;
|
|
}
|
|
|
|
.title-head {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|