CSS adjustments

src/assets/scss/globals.scss

@@ -4,6 +4,6 @@
  */
 .sticky-left {
 	position: sticky;
-	left: 0;
+	inset-inline-start: 0;
 	z-index: 5;
 }

src/assets/scss/vars.scss

@@ -2,15 +2,62 @@
  * SPDX-FileCopyrightText: 2020 René Gieling <github@dartcafe.de>
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-:root {
-	--color-polls-foreground-yes: var(--color-success);
-	--color-polls-foreground-no: var(--color-error);
-	--color-polls-foreground-maybe: var(--color-warning);
-	--color-polls-background-yes: rgba(var(--color-success-rgb), 0.2);
-	--color-polls-background-no: rgba(var(--color-error-rgb), 0.2);
-	--color-polls-background-maybe: rgba(var(--color-warning-rgb), 0.1);
-	--container-background-light: rgba(var(--color-info-rgb), 0.1);
-	--cap-width: 49rem;
-	--shadow-height: 0.7rem;
-	--shadow-height-inverted: -0.7rem;
+// :root {
+// 	// dark: #3b973b
+// 	// light: #2d7b41
+// 	--color-polls-foreground-yes: var(--color-success);
+// 	// dark: #ff3333
+// 	// light: #db0606
+// 	--color-polls-foreground-no: var(--color-error);
+// 	// dark: #ffcc00
+// 	// light: #a37200
+// 	--color-polls-foreground-maybe: var(--color-warning);
+// 	// dark: (59,151,59,0.2) #1e301e
+// 	// light: (45,123,65,0.2) #d5e5d9
+// 	--color-polls-background-yes: rgba(var(--color-success-rgb), 0.2);
+// 	// dark: (255,51,51,0.2) #451c1c
+// 	// light: (219,6,6,0.2) #f8cdcd
+// 	--color-polls-background-no: rgba(var(--color-error-rgb), 0.2);
+// 	// dark: (255,204,0,0.1) #2e2914
+// 	// light: (163,114,0,0.1) #f6f1e5
+// 	--color-polls-background-maybe: rgba(var(--color-warning-rgb), 0.1);
+// 	// dark: (0,174,255,0.1) #14262e
+// 	// light: (0,113,173,0.1) #e5f1f7
+// 	--container-background-light: rgba(var(--color-info-rgb), 0.1);
+// 	--cap-width: 49rem;
+// 	--shadow-height: 0.7rem;
+// 	--shadow-height-inverted: -0.7rem;
+// }
+
+:root,
+[data-theme-light] {
+	--color-polls-foreground-yes: #2d7b41;
+	--color-polls-foreground-no: #db0606;
+	--color-polls-foreground-maybe: #a37200;
+	--color-polls-background-yes: #d5e5d9;
+	--color-polls-background-no: #f8cdcd;
+	--color-polls-background-maybe: #f6f1e5;
+	--container-background-light: #e5f1f7;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--color-polls-foreground-yes: #3b973b;
+		--color-polls-foreground-no: #e72f2f;
+		--color-polls-foreground-maybe: #ffcc00;
+		--color-polls-background-yes: #1e301e;
+		--color-polls-background-no: #451c1c;
+		--color-polls-background-maybe: #2e2914;
+		--container-background-light: #14262e;
+	}
+}
+
+[data-theme-dark] {
+	--color-polls-foreground-yes: #3b973b;
+	--color-polls-foreground-no: #e72f2f;
+	--color-polls-foreground-maybe: #ffcc00;
+	--color-polls-background-yes: #1e301e;
+	--color-polls-background-no: #451c1c;
+	--color-polls-background-maybe: #2e2914;
+	--container-background-light: #14262e;
 }

src/components/AppIcons/MaybeIcon.vue

@@ -9,7 +9,7 @@ import { IconProps } from './types'
 
 const {
 	title = t('polls', 'Maybe'),
-	fillColor = 'var(--color-warning)',
+	fillColor = 'currentcolor',
 	size = 24,
 } = defineProps<IconProps>()
 </script>

src/components/Base/modules/BadgeDiv.vue

@@ -21,7 +21,7 @@ const { tag = 'span' } = defineProps<{ tag?: string }>()
 	display: flex;
 	align-items: center;
 	gap: 5px;
-	border-radius: var(--border-radius);
+	border-radius: var(--border-radius-small);
 	padding: 5px;
 	text-align: center;
 	line-height: 1.1em;

