mirror of
https://github.com/zen-browser/desktop.git
synced 2026-07-30 11:57:47 +00:00
798 lines
17 KiB
CSS
798 lines
17 KiB
CSS
/*
|
|
* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
*/
|
|
/* Screenshots */
|
|
|
|
#screenshotsPagePanel {
|
|
position: absolute !important;
|
|
top: 3%;
|
|
right: 1.5%;
|
|
z-index: 2;
|
|
}
|
|
|
|
#zen-workspaces-button .zen-workspace-sidebar-name {
|
|
margin-left: 10px;
|
|
display: none;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
#customization-footer #customization-toolbar-visibility-button {
|
|
display: none !important;
|
|
}
|
|
|
|
/* stylelint-disable-next-line media-query-no-invalid */
|
|
@media -moz-pref("zen.theme.disable-lightweight") {
|
|
#customization-lwtheme-link {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
.private-browsing-indicator-with-label {
|
|
display: none !important;
|
|
}
|
|
|
|
/* hide Mozilla services from the app menu */
|
|
#PanelUI-fxa-menu-services,
|
|
#PanelUI-fxa-cta-menu {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Bookmarks */
|
|
#PersonalToolbar:not([collapsed]) {
|
|
min-height: 30px;
|
|
}
|
|
|
|
/* Firefox View */
|
|
#firefox-view-button,
|
|
#wrapper-firefox-view-button {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Emojis picker */
|
|
|
|
#PanelUI-zen-emojis-picker {
|
|
--panel-width: 250px;
|
|
--panel-padding: 0px;
|
|
|
|
#PanelUI-zen-emojis-picker-header {
|
|
gap: 10px;
|
|
align-items: center;
|
|
padding: 0 10px;
|
|
padding-bottom: 6px;
|
|
}
|
|
|
|
#PanelUI-zen-emojis-picker-pages {
|
|
overflow: hidden;
|
|
max-height: 230px;
|
|
|
|
& > * {
|
|
min-width: 100%;
|
|
}
|
|
}
|
|
|
|
&[only-svg-icons="true"] {
|
|
& #PanelUI-zen-emojis-picker-change-emojis {
|
|
display: none;
|
|
}
|
|
|
|
& #PanelUI-zen-emojis-picker-change-svg {
|
|
pointer-events: none;
|
|
}
|
|
|
|
& #PanelUI-zen-emojis-picker-pages > vbox[emojis="true"] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&[hide-none-option="true"] {
|
|
& #PanelUI-zen-emojis-picker-none {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
#PanelUI-zen-emojis-picker-none label {
|
|
display: none;
|
|
}
|
|
|
|
#PanelUI-zen-emojis-picker-search {
|
|
padding: 4px;
|
|
width: 100%;
|
|
}
|
|
|
|
#PanelUI-zen-picker-header {
|
|
padding: 6px 16px;
|
|
justify-content: space-between;
|
|
|
|
& > toolbarbutton:first-of-type {
|
|
pointer-events: none;
|
|
}
|
|
|
|
& #PanelUI-zen-emojis-buttons-wrapper {
|
|
gap: 4px;
|
|
|
|
& toolbarbutton {
|
|
appearance: none;
|
|
font-size: small;
|
|
padding: 0 6px;
|
|
border-radius: 4px;
|
|
font-weight: 600;
|
|
|
|
&:hover {
|
|
background-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
|
|
}
|
|
|
|
&.selected {
|
|
background-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#PanelUI-zen-emojis-picker-list,
|
|
#PanelUI-zen-emojis-picker-svgs {
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
width: 100%;
|
|
|
|
padding: 10px;
|
|
padding-top: 5px;
|
|
|
|
gap: 5px;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));
|
|
|
|
.zen-emojis-picker-emoji {
|
|
font-size: 14px;
|
|
padding: 0 !important;
|
|
& image {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.zen-emojis-picker-svg {
|
|
padding: 4px !important;
|
|
& label {
|
|
display: none;
|
|
}
|
|
|
|
& .toolbarbutton-icon {
|
|
width: 22px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.zen-emojis-picker-emoji,
|
|
.zen-emojis-picker-svg,
|
|
#PanelUI-zen-emojis-picker-none {
|
|
width: 22px;
|
|
height: 22px;
|
|
appearance: none;
|
|
transition: opacity 0.08s ease-in-out;
|
|
|
|
&:hover {
|
|
background-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
.toolbarbutton-1:not(#tabs-newtab-button),
|
|
.urlbar-page-action,
|
|
.identity-box-button {
|
|
--tab-border-radius: 6px;
|
|
--toolbarbutton-border-radius: var(--tab-border-radius);
|
|
--toolbarbutton-inner-padding: 6px;
|
|
--toolbarbutton-outer-padding: 1px;
|
|
--toolbarbutton-icon-fill: color-mix(in srgb, currentColor 70%, transparent);
|
|
|
|
transition:
|
|
background-color 0.1s,
|
|
transform 0.2s;
|
|
|
|
&[open="true"] {
|
|
transition: background-color 0.1s;
|
|
}
|
|
|
|
&:not([open="true"]):active:hover {
|
|
transform: scale(0.95);
|
|
}
|
|
}
|
|
|
|
.zen-interactive-button {
|
|
background: color-mix(in srgb, currentColor 6%, transparent) !important;
|
|
transition:
|
|
background-color 0.12s ease-in-out,
|
|
transform 0.12s ease-in-out;
|
|
|
|
&:hover {
|
|
background-color: color-mix(in srgb, currentColor 10%, transparent) !important;
|
|
}
|
|
|
|
&:active:hover {
|
|
transform: scale(0.95);
|
|
}
|
|
}
|
|
|
|
/** Update animation */
|
|
|
|
#zen-update-animation {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5) 40%, rgba(255, 255, 255, 0.5) 60%, transparent 100%);
|
|
left: 0;
|
|
z-index: 999;
|
|
opacity: 0;
|
|
transform: translateY(-50%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
#zen-update-animation-border {
|
|
position: absolute;
|
|
border-radius: var(--zen-border-radius);
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#zen-update-animation-border::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
padding: 2px; /* thickness of border */
|
|
|
|
background: radial-gradient(ellipse 100% 50% at center var(--background-top), rgba(255, 255, 255, 0.5) 80%, transparent);
|
|
|
|
/* Punch out the inside once (not animated) */
|
|
mask:
|
|
linear-gradient(#fff 0 0) content-box,
|
|
linear-gradient(#fff 0 0);
|
|
mask-composite: exclude;
|
|
}
|
|
|
|
#TabsToolbar {
|
|
gap: var(--zen-toolbox-padding);
|
|
-moz-window-dragging: unset;
|
|
}
|
|
|
|
/* Status panel */
|
|
|
|
/* stylelint-disable-next-line media-query-no-invalid */
|
|
@media (-moz-pref("zen.theme.styled-status-panel")) {
|
|
#statuspanel {
|
|
padding: 6px;
|
|
|
|
& > #statuspanel-label {
|
|
border-radius: 16px !important;
|
|
border: 1px solid rgba(225, 225, 225, 0.15) !important;
|
|
padding: 4px 8px 5px 8px !important;
|
|
font-weight: 600 !important;
|
|
background: color-mix(in srgb, var(--zen-primary-color), black 70%) !important;
|
|
color: rgba(255, 255, 255, 0.8) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Customizable modes */
|
|
#customization-container {
|
|
--toolbar-bgcolor: var(--arrowpanel-background);
|
|
}
|
|
|
|
/* Site Data popup */
|
|
|
|
#zen-unified-site-data-panel {
|
|
--panel-padding: 0px;
|
|
--panel-width: 234px;
|
|
--menu-panel-width-wide: calc(var(--panel-width) - var(--panel-padding) * 2);
|
|
--uei-icon-size: 16px;
|
|
--arrowpanel-menuitem-border-radius: 10px;
|
|
}
|
|
|
|
#unified-extensions-empty-state,
|
|
#unified-extensions-discover-extensions {
|
|
display: none !important;
|
|
}
|
|
|
|
#zen-site-data-addons {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
overflow: visible;
|
|
flex-direction: row;
|
|
|
|
unified-extensions-item-messagebar-wrapper,
|
|
.unified-extensions-item-contents {
|
|
display: none !important;
|
|
}
|
|
|
|
&[overflowing="true"] {
|
|
overflow-x: auto;
|
|
max-height: 420px;
|
|
mask-image: linear-gradient(to top, transparent, black 5%);
|
|
}
|
|
|
|
.unified-extensions-item-name,
|
|
.unified-extensions-item-message,
|
|
.unified-extensions-item-message-hover,
|
|
.unified-extensions-item-message-hover-menu-button,
|
|
.unified-extensions-item-menu-button {
|
|
display: none;
|
|
}
|
|
|
|
#overflowed-extensions-list,
|
|
#unified-extensions-area,
|
|
.unified-extensions-list,
|
|
#zen-site-data-new-addon-button-container {
|
|
display: contents;
|
|
|
|
&:empty {
|
|
display: none;
|
|
}
|
|
|
|
& > * {
|
|
background-color: color-mix(in srgb, currentcolor 6%, transparent);
|
|
width: var(--size-item-xlarge);
|
|
height: var(--size-item-large);
|
|
margin: 0;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 6px;
|
|
|
|
@media not (-moz-platform: macos) {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
transition:
|
|
background-color 0.1s ease-in-out,
|
|
transform 0.12s ease-in-out;
|
|
|
|
& toolbarbutton {
|
|
background: transparent !important;
|
|
}
|
|
|
|
& .toolbarbutton-badge-stack {
|
|
margin: 0;
|
|
}
|
|
|
|
&:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
&:active:hover {
|
|
transform: scale(0.95);
|
|
background-color: color-mix(in srgb, currentcolor 10%, transparent);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.zen-site-data-section {
|
|
gap: 2px;
|
|
padding: 9px;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.zen-site-data-section-header {
|
|
font-weight: 600;
|
|
font-size: 12px;
|
|
|
|
& label {
|
|
margin: 0;
|
|
}
|
|
|
|
& > label:nth-child(2) {
|
|
font-weight: 500;
|
|
font-size: smaller;
|
|
transition: opacity 0.15s ease-in-out;
|
|
opacity: 0;
|
|
border-radius: 6px;
|
|
padding: 2px 6px;
|
|
|
|
&:hover {
|
|
background-color: color-mix(in srgb, currentColor 10%, transparent);
|
|
}
|
|
|
|
.zen-site-data-section:hover & {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
}
|
|
|
|
#zen-site-data-new-addon-button .toolbarbutton-text {
|
|
display: none;
|
|
}
|
|
|
|
.zen-permission-popup-boost-editor-button {
|
|
transition:
|
|
0.2s opacity ease,
|
|
0.2s background-color ease,
|
|
0.2s transform ease;
|
|
opacity: 0;
|
|
|
|
width: 30px;
|
|
height: 26px;
|
|
min-width: 30px;
|
|
appearance: none;
|
|
background: transparent;
|
|
border: none;
|
|
|
|
border-radius: 8px;
|
|
transform: scale(1);
|
|
|
|
-moz-context-properties: fill;
|
|
fill: white;
|
|
|
|
&:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
& image {
|
|
opacity: 0.6;
|
|
height: 14px;
|
|
width: calc(100% - 2px);
|
|
}
|
|
}
|
|
|
|
.permission-popup-boost-item:hover .zen-permission-popup-boost-editor-button {
|
|
opacity: 1;
|
|
|
|
&.zen-permission-popup-boost-editor-button:hover {
|
|
background-color: var(--button-background-color-ghost-hover);
|
|
}
|
|
}
|
|
|
|
.permission-popup-permission-item,
|
|
.permission-popup-boost-item {
|
|
gap: 8px;
|
|
overflow: hidden;
|
|
align-items: center;
|
|
}
|
|
|
|
.permission-popup-permission-label-container,
|
|
.permission-popup-boost-label-container {
|
|
min-width: 1px;
|
|
}
|
|
|
|
.permission-popup-permission-label,
|
|
.permission-popup-boost-label {
|
|
margin: 0;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.permission-popup-permission-icon,
|
|
.permission-popup-boost-icon {
|
|
fill: var(--button-primary-color);
|
|
padding: 8px;
|
|
width: 34px;
|
|
height: 34px;
|
|
overflow: visible;
|
|
position: relative;
|
|
appearance: none;
|
|
|
|
& label {
|
|
display: none;
|
|
}
|
|
|
|
& image {
|
|
-moz-context-properties: fill;
|
|
z-index: 1;
|
|
}
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 1px;
|
|
border-radius: 99px;
|
|
width: var(--size-item-large);
|
|
height: var(--size-item-large);
|
|
background: var(--zen-sidebar-themed-icon-fill);
|
|
opacity: 0.6;
|
|
transition:
|
|
transform 0.12s ease-in-out,
|
|
opacity 0.12s ease-in-out;
|
|
}
|
|
|
|
.permission-popup-permission-item:hover &::before,
|
|
.permission-popup-boost-item:hover:not(:has(.zen-permission-popup-boost-editor-button:hover)) &::before {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.permission-popup-permission-item:active:hover &::before,
|
|
.permission-popup-boost-item:active:hover:not(:has(.zen-permission-popup-boost-editor-button:hover)) &::before {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.permission-popup-permission-item[state="allow"] &::before,
|
|
.permission-popup-boost-item[state="enabled"] &::before {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.zen-permission-popup-permission-state-label,
|
|
.zen-permission-popup-boost-state-label {
|
|
opacity: 0.6;
|
|
font-size: smaller;
|
|
font-weight: 400;
|
|
margin: 0;
|
|
}
|
|
|
|
#identity-box,
|
|
#page-action-buttons {
|
|
fill-opacity: 0.6;
|
|
}
|
|
|
|
#zen-site-data-footer {
|
|
border-top: 1px solid color-mix(in srgb, currentColor 6%, transparent);
|
|
padding-top: 8px;
|
|
margin: 2px 8px 8px 8px;
|
|
|
|
gap: 8px;
|
|
|
|
& toolbarbutton {
|
|
margin: 0;
|
|
|
|
&[disabled] {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* stylelint-disable-next-line media-query-no-invalid */
|
|
@media -moz-pref("zen.theme.hide-unified-extensions-button") {
|
|
#unified-extensions-button:not([showing]) {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
/* stylelint-disable-next-line media-query-no-invalid */
|
|
@media not -moz-pref("zen.theme.hide-unified-extensions-button") {
|
|
#zen-site-data-section-addons {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
#zen-site-data-header {
|
|
gap: 8px;
|
|
align-items: center;
|
|
padding: 10px 9px;
|
|
padding-bottom: 8px;
|
|
|
|
:root[zen-single-toolbar="true"]:not([zen-right-side="true"]) & {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
& toolbarbutton {
|
|
margin: 0;
|
|
appearance: none;
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
color: light-dark(rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.8));
|
|
width: var(--size-item-xlarge);
|
|
height: var(--size-item-large);
|
|
position: relative;
|
|
|
|
&[disabled] {
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
}
|
|
|
|
& .toolbarbutton-text {
|
|
display: none;
|
|
}
|
|
|
|
& image {
|
|
width: 18px;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
@media (-moz-platform: macos) {
|
|
background: linear-gradient(to bottom, light-dark(rgb(255, 255, 255), rgb(34, 34, 34)), light-dark(rgb(246, 246, 246), rgb(21, 21, 21)));
|
|
|
|
box-shadow:
|
|
0 1px 2px rgba(0, 0, 0, 0.1),
|
|
inset 0 1px 0 light-dark(transparent, rgba(255, 255, 255, 0.15));
|
|
border-radius: 6px;
|
|
--base-border-color: light-dark(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.1));
|
|
border: 0.5px solid light-dark(var(--base-border-color), rgb(21, 21, 21));
|
|
}
|
|
|
|
@media not (-moz-platform: macos) {
|
|
border-radius: 4px;
|
|
background-color: color-mix(in srgb, currentcolor 6%, transparent);
|
|
}
|
|
|
|
transition: transform 0.12s ease-in-out;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
&.active {
|
|
color: var(--button-primary-color);
|
|
|
|
&::before {
|
|
background: var(--zen-sidebar-themed-icon-fill);
|
|
}
|
|
}
|
|
|
|
&:hover::before {
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
&:active:hover::before {
|
|
transform: scale(0.97);
|
|
}
|
|
}
|
|
}
|
|
|
|
#zen-site-data-settings-list toolbarseparator,
|
|
#zen-site-data-boost-list toolbarseparator {
|
|
margin: 6px 0;
|
|
}
|
|
|
|
#unified-extensions-messages-container:empty {
|
|
display: none;
|
|
}
|
|
|
|
/* Overflow panel */
|
|
#widget-overflow-mainView {
|
|
--menu-panel-width-wide: 200px;
|
|
|
|
& toolbarbutton {
|
|
scale: 1 !important;
|
|
}
|
|
|
|
& .panel-subview-body {
|
|
padding: var(--panel-subview-body-padding) !important;
|
|
}
|
|
}
|
|
|
|
#widget-overflow-mainView > toolbarseparator,
|
|
#overflowMenu-customize-button {
|
|
display: none;
|
|
}
|
|
|
|
#widget-overflow-list {
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
/* Contextual new tab popup menu */
|
|
#navigator-toolbox #titlebar #TabsToolbar #tabs-newtab-button > .new-tab-popup > menuitem {
|
|
& > :is(.menu-highlightable-text, .menu-accel) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Sidebar notification */
|
|
:root:not([zen-sidebar-expanded="true"]) zen-sidebar-notification {
|
|
display: none;
|
|
}
|
|
|
|
/* Feature allouts */
|
|
#feature-callout {
|
|
#mainContentHeader {
|
|
--special-color: color-mix(in srgb, light-dark(white, black), currentColor 50%);
|
|
--specia-color-2: color-mix(in srgb, light-dark(white, black), currentColor 90%);
|
|
background: linear-gradient(135deg, var(--specia-color-2), var(--special-color), var(--specia-color-2));
|
|
background-size: 400%;
|
|
background-clip: text;
|
|
/* Still works on firefox */
|
|
-webkit-text-fill-color: transparent;
|
|
animation: zen-text-gradient 5s linear infinite;
|
|
font-size: initial;
|
|
}
|
|
|
|
#mainContentSubheader {
|
|
text-wrap: balance;
|
|
}
|
|
|
|
#multi-stage-message-welcome-text {
|
|
gap: 4px;
|
|
}
|
|
}
|
|
|
|
|
|
/* Notification Stack */
|
|
|
|
.notificationbox-stack {
|
|
background: transparent;
|
|
|
|
&[notificationside="top"] {
|
|
position: fixed;
|
|
bottom: calc(var(--zen-element-separation) * 1.5);
|
|
right: calc(var(--zen-element-separation) * 1.5);
|
|
|
|
:root[zen-right-side="true"] & {
|
|
right: auto;
|
|
left: calc(var(--zen-element-separation) * 1.5);
|
|
}
|
|
|
|
width: fit-content;
|
|
max-width: 30rem !important;
|
|
z-index: 9999;
|
|
|
|
& notification-message {
|
|
background: color-mix(in srgb, var(--zen-colors-tertiary) 70%, transparent 30%);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid var(--arrowpanel-border-color);
|
|
border-radius: var(--zen-border-radius);
|
|
|
|
&::before {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Loading progress bar */
|
|
#zen-loading-progress-bar {
|
|
--zen-loading-progress-bar-color: color-mix(in srgb, var(--zen-primary-color), light-dark(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5)) 70%);
|
|
|
|
position: fixed;
|
|
top: calc(var(--zen-element-separation) / -2);
|
|
|
|
/* Minimum -2px, but if its larger, elemenet separation / -2 will be used as top offset, to avoid overlapping with the notification stack */
|
|
:root:is([zen-no-padding="true"], [inDOMFullscreen="true"], :not([zen-single-toolbar="true"])) & {
|
|
top: 4px;
|
|
}
|
|
|
|
left: 50%;
|
|
transform: translate(-50%, -50%) scale(0);
|
|
background: var(--zen-loading-progress-bar-color);
|
|
height: .4rem;
|
|
width: 5rem;
|
|
z-index: 9;
|
|
border-radius: 100px;
|
|
transition: opacity .3s ease-in-out,
|
|
background-color .3s ease-in-out,
|
|
transform .3s ease-in-out;
|
|
overflow: clip;
|
|
pointer-events: none;
|
|
animation: zen-progress-bar-pulse 1s ease-in-out infinite forwards;
|
|
animation-direction: alternate;
|
|
transform-origin: 0 0;
|
|
contain: content;
|
|
|
|
&[long-load="true"] {
|
|
opacity: 1;
|
|
animation: zen-progress-bar-settle .3s ease-out forwards;
|
|
background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
height: 100%;
|
|
width: 75%;
|
|
opacity: 0;
|
|
animation: zen-progress-bar-long-load 1s ease-in-out infinite;
|
|
animation-delay: 0.3s;
|
|
background: var(--zen-loading-progress-bar-color);
|
|
border-radius: inherit;
|
|
}
|
|
}
|
|
|
|
/* stylelint-disable-next-line media-query-no-invalid */
|
|
@media not -moz-pref("zen.view.enable-loading-indicator") {
|
|
display: none;
|
|
}
|
|
|
|
:root[inDOMFullscreen="true"] & {
|
|
display: none;
|
|
}
|
|
}
|