/** 页面字体 */
@font-face {
  font-family: 'cute';
  src: local('cute'), local('cute'), url(/static/img/JCuYuan.woff2) format('woff2');
}

body {
  font-family: "cute", sans-serif;
}

editor-container {
  font-family: Arial, sans-serif;
}

/** 加载动画 */
.spinner > div {
  background-color: #ff5f77;
  backdrop-filter: blur(6px);
  background-color: orangered\0; /* IE 样式 */
}

/** 普通文字、字体图标颜色 */
.action, #listing h2, #search .boxes h3, .card h3, .collapsible > label *, .dashboard p label, .message {
  color: #ff5f77;
}

/** 链接文字颜色 */
a {
  color: #ff5f77;
  backdrop-filter: blur(6px);
}

/** 面包屑导航修复 (新版) */
.breadcrumbs a,
.breadcrumbs span,
.breadcrumbs i {
  color: #ff5f77 !important;
}
.breadcrumbs .chevron i {
  opacity: 0.7;
}

/** 输入框、表格标题文字颜色 */
#search.active i, #search.active input, table th {
backdrop-filter: blur(6px);
color: #ff5f77;
}

/** 主体、弹窗颜色 */
#loading, #login, #search.active #input, body, header, .ace-chrome .ace_gutter-active-line {
background-image: url(/static/img/background.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
color: #ff5f77;
}

/** 文件夹颜色 */
.file-icons [data-dir="true"] i {
  color: #ff5f77;
}

/** 搜索界面图标颜色 */
#search .boxes > div > div {
background: #ff5f77;
color: rgb(255, 255, 255);
text-align: center;
width: 10em;
padding: 1em;
cursor: pointer;
margin-bottom: 1em;
margin-right: 1em;
-moz-box-flex: 1;
flex-grow: 1;
}

/** 多选状态栏颜色 */
#listing #multiple-selection {
position: fixed;
bottom: -4em;
left: 0px;
z-index: 99999;
width: 100%;
background-color: #ff5f77a1;
height: 4em;
padding: 0.5em 0.5em 0.5em 1em;
justify-content: space-between;
transition: bottom 0.2s;
}

/** 多选项目颜色 */
#listing .item[aria-selected="true"] {
background: #66ccffc4 !important;
color: var(--item-selected) !important;
}

/* 设置容量显示条颜色 */
.vue-simple-progress {
  background: #66ccff !important;
}
.vue-simple-progress-bar {
  background: #ff6781 !important;
}

/* 设置选项卡颜色及悬浮修复 */
.dashboard #nav ul a li {
  transition: all 0.2s;
}
.dashboard #nav ul a:hover li {
  background-color: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(6px) !important;
}
.dashboard #nav ul a.router-link-active li,
.dashboard #nav ul li.active {
  border-color: #CD1076 !important;
  color: #CD1076 !important;
}

/** 定义卡片 */
.card {
  border-radius: 2em;
  border: 1px solid #ff6781;
  background-color: transparent;
  backdrop-filter: blur(6px);
  color: #CD1076;
}

/** 定义卡片按钮 */
.button {
  outline: 0px;
  padding: 0.5em 1em;
  border-radius: 2em;
  cursor: pointer;
  background: #ff5f77;
  color: rgb(255, 255, 255);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 5px;
  transition: 0.1s;
}

.button--flat {
  color: #e93654;
  background: transparent;
  box-shadow: none;
  border: 0;
  text-transform: uppercase;
}

/** 定义容量显示下面的小字颜色 */
.credits {
  font-size: 0.6em;
  margin: 3em 2.5em;
  color: #e56c81;
}

/** 取消变暗覆盖 */
.overlay {
  background-color: rgba(0, 0, 0, 0);
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  animation: 0.1s forwards show;
}

/** 定义搜索区 */
#search .boxes {
background-color: transparent;
backdrop-filter: blur(6px);
color: #CD1076;
}

/** 定义常规输入框 */
.input, #search input {
  border-radius: 2em;
  padding: .5em 1em;
  background: #fff5f6b8 !important;
  border: 2px solid #ffd5dc !important;
  transition: .2s ease all;
  color: #ff5474 !important;
}

/** 数值输入组件修复 (新版) */
.vue-number-input {
  background-color: transparent !important;
}

.vue-number-input > input {
  background: #fff5f6b8 !important;
  border: 2px solid #ffd5dc !important;
  color: #ff5474 !important
}


.vue-number-input__input {
  border-radius: 2em !important;
  padding: .5em 1em;
  background: #fff5f6b8 !important;
  border: 2px solid #ffd5dc !important;
  transition: .2s ease all;
  color: #ff5474 !important;
}
.vue-number-input__button {
  padding: .5em 1em;
  background: #fff5f6b8 !important;
  border: 2px solid #ffd5dc !important;
  border-radius: 2rem !important;
  transition: .2s ease all;
  color: #ff5474 !important;
}
.vue-number-input__button:hover {
  background: #ffd5dc !important;
}

/** 搜索页面、列表标题样式 */
#search #input, #search #result, #listing.list .item.header, .ace-chrome .ace_gutter, .share__box__download, .file-list li:hover {
background-color: transparent;
backdrop-filter: blur(6px);
color: #CD1076;
}

