26.09.05.A

This commit is contained in:
marlon-erler
2026-09-05 02:36:46 +02:00
parent b1da972d09
commit 5703aaa812
5 changed files with 8759 additions and 11456 deletions
+49 -128
View File
@@ -1,5 +1,5 @@
/* src/colors.css */
[color]:not([color="standard"]) {
[color]:not([color=standard]) {
--primary: hsl(var(--hue), 100%, var(--accent-luma));
--primary-hover: hsl(var(--hue), 95%, var(--accent-luma));
--primary-active: hsl(var(--hue), 80%, var(--accent-luma));
@@ -9,72 +9,74 @@
--surface-hover: hsla(var(--hue), 100%, 5%, 10%);
--surface-active: hsla(var(--hue), 100%, 5%, 15%);
}
body[theme="dark"] [color]:not([color="standard"]) {
body[theme=dark] [color]:not([color=standard]) {
--accent-luma: var(--accent-luma-dark);
--accent-text-luma: var(--accent-text-luma-dark);
--surface: hsla(var(--hue), 100%, 95%, 5%);
--surface-hover: hsla(var(--hue), 100%, 95%, 10%);
--surface-active: hsla(var(--hue), 100%, 95%, 15%);
}
[color]:not([color="standard"]).tile {
[color]:not([color=standard]).tile {
--gradient-luma-1: 70%;
--gradient-luma-2: 90%;
--hover-luma: 75%;
--active-luma: 80%;
--text-luma: 20%;
--surface: linear-gradient(
--surface:
linear-gradient(
120deg,
hsl(var(--hue), 100%, var(--gradient-luma-1)),
hsla(var(--hue), 100%, var(--gradient-luma-2), 40%)
);
hsla(var(--hue), 100%, var(--gradient-luma-2), 40%) );
--surface-hover: hsl(var(--hue), 100%, var(--hover-luma));
--surface-active: hsl(var(--hue), 100%, var(--active-luma));
--text-normal: hsl(var(--hue), 100%, var(--text-luma));
}
body[theme="dark"] [color]:not([color="standard"]).tile {
body[theme=dark] [color]:not([color=standard]).tile {
--gradient-luma-1: 20%;
--gradient-luma-2: 15%;
--hover-luma: 25%;
--active-luma: 30%;
--text-luma: 90%;
--surface: linear-gradient(
--surface:
linear-gradient(
120deg,
hsl(var(--hue), 100%, var(--gradient-luma-1)),
hsla(var(--hue), 100%, var(--gradient-luma-2), 40%)
);
hsla(var(--hue), 100%, var(--gradient-luma-2), 40%) );
--surface-hover: hsl(var(--hue), 100%, var(--hover-luma));
--surface-active: hsl(var(--hue), 100%, var(--active-luma));
--text-normal: hsl(var(--hue), 100%, var(--text-luma));
}
[color]:not([color="standard"]).fill-color {
[color]:not([color=standard]).fill-color {
color: white;
background-color: var(--primary);
}
[color]:not([color="standard"])[selected].fill-color {
[color]:not([color=standard])[selected].fill-color {
color: var(--primary);
}
@media (min-width: 1024px) {
[color]:not([color="standard"]).background {
[color]:not([color=standard]).background {
--luma: var(--background-luma);
--sat: 100%;
background: hsl(var(--hue), var(--sat), var(--luma), 40%);
}
body[theme="dark"] [color]:not([color="standard"]).background {
body[theme=dark] [color]:not([color=standard]).background {
--luma: var(--background-luma-dark);
--sat: 100%;
}
[color="standard"].background {
[color=standard].background {
background: var(--surface);
}
}
[color]:not([color="standard"]).subtle-background {
[color]:not([color=standard]).subtle-background {
--luma: var(--subtle-luma);
background: hsl(var(--hue), 100%, var(--luma), 50%);
}
body[theme="dark"] [color]:not([color="standard"]).subtle-background {
body[theme=dark] [color]:not([color=standard]).subtle-background {
--luma: var(--subtle-luma-dark);
}
[color="coral"] {
[color=coral] {
--hue: 20;
--accent-luma: 50%;
--accent-luma-dark: 70%;
@@ -85,7 +87,7 @@ body[theme="dark"] [color]:not([color="standard"]).subtle-background {
--subtle-luma: 95%;
--subtle-luma-dark: 5%;
}
[color="yellow"] {
[color=yellow] {
--hue: 50;
--accent-luma: 50%;
--accent-luma-dark: 60%;
@@ -96,7 +98,7 @@ body[theme="dark"] [color]:not([color="standard"]).subtle-background {
--subtle-luma: 95%;
--subtle-luma-dark: 5%;
}
[color="green"] {
[color=green] {
--hue: 120;
--accent-luma: 40%;
--accent-luma-dark: 60%;
@@ -107,7 +109,7 @@ body[theme="dark"] [color]:not([color="standard"]).subtle-background {
--subtle-luma: 95%;
--subtle-luma-dark: 5%;
}
[color="lightblue"] {
[color=lightblue] {
--hue: 180;
--accent-luma: 40%;
--accent-luma-dark: 60%;
@@ -118,7 +120,7 @@ body[theme="dark"] [color]:not([color="standard"]).subtle-background {
--subtle-luma: 95%;
--subtle-luma-dark: 5%;
}
[color="blue"] {
[color=blue] {
--hue: 220;
--accent-luma: 50%;
--accent-luma-dark: 70%;
@@ -129,7 +131,7 @@ body[theme="dark"] [color]:not([color="standard"]).subtle-background {
--subtle-luma: 95%;
--subtle-luma-dark: 5%;
}
[color="purple"] {
[color=purple] {
--hue: 280;
--accent-luma: 50%;
--accent-luma-dark: 70%;
@@ -203,35 +205,35 @@ main {
#background-wrapper #grass-1 {
--color-1: hsl(150, 100%, 30%);
--color-2: hsl(150, 100%, 25%);
background-image: linear-gradient(
background-image:
linear-gradient(
350deg,
var(--color-1),
var(--color-2) 30%,
transparent 40%
);
transparent 40%);
}
#background-wrapper #grass-2 {
--color-1: hsl(110, 100%, 40%);
--color-2: hsl(110, 100%, 35%);
background-image: linear-gradient(
background-image:
linear-gradient(
9deg,
var(--color-1),
var(--color-2) 30%,
transparent 35%
);
transparent 35%);
}
body[theme="dark"] #background-wrapper {
body[theme=dark] #background-wrapper {
opacity: 0.5;
}
body[theme="dark"] #background-wrapper #sky {
body[theme=dark] #background-wrapper #sky {
--color-1: hsl(188, 100%, 30%);
--color-2: hsl(194, 72%, 24%);
}
body[theme="dark"] #background-wrapper #grass-1 {
body[theme=dark] #background-wrapper #grass-1 {
--color-1: hsl(120, 30%, 30%);
--color-2: hsl(120, 30%, 24%);
}
body[theme="dark"] #background-wrapper #grass-2 {
body[theme=dark] #background-wrapper #grass-2 {
--color-1: hsl(110, 60%, 30%);
--color-2: hsl(110, 50%, 24%);
}
@@ -262,9 +264,7 @@ body[theme="dark"] #background-wrapper #grass-2 {
}
#home-page #overview-section,
#home-page #chat-section {
padding-bottom: calc(
var(--content-padding) + var(--header-height) + var(--safe-area-bottom)
);
padding-bottom: calc(var(--content-padding) + var(--header-height) + var(--safe-area-bottom));
}
#home-page #chat-grid {
margin-top: var(--content-padding);
@@ -387,14 +387,7 @@ body[showing-chat] #chat-page-wrapper {
padding-bottom: var(--safe-area-bottom);
}
#chat-page > div > #ribbon > span,
#chat-page
> div
> #main
> div
> .pane-wrapper
> .pane
> .toolbar
> span.ribbon {
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span.ribbon {
gap: var(--gap-between-tiles);
padding: var(--gap-between-tiles);
}
@@ -445,14 +438,7 @@ body[showing-chat] #chat-page-wrapper {
justify-content: center;
}
#chat-page > div > #ribbon button.ribbon-button,
#chat-page
> div
> #main
> div
> .pane-wrapper
> .pane
> .toolbar
button.ribbon-button {
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button.ribbon-button {
min-width: calc(var(--control-height) - 2 * var(--gap-between-tiles));
width: calc(var(--control-height) - 2 * var(--gap-between-tiles));
max-width: calc(var(--control-height) - 2 * var(--gap-between-tiles));
@@ -461,15 +447,7 @@ body[showing-chat] #chat-page-wrapper {
color: var(--primary);
}
#chat-page > div > #ribbon button > .icon,
#chat-page
> div
> #main
> div
> .pane-wrapper
> .pane
> .toolbar
button
> .icon {
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button > .icon {
font-size: 1.1rem;
}
#chat-page > div > #ribbon > span {
@@ -487,14 +465,7 @@ body[showing-chat] #chat-page-wrapper {
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span.title {
padding-left: var(--content-padding);
}
#chat-page
> div
> #main
> div
> .pane-wrapper
> .pane
> .toolbar
:is(input, select, button) {
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar :is(input, select, button) {
height: 100%;
flex: 1;
}
@@ -506,14 +477,7 @@ body[showing-chat] #chat-page-wrapper {
padding: 0px;
overflow: hidden;
}
#chat-page
> div
> #main
> #task-page
> .pane-wrapper
> .pane
> .main-content
> div {
#chat-page > div > #main > #task-page > .pane-wrapper > .pane > .main-content > div {
animation: slide-up var(--animation-duration);
}
#chat-page > div > #main > #task-page .task-grid {
@@ -572,11 +536,7 @@ body[showing-chat] #chat-page-wrapper {
#chat-page > div > #main > #task-page .board-toggle-button {
display: flex;
}
#chat-page
> div
> #main
> #task-page[isshowingboard][showingboardlist="false"]
#board-list {
#chat-page > div > #main > #task-page[isshowingboard][showingboardlist=false] #board-list {
display: none;
}
@media (min-width: 640px) {
@@ -615,18 +575,10 @@ body[showing-chat] #chat-page-wrapper {
}
#chat-page #main #message-page .content #message-container {
--message-container-padding: var(--control-height);
padding-bottom: calc(
var(--message-container-padding) + var(--content-padding)
) !important;
padding-bottom: calc(var(--message-container-padding) + var(--content-padding)) !important;
}
#chat-page
#main
#message-page
.content:has(.reply-preview-wrapper .reply-preview)
#message-container {
--message-container-padding: calc(
2 * var(--control-height) + var(--gap-between-tiles)
);
#chat-page #main #message-page .content:has(.reply-preview-wrapper .reply-preview) #message-container {
--message-container-padding: calc( 2 * var(--control-height) + var(--gap-between-tiles) );
}
#message-page #message-container {
overflow: auto;
@@ -840,27 +792,12 @@ body[showing-chat] #chat-page-wrapper {
}
/* src/View/ChatPages/calendarPage.css */
#chat-page
> div
> #main
> #calendar-page
> .pane-wrapper
> .pane
> .toolbar
.input-wrapper {
#chat-page > div > #main > #calendar-page > .pane-wrapper > .pane > .toolbar .input-wrapper {
display: flex;
padding: var(--gap-between-tiles);
gap: var(--gap-between-tiles);
}
#chat-page
> div
> #main
> #calendar-page
> .pane-wrapper
> .pane
> .toolbar
.input-wrapper
> input {
#chat-page > div > #main > #calendar-page > .pane-wrapper > .pane > .toolbar .input-wrapper > input {
min-height: unset;
height: calc(var(--control-height) - 2 * var(--gap-between-tiles));
appearance: textfield;
@@ -873,26 +810,10 @@ body[showing-chat] #chat-page-wrapper {
-webkit-appearance: none;
margin: 0px;
}
#chat-page
> div
> #main
> #calendar-page
> .pane-wrapper
> .pane
> .toolbar
.input-wrapper
> .year-input {
#chat-page > div > #main > #calendar-page > .pane-wrapper > .pane > .toolbar .input-wrapper > .year-input {
width: 4.4rem;
}
#chat-page
> div
> #main
> #calendar-page
> .pane-wrapper
> .pane
> .toolbar
.input-wrapper
> .month-input {
#chat-page > div > #main > #calendar-page > .pane-wrapper > .pane > .toolbar .input-wrapper > .month-input {
width: 3.1rem;
}
@media (max-width: 750px) {
+1730 -4348
View File
File diff suppressed because it is too large Load Diff
Binary file not shown.
Binary file not shown.
+1 -1
View File
@@ -9,7 +9,7 @@ import ConnectionModel from "../../Model/Global/connectionModel";
import ChatListModel from "../../Model/Chat/chatListModel";
export default class CoreViewModel {
readonly BUILD = "Build 26.08.30.F";
readonly BUILD = "Build 26.09.05.A";
translations: Translations;