Boostnote/browser/main/Detail/SnippetNoteDetail.styl

@import('NoteDetailInfo')
@import('DetailVars')

.root
  absolute top bottom right
  border-left 1px solid alpha(#DEDEDE, 60%)
  background-color $ui-noteDetail-backgroundColor
  box-shadow none

.body
  absolute left right
  margin 0 30px
  top $info-height + $info-margin-under-border
  bottom $statusBar-height
  background-color $ui-noteDetail-backgroundColor

.body .description
  absolute top left right
  height 50px

.body .description textarea
  outline none
  display block
  height 100%
  width 100%
  resize none
  border 1px solid $ui-borderColor
  padding 2px 5px
  line-height 1.6
  background-color $ui-noteDetail-backgroundColor

.tabList
  absolute left right
  top 70px
  height 30px
  display flex
  background-color $ui-noteDetail-backgroundColor
  overflow hidden

.tabList .list
  flex 1
  overflow hidden
  overflow-x scroll
  position relative

  &::-webkit-scrollbar {
    display: none;
  }

  .allTabs
    display flex
    position relative
    overflow visible
    left 0
    transition left 0.1s

.tabList .tabButton
  navWhiteButtonColor()
  width 30px
  border-left 1px solid $ui-borderColor
  border-top 1px solid $ui-borderColor
  border-right 1px solid $ui-borderColor

.tabView
  absolute left right bottom
  top 100px

.tabView-content
  absolute top left right bottom

.override
  absolute bottom left
  bottom 1px
  left 60px
  z-index 101
  button
    navButtonColor()
    padding 0 6px
    &:hover
      color $ui-active-color
    &:active .update-icon
      color $ui-active-color

.control-fullScreenButton
  top 80px
  margin-bottom 10px
  topBarButtonRight()
  &:hover .tooltip
    opacity 1

.tooltip
  tooltip()
  position absolute
  pointer-events none
  top 50px
  right 70px
  z-index 200
  padding 5px
  line-height normal
  border-radius 2px
  opacity 0
  transition 0.1s

body[data-theme="white"], body[data-theme="default"]
  .root
    box-shadow $note-detail-box-shadow
    border none

  .tabButton
    &:hover
      background-color alpha($ui-button--active-backgroundColor, 20%)
      color $ui-text-color
      transition 0.15s

body[data-theme="dark"]
  .root
    border-left 1px solid $ui-dark-borderColor
    background-color $ui-dark-noteDetail-backgroundColor
    box-shadow none

  .tabList .tabButton
    border-color $ui-dark-borderColor
    &:hover
      background-color alpha($ui-dark-button--active-backgroundColor, 20%)

  .tabButton
    &:hover
      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
      color $ui-dark-text-color
      transition 0.15s

  .body
    background-color $ui-dark-noteDetail-backgroundColor

  .body .description textarea
    background-color $ui-dark-noteDetail-backgroundColor
    color $ui-dark-text-color
    border 1px solid $ui-dark-borderColor

  .tabList
    background-color $ui-dark-noteDetail-backgroundColor

  .tabList .list
    border-color $ui-dark-borderColor

  .tabList .plusButton
    navDarkButtonColor()
  .override
    button
      border-color $ui-dark-borderColor
      &:hover
        background-color alpha($ui-dark-button--active-backgroundColor, 20%)
        transition 0.15s
        color $ui-dark-text-color

  .control-fullScreenButton
    topBarButtonDark()

apply-theme(theme)
  body[data-theme={theme}]
    .root
      border-left 1px solid get-theme-var(theme, 'borderColor')
      background-color get-theme-var(theme, 'noteDetail-backgroundColor')

    .body
      background-color get-theme-var(theme, 'noteDetail-backgroundColor')

    .body .description textarea
      background-color get-theme-var(theme, 'noteDetail-backgroundColor')
      color get-theme-var(theme, 'text-color')
      border 1px solid get-theme-var(theme, 'borderColor')

    .tabList .tabButton
      border-color get-theme-var(theme, 'borderColor')

    .tabButton
      &:hover
        color get-theme-var(theme, 'text-color')
        background-color get-theme-var(theme, 'noteDetail-backgroundColor')
        transition 0.15s

    .tabList
      background-color get-theme-var(theme, 'noteDetail-backgroundColor')
      color get-theme-var(theme, 'text-color')

for theme in 'solarized-dark' 'dracula'
  apply-theme(theme)

for theme in $themes
  apply-theme(theme)