anyproto/anytype-ts
1
0
Fork 0
mirror of https://github.com/anyproto/anytype-ts.git synced 2025-06-07 21:47:02 +09:00
Code Activity

JS-3190: CSS vars

Browse source
This commit is contained in:
Andrew Simachev 2024-01-08 14:41:09 +01:00
parent 9c1a37345f
commit bb4fc29c83
No known key found for this signature in database
GPG key ID: 49A163D0D14E6FD8
51 changed files with 169 additions and 139 deletions
Download patch file Download diff file Expand all files Collapse all files

22
anytype-ts.code-workspace Normal file
View file

@ -0,0 +1,22 @@
{
"folders": [
{
"path": "."
}
],
"extensions": {
"recommendations": [
"aaron-bond.better-comments",
"github.copilot",
"eamodio.gitlens",
"timonwong.shellcheck",
"dbaeumer.vscode-eslint"
]
},
"settings": {
"editor.formatOnSave": false,
"editor.formatOnPaste": false,
"editor.formatOnType": false,
"debug.inlineValues": "on"
}
}

4
src/scss/_vars.scss
View file

@ -1,3 +1,7 @@
:root {
--color-text-primary: #252525;
}
/* Text */
$colorTextPrimary: #252525;

2
src/scss/block/common.scss
View file

@ -46,7 +46,7 @@
display: none; margin-left: 28px; color: $colorControlActive; position: relative; z-index: 2;
@include text-overflow-nw;
}
.emptyToggle:hover { color: $colorTextPrimary; }
.emptyToggle:hover { color: var(--color-text-primary); }
}
.block.index0 { padding-top: 0px !important; }

2
src/scss/block/cover.scss
View file

@ -11,7 +11,7 @@
}
.loaderWrapper {
.loader {
left: auto; top: 16px; right: 16px; margin: 0px; border-color: $colorBgPrimary; border-left: 2px solid $colorTextPrimary;
left: auto; top: 16px; right: 16px; margin: 0px; border-color: $colorBgPrimary; border-left: 2px solid var(--color-text-primary);
}
}

14
src/scss/block/dataview.scss
View file

