2019-08-15 17:40:13 +00:00
|
|
|
/*
|
|
|
|
* Citizen - Mixins
|
|
|
|
* https://starcitizen.tools
|
2023-06-08 19:44:22 +00:00
|
|
|
*/
|
2019-08-15 17:40:13 +00:00
|
|
|
|
2022-12-01 21:13:25 +00:00
|
|
|
@import 'variables.less';
|
|
|
|
|
2024-07-03 19:40:21 +00:00
|
|
|
.citizen-card(@border-radius: true) {
|
2024-07-03 20:07:08 +00:00
|
|
|
background-color: var( --color-surface-1 );
|
2024-07-15 06:07:25 +00:00
|
|
|
border: var( --border-width-base ) solid var( --border-color-base );
|
2024-07-25 01:53:51 +00:00
|
|
|
box-shadow: var( --box-shadow-drop-xx-large );
|
2021-07-25 23:16:05 +00:00
|
|
|
|
2024-07-03 19:40:21 +00:00
|
|
|
& when (@border-radius ) {
|
2024-07-05 17:24:31 +00:00
|
|
|
border-radius: var( --border-radius-medium );
|
2021-07-25 23:16:05 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-09-29 23:12:56 +00:00
|
|
|
// Header card popups
|
2024-07-03 19:40:21 +00:00
|
|
|
.citizen-header-card(@position ) {
|
2022-09-29 23:12:56 +00:00
|
|
|
position: absolute;
|
|
|
|
right: 0;
|
|
|
|
bottom: 100%;
|
|
|
|
left: 0;
|
2024-07-03 20:07:08 +00:00
|
|
|
max-height: var( --header-card-maxheight );
|
2022-09-29 23:12:56 +00:00
|
|
|
|
2024-07-03 20:07:08 +00:00
|
|
|
@media ( min-width: @min-width-breakpoint-tablet ) {
|
2024-07-03 19:40:21 +00:00
|
|
|
& when (@position =start) {
|
2022-09-30 20:52:13 +00:00
|
|
|
right: unset;
|
|
|
|
}
|
2022-09-29 23:12:56 +00:00
|
|
|
|
2024-07-03 19:40:21 +00:00
|
|
|
& when (@position =end) {
|
2022-09-30 20:52:13 +00:00
|
|
|
left: unset;
|
|
|
|
}
|
2022-09-29 23:12:56 +00:00
|
|
|
}
|
|
|
|
|
2024-07-03 20:07:08 +00:00
|
|
|
@media ( min-width: @min-width-breakpoint-desktop ) {
|
2022-09-30 20:52:13 +00:00
|
|
|
right: unset;
|
|
|
|
left: 100%;
|
2024-07-03 19:40:21 +00:00
|
|
|
|
|
|
|
& when (@position =start) {
|
2022-09-30 20:52:13 +00:00
|
|
|
top: 0;
|
|
|
|
bottom: unset;
|
|
|
|
}
|
2022-09-29 23:12:56 +00:00
|
|
|
|
2024-07-03 19:40:21 +00:00
|
|
|
& when (@position =end) {
|
2022-09-30 20:52:13 +00:00
|
|
|
bottom: 0;
|
|
|
|
}
|
2022-09-29 23:12:56 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-07-19 21:29:17 +00:00
|
|
|
.citizen-sticky-header(@bottomBorder: true, @zIndex: true) {
|
2023-06-28 17:58:21 +00:00
|
|
|
position: -webkit-sticky;
|
2022-11-25 01:14:44 +00:00
|
|
|
position: sticky;
|
2024-07-19 21:29:17 +00:00
|
|
|
top: var( --height-sticky-header );
|
2022-11-25 01:14:44 +00:00
|
|
|
|
2024-07-03 19:40:21 +00:00
|
|
|
& when (@bottomBorder ) {
|
2024-07-25 01:45:12 +00:00
|
|
|
box-shadow: 0 1px 0 0 var( --border-color-base );
|
2022-11-25 01:14:44 +00:00
|
|
|
}
|
|
|
|
|
2024-07-03 19:40:21 +00:00
|
|
|
& when (@zIndex ) {
|
2024-07-09 20:44:15 +00:00
|
|
|
z-index: @z-index-sticky;
|
2022-12-13 02:41:19 +00:00
|
|
|
}
|
|
|
|
|
2022-11-25 01:14:44 +00:00
|
|
|
// HACK: Hide overflow
|
|
|
|
// This has an issue if parent has overflow set
|
2023-02-28 21:59:36 +00:00
|
|
|
&::before {
|
2022-11-25 01:14:44 +00:00
|
|
|
position: absolute;
|
2024-07-19 21:29:17 +00:00
|
|
|
top: 0;
|
2022-11-25 01:14:44 +00:00
|
|
|
right: ~'calc( var(--padding-page ) * -1 )';
|
|
|
|
left: ~'calc( var(--padding-page ) * -1 )';
|
2024-07-09 20:44:15 +00:00
|
|
|
z-index: @z-index-bottom;
|
2022-11-25 01:14:44 +00:00
|
|
|
height: 100%;
|
|
|
|
content: '';
|
2024-07-03 20:07:08 +00:00
|
|
|
background-color: var( --color-surface-0 );
|
|
|
|
filter: opacity( 0.9 );
|
2024-07-08 23:07:25 +00:00
|
|
|
-webkit-backdrop-filter: saturate( 50% ) blur( 16px );
|
2024-07-03 20:07:08 +00:00
|
|
|
backdrop-filter: saturate( 50% ) blur( 16px );
|
2022-11-25 01:14:44 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-08-15 17:40:13 +00:00
|
|
|
// To hide objects, but keep them accessible for screen-readers
|
2024-07-03 18:41:14 +00:00
|
|
|
.sr-only() {
|
2024-07-03 20:07:08 +00:00
|
|
|
position: absolute;
|
|
|
|
width: 1px;
|
2024-07-03 19:40:21 +00:00
|
|
|
height: 1px;
|
|
|
|
overflow: hidden;
|
2024-07-03 20:07:08 +00:00
|
|
|
clip-path: inset( 50% );
|
2024-07-03 19:40:21 +00:00
|
|
|
white-space: nowrap;
|
2019-08-15 17:40:13 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// Set content to be at the center
|
|
|
|
.content-center() {
|
2024-07-03 20:07:08 +00:00
|
|
|
max-width: var( --width-layout );
|
2024-11-08 02:10:30 +00:00
|
|
|
margin-inline: auto;
|
2019-08-15 17:40:13 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.resource-loader-icon() {
|
|
|
|
position: absolute;
|
|
|
|
width: inherit;
|
|
|
|
height: inherit;
|
2021-01-11 16:45:52 +00:00
|
|
|
content: '';
|
2023-07-28 01:19:27 +00:00
|
|
|
background-repeat: no-repeat;
|
|
|
|
background-position: center;
|
2019-08-15 17:40:13 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.resource-loader-menu-icon() {
|
|
|
|
position: absolute;
|
|
|
|
width: @icon-box-size;
|
|
|
|
height: @icon-box-size;
|
2021-01-11 16:45:52 +00:00
|
|
|
content: '';
|
2023-07-28 01:19:27 +00:00
|
|
|
background-repeat: no-repeat;
|
|
|
|
background-position: center;
|
2019-08-15 17:40:13 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.resource-loader-list-icon() {
|
|
|
|
position: relative;
|
2021-01-11 16:45:52 +00:00
|
|
|
flex-shrink: 0;
|
|
|
|
align-self: center;
|
2023-07-28 01:19:27 +00:00
|
|
|
width: @icon-size;
|
|
|
|
height: @icon-size;
|
|
|
|
content: '';
|
2021-01-11 16:45:52 +00:00
|
|
|
background-repeat: no-repeat;
|
2023-07-28 01:19:27 +00:00
|
|
|
background-position: center;
|
2021-01-28 17:59:24 +00:00
|
|
|
background-size: contain;
|
2019-08-15 17:40:13 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// Button Styles
|
2024-07-21 20:39:38 +00:00
|
|
|
.button-progressive() {
|
2024-07-03 20:07:08 +00:00
|
|
|
color: var( --color-inverted-primary ) !important;
|
|
|
|
background-color: var( --color-progressive );
|
2024-06-11 19:48:02 +00:00
|
|
|
|
|
|
|
.citizen-ui-icon::before {
|
2024-07-03 20:07:08 +00:00
|
|
|
filter: var( --filter-invert-primary );
|
2024-06-11 19:48:02 +00:00
|
|
|
opacity: 1;
|
|
|
|
}
|
2019-08-15 17:40:13 +00:00
|
|
|
}
|
|
|
|
|
2024-07-21 20:39:38 +00:00
|
|
|
.button-progressive-hover() {
|
2024-07-03 20:07:08 +00:00
|
|
|
background-color: var( --color-progressive--hover );
|
2021-01-19 20:56:42 +00:00
|
|
|
}
|
|
|
|
|
2024-07-21 20:39:38 +00:00
|
|
|
.button-progressive-active() {
|
2024-07-03 20:07:08 +00:00
|
|
|
background-color: var( --color-progressive--active );
|
2019-08-15 17:40:13 +00:00
|
|
|
}
|
|
|
|
|
2024-07-21 20:39:38 +00:00
|
|
|
.button-destructive() {
|
2024-07-03 20:07:08 +00:00
|
|
|
color: var( --color-inverted-fixed ) !important;
|
|
|
|
background-color: var( --color-destructive );
|
2024-06-11 19:48:02 +00:00
|
|
|
|
|
|
|
.citizen-ui-icon::before {
|
2024-07-03 20:07:08 +00:00
|
|
|
filter: var( --filter-invert-fixed );
|
2024-06-11 19:48:02 +00:00
|
|
|
opacity: 1;
|
|
|
|
}
|
2019-08-15 17:40:13 +00:00
|
|
|
}
|
|
|
|
|
2024-07-21 20:39:38 +00:00
|
|
|
.button-destructive-hover() {
|
2024-07-03 20:07:08 +00:00
|
|
|
background-color: var( --color-destructive--hover );
|
2021-01-19 20:56:42 +00:00
|
|
|
}
|
|
|
|
|
2024-07-21 20:39:38 +00:00
|
|
|
.button-destructive-active() {
|
2024-07-03 20:07:08 +00:00
|
|
|
background-color: var( --color-destructive--active );
|
2019-08-15 17:40:13 +00:00
|
|
|
}
|
2023-06-08 19:44:22 +00:00
|
|
|
|
|
|
|
// Transform black into given color
|
|
|
|
// From https://stackoverflow.com/a/73390109/10624167
|
2024-07-03 19:40:21 +00:00
|
|
|
.recolor(@color ) {
|
|
|
|
@r: red(@color ) / 255;
|
|
|
|
@g: green(@color ) / 255;
|
|
|
|
@b: blue(@color ) / 255;
|
|
|
|
@a: alpha(@color );
|
2023-06-08 19:44:22 +00:00
|
|
|
|
|
|
|
// grayscale fallback if SVG from data url is not supported
|
2024-07-03 19:40:21 +00:00
|
|
|
@lightness: lightness(@color );
|
2024-07-03 20:07:08 +00:00
|
|
|
filter: saturate( 0% ) brightness( 0% ) invert( @lightness ) opacity( @a );
|
2023-06-08 19:44:22 +00:00
|
|
|
|
|
|
|
// color filter
|
|
|
|
@svg-filter-id: "recolor";
|
2024-07-03 20:07:08 +00:00
|
|
|
filter: url( ';data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="@{svg-filter-id}" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 @{r} 0 0 0 0 @{g} 0 0 0 0 @{b} 0 0 0 @{a} 0"/></filter></svg> #@{svg-filter-id}' );
|
|
|
|
}
|