/** 列表项目、文本编辑、命令行、文件分享样式 */
#listing .item, .ace-chrome, .shell, .share__box {
background-color: transparent;
backdrop-filter: blur(6px);
color: #CD1076;
}

/** 加载页面、登录页面信息提示 */
#loading::after, #login::after {
position: absolute;
bottom: 6px;
width: 100%;
display: block;
font-size: 22px;
text-align: center;
content: '';
color: #FF1493;
}

/** 登录页面背景图 */
#login {
background-image: url(/static/img/login.jpg);
}
#login img {
width: 8em;
height: 8em;
}
#login .button {
border-radius: 2em;
background: #ff6781e3;
color: #fff;
border: 2px solid #ffd5dc;
transition: .1s ease all;
}
/** 登录错误提示框 */
#login .wrong {
border-radius: 2em;
background: #ff5474b2;
color: #fff;
padding: .5em;
text-align: center;
animation: .2s opac f#fff5f6b8orwards;
margin-bottom: 1em;
}
/** 登录页面提示信息 */
#login .logout-message {
border-radius: 2em;
background: #ff5474b2;
color: #fff;
padding: .5em;
text-align: center;
animation: .2s opac forwards;
}

/** 定义分享界面文件夹图标 */
.share__box__icon i {
  font-size: 10em;
  color: #ff5f77;
}
/** 定义路径栏背景 */
.breadcrumbs {
  background-color: transparent;
  backdrop-filter: blur(6px);
  color: #CD1076;
}
/** 定义弹窗背景 */
.vfm--overlay {
  background-color: transparent;
  backdrop-filter: blur(6px);
}
/** 定义右键菜单 */
.context-menu {
  border-radius: 1em;
  border: 1px solid #ff6781;
  position: absolute;
  background: #fff5f6b8;
  min-width: 180px;
  max-width: 220px;
  border: 2px solid #ffd5dc;
  box-shadow: 0 2px 4px var(--borderPrimary);
  z-index: 999;
}
.context-menu .action {
  width: 100%;
  border-radius: 2rem;
  display: flex;
  align-items: center;
}



/** 文本编辑器效果 */
.editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-image: url(/static/img/background.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
  position: relative; /* 确保伪元素正确显示 */
}

.editor-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8); /* 半透明黑色蒙版 */
   z-index: 0; /* 确保蒙版位于背景图之上但内容之下 */
}

.ace_editor {
  position: relative;
  overflow: hidden;
  padding: 0;
  font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'Source Code Pro', 'source-code-pro', monospace;
  direction: ltr;
  text-align: left;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  forced-color-adjust: none;
  background-image: url(/static/img/background.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
}

.ace_editor::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8); /* 半透明黑色蒙版 */

}

.ace_gutter {
  background-color: #fff5f6b8 !important;;
  color: #ff5474 !important;
}

.ace_tooltip {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid gray;
  border-radius: 1px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  color: black;
  padding: 3px 4px;
  position: fixed;
  z-index: 999999;
  box-sizing: border-box;
  cursor: default;
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: normal;
  font-style: normal;
  font-weight: normal;
  letter-spacing: normal;
  pointer-events: none;
  overflow: auto;
  max-width: min(33em, 66vw);
  overscroll-behavior: contain;
}

.ace_scroller {
  position: absolute;
  overflow: hidden;
  top: 0;
  bottom: 0;
  background-color: transparent;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: text;
}

/** 报错信息框 */
.Vue-Toastification__toast--error {
  background-color: #ff5f77a1;
  color: rgb(255, 255, 255);
}
/** 提示信息框 */
.Vue-Toastification__toast--success {
  background-color: #66ccffc4;
  color: rgb(255, 255, 255);
}
/** 手机页面侧边栏背景 */
@media (max-width: 736px) {nav {
  top: 0px;
  z-index: 99999;
  background: rgba(255, 255, 255, 0.9);
  height: 100%;
  width: 16em;
  box-shadow: 0 0 5px var(--borderPrimary);
  transition: left 0.1s;
  left: -17em;
}}
/** 手机选择菜单背景 */
@media (max-width: 736px) {#dropdown {
border-radius: 1em;
border: 1px solid #ff6781;
position: fixed;
top: 1em;
right: 1em;
display: block;
background: #fff5f6b8;
box-shadow: 0 2px 4px var(--borderPrimary);
transform: scale(0);
transition: transform 0.1s ease-in-out;
transform-origin: right top 0px;
z-index: 99999;
}}

@media (max-width: 736px) {#dropdown .action {
display: flex;
align-items: center;
border-radius: 0px;
width: 100%;
border-radius: 2rem;
}}

@media (max-width: 736px) {header .overlay {
  width: 100%;
  height: 100%;
  background-color: transparent;
}}
/** 手机文件选择操作栏背景 */
#file-selection {
position: fixed;
bottom: 1em;
border-radius: 2em;
left: 50%;
transform: translate(-50%);
display: flex;
align-items: center;
background: #fff5f6b8 ;
color: #ff5474 ;
box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px, rgba(0, 0, 0, 0.12) 0px 1px 2px;
width: 95%;
max-width: 20em;
z-index: 1;
}

#file-selection > span {
display: inline-block;
margin-left: 1em;
color: #ff5f77;
margin-right: auto;
}
/** 文件预览背景 */
#previewer {
background-color: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(2px);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
overflow: hidden;
}