src/components/Base/modules/BadgeSmallDiv.vue

@@ -23,7 +23,7 @@ const { tag = 'span' } = defineProps<{ tag?: string }>()
 	align-items: center;
 	gap: 5px;
 	border: 2px solid;
-	border-radius: var(--border-radius-pill) !important;
+	border-radius: 0.8rem !important;
 	text-align: center;
 	font-size: 0.9em;
 	overflow: hidden;

src/components/Base/modules/Collapsible.vue

@@ -224,7 +224,7 @@ const containerClass = computed(() => ({
 		overflow: auto;
 		width: 100%;
 		transition: height 0.3s ease;
-		padding-right: 8px;
+		padding-inline-end: 8px;
 
 		&.no-transition {
 			transition: none !important;
@@ -239,8 +239,7 @@ const containerClass = computed(() => ({
 		&::after {
 			content: '';
 			position: absolute;
-			left: 0;
-			right: 8px;
+			inset-inline: 0 8px;
 			height: 2.5rem;
 			pointer-events: none;
 			z-index: 1;
@@ -281,8 +280,7 @@ const containerClass = computed(() => ({
 
 .resize-handle {
 	position: absolute;
-	left: 0;
-	right: 0;
+	inset-inline: 0;
 	height: 12px;
 	cursor: ns-resize;
 	background: transparent;
@@ -292,8 +290,7 @@ const containerClass = computed(() => ({
 		content: '';
 		position: absolute;
 		top: 50%;
-		left: 0;
-		right: 0;
+		inset-inline: 0;
 		height: 1px;
 		background: var(--color-border);
 		transform: translateY(-0.5px);
@@ -303,7 +300,7 @@ const containerClass = computed(() => ({
 		content: '• • •';
 		position: absolute;
 		top: 50%;
-		left: 50%;
+		inset-inline-start: 50%;
 		transform: translate(-50%, -50%);
 		padding: 0.15rem 0.5rem;
 		font-size: 1rem;

src/components/Base/modules/InputDiv.vue

@@ -340,12 +340,12 @@ const inputClass = computed(() => [
 		&.add {
 			inset-inline-end: 0;
 			border-inline-start: solid 2px var(--color-border-maxcontrast);
-			border-radius: 0 var(--border-radius) var(--border-radius) 0;
+			border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;
 		}
 
 		&.subtract {
 			border-inline-end: solid 2px var(--color-border-maxcontrast);
-			border-radius: var(--border-radius) 0 0 var(--border-radius);
+			border-radius: var(--border-radius-small) 0 0 var(--border-radius-small);
 		}
 	}
 }

src/components/Base/modules/IntersectionObserver.vue

@@ -62,9 +62,10 @@ onBeforeUnmount(() => {
 	top: 0;
 	height: 100%;
 }
+
 .horizontal-fixed {
 	position: sticky;
-	left: 0;
+	inset-inline-start: 0;
 	width: 100%;
 }
 </style>

src/components/Base/modules/StickyDiv.vue

@@ -144,7 +144,7 @@ const stickyClass = computed(() => ({
 
 .sticky-left {
 	position: sticky;
-	left: 0;
+	inset-inline-start: 0;
 }
 
 .sticky-top {

src/components/Calendar/CalendarInfo.vue

@@ -106,7 +106,7 @@ const conflictLevel = computed(() => {
 .calendar-info {
 	display: flex;
 	align-items: center;
-	border-radius: var(--border-radius);
+	border-radius: var(--border-radius-small);
 	margin: 4px 0;
 	padding: 0 4px;
 

src/components/Calendar/CalendarPeek.vue

@@ -133,6 +133,6 @@ onMounted(async () => {
 .calendar-peek__grid {
 	padding: 8px;
 	background-color: var(--color-main-background);
-	border-radius: var(--border-radius);
+	border-radius: var(--border-radius-small);
 }
 </style>

src/components/Comments/CommentItem.vue

@@ -217,11 +217,10 @@ const deletable = computed(
 		// margin-right: 44px;
 		&.current-user {
 			flex-direction: row-reverse;
-			margin-right: 0;
-			margin-left: 88px;
+			margin-inline: 88px 0;
 		}
 		&:not(.current-user) .comment-item__sub-comment {
-			margin-left: 1.5rem;
+			margin-inline-start: 1.5rem;
 		}
 	}
 
@@ -235,7 +234,7 @@ const deletable = computed(
 		.comment-item__content {
 			display: grid;
 			border: solid 1px var(--color-primary-element-light);
-			border-radius: var(--border-radius-large);
+			border-radius: var(--border-radius-element);
 			background-color: var(--color-primary-element-light);
 			box-shadow: 2px 2px 6px var(--color-box-shadow);
 			padding-inline-start: 8px;
@@ -252,7 +251,7 @@ const deletable = computed(
 			&.deletable:hover {
 				margin-inline-start: -4px;
 				padding-inline-start: 4px;
-				border-radius: var(--border-radius-large);
+				border-radius: var(--border-radius-element);
 			}
 		}
 	}

src/components/Options/OptionItem.vue

@@ -72,9 +72,8 @@ const pollStore = usePollStore()
 		border: 2px solid var(--color-success-text);
 	}
 	.list-view .confirmed & {
-		padding-left: 0.5rem;
-		left: -0.5rem;
-		padding-right: 0.5rem;
+		padding-inline: 0.5rem;
+		inset-inline-start: -0.5rem;
 	}
 }
 

src/components/Poll/PollHeaderButtons.vue

@@ -67,7 +67,7 @@ onBeforeUnmount(() => {
 	flex: 0;
 	justify-content: flex-end;
 	align-self: flex-end;
-	border-radius: var(--border-radius-pill);
+	border-radius: var(--border-radius-element);
 }
 
 .icon.icon-settings.active {

src/components/SideBar/SideBarTabDatePolls.vue

@@ -36,7 +36,7 @@ const comboStore = useComboStore()
 		background-color: var(--color-polls-background-yes);
 		margin: 8px 0;
 		border-bottom: 1px solid var(--color-border);
-		border-radius: var(--border-radius-large);
+		border-radius: var(--border-radius-element);
 		box-shadow: 2px 2px 6px var(--color-box-shadow);
 	}
 	.poll-title-box {

src/components/VoteTable/VoteIndicator.vue

@@ -13,43 +13,21 @@ import { Answer } from '../../stores/votes.types'
 const ICON_SIZE = 26
 
 const { answer } = defineProps<{ answer: Answer | 'locked' }>()
-
-const colorCodeNo = getComputedStyle(document.documentElement).getPropertyValue(
-	'--color-error',
-)
-const colorCodeYes = getComputedStyle(document.documentElement).getPropertyValue(
-	'--color-success',
-)
-const colorCodeMaybe = getComputedStyle(document.documentElement).getPropertyValue(
-	'--color-warning',
-)
 </script>
 
 <template>
 	<div class="vote-indicator">
-		<MaybeIcon
-			v-if="answer === 'maybe'"
-			:fill-color="colorCodeMaybe"
-			:size="ICON_SIZE" />
-		<CheckIcon
-			v-if="answer === 'yes'"
-			:fill-color="colorCodeYes"
-			:size="ICON_SIZE" />
-		<CloseIcon
-			v-if="answer === 'no'"
-			:fill-color="colorCodeNo"
-			:size="ICON_SIZE" />
-		<CancelIcon
-			v-if="answer === 'locked'"
-			:fill-color="colorCodeNo"
-			:size="ICON_SIZE" />
+		<MaybeIcon v-if="answer === 'maybe'" :size="ICON_SIZE" />
+		<CheckIcon v-if="answer === 'yes'" :size="ICON_SIZE" />
+		<CloseIcon v-if="answer === 'no'" :size="ICON_SIZE" />
+		<CancelIcon v-if="answer === 'locked'" :size="ICON_SIZE" />
 	</div>
 </template>
 
 <style lang="scss">
 .active .vote-indicator {
 	border: 2px solid;
-	border-radius: var(--border-radius);
+	border-radius: var(--border-radius-small);
 
 	&,
 	* {

src/components/VoteTable/VoteTable.vue

@@ -210,8 +210,8 @@ function isVotable(participant: User, option: Option) {
 		}
 
 		&.sticky-left {
-			left: -8px;
-			padding-left: 8px;
+			inset-inline-start: -8px;
+			padding-inline-start: 8px;
 		}
 
 		&:hover {

src/views/Vote.vue

@@ -295,7 +295,7 @@ const appClass = computed(() => [
 	display: flex;
 	justify-content: center;
 	position: sticky;
-	left: 70px;
+	inset-inline-start: 70px;
 }
 
 .vote-main {