mirror of
https://github.com/signalapp/Signal-Desktop.git
synced 2026-07-25 23:48:13 +01:00
Jamie
95 lines
3.8 KiB
CSS
95 lines
3.8 KiB
CSS
/**
|
|
* Copyright 2026 Signal Messenger, LLC
|
|
* SPDX-License-Identifier: AGPL-3.0-only
|
|
*/
|
|
|
|
/**
|
|
* Colors
|
|
* ----------------------------------------------------------------------------
|
|
*/
|
|
|
|
/* prettier-ignore */
|
|
@theme {
|
|
--axo-shadow-color-elevation-1: light-dark(--alpha(#000 / 08%), --alpha(#000 / 16%));
|
|
--axo-shadow-color-elevation-2: light-dark(--alpha(#000 / 08%), --alpha(#000 / 16%));
|
|
--axo-shadow-color-elevation-3: light-dark(--alpha(#000 / 10%), --alpha(#000 / 20%));
|
|
--axo-shadow-color-elevation-4: light-dark(--alpha(#000 / 12%), --alpha(#000 / 24%));
|
|
--axo-shadow-color-elevation-5: light-dark(--alpha(#000 / 20%), --alpha(#000 / 40%));
|
|
--axo-shadow-color-outline: light-dark(--alpha(#000 / 12%), transparent);
|
|
--axo-shadow-color-highlight: light-dark(transparent, --alpha(#fff / 08%));
|
|
}
|
|
|
|
/* prettier-ignore */
|
|
@layer theme {
|
|
@media (prefers-contrast: more) {
|
|
:root {
|
|
--axo-shadow-color-outline: light-dark(--alpha(#000 / 32%), transparent);
|
|
--axo-shadow-color-highlight: light-dark(transparent, --alpha(#fff / 32%));
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Presets
|
|
* ----------------------------------------------------------------------------
|
|
*/
|
|
|
|
/* prettier-ignore */
|
|
@theme {
|
|
/* shared shadow styles */
|
|
|
|
--base-shadow-outline:
|
|
inset 0 0 0 0.5px var(--axo-shadow-color-highlight),
|
|
0 0 0 0.5px var(--axo-shadow-color-outline);
|
|
--base-shadow-elevation-0: 0 1px 2px 0 var(--axo-shadow-color-elevation-1);
|
|
--base-shadow-elevation-1: 0 2px 8px 0 var(--axo-shadow-color-elevation-2);
|
|
--base-shadow-elevation-2: 0 4px 12px 0 var(--axo-shadow-color-elevation-3);
|
|
--base-shadow-elevation-3: 0 6px 16px 0 var(--axo-shadow-color-elevation-4);
|
|
--base-shadow-elevation-4: 0 12px 56px 0 var(--axo-shadow-color-elevation-5);
|
|
|
|
/* box-shadow */
|
|
--shadow-*: initial; /* reset defaults */
|
|
/* Note: Use 'shadow-no-outline' to remove the outline/highlight shadows */
|
|
--shadow-elevation-0: var(--axo-shadow-no-outline, var(--base-shadow-outline)), var(--base-shadow-elevation-0);
|
|
--shadow-elevation-1: var(--axo-shadow-no-outline, var(--base-shadow-outline)), var(--base-shadow-elevation-1);
|
|
--shadow-elevation-2: var(--axo-shadow-no-outline, var(--base-shadow-outline)), var(--base-shadow-elevation-2);
|
|
--shadow-elevation-3: var(--axo-shadow-no-outline, var(--base-shadow-outline)), var(--base-shadow-elevation-3);
|
|
--shadow-elevation-4: var(--axo-shadow-no-outline, var(--base-shadow-outline)), var(--base-shadow-elevation-4);
|
|
|
|
/* box-shadow: inset */
|
|
--inset-shadow-*: initial; /* reset defaults */
|
|
--inset-shadow-on-color:
|
|
inset 0 0.5px 1px 0 --alpha(#000 / 12%);
|
|
|
|
/* filter: drop-shadow() */
|
|
--drop-shadow-*: initial; /* reset defaults */
|
|
/* Note: Use 'drop-shadow-no-outline' to remove the outline/highlight shadows */
|
|
--drop-shadow-elevation-0: var(--axo-drop-shadow-no-outline, var(--base-shadow-outline)), var(--shadow-elevation-0);
|
|
--drop-shadow-elevation-1: var(--axo-drop-shadow-no-outline, var(--base-shadow-outline)), var(--shadow-elevation-1);
|
|
--drop-shadow-elevation-2: var(--axo-drop-shadow-no-outline, var(--base-shadow-outline)), var(--shadow-elevation-2);
|
|
--drop-shadow-elevation-3: var(--axo-drop-shadow-no-outline, var(--base-shadow-outline)), var(--shadow-elevation-3);
|
|
--drop-shadow-elevation-4: var(--axo-drop-shadow-no-outline, var(--base-shadow-outline)), var(--shadow-elevation-4);
|
|
}
|
|
|
|
/**
|
|
* Utils
|
|
* ----------------------------------------------------------------------------
|
|
*/
|
|
|
|
@property --axo-shadow-no-outline {
|
|
syntax: '*';
|
|
inherits: false;
|
|
}
|
|
@property --axo-drop-shadow-no-outline {
|
|
syntax: '*';
|
|
inherits: false;
|
|
}
|
|
|
|
@utility shadow-no-outline {
|
|
--axo-shadow-no-outline: 0 0 #0000; /* invisible shadow */
|
|
}
|
|
|
|
@utility drop-shadow-no-outline {
|
|
--axo-drop-shadow-outline: 0 0 #0000; /* invisible shadow */
|
|
}
|