侧边栏壁纸
  • 累计撰写 793 篇文章
  • 累计创建 1 个标签
  • 累计收到 1 条评论
标签搜索

目 录CONTENT

文章目录

stylus

Dettan
2022-01-09 / 0 评论 / 0 点赞 / 113 阅读 / 850 字
温馨提示:
本文最后更新于 2022-07-23,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
/ 前端 / CSS / stylus
main-color = white
main-hover-color = black

body a 
 color: main-color;
 &:hover { color: main-hover-color; }

body a 
	color: main-color;
	&:hover 
		color: main-hover-color

<style lang="stylus" scoped>
<style lang="stylus" rel="stylesheet/stylus">
@import 'lib/css/scroll.styl';
@import 'lib/css/halo-editor.styl';
body
  margin: 0;
  padding: 0;
  padding-bottom: 50px;
</style>
<style lang="css" scoped>
.auto-textarea-wrapper {
  height: 100%;
}
</style>
border-color = 1px solid #F2F6FC
  op-height = 40px
  textarea:disabled
    background-color #ffffff

  /* 路由内容 */
  .v-note-wrapper
    position relative
    min-width 300px
    min-height 300px
    display flex
    flex-direction column
    background-color #fff
    z-index 1000
    text-align left
    border border-color
    border-radius 4px
    &.fullscreen
      position fixed
      left 0
      right 0
      bottom 0
      top 0
      margin 0
      height auto
      z-index 1501
    .v-note-op
      padding 1px
      width 100%
      display flex
      white-space pre-line
      flex none
      min-height op-height
      user-select none
      border-bottom border-color
      border-radius 4px 4px 0 0
      background-color #fff
      z-index 1
      .v-left-item, .v-right-item
        flex 1
        min-height op-height
        box-sizing border-box
        .op-icon-divider
          height op-height
          border-left 1px solid #e5e5e5
          margin 0 6px 0 4px
        .op-icon
          box-sizing border-box
          display inline-block
          cursor pointer
          height 28px
          width 28px
          margin 6px 0 5px 0px
          font-size 15px
          padding 4.5px 6px 5px 3.5px
          color #757575
          border-radius 5px
          text-align center
          background none
          border none
          outline none
          line-height 1
          //vertical-align middle
          &.dropdown-wrapper
            line-height 18px
          &.selected
            color rgba(0, 0, 0, 0.8)
            background #eaeaea
          &:hover
            color rgba(0, 0, 0, 0.8)
            background #e9e9eb
        &.transition
          .op-icon
            transition all 0.2s linear 0s
      .v-right-item
        text-align right
        padding-right 6px
        max-width 30%
      .v-left-item
        text-align left
        padding-left 6px
    .v-note-panel
      position relative
      border-top none
      display flex
      flex 1
      width 100%
      box-sizing border-box
      overflow hidden
      .v-note-edit.divarea-wrapper
        flex 0 0 50%
        width 50%
        padding 0
        overflow-y scroll
        overflow-x hidden
        box-sizing border-box
        cursor text
        border-bottom-left-radius: 4px;
        scrollbar()
        &.transition
          transition all 0.2s linear 0s
        &.single-edit
          width 100%
          flex 0 0 100%
          overflow-y auto
        &.single-show
          width 0
          flex 0 0 0
          display none
        .content-div
          width 100%
          padding 20px 25px
          box-sizing border-box
          outline 0 none
          border none !important
          color #2c3e50
          font-size 16px
        .content-input-wrapper
          width 100%
          padding 8px 25px 15px 25px
      .v-note-show
        flex 0 0 50%
        width 50%
        overflow-y auto
        padding 0 0
        transition all 0.2s linear 0s
        &.single-show
          flex 0 0 100%
          width 100%
        .v-show-content, .v-show-content-html
          width 100%
          height 100%
          padding 8px 25px 15px 25px
          overflow-y auto
          box-sizing border-box
          overflow-x hidden
          scrollbar()
      .v-note-navigation-wrapper
        display flex
        position absolute
        width 250px
        right 0
        top 0
        bottom 0
        height 100%
        flex-direction column
        background-color rgba(255,255,255,0.98)
        border-left border-color
        border-right border-color
        &.transition
          transition all 0.1s linear 0s
        @media only screen and (max-width 768px)
          width 50%
        &.slideTop-enter-active, &.slideTop-leave-active
          height 100%
        &.slideTop-enter, &.slideTop-leave-active
          height 0
        .v-note-navigation-title
          height 50px
          width 100%
          border-bottom border-color
          flex none
          line-height @height
          font-size 16px
          box-sizing border-box
          padding 0 12px 0 18px
          .v-note-navigation-close
            float right
            color #606266
            font-size 18px
            cursor pointer
            &:hover
              color #303133
        .v-note-navigation-content
          overflow-y auto
          flex 1
          scrollbar()
          padding 8px 0
          h1, h2, h3, h4, h5, h6
            margin 2px 0
            font-weight 500
            font-size 17px
            color #2185d0
            cursor pointer
            line-height normal
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
            padding 0 12px
            border-bottom none
            &:hover
              color #483D8B
              text-decoration-line underline
          h2
            padding-left  27px
            font-size 17px
          h3
            padding-left  42px
            font-size 17px
          h4
            padding-left  58px
            font-size 15px
          h5
            padding-left  72px
            font-size 15px
          h6
            padding-left  87px
            font-size 15px
    .v-note-read-model
      position relative
      display none
      width 100%
      height 100%
      background #fbfbfb
      padding 30px 8% 50px 8%
      overflow-y auto
      scrollbar()
      box-sizing border-box
      &.show
        display block
    &.shadow
      border none
      // box-shadow 0 2px 12px 0 rgba(0, 0, 0, 0.1) 

.v-note-img-wrapper
  position fixed
  display flex
  justify-content center
  align-items center
  left 0
  right 0
  top 0
  bottom 0
  background rgba(0, 0, 0, 0.7)
  z-index 1600
  transition all 0.1s linear 0s
  &.fade-enter-active, &.fade-leave-active
    opacity 1
  &.fade-enter, &.fade-leave-active
    opacity 0
  img
    flex 0 0 auto
    z-index 3
  i
    font-size 28px
    position absolute
    right 15px
    top 8px
    color rgba(255, 255, 255, 0.7)
    cursor pointer
    &:hover
      color rgba(255, 255, 255, 1)
align()
0

评论区