mirror of
https://github.com/zotero/zotero.git
synced 2026-09-08 22:21:04 +00:00
b3223dd94b
- Remove the delete button below the style table - Make selected rows stand out less. They will only have an outline, like focused rows. This should remove the impression that this is the table where one selects the style for citations. - Add minus icon buttons to each row to delete the style without having to select the row. The icon of the selected row is focusable, so it can be tabbed onto. - improve labels and appearance of buttons to add a new style - move "Reset Styles…" to "Cite" section and rename to "Restore Default Styles…"
479 lines
8.7 KiB
SCSS
479 lines
8.7 KiB
SCSS
//
|
|
// Virtualized table
|
|
// --------------------------------------------------
|
|
|
|
/**
|
|
<hbox class="virtualized-table-container" flex="1">
|
|
<html:div id="virtualized-table-div"/>
|
|
</hbox>
|
|
*/
|
|
.virtualized-table-container {
|
|
display: flex;
|
|
height: 0;
|
|
flex-direction: column;
|
|
|
|
> div {
|
|
display: flex;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
position: relative;
|
|
background: var(--material-background);
|
|
}
|
|
}
|
|
|
|
.virtualized-table, .drag-image-container {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
&.resizing {
|
|
cursor: col-resize;
|
|
|
|
.cell {
|
|
cursor: col-resize;
|
|
}
|
|
}
|
|
|
|
.cell {
|
|
// NOTE: To avoid the complexities of dealing with padding in the
|
|
// flexbox model, `.cell` padding must be identical in the header and
|
|
// body. See #5198, #5162.
|
|
padding: 0 8px;
|
|
min-width: 30px;
|
|
cursor: default;
|
|
white-space: nowrap;
|
|
flex-grow: 1;
|
|
box-sizing: border-box;
|
|
|
|
&.label {
|
|
padding-inline-start: 0;
|
|
padding-inline-end: 4px;
|
|
}
|
|
|
|
&.first-column {
|
|
padding-inline-start: 0;
|
|
min-width: calc(var(--firstColumnExtraWidth, 0px) + 30px);
|
|
}
|
|
|
|
&.first-column,
|
|
&.primary {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
:not(.cell-text) {
|
|
flex-shrink: 0
|
|
}
|
|
|
|
.cell-text {
|
|
flex-grow: 1;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
|
|
&:not(:first-child) {
|
|
@include state(".cell.first-column:not(.hasAttachment)") {
|
|
margin-inline-start: 4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.twisty + .cell-text, .spacer-twisty + .cell-text {
|
|
margin-inline-start: 0;
|
|
margin-inline-end: 0;
|
|
}
|
|
|
|
// Add margin on the end side if the directionality of the
|
|
// .cell-text is the opposite of that of the table
|
|
&:dir(ltr) .cell-text:dir(rtl),
|
|
&:dir(rtl) .cell-text:dir(ltr) {
|
|
margin-inline-end: 5px;
|
|
}
|
|
|
|
&:dir(ltr) .cell-text {
|
|
text-align: left;
|
|
}
|
|
|
|
&:dir(rtl) .cell-text {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
.cell-icon {
|
|
min-width: 16px;
|
|
}
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
border-radius: 5px;
|
|
|
|
&.drop:not(.flashing) {
|
|
color: var(--material-background) !important;
|
|
background: var(--fill-secondary) !important;
|
|
|
|
* {
|
|
pointer-events: none !important;
|
|
}
|
|
}
|
|
|
|
span.drop-before, span.drop-after {
|
|
position: absolute;
|
|
width: 20%;
|
|
height: 1px;
|
|
background-color: var(--fill-secondary);
|
|
pointer-events: none;
|
|
}
|
|
|
|
span.drop-before {
|
|
top: 0;
|
|
}
|
|
|
|
span.drop-after {
|
|
bottom: -1px;
|
|
}
|
|
|
|
&.selected {
|
|
background-color: var(--color-accent);
|
|
color: var(--color-accent-text);
|
|
|
|
@include state(".virtualized-table:not(:focus-within)") {
|
|
color: var(--fill-primary);
|
|
background-color: var(--color-quarternary-on-sidepane);
|
|
}
|
|
}
|
|
|
|
&.highlighted:not(.selected) {
|
|
background: var(--highlight-color, var(--accent-highlight)) !important;
|
|
}
|
|
|
|
&.unread {
|
|
font-weight: 600;
|
|
}
|
|
|
|
&.context-row:not(.selected) {
|
|
color: var(--fill-secondary);
|
|
}
|
|
|
|
.spacer-twisty {
|
|
display: inline-block;
|
|
min-width: 16px;
|
|
}
|
|
|
|
.twisty {
|
|
margin-inline-end: 0 !important;
|
|
display: flex;
|
|
align-items: center;
|
|
transition: transform 0.125s ease;
|
|
transform: rotate(-90deg);
|
|
|
|
&.open {
|
|
transform: rotate(0deg) !important;
|
|
}
|
|
|
|
&.icon-css {
|
|
width: 16px;
|
|
height: 16px;
|
|
padding: 4px;
|
|
box-sizing: border-box;
|
|
background: url("chrome://zotero/skin/8/universal/chevron-8.svg") content-box no-repeat;
|
|
-moz-context-properties: fill, fill-opacity;
|
|
}
|
|
}
|
|
}
|
|
|
|
.column-drag-marker {
|
|
z-index: 99999;
|
|
position: absolute;
|
|
top: 0;
|
|
height: 100%;
|
|
width: 2px;
|
|
background-color: #ccc;
|
|
}
|
|
|
|
.twisty {
|
|
width: 19px;
|
|
|
|
svg {
|
|
fill: #888;
|
|
width: 16px;
|
|
}
|
|
}
|
|
|
|
.selected:not(.highlighted) .twisty svg {
|
|
fill: #fff;
|
|
}
|
|
|
|
.spacer-twisty {
|
|
min-width: 19px;
|
|
}
|
|
|
|
.spacer-header {
|
|
min-width: 0px;
|
|
}
|
|
}
|
|
|
|
.virtualized-table.multi-select:focus {
|
|
.row.focused {
|
|
border: 1px dotted highlight;
|
|
z-index: 10000;
|
|
|
|
> *:first-child {
|
|
margin-inline-start: -1px;
|
|
}
|
|
|
|
> *:last-child {
|
|
margin-inline-end: -1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.virtualized-table-header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
width: 100%;
|
|
background: var(--material-background);
|
|
height: 1.83333333em; // 22px @ 12px font size
|
|
overflow: hidden;
|
|
border-bottom: 1px solid var(--material-border-quarternary);
|
|
padding-inline: 8px;
|
|
box-sizing: border-box;
|
|
padding-inline-end: calc(8px + var(--scrollbar-width, 0px));
|
|
|
|
@include comfortable {
|
|
height: 2.33333333em; // 28px @ 12px font size
|
|
padding: 0 8px;
|
|
}
|
|
|
|
&.static-columns {
|
|
pointer-events: none;
|
|
.cell {
|
|
&:hover {
|
|
background: inherit;
|
|
}
|
|
}
|
|
[title] {
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
|
|
&::after {
|
|
content: "";
|
|
display: block;
|
|
border-bottom: var(--material-border-quarternary);
|
|
height: 1px;
|
|
width: 100%;
|
|
position: absolute;
|
|
top: calc(1.83333333em - 1px);
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1;
|
|
|
|
@include comfortable {
|
|
top: calc(2.33333333em - 1px);
|
|
}
|
|
}
|
|
|
|
.column-picker {
|
|
text-align: center;
|
|
}
|
|
|
|
.first-column {
|
|
> :first-child {
|
|
// offset header's column label/icon to align with the text in the first column, without introducing padding to the cell itself to avoid flexbox issues
|
|
padding-inline-start: calc(var(--firstColumnExtraWidth, 0px) + 8px);
|
|
}
|
|
}
|
|
|
|
.cell {
|
|
display: flex;
|
|
position: relative;
|
|
height: 100%;
|
|
align-items: center;
|
|
|
|
&:hover {
|
|
background: var(--material-mix-quinary);
|
|
}
|
|
|
|
&.dragging {
|
|
background: var(--material-mix-quarternary);
|
|
}
|
|
|
|
.resizer {
|
|
background: linear-gradient(var(--fill-quarternary), var(--fill-quarternary)) no-repeat center/1px 66.666667%; // 14px @ 12px font size
|
|
cursor: col-resize;
|
|
height: 100%;
|
|
content: "\00a0";
|
|
display: block;
|
|
position: absolute;
|
|
left: -5px;
|
|
min-width: 10px;
|
|
|
|
@include comfortable {
|
|
background-size: 1px 74.074074%; // 20px @ 12px font size
|
|
}
|
|
}
|
|
|
|
.label {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
flex: 1;
|
|
}
|
|
|
|
&.cell-icon {
|
|
> .label {
|
|
margin-inline-start: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.icon-css {
|
|
fill: var(--fill-secondary);
|
|
}
|
|
|
|
padding: 0;
|
|
}
|
|
|
|
.sort-indicator {
|
|
-moz-appearance: toolbarbutton-dropdown;
|
|
display: block;
|
|
margin-right: 3px; // + 5px padding = 8px total
|
|
|
|
&.icon-css {
|
|
background: url("chrome://zotero/skin/8/universal/chevron-8.svg") content-box no-repeat;
|
|
-moz-context-properties: fill, fill-opacity;
|
|
fill: var(--fill-primary);
|
|
}
|
|
|
|
&.ascending {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.virtualized-table-body, .drag-image-container {
|
|
flex: 1 0;
|
|
max-width: 100%;
|
|
overflow: auto;
|
|
padding: 4px 8px 8px;
|
|
|
|
.cell {
|
|
// NOTE: Do not add padding here. See #5198
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
max-height: 100%;
|
|
}
|
|
}
|
|
|
|
.virtualized-table.multi-select:focus {
|
|
.row.focused:not(.selected) {
|
|
outline: var(--default-focusring-width) dotted var(--color-accent);
|
|
z-index: 10000;
|
|
}
|
|
}
|
|
|
|
*[dir=rtl] {
|
|
.virtualized-table-header {
|
|
.cell .sort-indicator {
|
|
left: 3px; // + 5px padding = 8px total
|
|
right: initial;
|
|
}
|
|
|
|
.resizer {
|
|
right: -5px;
|
|
left: initial;
|
|
}
|
|
}
|
|
|
|
.row .twisty {
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
|
|
.virtualized-table.focus-states-target {
|
|
.row .twisty.icon-css {
|
|
@include focus-states using ($color) {
|
|
@if $color =="white" {
|
|
fill: var(--accent-white);
|
|
}
|
|
|
|
@else {
|
|
fill: var(--fill-secondary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.drag-image-container {
|
|
box-sizing: border-box;
|
|
|
|
.row .twisty.icon-css {
|
|
@include focus-states('.row.selected', '.drag-image-container:focus-within') using ($color) {
|
|
fill: var(--fill-secondary);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Styling for clickable button-cells
|
|
.virtualized-table {
|
|
// the cell with the clickable button
|
|
.cell.clickable {
|
|
// make sure the button is centered
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 0;
|
|
|
|
// the actual clickable button
|
|
.icon-action {
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
align-items: center;
|
|
border-radius: 6px;
|
|
.icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
&:hover:not([disabled]) {
|
|
background-color: var(--fill-quinary);
|
|
}
|
|
&:active:not([disabled]) {
|
|
background-color: var(--fill-quarternary);
|
|
}
|
|
&[disabled] {
|
|
color: var(--color-gray-50);
|
|
}
|
|
// show focus ring around the actual icon so that the outline won't overlap with other rows
|
|
&:focus-visible {
|
|
outline: none;
|
|
.icon {
|
|
border-radius: 5px;
|
|
outline: var(--default-focusring-width) solid var(--color-accent);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// lighter hover and active effects on clickable buttons in selected rows
|
|
.row.selected {
|
|
.icon-action {
|
|
&:hover:not([disabled]) {
|
|
background-color: #ffffff1a;
|
|
}
|
|
&:active:not([disabled]) {
|
|
background-color: #ffffff33;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|