path: root/src/resources/style.css

/* Toolbar */

@keyframes needs_attention_keyframes {
  0% { }
  10% { background-color: var(--accent-bg-color); }
  100% { }
}

.nautilus-progress-indicator.needs-attention > menubutton > button {
  animation: needs_attention_keyframes 2s ease-in-out;
}

.nautilus-progress-indicator menubutton > button listview {
  background: none;
  border-spacing: 9px;
  font-weight: normal;
}

/* Give the button same colors as the rows */
.nautilus-progress-indicator menubutton > button:hover {
  background-color: color-mix(in srgb, var(--sidebar-fg-color) 7%, transparent);
}
.nautilus-progress-indicator menubutton > button:checked {
  background-color: color-mix(in srgb, var(--sidebar-fg-color) 10%, transparent);
}
.nautilus-progress-indicator menubutton > button:checked:hover {
  background-color: color-mix(in srgb, var(--sidebar-fg-color) 13%, transparent);
}

/* Remove white background and highlight on hover which GTK adds by default
 * to GtkListBox. TODO: Switch to GtkListView and drop this CSS hack. */
.operations-list,
.operations-list > :hover {
  background: none;
}

/* Path bar */

.nautilus-pathbar {
  background-color: color-mix(in srgb, currentColor 10%, transparent);
  border-radius: 9px;
}
@media (prefers-contrast: more) {
  .nautilus-pathbar {
    box-shadow: inset 0 0 0 1px var(--border-color);
  }
}

.nautilus-pathbar > menubutton {
  margin: 0px;
}

.nautilus-pathbar > scrolledwindow undershoot.left {
  background: linear-gradient(to right, var(--headerbar-shade-color) 6px, transparent 24px);
  border-left: solid 1px var(--border-color);
}
.nautilus-pathbar > scrolledwindow undershoot.right {
  background: linear-gradient(to left, var(--headerbar-shade-color) 6px, transparent 24px);
  border-right: solid 1px var(--border-color);
}

/* Match sidebar's rounded corners on the "start" side. */
.nautilus-pathbar > scrolledwindow:dir(ltr) undershoot.left {
  border-radius: 9px 0px 0px 9px;
}
.nautilus-pathbar > scrolledwindow:dir(rtl) undershoot.right {
  border-radius: 0px 9px 9px 0px;
}

.nautilus-path-button {
  margin: 3px;
  min-width: 8px;
  border-radius: 7px;
  padding-top: 0px;
  padding-bottom: 0px;
}

.nautilus-path-button:not(:hover),
.nautilus-path-button.current-dir
{
  background: none;
}
@media (prefers-contrast: more) {
  .nautilus-path-button:not(:hover):not(:drop(active)),
  .nautilus-path-button.current-dir:not(:drop(active)) {
    box-shadow: none;
  }
}

.nautilus-path-button:not(.current-dir):not(:backdrop):hover label,
.nautilus-path-button:not(.current-dir):not(:backdrop):hover image {
  opacity: 1;
}

/* Search bar */

.nautilus-query-editor > menubutton > button {
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 0px;
  margin-right: 0px;
  min-width: 24px;
  min-height: 24px;
}

/* Mimic the style of GtkEntry icons, but keep button background if pressed. */
.nautilus-query-editor > menubutton > button:not(:checked) {
  background: none;
}
.nautilus-query-editor > menubutton > button:not(:hover):not(:checked) {
  opacity: 0.7;
}

/* Floating status bar */
.floating-bar {
  padding: 3px;
  background-color: var(--view-bg-color);
  box-shadow: inset 0 100px 0 0 color-mix(in srgb, currentColor 10%, transparent);
  border-radius: 12px;
}

.floating-bar:backdrop {
  background-color: @view_bg_color;
}

.floating-bar button {
  padding: 0px;
}

.disk-space-free {
  color: color-mix(in srgb, currentColor 15%, transparent);
}
.disk-space-used {
  color: var(--accent-bg-color);
}
@media (prefers-contrast: more) {
  .disk-space-free {
    color: color-mix(in srgb, currentColor 30%, transparent);
  }
}

.batch-rename-preview {
  border-top: solid var(--border-color) 1px;
}

.batch-rename-preview listview > row {
  padding: 0;
}

.batch-rename-preview listview > row > * {
  padding: 6px;
}

.conflict-row {
    background: var(--warning-bg-color);
    color: var(--warning-fg-color);
}

/* Grid view */
.nautilus-grid-view gridview {
  padding: 18px;
  border-spacing: 6px;
}

.nautilus-grid-view gridview > child {
  padding: 0px;
  border-radius: 12px;
}
.nautilus-grid-view .nautilus-view-cell {
  padding: 6px;
  border-radius: 12px;
}

/* Column view */

/* Setup padding on the list. Horizontal padding must be set on the columnview
 * for it to calculate column widths correctly. */
.nautilus-network-view listview,
.nautilus-list-view columnview {
  padding-left: 24px;
  padding-right: 24px;
}
.nautilus-network-view listview,
.nautilus-list-view columnview > listview {
  padding-top: 16px;
  padding-bottom: 24px;
  border-spacing: 8px;
}

.nautilus-list-view.compact columnview > listview {
  border-spacing: 4px;
}

/* Use negative margins to extend rubberbanding area into the columnview's
 * padding, then apply positive margin on rows to reestablish positioning. */