@ -22,7 +22,7 @@
.icon { flex-shrink: 0; width: 20px; height: 20px; background-image: url('~img/arrow/loadMore0.svg'); }
}
.loadMore:hover { color: $colorTextPrimary; }
.loadMore:hover { color: var(--color-text-primary); }
.loadMore:hover {
.icon { background-image: url('~img/arrow/loadMore1.svg'); }
}
@ -58,10 +58,10 @@
.inner { width: 300px; }
.name { font-weight: 500; margin: 0px 0px 2px 0px; }
.descr { @include text-small; margin: 0px 0px 8px 0px; }
.button { color: $colorTextPrimary; }
.button { color: var(--color-text-primary); }
}
.dataviewHead { display: flex; flex-direction: row; align-items: center; gap: 0px 2px; width: 100%; color: $colorTextPrimary; }
.dataviewHead { display: flex; flex-direction: row; align-items: center; gap: 0px 2px; width: 100%; color: var(--color-text-primary); }
.dataviewHead {
.icon.source { width: 28px; height: 28px; background-size: 24px; background-image: url('~img/icon/dataview/button/source0.svg'); opacity: 0; }
.icon.source.active { opacity: 1; }
@ -95,7 +95,7 @@
> .side.left { flex-grow: 1; padding-left: 14px; max-width: 100%; }
> .side.right { flex-shrink: 0; gap: 0px 4px; justify-content: flex-end; }
> .side.right {
.filter { color: $colorTextPrimary; padding: 0px; }
.filter { color: var(--color-text-primary); padding: 0px; }
.filter {
.inner { gap: 0px; height: 100%; }
.filterInputWrap { overflow: hidden; width: 0px; transition: width 0.2s $easeInQuint; }
@ -143,10 +143,10 @@
.icon.arrow { width: 20px; height: 20px; background-image: url('~img/arrow/view.svg'); }
}
.viewItem:last-child { margin: 0px; }
.viewItem:hover, .viewItem.active { color: $colorTextPrimary; }
.viewItem:hover, .viewItem.active { color: var(--color-text-primary); }
.viewItem.isDragging { background: rgba(255,255,255,0.5); padding: 0px 4px; border-radius: 4px; width: auto !important; }
.viewSelect { display: none; border: 0px; padding-left: 0px; color: $colorTextPrimary; }
.viewSelect { display: none; border: 0px; padding-left: 0px; color: var(--color-text-primary); }
.viewSelect {
.icon:hover, .icon.active { background-color: transparent !important; }
.name { @include text-overflow-nw; }
@ -169,7 +169,7 @@
.side.right {
.element {
display: flex; flex-direction: row; align-items: center; gap: 0px 6px; border-radius: 4px; padding: 0px 6px 0px 4px;
transition: $transitionAllCommon; color: $colorTextPrimary;
transition: $transitionAllCommon; color: var(--color-text-primary);
}
.element {
.icon { width: 20px; height: 20px; }

2
src/scss/block/dataview/cell.scss
View file

@ -119,7 +119,7 @@
.itemWrap { display: inline-block; }
.placeholder { position: absolute; left: 0px; top: 0px; height: 100%; }
#entry { -webkit-user-modify: read-write-plaintext-only; color: $colorTextPrimary; }
#entry { -webkit-user-modify: read-write-plaintext-only; color: var(--color-text-primary); }
#list { margin-right: 6px; position: relative; word-wrap: break-word; }
}

6
src/scss/block/dataview/view/common.scss
View file

@ -8,7 +8,7 @@
.cell.add { color: $colorControlActive; line-height: 20px; width: 100%; display: block; }
.cell.add {
.btn { display: inline-block; transition: $transitionAllCommon; }
.btn:hover { color: $colorTextPrimary; }
.btn:hover { color: var(--color-text-primary); }
.btn:hover {
.icon.plus { background-image: url('~img/icon/plus/menu1.svg'); }
}
@ -26,12 +26,12 @@
.cellContent.canEdit { cursor: default; }
.cellContent:empty, .cellContent.isEmpty { display: none; }
.cellContent.last { margin: 0px; }
.cellContent.c-description { color: $colorTextPrimary; }
.cellContent.c-description { color: var(--color-text-primary); }
.cellContent {
.more { vertical-align: top; height: 18px; }
}
.cellContent.isName { @include text-paragraph; color: $colorTextPrimary; display: flex; gap: 0px 6px; position: relative; }
.cellContent.isName { @include text-paragraph; color: var(--color-text-primary); display: flex; gap: 0px 6px; position: relative; }
.cellContent.isName {
.iconObject { position: absolute; left: 0px; top: 0px; margin: 0px; cursor: default; }
.name {

2
src/scss/block/dataview/view/gallery.scss
View file

@ -65,7 +65,7 @@
.card:hover { border-color: $colorShapeSecondary; background: $colorShapeHighlightLight; }
.card:hover {
.cover {
.inner { color: $colorTextPrimary; }
.inner { color: var(--color-text-primary); }
.inner .icon.plus { background-image: url('~img/icon/plus/gallery-cover1.svg'); }
}

2
src/scss/block/dataview/view/list.scss
View file

@ -31,7 +31,7 @@
.name { @include text-overflow-nw; max-width: 200px; }
}
.cellContent.isName { @include text-paragraph; display: inline-flex; flex-direction: row; align-items: center; color: $colorTextPrimary; }
.cellContent.isName { @include text-paragraph; display: inline-flex; flex-direction: row; align-items: center; color: var(--color-text-primary); }
.cellContent.isName {
.name { display: inline-block; line-height: 24px; vertical-align: top; font-weight: 500; max-width: 500px; }
.input.name { padding: 0; @include text-paragraph; }

2
src/scss/block/link.scss
View file

@ -156,7 +156,7 @@
.block.blockLink.text:hover {
.linkCard {
.cardName .name { border-color: $colorTextPrimary; }
.cardName .name { border-color: var(--color-text-primary); }
}
}

2
src/scss/block/table.scss
View file

@ -149,7 +149,7 @@
.resize { width: 6px; height: 100%; position: absolute; right: -3px; top: 0px; cursor: col-resize; z-index: 3; }
.click { width: 100%; height: 100%; }
.block { height: 100%; border: 0px !important; padding: 0px; margin: 0px; color: $colorTextPrimary; }
.block { height: 100%; border: 0px !important; padding: 0px; margin: 0px; color: var(--color-text-primary); }
.block {
.selectable { flex-grow: 1; }
.wrapContent, .wrap, .flex, .dropTarget { height: 100%; }

2
src/scss/block/text.scss
View file

@ -46,7 +46,7 @@
markupmention.withImage.c28 name markupBgcolor:first-child { margin-left: -27px; padding-left: 27px; }
markupmention.withImage.c32 name markupBgcolor:first-child { margin-left: -34px; padding-left: 34px; }
markupmention:hover {
name::before { border-color: $colorTextPrimary; }
name::before { border-color: var(--color-text-primary); }
}
markupbold { font-weight: 600; }

16
src/scss/common.scss
View file

@ -4,7 +4,7 @@
html, body { height: 100%; }
body {
font-family: 'Inter'; @include text-common; color: $colorTextPrimary; overflow-x: hidden; overflow-y: auto; background: $colorBgPrimary;
font-family: 'Inter'; @include text-common; color: var(--color-text-primary); overflow-x: hidden; overflow-y: auto; background: $colorBgPrimary;
-webkit-font-smoothing: antialiased; backface-visibility: hidden; transform-style: flat; overscroll-behavior: none;
}
body.colResize { cursor: col-resize !important; }
@ -101,8 +101,8 @@ html.platformWindows, html.platformLinux {
.editableWrap { position: relative; }
a { color: $colorTextPrimary; }
search { background: yellow !important; color: $colorTextPrimary !important; border-radius: 2px; display: inline; }
a { color: var(--color-text-primary); }
search { background: yellow !important; color: var(--color-text-primary) !important; border-radius: 2px; display: inline; }
search.active { background: orange !important; }
.dropTarget.isOver.middle { background: $colorSystemDropZone !important; }
@ -124,8 +124,8 @@ search.active { background: orange !important; }
pointer-events: none; z-index: 10; content: ""; border-radius: 2px;
}
.textColor-default { color: $colorTextPrimary !important; }
.textColor-black { color: $colorTextPrimary !important; }
.textColor-default { color: var(--color-text-primary) !important; }
.textColor-black { color: var(--color-text-primary) !important; }
.textColor-grey { color: $colorControlActive !important; }
.textColor-yellow { color: $colorYellow !important; }
.textColor-orange { color: $colorOrange !important; }
@ -149,7 +149,7 @@ search.active { background: orange !important; }
.bgColor-lime { background: #e3f7d0 !important; }
.isMultiSelect.archive { color: $colorTextSecondary; background: $colorShapeTertiary; }
.isMultiSelect.tagColor-default { color: $colorTextPrimary !important; background: $colorBgPrimary !important; box-shadow: 0px 0px 0px 1px $colorShapeSecondary inset; }
.isMultiSelect.tagColor-default { color: var(--color-text-primary) !important; background: $colorBgPrimary !important; box-shadow: 0px 0px 0px 1px $colorShapeSecondary inset; }
.isMultiSelect.tagColor-grey { color: #8c9ea5 !important; background: #ebeff1 !important; }
.isMultiSelect.tagColor-yellow { color: #b2a616 !important; background: #fbf5b8 !important; }
.isMultiSelect.tagColor-orange { color: #d3720d !important; background: #ffEcc8 !important; }
@ -161,8 +161,8 @@ search.active { background: orange !important; }
.isMultiSelect.tagColor-teal { color: #0caaa3 !important; background: #d4f5f3 !important; }
.isMultiSelect.tagColor-lime { color: #64b90f !important; background: #e3f7d0 !important; }
.isSelect.tagColor-default { color: $colorTextPrimary !important; }
.isSelect.tagColor-black { color: $colorTextPrimary !important; }
.isSelect.tagColor-default { color: var(--color-text-primary) !important; }
.isSelect.tagColor-black { color: var(--color-text-primary) !important; }
.isSelect.tagColor-grey { color: $colorControlActive !important; }
.isSelect.tagColor-yellow { color: $colorYellow !important; }
.isSelect.tagColor-orange { color: $colorOrange !important; }

4
src/scss/component/cover.scss
View file

@ -2,7 +2,7 @@
.cover {
background-repeat: no-repeat; background-size: cover; background-position: top center; color: $colorBgPrimary; position: fixed; left: 0px;
top: 0px; width: 100%; height: 100%; background-color: $colorTextPrimary;
top: 0px; width: 100%; height: 100%; background-color: var(--color-text-primary);
}
.cover.type2.white { background-color: $colorBgPrimary !important; }
@ -18,7 +18,7 @@
.cover.type2.green { background-color: #136E41 !important; }
.cover.type2.lightgrey { background-color: $colorShapeSecondary !important; }
.cover.type2.darkgrey { background: $colorControlActive !important; }
.cover.type2.black { background-color: $colorTextPrimary !important; }
.cover.type2.black { background-color: var(--color-text-primary) !important; }
.cover.type3.yellow { background-image: linear-gradient(180deg, $colorSystemAccent100 0%, $colorYellow 105.47%); }
.cover.type3.red { background-image: linear-gradient(180deg, $colorRed 0%, $colorPink 105.47%); }

2
src/scss/component/dotIndicator.scss
View file

@ -2,6 +2,6 @@
.dotIndicator { display: flex; justify-content: center; align-items: center; gap: 0px 6px; }
.dotIndicator {
span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: $colorTextPrimary; }
span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-text-primary); }
span.active { background-color: $colorShapePrimary; opacity: 0.9; }
}

2
src/scss/component/editor.scss
View file

@ -46,7 +46,7 @@
transition: background $transitionCommon, color $transitionCommon; height: 28px; padding: 0px 8px 0px 6px; border-radius: 6px; display: flex;
flex-direction: row; align-items: center;
}
.btn:hover, .btn.hover { background: $colorShapeHighlightMedium; color: $colorTextPrimary; }
.btn:hover, .btn.hover { background: $colorShapeHighlightMedium; color: var(--color-text-primary); }
.btn {
.icon { width: 20px; height: 20px; margin-right: 4px; }

2
src/scss/component/emptySearch.scss
View file

@ -2,7 +2,7 @@
.emptySearch { height: 100%; padding: 0px 16px; text-align: center; }
.emptySearch {
b { display: block; font-weight: 400; color: $colorTextPrimary; }
b { display: block; font-weight: 400; color: var(--color-text-primary); }
span { @include text-overflow-nw; max-width: 100%; display: block; }
.txt { line-height: 24px; color: $colorControlActive; width: 100%; }
}

6
src/scss/component/header.scss
View file

@ -26,8 +26,8 @@
font-weight: 700; color: $colorControlActive; transition: $transitionAllCommon; text-align: center;
vertical-align: top; padding: 0px 16px; display: flex; align-items: center; height: 100%; border-bottom: 1px solid rgba(0,0,0,0);
}
.tab:hover { color: $colorTextPrimary; }
.tab.active { color: $colorTextPrimary; border-color: $colorTextPrimary; }
.tab:hover { color: var(--color-text-primary); }
.tab.active { color: var(--color-text-primary); border-color: var(--color-text-primary); }
}
.headerBanner {
@ -92,7 +92,7 @@
}
.item.orange { color: $colorOrange !important; font-weight: 500; }
.item.grey:hover { color: $colorTextPrimary; }
.item.grey:hover { color: var(--color-text-primary); }
.item.orange:hover { color: $colorSystemAccent100 !important; }
.item:hover {

4
src/scss/component/loader.scss
View file

@ -8,8 +8,8 @@
}
@keyframes dots-light {
0% { background-color: $colorTextPrimary; }
32% { background-color: $colorTextPrimary; }
0% { background-color: var(--color-text-primary); }
32% { background-color: var(--color-text-primary); }
100% { background-color: rgba(0,0,0,0); }
}

2
src/scss/component/media/audio.scss
View file

@ -2,7 +2,7 @@
.mediaAudio { width: 100%; }
.mediaAudio {
.controls { width: 100%; min-width: 160px; position: relative; text-align: left; color: $colorTextPrimary; }
.controls { width: 100%; min-width: 160px; position: relative; text-align: left; color: var(--color-text-primary); }
.controls {
.input-drag {
.icon { cursor: default; }

2
src/scss/component/pager.scss
View file

@ -10,7 +10,7 @@
min-width: 24px; display: inline-block; padding: 0px 2px; transition: $transitionAllCommon; text-align: center;
vertical-align: top; line-height: 20px;
}
.pageItem:hover, .pageItem.active { color: $colorTextPrimary; }
.pageItem:hover, .pageItem.active { color: var(--color-text-primary); }
.pageItem.list { cursor: default; }
.pageItem.list:hover { color: $colorControlActive; }

2
src/scss/component/preview/common.scss
View file

@ -13,7 +13,7 @@
}
.head {
.item { display: inline-block; vertical-align: top; margin-right: 16px; transition: $transitionAllCommon; cursor: default; }
.item:hover { color: $colorTextPrimary; }
.item:hover { color: var(--color-text-primary); }
.item:last-child { margin: 0px; }
}

4
src/scss/component/preview/link.scss
View file

@ -2,9 +2,9 @@
.previewLink {
.link { @include text-small; height: 18px; margin-bottom: 2px; color: $colorTextSecondary; @include text-overflow-nw; }
.name { @include text-common; font-weight: 500; height: 22px; color: $colorTextPrimary; @include text-overflow-nw; margin-bottom: 2px; }
.name { @include text-common; font-weight: 500; height: 22px; color: var(--color-text-primary); @include text-overflow-nw; margin-bottom: 2px; }
.descr {
@include text-small; @include clamp2; height: 36px; color: $colorTextPrimary; margin: 2px 0px 0px 0px;
@include text-small; @include clamp2; height: 36px; color: var(--color-text-primary); margin: 2px 0px 0px 0px;
}
.img {

2
src/scss/component/progress.scss
View file

@ -17,7 +17,7 @@
transition-property: opacity, transform; transition-duration: 0.05s; transition-timing-function: ease-in-out; pointer-events: all;
}
.inner {
.label { position: absolute; left: 16px; top: 12px; z-index: 1; color: $colorTextPrimary; white-space: nowrap; @include text-paragraph; }
.label { position: absolute; left: 16px; top: 12px; z-index: 1; color: var(--color-text-primary); white-space: nowrap; @include text-paragraph; }
.bar { width: calc(100% - 32px); height: 8px; background: $colorShapeTertiary; overflow: hidden; border-radius: 8px; position: absolute; bottom: 16px; left: 16px; }
.fill { position: absolute; left: 0px; top: 0px; height: 100%; background: $colorControlAccent; transition: width 0.2s linear; }
}

2
src/scss/component/tooltip.scss
View file

@ -14,7 +14,7 @@
}
.tooltip.big {
background-color: $colorBgPrimary; color: $colorTextPrimary; width: 316px; white-space: normal; padding: 12px 16px;
background-color: $colorBgPrimary; color: var(--color-text-primary); width: 316px; white-space: normal; padding: 12px 16px;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2); border-radius: 8px;
}
.tooltip.big {

2
src/scss/form/button.scss
View file

@ -49,4 +49,4 @@ input.button { line-height: 1; }
letter-spacing: 0.1px;
}
.button.simple:hover,
.button.simple.hover { color: $colorTextPrimary; }
.button.simple.hover { color: var(--color-text-primary); }

4
src/scss/form/inputWithFile.scss
View file

@ -9,13 +9,13 @@
.txt { line-height: 20px; height: 20px; overflow: hidden; width: calc(100% - 26px); vertical-align: top; }
.fileWrap { display: inline-block; vertical-align: top; }
.fileWrap .border { border-bottom: 0.05em solid $colorControlActive; display: inline-block; line-height: 1; transition: $transitionAllCommon; }
.fileWrap:hover .border { color: $colorTextPrimary; }
.fileWrap:hover .border { color: var(--color-text-primary); }
.input::placeholder { color: $colorControlActive; }
.urlToggle { cursor: text; display: inline-block; }
#form { display: inline-block; vertical-align: top; }
#url { height: 20px; line-height: 20px; vertical-align: top; padding: 0px; border: 0px; color: $colorTextPrimary; }
#url { height: 20px; line-height: 20px; vertical-align: top; padding: 0px; border: 0px; color: var(--color-text-primary); }
.icon { width: 20px; height: 20px; margin: 0px 6px 0px 0px; transition: none; vertical-align: top; }
.icon.image { background-image: url('~img/icon/menu/action/block/media/image0.svg'); }

2
src/scss/list/widget.scss
View file

@ -22,7 +22,7 @@
.button.disabled { background: $colorShapeTertiary; max-width: 80px; }
.button.edit {
box-shadow: 0px 0px; background: $colorShapeHighlightMedium; border-radius: 6px; @include text-common; color: $colorTextPrimary; line-height: 26px; width: auto;
box-shadow: 0px 0px; background: $colorShapeHighlightMedium; border-radius: 6px; @include text-common; color: var(--color-text-primary); line-height: 26px; width: auto;
padding: 0px 10px;
}
}

2
src/scss/menu/block/cover.scss
View file

@ -13,7 +13,7 @@
}
.head {
.btn { display: inline-block; margin-right: 16px; transition: $transitionAllCommon; }
.btn:hover, .btn.active { color: $colorTextPrimary; }
.btn:hover, .btn.active { color: var(--color-text-primary); }
.btn:last-child { margin: 0px; }
}

4
src/scss/menu/block/icon.scss
View file

@ -127,11 +127,11 @@
.icon.color {
.inner {
width: 16px; height: 16px; position: absolute; left: 50%; top: 50%; margin: -8px 0px 0px -8px; border-radius: 100%;
background: $colorTextPrimary;
background: var(--color-text-primary);
}
.inner.bgColor-default { box-shadow: 0px 0px 0px 1px $colorShapeSecondary inset; background: $colorBgPrimary; }
.inner.textColor-black { background: $colorTextPrimary; }
.inner.textColor-black { background: var(--color-text-primary); }
.inner.textColor-grey { background: $colorControlActive; }
.inner.textColor-yellow { background: $colorYellow; }
.inner.textColor-orange { background: $colorOrange; }

2
src/scss/menu/block/link.scss
View file

@ -34,6 +34,6 @@
.info { padding-left: 52px; }
}
.item.add { color: $colorTextPrimary; }
.item.add { color: var(--color-text-primary); }
}
}

4
src/scss/menu/block/relation.scss
View file

@ -41,7 +41,7 @@
.sections { display: flex; flex-direction: column; height: 100%; }
.section { padding: 0px; }
.section > .name { @include text-common; padding: 7px 32px; position: relative; color: $colorTextPrimary; margin: 0px; }
.section > .name { @include text-common; padding: 7px 32px; position: relative; color: var(--color-text-primary); margin: 0px; }
.section:last-child::after { display: none; }
.section::after { margin: 16px 32px; }
@ -162,7 +162,7 @@
.info { width: 100%; transition: $transitionAllCommon; }
}
.item.add:hover {
.info { color: $colorTextPrimary; }
.info { color: var(--color-text-primary); }
.icon.plus { background-image: url('~img/icon/plus/menu1.svg'); }
}
}

2
src/scss/menu/button.scss
View file

@ -4,7 +4,7 @@
.menu.menuButton { white-space: nowrap; height: 44px; line-height: 44px; padding: 0px 14px; }
.menu.menuButton {
.item { display: inline-block; @include text-common; margin-right: 16px; color: $colorControlActive; transition: $transitionAllCommon; }
.item:hover { color: $colorTextPrimary; }
.item:hover { color: var(--color-text-primary); }
.item:last-child { margin: 0px; }
}
}

4
src/scss/menu/common.scss
View file

@ -65,14 +65,14 @@
.tabs { padding: 10px 14px; border-bottom: 1px solid $colorShapeSecondary; white-space: nowrap; font-weight: 700; color: $colorControlActive; }
.tabs {
.tab { display: inline-block; vertical-align: top; transition: $transitionAllCommon; margin-right: 16px; position: relative; }
.tab:hover, .tab.active { color: $colorTextPrimary; }
.tab:hover, .tab.active { color: var(--color-text-primary); }
.tab:last-child { margin: 0px; }
}
.titleWrapper { display: flex; gap: 0 6px; padding: 8px 14px; align-items: center; }
.titleWrapper {
.icon.back { width: 20px; height: 20px; background-image: url('~img/arrow/menu.svg'); transform: rotateZ(180deg); }
.title { @include text-common; font-weight: 600; color: $colorTextPrimary; padding: 0; }
.title { @include text-common; font-weight: 600; color: var(--color-text-primary); padding: 0; }
}
.inputWrap { padding: 0px 14px 8px 14px; }

2
src/scss/menu/dataview/create/bookmark.scss
View file

@ -16,7 +16,7 @@
display: inline-block; vertical-align: top; transition: $transitionAllCommon; color: $colorControlActive;
background: none; border: 0px; padding: 0px; height: 100%; padding: 0px 16px; line-height: 44px;
}
.button:hover { color: $colorTextPrimary; }
.button:hover { color: var(--color-text-primary); }
}
}
}

