Widget:DialogStyle

<style> /* 剧情对话框样式开始 */ .zs-DialogBox { font-size:medium; background: rgba(255,255,255,0.6); border: 1px solid #666; border-width: 1px 0px; margin: 3px 0px; padding:.35rem; } .zs-DialogBox:last-child{margin-bottom:0;} .zs-DialogBox.dark{ background: rgba(0,0,0,0.6); color: white; } .zs-DialogBox .zs-DialogHead{ display:table-cell; padding-right:.7rem; width:12rem; font-weight:bold; text-align:right; } .zs-DialogBox .zs-DialogContent{ display:table-cell; vertical-align:middle; } @media (max-width:768px){ .zs-DialogBox { background:rgba(238,238,238,0.8); } .zs-DialogBox .zs-DialogHead { width:8rem; } } /* 剧情对话框样式结束 */ /* 剧情标题栏样式开始 */ .zs-DialogTitleBox{ position:relative; } .zs-DialogTitle{ vertical-align:middle; font-size:24px; font-weight:bold; text-align:center; padding:40px 0; } .zs-DialogNavBox{ display: table; width: 100%; } @media (min-width:768px){ .zs-DialogTitleBox>.zs-DialogNavBox { position: absolute; top: 50%; transform: translateY(-50%); } } .zs-DialogNav { display: table-cell; vertical-align: middle; width: 170px; } .zs-DialogNav.right{text-align: right;} .zs-DialogNav a { position: relative; color: white!important; padding: 3px 10px; line-height: 26px; text-decoration: none; } .zs-DialogNav a:before { content: ""; z-index: -1; transition:.2s; position: absolute; left: 0; right: 45%; top: 0; bottom: 0; background: #666; clip-path: polygon(7px 0,100% 0,100% 100%,7px 100%,0 50%); } .zs-DialogNav a:after { content: ""; z-index: -1; transition:.2s; position: absolute; left: 45%; right: 0; top: 0; bottom: 0; background: #666; clip-path: polygon(0 0, 100% 0,100% 100%,0 100%,7px 50%); transform: scaleX(-1); } .zs-DialogNav.right a:before { transform: scaleX(-1) translateX(18%); transform-origin: right; } .zs-DialogNav.right a:after { transform: scaleX(1) translateX(-82%); transform-origin: left; } .zs-DialogNav a:hover:before {background:#888;} .zs-DialogNav a:hover:after {background:#888;} @media (max-width:768px){ .zs-DialogNav.nomobile {display: none; } } /* 剧情标题栏样式结束 */ /* 剧情选项卡样式开始 */ .zs-DialogTab .Tabcontainer ul{ font-size: medium; border:1px solid #666; border-width:0 0 1px 0; background: none; margin:0.3em 0 0 0; } .zs-DialogTab .Tabcontainer .tab_li { margin: 0.3rem 0 0 0; color: #DDD; background:rgba(0,0,0,0.6); border:1px solid #666; border-width:1px 1px 0px 1px; } .zs-DialogTab .Tabcontainer .tab_li.active { color: black; background:rgba(255,255,255,0.6); } @media (max-width: 768px){ .zs-DialogTab .Tabcontainer ul{border:0px;} .zs-DialogTab .Tabcontainer .tab_li { margin-top:0px; border-width:1px 1px 1px 5px; width:100%; } .zs-DialogTab .Tabcontainer .tab_li.active {background:rgba(238,238,238,0.8);} } /* 剧情选项卡样式结束 */ /* 剧情战斗提示样式开始 */ .zs-DialogActleft{ font-size:16px; padding:.3rem 16px; margin:3px 0; width:230px; border: 1px solid #666; border-width:1px 0; background: rgba(255,255,255,0.6); clip-path:polygon(0 0, 230px 0, 210px 100%, 0 100%); } @media (max-width:768px){ .zs-DialogActleft { background:rgba(238,238,238,0.8); } } .zs-DialogActBox{ text-align:center; font-size: 20px; } .zs-DialogAct{ display: inline-block; margin-left: 16px; } .zs-DialogAct:last-child{ margin-right: 16px; } .zs-DialogAct.main{ font-weight:bold; } /* 剧情战斗提示样式结束 */ </style>