/* Copyright 2024 The Chromium Authors
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */
/* #css_wrapper_metadata_start
* #type=style-lit
* #import=chrome://resources/cr_elements/cr_hidden_style_lit.css.js
* #import=chrome://resources/cr_elements/cr_icons_lit.css.js
* #scheme=relative
* #include=cr-icons-lit cr-hidden-style-lit
* #css_wrapper_metadata_end */
:host([expanded]) #header {
color: var(--color-new-tab-page-primary-foreground);
font-weight: 500;
overflow: hidden;
}
#header {
box-sizing: border-box;
column-gap: 4px;
color: var(--color-new-tab-page-secondary-foreground);
display: flex;
font-size: var(--ntp-module-text-size);
line-height: var(--ntp-module-line-height);
padding: 4px 16px;
position: relative;
text-decoration: none;
width: 100%;
}
#header #hoverContainer {
background: var(--color-new-tab-page-module-item-background-hovered);
display: none;
height: 100%;
inset: 0;
position: absolute;
width: 100%;
}
#header:hover #hoverContainer {
display: block;
}
:host-context(.focus-outline-visible) #header:focus,
#header:focus-visible {
box-shadow: var(--ntp-focus-shadow);
outline: none;
}
@media (forced-colors: active) {
/* Set outline on focus since box-shadow isn't visible in hcm. */
:host-context(.focus-outline-visible) #header:focus,
#header:focus-visible {
outline: var(--cr-border-hcm);
}
}
#startTime {
display: inline-block;
flex-shrink: 0;
position: relative;
width: 56px;
}
#title {
flex-grow: 1;
overflow: hidden;
position: relative;
text-overflow: ellipsis;
white-space: nowrap;
}
#timeStatus {
background-color: var(
--color-new-tab-page-module-calendar-event-time-status-background);
border-radius: 100px;
color: var(--color-new-tab-page-secondary-foreground);
display: inline-block;
flex-basis: content;
flex-shrink: 0;
font-size: var(--ntp-module-secondary-text-size);
font-weight: 400;
line-height: var(--ntp-module-secondary-line-height);
padding: 2px 8px;
position: relative;
}
.cr-icon {
--cr-icon-color: var(--color-new-tab-page-secondary-foreground);
--cr-icon-size: 18px;
height: 20px;
margin: 0;
width: 20px;
}
#expandedInfo {
padding: 0 16px;
}
#location {
padding: 4px 0;
}
#attachments, #attachmentList, #location {
column-gap: 8px;
display: flex;
width: 100%;
}
#location-icon {
--cr-icon-image: url(modules/v2/calendar/icons/location.svg);
}
#location p {
color: var(--color-new-tab-page-secondary-foreground);
font-size: 12px;
line-height: var(--ntp-module-secondary-line-height);
margin: 0;
overflow: hidden;
padding: 2px 0;
text-overflow: ellipsis;
white-space: nowrap;
}
#attachments {
position: relative;
}
#attachmentList.scrollable-right {
mask-image: linear-gradient(to right, black calc(100% - 16px), transparent 100%);
}
#attachmentList.scrollable-left {
mask-image: linear-gradient(to right, transparent 0, black 16px);
}
#attachmentList.scrollable {
mask-image: linear-gradient(to right, transparent 0, black 16px, black calc(100% - 16px), transparent 100%);
}
#attachmentList {
margin-inline-end: -4px;
overflow-x: auto;
overflow-y: hidden;
padding: 4px;
}
#attachmentList::-webkit-scrollbar {
background: transparent;
height: 8px;
}
#attachmentList::-webkit-scrollbar-thumb {
background: var(--color-new-tab-page-module-calendar-attachment-scrollbar-thumb);
background-clip: content-box;
border: solid 1.5px transparent;
border-radius: 100px;
}
#attachment-icon {
--cr-icon-image: url(modules/v2/calendar/icons/attachment.svg);
margin: 6px -4px 6px 0;
}
#attachments cr-chip {
--cr-chip-color: var(--color-new-tab-page-link);
--cr-chip-border-radius: 100px;
--cr-chip-font-size: var(--ntp-module-secondary-text-size);
--cr-chip-height: 24px;
}
#attachments img {
height: 14px;
width: 14px;
}
.attachment-text {
max-width: 13ch;
overflow: hidden;
text-overflow: ellipsis;
}
#conference {
margin-bottom: 4px;
margin-top: 8px;
}