Boostnote/browser/main/Detail/InfoPanel.styl

.control-infoPanel
  position fixed
  pointer-events none
  top 50px
  z-index 200
  line-height normal
  border-radius 4px
  opacity 0
  transition 0.2s

.control-infoButton-panel
  z-index 200
  margin-top 0px
  top: 50px
  right 25px
  position absolute
  padding 20px 25px 0 25px
  // width 300px
  overflow auto
  background-color $ui-noteList-backgroundColor
  box-shadow 2px 12px 15px 2px rgba(0, 0, 0, 0.1), 2px 1px 50px 2px rgba(0, 0, 0, 0.1)
  border-radius 2px

.modification-date
  font-size 18px
  line-height 30px
  color $ui-text-color

.modification-date-desc
  font-size 18px
  color $ui-inactive-text-color

.control-infoButton-panel-trash
  z-index 200
  margin-top 0px
  top 50px
  right 0px
  position absolute
  padding 20px 25px 0 25px
  width 300px
  background-color $ui-noteList-backgroundColor
  box-shadow 2px 12px 15px 2px rgba(0, 0, 0, 0.1), 2px 1px 50px 2px rgba(0, 0, 0, 0.1)
  border-radius 2px

.count-wrap
	display flex
	position relative
	width 100%

.count-number
	position relative
	display block
	width 50%
	overflow hidden
	margin 0
	padding 0

.infoPanel-defaul-count
  font-size 16px
  line-height 30px
  color $ui-text-color

.infoPanel-sub-count
  font-size 16px
  color $ui-inactive-text-color
  padding-bottom 8px

.infoPanel-default
  font-size 14px
  line-height 30px
  color $ui-text-color

.infoPanel-sub
  font-size 12px
  font-weight 600
  color $ui-inactive-text-color
  padding-bottom 8px

.infoPanel-noteLink
  padding-right 5px
  width 210px
  height 25px
  margin 6px 0

.infoPanel-copyButton
  outline none
  font-size 16px
  color #A0A0A0
  background-color transparent
  border none
  margin 0 5px
  border-radius 5px
  cursor pointer
  &:hover
    transition 0.2s
    background-color alpha($ui-button--hover-backgroundColor, 30%)
    color $ui-inactive-text-color

.infoPanel-trash
  color #EA4447
  font-weight 600
  font-size 14px
  width 70px
  background-color rgba(226,33,113,0.1)
  border none
  outline none
  border-radius 2px
  margin-right 5px
  padding 2px 5px

[id=export-wrap]
  height 90px
  display flex
  justify-content center
  margin 20px 0 10px 0
  button
    outline none
    font-size 48px
    color #A0A0A0
    background-color transparent
    border none
    margin 0 5px
    border-radius 5px
    &:hover
      transition 0.2s
      background-color alpha($ui-button--hover-backgroundColor, 30%)
      color $ui-inactive-text-color
  p
    font-size 13px
    color #A0A0A0
    font-weight light
    &:hover
      color $ui-inactive-text-color

.export--enable
  cursor pointer

.export--unable
  cursor not-allowed

apply-theme(theme)
  body[data-theme={theme}]
    .control-infoButton-panel
      background-color get-theme-var(theme, 'noteList-backgroundColor')

    .control-infoButton-panel-trash
      background-color get-theme-var(theme, 'noteList-backgroundColor')

    .modification-date
      color get-theme-var(theme, 'text-color')

    .modification-date-desc
      color $ui-inactive-text-color

    .infoPanel-defaul-count
      color get-theme-var(theme, 'text-color')

    .infoPanel-sub-count
      color $ui-inactive-text-color

    .infoPanel-default
      color get-theme-var(theme, 'text-color')

    .infoPanel-sub
      color $ui-inactive-text-color

    .infoPanel-noteLink
      background-color alpha(get-theme-var(theme, 'borderColor'), 20%)
      color get-theme-var(theme, 'text-color')

    [id=export-wrap]
      button
        color $ui-dark-inactive-text-color
        &:hover
          background-color alpha(get-theme-var(theme, 'borderColor'), 20%)
          color get-theme-var(theme, 'text-color')
      p
        color $ui-dark-inactive-text-color
        &:hover
          color get-theme-var(theme, 'text-color')

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

for theme in $themes
  apply-theme(theme)