Card:修订间差异
来自卡厄思梦境WIKI
无编辑摘要 |
无编辑摘要 标签:已被回退 |
||
| 第6行: | 第6行: | ||
</div> | </div> | ||
</div> | </div> | ||
{{#css: | |||
#card-editor { | |||
font-family: "Microsoft YaHei", "微软雅黑", sans-serif; | |||
color: #333; | |||
background-color: #f5f5f5; | |||
padding: 20px; | |||
} | |||
.ce-container { | |||
display: flex; | |||
gap: 20px; | |||
max-width: 1400px; | |||
margin: 0 auto; | |||
} | |||
.ce-left, .ce-middle, .ce-right { | |||
background: #fff; | |||
border-radius: 4px; | |||
padding: 20px; | |||
box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |||
} | |||
.ce-left { | |||
flex: 2; | |||
} | |||
.ce-middle { | |||
flex: 1; | |||
min-width: 300px; | |||
} | |||
.ce-right { | |||
flex: 2; | |||
} | |||
.ce-group { | |||
margin-bottom: 20px; | |||
} | |||
.ce-group-title { | |||
font-size: 16px; | |||
font-weight: bold; | |||
color: #555; | |||
margin-bottom: 15px; | |||
padding-bottom: 10px; | |||
border-bottom: 2px solid #e0e0e0; | |||
} | |||
.ce-form { | |||
display: flex; | |||
flex-direction: column; | |||
gap: 12px; | |||
} | |||
.ce-row { | |||
display: flex; | |||
align-items: center; | |||
gap: 10px; | |||
} | |||
.ce-label { | |||
min-width: 100px; | |||
max-width: 100px; | |||
color: #666; | |||
font-size: 14px; | |||
} | |||
.ce-input, .ce-select-input { | |||
flex: 1; | |||
padding: 8px 12px; | |||
border: 1px solid #ddd; | |||
border-radius: 3px; | |||
font-size: 14px; | |||
transition: border-color 0.3s; | |||
} | |||
.ce-input:focus, .ce-select-input:focus { | |||
border-color: #4a90e2; | |||
outline: none; | |||
} | |||
.ce-input:disabled, .ce-select-input:disabled { | |||
background-color: #f5f5f5; | |||
color: #999; | |||
cursor: not-allowed; | |||
} | |||
.ce-select-wrapper { | |||
position: relative; | |||
flex: 1; | |||
} | |||
.ce-select-input { | |||
cursor: pointer; | |||
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23666' d='M6 8L0 0h12z'/%3E%3C/svg%3E") no-repeat right 12px center; | |||
padding-right: 30px; | |||
} | |||
.ce-select-dropdown { | |||
position: absolute; | |||
top: 100%; | |||
left: 0; | |||
right: 0; | |||
background: #fff; | |||
border: 1px solid #4a90e2; | |||
border-radius: 3px; | |||
margin-top: 2px; | |||
z-index: 1000; | |||
display: none; | |||
max-height: 200px; | |||
overflow-y: auto; | |||
box-shadow: 0 2px 8px rgba(0,0,0,0.1); | |||
} | |||
.ce-select-option { | |||
padding: 10px 12px; | |||
cursor: pointer; | |||
transition: background-color 0.2s; | |||
} | |||
.ce-select-option:hover { | |||
background-color: #e3f2fd; | |||
} | |||
.ce-textarea { | |||
width: 100%; | |||
min-height: 80px; | |||
padding: 8px 12px; | |||
border: 1px solid #ddd; | |||
border-radius: 3px; | |||
font-size: 14px; | |||
font-family: inherit; | |||
resize: vertical; | |||
transition: border-color 0.3s; | |||
} | |||
.ce-textarea:focus { | |||
border-color: #4a90e2; | |||
outline: none; | |||
} | |||
.ce-desc-wrapper { | |||
flex: 1; | |||
} | |||
.ce-format-buttons { | |||
display: flex; | |||
flex-direction: column; | |||
} | |||
.ce-button-row { | |||
display: flex; | |||
gap: 5px; | |||
margin-bottom: 5px; | |||
flex-wrap: wrap; | |||
} | |||
.ce-button-row:last-child { | |||
margin-bottom: 8px; | |||
} | |||
.ce-btn { | |||
display: inline-block; | |||
padding: 10px 20px; | |||
border: none; | |||
border-radius: 3px; | |||
font-size: 14px; | |||
cursor: pointer; | |||
text-align: center; | |||
transition: all 0.3s; | |||
user-select: none; | |||
background-color: #95a5a6; | |||
color: white; | |||
} | |||
.ce-btn:hover { | |||
background-color: #7f8c8d; | |||
transform: translateY(-1px); | |||
box-shadow: 0 2px 5px rgba(0,0,0,0.2); | |||
} | |||
.ce-btn:active { | |||
transform: translateY(0); | |||
box-shadow: 0 1px 3px rgba(0,0,0,0.2); | |||
} | |||
.ce-btn-primary { | |||
background-color: #4a90e2; | |||
} | |||
.ce-btn-primary:hover { | |||
background-color: #357abd; | |||
} | |||
.ce-btn-danger { | |||
background-color: #e74c3c; | |||
} | |||
.ce-btn-danger:hover { | |||
background-color: #c0392b; | |||
} | |||
.ce-btn-small { | |||
padding: 4px 8px; | |||
font-size: 12px; | |||
white-space: nowrap; | |||
flex: 0 0 auto; | |||
min-width: fit-content; | |||
} | |||
.ce-btn-blue { | |||
background-color: #2196F3; | |||
} | |||
.ce-btn-blue:hover { | |||
background-color: #1976D2; | |||
} | |||
.ce-btn-green { | |||
background-color: #4CAF50; | |||
} | |||
.ce-btn-green:hover { | |||
background-color: #45a049; | |||
} | |||
.ce-btn-lime { | |||
background-color: #66BB6A; | |||
} | |||
.ce-btn-lime:hover { | |||
background-color: #57a85c; | |||
} | |||
.ce-btn-orange { | |||
background-color: #FF9800; | |||
} | |||
.ce-btn-orange:hover { | |||
background-color: #F57C00; | |||
} | |||
.ce-btn-purple { | |||
background-color: #9c27b0; | |||
color: white; | |||
} | |||
.ce-btn-purple:hover { | |||
background-color: #7b1fa2; | |||
} | |||
.ce-btn-blue-underline { | |||
background-color: #1976d2; | |||
color: white; | |||
} | |||
.ce-btn-blue-underline:hover { | |||
background-color: #1565c0; | |||
} | |||
.ce-btn-green-underline { | |||
background-color: #388e3c; | |||
color: white; | |||
} | |||
.ce-btn-green-underline:hover { | |||
background-color: #2e7d32; | |||
} | |||
.ce-buttons { | |||
display: flex; | |||
gap: 10px; | |||
margin-top: 15px; | |||
flex-wrap: wrap; | |||
} | |||
.ce-list-container { | |||
border: 1px solid #ddd; | |||
border-radius: 3px; | |||
background-color: #fafafa; | |||
margin-bottom: 15px; | |||
} | |||
.ce-list { | |||
max-height: 200px; | |||
overflow-y: auto; | |||
} | |||
.ce-list-item { | |||
padding: 12px; | |||
border-bottom: 1px solid #eee; | |||
cursor: pointer; | |||
transition: background-color 0.2s; | |||
font-size: 14px; | |||
} | |||
.ce-list-item:last-child { | |||
border-bottom: none; | |||
} | |||
.ce-list-item:hover { | |||
background-color: #f5f5f5; | |||
} | |||
.ce-list-item.selected { | |||
background-color: #e3f2fd; | |||
color: #1976D2; | |||
font-weight: bold; | |||
} | |||
.ce-hint { | |||
font-size: 12px; | |||
color: #666; | |||
font-weight: normal; | |||
} | |||
.ce-list-item { | |||
position: relative; | |||
cursor: move; | |||
} | |||
.ce-list-item.ui-sortable-helper { | |||
background: #e3f2fd; | |||
border: 2px solid #2196F3; | |||
} | |||
.ce-list-item.ui-sortable-placeholder { | |||
background: #f5f5f5; | |||
border: 2px dashed #ccc; | |||
visibility: visible !important; | |||
} | |||
.ce-drag-handle { | |||
color: #999; | |||
margin-right: 5px; | |||
cursor: move; | |||
} | |||
.ce-code { | |||
width: 100%; | |||
height: 400px; | |||
padding: 12px; | |||
border: 1px solid #555; | |||
border-radius: 3px; | |||
background-color: #2b2b2b; | |||
color: #a9b7c6; | |||
font-family: 'Consolas', 'Monaco', 'Courier New', monospace; | |||
font-size: 13px; | |||
line-height: 1.5; | |||
resize: vertical; | |||
overflow: auto; | |||
white-space: pre; | |||
} | |||
@media (max-width: 1200px) { | |||
.ce-container { | |||
flex-direction: column; | |||
} | |||
.ce-left, .ce-middle, .ce-right { | |||
width: 100%; | |||
} | |||
} | |||
.ce-list::-webkit-scrollbar, | |||
.ce-code::-webkit-scrollbar, | |||
.ce-select-dropdown::-webkit-scrollbar { | |||
width: 8px; | |||
} | |||
.ce-list::-webkit-scrollbar-track, | |||
.ce-code::-webkit-scrollbar-track, | |||
.ce-select-dropdown::-webkit-scrollbar-track { | |||
background: #f1f1f1; | |||
} | |||
.ce-list::-webkit-scrollbar-thumb, | |||
.ce-code::-webkit-scrollbar-thumb, | |||
.ce-select-dropdown::-webkit-scrollbar-thumb { | |||
background: #888; | |||
border-radius: 4px; | |||
} | |||
.ce-list::-webkit-scrollbar-thumb:hover, | |||
.ce-code::-webkit-scrollbar-thumb:hover, | |||
.ce-select-dropdown::-webkit-scrollbar-thumb:hover { | |||
background: #666; | |||
} | |||
.ce-loading { | |||
text-align: center; | |||
padding: 20px; | |||
color: #666; | |||
} | |||
.ce-error { | |||
color: #e74c3c; | |||
font-size: 12px; | |||
margin-top: 5px; | |||
} | |||
.ce-success { | |||
color: #27ae60; | |||
font-size: 12px; | |||
margin-top: 5px; | |||
} | |||
.dictionary-term { | |||
display: inline-block; | |||
text-decoration: underline; | |||
cursor: help; | |||
position: relative; | |||
} | |||
}} | |||
2025年10月8日 (三) 15:55的版本
正在加载卡牌编辑器...
请确保JavaScript已启用