concis/web-react/style/index.css

Concis Component library for PC

.concis-modal-dialog,
.concis-dark-modal-dialog {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1001;
  width: 100vw;
  height: 100vh;
  background: rgba(29, 33, 41, 0.6);
  transition: 0.1s linear;
}
.concis-modal-content,
.concis-dark-modal-content {
  position: absolute;
  top: 30%;
  left: 50%;
  z-index: 1002;
  width: var(--modal-width);
  overflow-x: auto;
  background: #fff;
  border-radius: 5px;
  transform: translate(-50%, -50%);
}
.concis-modal-content-header .concis-title,
.concis-dark-modal-content-header .concis-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  font-weight: 500;
  border-bottom: 1px solid #e5e6eb;
}
.concis-modal-content-header .concis-title .title span,
.concis-dark-modal-content-header .concis-title .title span {
  margin-left: 10px;
  font-size: 16px;
}
.concis-modal-content-header .concis-title .close-icon,
.concis-dark-modal-content-header .concis-title .close-icon {
  font-size: 12px;
  cursor: pointer;
}
.concis-modal-content-view,
.concis-dark-modal-content-view {
  padding: 20px 24px;
  font-size: 14px;
  border-bottom: 1px solid #e5e6eb;
}
.concis-modal-content-footer,
.concis-dark-modal-content-footer {
  width: 100%;
  padding: 16px 20px;
  text-align: right;
}
.concis-modal-content-footer .button .concis-button-text,
.concis-dark-modal-content-footer .button .concis-button-text,
.concis-modal-content-footer .button .concis-button-primary,
.concis-dark-modal-content-footer .button .concis-button-primary {
  height: 30px !important;
}
.concis-modal-content-footer .cancel-btn,
.concis-dark-modal-content-footer .cancel-btn {
  margin-right: 10px;
}
.concis-dark-modal-dialog {
  background: rgba(23, 23, 26, 0.6);
}
.concis-dark-modal-content {
  color: #c4c4c5;
  background: #2a2a2b;
}
.concis-dark-modal-content-header .concis-title {
  border-bottom: 1px solid #484849;
}
.concis-dark-modal-content-view {
  border-bottom: 1px solid #484849;
}
.fadeModal-enter,
.fadeModal-appear {
  opacity: 0;
}
.fadeModal-enter-active,
.fadeModal-appear-active {
  opacity: 1;
  transition: opacity 500ms;
}
.fadeModal-exit {
  opacity: 1;
}
.fadeModal-exit-active {
  opacity: 0;
  transition: opacity 500ms;
}
.fadeContent-enter,
.fadeContent-appear {
  opacity: 0;
}
.fadeContent-enter-active,
.fadeContent-appear-active {
  opacity: 1;
  transition: opacity 500ms;
}
.fadeContent-exit {
  opacity: 1;
}
.fadeContent-exit-active {
  opacity: 0;
  transition: opacity 500ms;
}
@media screen and (max-width: 767px) {
  .concis-modal-content {
    width: 90vw;
  }
}
.cocnis-tree-container,
.cocnis-dark-tree-container {
  position: relative;
  display: inline-block;
  height: 100%;
}
.cocnis-tree-container .tree-select-dialog,
.cocnis-dark-tree-container .tree-select-dialog {
  position: absolute;
  top: 35px;
  z-index: 10;
  box-sizing: border-box;
  padding: 0 10px 0 10px;
  overflow: hidden;
  background-color: #fff;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 2px 1px #d4d4d4;
  transition: 0.1s linear;
}
.cocnis-tree-container .tree-select-dialog .treeNode,
.cocnis-dark-tree-container .tree-select-dialog .treeNode {
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--tree-node-color);
  font-size: 14px;
  cursor: pointer;
  transition: 0.1s linear;
}
.cocnis-tree-container .tree-select-dialog .treeNode .text,
.cocnis-dark-tree-container .tree-select-dialog .treeNode .text {
  margin-left: 10px;
  user-select: none;
}
.cocnis-tree-container .tree-select-dialog .treeNode span,
.cocnis-dark-tree-container .tree-select-dialog .treeNode span {
  pointer-events: none;
}
.cocnis-dark-tree-container .tree-select-dialog {
  box-sizing: border-box;
  padding: 0 10px 0 10px;
  overflow: hidden;
  color: #c7c7c8;
  background: #373739;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 2px 1px #d4d4d4;
  transition: 0.1s linear;
}
.treeDialog-enter,
.treeDialog-appear {
  opacity: 0;
}
.treeDialog-enter-active,
.treeDialog-appear-active {
  opacity: 1;
  transition: opacity 100ms;
}
.treeDialog-exit {
  opacity: 1;
}
.treeDialog-exit-active {
  opacity: 0;
  transition: opacity 100ms;
}
.concis-button,
.concis-dark-button {
  display: inline-block;
}
.concis-button .loading,
.concis-dark-button .loading {
  cursor: not-allowed;
  opacity: 0.7;
}
.concis-button-primary,
.concis-dark-button-primary,
.concis-button-danger,
.concis-dark-button-danger,
.concis-button-info,
.concis-dark-button-info,
.concis-button-warning,
.concis-dark-button-warning,
.concis-button-disabled,
.concis-dark-button-disabled,
.concis-button-text,
.concis-dark-button-text {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  opacity: var(--isDisabled);
  transition: 0.2s linear;
}
.concis-button-primary:hover:not(.disabled, .loading),
.concis-dark-button-primary:hover:not(.disabled, .loading),
.concis-button-danger:hover:not(.disabled, .loading),
.concis-dark-button-danger:hover:not(.disabled, .loading),
.concis-button-info:hover:not(.disabled, .loading),
.concis-dark-button-info:hover:not(.disabled, .loading),
.concis-button-warning:hover:not(.disabled, .loading),
.concis-dark-button-warning:hover:not(.disabled, .loading) {
  opacity: 0.7;
}
.concis-button-primary:active:not(.disabled, .loading),
.concis-dark-button-primary:active:not(.disabled, .loading),
.concis-button-danger:active:not(.disabled, .loading),
.concis-dark-button-danger:active:not(.disabled, .loading),
.concis-button-info:active:not(.disabled, .loading),
.concis-dark-button-info:active:not(.disabled, .loading),
.concis-button-warning:active:not(.disabled, .loading),
.concis-dark-button-warning:active:not(.disabled, .loading) {
  opacity: 1;
  transition: 0.1s;
}
.concis-button-primary,
.concis-dark-button-primary {
  color: #ffffff;
  background-color: #325dff;
}
.concis-button-danger,
.concis-dark-button-danger {
  color: #ffffff;
  background-color: #f53f3f;
}
.concis-button-info,
.concis-dark-button-info {
  color: #ffffff;
  background-color: #00b42a;
}
.concis-button-warning,
.concis-dark-button-warning {
  color: #ffffff;
  background-color: #ff7d00;
}
.concis-button-disabled,
.concis-dark-button-disabled {
  color: #ffffff;
  background-color: #f2f3f5;
  opacity: 0.7;
}
.concis-button-text,
.concis-dark-button-text {
  color: #000000;
  background-color: #ffffff;
  border: 1px solid #ccc;
}
.concis-button-text:hover:not(.disabled, .loading),
.concis-dark-button-text:hover:not(.disabled, .loading) {
  color: #325dff;
  border-color: #325dff !important;
}
.concis-button-text:hover:not(.disabled, .loading) .concis-button-loading,
.concis-dark-button-text:hover:not(.disabled, .loading) .concis-button-loading {
  border-color: transparent #325dff #325dff;
}
.concis-button-text:active:not(.disabled, .loading),
.concis-dark-button-text:active:not(.disabled, .loading) {
  background-color: #dfdfdf;
  transition: 0.1s;
}
.concis-button .button-icon,
.concis-dark-button .button-icon {
  margin-right: var(--right-transform);
}
.concis-button-loading,
.concis-dark-button-loading {
  width: 10px;
  height: 10px;
  margin-right: 10px;
  color: red;
  border: 2px solid var(--loading-icon-color);
  border-color: transparent var(--loading-icon-color) var(--loading-icon-color);
  border-radius: 50%;
  cursor: alias;
  animation: 1s concis-button-loading infinite linear;
}
@keyframes concis-button-loading {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(100deg);
  }
  75% {
    transform: rotate(200deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.concis-button-group,
.concis-dark-button-group {
  display: flex;
  border-radius: 10px;
}
.concis-button-group .concis-button,
.concis-dark-button-group .concis-button,
.concis-button-group .concis-dark-button,
.concis-dark-button-group .concis-dark-button {
  border-right: 1px solid #a6a6a6;
}
.concis-button-group .concis-button:last-of-type,
.concis-dark-button-group .concis-button:last-of-type,
.concis-button-group .concis-dark-button:last-of-type,
.concis-dark-button-group .concis-dark-button:last-of-type {
  border-right: none;
}
.concis-button-group .concis-button-primary,
.concis-dark-button-group .concis-button-primary,
.concis-button-group .concis-dark-button-primary,
.concis-dark-button-group .concis-dark-button-primary,
.concis-button-group .concis-button-danger,
.concis-dark-button-group .concis-button-danger,
.concis-button-group .concis-dark-button-danger,
.concis-dark-button-group .concis-dark-button-danger,
.concis-button-group .concis-button-info,
.concis-dark-button-group .concis-button-info,
.concis-button-group .concis-dark-button-info,
.concis-dark-button-group .concis-dark-button-info,
.concis-button-group .concis-button-warning,
.concis-dark-button-group .concis-button-warning,
.concis-button-group .concis-dark-button-warning,
.concis-dark-button-group .concis-dark-button-warning,
.concis-button-group .concis-button-disabled,
.concis-dark-button-group .concis-button-disabled,
.concis-button-group .concis-dark-button-disabled,
.concis-dark-button-group .concis-dark-button-disabled,
.concis-button-group .concis-button-text,
.concis-dark-button-group .concis-button-text,
.concis-button-group .concis-dark-button-text,
.concis-dark-button-group .concis-dark-button-text {
  border-radius: 0;
}
.concis-dark-button .concis-button-primary {
  background-color: #3c7eff;
}
.concis-dark-button .concis-button-danger {
  background-color: rgba(183, 63, 63, 0.6);
}
.concis-dark-button .concis-button-info {
  background-color: rgba(39, 195, 70, 0.6);
}
.concis-dark-button .concis-button-warning {
  background-color: rgba(255, 150, 38, 0.6);
}
.concis-dark-button .concis-button-disabled {
  background-color: #f2f3f5;
}
.concis-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--global-color);
  transform: translate(-50%, -50%);
}
.concis-loading .loading-container {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--global-color);
  transform: translate(-50%, -50%);
}
.concis-loading .loading-container svg {
  display: inline-block;
  color: inherit;
  font-style: normal;
  vertical-align: -2px;
  transform-origin: center center;
  animation: arco-loading-circle 1s linear infinite;
}
@keyframes arco-loading-circle {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
.concis-loading .text {
  display: inline-block;
  width: 200px;
  margin-top: 40px;
  font-size: 14px;
  text-align: center;
}
.concis-loading-dialog {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0.7;
}
.concis-dot-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 99999;
  display: flex;
  align-items: flex-end;
  height: 30px;
  color: var(--global-color);
  transform: translate(-50%, -50%);
}
.concis-dot-loading .dot-active {
  width: 20px;
  height: 20px;
  margin: 0 7px;
  background-color: var(--global-color);
  border-radius: 50%;
  transition: 0.4s linear;
}
.concis-dot-loading .dot {
  width: 10px;
  height: 10px;
  margin: 0 7px;
  background-color: var(--global-color);
  border-radius: 50%;
  opacity: 0.5;
  transition: 0.4s linear;
}
.concis-strip-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 99999;
  display: flex;
  align-items: center;
  height: 60px;
  color: var(--global-color);
  transform: translate(-50%, -50%);
}
.concis-strip-loading .strip-list {
  --map-time: calc(var(--lineIndex) * 100ms);
  width: 8px;
  height: 50px;
  margin: 0 5px;
  background-color: var(--global-color);
  border-radius: 10px;
  animation: concis-strip-loading 0.6s ease-in-out var(--map-time) infinite alternate;
}
@keyframes concis-strip-loading {
  0% {
    height: 15px;
  }
  100% {
    height: 50px;
  }
}