universal_table/app/assets/stylesheets/mind_map/mindmap.css

192 lines
3.7 KiB
CSS
Executable File

/* ============================
基礎布局 (Layout)
============================ */
.jsmind-inner {
position: relative;
overflow: auto;
width: 100%;
height: 100%;
outline: none;
user-select: none; /* 防止文字選取 */
}
.jsmind-inner canvas {
position: absolute;
}
#jsmind_container {
position: relative;
height: 800px;
border: 1px solid #ccc;
background: #f4f4f4;
}
/* ============================
層級管理 (Z-index)
============================ */
svg.jsmind,
canvas.jsmind {
position: absolute;
z-index: 1;
}
jmnodes {
position: absolute;
z-index: 2;
background-color: rgba(0, 0, 0, 0); /* 透明背景,確保可點擊 */
}
jmnode {
position: absolute;
cursor: default;
max-width: 400px;
}
jmexpander {
position: absolute;
width: 11px;
height: 11px;
display: block;
overflow: hidden;
line-height: 12px;
font-size: 10px;
text-align: center;
border-radius: 6px;
border-width: 1px;
border-style: solid;
cursor: pointer;
}
/* ============================
文字溢出控制 (Overflow)
============================ */
.jmnode-overflow-wrap jmnodes {
min-width: 420px;
}
.jmnode-overflow-hidden jmnode {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ============================
預設主題 (Default Theme)
============================ */
jmnode {
padding: 10px;
background-color: #fff;
color: #333;
border-radius: 5px;
box-shadow: 1px 1px 1px #666;
font: 1em/1.125 Verdana, Arial, Helvetica, sans-serif;
}
jmnode:hover {
box-shadow: 2px 2px 8px #000;
filter: brightness(95%);
a{
color: unset!important;
}
}
jmnode.selected {
box-shadow: 2px 2px 8px #000;
filter: brightness(90%);
}
jmnode.root {
font-size:1.2em;
/* 展開/收合按鈕 */
border-color: gray;
}
jmexpander:hover {
border-color: #000;
}
/* ============================
響應式設計 (Responsive)
============================ */
@media screen and (max-device-width: 1024px) {
jmnode {
padding: 5px;
border-radius: 3px;
font-size: 1.2em;
}
jmnode.root {
/* font-size: 21px; */
font-size: 1.2em;
}
}
/* ============================
工具列樣式 (Toolbar Styles)
============================ */
#jsmind-toolbar {
position: absolute;
z-index: 1000;
}
/* 顏色選單 */
.toolbar-color-palette {
position: absolute;
bottom: 30px;
background: #ccc;
border: 1px solid #ccc;
z-index: 1001;
min-width: 10em;
}
.toolbar-color-palette-box {
width: 20px;
height: 20px;
margin: 2px;
display: inline-block;
cursor: pointer;
}
/* ============================
遠程搜尋下拉選單 (Search Dropdown)
============================ */
.jsmind-suggestions {
position: absolute;
height: fit-content;
width: 200px;
background: white;
border: 1px solid #ccc;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
z-index: 1000;
}
.suggestion-item {
padding: 8px;
cursor: pointer;
border-bottom: 1px solid #eee;
}
.suggestion-item:hover {
background: #f0f0f0;
}
.field-row{
.column_entry_files{
margin-top: 1em;
}
a{
color: unset;
}
strong{
display: none;
}
&:nth-child(2){
a{
font-weight: 500;
font-size: 1.5em;
}
}
&:nth-child(4){
display: none;
}
}