xframelib/dist/index.css

积累的前端开发基础库,来源于项目和服务于项目。

.splitpanes {
  display: flex;
  width: 100%;
  height: 100%;
}

.splitpanes--vertical {
  flex-direction: row;
}

.splitpanes--horizontal {
  flex-direction: column;
}

.splitpanes--dragging * {
  user-select: none;
}

.splitpanes__pane {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.splitpanes--vertical .splitpanes__pane {
  transition: width 0.2s ease-out;
}

.splitpanes--horizontal .splitpanes__pane {
  transition: height 0.2s ease-out;
}

.splitpanes--dragging .splitpanes__pane {
  transition: none;
}

.splitpanes__splitter {
  touch-action: none;
}

.splitpanes--vertical > .splitpanes__splitter {
  min-width: 1px;
  cursor: col-resize;
}

.splitpanes--horizontal > .splitpanes__splitter {
  min-height: 1px;
  cursor: row-resize;
}

.splitpanes.default-theme .splitpanes__pane {
  background-color: #f2f2f2;
}

.splitpanes.default-theme .splitpanes__splitter {
  background-color: #fff;
  box-sizing: border-box;
  position: relative;
  flex-shrink: 0;
}

.splitpanes.default-theme .splitpanes__splitter:before, .splitpanes.default-theme .splitpanes__splitter:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: rgba(0, 0, 0, 0.15);
  transition: background-color 0.3s;
}

.splitpanes.default-theme .splitpanes__splitter:hover:before, .splitpanes.default-theme .splitpanes__splitter:hover:after {
  background-color: rgba(0, 0, 0, 0.25);
}

.splitpanes.default-theme .splitpanes__splitter:first-child {
  cursor: auto;
}

.default-theme.splitpanes .splitpanes .splitpanes__splitter {
  z-index: 1;
}

.default-theme.splitpanes--vertical > .splitpanes__splitter,
.default-theme .splitpanes--vertical > .splitpanes__splitter {
  width: 7px;
  border-left: 1px solid #eee;
  margin-left: -1px;
}

.default-theme.splitpanes--vertical > .splitpanes__splitter:before, .default-theme.splitpanes--vertical > .splitpanes__splitter:after,
.default-theme .splitpanes--vertical > .splitpanes__splitter:before,
.default-theme .splitpanes--vertical > .splitpanes__splitter:after {
  transform: translateY(-50%);
  width: 1px;
  height: 30px;
}

.default-theme.splitpanes--vertical > .splitpanes__splitter:before,
.default-theme .splitpanes--vertical > .splitpanes__splitter:before {
  margin-left: -2px;
}

.default-theme.splitpanes--vertical > .splitpanes__splitter:after,
.default-theme .splitpanes--vertical > .splitpanes__splitter:after {
  margin-left: 1px;
}

.default-theme.splitpanes--horizontal > .splitpanes__splitter,
.default-theme .splitpanes--horizontal > .splitpanes__splitter {
  height: 7px;
  border-top: 1px solid #eee;
  margin-top: -1px;
}

.default-theme.splitpanes--horizontal > .splitpanes__splitter:before, .default-theme.splitpanes--horizontal > .splitpanes__splitter:after,
.default-theme .splitpanes--horizontal > .splitpanes__splitter:before,
.default-theme .splitpanes--horizontal > .splitpanes__splitter:after {
  transform: translateX(-50%);
  width: 30px;
  height: 1px;
}

.default-theme.splitpanes--horizontal > .splitpanes__splitter:before,
.default-theme .splitpanes--horizontal > .splitpanes__splitter:before {
  margin-top: -2px;
}

.default-theme.splitpanes--horizontal > .splitpanes__splitter:after,
.default-theme .splitpanes--horizontal > .splitpanes__splitter:after {
  margin-top: 1px;
}

.layoutContainer {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  --layout-top-height: 70px;
  --layout-left-width: 200px;
  --layout-right-width: 200px;
  --layout-bottom-height: 60px;
  --layout-top-zindex: 100;
  --layout-bottom-zindex: 100;
  --layout-centermain-zindex: 80;
  --layout-centerback-zindex: 90;
  --layout-centerfront-zindex: 110;
  --layout-left-zindex: 100;
  --layout-right-zindex: 100;
}

.topContainer {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: var(--layout-top-height);
  z-index: var(--layout-top-zindex);
  overflow: hidden;
  pointer-events: none;
}

.topContainer > * {
  pointer-events: all !important;
}

.bottomContainer {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: var(--layout-bottom-height);
  z-index: var(--layout-bottom-zindex);
  overflow: hidden;
  pointer-events: none;
}

