diff --git a/package.json b/package.json index 2456e7c0..0fe1ce5f 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ "test": "jest", "coverage": "jest --coverage true", "lint:scss": "stylelint \"**/*.scss\"", - "lint:css": "stylelint --fix \"**/*.css\"", + "lint:css": "stylelint \"**/*.css\"", "lint": "ng lint", "lint:fix": "ng lint --fix" }, diff --git a/src/app/components/game/game-component.component.html b/src/app/components/game/game-component.component.html index 098b0177..b09a50d9 100644 --- a/src/app/components/game/game-component.component.html +++ b/src/app/components/game/game-component.component.html @@ -46,31 +46,31 @@ - + @if (help.visible) { } - + @if (info.visible) { } - + @if (settings.visible) { } - + @if (newgame.visible) { } - + @if (game.message) {
@if (game.message.msgID) { diff --git a/src/app/components/game/game-component.component.scss b/src/app/components/game/game-component.component.scss index d45829d0..bd755d4d 100644 --- a/src/app/components/game/game-component.component.scss +++ b/src/app/components/game/game-component.component.scss @@ -74,8 +74,7 @@ .ctrl { display: inline-block; color: var(--main-text-color); - - @include no-select; + user-select: none; .link { text-decoration: none; @@ -251,83 +250,6 @@ overflow: hidden; } - .overlay-info { - ::ng-deep { - .overlay { - z-index: 10010; - - .overlay-popup { - width: 90%; - height: 90%; - } - } - } - } - - .overlay-settings { - ::ng-deep { - .overlay { - z-index: 10010; - - .overlay-popup { - width: 90%; - max-height: 90%; - max-width: 1400px; - } - } - } - } - - .overlay-newgame { - ::ng-deep { - .overlay { - z-index: 10010; - - .overlay-popup { - width: 98%; - height: 98%; - overflow: hidden; - - @include respond-to-height(small-down) { - padding: 10px; - } - } - } - } - } - - .overlay-message { - ::ng-deep { - .overlay-message-message { - padding: 2em; - } - - .overlay-popup { - cursor: pointer; - font-weight: 600; - text-align: center; - color: var(--dialog-headline-color); - padding: 0; - - @include no-select; - } - } - } - - .overlay-help { - ::ng-deep { - .overlay { - z-index: 10010; - - .overlay-popup { - max-height: 90%; - width: 90%; - max-width: 1200px; - } - } - } - } - @include respond-to-horizontal-device(pad) { flex-direction: row; diff --git a/src/app/modules/core/components/board/board.component.scss b/src/app/modules/core/components/board/board.component.scss index d8e64383..8478cf6e 100644 --- a/src/app/modules/core/components/board/board.component.scss +++ b/src/app/modules/core/components/board/board.component.scss @@ -13,8 +13,7 @@ position: relative; transform-origin: 0 0 0; transform: translate(0, 0) scale(1); - - @include no-select; + user-select: none; } .gesture-indicator { diff --git a/src/app/modules/core/components/dialog/dialog.component.html b/src/app/modules/core/components/dialog/dialog.component.html index 6835e55a..1ef26516 100644 --- a/src/app/modules/core/components/dialog/dialog.component.html +++ b/src/app/modules/core/components/dialog/dialog.component.html @@ -1,5 +1,5 @@ @if (visible) { -
+
@if (title) {

🀄️{{ title }}

diff --git a/src/app/modules/core/components/dialog/dialog.component.scss b/src/app/modules/core/components/dialog/dialog.component.scss index 43dd9d39..6c476873 100644 --- a/src/app/modules/core/components/dialog/dialog.component.scss +++ b/src/app/modules/core/components/dialog/dialog.component.scss @@ -20,5 +20,4 @@ font-size: 1.1em; } } - } diff --git a/src/app/modules/core/components/dialog/dialog.component.ts b/src/app/modules/core/components/dialog/dialog.component.ts index caa7c2fa..9e2ad906 100644 --- a/src/app/modules/core/components/dialog/dialog.component.ts +++ b/src/app/modules/core/components/dialog/dialog.component.ts @@ -7,6 +7,7 @@ import {Component, EventEmitter, Input, Output} from '@angular/core'; }) export class DialogComponent { @Input() title?: string; + @Input() className: string; @Input() visible: boolean = false; @Input() noClose: boolean = false; @Output() readonly clickEvent = new EventEmitter(); diff --git a/src/app/modules/editor/components/board/board.component.scss b/src/app/modules/editor/components/board/board.component.scss index b302fcfd..60778ecc 100644 --- a/src/app/modules/editor/components/board/board.component.scss +++ b/src/app/modules/editor/components/board/board.component.scss @@ -8,8 +8,7 @@ width: 100%; max-height: 960px; background-color: var(--main-background-color); - - @include no-select; + user-select: none; g.stage { transition: opacity 500ms; diff --git a/src/app/modules/editor/components/editor/editor.component.scss b/src/app/modules/editor/components/editor/editor.component.scss index 9612d374..7cc1411a 100644 --- a/src/app/modules/editor/components/editor/editor.component.scss +++ b/src/app/modules/editor/components/editor/editor.component.scss @@ -22,6 +22,30 @@ cursor: pointer; } + .buttons { + text-align: center; + + button { + background-color: transparent; + background-image: none; + border: 1px solid var(--main-bg-color-dk); + cursor: pointer; + font-size: 1em; + color: var(--text-highlight-color); + padding: 2px 16px; + + &:hover { + color: var(--main-text-color-hover); + border: 1px solid var(--main-text-color-hover); + } + + &[disabled] { + color: var(--text-disabled-color); + cursor: default; + } + } + } + .editor-content { width: 100%; height: 100%; @@ -154,29 +178,4 @@ } } - - .buttons { - text-align: center; - - button { - background-color: transparent; - background-image: none; - border: 1px solid var(--main-bg-color-dk); - cursor: pointer; - font-size: 1em; - color: var(--text-highlight-color); - padding: 2px 16px; - - &:hover { - color: var(--main-text-color-hover); - border: 1px solid var(--main-text-color-hover); - } - - &[disabled] { - color: var(--text-disabled-color); - cursor: default; - } - } - } - } diff --git a/src/app/modules/editor/components/layout/layout.component.scss b/src/app/modules/editor/components/layout/layout.component.scss index 781a0e72..7cde1abe 100644 --- a/src/app/modules/editor/components/layout/layout.component.scss +++ b/src/app/modules/editor/components/layout/layout.component.scss @@ -33,7 +33,25 @@ } button { - @include button; + background-color: transparent; + background-image: none; + color: var(--text-highlight-color); + border: 1px solid var(--main-bg-color-dk); + cursor: pointer; + + &:hover { + color: var(--main-text-color-hover); + border: 1px solid var(--main-bg-color-lt); + } + + &.text-button { + padding: 10px 16px; + } + + &[disabled] { + color: var(--text-disabled-color); + cursor: default; + } } } @@ -85,8 +103,7 @@ } span { - @include no-select; - + user-select: none; display: inline-block; min-width: 0.8em; } @@ -113,8 +130,7 @@ span { cursor: pointer; text-decoration: underline; - - @include no-select; + user-select: none; } } diff --git a/src/app/modules/editor/components/manager/manager.component.scss b/src/app/modules/editor/components/manager/manager.component.scss index 6315e8db..cd13751d 100644 --- a/src/app/modules/editor/components/manager/manager.component.scss +++ b/src/app/modules/editor/components/manager/manager.component.scss @@ -90,9 +90,26 @@ } button { - @include button; - + background-color: transparent; + background-image: none; + color: var(--text-highlight-color); + border: 1px solid var(--main-bg-color-dk); + cursor: pointer; text-align: center; + + &:hover { + color: var(--main-text-color-hover); + border: 1px solid var(--main-bg-color-lt); + } + + &.text-button { + padding: 10px 16px; + } + + &[disabled] { + color: var(--text-disabled-color); + cursor: default; + } } } diff --git a/src/app/style/_mixins.scss b/src/app/style/_mixins.scss index 37c3e391..73f76c96 100644 --- a/src/app/style/_mixins.scss +++ b/src/app/style/_mixins.scss @@ -1,62 +1,5 @@ @import "variables"; -@mixin fontdef($OpenSansPath, $OpenSansVersion, $FontType:"Regular") { - src: url('#{$OpenSansPath}/#{$FontType}/OpenSans-#{$FontType}.eot?v=#{$OpenSansVersion}'); - src: url('#{$OpenSansPath}/#{$FontType}/OpenSans-#{$FontType}.eot?#iefix&v=#{$OpenSansVersion}') format('embedded-opentype'), - url('#{$OpenSansPath}/#{$FontType}/OpenSans-#{$FontType}.woff2?v=#{$OpenSansVersion}') format('woff2'), - url('#{$OpenSansPath}/#{$FontType}/OpenSans-#{$FontType}.woff?v=#{$OpenSansVersion}') format('woff'), - url('#{$OpenSansPath}/#{$FontType}/OpenSans-#{$FontType}.ttf?v=#{$OpenSansVersion}') format('truetype'), - url('#{$OpenSansPath}/#{$FontType}/OpenSans-#{$FontType}.svg?v=#{$OpenSansVersion}##{$FontType}') format('svg'); -} - -@mixin scale($amount) { // Safari and Chrome(Engine:-Webkit) // Mozilla(Engine:-Gecko) // IE(Engine:-Trident) // Opera(Engine:-Presto) - transform: scale($amount); -} - -@mixin box-shadow($top, $left, $blur, $color, $inset: false) { - @if $inset { - box-shadow: inset $top $left $blur $color; - } @else { - box-shadow: $top $left $blur $color; - } -} - -@mixin rounded($radius: 0.5em) { - border-radius: $radius; -} - -@mixin no-select() { - user-select: none; -} - -@mixin box($box) { - box-sizing: $box; -} - -@mixin blur($blur) { - filter: blur($blur); -} - -@mixin text-shadow($x: 2px, $y: 2px, $blur: 5px, $color: rgba(0,0,0,.4)) { - text-shadow: $x $y $blur $color; -} - -@mixin text-shadow-white-gradient() { - text-shadow: #eee 1px 0 0, #eee -1px 0 0, #eee 0 1px 0, #eee 0 -1px 0, #bbb 3px 3px 5px, #b1ae97 5px 5px 15px; -} - -@mixin opacity($opacity) { - opacity: $opacity; - - $opacity-ie: $opacity * 100; - - filter: alpha(opacity=$opacity-ie); // IE8 -} - -@mixin transition($args...) { - transition: $args; -} - @mixin respond-to-horizontal-device($device) { @if $device == pad { @media only screen and (width >= 400px) and (height <= 600px) { @@ -212,123 +155,3 @@ } } } - -@mixin button() { - background-color: transparent; - background-image: none; - color: var(--text-highlight-color); - border: 1px solid var(--main-bg-color-dk); - cursor: pointer; - - &:hover { - color: var(--main-text-color-hover); - border: 1px solid var(--main-bg-color-lt); - } - - &.text-button { - padding: 10px 16px; - } - - &[disabled] { - color: var(--text-disabled-color); - cursor: default; - } -} - -@mixin overlay() { - .overlay { - height: 100%; - width: 100%; - position: fixed; - top: 0; - left: 0; - z-index: 10000; - background-color: rgb(0 0 0 / 20%); - max-height: 100%; - font-size: $base-font-size * 0.9; - - button, select { - background-color: var(--input-background-color); - border-color: var(--input-border-color); - color: var(--input-text-color); - text-overflow: ellipsis; - padding: 8px 12px; - font-size: 0.9em; - } - - @include respond-to(medium-up) { - font-size: $base-font-size * 1.1; - } - - @include respond-to(large-up) { - font-size: $base-font-size * 1.2; - } - - @include respond-to(huge-up) { - font-size: $base-font-size * 1.2; - } - - @include respond-to(jumbo-up) { - font-size: $base-font-size * 2; - } - - @include respond-to-height(small-down) { - font-size: $base-font-size * 0.9; - } - - .overlay-popup { - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - max-height: 98%; - max-width: 98%; - margin-left: auto; - margin-right: auto; - border: 1px solid var(--dialog-border-color); - background-color: var(--dialog-background-color); - line-height: 1.2em; - padding: 1.5em 2em; - display: flex; - flex-direction: column; - - @include rounded(12px); - @include box-shadow(12px, 14px, 16px, rgba(0, 0, 0, 0.5)); - - @include respond-to(jumbo-up) { - @include rounded(30px); - } - - @include respond-to(huge-up) { - max-height: 80%; - max-width: 80%; - } - - @include respond-to(large-down) { - padding: 1.5em; - } - - @include respond-to(pico-down) { - padding: 1.5em 1em; - } - } - - .close { - right: 8px; - top: 8px; - position: absolute; - color: var(--close-color); - cursor: pointer; - padding: 3px; - border-radius: 6px; - - i { - font-size: 1.2em; - } - - &:hover { - color: var(--close-color-hover) - } - } - } -} diff --git a/src/styles.scss b/src/styles.scss index 94e024e2..76581e3f 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -111,7 +111,159 @@ p { cursor: pointer; } -@include overlay; +.overlay { + height: 100%; + width: 100%; + position: fixed; + top: 0; + left: 0; + z-index: 10000; + background-color: rgb(0 0 0 / 20%); + max-height: 100%; + font-size: $base-font-size * 0.9; + + button, select { + background-color: var(--input-background-color); + border-color: var(--input-border-color); + color: var(--input-text-color); + text-overflow: ellipsis; + padding: 8px 12px; + font-size: 0.9em; + } + + @include respond-to(medium-up) { + font-size: $base-font-size * 1.1; + } + + @include respond-to(large-up) { + font-size: $base-font-size * 1.2; + } + + @include respond-to(huge-up) { + font-size: $base-font-size * 1.2; + } + + @include respond-to(jumbo-up) { + font-size: $base-font-size * 2; + } + + @include respond-to-height(small-down) { + font-size: $base-font-size * 0.9; + } + + .overlay-popup { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + max-height: 98%; + max-width: 98%; + margin-left: auto; + margin-right: auto; + border: 1px solid var(--dialog-border-color); + background-color: var(--dialog-background-color); + line-height: 1.2em; + padding: 1.5em 2em; + display: flex; + flex-direction: column; + box-shadow: 12px 14px 16px, rgb(0 0 0 / 50%); + border-radius: 12px; + + @include respond-to(jumbo-up) { + border-radius: 30px; + } + + @include respond-to(huge-up) { + max-height: 80%; + max-width: 80%; + } + + @include respond-to(large-down) { + padding: 1.5em; + } + + @include respond-to(pico-down) { + padding: 1.5em 1em; + } + } + + .close { + right: 8px; + top: 8px; + position: absolute; + color: var(--close-color); + cursor: pointer; + padding: 3px; + border-radius: 6px; + + i { + font-size: 1.2em; + } + + &:hover { + color: var(--close-color-hover) + } + } + + &.overlay-info { + z-index: 10010; + + .overlay-popup { + width: 90%; + height: 90%; + } + } + + &.overlay-settings { + z-index: 10010; + + .overlay-popup { + width: 90%; + max-height: 90%; + max-width: 1400px; + } + } + + &.overlay-newgame { + z-index: 10010; + + .overlay-popup { + width: 98%; + height: 98%; + overflow: hidden; + + @include respond-to-height(small-down) { + padding: 10px; + } + } + } + + &.overlay-message { + .overlay-message-message { + padding: 2em; + } + + .overlay-popup { + cursor: pointer; + font-weight: 600; + text-align: center; + color: var(--dialog-headline-color); + padding: 0; + user-select: none; + pointer-events: none; + } + } + + &.overlay-help { + z-index: 10010; + + .overlay-popup { + max-height: 90%; + width: 90%; + max-width: 1200px; + } + } +} %clearfix:after { display: block;