mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-21 13:41:40 +00:00
adding Nord theme and streamlining UI theming
This commit is contained in:
Baptiste Augrain
@@ -194,7 +194,7 @@ body[data-theme="dark"]
|
||||
color $ui-dark-text-color
|
||||
.item-bottom-tagList-item
|
||||
transition 0.15s
|
||||
background-color alpha(#fff, 20%)
|
||||
background-color alpha($ui-dark-tagList-backgroundColor, 20%)
|
||||
color $ui-dark-text-color
|
||||
&:active
|
||||
transition 0.15s
|
||||
@@ -207,7 +207,7 @@ body[data-theme="dark"]
|
||||
color $ui-dark-text-color
|
||||
.item-bottom-tagList-item
|
||||
transition 0.15s
|
||||
background-color alpha(white, 10%)
|
||||
background-color alpha($ui-dark-tagList-backgroundColor, 10%)
|
||||
color $ui-dark-text-color
|
||||
|
||||
.item-wrapper
|
||||
@@ -223,13 +223,13 @@ body[data-theme="dark"]
|
||||
.item-bottom-time
|
||||
color $ui-dark-text-color
|
||||
.item-bottom-tagList-item
|
||||
background-color alpha(white, 10%)
|
||||
background-color alpha($ui-dark-tagList-backgroundColor, 10%)
|
||||
color $ui-dark-text-color
|
||||
&:hover
|
||||
background-color alpha($ui-dark-button--active-backgroundColor, 60%)
|
||||
color #c0392b
|
||||
color $ui-dark-button--hover-color
|
||||
.item-bottom-tagList-item
|
||||
background-color alpha(#fff, 20%)
|
||||
background-color alpha($ui-dark-tagList-backgroundColor, 20%)
|
||||
|
||||
.item-title
|
||||
color $ui-inactive-text-color
|
||||
@@ -322,148 +322,82 @@ body[data-theme="solarized-dark"]
|
||||
color $ui-inactive-text-color
|
||||
vertical-align middle
|
||||
|
||||
body[data-theme="monokai"]
|
||||
.root
|
||||
border-color $ui-monokai-borderColor
|
||||
background-color $ui-monokai-noteList-backgroundColor
|
||||
apply-theme(theme)
|
||||
body[data-theme={theme}]
|
||||
.root
|
||||
border-color get-theme-var(theme, 'borderColor')
|
||||
background-color get-theme-var(theme, 'noteList-backgroundColor')
|
||||
|
||||
.item
|
||||
border-color $ui-monokai-borderColor
|
||||
background-color $ui-monokai-noteList-backgroundColor
|
||||
&:hover
|
||||
transition 0.15s
|
||||
// background-color alpha($ui-monokai-noteList-backgroundColor, 20%)
|
||||
color $ui-monokai-text-color
|
||||
.item-title
|
||||
.item-title-icon
|
||||
.item-bottom-time
|
||||
.item
|
||||
border-color get-theme-var(theme, 'borderColor')
|
||||
background-color get-theme-var(theme, 'noteList-backgroundColor')
|
||||
&:hover
|
||||
transition 0.15s
|
||||
color $ui-monokai-text-color
|
||||
.item-bottom-tagList-item
|
||||
// background-color alpha(get-theme-var(theme, 'noteList-backgroundColor'), 20%)
|
||||
color get-theme-var(theme, 'text-color')
|
||||
.item-title
|
||||
.item-title-icon
|
||||
.item-bottom-time
|
||||
transition 0.15s
|
||||
color get-theme-var(theme, 'text-color')
|
||||
.item-bottom-tagList-item
|
||||
transition 0.15s
|
||||
background-color alpha(get-theme-var(theme, 'noteList-backgroundColor'), 20%)
|
||||
color get-theme-var(theme, 'text-color')
|
||||
&:active
|
||||
transition 0.15s
|
||||
background-color alpha($ui-monokai-noteList-backgroundColor, 20%)
|
||||
color $ui-monokai-text-color
|
||||
&:active
|
||||
transition 0.15s
|
||||
background-color $ui-monokai-noteList-backgroundColor
|
||||
color $ui-monokai-text-color
|
||||
.item-title
|
||||
.item-title-icon
|
||||
.item-bottom-time
|
||||
transition 0.15s
|
||||
color $ui-monokai-text-color
|
||||
.item-bottom-tagList-item
|
||||
transition 0.15s
|
||||
background-color alpha($ui-monokai-noteList-backgroundColor, 10%)
|
||||
color $ui-monokai-text-color
|
||||
background-color get-theme-var(theme, 'noteList-backgroundColor')
|
||||
color get-theme-var(theme, 'text-color')
|
||||
.item-title
|
||||
.item-title-icon
|
||||
.item-bottom-time
|
||||
transition 0.15s
|
||||
color get-theme-var(theme, 'text-color')
|
||||
.item-bottom-tagList-item
|
||||
transition 0.15s
|
||||
background-color alpha(get-theme-var(theme, 'noteList-backgroundColor'), 10%)
|
||||
color get-theme-var(theme, 'text-color')
|
||||
|
||||
.item-wrapper
|
||||
border-color alpha($ui-monokai-button-backgroundColor, 60%)
|
||||
|
||||
.item--active
|
||||
border-color $ui-monokai-borderColor
|
||||
background-color $ui-monokai-button-backgroundColor
|
||||
.item-wrapper
|
||||
border-color transparent
|
||||
.item-title
|
||||
.item-title-icon
|
||||
.item-bottom-time
|
||||
color $ui-monokai-active-color
|
||||
.item-bottom-tagList-item
|
||||
background-color alpha(white, 10%)
|
||||
color $ui-monokai-text-color
|
||||
&:hover
|
||||
// background-color alpha($ui-monokai-button--active-backgroundColor, 60%)
|
||||
color #f92672
|
||||
.item-bottom-tagList-item
|
||||
background-color alpha(#fff, 20%)
|
||||
border-color alpha(get-theme-var(theme, 'button-backgroundColor'), 60%)
|
||||
|
||||
.item-title
|
||||
color $ui-inactive-text-color
|
||||
|
||||
.item-title-icon
|
||||
color $ui-inactive-text-color
|
||||
|
||||
.item-title-empty
|
||||
color $ui-inactive-text-color
|
||||
|
||||
.item-bottom-tagList-item
|
||||
background-color alpha($ui-dark-button--active-backgroundColor, 40%)
|
||||
color $ui-inactive-text-color
|
||||
|
||||
.item-bottom-tagList-empty
|
||||
color $ui-inactive-text-color
|
||||
vertical-align middle
|
||||
|
||||
body[data-theme="dracula"]
|
||||
.root
|
||||
border-color $ui-dracula-borderColor
|
||||
background-color $ui-dracula-noteList-backgroundColor
|
||||
|
||||
.item
|
||||
border-color $ui-dracula-borderColor
|
||||
background-color $ui-dracula-noteList-backgroundColor
|
||||
&:hover
|
||||
transition 0.15s
|
||||
// background-color alpha($ui-dracula-noteList-backgroundColor, 20%)
|
||||
color $ui-dracula-text-color
|
||||
.item--active
|
||||
border-color get-theme-var(theme, 'borderColor')
|
||||
background-color get-theme-var(theme, 'button-backgroundColor')
|
||||
.item-wrapper
|
||||
border-color transparent
|
||||
.item-title
|
||||
.item-title-icon
|
||||
.item-bottom-time
|
||||
transition 0.15s
|
||||
color $ui-dracula-text-color
|
||||
color get-theme-var(theme, 'active-color')
|
||||
.item-bottom-tagList-item
|
||||
transition 0.15s
|
||||
background-color alpha($ui-dracula-noteList-backgroundColor, 20%)
|
||||
color $ui-dracula-text-color
|
||||
&:active
|
||||
transition 0.15s
|
||||
background-color $ui-dracula-noteList-backgroundColor
|
||||
color $ui-dracula-text-color
|
||||
.item-title
|
||||
.item-title-icon
|
||||
.item-bottom-time
|
||||
transition 0.15s
|
||||
color $ui-dracula-text-color
|
||||
.item-bottom-tagList-item
|
||||
transition 0.15s
|
||||
background-color alpha($ui-dracula-noteList-backgroundColor, 10%)
|
||||
color $ui-dracula-text-color
|
||||
background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 10%)
|
||||
color get-theme-var(theme, 'text-color')
|
||||
&:hover
|
||||
// background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%)
|
||||
color get-theme-var(theme, 'button--hover-color')
|
||||
.item-bottom-tagList-item
|
||||
background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 20%)
|
||||
|
||||
.item-wrapper
|
||||
border-color alpha($ui-dracula-button-backgroundColor, 60%)
|
||||
|
||||
.item--active
|
||||
border-color $ui-dracula-borderColor
|
||||
background-color $ui-dracula-button-backgroundColor
|
||||
.item-wrapper
|
||||
border-color transparent
|
||||
.item-title
|
||||
color $ui-inactive-text-color
|
||||
|
||||
.item-title-icon
|
||||
.item-bottom-time
|
||||
color $ui-dracula-active-color
|
||||
color $ui-inactive-text-color
|
||||
|
||||
.item-title-empty
|
||||
color $ui-inactive-text-color
|
||||
|
||||
.item-bottom-tagList-item
|
||||
background-color alpha(#f8f8f2, 10%)
|
||||
color $ui-dracula-text-color
|
||||
&:hover
|
||||
// background-color alpha($ui-dracula-button--active-backgroundColor, 60%)
|
||||
color #ff79c6
|
||||
.item-bottom-tagList-item
|
||||
background-color alpha(#f8f8f2, 20%)
|
||||
background-color alpha($ui-dark-button--active-backgroundColor, 40%)
|
||||
color $ui-inactive-text-color
|
||||
|
||||
.item-title
|
||||
color $ui-inactive-text-color
|
||||
.item-bottom-tagList-empty
|
||||
color $ui-inactive-text-color
|
||||
vertical-align middle
|
||||
|
||||
.item-title-icon
|
||||
color $ui-inactive-text-color
|
||||
for theme in 'dracula'
|
||||
apply-theme(theme)
|
||||
|
||||
.item-title-empty
|
||||
color $ui-inactive-text-color
|
||||
|
||||
.item-bottom-tagList-item
|
||||
background-color alpha($ui-dark-button--active-backgroundColor, 40%)
|
||||
color $ui-inactive-text-color
|
||||
|
||||
.item-bottom-tagList-empty
|
||||
color $ui-inactive-text-color
|
||||
vertical-align middle
|
||||
for theme in $themes
|
||||
apply-theme(theme)
|
||||
Reference in New Issue
Block a user