.nautilus-list-view columnview > listview {
  margin-left: -24px;
  margin-right: -24px;
}
.nautilus-list-view columnview > listview > row {
  margin-left: 24px;
  margin-right: 24px;
}

.nautilus-network-view listview > row,
.nautilus-list-view columnview > listview > row {
  border-radius: 9px;
}

@media (prefers-contrast: more) {
  .nautilus-list-view columnview > listview > row.activatable:hover,
  .nautilus-grid-view gridview > child.activatable:hover {
    box-shadow: inset 0 0 0 1px var(--border-color);
  }

  .nautilus-list-view columnview > listview > row:selected,
  .nautilus-grid-view gridview > child:selected {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-color) 60%, transparent);
  }
}

/* GTK unconditionally sets padding on GtkColumnViewCell, even with .data-table.
 * We don't want this to hpappen because we have event controllers on the child,
 * which should thus cover the whole area of the row. */
.nautilus-list-view columnview > listview > row > cell {
  padding: 0px;
}


.nautilus-network-view .nautilus-view-cell,
.nautilus-list-view .nautilus-view-cell {
  padding: 6px;
}

/* We want drop feedback on the whole row. Disable per-cell feedback */
.nautilus-list-view .nautilus-view-cell:drop(active) {
  box-shadow: none;
}

.nautilus-list-view.compact .nautilus-view-cell {
  padding-top: 3px;
  padding-bottom: 3px;
}

/* Star button needs to extend beyond its cell, into the padding of the row. */
.nautilus-list-view button.star {
  margin-top: -3px;
  margin-bottom: -3px;
}

.nautilus-list-view.compact button.star {
  min-height: 24px;
  min-width: 24px;
}
.nautilus-list-view menubutton.fts-snippet > button {
  border-radius: 100px;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 12px;
  padding-right: 12px;
}
.nautilus-list-view menubutton.fts-snippet > popover > * {
  padding: 18px;
}

/* Both views */
.nautilus-network-view:drop(active),
.nautilus-list-view:drop(active),
.nautilus-grid-view:drop(active) {
  box-shadow: none;
}

/* Remove the default background of the various view widgets
 * since we already apply a background to the entire content
 * pane with the .view class. Doing this will avoid overdraw. */
.nautilus-network-view listview,
.nautilus-grid-view gridview,
.nautilus-list-view columnview,
placesview list {
  background: none;
}

.image-frame {
  margin: 8px;
  border-radius: 4px;
}

.cutout {
  border-radius: 9999px;
  padding: 2px;
}

.view .nautilus-image {
  filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.3));
}

.view .file-thumbnail,
.nautilus-properties .thumbnail {
  background: url('/org/gnome/nautilus/image/checkerboard.png') repeat;
  border-radius: 2px;
  /* Draw a shin and outline to meld better with full-color icons */
  box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.18),
              0px 0px 0px 1px var(--shade-color),
              0px 2px 0px 0px var(--shade-color);
  /* Disable drop-shadows for thumbnails, box-shadow already covers it */
  filter: none;
}

.nautilus-network-view {
  -gtk-icon-style: symbolic;
}
.nautilus-network-view image.network-icon {
  padding: 8px;
  border-radius: 999999px;
  background-color: color-mix(in srgb, currentColor 10%, transparent);
}

.view .hidden-file {
  opacity: 0.55;
}

/* Starring */
button.star:hover {
  opacity: 1;
}

@keyframes rotate_star {
  from { -gtk-icon-transform: rotate(-72deg); }
  to {}
}
@keyframes rotate_unstar {
  from { -gtk-icon-transform: rotate(72deg); }
  to {}
}

button.star.interacted.starred image {
  animation: rotate_star 0.4s ease;
}
button.star.interacted:not(.starred) image {
  animation: rotate_unstar 0.4s ease;
}

.nautilus-app-chooser treeview {
  min-height: 36px;
  -gtk-icon-size: 32px;
}

rubberband {
  border-radius: 6px;
}

.nautilus-list-view listview,
.nautilus-grid-view gridview,
.nautilus-network-view listview {
  --accent-bg-color: #959595;
  --accent-color: oklab(from var(--accent-bg-color) var(--standalone-color-oklab));
}

.nautilus-file-chooser dropdown.flat-dropdown > button {
  background: none;
}

.nautilus-file-chooser dropdown.flat-dropdown > button:not(:checked):not(:hover):not(:active):not(.keyboard-activating) {
  box-shadow: none;
}

.nautilus-file-chooser dropdown.flat-dropdown > button:hover {
  background: color-mix(in srgb, currentColor 7%, transparent);
}

.nautilus-file-chooser dropdown.flat-dropdown > button:active,
.nautilus-file-chooser dropdown.flat-dropdown > button.keyboard-activating {
  background: color-mix(in srgb, currentColor 16%, transparent);
}

.nautilus-file-chooser dropdown.flat-dropdown > button:checked {
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.nautilus-file-chooser dropdown.flat-dropdown > button:checked:hover {
  background: color-mix(in srgb, currentColor 13%, transparent);
}

.nautilus-file-chooser dropdown.flat-dropdown > button:checked:active,
.nautilus-file-chooser dropdown.flat-dropdown > button:checked.keyboard-activating {
  background: color-mix(in srgb, currentColor 19%, transparent);
}

.toolbar.no-bottom-padding {
  padding-bottom: 0px;
}