diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index 7e01d2d8ae..55517cca08 100644
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@@ -118,7 +118,7 @@
--theme-popup-color: #292938;
--theme-popup-divider: rgba(255, 255, 255, .1);
--theme-popup-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1); // Light
- --theme-panel-color: #1F1F2C;
+ --theme-panel-color: #1A1A28;
--body-color: #1f2023;
--body-accent: #222326;
@@ -244,7 +244,7 @@
--theme-caption-color: #000;
--theme-list-border-color: rgba(0, 0, 0, .09);
- --theme-list-header-color: #ECD4CA;
+ --theme-list-header-color: red; //#ECD4CA;
--theme-list-subheader-color: #EEEEF0;
--theme-list-row-color: #F7F7F8;
--theme-list-button-color: #F2F2F4;
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index 2b799f4fa5..4ce18415b0 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -407,6 +407,7 @@ input.search {
&.reverse > *:not(:last-child) { margin-right: .5rem; }
}
.gap-around-2 > * { margin: .25rem; }
+.gap-around-4 > * { margin: .5rem; }
/* --------- */
.sm-tool-icon {
@@ -480,6 +481,7 @@ input.search {
.mx-10 { margin: 0 2.5rem; }
.mx-auto { margin: 0 auto; }
.my-2 { margin: .5rem 0; }
+.my-3 { margin: .75rem 0; }
.my-4 { margin: 1rem 0; }
.my-5 { margin: 1.25rem 0; }
@@ -636,6 +638,7 @@ input.search {
.max-h-0 { max-height: 0; }
.max-h-2 { max-height: .5rem; }
.max-h-4 { max-height: 1rem; }
+.max-h-9 { max-height: 2.25rem; }
.max-h-30 { max-height: 7.5rem; }
.max-h-50 { max-height: 12.5rem; }
.max-h-60 { max-height: 15rem; }
diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss
index 7550aa48bc..0f618eb073 100644
--- a/packages/theme/styles/common.scss
+++ b/packages/theme/styles/common.scss
@@ -48,6 +48,7 @@
overflow: hidden;
&.filled { background-color: var(--theme-bg-color); }
+ &.filledNav { background-color: var(--theme-navpanel-color); }
&.border-left { border-left: 1px solid var(--theme-divider-color); }
&.border-right { border-right: 1px solid var(--theme-divider-color); }
}
diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
index 70ef4fca8f..4667a22c1c 100644
--- a/packages/theme/styles/components.scss
+++ b/packages/theme/styles/components.scss
@@ -18,6 +18,8 @@
display: flex;
flex-direction: column;
height: 100%;
+ min-height: 0;
+ min-width: 0;
.ac-header {
padding: 0.5rem 2.25rem;
@@ -216,7 +218,7 @@
flex-direction: column;
align-items: flex-start;
height: 100%;
- background-color: var(--body-color);
+ background-color: var(--theme-bg-color);
&.columns {
flex-direction: row;
@@ -242,7 +244,7 @@
min-width: 17rem;
max-width: 30rem;
height: 100%;
- border-right: 1px solid var(--divider-color);
+ border-right: 1px solid var(--theme-divider-color);
&.max {
flex-grow: 1;
@@ -262,11 +264,11 @@
cursor: pointer;
&:hover {
- background-color: var(--button-bg-color);
+ background-color: var(--theme-button-hovered);
}
&.selected {
- background-color: var(--button-bg-hover);
- border-color: var(--button-border-color);
+ background-color: var(--theme-button-enabled);
+ border-color: var(--theme-button-border);
cursor: auto;
}
}
@@ -687,16 +689,19 @@
/* ListView - global style */
.list-container .category-container .categoryHeader.subLevel.closed {
- border-bottom: 1px solid var(--theme-list-border-color);
border-radius: 0 0 0.25rem 0.25rem;
+ border-bottom: 1px solid var(--theme-list-border-color);
}
.list-container .category-container .categoryHeader.closed:not(.subLevel) {
- border-radius: 0 0 .25rem .25rem;
+ border-radius: 0 0 0.25rem 0.25rem;
- &::before {
- border-bottom-color: var(--theme-list-border-color);
+ &::before,
+ &::after {
border-radius: 0.25rem;
}
+ &::after {
+ border-bottom-color: var(--theme-list-border-color);
+ }
}
.list-container .category-container .listGrid {
.fix-margin { margin-left: .875rem; }
diff --git a/plugins/setting-resources/src/components/Configure.svelte b/plugins/setting-resources/src/components/Configure.svelte
index 0b849bf483..f52da84981 100644
--- a/plugins/setting-resources/src/components/Configure.svelte
+++ b/plugins/setting-resources/src/components/Configure.svelte
@@ -15,7 +15,7 @@
<script lang="ts">
import { PluginConfiguration } from '@hcengineering/core'
import { configurationStore, getClient } from '@hcengineering/presentation'
- import { Button, Icon, IconInfo, Label } from '@hcengineering/ui'
+ import { Button, Icon, IconInfo, Label, Scroller } from '@hcengineering/ui'
import setting from '../plugin'
const client = getClient()
@@ -32,50 +32,51 @@
<div class="ac-header__icon"><Icon icon={setting.icon.Setting} size={'medium'} /></div>
<div class="ac-header__title"><Label label={setting.string.Configuration} /></div>
</div>
- <div class="flex flex-wrap p-3">
- {#each $configurationStore.list as config}
- {#if config.label}
- <div class="cardBox flex-col" class:enabled={config.enabled ?? true}>
- <div class="flex-row-center">
- <div class="p-1">
- <Icon icon={config.icon ?? IconInfo} size={'large'} />
- </div>
- <div class="fs-title">
- <Label label={config.label} />
+ <Scroller>
+ <div class="flex-row-center flex-wrap p-1 gap-around-4">
+ {#each $configurationStore.list as config}
+ {#if config.label}
+ <div class="cardBox flex-col clear-mins" class:enabled={config.enabled ?? true}>
+ <div class="flex-row-center">
+ <span class="mr-2">
+ <Icon icon={config.icon ?? IconInfo} size={'medium'} />
+ </span>
+ <span class="fs-title">
+ <Label label={config.label} />
+ </span>
</div>
+ {#if config.description}
+ <div class="my-3 flex-grow clear-mins">
+ <Label label={config.description} />
+ </div>
+ {/if}
+ {#if config.configurable}
+ <div class="flex-row-center flex-reverse flex-grow max-h-9">
+ <Button
+ label={config.enabled ?? true ? setting.string.ConfigDisable : setting.string.ConfigEnable}
+ size={'large'}
+ on:click={() => change(config, !(config.enabled ?? true))}
+ />
+ </div>
+ {/if}
</div>
- {#if config.description}
- <div class="p-3">
- <Label label={config.description} />
- </div>
- {/if}
- {#if config.configurable}
- <div class="flex-grow flex-reverse">
- <Button
- label={config.enabled ?? true ? setting.string.ConfigDisable : setting.string.ConfigEnable}
- size={'small'}
- kind={'link'}
- on:click={() => change(config, !(config.enabled ?? true))}
- />
- </div>
- {/if}
- </div>
- {/if}
- {/each}
- </div>
+ {/if}
+ {/each}
+ </div>
+ </Scroller>
</div>
<style lang="scss">
.cardBox {
- background-color: var(--accent-bg-color);
- border: 1px solid var(--divider-color);
- border-radius: 0.75rem;
+ flex-shrink: 0;
+ padding: 1rem;
width: 24rem;
- height: 8rem;
- margin: 0.25rem;
- padding: 0.25rem;
+ height: 10rem;
+ background-color: var(--theme-button-enabled);
+ border: 1px solid var(--theme-button-border);
+ border-radius: 0.5rem;
&.enabled {
- background-color: var(--button-bg-color);
+ background-color: var(--theme-button-pressed);
}
}
</style>
diff --git a/plugins/setting-resources/src/components/PluginCard.svelte b/plugins/setting-resources/src/components/PluginCard.svelte
index 2ba4b4ff3d..4e1e5f7549 100644
--- a/plugins/setting-resources/src/components/PluginCard.svelte
+++ b/plugins/setting-resources/src/components/PluginCard.svelte
@@ -121,8 +121,8 @@
<style lang="scss">
.plugin-container {
- background-color: var(--accent-bg-color);
- border: 1px solid var(--divider-color);
+ background-color: var(--theme-button-enabled);
+ border: 1px solid var(--theme-button-border);
border-radius: 0.75rem;
}
.header {
@@ -139,7 +139,7 @@
.content {
flex-grow: 1;
margin: 0 1.5rem 0.25rem;
- color: var(--caption-color);
+ color: var(--theme-caption-color);
}
.footer {
flex-shrink: 0;
diff --git a/plugins/setting-resources/src/components/Settings.svelte b/plugins/setting-resources/src/components/Settings.svelte
index b4820b3308..545011fbc8 100644
--- a/plugins/setting-resources/src/components/Settings.svelte
+++ b/plugins/setting-resources/src/components/Settings.svelte
@@ -88,7 +88,7 @@
<div class="flex h-full">
{#if visibileNav}
- <div class="antiPanel-navigator filled indent">
+ <div class="antiPanel-navigator filledNav indent">
<div class="antiNav-header">
<span class="fs-title overflow-label">
<Label label={setting.string.Settings} />
@@ -124,7 +124,7 @@
</div>
{/if}
- <div class="antiPanel-component border-left filled">
+ <div class="antiPanel-component filled">
{#if category}
<Component
is={category.component}
diff --git a/plugins/setting-resources/src/components/WorkspaceSettings.svelte b/plugins/setting-resources/src/components/WorkspaceSettings.svelte
index e1ba5a0730..3d7100ba41 100644
--- a/plugins/setting-resources/src/components/WorkspaceSettings.svelte
+++ b/plugins/setting-resources/src/components/WorkspaceSettings.svelte
@@ -61,7 +61,7 @@
<div class="flex h-full">
{#if visibileNav}
- <div class="antiPanel-navigator filled indent">
+ <div class="antiPanel-navigator filledNav indent">
<div class="antiNav-header">
<span class="fs-title overflow-label">
<Label label={setting.string.WorkspaceSetting} />
@@ -80,7 +80,7 @@
</div>
{/if}
- <div class="antiPanel-component border-left filled">
+ <div class="antiPanel-component filled">
{#if category}
<Component is={category.component} />
{/if}
diff --git a/plugins/setting-resources/src/components/statuses/Folders.svelte b/plugins/setting-resources/src/components/statuses/Folders.svelte
index cf19245ed9..4e9fd9a5c2 100644
--- a/plugins/setting-resources/src/components/statuses/Folders.svelte
+++ b/plugins/setting-resources/src/components/statuses/Folders.svelte
@@ -69,17 +69,16 @@
}
.item {
padding: 1.25rem 1rem 1.25rem 1.25rem;
- background-color: var(--board-card-bg-color);
- border: 1px solid var(--button-border-color);
+ background-color: var(--theme-button-enabled);
+ border: 1px solid var(--theme-button-border);
border-radius: 0.75rem;
cursor: pointer;
&:hover {
- background-color: var(--board-card-bg-hover);
+ background-color: var(--theme-button-hovered);
}
&.selected {
- background-color: var(--button-bg-hover);
- border-color: var(--button-border-hover);
+ background-color: var(--theme-button-pressed);
cursor: auto;
}
}
diff --git a/plugins/task-resources/src/components/state/StatesEditor.svelte b/plugins/task-resources/src/components/state/StatesEditor.svelte
index 9c47229ab0..84074eb6cb 100644
--- a/plugins/task-resources/src/components/state/StatesEditor.svelte
+++ b/plugins/task-resources/src/components/state/StatesEditor.svelte
@@ -250,9 +250,9 @@
<style lang="scss">
.states {
padding: 0.5rem 1rem;
- color: var(--caption-color);
- background-color: var(--button-bg-color);
- border: 1px solid var(--button-border-color);
+ color: var(--theme-caption-color);
+ background-color: var(--theme-button-enabled);
+ border: 1px solid var(--theme-button-border);
border-radius: 0.5rem;
user-select: none;
diff --git a/plugins/templates-resources/src/components/Templates.svelte b/plugins/templates-resources/src/components/Templates.svelte
index 824a5ac496..7c9d1969d8 100644
--- a/plugins/templates-resources/src/components/Templates.svelte
+++ b/plugins/templates-resources/src/components/Templates.svelte
@@ -187,7 +187,7 @@
</div>
</div>
- <div class="ac-column max background-accent-bg-color template-container">
+ <div class="ac-column max template-container">
{#if newTemplate}
<div class="flex-between mr-4">
<span class="trans-title mb-3">
@@ -266,12 +266,13 @@
<style lang="scss">
.template-container {
padding: 2.25rem 2.5rem 1.75rem;
+ background-color: var(--theme-panel-color);
}
.separator {
flex-shrink: 0;
margin: 1.5rem 0;
height: 1px;
- background-color: var(--divider-color);
+ background-color: var(--theme-divider-color);
}
.text {
flex-grow: 1;
diff --git a/plugins/view-resources/src/components/list/ListHeader.svelte b/plugins/view-resources/src/components/list/ListHeader.svelte
index a8961547f1..3c881d8a84 100644
--- a/plugins/view-resources/src/components/list/ListHeader.svelte
+++ b/plugins/view-resources/src/components/list/ListHeader.svelte
@@ -55,11 +55,11 @@
$: lth = $deviceInfo.theme === 'theme-light'
- let accentColor = { h: 0, s: 0, l: 65 }
+ let accentColor = { h: 0, s: 50, l: 50 }
- $: headerBGColor = !lth
- ? hslToRgb(accentColor.h, accentColor.s, accentColor.l / 1.5 + (mouseOver ? -20 : 0))
- : hslToRgb(accentColor.h, accentColor.s, accentColor.l * 1.5 + (mouseOver ? -20 : 0))
+ $: headerBGColor = !lth ? hslToRgb(accentColor.h, 20, 30) : hslToRgb(accentColor.h, 30, 85)
+
+ $: headerTextColor = !lth ? { r: 255, g: 255, b: 255 } : hslToRgb(accentColor.h, 60, 30)
const handleCreateItem = (event: MouseEvent) => {
if (createItemDialog === undefined) return
@@ -102,7 +102,12 @@
<Label label={view.string.NoGrouping} />
</span>
{:else if headerComponent}
- <span class="clear-mins">
+ <span
+ class="clear-mins"
+ style:color={lth
+ ? `rgb(${headerTextColor.r}, ${headerTextColor.g}, ${headerTextColor.b})`
+ : 'var(--theme-caption-color)'}
+ >
<svelte:component
this={headerComponent.presenter}
value={category}
@@ -173,38 +178,49 @@
transition: transform 0.15s ease-in-out;
}
&:not(.gradient)::before {
- background: rgba(var(--list-header-rgb-color), 0.15);
+ background: rgba(var(--list-header-rgb-color), 1);
}
&.gradient::before {
background: linear-gradient(
90deg,
- rgba(var(--list-header-rgb-color), 0.15),
- rgba(var(--list-header-rgb-color), 0.05)
+ rgba(var(--list-header-rgb-color), 0.5),
+ rgba(var(--list-header-rgb-color), 0.3),
+ rgba(var(--list-header-rgb-color), 0.1)
);
}
- &::before {
- box-sizing: border-box;
+ &::before,
+ &::after {
position: absolute;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
+ border-radius: 0.25rem 0.25rem 0 0;
+ pointer-events: none;
+ }
+ &::after {
border: 1px solid var(--theme-list-border-color);
border-bottom-color: transparent;
- border-radius: 0.25rem 0.25rem 0 0;
+ }
+ &::before {
z-index: -1;
}
/* Global styles in components.scss and there is an influence from the Scroller component */
&.collapsed {
+ border-radius: 0 0 0.25rem 0.25rem;
+
.chevron {
transform: rotate(0deg);
}
- &::before {
- border-bottom-color: var(--theme-list-border-color);
+ &::before,
+ &::after {
border-radius: 0.25rem;
}
+ &::after {
+ border-bottom-color: var(--theme-list-border-color);
+ }
}
&.subLevel {
top: 2.75rem;
@@ -215,7 +231,8 @@
border-bottom: 1px solid var(--theme-list-subheader-divider);
// here should be top 3rem for sticky, but with ExpandCollapse it gives strange behavior
- &::before {
+ &::before,
+ &::after {
content: none;
}
&.collapsed.lastCat {