2
src/scss/menu/onboarding.scss
View file

@ -15,7 +15,7 @@
}
.highlight {
background: $colorShapeSecondary; white-space: nowrap; border-radius: 4px; padding: 2px 6px; color: $colorTextPrimary;
background: $colorShapeSecondary; white-space: nowrap; border-radius: 4px; padding: 2px 6px; color: var(--color-text-primary);
font-family: 'Plex'; font-weight: 400; font-size: 14px; line-height: 14px; letter-spacing: -0.12px;
}
a { color: $colorTextInversion; text-decoration: underline; }

2
src/scss/menu/select.scss
View file

@ -30,7 +30,7 @@
.menu.menuSelect.button {
.item { white-space: nowrap; display: inline-block; margin-right: 16px; color: $colorControlActive; font-weight: 500; }
.item:hover { color: $colorTextPrimary; }
.item:hover { color: var(--color-text-primary); }
.item:last-child { margin-right: 0px; }
}

2
src/scss/menu/smile.scss
View file

@ -14,7 +14,7 @@
.head {
.btn { display: inline-block; vertical-align: top; transition: $transitionAllCommon; }
.btn:last-child { margin-right: 0px; }
.btn:hover, .btn.active { color: $colorTextPrimary; }
.btn:hover, .btn.active { color: var(--color-text-primary); }
}
.body.gallery {

2
src/scss/page/main/space.scss
View file

@ -40,7 +40,7 @@
.btn {
.icon.plus { vertical-align: top; width: 20px; height: 20px; background-image: url('~img/icon/plus/template0.svg'); }
}
.btn:hover { color: $colorTextPrimary; }
.btn:hover { color: var(--color-text-primary); }
.btn:hover {
.icon.plus { background-image: url('~img/icon/plus/template1.svg'); }
}

4
src/scss/page/main/store.scss
View file

@ -41,7 +41,7 @@
display: inline-block; font-weight: 700; font-size: 18px; line-height: 26px; letter-spacing: -0.16px;
color: $colorControlActive; transition: $transitionAllCommon;
}
.tab:hover, .tab.active { color: $colorTextPrimary; }
.tab:hover, .tab.active { color: var(--color-text-primary); }
}
.loaderWrapper { position: relative !important; }
@ -84,7 +84,7 @@
@include text-common; opacity: 0; background: none; color: $colorTextSecondary; border-radius: 0px; padding: 0px; height: 1em;
line-height: 1em; cursor: default;
}
.button:hover { color: $colorTextPrimary; }
.button:hover { color: var(--color-text-primary); }
}
}
.item:hover {

4
src/scss/page/main/type.scss
View file

@ -33,7 +33,7 @@
.btn {
.icon.plus { vertical-align: top; width: 20px; height: 20px; background-image: url('~img/icon/plus/template0.svg'); }
}
.btn:hover { color: $colorTextPrimary; }
.btn:hover { color: var(--color-text-primary); }
.btn:hover {
.icon.plus { background-image: url('~img/icon/plus/template1.svg'); }
}
@ -65,7 +65,7 @@
.name { color: $colorTextSecondary; transition: $transitionAllCommon; }
.clickable:hover {
.name { color: $colorTextPrimary; }
.name { color: var(--color-text-primary); }
.icon.plus { background-image: url('~img/icon/plus/menu1.svg'); }
}
}

