mirror of
https://github.com/zen-browser/desktop.git
synced 2026-09-18 18:54:43 +00:00
130 lines
3.5 KiB
CSS
130 lines
3.5 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/.
|
|
*/
|
|
|
|
@namespace html "http://www.w3.org/1999/xhtml";
|
|
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
|
|
|
|
/** This file is used to override UI inside "common-shared.css" */
|
|
|
|
/** These types of buttons look INSAINELY bad in the preferences page */
|
|
xul|button {
|
|
--size-item-large: 34px;
|
|
|
|
padding: var(--zen-button-padding) !important;
|
|
transition: 0.1s;
|
|
}
|
|
|
|
dialog::part(dialog-button) {
|
|
--button-background-color: light-dark(rgba(28, 28, 28, 0.1), rgba(255, 255, 255, .1)) !important;
|
|
--button-background-color-hover: color-mix(in srgb, var(--button-background-color) 90%, transparent);
|
|
--button-background-color-active: color-mix(in srgb, var(--button-background-color) 80%, transparent);
|
|
--button-background-color-primary: light-dark(#1c1c1c, #dddddd);
|
|
--button-background-color-primary-hover: color-mix(in srgb, var(--button-background-color-primary) 95%, transparent);
|
|
--button-background-color-primary-active: color-mix(in srgb, var(--button-background-color-primary) 90%, transparent);
|
|
|
|
position: relative;
|
|
border: none;
|
|
border-radius: calc(10px * var(--zen-squircle-value));
|
|
}
|
|
|
|
@media (-moz-platform: macos) {
|
|
dialog[defaultButton="accept"]::part(dialog-button) {
|
|
&:is([dlgtype="accept"], [dlgtype="cancel"]) {
|
|
padding-inline-end: 3.7em;
|
|
|
|
&::after {
|
|
border-radius: 4px;
|
|
font-weight: 600;
|
|
position: absolute;
|
|
padding: 3px 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
text-align: center;
|
|
}
|
|
|
|
&[dlgtype="accept"]::after {
|
|
content: "⏎";
|
|
right: 0.6em;
|
|
font-size: 12px;
|
|
width: 36px;
|
|
color: light-dark(rgba(255, 255, 255, 0.80), rgba(0, 0, 0, 0.60));
|
|
}
|
|
|
|
&[dlgtype="cancel"]::after {
|
|
content: "ESC";
|
|
right: 1em;
|
|
font-size: 8px;
|
|
width: 30px;
|
|
color: light-dark(rgba(28, 28, 28, 0.7), rgba(255, 255, 255, 0.6)) !important;
|
|
outline: 1px solid light-dark(rgba(28, 28, 28, 0.1), rgba(255, 255, 255, 0.1)) !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
xul|button:not(#zen-workspaces-button):active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.footer-button,
|
|
dialog::part(dialog-button) {
|
|
font-weight: 500 !important;
|
|
|
|
transition: scale 0.2s;
|
|
&:active {
|
|
scale: 0.98;
|
|
}
|
|
}
|
|
|
|
:root {
|
|
--zen-accent-button-color: light-dark(
|
|
oklch(from var(--zen-primary-color) clamp(0.35, l, 0.6) c h),
|
|
oklch(from var(--zen-primary-color) clamp(0.7, l, 0.85) c h)
|
|
);
|
|
--zen-accent-button-background: light-dark(
|
|
oklch(from var(--zen-primary-color) clamp(0.35, l, 0.6) c h),
|
|
oklch(from var(--zen-primary-color) clamp(0.55, l, 0.7) c h)
|
|
);
|
|
}
|
|
|
|
.zen-big-accent-button {
|
|
appearance: none;
|
|
border: none;
|
|
border-radius: 12px;
|
|
padding: 1.2rem 1rem;
|
|
background: transparent;
|
|
color: var(--zen-accent-button-color);
|
|
font: inherit;
|
|
font-size: 1.2rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
will-change: transform;
|
|
transition: scale 0.15s ease-out;
|
|
|
|
&:hover {
|
|
scale: 1.03;
|
|
filter: brightness(1.1);
|
|
}
|
|
|
|
&:active:hover {
|
|
scale: 1;
|
|
color: color-mix(in srgb, var(--zen-accent-button-color) 80%, transparent);
|
|
}
|
|
|
|
&.primary {
|
|
background: var(--zen-accent-button-background);
|
|
color: white;
|
|
|
|
&:hover {
|
|
filter: brightness(1.1);
|
|
}
|
|
|
|
&:active:hover {
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
}
|
|
}
|