.bottomContainer > * {
  pointer-events: all !important;
}

.leftContainer {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0;
  z-index: var(--layout-left-zindex);
  width: var(--layout-left-width);
  overflow: hidden;
  pointer-events: none;
}

.leftContainer > * {
  pointer-events: all !important;
}

.rightContainer {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0;
  width: var(--layout-right-width);
  z-index: var(--layout-right-zindex);
  overflow: hidden;
  pointer-events: none;
}

.rightContainer > * {
  pointer-events: all !important;
}

.centerdiv {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: transparent;
  overflow: hidden;
  pointer-events: none;
}

.centerdiv > * {
  pointer-events: all !important;
}

.mainContainer {
  z-index: var(--layout-centermain-zindex);
}

.backContainer {
  z-index: var(--layout-centerback-zindex);
}

.centerFrontContainer {
  z-index: var(--layout-centerfront-zindex);
}

.adivider {
  width: 100%;
  margin: 10px 0;
  display: flex;
  align-items: center;
  justify-items: center;
}

.adivider .line {
  border: v-bind(lineColor) 1px solid;
}

.adivider .contentText {
  background-color: inherit;
  font-size: 18px;
}

.window {
  display: flex;
  flex-flow: column;
  position: absolute;
  border-radius: 4pt 4pt 0 0;
}

.titlebar {
  display: flex;
  flex-flow: row nowrap;
  border-radius: 4pt 4pt 0 0;
  font-family: sans-serif;
  padding: 0.5em;
  flex: 0 0 auto;
}

.title {
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.content {
  flex-grow: 1;
  padding: 0.5em;
}

.draggable-handle {
  cursor: move;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
  transform: scale(0.9);
}

.fade-enter-active,
.fade-leave-active {
  transition: 0.2s;
}

.iconify {
  color: #000;
}

.paneltitle {
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  font-weight: 600;
  text-wrap: nowrap;
  overflow: hidden;
  margin-left: 5px;
}

.dragPanelBar {
  float: right;
  padding-right: 10px;
  width: var(--right-bar-width);
  min-width: 40px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dragPanelBar svg:hover {
  border: 1px solid #333;
}

.dragWindowPanel {
  position: absolute;
  background-color: #ddd;
  z-index: 10;
  border-radius: 6px;
  display: grid;
  grid-template-rows: min-content auto;
  user-select: none;
}

.dragWindowPanel .dragPanelTitle {
  pointer-events: all;
  width: 100%;
  background-color: #eee;
  border-radius: 5px 5px 0 0;
  padding-left: 5px;
  vertical-align: middle;
  pointer-events: all;
}

.dragWindowPanel .dragPanelTitle img {
  display: inline-block;
  vertical-align: middle;
}

.dragWindowPanel .dragPanelContent {
  margin-top: 1px;
  background-color: #eee;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 5px 8px;
}

.drag-pointer-group {
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 11;
  margin: -0.5rem;
  display: grid;
  height: calc(100% + 1rem);
  width: calc(100% + 1rem);
  grid-template-columns: 1rem auto 1rem;
  grid-template-rows: 1rem auto 1rem;
}

.drag-pointer-group > * {
  pointer-events: all !important;
}

.maxPanel {
  top: 0px !important;
  left: 0px !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0px !important;
}

.dragWindowPanel_dark {
  background-color: #043351;
}

.dragWindowPanel_dark .iconify {
  color: #eee;
}

.dragWindowPanel_dark .dragPanelTitle {
  background-color: #043351;
  color: #eee;
  pointer-events: all;
  width: 100%;
  border-radius: 5px 5px 0 0;
  padding-left: 5px;
  vertical-align: middle;
  pointer-events: all;
}

.dragWindowPanel_dark .dragPanelTitle img {
  display: inline-block;
  vertical-align: middle;
}

.dragWindowPanel_dark .dragPanelContent {
  background-color: #2f353d;
  margin-top: 1px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 5px 8px;
}

.cursor-nw-resize {
  cursor: nw-resize;
}

.cursor-n-resize {
  cursor: n-resize;
}

.cursor-ne-resize {
  cursor: ne-resize;
}

.cursor-w-resize {
  cursor: w-resize;
}

.cursor-e-resize {
  cursor: e-resize;
}

.cursor-se-resize {
  cursor: se-resize;
}

.cursor-sw-resize {
  cursor: sw-resize;
}

.cursor-s-resize {
  cursor: s-resize;
}

.btn {
  background-color: transparent;
  border: none;
  font-size: medium;
  margin: 0;
  padding: 0 0.25em;
  border-radius: 4pt;
}