10
src/scss/popup/settings.scss
View file

@ -154,7 +154,7 @@
}
.select:hover { background: $colorShapeHighlightMedium; }
.select {
.item { border-bottom: 0; color: $colorTextPrimary; }
.item { border-bottom: 0; color: var(--color-text-primary); }
.item {
.iconObject { display: none; }
.name { line-height: 20px; }
@ -427,7 +427,7 @@
.icon { background-image: url('~img/icon/popup/settings/theme/system.svg'); }
}
.btn.active { color: $colorTextPrimary; }
.btn.active { color: var(--color-text-primary); }
.btn.active {
.bg { box-shadow: 0px 0px 0px 2px #ffee94; }
}
@ -445,7 +445,7 @@
}
.select:hover { background: $colorShapeHighlightMedium; }
.select {
.item { border-bottom: 0; color: $colorTextPrimary; }
.item { border-bottom: 0; color: var(--color-text-primary); }
.icon.arrow { right: 3px !important; }
}
}
@ -467,7 +467,7 @@
.item { width: auto; }
}
.item:hover { border-color: $colorTextPrimary; }
.item:hover { border-color: var(--color-text-primary); }
.item {
.icon { width: 28px; margin: 0px 0px 8px 0px; height: 28px; background-size: contain; background-position: top center; }
@ -503,7 +503,7 @@
.btn {
.icon.help { width: 14px; height: 14px; background-image: url('~img/icon/popup/settings/help0.svg'); transition: $transitionAllCommon; }
}
.btn:hover { color: $colorTextPrimary; }
.btn:hover { color: var(--color-text-primary); }
.btn:hover {
.icon.help { background-image: url('~img/icon/popup/settings/help1.svg'); }
}

2
src/scss/popup/shortcut.scss
View file

@ -18,7 +18,7 @@
.tabs {
.item { margin-right: 24px; display: inline-block; transition: $transitionAllCommon; cursor: default; }
.item:last-child { margin: 0px; }
.item:hover, .item.active { color: $colorTextPrimary; }
.item:hover, .item.active { color: var(--color-text-primary); }
}
}

