Theaninova/openstapps
1
0
Fork 0
mirror of https://gitlab.com/openstapps/openstapps.git synced 2026-01-07 22:12:53 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: dark theme

Browse Source
This commit is contained in:
Thea Schöbl
2023-03-22 17:44:40 +00:00
committed by Rainer Killinger
parent 23bd5a431c
commit e75a46633c
62 changed files with 688 additions and 339 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/app/app.component.html
View File

@@ -1,3 +1,18 @@
<!--
~ Copyright (C) 2023 StApps
~ This program is free software: you can redistribute it and/or modify it
~ under the terms of the GNU General Public License as published by the Free
~ Software Foundation, version 3.
~
~ This program is distributed in the hope that it will be useful, but WITHOUT
~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
~ more details.
~
~ You should have received a copy of the GNU General Public License along with
~ this program. If not, see <https://www.gnu.org/licenses/>.
-->
<ion-app style="margin-top: env(safe-area-inset-top)">
<stapps-navigation></stapps-navigation>
</ion-app>

2
src/app/modules/about/about-licenses.scss
View File

@@ -22,7 +22,7 @@ cdk-virtual-scroll-viewport {
width: 100%;
}
::ng-deep {
:host ::ng-deep {
.cdk-virtual-scroll-content-wrapper {
width: 100%;
}

4
src/app/modules/about/about-page/about-page-content.html
View File

@@ -1,5 +1,5 @@
<!--
~ Copyright (C) 2022 StApps
~ Copyright (C) 2023 StApps
~ This program is free software: you can redistribute it and/or modify it
~ under the terms of the GNU General Public License as published by the Free
~ Software Foundation, version 3.
@@ -36,7 +36,7 @@
</ion-col>
</ion-row>
</ion-grid>
<ion-item *ngSwitchCase="'router link'" [routerLink]="content.link">
<ion-item *ngSwitchCase="'router link'" [routerLink]="content.link" fill="clear">
<ion-icon *ngIf="content.icon" [name]="content.icon" slot="start"></ion-icon>
<ion-label>{{ 'title' | translateSimple: content }}</ion-label>
</ion-item>

2
src/app/modules/about/about-page/about-page.html
View File

@@ -26,7 +26,7 @@
</ion-header>
<ion-content *ngIf="content" class="ion-content-parallax">
<div>
<ion-text color="light">{{ appName }} v{{ version }}</ion-text>
<ion-text>{{ appName }} v{{ version }}</ion-text>
<div class="page-content">
<about-page-content *ngFor="let element of content.content" [content]="element"></about-page-content>
</div>

10
src/app/modules/about/about-page/about-page.scss
View File

@@ -62,10 +62,7 @@ ion-text {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
background: var(--ion-color-primary-contrast);
&.licenses-content {
background: var(--ion-color-light);
}
background: var(--ion-item-background);
padding-block-end: var(--spacing-md);
@include border-radius-in-parallax(var(--border-radius-default));
@@ -80,7 +77,6 @@ ion-text {
@include border-radius-in-parallax(var(--border-radius-default));
overflow: hidden;
position: relative;
background-color: var(--ion-color-primary-contrast);
margin: 0;
& > ion-thumbnail {
@@ -89,3 +85,7 @@ ion-text {
}
}
}
ion-text {
color: var(--ion-color-primary-contrast);
}

21
src/app/modules/assessments/page/assessments-page.scss
View File

@@ -1,19 +1,20 @@
/*!
* Copyright (C) 2022 StApps
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation, version 3.
* Copyright (C) 2023 StApps
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation, version 3.
*
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
* more details.
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
* more details.
*
* You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>.
* You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
.content {
height: 100%;
padding-inline: 8px;
--ion-item-background: var(--ion-background-color);
}

6
src/app/modules/catalog/catalog.component.scss
View File

@@ -1,5 +1,5 @@
/*!
* Copyright (C) 2022 StApps
* Copyright (C) 2023 StApps
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation, version 3.
@@ -27,3 +27,7 @@ ion-toolbar.in-toolbar {
padding: 0 !important;
}
}
:host {
--ion-item-background: var(--ion-backgrund-color);
}

3
src/app/modules/dashboard/dashboard.component.scss
View File

@@ -48,7 +48,7 @@
}
ion-content {
--background: var(--ion-color-light);
--background: var(--ion-background-color);
--padding-bottom: var(--spacing-xl);
&::part(inner-scroll) {
scrollbar-gutter: stable;
@@ -59,6 +59,7 @@ ion-content {
width: 100%;
z-index: 3;
background: var(--ion-color-primary);
color: var(--ion-color-primary-contrast);
display: flex;
justify-content: space-between;
gap: var(--spacing-md);

2
src/app/modules/data/data.module.ts
View File

@@ -99,6 +99,7 @@ import {SCThingListItemVirtualScrollStrategyDirective} from './list/sc-thing-lis
import {DataListItemHostDirective} from './list/data-list-item-host.directive';
import {DataListItemHostDefaultComponent} from './list/data-list-item-host-default.component';
import {browserFactory, SimpleBrowser} from '../../util/browser.factory';
import {DishCharacteristicsComponent} from './types/dish/dish-characteristics.component';
/**
* Module for handling data
@@ -111,6 +112,7 @@ import {browserFactory, SimpleBrowser} from '../../util/browser.factory';
AddressDetailComponent,
CatalogDetailContentComponent,
CatalogListItemComponent,
DishCharacteristicsComponent,
DataDetailComponent,
DataDetailContentComponent,
DataIconPipe,

3
src/app/modules/data/detail/data-detail-content.scss
View File

@@ -38,7 +38,7 @@ stapps-origin-detail {
position: relative;
margin-block-start: calc((var(--header-spacing-bottom) - var(--spacing-xl)) * -1);
margin-block-end: var(--spacing-xl);
background-color: var(--ion-color-primary-contrast);
background-color: var(--ion-card-background);
@include content-padding();
& > ion-thumbnail {
@@ -73,7 +73,6 @@ stapps-origin-detail {
padding-bottom: 8px;
}
ion-card-header {
color: var(--ion-color-dark);
padding-top: 8px;
padding-bottom: 4px;
font-weight: bold;

12
src/app/modules/data/detail/data-detail.scss
View File

@@ -19,3 +19,15 @@ ion-content > div {
flex-direction: column;
flex: 1;
}
stapps-data-path ::ng-deep ion-breadcrumb {
color: var(--ion-color-primary-contrast);
&::part(separator) {
color: var(--ion-color-primary-contrast);
}
&::part(collapsed-indicator) {
background: var(--ion-color-primary-contrast);
}
}

20
src/app/modules/data/elements/favorite-button.component.html
View File

@@ -1,16 +1,16 @@
<!--
~ Copyright (C) 2022 StApps
~ This program is free software: you can redistribute it and/or modify it
~ under the terms of the GNU General Public License as published by the Free
~ Software Foundation, version 3.
~ Copyright (C) 2023 StApps
~ This program is free software: you can redistribute it and/or modify it
~ under the terms of the GNU General Public License as published by the Free
~ Software Foundation, version 3.
~
~ This program is distributed in the hope that it will be useful, but WITHOUT
~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
~ more details.
~ This program is distributed in the hope that it will be useful, but WITHOUT
~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
~ more details.
~
~ You should have received a copy of the GNU General Public License along with
~ this program. If not, see <https://www.gnu.org/licenses/>.
~ You should have received a copy of the GNU General Public License along with
~ this program. If not, see <https://www.gnu.org/licenses/>.
-->
<ion-button (click)="toggle($event)" color="medium" size="small" fill="clear">

3
src/app/modules/data/elements/favorite-button.component.scss
View File

@@ -1,5 +1,5 @@
/*!
* Copyright (C) 2022 StApps
* Copyright (C) 2023 StApps
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation, version 3.
@@ -27,6 +27,7 @@
}
.selected {
// TODO
color: #fbc02d;
}
}

1
src/app/modules/data/elements/title-card.component.html
View File

@@ -38,7 +38,6 @@
<ion-button
expand="full"
fill="clear"
color="light"
*ngIf="item.description && buttonShown"
(click)="toggleDescriptionAccordion()"
>

8
src/app/modules/data/elements/title-card.component.scss
View File

@@ -39,10 +39,14 @@ ion-card {
padding: 0 0 var(--header-spacing-bottom);
.description * {
color: var(--ion-color-light);
color: var(--ion-color-primary-contrast);
}
.openingHours {
color: var(--ion-color-light);
color: var(--ion-color-primary-contrast);
}
}
ion-button {
--color: var(--ion-color-primary-contrast);
}
}

6
src/app/modules/data/list/data-list-item.scss
View File

@@ -13,7 +13,6 @@
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
@import 'src/theme/util/_mixins.scss';
@import 'src/theme/common/_helper.scss';
:host {
display: block;
@@ -50,11 +49,6 @@ ion-item {
flex-direction: column;
}
}
::ng-deep {
ion-note {
@extend %horizontal-list;
}
}
}
:host.square ::ng-deep {

5
src/app/modules/data/list/search-page.html
View File

@@ -56,7 +56,10 @@
</ion-header>
<ion-content class="content">
<div [style.display]="!showDefaultData && !items && !loading ? 'block' : 'none'">
<div
[class.no-results]="!showDefaultData && !items && !loading"
[style.display]="!showDefaultData && !items && !loading ? 'block' : 'none'"
>
<ion-label class="centeredMessageContainer">
{{ 'search.instruction' | translate }}
</ion-label>

2
src/app/modules/data/list/search-page.scss
View File

@@ -37,7 +37,7 @@ ion-toolbar:first-of-type {
}
ion-content {
--background: var(--ion-color-light);
--background: var(--ion-background-color);
}
.content > div {

25
src/app/modules/data/types/dish/dish-characteristics.component.ts Normal file
View File

@@ -0,0 +1,25 @@
/*
* Copyright (C) 2023 StApps
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation, version 3.
*
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
* more details.
*
* You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
import {Component, Input} from '@angular/core';
import {SCDish} from '@openstapps/core';
@Component({
selector: 'stapps-dish-characteristics',
templateUrl: 'dish-characteristics.html',
styleUrls: ['dish-characteristics.scss'],
})
export class DishCharacteristicsComponent {
@Input() item: SCDish;
}

28
src/app/modules/data/types/dish/dish-characteristics.html Normal file
View File

@@ -0,0 +1,28 @@
<!--
~ Copyright (C) 2023 StApps
~ This program is free software: you can redistribute it and/or modify it
~ under the terms of the GNU General Public License as published by the Free
~ Software Foundation, version 3.
~
~ This program is distributed in the hope that it will be useful, but WITHOUT
~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
~ more details.
~
~ You should have received a copy of the GNU General Public License along with
~ this program. If not, see <https://www.gnu.org/licenses/>.
-->
<ion-note>
<ng-container *ngIf="item.characteristics">
<ng-container *ngFor="let characteristic of 'characteristics' | thingTranslate: item">
<!-- Abbr tag shows the actual name on hover -->
<abbr
[style.--background-url]="'url(' + characteristic.image + ')'"
[title]="characteristic.name | titlecase"
></abbr>
</ng-container>
</ng-container>
<ion-label>
{{ 'categories' | thingTranslate: item | join: ', ' | titlecase }}
</ion-label>
</ion-note>

38
src/app/modules/data/types/dish/dish-characteristics.scss Normal file
View File

@@ -0,0 +1,38 @@
/*!
* Copyright (C) 2023 StApps
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation, version 3.
*
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
* more details.
*
* You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
ion-note {
list-style: none;
display: flex;
flex-direction: row-reverse;
justify-content: start;
}
abbr {
width: 16px;
aspect-ratio: 1;
background: var(--ion-color-medium);
mask-image: var(--background-url);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
mask-mode: alpha;
+ ion-label::after {
content: '•';
margin-inline: var(--spacing-xs);
}
}

28
src/app/modules/data/types/dish/dish-detail-content.html
View File

@@ -13,31 +13,7 @@
~ this program. If not, see <https://www.gnu.org/licenses/>.
-->
<ion-grid>
<ion-row>
<ion-col>
<ion-card *ngIf="item.categories">
<ion-card-header>
{{ 'categories' | thingTranslate: item | join: ', ' | titlecase }}
</ion-card-header>
</ion-card>
</ion-col>
<ion-col>
<ion-card *ngIf="item.characteristics">
<ion-card-header class="no-padding-inline-start vertical-list">
<ul>
<li>
<ng-container *ngFor="let characteristic of 'characteristics' | thingTranslate: item">
<img [src]="characteristic.image" [alt]="characteristic.name | titlecase" />
</ng-container>
</li>
</ul>
</ion-card-header>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
<stapps-dish-characteristics *ngIf="item.characteristics" [item]="item"></stapps-dish-characteristics>
<stapps-offers-detail *ngIf="item.offers" [offers]="item.offers"></stapps-offers-detail>
<!-- unwanted by swffm
<ion-card *ngIf="item.nutrition">
@@ -92,7 +68,7 @@
-->
<stapps-simple-card
*ngIf="item.additives"
[title]="'additives' | propertyNameTranslate: item"
[title]="$any('additives' | propertyNameTranslate: item) | titlecase"
[content]="'additives' | thingTranslate: item | join: ', '"
>
</stapps-simple-card>

9
src/app/modules/data/types/dish/dish-detail-content.scss
View File

@@ -12,10 +12,7 @@
* You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
@import 'src/theme/common/_helper.scss';
.vertical-list {
ul li img {
filter: unset;
}
stapps-dish-characteristics {
margin: var(--spacing-lg);
margin-block-end: var(--spacing-sm);
}

13
src/app/modules/data/types/dish/dish-list-item.html
View File

@@ -21,18 +21,7 @@
<p class="title-sub ion-hide-sm-down">
{{ 'description' | thingTranslate: item }}
</p>
<ion-note>
<ul>
<li>
{{ 'categories' | thingTranslate: item | join: ', ' | titlecase }}
</li>
<li *ngIf="item.characteristics">
<ng-container *ngFor="let characteristic of 'characteristics' | thingTranslate: item">
<img [src]="characteristic.image" [alt]="characteristic.name | titlecase" />
</ng-container>
</li>
</ul>
</ion-note>
<stapps-dish-characteristics [item]="item"></stapps-dish-characteristics>
</div>
</ion-col>
<ion-col width-10 text-right>

4
src/app/modules/data/types/event/event-list-item.html
View File

@@ -24,9 +24,9 @@
<p *ngIf="item.academicTerms" class="title-sub">
{{ 'name' | thingTranslate: item.academicTerms[0] }}
</p>
<ion-note *ngIf="!item.categories">{{ 'type' | thingTranslate: item }}</ion-note>
<ion-note *ngIf="!item.categories">{{ 'type' | thingTranslate: item | titlecase }}</ion-note>
<ion-note *ngIf="item.categories">
{{ 'categories' | thingTranslate: item | join: ', ' }}
{{ 'categories' | thingTranslate: item | join: ', ' | titlecase }}
</ion-note>
</div>
</ion-col>

5
src/app/modules/data/types/message/message-detail-content.html
View File

@@ -1,5 +1,5 @@
<!--
~ Copyright (C) 2022 StApps
~ Copyright (C) 2023 StApps
~ This program is free software: you can redistribute it and/or modify it
~ under the terms of the GNU General Public License as published by the Free
~ Software Foundation, version 3.
@@ -40,9 +40,8 @@
</div>
<ng-template #news>
<ion-thumbnail>
<ion-thumbnail *ngIf="item.image" style="background-image: url('{{ item.image }}')">
<ion-img
*ngIf="item.image"
src="{{ item.image }}"
(ionError)="$event.target.nextSibling.style.display = 'none'"
alt="{{ item.name }}"

29
src/app/modules/data/types/message/message-detail-content.scss
View File

@@ -1,5 +1,5 @@
/*
* Copyright (C) 2021 StApps
/*!
* Copyright (C) 2023 StApps
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation, version 3.
@@ -15,17 +15,24 @@
:host {
ion-thumbnail {
position: relative;
width: 100%;
height: auto;
img {
display: block;
}
}
// Show smaller image on a desktop
@media (min-width: 992px) {
ion-thumbnail {
width: 60%;
margin: 0 auto;
margin-inline: auto;
overflow: hidden;
background-size: contain;
background-position: center;
transform: scaleX(-1);
ion-img {
backdrop-filter: blur(32px);
&::part(image) {
transform: scaleX(-1);
max-width: 16cm;
object-fit: contain;
margin-inline: auto;
}
}
}

21
src/app/modules/data/types/place/place-detail-content.component.ts
View File

@@ -1,5 +1,5 @@
/*
* Copyright (C) 2022 StApps
* Copyright (C) 2023 StApps
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation, version 3.
@@ -12,10 +12,13 @@
* You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
import {Component, Input, OnInit} from '@angular/core';
import {Component, Input, OnDestroy, OnInit} from '@angular/core';
import {SCBuilding, SCFloor, SCPointOfInterest, SCRoom, SCThings} from '@openstapps/core';
import {DataProvider} from '../../data.provider';
import {hasValidLocation, isSCFloor} from './place-types';
import {DataRoutingService} from '../../data-routing.service';
import {Router} from '@angular/router';
import {Subscription} from 'rxjs';
/**
* TODO
@@ -26,7 +29,7 @@ import {hasValidLocation, isSCFloor} from './place-types';
selector: 'stapps-place-detail-content',
templateUrl: 'place-detail-content.html',
})
export class PlaceDetailContentComponent implements OnInit {
export class PlaceDetailContentComponent implements OnInit, OnDestroy {
/**
* TODO
*/
@@ -39,6 +42,8 @@ export class PlaceDetailContentComponent implements OnInit {
*/
hasValidLocation = false;
itemRouting: Subscription;
/**
* TODO
*
@@ -63,7 +68,17 @@ export class PlaceDetailContentComponent implements OnInit {
);
}
constructor(dataRoutingService: DataRoutingService, router: Router) {
this.itemRouting = dataRoutingService.itemSelectListener().subscribe(item => {
void router.navigate(['/data-detail', item.uid]);
});
}
ngOnInit() {
this.hasValidLocation = !isSCFloor(this.item) && hasValidLocation(this.item);
}
ngOnDestroy() {
this.itemRouting.unsubscribe();
}
}

3
src/app/modules/data/types/place/place-detail-content.html
View File

@@ -35,8 +35,7 @@
{{ 'inPlace' | propertyNameTranslate: item | titlecase }}
</ion-card-header>
<ion-card-content>
<ion-icon name="pin_drop"></ion-icon>
<a [routerLink]="['/data-detail', item.inPlace.uid]">{{ 'name' | thingTranslate: item.inPlace }}</a>
<stapps-data-list-item [item]="item.inPlace"></stapps-data-list-item>
</ion-card-content>
</ion-card>
</ng-container>

5
src/app/modules/data/types/place/place-list-item.component.ts
View File

@@ -1,5 +1,5 @@
/*
* Copyright (C) 2022 StApps
* Copyright (C) 2023 StApps
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation, version 3.
@@ -14,7 +14,7 @@
*/
import {Component, Input} from '@angular/core';
import {PositionService} from '../../../map/position.service';
import {Subscription, interval} from 'rxjs';
import {interval, Subscription} from 'rxjs';
import {hasValidLocation, isSCFloor, PlaceTypes, PlaceTypesWithDistance} from './place-types';
/**
@@ -23,6 +23,7 @@ import {hasValidLocation, isSCFloor, PlaceTypes, PlaceTypesWithDistance} from '.
@Component({
selector: 'stapps-place-list-item',
templateUrl: 'place-list-item.html',
styleUrls: ['place-list-item.scss'],
})
export class PlaceListItemComponent {
/**

41
src/app/modules/data/types/place/place-list-item.html
View File

@@ -26,28 +26,24 @@
</p>
<p>
<ion-note *ngIf="item.categories && item.type !== 'building'; else onlyType">
<ul>
<li>
{{ 'categories' | thingTranslate: item | join: ', ' | titlecase }}
</li>
<li *ngIf="distance">
<ion-icon name="directions_walk"></ion-icon>
{{ distance | metersLocalized }}
</li>
</ul>
<ion-label>
{{ 'categories' | thingTranslate: item | join: ', ' | titlecase }}
</ion-label>
<ion-label *ngIf="distance" class="distance">
<ion-icon name="directions_walk"></ion-icon>
{{ distance | metersLocalized }}
</ion-label>
</ion-note>
</p>
<ng-template #onlyType>
<ion-note>
<ul>
<li>
{{ 'type' | thingTranslate: item }}
</li>
<li *ngIf="distance">
<ion-icon name="directions_walk"></ion-icon>
{{ distance | metersLocalized }}
</li>
</ul>
<ion-label>
{{ 'type' | thingTranslate: item | titlecase }}
</ion-label>
<ion-label *ngIf="distance" class="distance">
<ion-icon name="directions_walk"></ion-icon>
{{ distance | metersLocalized }}
</ion-label>
</ion-note>
</ng-template>
</ng-container>
@@ -56,10 +52,11 @@
</p>
</div>
</ion-col>
<div *ngIf="item.type !== 'building'">
<ion-col width-20 text-right *ngIf="item.inPlace">
<ion-icon name="pin_drop"></ion-icon>{{ 'name' | thingTranslate: item.inPlace }}
<ng-container *ngIf="item.type !== 'building'">
<ion-col size="auto" class="in-place" *ngIf="item.inPlace">
<ion-icon name="pin_drop"></ion-icon
><ion-label>{{ 'name' | thingTranslate: item.inPlace }}</ion-label>
</ion-col>
</div>
</ng-container>
</ion-row>
</ion-grid>

36
src/app/modules/data/types/place/place-list-item.scss Normal file
View File

@@ -0,0 +1,36 @@
/*!
* Copyright (C) 2023 StApps
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation, version 3.
*
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
* more details.
*
* You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
ion-note {
display: flex;
> ion-label {
display: inline-flex;
justify-content: center;
align-items: center;
}
}
ion-label + ion-label.distance::before {
content: '•';
margin-inline: var(--spacing-xs);
}
.in-place {
display: flex;
justify-content: end;
align-items: center;
}

3
src/app/modules/feedback/feedback-page.scss
View File

@@ -57,7 +57,7 @@ ion-button {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
background: var(--ion-color-light);
background: var(--ion-item-background);
@include border-radius-in-parallax(var(--border-radius-default));
& > * {
@@ -70,7 +70,6 @@ ion-button {
@include border-radius-in-parallax(var(--border-radius-default));
overflow: hidden;
position: relative;
background-color: var(--ion-color-primary-contrast);
margin: 0;
& > ion-thumbnail {

12
src/app/modules/map/page/map-page.scss
View File

@@ -1,5 +1,5 @@
/*!
* Copyright (C) 2022 StApps
* Copyright (C) 2023 StApps
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation, version 3.
@@ -87,18 +87,10 @@ div.map-buttons {
ion-button {
margin: 4px;
// important for iOS
// TODO: find an option that is better suited for the iOS theme
--box-shadow: var(--map-box-shadow);
align-self: flex-end;
}
ion-button::part(native) {
background: white;
}
ion-button::part(native):hover,
ion-button::part(native):focus {
background: whitesmoke;
}
}
div.map-buttons.above {

15
src/app/modules/map/widget/map-widget.scss
View File

@@ -1,3 +1,18 @@
/*!
* Copyright (C) 2023 StApps
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation, version 3.
*
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
* more details.
*
* You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
div.map-container {
height: 100%;
width: 100%;

2
src/app/modules/menu/context/context-menu.component.ts
View File

@@ -1,5 +1,5 @@
/*
* Copyright (C) 2022 StApps
* Copyright (C) 2023 StApps
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation, version 3.

2
src/app/modules/menu/navigation/navigation.scss
View File

@@ -66,7 +66,7 @@ stapps-offline-notice.is-offline ~ ion-split-pane {
}
ion-router-outlet {
background: white;
background: var(--ion-background-color);
}
.menu-category {

6
src/app/modules/news/item/news-item.scss
View File

@@ -23,7 +23,7 @@ ion-card::part(native) {
display: flex;
flex-direction: column-reverse;
height: 100%;
background: linear-gradient(to top, var(--ion-color-dark), transparent);
background: linear-gradient(to top, #0e0e0e, transparent);
}
.card {
@@ -38,10 +38,10 @@ ion-card-title {
-webkit-box-orient: vertical;
overflow: hidden;
font-size: var(--font-size-xl);
--color: var(--ion-color-dark-contrast);
--color: var(--ion-text-color-dark, white);
max-lines: 3;
}
ion-card-subtitle {
--color: var(--ion-color-dark-contrast);
--color: var(--ion-text-color-dark, white);
}

2
src/app/modules/profile/page/profile-page.html
View File

@@ -95,7 +95,7 @@
<ion-card class="courses-card">
<ion-card-header (click)="toggleCourseCardState()">
<span>{{ 'profile.courses.today' | translate | uppercase }}</span>
<ion-icon [name]="courseCardState" fill="red" size="20"></ion-icon>
<ion-icon [name]="courseCardState" color="dark" size="20"></ion-icon>
</ion-card-header>
<ion-card-content class="course-card" [class.show-card]="courseCardState === courseCardEnum.expanded">
<ng-container *ngIf="myCoursesToday.length === 0">

8
src/app/modules/profile/page/profile-page.scss
View File

@@ -159,14 +159,14 @@
max-width: 800px;
ion-card-header {
background-color: var(--ion-color-light-contrast);
background-color: var(--ion-item-background);
border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;
display: flex;
justify-content: space-between;
align-items: center;
span {
color: var(--ion-color-light);
color: var(--ion-item-background-color-contrast);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
}
@@ -179,7 +179,7 @@
ion-card-content {
margin: 0;
padding: 0;
background-color: var(--ion-color-primary-contrast);
background-color: var(--ion-item-background);
border-radius: var(--border-radius-default);
max-height: 0;
overflow: hidden;
@@ -196,7 +196,7 @@
div {
font-size: var(--font-size-md);
font-weight: var(--font-weight-black);
color: var(--ion-color-light-contrast);
color: var(--ion-item-background-color-contrast);
text-align: center;
&.no-course {

10
src/app/modules/schedule/page/components/calendar-component.scss
View File

@@ -1,5 +1,5 @@
/*!
* Copyright (C) 2022 StApps
* Copyright (C) 2023 StApps
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation, version 3.
@@ -86,17 +86,17 @@ ion-content {
.hours-wrapper {
z-index: 100;
background-color: var(--ion-color-primary-contrast);
background-color: var(--ion-background-color);
.hour-lines {
width: 40px;
height: 70px;
border-right: 1px solid var(--ion-color-light);
border-right: 1px solid var(--ion-item-border-color);
text-align: center;
top: 0;
position: absolute;
font-weight: var(--font-weight-bold);
background-color: var(--calender-background-color);
background-color: var(--ion-background-color);
}
}
@@ -106,7 +106,7 @@ ion-content {
}
.date-header {
border-bottom: 1px solid var(--calender-date-line-gray);
border-bottom: 1px solid var(--ion-item-border-color);
padding: var(--spacing-sm) auto;
height: fit-content;
font-weight: var(--font-weight-bold);

14
src/app/modules/schedule/page/grid/schedule-card.component.ts
View File

@@ -1,5 +1,5 @@
/*
* Copyright (C) 2022 StApps
* Copyright (C) 2023 StApps
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation, version 3.
@@ -27,8 +27,8 @@ import {ScheduleEvent} from '../schema/schema';
})
export class ScheduleCardComponent implements OnInit {
cardColor = {
isBlack: false,
isBlue: false,
isExercise: false,
isLecture: false,
isDefault: false,
};
@@ -91,8 +91,8 @@ export class ScheduleCardComponent implements OnInit {
this.title = this.scheduleEvent.dateSeries.event.name;
this.cardColor = {
isBlack: false,
isBlue: false,
isLecture: false,
isExercise: false,
isDefault: false,
};
@@ -102,10 +102,10 @@ export class ScheduleCardComponent implements OnInit {
: ''
) {
case 'lecture':
this.cardColor.isBlue = true;
this.cardColor.isLecture = true;
break;
case 'exercise':
this.cardColor.isBlack = true;
this.cardColor.isExercise = true;
break;
default:
this.cardColor.isDefault = true;

6
src/app/modules/schedule/page/grid/schedule-card.html
View File

@@ -1,5 +1,5 @@
<!--
~ Copyright (C) 2022 StApps
~ Copyright (C) 2023 StApps
~ This program is free software: you can redistribute it and/or modify it
~ under the terms of the GNU General Public License as published by the Free
~ Software Foundation, version 3.
@@ -19,8 +19,8 @@
[style.marginTop.px]="noOffset ? 0 : (fromY - fromHour) * scale - 5 + 45"
[routerLink]="['/data-detail', scheduleEvent.dateSeries.uid]"
[class.defaultCard]="cardColor.isDefault"
[class.blueCard]="cardColor.isBlue"
[class.blackCard]="cardColor.isBlack"
[class.lectureCard]="cardColor.isLecture"
[class.exerciseCard]="cardColor.isExercise"
class="clickable"
>
<ion-card-header mode="md">

68
src/app/modules/schedule/page/grid/schedule-card.scss
View File

@@ -1,5 +1,5 @@
/*!
* Copyright (C) 2022 StApps
* Copyright (C) 2023 StApps
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation, version 3.
@@ -20,55 +20,23 @@ ion-card {
margin-right: 0;
border-radius: 0;
&.blueCard {
--background: var(--calender-blue-card);
@each $name in lecture, exercise, default {
&.#{$name}Card {
--background: var(--calender-#{$name}-card);
ion-card-title,
ion-card-subtitle span,
ion-card-content ion-note,
ion-card-content ion-text {
color: var(--ion-color-primary-contrast);
}
ion-card-title,
ion-card-subtitle span,
ion-card-content ion-note,
ion-card-content ion-text {
color: var(--calender-#{$name}-card-contrast);
}
&:after {
background: linear-gradient(
rgba(var(--calender-blue-card-rgb), 0%),
rgba(var(--calender-blue-card-rgb), 100%)
);
}
}
&.blackCard {
--background: var(--calender-black-card);
ion-card-title,
ion-card-subtitle span,
ion-card-content ion-note,
ion-card-content ion-text {
color: var(--ion-color-primary-contrast);
}
&:after {
background: linear-gradient(
rgba(var(--calender-black-card-rgb), 0%),
rgba(var(--calender-black-card-rgb), 100%)
);
}
}
&.defaultCard {
--background: var(--calender-default-card);
ion-card-title,
ion-card-subtitle span,
ion-card-content ion-note,
ion-card-content ion-text {
color: var(--ion-color-light-contrast);
}
&:after {
background: linear-gradient(
rgba(var(--calender-light-card-rgb), 0%),
rgba(var(--calender-light-card-rgb), 100%)
);
&:after {
background: linear-gradient(
rgba(var(--calender-#{$name}-card-rgb), 0%),
rgba(var(--calender-#{$name}-card-rgb), 100%)
);
}
}
}
@@ -78,10 +46,6 @@ ion-card {
bottom: 0;
height: 33%;
width: 100%;
background: linear-gradient(
rgba(var(--calender-blue-card-rgb), 0%),
rgba(var(--calender-blue-card-rgb), 100%)
);
}
ion-card-header {

12
src/app/modules/schedule/page/grid/schedule-day.scss
View File

@@ -1,5 +1,5 @@
/*!
* Copyright (C) 2021 StApps
* Copyright (C) 2023 StApps
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation, version 3.
@@ -15,8 +15,8 @@
:host {
.day-wrapper {
border-left: 1px solid var(--calender-date-line-gray);
border-right: 1px solid var(--calender-date-line-gray);
border-left: 1px solid var(--ion-item-border-color);
border-right: 1px solid var(--ion-item-border-color);
&.leftmost {
border-left: unset;
@@ -28,15 +28,15 @@
left: 0;
height: fit-content;
padding: var(--spacing-md);
border-bottom: 2px solid var(--ion-color-light);
border-bottom: 2px solid var(--ion-item-border-color);
font-size: var(--font-size-md);
font-weight: var(--font-weight-bold);
text-align: center;
background-color: var(--ion-color-primary-contrast);
background-color: var(--ion-background-color);
z-index: 3;
&.leftmost {
border-left: 1px solid var(--ion-color-light);
border-left: 1px solid var(--ion-item-border-color);
}
}
}

2
src/app/modules/settings/page/settings-page.html
View File

@@ -50,7 +50,7 @@
<calendar-sync-settings></calendar-sync-settings>
<ion-button color="medium" expand="block" fill="outline" (click)="presentResetAlert()">
<ion-button expand="block" (click)="presentResetAlert()" fill="outline">
{{ 'settings.resetSettings' | translate }}
<ion-icon slot="start" name="device_reset"></ion-icon>
</ion-button>

3
src/app/modules/settings/page/settings-page.scss
View File

@@ -49,7 +49,7 @@
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
background: var(--ion-color-light);
background: var(--ion-item-background);
@include border-radius-in-parallax(var(--border-radius-default));
& > * {
@@ -62,7 +62,6 @@
@include border-radius-in-parallax(var(--border-radius-default));
overflow: hidden;
position: relative;
background-color: var(--ion-color-primary-contrast);
margin: 0;
& > ion-thumbnail {

0
src/app/util/section/section-link-card.html Normal file
View File

0
src/app/util/section/section-tail-prompt-card.html Normal file
View File

39
src/theme/color-processing.scss Normal file
View File

@@ -0,0 +1,39 @@
/*!
* Copyright (C) 2023 StApps
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation, version 3.
*
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
* more details.
*
* You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
// Setting this to false significantly reduces the amount of variables
// being generated, but omits colors with -dark and -light suffixes, making
// it impossible to access dark theme colors while in light theme and vice versa
$include-theme-independent-colors: true;
$tint-amount: 10%;
$shade-amount: 12%;
$placeholder-fade-amount: 20%;
$box-shadow-fade-amount: 10%;
$item-border-color-fade-amount: 15%;
// The color chosen as contrast to another color
$contrast-threshold: 128;
$contrast-light-color: #fff;
$contrast-dark-color: #000;
$fade-threshold: 50%;
// https://ionicframework.com/docs/theming/themes#stepped-colors
$steps-start: 50;
$steps-end: 950;
$steps-step: 50;
$steps-range-start: 0;
$steps-range-end: 1000;

52
src/theme/colors.scss Normal file
View File

@@ -0,0 +1,52 @@
/*!
* Copyright (C) 2023 StApps
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation, version 3.
*
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
* more details.
*
* You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
@import 'util/color-system';
@include ion-color(primary, #3880ff);
@include ion-color(secondary, #32db64);
@include ion-color(tertiary, #f4a942);
@include ion-color(success, #10dc60);
@include ion-color(warning, #ffce00);
@include ion-color(danger, #f53d3d);
@include ion-color(light, #f4f4f4, #222);
@include ion-color(medium, #989aa2, #989aa2);
@include ion-color(dark, #222, #f4f4f4);
@include ion-background-color(#f5f5f5, #000);
@include ion-item-color(#fff, #0e0e0e);
:root {
--calender-lecture-card: var(--ion-color-primary-tint);
--calender-lecture-card-rgb: var(--ion-color-primary-tint-rgb);
--calender-lecture-card-contrast: var(--ion-color-primary-contrast);
--calender-exercise-card: var(--ion-color-dark);
--calender-exercise-card-rgb: var(--ion-color-dark-rgb);
--calender-exercise-card-contrast: var(--ion-color-dark-contrast);
--calender-default-card: var(--ion-color-light);
--calender-default-card-rgb: var(--ion-color-light-rgb);
--calender-default-card-contrast: var(--ion-color-light-contrast);
--map-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
--linear-gradient: linear-gradient(135deg, var(--ion-color-primary-shade), var(--ion-color-tertiary));
// Shadows
--shadow-default: 0px 0px 10px 4px var(--ion-box-shadow-color);
--shadow-cards: 0 0 8px 1px var(--ion-box-shadow-color);
--shadow-cards-hover: 5px 5px 8px 4px var(--ion-box-shadow-color);
--shadow-profile-card: 0 2px 6px 6px rgba(0, 0, 0, 0.06), 0 4px 5px 12px rgba(0, 0, 0, 0.04),
0 5px 6px 20px rgba(0, 0, 0, 0.02);
}

2
src/theme/common/_helper.scss
View File

@@ -41,7 +41,7 @@
li img {
max-height: 1.25rem;
vertical-align: text-bottom;
filter: invert(45%) sepia(0%) saturate(0%) hue-rotate(227deg) brightness(97%) contrast(82%);
// filter: invert(45%) sepia(0%) saturate(0%) hue-rotate(227deg) brightness(97%) contrast(82%);
}
}
}

4
src/theme/common/_ion-content-parallax.scss
View File

@@ -1,5 +1,5 @@
/*!
* Copyright (C) 2022 StApps
* Copyright (C) 2023 StApps
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation, version 3.
@@ -15,7 +15,7 @@
@mixin ion-content-parallax(
$parallax-background: var(--ion-color-primary),
$background: var(--ion-color-light),
$background: var(--ion-background-color),
$parallax-strength: 2,
$overscroll-padding: 720px,
$content-size: 230px

18
src/theme/common/_ion-menu.scss Normal file
View File

@@ -0,0 +1,18 @@
/*!
* Copyright (C) 2023 StApps
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation, version 3.
*
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
* more details.
*
* You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
ion-menu {
--ion-item-background: var(--ion-background-color);
--ion-item-color: var(--ion-background-color-contrast);
}

18
src/theme/common/_ion-searchbar.scss Normal file
View File

@@ -0,0 +1,18 @@
/*!
* Copyright (C) 2023 StApps
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation, version 3.
*
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
* more details.
*
* You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
ion-searchbar {
--background: var(--ion-item-background) !important;
}

25
src/theme/common/_leaflet-tile.scss Normal file
View File

@@ -0,0 +1,25 @@
/*!
* Copyright (C) 2023 StApps
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation, version 3.
*
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
* more details.
*
* You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
@import '../util/dark';
@include dark-only {
.leaflet-tile-container > .leaflet-tile {
filter: invert(1);
}
}
.map-container.leaflet-container {
background: var(--ion-background-color);
}

17
src/theme/common/_typo.scss
View File

@@ -1,3 +1,18 @@
/*!
* Copyright (C) 2023 StApps
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation, version 3.
*
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
* more details.
*
* You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
body app-root {
.title,
.title[class*='sc-ion-label'] {
@@ -13,6 +28,6 @@ body app-root {
}
.title-sub {
color: var(--ion-color-text);
// color: var(--ion-color-medium);
}
}

4
src/theme/components/_card.scss
View File

@@ -1,5 +1,5 @@
/*!
* Copyright (C) 2022 StApps
* Copyright (C) 2023 StApps
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation, version 3.
@@ -15,7 +15,7 @@
.card {
box-shadow: var(--shadow-cards);
background-color: var(--ion-color-primary-contrast);
// background-color: var(--ion-item-color);
border-radius: var(--border-radius-default);
padding: var(--spacing-md);
font-size: var(--font-size-sm);

22
src/theme/components/_image-dark.scss Normal file
View File

@@ -0,0 +1,22 @@
/*!
* Copyright (C) 2023 StApps
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation, version 3.
*
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
* more details.
*
* You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
@import '../util/dark';
@include dark-only {
.image-dark {
filter: invert(1);
}
}

120
src/theme/util/_color-system.scss Normal file
View File

@@ -0,0 +1,120 @@
/*!
* Copyright (C) 2023 StApps
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation, version 3.
*
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
* more details.
*
* You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
@use 'sass:color';
@use 'sass:math';
@import '../color-processing';
@import './dark';
@function toRGB($color) {
@return red($color) + ',' + green($color) + ',' + blue($color);
}
@function toShade($color) {
@return darken($color, $shade-amount);
}
@function toTint($color) {
@return lighten($color, $tint-amount);
}
@function toContrast($color) {
$yiq: toYiq($color);
@return if($yiq >= $contrast-threshold, $contrast-dark-color, $contrast-light-color);
}
@function fade($color, $amount) {
@return if(lightness($color) > $fade-threshold, darken($color, $amount), lighten($color, $amount));
}
@function map-range($value, $input-min, $input-max, $output-min, $output-max) {
@return calc(($value - $input-min) * ($output-max - $output-min) / ($input-max - $input-min) + $output-min);
}
@function interpolate-colors($from, $to, $progress, $progress-min: 0, $progress-max: 100) {
@return rgb(
map-range($progress, $progress-min, $progress-max, red($from), red($to)),
map-range($progress, $progress-min, $progress-max, green($from), green($to)),
map-range($progress, $progress-min, $progress-max, blue($from), blue($to))
);
}
/**
* Converts a color to the YIQ color system
*/
@function toYiq($color) {
@return math.div(
(color.red($color) * 299) + (color.green($color) * 587) + (color.blue($color) * 114),
1000
);
}
@mixin color-rgb($name, $color) {
#{$name}: #{$color};
#{$name}-rgb: #{toRGB($color)};
}
@mixin light-dark-scheme($light, $dark) {
:root,
.light {
@if ($include-theme-independent-colors == true) {
@content ($light, -light);
@content (if($dark == none, $light, $dark), -dark);
}
@content ($light, "");
}
@if ($dark != none) {
@include dark-only {
@content ($dark, "");
}
}
}
@mixin ion-color-step($name, $from, $to) {
@for $i from calc($steps-start / $steps-step) through calc($steps-end / $steps-step) {
$value: $i * $steps-step;
#{$name}-#{$value}: #{interpolate-colors($from, $to, $value, $steps-range-start, $steps-range-end)};
}
}
@mixin ion-color($name, $light, $dark: none) {
@include light-dark-scheme($light, $dark) using($color, $suffix) {
@include color-rgb(--ion-color-#{$name}#{$suffix}, $color);
@include color-rgb(--ion-color-#{$name}-shade#{$suffix}, toShade($color));
@include color-rgb(--ion-color-#{$name}-tint#{$suffix}, toTint($color));
@include color-rgb(--ion-color-#{$name}-contrast#{$suffix}, toContrast($color));
}
}
@mixin ion-background-color($light, $dark: none) {
@include light-dark-scheme($light, $dark) using($color, $suffix) {
$text-color: toContrast($color);
@include color-rgb(--ion-background-color#{$suffix}, $color);
@include color-rgb(--ion-text-color#{$suffix}, $text-color);
@include color-rgb(--ion-box-shadow-color#{$suffix}, fade($color, $box-shadow-fade-amount));
@include color-rgb(--ion-placeholder-color#{$suffix}, fade($text-color, $placeholder-fade-amount));
@include ion-color-step(--ion-color-step#{$suffix}, $color, $text-color);
}
}
@mixin ion-item-color($light, $dark: none) {
@include light-dark-scheme($light, $dark) using($color, $suffix) {
@include color-rgb(--ion-item-background#{$suffix}, $color);
@include color-rgb(--ion-card-background#{$suffix}, $color);
@include color-rgb(--ion-item-border-color#{$suffix}, fade($color, $item-border-color-fade-amount));
@include color-rgb(--ion-border-color#{$suffix}, fade($color, $item-border-color-fade-amount));
@include color-rgb(--ion-item-color#{$suffix}, toContrast($color));
}
}

24
src/theme/util/_dark.scss Normal file
View File

@@ -0,0 +1,24 @@
/*!
* Copyright (C) 2023 StApps
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation, version 3.
*
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
* more details.
*
* You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
@mixin dark-only {
:root {
@media (prefers-color-scheme: dark) {
@content();
}
}
.dark {
@content();
}
}

107
src/theme/variables.scss
View File

@@ -1,5 +1,5 @@
/*!
* Copyright (C) 2022 StApps
* Copyright (C) 2023 StApps
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation, version 3.
@@ -15,108 +15,10 @@
// Ionic Variables and Theming. For more info, please see:
// http://ionicframework.com/docs/theming/
@import 'colors';
/** Ionic CSS Variables **/
:root {
/** primary **/
--ion-color-primary: #488aff;
--ion-color-primary-rgb: 72, 138, 255;
--ion-color-primary-contrast: #fff;
--ion-color-primary-contrast-rgb: 255, 255, 255;
--ion-color-primary-shade: #3f79e0;
--ion-color-primary-tint: #5a96ff;
/** secondary **/
--ion-color-secondary: #32db64;
--ion-color-secondary-rgb: 50, 219, 100;
--ion-color-secondary-contrast: #fff;
--ion-color-secondary-contrast-rgb: 255, 255, 255;
--ion-color-secondary-shade: #2cc158;
--ion-color-secondary-tint: #47df74;
/** tertiary **/
--ion-color-tertiary: #f4a942;
--ion-color-tertiary-rgb: 244, 169, 66;
--ion-color-tertiary-contrast: #fff;
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
--ion-color-tertiary-shade: #d7953a;
--ion-color-tertiary-tint: #f5b255;
/** success **/
--ion-color-success: #10dc60;
--ion-color-success-rgb: 16, 220, 96;
--ion-color-success-contrast: #fff;
--ion-color-success-contrast-rgb: 255, 255, 255;
--ion-color-success-shade: #0ec254;
--ion-color-success-tint: #28e070;
/** warning **/
--ion-color-warning: #ffce00;
--ion-color-warning-rgb: 255, 206, 0;
--ion-color-warning-contrast: #000;
--ion-color-warning-contrast-rgb: 0, 0, 0;
--ion-color-warning-shade: #e0b500;
--ion-color-warning-tint: #ffd31a;
/** danger **/
--ion-color-danger: #f53d3d;
--ion-color-danger-rgb: 245, 61, 61;
--ion-color-danger-contrast: #fff;
--ion-color-danger-contrast-rgb: 255, 255, 255;
--ion-color-danger-shade: #d83636;
--ion-color-danger-tint: #f65050;
/** light **/
--ion-color-light: #f4f4f4;
--ion-color-light-rgb: 244, 244, 244;
--ion-color-light-contrast: #000;
--ion-color-light-contrast-rgb: 0, 0, 0;
--ion-color-light-shade: #d7d7d7;
--ion-color-light-tint: #f5f5f5;
/** medium **/
--ion-color-medium: #989aa2;
--ion-color-medium-rgb: 152, 154, 162;
--ion-color-medium-contrast: #000;
--ion-color-medium-contrast-rgb: 0, 0, 0;
--ion-color-medium-shade: #86888f;
--ion-color-medium-tint: #a2a4ab;
/** dark **/
--ion-color-dark: #222;
--ion-color-dark-rgb: 34, 34, 34;
--ion-color-dark-contrast: #fff;
--ion-color-dark-contrast-rgb: 255, 255, 255;
--ion-color-dark-shade: #1e1e1e;
--ion-color-dark-tint: #383838;
/** StApps **/
--placeholder-gray: #f1f0ed;
--calender-date-line-gray: #dbdbdb;
--calender-background-color: #fff;
--calender-background-color-rgb: 255, 255, 255;
--calender-blue-card: var(--ion-color-primary-tint);
--calender-blue-card-rgb: 26, 113, 154;
--calender-black-card: #000000;
--calender-black-card-rgb: 0, 0, 0;
--calender-default-card: var(--ion-color-light);
/** Change the colors of the toolbar and the toolbar text here **/
--map-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
--ion-color-text: #000;
--ion-color-field-bg: #fff;
--ion-color-light-icon: #e6e6e6;
--linear-gradient: linear-gradient(135deg, var(--ion-color-primary-shade), var(--ion-color-tertiary));
// Shadows
--shadow-default: 0px 0px 10px 4px #ddd;
--shadow-cards: 0 0 8px 1px #ddd;
--shadow-cards-hover: 5px 5px 8px 4px #ccc;
--shadow-profile-card: 0 2px 6px 6px rgba(0, 0, 0, 0.06), 0 4px 5px 12px rgba(0, 0, 0, 0.04),
0 5px 6px 20px rgba(0, 0, 0, 0.02);
// Fonts
--ion-font-family: 'Barlow', Helvetica, Arial, sans-serif;
--headline-font-family: 'Barlow Condensed', Helvetica, Arial, sans-serif;
@@ -142,7 +44,6 @@
--spacing-xl: 20px;
--spacing-xxl: 24px;
--border-color-default: #dedd;
--border-width-default: 1px;
--border-radius-default: 8px;
@@ -176,8 +77,12 @@ body {
@import 'common/ion-popover';
@import 'common/ion-refresher';
@import 'common/ion-toolbar';
@import 'common/ion-menu';
@import 'common/swiper';
@import 'common/typography';
@import 'common/leaflet-tile';
@import 'common/ion-searchbar';
@import 'components/image-dark';
@import 'components/card';
@import 'components/section';