mirror of
https://github.com/zed-industries/zed.git
synced 2026-05-23 21:05:08 +00:00
5641ccf250
Adds a consent banner, similar to the one on zed.dev Before you mark this PR as ready for review, make sure that you have: - [x] Added a solid test coverage and/or screenshots from doing manual testing - [x] Done a self-review taking into account security and performance aspects - [x] Aligned any UI changes with the [UI checklist](https://github.com/zed-industries/zed/blob/main/CONTRIBUTING.md#uiux-checklist) Release Notes: - N/A
292 lines
7 KiB
CSS
292 lines
7 KiB
CSS
#c15t-banner {
|
|
--color-offgray-50: hsl(218, 12%, 95%);
|
|
--color-offgray-100: hsl(218, 12%, 88%);
|
|
--color-offgray-200: hsl(218, 12%, 80%);
|
|
--color-offgray-300: hsl(218, 12%, 75%);
|
|
--color-offgray-400: hsl(218, 12%, 64%);
|
|
--color-offgray-500: hsl(218, 12%, 56%);
|
|
--color-offgray-600: hsl(218, 12%, 48%);
|
|
--color-offgray-700: hsl(218, 12%, 40%);
|
|
--color-offgray-800: hsl(218, 12%, 34%);
|
|
--color-offgray-900: hsl(218, 12%, 24%);
|
|
--color-offgray-950: hsl(218, 12%, 15%);
|
|
--color-offgray-1000: hsl(218, 12%, 5%);
|
|
|
|
--color-blue-50: oklch(97% 0.014 254.604);
|
|
--color-blue-100: oklch(93.2% 0.032 255.585);
|
|
--color-blue-200: oklch(88.2% 0.059 254.128);
|
|
--color-blue-300: oklch(80.9% 0.105 251.813);
|
|
--color-blue-400: oklch(70.7% 0.165 254.624);
|
|
--color-blue-500: oklch(62.3% 0.214 259.815);
|
|
--color-blue-600: oklch(54.6% 0.245 262.881);
|
|
--color-blue-700: oklch(48.8% 0.243 264.376);
|
|
--color-blue-800: oklch(42.4% 0.199 265.638);
|
|
--color-blue-900: oklch(37.9% 0.146 265.522);
|
|
--color-blue-950: oklch(28.2% 0.091 267.935);
|
|
|
|
--color-accent-blue: hsla(218, 93%, 42%, 1);
|
|
|
|
position: fixed;
|
|
z-index: 9999;
|
|
bottom: 16px;
|
|
right: 16px;
|
|
border-radius: 4px;
|
|
max-width: 300px;
|
|
background: white;
|
|
border: 1px solid
|
|
color-mix(in oklab, var(--color-offgray-200) 50%, transparent);
|
|
box-shadow: 6px 6px 0
|
|
color-mix(in oklab, var(--color-accent-blue) 6%, transparent);
|
|
}
|
|
|
|
.dark #c15t-banner {
|
|
border-color: color-mix(in oklab, var(--color-offgray-600) 14%, transparent);
|
|
background: var(--color-offgray-1000);
|
|
box-shadow: 5px 5px 0
|
|
color-mix(in oklab, var(--color-accent-blue) 8%, transparent);
|
|
}
|
|
|
|
#c15t-banner > div:first-child {
|
|
padding: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#c15t-banner a {
|
|
color: var(--links);
|
|
text-decoration: underline;
|
|
text-decoration-color: var(--link-line-decoration);
|
|
}
|
|
|
|
#c15t-banner a:hover {
|
|
text-decoration-color: var(--link-line-decoration-hover);
|
|
}
|
|
|
|
#c15t-description {
|
|
font-size: 12px;
|
|
margin: 0;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
#c15t-configure-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
border-top: 1px solid var(--divider);
|
|
padding: 12px;
|
|
}
|
|
|
|
#c15t-configure-section > div {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
#c15t-configure-section label {
|
|
text-transform: uppercase;
|
|
font-size: 11px;
|
|
}
|
|
|
|
#c15t-footer {
|
|
padding: 12px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-top: 1px solid var(--divider);
|
|
background-color: color-mix(
|
|
in oklab,
|
|
var(--color-offgray-50) 50%,
|
|
transparent
|
|
);
|
|
}
|
|
|
|
.dark #c15t-footer {
|
|
background-color: color-mix(
|
|
in oklab,
|
|
var(--color-offgray-600) 4%,
|
|
transparent
|
|
);
|
|
}
|
|
|
|
.c15t-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
max-height: 28px;
|
|
color: black;
|
|
padding: 4px 8px;
|
|
font-size: 14px;
|
|
border-radius: 4px;
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
transition: 100ms;
|
|
transition-property: box-shadow, border-color, background-color;
|
|
}
|
|
|
|
.c15t-button:hover {
|
|
background: color-mix(in oklab, var(--color-offgray-100) 50%, transparent);
|
|
}
|
|
|
|
.dark .c15t-button {
|
|
color: var(--color-offgray-50);
|
|
}
|
|
|
|
.dark .c15t-button:hover {
|
|
background: color-mix(in oklab, var(--color-offgray-500) 10%, transparent);
|
|
}
|
|
|
|
.c15t-button.icon {
|
|
padding: 0;
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.c15t-button.primary {
|
|
color: var(--color-blue-700);
|
|
background: color-mix(in oklab, var(--color-blue-50) 60%, transparent);
|
|
border-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
|
|
box-shadow: color-mix(in oklab, var(--color-blue-400) 10%, transparent) 0 -2px
|
|
0 0 inset;
|
|
}
|
|
|
|
.c15t-button.primary:hover {
|
|
background: color-mix(in oklab, var(--color-blue-100) 50%, transparent);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.dark .c15t-button.primary {
|
|
color: var(--color-blue-50);
|
|
background: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
|
|
border-color: color-mix(in oklab, var(--color-blue-300) 10%, transparent);
|
|
box-shadow: color-mix(in oklab, var(--color-blue-300) 8%, transparent) 0 -2px
|
|
0 0 inset;
|
|
}
|
|
|
|
.dark .c15t-button.primary:hover {
|
|
background: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.c15t-button.secondary {
|
|
background: color-mix(in oklab, var(--color-offgray-50) 60%, transparent);
|
|
border-color: color-mix(in oklab, var(--color-offgray-200) 50%, transparent);
|
|
box-shadow: color-mix(in oklab, var(--color-offgray-500) 10%, transparent)
|
|
0 -2px 0 0 inset;
|
|
}
|
|
|
|
.c15t-button.secondary:hover {
|
|
background: color-mix(in oklab, var(--color-offgray-100) 50%, transparent);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.dark .c15t-button.secondary {
|
|
background: color-mix(in oklab, var(--color-offgray-300) 5%, transparent);
|
|
border-color: color-mix(in oklab, var(--color-offgray-400) 20%, transparent);
|
|
box-shadow: color-mix(in oklab, var(--color-offgray-300) 8%, transparent)
|
|
0 -2px 0 0 inset;
|
|
}
|
|
|
|
.dark .c15t-button.secondary:hover {
|
|
background: color-mix(in oklab, var(--color-offgray-200) 10%, transparent);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.c15t-switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 32px;
|
|
height: 20px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.c15t-switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
position: absolute;
|
|
}
|
|
|
|
.c15t-slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
inset: 0;
|
|
background-color: color-mix(
|
|
in oklab,
|
|
var(--color-offgray-100) 80%,
|
|
transparent
|
|
);
|
|
border-radius: 20px;
|
|
box-shadow: inset 0 0 0 1px color-mix(in oklab, #000 5%, transparent);
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.c15t-slider:hover {
|
|
background-color: var(--color-offgray-100);
|
|
}
|
|
|
|
.dark .c15t-slider {
|
|
background-color: color-mix(in oklab, #fff 5%, transparent);
|
|
box-shadow: inset 0 0 0 1px color-mix(in oklab, #fff 15%, transparent);
|
|
}
|
|
|
|
.dark .c15t-slider:hover {
|
|
background-color: color-mix(in oklab, #fff 10%, transparent);
|
|
}
|
|
|
|
.c15t-slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 14px;
|
|
width: 14px;
|
|
left: 3px;
|
|
bottom: 3px;
|
|
background-color: white;
|
|
border-radius: 50%;
|
|
box-shadow:
|
|
0 1px 3px 0 rgb(0 0 0 / 0.1),
|
|
0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.c15t-switch input:checked + .c15t-slider {
|
|
background-color: var(--color-accent-blue);
|
|
box-shadow: inset 0 0 0 1px color-mix(in oklab, #000 5%, transparent);
|
|
}
|
|
|
|
.c15t-switch input:checked + .c15t-slider:hover {
|
|
background-color: var(--color-accent-blue);
|
|
}
|
|
|
|
.dark .c15t-switch input:checked + .c15t-slider {
|
|
background-color: var(--color-accent-blue);
|
|
box-shadow: inset 0 0 0 1px color-mix(in oklab, #fff 15%, transparent);
|
|
}
|
|
|
|
.c15t-switch input:checked + .c15t-slider:before {
|
|
transform: translateX(12px);
|
|
}
|
|
|
|
.c15t-switch input:disabled + .c15t-slider {
|
|
opacity: 0.5;
|
|
cursor: default;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.c15t-switch input:disabled + .c15t-slider:hover {
|
|
background-color: color-mix(
|
|
in oklab,
|
|
var(--color-offgray-100) 80%,
|
|
transparent
|
|
);
|
|
}
|
|
|
|
#c15t-manage-consent-btn {
|
|
appearance: none;
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#c15t-manage-consent-btn:hover {
|
|
text-decoration-color: var(--link-line-decoration-hover);
|
|
}
|