/* Copyright 2023 The Chromium Authors
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */
/* Special attribute to hide elements. */
[hidden] {
display: none !important;
}
cr-button {
--active-bg: none; /* prevent dark-mode activation color */
box-shadow: none;
}
/* "chrome-menu" class overrides some standard menu.css styles, to make custom
menus in FileBrowser look like native ChromeOS menus. */
cr-menu.chrome-menu {
background-color: var(--cros-sys-base_elevated);
border-radius: 8px;
box-shadow: var(--cros-elevation-2-shadow);
color: var(--cros-sys-on_surface);
font: var(--cros-button-2-font);
min-width: 208px;
outline: none;
overflow: hidden;
padding: 8px 0;
transition: opacity 200ms ease-in;
z-index: 600; /* Must be below the overlay pane (1000). */
}
cr-menu#gear-menu,
cr-menu#file-context-menu {
min-width: 256px;
}
cr-menu.chrome-menu[hidden] {
display: block !important; /* Overrides default [hidden] for animation. */
opacity: 0;
pointer-events: none;
visibility: hidden;
}
cr-menu.chrome-menu.hide-delayed[hidden] {
transition-delay: 120ms;
transition-property: opacity, visibility;
}
cr-menu.chrome-menu > :not(hr) {
height: 36px;
outline: none;
}
cr-menu.chrome-menu > cr-menu-item[disabled] {
color: var(--cros-sys-disabled);
pointer-events: none;
}
cr-menu.chrome-menu > cr-menu-item#volume-space-info[disabled] {
color: inherit;
pointer-events: none;
}
cr-menu.chrome-menu > cr-menu-item[disabled] > .icon.start {
opacity: 0.20;
}
cr-menu.chrome-menu > hr {
background: var(--cros-sys-separator);
height: 1px;
margin: 8px 0;
}
cr-menu.chrome-menu > hr:first-child {
display: none;
}
cr-menu.chrome-menu > cr-menu-item[checked]::after {
-webkit-mask-image: url(../images/common/ic_selected.svg);
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
background-color: var(--cros-sys-primary);
content: '';
float: right;
height: 20px;
/* Trailing icon has a different padding than its container padding (16px). */
margin-inline-end: calc(12px - 16px);
width: 20px;
}
html[dir='rtl'] cr-menu.chrome-menu > cr-menu-item[checked]::after {
float: left;
}
cr-menu.chrome-menu > cr-menu-item#volume-space-info {
/* Volume info menu item has more contents to show. */
height: auto;
min-height: 36px;
}
cr-menu#file-context-menu.toolbar-menu > .hide-on-toolbar {
display: none;
}
button {
background-color: var(--cros-sys-primary_container);
border: none;
border-radius: 18px;
box-sizing: border-box;
color: var(--cros-sys-on_primary_container);
cursor: pointer;
font: var(--cros-button-2-font);
height: 36px;
margin: 0;
min-height: 36px;
min-width: 5.14em;
outline: none;
padding: 8px 16px;
position: relative;
text-align: center;
user-select: none;
z-index: 0;
}
button > .hover-layer {
border-radius: 18px;
content: '';
display: none;
inset: 0;
pointer-events: none;
position: absolute;
z-index: 1;
}
button > paper-ripple {
--paper-ripple-opacity: 1;
border-radius: 18px;
color: var(--cros-sys-ripple_primary);
}
button:hover > .hover-layer {
display: block;
}
button.cr-dialog-ok,
button.primary {
background-color: var(--cros-sys-primary);
color: var(--cros-sys-on_primary);
}
button.cr-dialog-ok:hover > .hover-layer,
button.primary:hover > .hover-layer {
background-color: var(--cros-sys-hover_on_prominent);
}
button.cr-dialog-cancel:hover > .hover-layer,
button.secondary:hover > .hover-layer {
background-color: var(--cros-sys-hover_on_subtle);
}
button[disabled] {
background-color: var(--cros-sys-disabled_container);
color: var(--cros-sys-disabled);
cursor: default;
pointer-events: none;
}
button[disabled]:hover > .hover-layer {
display: none;
}
:root.focus-outline-visible button:not(:active):focus,
:host-context(:root.focus-outline-visible) button:not(:active):focus {
outline: 2px solid var(--cros-sys-focus_ring);
outline-offset: 2px;
}
.cr-dialog-container .cr-dialog-buttons > button.cr-dialog-ok {
margin-inline-start: 8px;
order: 1;
}
.cr-dialog-container .cr-dialog-buttons > button.cr-dialog-cancel {
order: 0;
}
/* Some files confirm dialogs need to focus their 'Cancel' button by default,
rather than the 'OK' button. The dialog buttons should have focus rings in
this case (regardless of mouse, pointer, keyboard interaction). */
.cr-dialog-container .cr-dialog-frame.files-confirm-dialog-cancel-default
.cr-dialog-buttons > button:not(:active):focus {
outline: 2px solid var(--cros-sys-focus_ring);
outline-offset: 2px;
}
.buttonbar button:not(:first-child) {
margin-inline-start: 8px;
}
.progress-bar {
background-color: var(--cros-sys-highlight_shape);
border-radius: 3px;
height: 6px;
margin-bottom: 6px;
margin-top: 8px;
}
.progress-track {
background-color: var(--cros-sys-primary);
border-radius: 3px;
height: 6px;
min-width: 6px;
}
.menu-warning {
color: var(--cros-sys-error);
font: var(--cros-annotation-2-font);
}
/* Entry names (File names, Folder names, Volume names, ...). */
/* Their base bidi direction should be ltr even in RTL languages. */
html[dir='rtl'] .entry-name {
direction: ltr;
text-align: right; /* csschecker-disable-line left-right */
unicode-bidi: embed;
}
/* Pop-up dialogs. */
.cr-dialog-container.shown {
background-color: var(--cros-sys-scrim);
}
.cr-dialog-container {
display: flex;
height: 100%;
left: 0;
overflow: auto;
position: absolute;
top: 0;
user-select: none;
width: 100%;
z-index: 9999;
}
.cr-dialog-container .cr-dialog-frame {
background-color: var(--cros-sys-dialog_container);
border-radius: 20px;
box-shadow: var(--cros-elevation-3-shadow);
color: var(--cros-sys-on_surface_variant);
cursor: default;
display: flex;
flex-direction: column;
margin: auto;
/* Narrower when viewport is too narrow. */
max-width: min(512px - 32px - 32px, 75vw);
min-width: calc(320px - 32px - 32px);
padding: 32px;
padding-bottom: 28px;
position: relative;
}
.cr-dialog-container .cr-dialog-frame:focus {
outline: none;
}
@keyframes pulse {
0% {
transform: scale(1);
}
40% {
transform: scale(1.02);
}
60% {
transform: scale(1.02);
}
100% {
transform: scale(1);
}
}
.cr-dialog-container.pulse {
animation-duration: 180ms;
animation-iteration-count: 1;
animation-name: pulse;
animation-timing-function: ease-in-out;
}
.cr-dialog-container.shown > .cr-dialog-frame {
opacity: 1;
}
.cr-dialog-container .cr-dialog-frame {
opacity: 0;
transition: opacity 100ms;
}
.cr-dialog-container .cr-dialog-title {
color: var(--cros-sys-on_surface);
display: block;
font: var(--cros-display-7-font);
margin-bottom: 16px;
}
.cr-dialog-container .cr-dialog-text {
font: var(--cros-body-1-font);
}
.cr-dialog-container .cr-dialog-text,
.cr-dialog-container .cr-dialog-title {
overflow-wrap: break-word;
}
.cr-dialog-container .cr-dialog-text {
color: var(--cros-sys-on_surface_variant);
}
.cr-dialog-container .cr-dialog-buttons {
display: flex;
flex-direction: row;
justify-content: flex-end;
padding-top: 32px;
}
.cr-dialog-container .cr-dialog-close {
--hover-bg-color: var(--cros-sys-hover_on_subtle);
--ink-color: var(--cros-sys-ripple_neutral_on_subtle);
--ripple-opacity: 100%;
border: none;
border-radius: 16px;
color: var(--cros-sys-on_surface);
display: none;
height: 32px;
min-width: 32px;
padding: 0;
position: absolute;
right: 16px;
top: 16px;
width: 32px;
}
html.focus-outline-visible .cr-dialog-container
.cr-dialog-close:not(:active):focus {
outline: 2px solid var(--cros-sys-focus_ring);
}
.cr-dialog-container #default-task-dialog .cr-dialog-close {
display: inline-block;
}
.cr-dialog-container .cr-dialog-close > .icon {
-webkit-mask-image: url(../images/common/ic_close.svg);
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 16px;
background-color: currentColor;
height: 32px;
position: absolute;
width: 32px;
}
:root[dir='rtl'] .cr-dialog-container .cr-dialog-close,
:host-context(:root[dir='rtl']) .cr-dialog-container .cr-dialog-close {
left: 16px;
right: unset !important;
}
/* Modal <dialog> container for Pop-up dialogs. */
#files-app-modal-dialog {
background-color: transparent;
border: none;
height: 100%;
margin: 0;
max-height: initial;
max-width: initial;
outline: none;
overflow: hidden;
padding: 0;
width: 100%;
}
/* Minor tweak of vertical position for texts which need to be vertically
* aligned with corresponding file-type icons. */
.tree-row > .label,
.table-row-cell .filename-label,
.table-row-cell .size,
.table-row-cell .type,
.table-row-cell .date,
.thumbnail-bottom .filename-label,
.autocomplete-suggestions > li > .detail-text {
padding-top: 1px;
}
@media (-webkit-min-device-pixel-ratio: 1.5) {
.tree-row > .label,
.table-row-cell .filename-label,
.table-row-cell .size,
.table-row-cell .type,
.table-row-cell .date,
.thumbnail-bottom .filename-label,
.autocomplete-suggestions > li > .detail-text {
/* In HiDPI display, 13pt Roboto font is drawn upper than normal display,
* so add extra padding on top of it. */
padding-top: 3px;
}
}
/* Common typography styles for ChromeOS. */
.button2 {
color: var(--cros-sys-on_surface);
font: var(--cros-button-2-font);
}
.body2-primary {
color: var(--cros-sys-on_surface);
font: var(--cros-body-2-font);
}
Codebase Browser
chromium