background-color: var(--color-main-background);
}
- /**
- * Common row styling. tr are handled by
- * vue-virtual-scroller, so we need to
- * have those rules in here.
- */
tr {
position: absolute;
display: flex;
width: 100%;
border-bottom: 1px solid var(--color-border);
}
+
+ td, th {
+ display: flex;
+ align-items: center;
+ flex: 0 0 auto;
+ justify-content: left;
+ width: var(--row-height);
+ height: var(--row-height);
+ margin: 0;
+ padding: 0;
+ color: var(--color-text-maxcontrast);
+ border: none;
+
+ // Columns should try to add any text
+ // node wrapped in a span. That should help
+ // with the ellipsis on overflow.
+ span {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+ }
+
+ .files-list__row-checkbox {
+ justify-content: center;
+ .checkbox-radio-switch {
+ display: flex;
+ justify-content: center;
+
+ --icon-size: var(--checkbox-size);
+
+ label.checkbox-radio-switch__label {
+ width: var(--clickable-area);
+ height: var(--clickable-area);
+ margin: 0;
+ padding: calc((var(--clickable-area) - var(--checkbox-size)) / 2);
+ }
+
+ .checkbox-radio-switch__icon {
+ margin: 0 !important;
+ }
+ }
+ }
+
+ .files-list__row-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: var(--icon-preview-size);
+ height: 100%;
+ // Show same padding as the checkbox right padding for visual balance
+ margin-right: var(--checkbox-padding);
+ color: var(--color-primary-element);
+
+ & > span {
+ justify-content: flex-start;
+ }
+
+ svg {
+ width: var(--icon-preview-size);
+ height: var(--icon-preview-size);
+ }
+
+ &-preview {
+ overflow: hidden;
+ width: var(--icon-preview-size);
+ height: var(--icon-preview-size);
+ border-radius: var(--border-radius);
+ background-repeat: no-repeat;
+ // Center and contain the preview
+ background-position: center;
+ background-size: contain;
+ }
+ }
+
+ .files-list__row-name {
+ // Prevent link from overflowing
+ overflow: hidden;
+ // Take as much space as possible
+ flex: 1 1 auto;
+
+ a {
+ display: flex;
+ align-items: center;
+ // Fill cell height and width
+ width: 100%;
+ height: 100%;
+
+ // Keyboard indicator a11y
+ &:focus .files-list__row-name-text,
+ &:focus-visible .files-list__row-name-text {
+ outline: 2px solid var(--color-main-text) !important;
+ border-radius: 20px;
+ }
+ }
+
+ .files-list__row-name-text {
+ // Make some space for the outline
+ padding: 5px 10px;
+ margin-left: -10px;
+ }
+ }
+
+ .files-list__row-actions {
+ width: auto;
+
+ // Add margin to all cells after the actions
+ & ~ td,
+ & ~ th {
+ margin: 0 var(--cell-margin);
+ }
+
+ & > button {
+ .button-vue__text {
+ // Remove bold from default button styling
+ font-weight: normal;
+ }
+ &:not(:hover, :focus, :active) .button-vue__wrapper {
+ // Also apply color-text-maxcontrast to non-active button
+ color: var(--color-text-maxcontrast);
+ }
+ }
+ }
+
+ .files-list__row-size {
+ // Right align text
+ justify-content: flex-end;
+ width: calc(var(--row-height) * 1.5);
+ // opacity varies with the size
+ color: var(--color-main-text);
+
+ // Icon is before text since size is right aligned
+ .files-list__column-sort-button {
+ padding: 0 16px 0 4px !important;
+ .button-vue__wrapper {
+ flex-direction: row;
+ }
+ }
+ }
+
+ .files-list__row-column-custom {
+ width: calc(var(--row-height) * 2);
+ }
}
}
+++ /dev/null
-/**
- * @copyright Copyright (c) 2023 John Molakvoæ <skjnldsv@protonmail.com>
- *
- * @author John Molakvoæ <skjnldsv@protonmail.com>
- *
- * @license AGPL-3.0-or-later
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
-
-/**
- * ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠
- * This file is for every column styling that must be
- * shared between BOTH the files list AND the list header.
- * ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠
- */
-td, th {
- display: flex;
- align-items: center;
- flex: 0 0 auto;
- justify-content: left;
- width: var(--row-height);
- height: var(--row-height);
- margin: 0;
- padding: 0;
- color: var(--color-text-maxcontrast);
- border: none;
-
- // Columns should try to add any text
- // node wrapped in a span. That should help
- // with the ellipsis on overflow.
- span {
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
-}
-
-.files-list__row-checkbox {
- justify-content: center;
- &::v-deep .checkbox-radio-switch {
- display: flex;
- justify-content: center;
-
- --icon-size: var(--checkbox-size);
-
- label.checkbox-radio-switch__label {
- width: var(--clickable-area);
- height: var(--clickable-area);
- margin: 0;
- padding: calc((var(--clickable-area) - var(--checkbox-size)) / 2);
- }
-
- .checkbox-radio-switch__icon {
- margin: 0 !important;
- }
- }
-}
-
-.files-list__row-icon {
- display: flex;
- align-items: center;
- justify-content: center;
- width: var(--icon-preview-size);
- height: 100%;
- // Show same padding as the checkbox right padding for visual balance
- margin-right: var(--checkbox-padding);
- color: var(--color-primary-element);
-
- & > span {
- justify-content: flex-start;
- }
-
- &::v-deep svg {
- width: var(--icon-preview-size);
- height: var(--icon-preview-size);
- }
-
- &-preview {
- overflow: hidden;
- width: var(--icon-preview-size);
- height: var(--icon-preview-size);
- border-radius: var(--border-radius);
- background-repeat: no-repeat;
- // Center and contain the preview
- background-position: center;
- background-size: contain;
- }
-}
-
-.files-list__row-name {
- // Prevent link from overflowing
- overflow: hidden;
- // Take as much space as possible
- flex: 1 1 auto;
-
- a {
- display: flex;
- align-items: center;
- // Fill cell height and width
- width: 100%;
- height: 100%;
-
- // Keyboard indicator a11y
- &:focus .files-list__row-name-text,
- &:focus-visible .files-list__row-name-text {
- outline: 2px solid var(--color-main-text) !important;
- border-radius: 20px;
- }
- }
-
- .files-list__row-name-text {
- // Make some space for the outline
- padding: 5px 10px;
- margin-left: -10px;
- }
-}
-
-.files-list__row-actions {
- width: auto;
-
- // Add margin to all cells after the actions
- & ~ td,
- & ~ th {
- margin: 0 var(--cell-margin);
- }
-
- &::v-deep > button {
- .button-vue__text {
- // Remove bold from default button styling
- font-weight: normal;
- }
- &:not(:hover, :focus, :active) .button-vue__wrapper {
- // Also apply color-text-maxcontrast to non-active button
- color: var(--color-text-maxcontrast);
- }
- }
-}
-
-.files-list__row-size {
- // Right align text
- justify-content: flex-end;
- width: calc(var(--row-height) * 1.5);
- // opacity varies with the size
- color: var(--color-main-text);
-
- // Icon is before text since size is right aligned
- ::v-deep .files-list__column-sort-button {
- padding: 0 16px 0 4px !important;
- .button-vue__wrapper {
- flex-direction: row;
- }
- }
-}
-
-.files-list__row-column-custom {
- width: calc(var(--row-height) * 2);
-}
projects / nextcloud-server.git / commitdiff