Acasă Explorează Ajutor
Înregistrare Autentificare
zhh
/
zentao
1
0
Bifurcare 0
Fisiere Probleme 0 Trageți solicitările 0 Wiki
Ramură: master
Ramuri Etichete
zentao
/
module
/
index
/
css
/
index.ui.css

index.ui.css 10 KB
Permalink Istoric Crud

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132 
  1. :root
    2. 

  2. {
    3. 

  3.     --zt-apps-bar-height: 36px;
    4. 

  4.     --zt-apps-bar-bg: var(--color-canvas);
    5. 

  5.     --zt-menu-width: 120px!important;
    6. 

  6.     --zt-menu-fold-width: 64px;
    7. 

  7.     --zt-menu-space: 8px;
    8. 

  8.     --zt-menu-active-bg: var(--color-primary-500);
    9. 

  9.     --zt-menu-hover-bg: rgba(var(--color-primary-500-rgb), .4);
    10. 

  10.     --zt-menu-text-color: rgba(var(--color-canvas-rgb), 1);
    11. 

  11.     --zt-menu-text-active: var(--color-canvas);
    12. 

  12.     --zt-menu-bg: var(--color-primary-600);
    13. 

  13. }
    14. 

  14. [lang^='en'] {--zt-menu-width: 132px!important;}
    15. 

  15. 

  16. #menu {position: fixed; left: 0; top: 0; bottom: 0; background: var(--zt-menu-bg); width: var(--zt-menu-width); color: var(--zt-menu-text-color); transition: width .1s; user-select: none; z-index: 1120;}
    17. 

  17. #menu.waiting-workspace > * {visibility: hidden;}
    18. 

  18. #menu .nav {flex-direction: column; align-items: stretch;}
    19. 

  19. #menu .nav > li {display: block; height: var(--zt-menu-height, 38px); padding: 4px 8px; transition: padding .2s;}
    20. 

  20. #menu .nav > .divider, #menuMoreList > .divider {background: var(--color-canvas); opacity: .12; height: 1px; padding: 6px 8px; align-self: stretch; background-clip: content-box; box-sizing: content-box; border: none; margin: 0 4px}
    21. 

  21. #menu .nav > li > a {color: inherit; display: flex; align-items: center; gap: 4px; padding: 0 6px; height: calc(var(--zt-menu-height, 38px) - 8px); transition: color .2s, background-color .2s; border-radius: var(--radius-md); overflow: hidden;}
    22. 

  22. #menu .nav > li > a.active,
    23. 

  23. #menu .nav > li > a:hover {background: var(--zt-menu-hover-bg); color: var(--zt-menu-text-active)}
    24. 

  24. #menu .nav > li > a.active {background: var(--zt-menu-active-bg); color: var(--zt-menu-text-active)}
    25. 

  25. #menu .nav > li > a > .text {white-space: nowrap;}
    26. 

  26. #menu .nav > li > a > .icon {font-size: 18px; display: inline-flex; align-items: center; justify-content: center; margin-right: 2px;}
    27. 

  27. @supports not (gap: 1px) {#menu .nav > li > a > .icon {margin-right: 4px;}}
    28. 

  28. 

  29. #spaceHeading {display: none; height: 40px; align-items: center; flex-wrap: nowrap; gap: 4px; margin: var(--zt-menu-space) var(--zt-menu-space) calc(var(--zt-menu-space) / 4); background-color: rgba(var(--color-canvas-rgb), .1); border-radius: var(--radius-md); position: relative; padding: 0 8px;}
    30. 

  30. .has-space #spaceHeading {display: flex;}
    31. 

  31. #spaceHeading > .text {min-width: 0; overflow: hidden; white-space: nowrap; flex: auto}
    32. 

  32. #spaceHeading > .icon, #spaceHeading > .label {flex: none}
    33. 

  33. #spaceHeading.has-dropmenu > .icon, #spaceHeading > .label {display: none;}
    34. 

  34. #spaceDropmenu {position: absolute; left: 0; top: 0; right: 0; bottom: 0;}
    35. 

  35. #spaceDropmenu .dropmenu-btn {height: 40px; width: 100%;}
    36. 

  36. #spaceDropmenu .dropmenu-btn > .text {min-width: 0; overflow: hidden; white-space: nowrap; flex: auto;}
    37. 

  37. #spaceDropmenu .dropmenu-btn > .icon {font-size: 16px;}
    38. 

  38. .dropmenu.popup {background: var(--color-surface-light);}
    39. 

  39. .hide-menu #spaceHeading > .text, .hide-menu #spaceHeading > .label {display: none;}
    40. 

  40. .hide-menu #spaceHeading > .icon {display: flex;}
    41. 

  41. .hide-menu #spaceHeading {justify-content: center;}
    42. 

  42. 

  43. #menuNav {padding: 4px 0;}
    44. 

  44. #menuMainNav a {cursor: pointer;}
    45. 

  45. .show-menu #menuToggleNav [data-hint]::after {content: attr(data-collapse-text)}
    46. 

  46. .show-menu #menuNav [data-hint]::before, .show-menu #menuNav [data-hint]::after {display: none;}
    47. 

  47. .show-menu #menuToggleNav [data-hint]::before, .show-menu #menuToggleNav [data-hint]::after {display: block;}
    48. 

  48. #menuToggleNav::before {content: ''; display: block; background: var(--color-canvas); opacity: .12; height: 1px; padding: 6px 8px; align-self: stretch; background-clip: content-box; box-sizing: content-box; border: none; margin: 0 4px}
    49. 

  49. 

  50. #menuMainNav .is-space,
    51. 

  51. .has-space #menuMainNav .is-original {display: none;}
    52. 

  52. .has-space #menuMainNav .is-space {display: block;}
    53. 

  53. 

  54. #menuMainNav .is-space,
    55. 

  55. .has-space #menuMainNav .is-original {display: none;}
    56. 

  56. .has-space #menuMainNav .is-space {display: block;}
    57. 

  57. 

  58. #menuMoreNav {display: none;}
    59. 

  59. .show-more-nav #menuMoreNav {display: block;}
    60. 

  60. #menuMoreNav > li > a.with-popover-show {background-color: rgba(255,255,255,.1);}
    61. 

  61. #menuMoreList {background: var(--zt-menu-bg); padding: 8px 0; min-width: 100px; list-style: none;}
    62. 

  62. #menuMoreList > .menu-item {padding: 1px 12px!important; height: 32px!important;}
    63. 

  63. #menuMoreList > .menu-item > a > .text {flex: auto;}
    64. 

  64. #menuMoreList > .menu-item > a > .icon {font-size: 16px;}
    65. 

  65. 

  66. body.hide-menu {--zt-menu-width: var(--zt-menu-fold-width)!important;}
    67. 

  67. .hide-menu #menu .nav > li > a {justify-content: center;}
    68. 

  68. .hide-menu #menu .nav > li > a > .text {display: none;}
    69. 

  69. .hide-menu #menu #menuMoreNav .nav > li > a > .text {display: flex;}
    70. 

  70. .hide-menu #menu .menu-toggle > .icon {transform: rotate(180deg);}
    71. 

  71. 

  72. #apps {position: fixed; left: var(--zt-menu-width); top: 0; bottom: var(--zt-apps-bar-height); right: 0; background-color: var(--zt-page-bg); transition: left .1s;}
    73. 

  73. .hide-menu #apps {left: var(--zt-menu-fold-width)!important;}
    74. 

  74. 

  75. #appsBar {display: flex; flex-wrap: nowrap; align-items: center; position: fixed; left: var(--zt-menu-width); bottom: 0; right: 0; height: var(--zt-apps-bar-height); padding: 0 4px; background: var(--zt-apps-bar-bg); box-shadow: 0 -2px 12px rgba(0,0,0,.02); transition: left .1s; border-top-width: 1px;}
    76. 

  76. .hide-menu #appsBar {left: var(--zt-menu-fold-width)!important;}
    77. 

  77. #appTabs {flex: auto; user-select: none; --nav-active-color: currentColor}
    78. 

  78. #appTabs > li > a {border-radius: var(--radius-md); opacity: .6;}
    79. 

  79. #appTabs > li + li::before {display: block; content: ' '; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: var(--color-inverse); opacity: .12;}
    80. 

  80. #appTabs > li > a.active {opacity: 1;}
    81. 

  81. .has-space #appTabs > li {display: none;}
    82. 

  82. .has-space #appTabs > li.active {display: flex;}
    83. 

  83. #appsToolbar {width: 360px; display: flex; justify-content: flex-end;}
    84. 

  84. #appsToolbar > .btn {color: inherit}
    85. 

  85. #appsToolbar > .btn-zentao > .icon {color: var(--color-primary-400)}
    86. 

  86. 

  87. #visionSwitcher {flex: none; position: relative; margin-right: 12px; margin-left: 4px;}
    88. 

  88. #visionSwitcher::before, #visionSwitcher::after {content: ''; display: block; position: absolute; right: -9px; top: -2px; width: 0; height: 0; border-style: solid; border-width: 18px 0 18px 8px; border-color: transparent transparent transparent var(--color-canvas);}
    89. 

  89. #visionSwitcher::before {right: -10px; border-left-color: var(--color-fore); opacity: .1;}
    90. 

  90. #versionSwitchBtn {padding: 0 6px;}
    91. 

  91. .has-space #visionSwitcher {display: none;}
    92. 

  92. 

  93. .app-container {position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; transition-duration: .3s; background: var(--zt-page-bg);}
    94. 

  94. .app-container.loading {background: var(--zt-page-bg) linear-gradient(180deg, var(--zt-header-bg) 0, var(--zt-header-bg) 48px, rgba(255,0,0,0) 48px) no-repeat;}
    95. 

  95. .app-container.loading:before {background-color: rgba(0,0,0,.1);}
    96. 

  96. .app-container.loading:before, .ap p-container.loading::after {transition-delay: 3s;}
    97. 

  97. .app-container.loading.open-from-hidden {transition-delay: 0s;}
    98. 

  98. .app-container.loading.open-from-hidden > iframe {opacity: 0;}
    99. 

  99. .app-container > iframe {width: 100%; height: 100%; background: inherit; transition-duration: .1s;}
    100. 

  100. 

  101. .messagers > .messager-holder {max-width: 35%;}
    102. 

  102. .messager-notice, .score-notice {align-items: flex-start;}
    103. 

  103. .messager-notice > .icon-envelope-o, .score-notice > .icon-diamond {margin-top: 2px;}
    104. 

  104. .messager-notice > .alert-close {position: fixed; top: 10px; right: 15px; width: 20px; height: 20px;}
    105. 

  105. .messager-notice .browser-message-content {color: rgba(30,168,254); max-height: calc(100vh - 14rem); overflow-y: auto;}
    106. 

  106. .messager-notice .browser-message-content > span {width: 94%; display: inline-block;}
    107. 

  107. .messager-notice .browser-message-content > a {color: rgba(49,60,82)}
    108. 

  108. 

  109. .hl-tutorial {position: relative!important; z-index: 1010!important; -webkit-box-shadow: 0 0 0 0 #000!important; box-shadow: 0 0 0 0 #000!important; -webkit-transition: -webkit-box-shadow 1s!important; -o-transition: box-shadow 1s!important; transition: -webkit-box-shadow 1s!important; transition: box-shadow 1s!important; transition: box-shadow 1s,-webkit-box-shadow 1s!important }
    110. 

  110. .hl-tutorial.hl-in { -webkit-box-shadow: 0 0 20px 0 #ffff8d,0 0 0 2px #ffd180,0 0 0 3000px rgba(0,0,0,.2)!important; box-shadow: 0 0 20px 0 #ffff8d,0 0 0 2px #ffd180,0 0 0 3000px rgba(0,0,0,.2)!important }
    111. 

  111. .btn.tooltip-tutorial,.hl-tutorial.hl-in:hover { position: relative!important; z-index: 1010!important; -webkit-box-shadow: 0 0 30px 0 #ffff8d,0 0 0 5px #ffd180,0 0 0 3000px rgba(0,0,0,.3)!important; box-shadow: 0 0 30px 0 #ffff8d,0 0 0 5px #ffd180,0 0 0 3000px rgba(0,0,0,.3)!important
    112. 

  112. }
    113. 

  113. 

  114. #upgradeContent {display: none; position: absolute; bottom: var(--zt-apps-bar-height); right: 10px; width: 370px; height: 322px; background-color: #fff; padding: 5px 0; border: 1px solid rgba(0,0,0,.15); border-color: rgba(0,0,0,.1); opacity: 1; border-radius: 4px; box-shadow: 0 6px 12px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.1);}
    115. 

  115. .version-upgrade {width: 14px; height: 16px; float: left; background-repeat: no-repeat; background-position: center ; background-size: cover; display: block;}
    116. 

  116. #latestVersionList {height: 270px; overflow: auto;}
    117. 

  117. 

  118. #menuMainNav[z-use-sortable] a[data-app]:hover {cursor: move;}
    119. 

  119. #menuMainNav[z-use-sortable] li.divider:hover {cursor: move;}
    120. 

  120. .tutorial-hl {position: relative; z-index: 1000; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.4);}
    121. 

  121. .tutorial-hl {position: relative; z-index: 1000;}
    122. 

  122. .tutorial-hl {position: relative; z-index: 1000!important;}
    123. 

  123. .tutorial-popover .arrow::before {border: 3px solid var(--color-primary-500); width: 10px; height: 10px; border-radius: 50%}
    124. 

  124. .tutorial-popover .arrow-top::before {top: calc(-34px - var(--arrow-size))}
    125. 

  125. .tutorial-popover .arrow-left::before {left: calc(-34px - var(--arrow-size))}
    126. 

  126. .tutorial-popover .arrow-right::before {right: calc(-34px - var(--arrow-size))}
    127. 

  127. .tutorial-popover .arrow-bottom::before {bottom: calc(-34px - var(--arrow-size))}
    128. 

  128. .tutorial-popover .arrow::after {content: ' '; position: absolute; background: var(--color-primary-500); display: block; width: 32px; height: 32px; visibility: visible;}
    129. 

  129. .tutorial-popover .arrow-top::after {width: 2px; top: calc(var(--arrow-size) - 34px); left: 4px}
    130. 

  130. .tutorial-popover .arrow-left::after {height: 2px; left: calc(var(--arrow-size) - 34px); top: 4px}
    131. 

  131. .tutorial-popover .arrow-right::after {height: 2px; right: calc(var(--arrow-size) - 34px); top: 4px}
    132. 

  132. .tutorial-popover .arrow-bottom::after {width: 2px; bottom: calc(var(--arrow-size) - 34px); left: 4px}
    133.