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

body[data-theme="dark"]
  .control-infoButton-panel
    background-color $ui-dark-noteList-backgroundColor

  .control-infoButton-panel-trash
    background-color $ui-dark-noteList-backgroundColor

  .modification-date
    color $ui-dark-text-color

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

  .infoPanel-defaul-count
    color $ui-dark-text-color

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

  .infoPanel-default
    color $ui-dark-text-color

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

  .infoPanel-noteLink
    background-color alpha($ui-dark-borderColor, 60%)
    color $ui-dark-text-color

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

body[data-theme="solarized-dark"]
  .control-infoButton-panel
    background-color $ui-solarized-dark-noteList-backgroundColor

  .control-infoButton-panel-trash
    background-color $ui-solarized-ark-noteList-backgroundColor

  .modification-date
    color $ui-solarized-ark-text-color

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

  .infoPanel-defaul-count
    color $ui-solarized-dark-text-color

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

  .infoPanel-default
    color $ui-solarized-ark-text-color

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

  .infoPanel-noteLink
    background-color alpha($ui-solarized-dark-borderColor, 20%)
    color $ui-solarized-dark-text-color

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

body[data-theme="monokai"]
  .control-infoButton-panel
    background-color $ui-monokai-noteList-backgroundColor

  .control-infoButton-panel-trash
    background-color $ui-monokai-noteList-backgroundColor

  .modification-date
    color $ui-monokai-text-color

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

  .infoPanel-defaul-count
    color $ui-monokai-text-color

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

  .infoPanel-default
    color $ui-monokai-text-color

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

  .infoPanel-noteLink
    background-color alpha($ui-monokai-borderColor, 20%)
    color $ui-monokai-text-color

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