diff --git a/angular.json b/angular.json index 60fd006..bb03bdf 100644 --- a/angular.json +++ b/angular.json @@ -29,7 +29,10 @@ "src/assets" ], "styles": [ - "src/styles.scss" + "src/styles.scss", + "src/_themes.scss", + "src/_light.scss", + "src/_dark.scss" ], "scripts": [] }, @@ -97,7 +100,10 @@ "src/assets" ], "styles": [ - "src/styles.scss" + "src/styles.scss", + "src/_themes.scss", + "src/_light.scss", + "src/_dark.scss" ], "scripts": [] } diff --git a/package-lock.json b/package-lock.json index b9cdc22..e8aee74 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,8 +19,8 @@ "@angular/router": "^14.1.0", "@ng-icons/core": "^22.4.0", "@ng-icons/tabler-icons": "^22.4.0", - "fast-average-color": "^9.1.1", "moment": "^2.29.4", + "ngx-webstorage": "^10.0.1", "rxjs": "~7.5.0", "tslib": "^2.3.0", "zone.js": "~0.11.4" @@ -3103,11 +3103,6 @@ "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.0.tgz", "integrity": "sha512-IOXCvVRToe7e0ny7HpT/X9Rb2RYtElG1a+VshjwT00HxrM2dWBApHQoqsI6WiY7Q03vdf2bCrIGzVrkF/5t10w==" }, - "node_modules/@types/offscreencanvas": { - "version": "2019.7.0", - "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.0.tgz", - "integrity": "sha512-PGcyveRIpL1XIqK8eBsmRBt76eFgtzuPiSTyKHZxnGemp2yzGzWpjYKAfK3wIMiU7eH+851yEpiuP8JZerTmWg==" - }, "node_modules/@types/parse-json": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", @@ -5664,17 +5659,6 @@ "node": ">=4" } }, - "node_modules/fast-average-color": { - "version": "9.1.1", - "resolved": "https://registry.npmjs.org/fast-average-color/-/fast-average-color-9.1.1.tgz", - "integrity": "sha512-PJizLBcGb/jqUzrH66385te4+GcOK7wcUiCDvBUszdpzc/pvV1kwifvvsFygV3mS+7qwnWmK9/BrZniaOOC9ag==", - "dependencies": { - "@types/offscreencanvas": "^2019.7.0" - }, - "engines": { - "node": ">= 12" - } - }, "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", @@ -7943,6 +7927,18 @@ "node": "^12.20.0 || >=14" } }, + "node_modules/ngx-webstorage": { + "version": "10.0.1", + "resolved": "https://registry.npmjs.org/ngx-webstorage/-/ngx-webstorage-10.0.1.tgz", + "integrity": "sha512-OWmzAzby+/UrbRY/5d229Y4NzFn1a/u2WSEeZqzY5lwB/3d8ODZ6mlW/BZGIuuZ48Hp8tXMM3pFCz9+pEyzvDA==", + "dependencies": { + "tslib": "^2.0.0" + }, + "peerDependencies": { + "@angular/common": "^14.0.0", + "@angular/core": "^14.0.0" + } + }, "node_modules/nice-napi": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz", @@ -13868,11 +13864,6 @@ "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.0.tgz", "integrity": "sha512-IOXCvVRToe7e0ny7HpT/X9Rb2RYtElG1a+VshjwT00HxrM2dWBApHQoqsI6WiY7Q03vdf2bCrIGzVrkF/5t10w==" }, - "@types/offscreencanvas": { - "version": "2019.7.0", - "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.0.tgz", - "integrity": "sha512-PGcyveRIpL1XIqK8eBsmRBt76eFgtzuPiSTyKHZxnGemp2yzGzWpjYKAfK3wIMiU7eH+851yEpiuP8JZerTmWg==" - }, "@types/parse-json": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", @@ -15710,14 +15701,6 @@ "tmp": "^0.0.33" } }, - "fast-average-color": { - "version": "9.1.1", - "resolved": "https://registry.npmjs.org/fast-average-color/-/fast-average-color-9.1.1.tgz", - "integrity": "sha512-PJizLBcGb/jqUzrH66385te4+GcOK7wcUiCDvBUszdpzc/pvV1kwifvvsFygV3mS+7qwnWmK9/BrZniaOOC9ag==", - "requires": { - "@types/offscreencanvas": "^2019.7.0" - } - }, "fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", @@ -17383,6 +17366,14 @@ } } }, + "ngx-webstorage": { + "version": "10.0.1", + "resolved": "https://registry.npmjs.org/ngx-webstorage/-/ngx-webstorage-10.0.1.tgz", + "integrity": "sha512-OWmzAzby+/UrbRY/5d229Y4NzFn1a/u2WSEeZqzY5lwB/3d8ODZ6mlW/BZGIuuZ48Hp8tXMM3pFCz9+pEyzvDA==", + "requires": { + "tslib": "^2.0.0" + } + }, "nice-napi": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz", diff --git a/package.json b/package.json index d72a07f..97da15f 100644 --- a/package.json +++ b/package.json @@ -21,8 +21,8 @@ "@angular/router": "^14.1.0", "@ng-icons/core": "^22.4.0", "@ng-icons/tabler-icons": "^22.4.0", - "fast-average-color": "^9.1.1", "moment": "^2.29.4", + "ngx-webstorage": "^10.0.1", "rxjs": "~7.5.0", "tslib": "^2.3.0", "zone.js": "~0.11.4" diff --git a/projects/ui/src/lib/button/button.component.scss b/projects/ui/src/lib/button/button.component.scss index 281756b..771c820 100644 --- a/projects/ui/src/lib/button/button.component.scss +++ b/projects/ui/src/lib/button/button.component.scss @@ -19,19 +19,19 @@ } &[data-appearance="default"], &[data-appearance="primary"] { - background-color: var(--sk-primary); + background-color: var(--sk-primary-accent); color: #fff; } &[data-appearance="secondary"] { - background-color: var(--sk-secondary); + background-color: var(--sk-secondary-accent); color: #fff; } &[data-appearance="outline"] { color: #fff; background-color: transparent; - box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.1); + box-shadow: 0px 0px 0px 1px var(--sk-border); } &[data-appearance="flat"] { @@ -40,3 +40,15 @@ } } } + +:host::ng-deep { + + button { + &[data-appearance="default"], &[data-appearance="primary"] { + + skirda-icon ng-icon { + color: #fff!important; + } + } + } +} diff --git a/projects/ui/src/lib/directives/directives.module.ts b/projects/ui/src/lib/directives/directives.module.ts index 32b6e30..e97f085 100644 --- a/projects/ui/src/lib/directives/directives.module.ts +++ b/projects/ui/src/lib/directives/directives.module.ts @@ -1,18 +1,21 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { KeyboardDirective } from './keyboard.directive'; +import { KeyboardDirective } from './keyboard/keyboard.directive'; +import { IsScrollingDirective } from './is-scrolling/is-scrolling.directive'; @NgModule({ declarations: [ - KeyboardDirective + KeyboardDirective, + IsScrollingDirective ], imports: [ CommonModule ], exports: [ - KeyboardDirective + KeyboardDirective, + IsScrollingDirective ] }) export class DirectivesModule { } diff --git a/projects/ui/src/lib/directives/is-scrolling/is-scrolling.directive.spec.ts b/projects/ui/src/lib/directives/is-scrolling/is-scrolling.directive.spec.ts new file mode 100644 index 0000000..3cc8b43 --- /dev/null +++ b/projects/ui/src/lib/directives/is-scrolling/is-scrolling.directive.spec.ts @@ -0,0 +1,8 @@ +import { IsScrollingDirective } from './is-scrolling.directive'; + +describe('IsScrollingDirective', () => { + it('should create an instance', () => { + const directive = new IsScrollingDirective(); + expect(directive).toBeTruthy(); + }); +}); diff --git a/projects/ui/src/lib/directives/is-scrolling/is-scrolling.directive.ts b/projects/ui/src/lib/directives/is-scrolling/is-scrolling.directive.ts new file mode 100644 index 0000000..26abc5e --- /dev/null +++ b/projects/ui/src/lib/directives/is-scrolling/is-scrolling.directive.ts @@ -0,0 +1,15 @@ +import { Directive, ElementRef, HostBinding } from '@angular/core'; + +@Directive({ + selector: '[skirdaIsScrolling]' +}) +export class IsScrollingDirective { + + constructor( + private element: ElementRef + ) { } + + @HostBinding('attr.data-scroll-y') get isScrollableY () { + return this.element.nativeElement.clientHeight < this.element.nativeElement.scrollHeight + } +} diff --git a/projects/ui/src/lib/directives/keyboard.directive.spec.ts b/projects/ui/src/lib/directives/keyboard/keyboard.directive.spec.ts similarity index 100% rename from projects/ui/src/lib/directives/keyboard.directive.spec.ts rename to projects/ui/src/lib/directives/keyboard/keyboard.directive.spec.ts diff --git a/projects/ui/src/lib/directives/keyboard.directive.ts b/projects/ui/src/lib/directives/keyboard/keyboard.directive.ts similarity index 100% rename from projects/ui/src/lib/directives/keyboard.directive.ts rename to projects/ui/src/lib/directives/keyboard/keyboard.directive.ts diff --git a/projects/ui/src/lib/game/game.component.html b/projects/ui/src/lib/game/game.component.html index 60fcf43..368520e 100644 --- a/projects/ui/src/lib/game/game.component.html +++ b/projects/ui/src/lib/game/game.component.html @@ -1,10 +1,12 @@ -
- -
-
- {{game.title}} + +
+ +
+
+ {{game.title}} +
+ description
- description +
- -
+ diff --git a/projects/ui/src/lib/game/game.component.scss b/projects/ui/src/lib/game/game.component.scss index b0d0426..cd01a0e 100644 --- a/projects/ui/src/lib/game/game.component.scss +++ b/projects/ui/src/lib/game/game.component.scss @@ -1,31 +1,43 @@ :host { display: block; - .sk-game { - display: flex; - align-items: center; - gap: var(--sk-gap-l); - padding: var(--sk-gap-l); - border-radius: var(--sk-br-m); - transition: 0.1s ease; - opacity: 0.5; - cursor: pointer; + a { + display: block; + color: inherit; + text-decoration: none; &:hover { - opacity: 1; - background-color: rgba(255, 255, 255, 0.05); + + .sk-game { + opacity: 0.5; + background-color: var(--sk-item-active); + } } - .sk-game-info { - flex: 1; - } - } + &.active { - &.active { + .sk-game { + opacity: 1; + background-color: var(--sk-item-active); + } + } .sk-game { - opacity: 1; - background-color: rgba(255, 255, 255, 0.1); + display: flex; + align-items: center; + gap: var(--sk-gap-l); + padding: var(--sk-gap-l); + border-radius: var(--sk-br-m); + transition: 0.1s ease; + opacity: 0.5; + cursor: pointer; + + .sk-game-info { + flex: 1; + display: flex; + flex-direction: column; + gap: var(--sk-gap-m); + } } } } diff --git a/projects/ui/src/lib/game/game.module.ts b/projects/ui/src/lib/game/game.module.ts index 6a75e01..0b60f46 100644 --- a/projects/ui/src/lib/game/game.module.ts +++ b/projects/ui/src/lib/game/game.module.ts @@ -5,6 +5,7 @@ import { ImageIconModule } from '../image-icon/image-icon.module' import { TypographyModule } from '../typography/typography.module' import { TagModule } from '../tag/tag.module' import { IconModule } from '../icon/icon.module' +import { RouterModule } from '@angular/router' @NgModule({ declarations: [ @@ -15,7 +16,8 @@ import { IconModule } from '../icon/icon.module' ImageIconModule, TypographyModule, TagModule, - IconModule + IconModule, + RouterModule ], exports: [ GameComponent diff --git a/projects/ui/src/lib/icon/icon.component.ts b/projects/ui/src/lib/icon/icon.component.ts index a2535c5..68b4a72 100644 --- a/projects/ui/src/lib/icon/icon.component.ts +++ b/projects/ui/src/lib/icon/icon.component.ts @@ -14,7 +14,7 @@ export class IconComponent { @Input() name!: string; @Input() size: number | string = 24; @Input() sizeUnit: string = 'px'; - @Input() color: string = '#fff'; + @Input() color: string = 'var(--sk-text)'; get sizeWithUnit() { return this.size + this.sizeUnit; diff --git a/projects/ui/src/lib/icon/icon.module.ts b/projects/ui/src/lib/icon/icon.module.ts index 1192ce8..66cfae9 100644 --- a/projects/ui/src/lib/icon/icon.module.ts +++ b/projects/ui/src/lib/icon/icon.module.ts @@ -12,6 +12,8 @@ import { tablerDownload, tablerPlayerPlay, tablerX, + tablerSettings, + tablerSun } from '@ng-icons/tabler-icons'; const icons = { @@ -24,6 +26,8 @@ const icons = { tablerDownload, tablerPlayerPlay, tablerX, + tablerSettings, + tablerSun }; @NgModule({ diff --git a/projects/ui/src/lib/icon/icons.ts b/projects/ui/src/lib/icon/icons.ts index b910a7d..52104ef 100644 --- a/projects/ui/src/lib/icon/icons.ts +++ b/projects/ui/src/lib/icon/icons.ts @@ -8,5 +8,7 @@ icons.set('friends', 'tablerUsers'); icons.set('download', 'tablerDownload'); icons.set('play', 'tablerPlayerPlay'); icons.set('close', 'tablerX'); +icons.set('settings', 'tablerSettings'); +icons.set('sun', 'tablerSun'); export { icons }; diff --git a/projects/ui/src/lib/input/input.component.scss b/projects/ui/src/lib/input/input.component.scss index d16acb3..8928543 100644 --- a/projects/ui/src/lib/input/input.component.scss +++ b/projects/ui/src/lib/input/input.component.scss @@ -7,12 +7,14 @@ gap: 0.5rem; padding: var(--local-gap); cursor: text; - background-color: var(--sk-input); + background-color: transparent; + border: 1px solid var(--sk-border); + box-sizing: border-box; color: #fff; border-radius: 8px; &:focus-within { - background-color: var(--sk-input-focus); + border: 1px solid var(--sk-border-hovered); } input { @@ -21,11 +23,13 @@ outline: none; appearance: none; background: transparent; - font-size: 0.875rem; - color: #fff; + font-size: 1rem; + color: var(--sk-text); + font-family: var(--font); &::placeholder { - color: rgba(255, 255, 255, 0.5); + color: var(--sk-text); + opacity: 0.5; } } } diff --git a/projects/ui/src/lib/pipes/countdown.pipe.ts b/projects/ui/src/lib/pipes/countdown.pipe.ts index bc10c5a..a7f6df5 100644 --- a/projects/ui/src/lib/pipes/countdown.pipe.ts +++ b/projects/ui/src/lib/pipes/countdown.pipe.ts @@ -18,8 +18,12 @@ export class CountdownPipe implements PipeTransform { let days = duration.days(), hours = duration.hours(), minutes = duration.minutes(), seconds = duration.seconds() if (days > 0) return `${days} ${days == 1 ? 'day' : 'days'}` - else - return `${this.pad(hours)}:${this.pad(minutes)}:${this.pad(seconds)}` + else { + if (seconds < 0) + return 'expired' + else + return `${this.pad(hours)}:${this.pad(minutes)}:${this.pad(seconds)}` + } } private pad (value: number) { diff --git a/projects/ui/src/lib/popup/popup.component.scss b/projects/ui/src/lib/popup/popup.component.scss index fbd28ae..7018515 100644 --- a/projects/ui/src/lib/popup/popup.component.scss +++ b/projects/ui/src/lib/popup/popup.component.scss @@ -88,15 +88,15 @@ } &[data-theme="dark"] { - --local-background: #222; - --local-color: #fff; - --local-border: rgba(255, 255, 255, 0.125); + --local-background: var(--sk-background); + --local-color: var(--sk-text); + --local-border: var(--sk-border); background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.25)); } &[data-theme="light"] { - --local-background: #fff; - --local-color: #111; - --local-border: rgba(0, 0, 0, 0.125); + --local-background: var(--sk-background); + --local-color: var(--sk-text); + --local-border: var(--sk-border); background: linear-gradient(45deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.25)); } diff --git a/projects/ui/src/lib/section/section.component.scss b/projects/ui/src/lib/section/section.component.scss index 843402b..f56f71b 100644 --- a/projects/ui/src/lib/section/section.component.scss +++ b/projects/ui/src/lib/section/section.component.scss @@ -14,8 +14,8 @@ border-radius: var(--sk-br-m); &:hover { - opacity: 1; - background-color: rgba(255, 255, 255, 0.05); + opacity: 0.5; + background-color: var(--sk-item-active); } } @@ -23,7 +23,7 @@ .sk-section { opacity: 1; - background-color: rgba(255, 255, 255, 0.1); + background-color: var(--sk-item-active); } } } diff --git a/projects/ui/src/lib/session/session.component.html b/projects/ui/src/lib/session/session.component.html index 6e113b0..fbf5d70 100644 --- a/projects/ui/src/lib/session/session.component.html +++ b/projects/ui/src/lib/session/session.component.html @@ -1,13 +1,15 @@ -
- -
-
- {{session.title}} - {{session.expires | countdown | async}} -
-
- {{session.version}} - {{session.status}} + +
+ +
+
+ {{session.title}} +
+
+ {{session.version}} + {{session.expires | countdown | async}} +
+
-
+ diff --git a/projects/ui/src/lib/session/session.component.scss b/projects/ui/src/lib/session/session.component.scss index 4395630..8270f48 100644 --- a/projects/ui/src/lib/session/session.component.scss +++ b/projects/ui/src/lib/session/session.component.scss @@ -1,55 +1,65 @@ :host { display: block; - .sk-session { - display: flex; - align-items: center; - gap: var(--sk-gap-l); - padding: var(--sk-gap-l); - border-radius: var(--sk-br-m); - transition: 0.1s ease; - opacity: 0.5; - cursor: pointer; + a { + display: block; + color: inherit; + text-decoration: none; &:hover { - opacity: 1; - background-color: rgba(255, 255, 255, 0.05); + + .sk-session { + opacity: 0.5; + background-color: var(--sk-item-active); + } } - .sk-session-info { - flex: 1; - display: flex; - flex-direction: column; - gap: var(--sk-gap-s); + &.active { - .info-heading-line { - display: flex; - justify-content: space-between; - align-items: baseline; + .sk-session { + opacity: 1; + background-color: var(--sk-item-active); } - .info-line { - display: flex; - align-items: baseline; - gap: var(--sk-gap-m); - max-width: 248px; + } - skirda-text { - flex: 1; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - display: block; + .sk-session { + display: flex; + align-items: center; + gap: var(--sk-gap-l); + padding: var(--sk-gap-l); + border-radius: var(--sk-br-m); + transition: 0.1s ease; + opacity: 0.5; + cursor: pointer; + + .sk-session-info { + flex: 1; + display: flex; + flex-direction: column; + gap: var(--sk-gap-m); + + .info-heading-line { + display: flex; + align-items: baseline; + gap: var(--sk-gap-m); + } + + .info-line { + display: flex; + align-items: baseline; + gap: var(--sk-gap-m); + max-width: 234px; + + skirda-text { + flex: 1; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + display: block; + } } } } } - - &.active { - - .sk-session { - opacity: 1; - background-color: rgba(255, 255, 255, 0.1); - } - } } diff --git a/projects/ui/src/lib/session/session.component.ts b/projects/ui/src/lib/session/session.component.ts index b032aae..b01ff58 100644 --- a/projects/ui/src/lib/session/session.component.ts +++ b/projects/ui/src/lib/session/session.component.ts @@ -1,5 +1,7 @@ import { Component, Input, OnInit } from '@angular/core'; +import { Game } from 'src/app/interfaces/game.interface' import { Session } from 'src/app/interfaces/session.interface'; +import { LauncherService } from 'src/app/services/launcher.service' @Component({ selector: 'skirda-session[session]', @@ -9,7 +11,15 @@ import { Session } from 'src/app/interfaces/session.interface'; export class SessionComponent implements OnInit { @Input() session!: Session; - constructor() {} + constructor( + private launcher: LauncherService + ) {} ngOnInit(): void {} + + run(session: Session) { + // TODO: run session + //console.log('Game to run ' + game.title) + // this.launcher.RunGame(game) + } } diff --git a/projects/ui/src/lib/session/session.module.ts b/projects/ui/src/lib/session/session.module.ts index c008b03..20424b2 100644 --- a/projects/ui/src/lib/session/session.module.ts +++ b/projects/ui/src/lib/session/session.module.ts @@ -5,10 +5,12 @@ import { ImageIconModule } from '../image-icon/image-icon.module'; import { TypographyModule } from '../typography/typography.module'; import { TagModule } from '../tag/tag.module' import { PipesModule } from '../pipes/pipes.module' +import { RouterModule } from '@angular/router' +import { IconModule } from '../icon/icon.module' @NgModule({ declarations: [SessionComponent], - imports: [CommonModule, ImageIconModule, TypographyModule, TagModule, PipesModule], + imports: [CommonModule, ImageIconModule, TypographyModule, TagModule, PipesModule, RouterModule, IconModule], exports: [SessionComponent], }) export class SessionModule {} diff --git a/projects/ui/src/lib/tag/tag.component.scss b/projects/ui/src/lib/tag/tag.component.scss index 58a161a..6f3175c 100644 --- a/projects/ui/src/lib/tag/tag.component.scss +++ b/projects/ui/src/lib/tag/tag.component.scss @@ -1,13 +1,14 @@ :host { &.filled .sk-tag { - background-color: var(--sk-primary); + background-color: var(--sk-primary-accent); + color: #fff; } .sk-tag { display: inline-flex; align-items: center; - padding: 1px var(--sk-gap-m); + padding: 2px var(--sk-gap-m); border-radius: var(--sk-br-s); background-color: rgba(255, 255, 255, 0.05); } diff --git a/projects/ui/src/lib/typography/heading/heading.component.scss b/projects/ui/src/lib/typography/heading/heading.component.scss index a2eb592..f8d6bd4 100644 --- a/projects/ui/src/lib/typography/heading/heading.component.scss +++ b/projects/ui/src/lib/typography/heading/heading.component.scss @@ -4,22 +4,22 @@ font-weight: 600; &[data-size="1"] { - font-size: 32px; + font-size: var(--sk-typo-h1); } &[data-size="2"] { - font-size: 28px; + font-size: var(--sk-typo-h2); } &[data-size="3"] { - font-size: 24px; + font-size: var(--sk-typo-h3); } &[data-size="4"] { - font-size: 22px; + font-size: var(--sk-typo-h4); } &[data-size="5"] { - font-size: 18px; + font-size: var(--sk-typo-h5); } &[data-size="6"] { - font-size: 15px; + font-size: var(--sk-typo-h6); } } } diff --git a/projects/ui/src/lib/typography/text/text.component.scss b/projects/ui/src/lib/typography/text/text.component.scss index b7a1c46..44ae511 100644 --- a/projects/ui/src/lib/typography/text/text.component.scss +++ b/projects/ui/src/lib/typography/text/text.component.scss @@ -1,4 +1,4 @@ :host { display: inline; - font-size: 0.875rem; + font-size: var(--sk-typo-base); } diff --git a/src/_dark.scss b/src/_dark.scss new file mode 100644 index 0000000..28888a3 --- /dev/null +++ b/src/_dark.scss @@ -0,0 +1,29 @@ +@import 'src/themes'; + +// modifiers +$modifier-item-hover: -1%; +$modifier-gradient-lightness: +20%; + +$ui-background: #191919; +$ui-text: #ffffff; +$ui-gray-text: #959595; +$ui-foreground: #252525; +$ui-left-menu: rgba(0,0,0,0.65); +$ui-right-content: rgba(0,0,0,0.45); +$ui-shadow: rgba(95, 95, 95, 0.15); +$ui-item-active: rgba(255, 255, 255, 0.1); +$ui-primary-accent: #2698e4; +$ui-secondary-accent: #9a74e0; +$ui-secondary-accent-text: #ffffff; +$ui-border: rgba(255, 255, 255, 0.1); +$ui-negative: #ff4f4f; +$ui-positive: #3ac52b; +$ui-warning: #fd8a09; +$ui-palette: #F8505D, #DC496C, #C8449C, #E362B7, #975BEB, #7A7AF3, #5C99FA, #37B3FA, #71CBAF, #7ACB71, #A5D458, #F7B433, #F89C35, #FB5607; +$ui-overlay: rgba(22, 22, 22, 0.4); +$ui-dark-overlay: rgba(0, 0, 0, 0.2); +$ui-black: #000000; + +@mixin dark { + @include theme +} \ No newline at end of file diff --git a/src/_light.scss b/src/_light.scss new file mode 100644 index 0000000..7080f1f --- /dev/null +++ b/src/_light.scss @@ -0,0 +1,29 @@ +@import 'src/themes'; + +//modifiers +$modifier-item-hover: +30%; +$modifier-gradient-lightness: +50%; + +$ui-background: #ffffff; +$ui-text: #000000; +$ui-gray-text: #8c8c8c; +$ui-foreground: #f4f4f4; +$ui-left-menu: rgba(255, 255, 255, 0.75); +$ui-right-content: rgba(255,255,255,0.35); +$ui-shadow: rgba(50, 50, 50, 0.1); +$ui-item-active: rgba(0,0,0,0.075); +$ui-secondary-accent: #715AB6; +$ui-primary-accent: #5f74ff; +$ui-secondary-accent-text: #ffffff; +$ui-border: rgba(0,0,0,0.25); +$ui-negative: #ff3939; +$ui-positive: #3ac52b; +$ui-warning: #fd8a09; +$ui-palette: #FD2B3B,#DA224E,#C11C89,#AD177A,#8338EC,#5F5FF6,#3A86FF,#0BA7FF,#54C4A2,#5FC454,#95D035,#FBA807,#FD8A09,#FB5607; +$ui-overlay: rgba(55, 55, 55, 0.35); +$ui-dark-overlay: rgba(0, 0, 0, 0.7); +$ui-black: #000000; + +@mixin light { + @include theme +} \ No newline at end of file diff --git a/src/_themes.scss b/src/_themes.scss new file mode 100644 index 0000000..3fe00b5 --- /dev/null +++ b/src/_themes.scss @@ -0,0 +1,144 @@ +@use 'sass:color'; + +@mixin gradientY ($colors) { + background: linear-gradient(to bottom, $colors); +} + +@function shade ($color, $opacity) { + @return transparentize($color, $opacity); +} + +@function gradient ($color, $value: +50%) { + $top: scale-color($color, $lightness: $value); + $bottom: $color; + + @return #{$top}, #{$bottom}; +} + +@function colorsGradient ($colors) { + $line: ""; + @for $i from 1 through length($colors) { + @if ($i > 1) { + $line: $line + ','; + } + + $line: $line + #{nth($colors, $i)} + } + + @return $line; +} + + +@function hovered ($color, $value: +10%) { + @return scale-color($color, $lightness: $value); +} + +@mixin theme { + // base + --sk-background : #{$ui-background}; + --sk-background-75 : #{shade($ui-background, 0.25)}; + --sk-background-50 : #{shade($ui-background, 0.5)}; + --sk-text : #{$ui-text}; + --sk-gray-text : #{$ui-gray-text}; + --sk-foreground : #{$ui-foreground}; + --sk-foreground-hovered : #{hovered($ui-foreground)}; + --sk-left-menu : #{$ui-left-menu}; + --sk-right-content : #{$ui-right-content}; + --sk-item-active : #{$ui-item-active}; + --sk-item-hovered : #{hovered($ui-item-active, $modifier-item-hover)}; + --sk-shadow : #{shade($ui-shadow, 0)}; + --sk-shadow-hovered : #{shade($ui-shadow, 0)}; + + // primary color + --sk-primary-accent : #{$ui-primary-accent}; + --sk-primary-accent-hovered : #{hovered($ui-primary-accent)}; + @for $i from 9 through 1 { + --sk-primary-accent-#{10 * $i}: #{shade($ui-primary-accent, 1 - 0.1 * $i)}; + } + --sk-primary-accent-5: #{shade($ui-primary-accent, 0.95)}; + --sk-primary-accent-gradient: #{gradient(shade($ui-primary-accent, 0), $modifier-gradient-lightness)}; + + // secondary color + --sk-secondary-accent : #{$ui-secondary-accent}; + --sk-secondary-accent-hovered : #{hovered($ui-secondary-accent)}; + @for $i from 9 through 1 { + --sk-secondary-accent-#{10 * $i}: #{shade($ui-secondary-accent, 1 - 0.1 * $i)}; + } + --sk-secondary-accent-5: #{shade($ui-secondary-accent, 0.95)}; + --sk-secondary-accent-text : #{$ui-secondary-accent-text}; + + // border + --sk-border : #{$ui-border}; + --sk-border-hovered : #{hovered($ui-border)}; + + // negative + --sk-negative : #{$ui-negative}; + @for $i from 9 through 1 { + --sk-negative-#{10 * $i}: #{shade($ui-negative, 1 - 0.1 * $i)}; + } + --sk-negative-5: #{shade($ui-negative, 0.95)}; + --sk-negative-hovered : #{hovered($ui-negative)}; + + // positive + --sk-positive : #{$ui-positive}; + @for $i from 9 through 1 { + --sk-positive-#{10 * $i}: #{shade($ui-positive, 1 - 0.1 * $i)}; + } + --sk-positive-5: #{shade($ui-positive, 0.95)}; + --sk-positive-hovered : #{hovered($ui-positive)}; + + // warning + --sk-warning : #{$ui-warning}; + @for $i from 9 through 1 { + --sk-warning-#{10 * $i}: #{shade($ui-warning, 1 - 0.1 * $i)}; + } + --sk-warning-5: #{shade($ui-warning, 0.95)}; + --sk-warning-hovered : #{hovered($ui-warning)}; + + // palette colors & gradients + @for $i from 1 through length($ui-palette) { + --sk-palette-#{$i - 1}-5: #{shade(nth($ui-palette, $i), 0.95)}; + --sk-palette-#{$i - 1}: #{nth($ui-palette, $i)}; + --sk-palette-gradient-#{$i - 1}: #{gradient(nth($ui-palette, $i), $modifier-gradient-lightness)}; + + @for $j from 9 through 1 { + --sk-palette-#{$i - 1}-#{10 * $j}: #{shade(nth($ui-palette, $i), 1 - 0.1 * $j)}; + --sk-palette-gradient-#{$i - 1}-#{10 * $j}: #{gradient(shade(nth($ui-palette, $i), 1 - 0.1 * $j), $modifier-gradient-lightness)}; + } + + --sk-palette-#{$i - 1}-5: #{shade(nth($ui-palette, $i), 0.95)}; + --sk-palette-gradient-#{$i - 1}-5: #{gradient(shade(nth($ui-palette, $i), 0.95), $modifier-gradient-lightness)}; + } + + --sk-overlay: #{$ui-overlay}; + --sk-overlay-50: #{shade($ui-overlay, 0.2)}; + --sk-dark-overlay: #{$ui-dark-overlay}; + + // black & shades + --sk-black: #{$ui-black}; + @for $i from 9 through 1 { + --sk-black-#{10 * $i}: #{shade($ui-black, 1 - 0.1 * $i)}; + } + + --sk-typo-base: 14px; + --sk-typo-special: 13px; + --sk-typo-title: 24px; + --sk-typo-subtitle: 12px; + --sk-typo-h1: 26px; + --sk-typo-h2: 24px; + --sk-typo-h3: 22px; + --sk-typo-h4: 20px; + --sk-typo-h5: 17px; + --sk-typo-h6: 15px; + + // gaps + --sk-gap-xs: 0.125rem; + --sk-gap-s: 0.25rem; + --sk-gap-m: 0.5rem; + --sk-gap-l: 0.75rem; + --sk-gap-xl: 1rem; + + // border-radius + --sk-br-s: 0.25rem; + --sk-br-m: 0.5rem; +} \ No newline at end of file diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 628d496..d3ae4d6 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,5 +1,6 @@ import { Component, OnInit, AfterViewInit } from '@angular/core'; import { Router, RouterEvent } from '@angular/router'; +import { LocalStorage, LocalStorageService } from 'ngx-webstorage' import { GoWebViewInit } from './services/go'; @Component({ @@ -9,16 +10,30 @@ import { GoWebViewInit } from './services/go'; }) export class AppComponent implements OnInit{ - constructor(private router: Router){ } + title = 'go-web'; + + constructor(private router: Router, private storage: LocalStorageService) { } + + @LocalStorage('theme', 'dark') + public theme!: string ngOnInit(){ document.addEventListener('GoChangeRoute_Callback', (event:any) => { this.router.navigate([event.detail]) console.log("Navigating to route:" + event.detail) }) + + this.setTheme(this.theme) + this.storage.observe('theme').subscribe(value => { + this.setTheme(this.theme) + }) } + ngAfterViewInit(){ GoWebViewInit() } - title = 'go-web'; + + setTheme (theme: string) { + document.querySelector('html')?.setAttribute('data-theme', theme) + } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index de44eb7..020ef95 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -16,6 +16,7 @@ import { SandboxModule } from './components/sandbox/sandbox.module'; import { SignInModule } from './components/sign-in/sign-in.module'; import { LoadingScreenComponent } from './components/loading-screen/loading-screen.component'; import { UiModule } from 'projects/ui/src/lib/ui.module' +import { NgxWebstorageModule } from 'ngx-webstorage' @NgModule({ declarations: [AppComponent, LoadingScreenComponent], @@ -28,7 +29,8 @@ import { UiModule } from 'projects/ui/src/lib/ui.module' PlaygroundModule, SandboxModule, SignInModule, - UiModule + UiModule, + NgxWebstorageModule.forRoot({ prefix: 'skirda', separator: '.', caseSensitive: true }) ], providers: [ { provide: APP_BASE_HREF, useValue: '/' }, diff --git a/src/app/components/loading-screen/loading-screen.component.scss b/src/app/components/loading-screen/loading-screen.component.scss index 0194221..88a8452 100644 --- a/src/app/components/loading-screen/loading-screen.component.scss +++ b/src/app/components/loading-screen/loading-screen.component.scss @@ -20,7 +20,6 @@ from { opacity: 1; scale: 0; - background-color: #d6282800; } 50% { opacity: 0.5; @@ -28,7 +27,6 @@ to { opacity: 0; scale: 3; - background-color: #d6282899; } } @@ -37,7 +35,7 @@ width: 140px; height: 140px; overflow: hidden; - background-color: rgba(255, 255, 255, 0.1); + background-color: var(--sk-item-active); mask-image: url('/assets/icon_mask.svg'); mask-size: cover; user-select: none; @@ -58,17 +56,15 @@ translate: -50% -50%; width: 24px; height: 24px; - border: 1.5px solid var(--sk-primary); + border: 1.5px solid var(--sk-primary-accent); border-radius: 50%; animation: loaderPulse 1.4s linear -0.7s infinite forwards; mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 75%); z-index: 0; - box-shadow: inset 0px 0.25px 0px 0px rgba(255, 255, 255, 0.5); } &:after { animation-delay: 0s; - border: 1.5px solid var(--sk-secondary); } skirda-heading { diff --git a/src/app/components/main/main-menu/main-menu.component.html b/src/app/components/main/main-menu/main-menu.component.html index 14f0323..08818b3 100644 --- a/src/app/components/main/main-menu/main-menu.component.html +++ b/src/app/components/main/main-menu/main-menu.component.html @@ -1,32 +1,35 @@ -
+
-
- - - - Servers - - - - Library - - - - Friends - - - - Downloads - +
+
+ + + + Servers + + + + Library + + + + Friends + + + + Downloads + +
+ +
- - +
diff --git a/src/app/components/main/main-menu/main-menu.component.scss b/src/app/components/main/main-menu/main-menu.component.scss index 66c7227..50760e1 100644 --- a/src/app/components/main/main-menu/main-menu.component.scss +++ b/src/app/components/main/main-menu/main-menu.component.scss @@ -9,24 +9,24 @@ flex-direction: column; width: 100%; height: 100%; - background-color: rgba(0,0,0,0.65); - padding: 2rem 0.5rem 0.5rem 0.5rem; + background-color: var(--sk-left-menu); + padding: 0.5rem 0.5rem 0.5rem 0.5rem; box-sizing: border-box; backdrop-filter: blur(64px); overflow-y: auto; - gap: 1rem; - .sk-search-panel { + .menu-search-panel { display: flex; gap: 0.625rem; + flex-shrink: 0; skirda-input { flex: 1; } button { - height: 100%; - aspect-ratio: 1/1; + height: 42px; + width: 42px; padding: 0; margin: 0; outline: none; @@ -37,17 +37,37 @@ border-radius: var(--sk-br-m); cursor: pointer; flex-shrink: 0; + color: var(--sk-primary-accent); &:hover { - background-color: rgba(255, 255, 255, 0.05); + background-color: var(--sk-primary-accent-20); } } } - .sk-sections { + .menu-content { + flex: 1; + overflow-y: auto; + padding: 1.25rem 0rem; display: flex; flex-direction: column; - gap: 0.1875rem; + gap: var(--sk-gap-l); + + &[data-scroll-y="true"] { + mask-image: linear-gradient(to bottom, transparent 0%, black 1.25rem, black calc(100% - 1.25rem), transparent); + padding-right: 0.5rem; + } + + .menu-sections { + display: grid; + grid-template-columns: 1fr 1fr; + flex-direction: column; + gap: 0.1875rem; + } + } + + app-menu-profile { + flex-shrink: 0; } } } diff --git a/src/app/components/main/main-menu/menu-games/menu-games.component.html b/src/app/components/main/main-menu/menu-games/menu-games.component.html index d7ff160..c4f11b4 100644 --- a/src/app/components/main/main-menu/menu-games/menu-games.component.html +++ b/src/app/components/main/main-menu/menu-games/menu-games.component.html @@ -3,7 +3,6 @@
diff --git a/src/app/components/main/main-menu/menu-profile/menu-profile.component.html b/src/app/components/main/main-menu/menu-profile/menu-profile.component.html new file mode 100644 index 0000000..d618c35 --- /dev/null +++ b/src/app/components/main/main-menu/menu-profile/menu-profile.component.html @@ -0,0 +1,11 @@ + +
+ {{profile.username}} + online +
+
+ +
+ + + \ No newline at end of file diff --git a/src/app/components/main/main-menu/menu-profile/menu-profile.component.scss b/src/app/components/main/main-menu/menu-profile/menu-profile.component.scss new file mode 100644 index 0000000..fc3bd9c --- /dev/null +++ b/src/app/components/main/main-menu/menu-profile/menu-profile.component.scss @@ -0,0 +1,36 @@ +:host { + display: flex; + gap: var(--sk-gap-l); + padding: var(--sk-gap-l); + align-items: center; + + .profile-info { + flex: 1; + display: flex; + flex-direction: column; + gap: var(--sk-gap-s); + + skirda-text { + opacity: 0.5; + } + } + + skirda-icon { + cursor: pointer; + } +} + +:host::ng-deep { + .theme-toggle { + padding: var(--sk-gap-s); + border-radius: 2rem; + + &.active { + background-color: var(--sk-primary-accent); + + skirda-icon ng-icon { + color: #fff!important; + } + } + } +} diff --git a/src/app/components/main/main-menu/menu-profile/menu-profile.component.spec.ts b/src/app/components/main/main-menu/menu-profile/menu-profile.component.spec.ts new file mode 100644 index 0000000..d9555b3 --- /dev/null +++ b/src/app/components/main/main-menu/menu-profile/menu-profile.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MenuProfileComponent } from './menu-profile.component'; + +describe('MenuProfileComponent', () => { + let component: MenuProfileComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ MenuProfileComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(MenuProfileComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/main/main-menu/menu-profile/menu-profile.component.ts b/src/app/components/main/main-menu/menu-profile/menu-profile.component.ts new file mode 100644 index 0000000..7fa837d --- /dev/null +++ b/src/app/components/main/main-menu/menu-profile/menu-profile.component.ts @@ -0,0 +1,25 @@ +import { Component, OnInit } from '@angular/core'; +import { LocalStorage } from 'ngx-webstorage' +import { Profile } from 'src/app/interfaces/profile.interface' + +@Component({ + selector: 'app-menu-profile', + templateUrl: './menu-profile.component.html', + styleUrls: ['./menu-profile.component.scss'] +}) +export class MenuProfileComponent implements OnInit { + @LocalStorage('profile', {username: 'username'}) + public profile!: Profile + + @LocalStorage('theme', 'dark') + public theme!: string + + constructor() { } + + ngOnInit(): void { + } + + toggleTheme () { + this.theme = this.theme == 'light' ? 'dark' : 'light' + } +} diff --git a/src/app/components/main/main-menu/menu-sessions/menu-sessions.component.html b/src/app/components/main/main-menu/menu-sessions/menu-sessions.component.html index 80bf167..2849052 100644 --- a/src/app/components/main/main-menu/menu-sessions/menu-sessions.component.html +++ b/src/app/components/main/main-menu/menu-sessions/menu-sessions.component.html @@ -3,7 +3,6 @@
diff --git a/src/app/components/main/main-root/main-root.component.scss b/src/app/components/main/main-root/main-root.component.scss index f469783..fd27ace 100644 --- a/src/app/components/main/main-root/main-root.component.scss +++ b/src/app/components/main/main-root/main-root.component.scss @@ -23,7 +23,7 @@ .content { flex: 1; - background-color: rgba(0,0,0,0.15); + background-color: var(--sk-right-content); display: flex; backdrop-filter: blur(2rem); // overflow-y: auto; diff --git a/src/app/components/main/main.module.ts b/src/app/components/main/main.module.ts index 204bba5..0f73a9b 100644 --- a/src/app/components/main/main.module.ts +++ b/src/app/components/main/main.module.ts @@ -12,11 +12,9 @@ import { GamesPageComponent } from './sections/games-page/games-page.component'; import { SessionPageComponent } from './sections/session-page/session-page.component'; import { GamePageComponent } from './sections/game-page/game-page.component'; import { MainRoutingModule } from './routing.module'; -import { ButtonModule } from 'projects/ui/src/lib/button/button.module'; -import { TypographyModule } from 'projects/ui/src/lib/typography/typography.module'; -import { IconModule } from 'projects/ui/src/lib/icon/icon.module'; import { DownloadsPageComponent } from './sections/downloads-page/downloads-page.component'; -import { PopupModule } from 'projects/ui/src/public-api'; +import { MenuProfileComponent } from './main-menu/menu-profile/menu-profile.component' +import { SettingsPageComponent } from './sections/settings-page/settings-page.component' @NgModule({ declarations: [ @@ -30,17 +28,15 @@ import { PopupModule } from 'projects/ui/src/public-api'; SessionPageComponent, GamePageComponent, DownloadsPageComponent, + SettingsPageComponent, + MenuProfileComponent ], imports: [ CommonModule, UiModule, ReactiveFormsModule, FormsModule, - MainRoutingModule, - TypographyModule, - ButtonModule, - IconModule, - PopupModule, + MainRoutingModule ], exports: [ MainRootComponent, @@ -53,6 +49,8 @@ import { PopupModule } from 'projects/ui/src/public-api'; SessionPageComponent, GamePageComponent, DownloadsPageComponent, + SettingsPageComponent, + MenuProfileComponent ], }) export class MainModule {} diff --git a/src/app/components/main/routing.module.ts b/src/app/components/main/routing.module.ts index 21707e6..939f2ba 100644 --- a/src/app/components/main/routing.module.ts +++ b/src/app/components/main/routing.module.ts @@ -7,6 +7,7 @@ import { GamePageComponent } from './sections/game-page/game-page.component'; import { GamesPageComponent } from './sections/games-page/games-page.component'; import { ServersPageComponent } from './sections/servers-page/servers-page.component'; import { SessionPageComponent } from './sections/session-page/session-page.component'; +import { SettingsPageComponent } from './sections/settings-page/settings-page.component' const routes: Routes = [ { @@ -29,6 +30,10 @@ const routes: Routes = [ path: 'downloads', component: DownloadsPageComponent, }, + { + path: 'settings', + component: SettingsPageComponent, + }, { path: 'session/:id', component: SessionPageComponent, diff --git a/src/app/components/main/sections/settings-page/settings-page.component.html b/src/app/components/main/sections/settings-page/settings-page.component.html new file mode 100644 index 0000000..74bee40 --- /dev/null +++ b/src/app/components/main/sections/settings-page/settings-page.component.html @@ -0,0 +1,8 @@ +
+
+
+ Settings +
+
Settings page will be here
+
+
\ No newline at end of file diff --git a/src/app/components/main/sections/settings-page/settings-page.component.scss b/src/app/components/main/sections/settings-page/settings-page.component.scss new file mode 100644 index 0000000..e61ca7a --- /dev/null +++ b/src/app/components/main/sections/settings-page/settings-page.component.scss @@ -0,0 +1,7 @@ +@use '../global'; + +:host { + display: block; + + @include global.page(); +} diff --git a/src/app/components/main/sections/settings-page/settings-page.component.spec.ts b/src/app/components/main/sections/settings-page/settings-page.component.spec.ts new file mode 100644 index 0000000..39fb104 --- /dev/null +++ b/src/app/components/main/sections/settings-page/settings-page.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SettingsPageComponent } from './settings-page.component'; + +describe('SettingsPageComponent', () => { + let component: SettingsPageComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ SettingsPageComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(SettingsPageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/main/sections/settings-page/settings-page.component.ts b/src/app/components/main/sections/settings-page/settings-page.component.ts new file mode 100644 index 0000000..5384639 --- /dev/null +++ b/src/app/components/main/sections/settings-page/settings-page.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-settings-page', + templateUrl: './settings-page.component.html', + styleUrls: ['./settings-page.component.scss'] +}) +export class SettingsPageComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/interfaces/profile.interface.ts b/src/app/interfaces/profile.interface.ts new file mode 100644 index 0000000..a20f108 --- /dev/null +++ b/src/app/interfaces/profile.interface.ts @@ -0,0 +1,3 @@ +export interface Profile { + username: string +} \ No newline at end of file diff --git a/src/app/interfaces/session.interface.ts b/src/app/interfaces/session.interface.ts index 3be6012..a070c27 100644 --- a/src/app/interfaces/session.interface.ts +++ b/src/app/interfaces/session.interface.ts @@ -1,9 +1,8 @@ export interface Session { - gameId: string; - icon: string; - title: string; - status?: string; - version: string; - expires: Date; - } - \ No newline at end of file + gameId: string; + icon: string; + title: string; + status?: string; + version: string; + expires: Date; +} \ No newline at end of file diff --git a/src/index.html b/src/index.html index f6fc534..ffbdd68 100644 --- a/src/index.html +++ b/src/index.html @@ -1,5 +1,5 @@ - + GoWeb diff --git a/src/styles.scss b/src/styles.scss index 7940735..62d6d7d 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,9 +1,11 @@ +@use 'src/light'; +@use 'src/dark'; @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap'); html, body { - background-color: #222; - color: #fff; - font-size: 16px; + background-color: var(--sk-background); + color: var(--sk-text); + font-size: var(--sk-typo-base); margin: 0; font-family: var(--font); line-height: 90%; @@ -14,29 +16,28 @@ button, input, textarea { font-family: var(--font); } +@media (prefers-color-scheme: dark) { + html:root { + @include dark.theme; + } +} + +@media (prefers-color-scheme: light) { + html:root { + @include light.theme; + } +} + +html[data-theme="light"]:root { + @include light.theme; +} + +html[data-theme="dark"]:root { + @include dark.theme; +} + :root { --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - --sk-gap-xs: 0.125rem; - --sk-gap-s: 0.25rem; - --sk-gap-m: 0.5rem; - --sk-gap-l: 0.75rem; - --sk-gap-xl: 1rem; - - // colors - --sk-input: rgba(18,18,18,0.5); - --sk-input-focus: rgba(18,18,18,0.9); - --sk-primary: #d62828ff; - --sk-secondary: #f77f00ff; - - // border-radius - --sk-br-s: 0.25rem; - --sk-br-m: 0.5rem; - --sk-palette-1: #ffbe0b; - --sk-palette-2: #fb5607; - --sk-palette-3: #ff006e; - --sk-palette-4: #8338ec; - --sk-palette-5: #3a86ff; - --sk-overlay: rgba(0,0,0,0.5); } /* Works on Firefox */