4
src/scss/theme/dark/_vars.scss
View file

@ -1,3 +1,7 @@
:root {
--color-text-primary: #dcdcdc;
}
$themePath: '~img/theme/dark';
/* Text */

36
src/scss/theme/dark/block.scss
View file

@ -5,8 +5,8 @@
}
.elements {
.btn.white { background: $colorShapeSecondary; color: $colorTextPrimary; }
.btn.white:hover { background: $colorBgPrimary; color: $colorTextPrimary; }
.btn.white { background: $colorShapeSecondary; color: var(--color-text-primary); }
.btn.white:hover { background: $colorBgPrimary; color: var(--color-text-primary); }
.btn {
.icon.icon { background-image: url('#{$themePath}/icon/add/icon1.svg'); }
@ -26,7 +26,7 @@
.icon.dnd { border-color: rgba(217, 212, 184, 0.14); }
.emptyToggle { color: $colorTextSecondary; }
.emptyToggle:hover { color: $colorTextPrimary; }
.emptyToggle:hover { color: var(--color-text-primary); }
.colResize {
.line { background: $colorShapeSecondary; }
@ -81,7 +81,7 @@
.icon { background-image: url('#{$themePath}/arrow/loadMore0.svg'); }
}
.loadMore:hover { color: $colorTextPrimary; }
.loadMore:hover { color: var(--color-text-primary); }
.loadMore:hover {
.icon { background-image: url('#{$themePath}/arrow/loadMore1.svg'); }
}
@ -100,10 +100,10 @@
.dataviewEmpty { border-color: $colorShapeSecondary; }
.dataviewEmpty {
.button { color: $colorTextPrimary; }
.button { color: var(--color-text-primary); }
}
.dataviewHead { border-color: $colorShapeSecondary; color: $colorTextPrimary; }
.dataviewHead { border-color: $colorShapeSecondary; color: var(--color-text-primary); }
.dataviewHead {
.icon:hover { background-color: $colorShapeHighlightMedium; }
.icon.source { background-image: url('#{$themePath}/icon/dataview/button/source0.svg'); opacity: 0; }
@ -112,7 +112,7 @@
.dataviewControls {
> .sides {
> .side.right {
.filter { color: $colorTextPrimary; }
.filter { color: var(--color-text-primary); }
.buttonWrap.withSelect {
.button.select { border-left-color: rgba(23,23,23,0.1); }
@ -124,7 +124,7 @@
.viewItem {
.icon.arrow { background-image: url('#{$themePath}/arrow/view.svg'); }
}
.viewItem:hover, .viewItem.active { color: $colorTextPrimary; }
.viewItem:hover, .viewItem.active { color: var(--color-text-primary); }
.viewItem.isDragging { background: $colorShapeHighlightMedium; }
.icon:hover, .icon.active { background-color: $colorShapeHighlightMedium; }
@ -134,9 +134,9 @@
.dataviewControls::after { background-color: $colorShapeSecondary; }
.dataviewSelection {
.side.left { color: $colorTextPrimary; }
.side.left { color: var(--color-text-primary); }
.side.right {
.element { color: $colorTextPrimary; }
.element { color: var(--color-text-primary); }
.element:hover { background-color: $colorShapeHighlightMedium; }
}
}
@ -148,7 +148,7 @@
.viewContent.viewList {
.cell.add { color: $colorTextSecondary; }
.cell.add {
.btn:hover { color: $colorTextPrimary; }
.btn:hover { color: var(--color-text-primary); }
.btn:hover {
.icon.plus { background-image: url('#{$themePath}/icon/plus/menu1.svg'); }
}
@ -175,13 +175,13 @@
}
.viewContent.viewList, .viewContent.viewGallery, .viewContent.viewBoard {
.cellContent.isName { color: $colorTextPrimary; }
.cellContent.isName { color: var(--color-text-primary); }
}
.viewContent.viewGallery,
.viewContent.viewBoard {
.card {
.cellContent.c-description { color: $colorTextPrimary; }
.cellContent.c-description { color: var(--color-text-primary); }
}
}
@ -258,7 +258,7 @@
.block.blockText {
markupcode { background: $colorShapeHighlightMedium; color: $colorSystemAccent100; }
markuplink, markupobject { border-color: $colorTextSecondary; }
markuplink:hover, markupobject:hover { border-color: $colorTextPrimary; }
markuplink:hover, markupobject:hover { border-color: var(--color-text-primary); }
}
.block.blockText.textCallout > .wrapContent { background: rgba(140, 158, 165, 0.25); }
@ -281,7 +281,7 @@
.block.blockLink.text:hover {
.linkCard {
.cardName .name { border-color: $colorTextPrimary; }
.cardName .name { border-color: var(--color-text-primary); }
}
}
.block.blockLink.card:hover {
@ -313,7 +313,7 @@
.icon.embed-figma { background-image: url('#{$themePath}/icon/block/embed/figma.svg'); }
}
.select { color: $colorTextPrimary; }
.select { color: var(--color-text-primary); }
.wrap.isEditing { background-color: $colorShapeHighlightLight; }
#input { background: $colorShapeSecondary; border-color: $colorShapeHighlightLight; }
#placeholder { color: $colorTextSecondary; }
@ -327,7 +327,7 @@
.inner { border-color: transparent; background-color: $colorShapeHighlightMedium; }
.inner {
.name { color: $colorTextPrimary; }
.name { color: var(--color-text-primary); }
.descr { color: $colorTextSecondary; }
.link { color: $colorTextSecondary; }
@ -359,7 +359,7 @@
.cell { background: $colorBgPrimary; border-color: $colorShapePrimary; }
.cell {
.block { color: $colorTextPrimary; }
.block { color: var(--color-text-primary); }
.icon.menu:hover {
.inner { box-shadow: 0px 0px; background-color: $colorShapePrimary; }

52
src/scss/theme/dark/common.scss
View file

@ -5,9 +5,9 @@ html.themeDark {
/* Common */
body { background: $colorBgPrimary; color: $colorTextPrimary; color-scheme: dark; }
body { background: $colorBgPrimary; color-scheme: dark; }
a { color: $colorTextPrimary; }
a { color: var(--color-text-primary); }
a:hover { color: $colorOrange; }
#root-loader { background: $colorBgPrimary; }
@ -26,7 +26,7 @@ html.themeDark {
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.5); }
::selection { background-color: $colorSystemSelection; }
.textColor-default { color: $colorTextPrimary !important; }
.textColor-default { color: var(--color-text-primary) !important; }
.bgColor-grey { background: rgba(140, 158, 165, 0.25) !important; }
.bgColor-yellow { background: rgba(236, 217, 27, 0.25) !important; }
@ -40,7 +40,7 @@ html.themeDark {
.bgColor-lime { background: rgba(93, 212, 0, 0.25) !important; }
.isMultiSelect.archive { background-color: $colorShapeHighlightMedium; color: $colorTextSecondary; }
.isMultiSelect.tagColor-default { color: $colorTextPrimary !important; background: unset !important; box-shadow: 0px 0px 0px 1px $colorShapePrimary inset; }
.isMultiSelect.tagColor-default { color: var(--color-text-primary) !important; background: unset !important; box-shadow: 0px 0px 0px 1px $colorShapePrimary inset; }
.isMultiSelect.tagColor-grey { color: #8c9ea5 !important; background: rgba(140, 158, 165, 0.25) !important; }
.isMultiSelect.tagColor-yellow { color: $colorYellow !important; background: rgba(236, 217, 27, 0.25) !important; }
.isMultiSelect.tagColor-orange { color: $colorOrange !important; background: rgba(255, 181, 34, 0.25) !important; }
@ -52,7 +52,7 @@ html.themeDark {
.isMultiSelect.tagColor-teal { color: $colorTeal !important; background: rgba(15, 200, 186, 0.25) !important; }
.isMultiSelect.tagColor-lime { color: $colorLime !important; background: rgba(93, 212, 0, 0.25) !important; }
.isSelect.tagColor-default { color: $colorTextPrimary !important; }
.isSelect.tagColor-default { color: var(--color-text-primary) !important; }
.selectable.isSelectionSelected::after,
.block.isSelectionSelected > .wrapContent > .selectable::after
@ -89,7 +89,7 @@ html.themeDark {
}
.mediaAudio {
.controls { color: $colorTextPrimary; }
.controls { color: var(--color-text-primary); }
.controls {
.icon.play { background-image: url('#{$themePath}/icon/audio/play.svg'); }
.icon.play.active { background-image: url('#{$themePath}/icon/audio/pause.svg'); }
@ -112,7 +112,7 @@ html.themeDark {
.arrow { background-image: url('~img/arrow/button/black.svg'); }
}
.button.blank { color: $colorTextPrimary; border-color: $colorShapePrimary; }
.button.blank { color: var(--color-text-primary); border-color: $colorShapePrimary; }
.button.blank:not(.disabled):hover,
.button.blank:not(.disabled).hover { border-color: $colorShapePrimary; background: $colorShapeHighlightMedium; }
@ -130,7 +130,7 @@ html.themeDark {
}
.emptySearch {
b { color: $colorTextPrimary; }
b { color: var(--color-text-primary); }
.label { color: $colorTextSecondary; }
}
@ -153,9 +153,9 @@ html.themeDark {
.inputWithFile { background: $colorShapeHighlightMedium; color: $colorTextSecondary; border-color: transparent; }
.inputWithFile {
.input::placeholder { color: $colorTextSecondary; }
.fileWrap:hover .border { color: $colorTextPrimary; }
.fileWrap:hover .border { color: var(--color-text-primary); }
#url { color: $colorTextPrimary; }
#url { color: var(--color-text-primary); }
}
.listPreviewObject {
@ -185,7 +185,7 @@ html.themeDark {
.icon.logo { background-image: url('#{$themePath}/icon/type/logo.svg'); }
.moreWrapper { background: $colorShapeTertiary; }
.heading {
.iconObject { background-color: $colorShapeTertiary; box-shadow: 0px 0px 0px 1px $colorTextPrimary inset; }
.iconObject { background-color: $colorShapeTertiary; box-shadow: 0px 0px 0px 1px var(--color-text-primary) inset; }
.iconObject.isTask, .iconObject.isBookmark { background-color: unset; }
.featured { background: $colorShapeSecondary; }
@ -226,11 +226,11 @@ html.themeDark {
.content { background: $colorBgSecondary; }
.head { border-color: $colorShapeSecondary; color: $colorTextSecondary; }
.head {
.item:hover { color: $colorTextPrimary; }
.item:hover { color: var(--color-text-primary); }
}
.previewLink {
.name { color: $colorTextPrimary; }
.name { color: var(--color-text-primary); }
.descr { color: $colorTextSecondary; }
.link { color: $colorTextSecondary; }
.img { border-color: $colorShapeSecondary; }
@ -242,9 +242,9 @@ html.themeDark {
/* Pager */
.pager {
.pageItem:hover { color: $colorTextPrimary; }
.pageItem:hover { color: var(--color-text-primary); }
.pageItem.active { color: $colorOrange; }
.pageItem.list:hover { color: $colorTextPrimary; }
.pageItem.list:hover { color: var(--color-text-primary); }
.icon.arrow { background-image: url('#{$themePath}/arrow/pager0.svg'); }
.icon.arrow:hover { background-image: url('#{$themePath}/arrow/pager1.svg'); }
@ -261,7 +261,7 @@ html.themeDark {
.inner { background: $colorBgSecondary; }
.inner {
.fill { background: $colorTextSecondary; }
.label { color: $colorTextPrimary; }
.label { color: var(--color-text-primary); }
.bar { background: $colorShapeHighlightMedium; }
}
}
@ -272,7 +272,7 @@ html.themeDark {
}
}
.tooltip { background: $colorShapeSecondary; color: $colorTextPrimary; }
.tooltip { background: $colorShapeSecondary; color: var(--color-text-primary); }
.tooltip.big { background: $colorBgSecondary; border: 1px solid rgba(229, 229, 229, 0.1); }
/* Icon */
@ -296,7 +296,7 @@ html.themeDark {
.editorControls {
.btn { background: $colorShapeSecondary; color: $colorTextSecondary; }
.btn:hover { color: $colorTextPrimary; }
.btn:hover { color: var(--color-text-primary); }
.btn {
.icon.icon { background-image: url('#{$themePath}/icon/add/icon0.svg'); }
@ -317,20 +317,20 @@ html.themeDark {
.header.isCommon { background: $colorBgPrimary; }
.header.isCommon {
.path { border: 0px; line-height: 28px; }
.path:hover { background-color: $colorShapeHighlightMedium; color: $colorTextPrimary; }
.path:hover { background-color: $colorShapeHighlightMedium; color: var(--color-text-primary); }
.icon:hover, .icon.hover { background-color: $colorShapeHighlightMedium; }
.tabs { color: $colorTextSecondary; }
.tabs {
.tab.active, .tab:hover { color: $colorTextPrimary; border-color: $colorShapePrimary; }
.tab.active, .tab:hover { color: var(--color-text-primary); border-color: $colorShapePrimary; }
}
.headerBanner { background: $colorShapeTertiary; color: $colorTextPrimary; }
.headerBanner { background: $colorShapeTertiary; color: var(--color-text-primary); }
.headerBanner.withMenu:after { background-image: url('~img/arrow/button/white.svg'); }
}
.header.isCommon.active {
.path { background-color: $colorShapeHighlightMedium; color: $colorTextPrimary; }
.path { background-color: $colorShapeHighlightMedium; color: var(--color-text-primary); }
}
.header.mainHistory { background: $colorBgPrimary; }
@ -342,7 +342,7 @@ html.themeDark {
}
}
.item.grey:hover { color: $colorTextPrimary; }
.item.grey:hover { color: var(--color-text-primary); }
.item:hover {
.icon.arrow { background-image: url('#{$themePath}/arrow/history1.svg'); }
@ -357,7 +357,7 @@ html.themeDark {
/* Sidebar */
.sidebar { background-color: $colorBgSecondary; color: $colorTextPrimary; box-shadow: 0px 4px 16px rgba(0,0,0,0.2); }
.sidebar { background-color: $colorBgSecondary; color: var(--color-text-primary); box-shadow: 0px 4px 16px rgba(0,0,0,0.2); }
.sidebar.fixed { box-shadow: 0px 0px rgba(0,0,0,0); }
.sidebar {
> .head {
@ -391,7 +391,7 @@ html.themeDark {
}
.cell.isEditing.c-select, .cell.isEditing.c-object {
#entry { color: $colorTextPrimary; }
#entry { color: var(--color-text-primary); }
}
.cellContent.c-url,
@ -399,7 +399,7 @@ html.themeDark {
.cellContent.c-phone
{
.name { border-color: $colorTextSecondary; }
.name:hover { color: $colorTextPrimary; border-color: $colorTextPrimary; }
.name:hover { color: var(--color-text-primary); border-color: var(--color-text-primary); }
}
/* Notifications */

26
src/scss/theme/dark/menu.scss
View file

@ -39,7 +39,7 @@
.menu.vertical {
.tabs { border-color: $colorShapeSecondary; }
.tabs {
.tab:hover, .tab.active { color: $colorTextPrimary; }
.tab:hover, .tab.active { color: var(--color-text-primary); }
}
.titleWrapper {
@ -97,7 +97,7 @@
.menu.menuSmile {
.head { border-color: $colorShapeSecondary; color: $colorTextSecondary; }
.head {
.btn:hover, .btn.active { color: $colorTextPrimary; }
.btn:hover, .btn.active { color: var(--color-text-primary); }
}
.body.gallery {
@ -130,14 +130,14 @@
.menu.menuBlockCover {
.head { border-color: $colorShapeSecondary; color: $colorTextSecondary; }
.head {
.btn:hover, .btn.active { color: $colorTextPrimary; }
.btn:hover, .btn.active { color: var(--color-text-primary); }
}
}
/* MenuBlockRelationView */
.menu.menuBlockRelationView {
.section > .name { color: $colorTextPrimary; }
.section > .name { color: var(--color-text-primary); }
.item {
.icon.dnd { border-color: rgba(217, 212, 184, 0.14); }
@ -151,7 +151,7 @@
}
.item.add:hover {
.info { background: $colorShapeHighlightMedium; color: $colorTextPrimary; }
.info { background: $colorShapeHighlightMedium; color: var(--color-text-primary); }
.icon.plus { background-image: url('#{$themePath}/icon/plus/menu1.svg'); }
}
}
@ -185,7 +185,7 @@
/* MenuDataviewFileValues */
.menu.menuDataviewFileValues {
.item { color: $colorTextPrimary; }
.item { color: var(--color-text-primary); }
.item:hover::before { background: $colorShapeHighlightMedium; }
.item {
.icon.more { background-color: $colorShapeHighlightMedium; }
@ -249,7 +249,7 @@
.menu.menuButton {
.item { color: $colorTextSecondary; }
.item:hover { color: $colorTextPrimary; }
.item:hover { color: var(--color-text-primary); }
}
/* MenuDataviewCalendar */
@ -290,7 +290,7 @@
.iconObject { background-color: $colorShapeTertiary; }
}
.item.add { color: $colorTextPrimary; }
.item.add { color: var(--color-text-primary); }
}
/* MenuBlockLinkSettings */
@ -303,13 +303,13 @@
.icon.style-card { background-image: url('#{$themePath}/icon/menu/linkSettings/card0.svg'); }
}
.item:hover { color: $colorTextPrimary; box-shadow: 0px 0px 0px 1px $colorShapePrimary inset; }
.item:hover { color: var(--color-text-primary); box-shadow: 0px 0px 0px 1px $colorShapePrimary inset; }
.item:hover {
.icon.style-text { background-image: url('#{$themePath}/icon/menu/linkSettings/text1.svg'); }
.icon.style-card { background-image: url('#{$themePath}/icon/menu/linkSettings/card1.svg'); }
}
.item.active { color: $colorTextPrimary; background: $colorShapeHighlightMedium; }
.item.active { color: var(--color-text-primary); background: $colorShapeHighlightMedium; }
.item.active {
.icon.style-text { background-image: url('#{$themePath}/icon/menu/linkSettings/text2.svg'); }
.icon.style-card { background-image: url('#{$themePath}/icon/menu/linkSettings/card2.svg'); }
@ -318,7 +318,7 @@
.buttons {
.button.grey { box-shadow: 0px 0px 0px 1px $colorShapeSecondary inset; color: $colorTextSecondary; }
.button.grey:hover { box-shadow: 0px 0px 0px 1px $colorShapePrimary inset; color: $colorTextPrimary; }
.button.grey:hover { box-shadow: 0px 0px 0px 1px $colorShapePrimary inset; color: var(--color-text-primary); }
}
}
@ -359,7 +359,7 @@
.loaderWrapper { background: rgba(39, 39, 35, 0.9); }
.buttons {
.button { color: $colorTextSecondary; }
.button:hover { color: $colorTextPrimary; }
.button:hover { color: var(--color-text-primary); }
}
}
@ -411,7 +411,7 @@
/* MenuSpace */
.menu.menuSpace { color: $colorTextPrimary; }
.menu.menuSpace { color: var(--color-text-primary); }
.menu.menuSpace {
.head {
.icon.settings { background-image: url('#{$themePath}/icon/menu/space/settings.svg'); }

6
src/scss/theme/dark/page.scss
View file

@ -31,7 +31,7 @@
.body {
.tabs {
.tab { color: $colorTextSecondary; }
.tab:hover, .tab.active { color: $colorTextPrimary; }
.tab:hover, .tab.active { color: var(--color-text-primary); }
}
.emptySearch { border-color: $colorShapePrimary; }
@ -53,7 +53,7 @@
.icon.plus:hover { background-image: url('#{$themePath}/icon/store/plus1.svg'); }
.button { color: $colorTextSecondary; }
.button:hover { color: $colorTextPrimary; }
.button:hover { color: var(--color-text-primary); }
}
}
}
@ -70,7 +70,7 @@
.icon.plus { background-image: url('#{$themePath}/icon/plus/template0.svg'); }
}
.btn:hover { color: $colorTextPrimary; }
.btn:hover { color: var(--color-text-primary); }
.btn:hover {
.icon.plus { background-image: url('#{$themePath}/icon/plus/template1.svg'); }
}

8
src/scss/theme/dark/popup.scss
View file

@ -49,7 +49,7 @@
.select { color: $colorTextSecondary; }
.select {
.item { color: $colorTextPrimary; }
.item { color: var(--color-text-primary); }
}
.select:hover { background-color: $colorShapeHighlightMedium; }
@ -129,7 +129,7 @@
.btn {
.icon.help { background-image: url('#{$themePath}/icon/popup/settings/help0.svg'); }
}
.btn:hover { color: $colorTextPrimary; }
.btn:hover { color: var(--color-text-primary); }
.btn:hover {
.icon.help { background-image: url('#{$themePath}/icon/popup/settings/help1.svg'); }
}
@ -164,7 +164,7 @@
.icon { background-image: url('~img/icon/popup/settings/theme/system.svg'); }
}
.btn.active { color: $colorTextPrimary; }
.btn.active { color: var(--color-text-primary); }
.btn.active {
.bg { box-shadow: 0px 0px 0px 2px #ffee94; }
}
@ -184,7 +184,7 @@
.head {
.tabs { color: $colorTextSecondary; }
.tabs {
.item:hover, .item.active { color: $colorTextPrimary; }
.item:hover, .item.active { color: var(--color-text-primary); }
}
}

6
src/scss/theme/dark/widget.scss
View file

@ -1,10 +1,10 @@
.listWidget {
> .buttons {
.button, .button.edit { background-color: $colorShapeSecondary; color: $colorTextPrimary; }
.button, .button.edit { background-color: $colorShapeSecondary; color: var(--color-text-primary); }
}
}
.widget { background-color: $colorBgPrimary; color: $colorTextPrimary; border-color: $colorShapeSecondary !important; }
.widget { background-color: $colorBgPrimary; color: var(--color-text-primary); border-color: $colorShapeSecondary !important; }
.widget {
.iconWrap:hover, .iconWrap.active { background-color: $colorShapeHighlightMedium; }
.icon.back { background-image: url('#{$themePath}/icon/widget/back.svg'); }
@ -53,7 +53,7 @@
#viewSelect {
.viewList {
.viewItem { color: $colorTextSecondary; }
.viewItem:hover, .viewItem.active { color: $colorTextPrimary; }
.viewItem:hover, .viewItem.active { color: var(--color-text-primary); }
}
.select {

2
src/scss/widget/list.scss
View file

@ -18,7 +18,7 @@
vertical-align: top;
}
.viewItem:last-child { margin: 0px; }
.viewItem:hover, .viewItem.active { color: $colorTextPrimary; }
.viewItem:hover, .viewItem.active { color: var(--color-text-primary); }
}
.select { border: none; margin-left: -6px; padding-right: 16px; }