html, body, #container { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; font-family: Microsoft YaHei; font-size: 14px; } /* Icon */ .Icon { font-size: 20px; } /* HBoxLayout */ .HBox { display: flex; flex-direction: row; } /* VBoxLayout */ .VBox { display: flex; flex-direction: column; } /* MenuBar */ .MenuBar { font: 13px 'Microsoft YaHei'; color: rgb(0, 0, 0); background: linear-gradient(to bottom, rgb(250, 252, 253), rgb(232, 241, 251) 40%, rgb(220, 230, 243) 40%, rgb(220, 231, 245)); border-bottom: 1px solid rgb(153, 153, 153); box-sizing: border-box; user-select: none; } .MenuBar .header { list-style: none; margin: 0px; padding: 0px; display: inline-block; } .MenuBar .header .header-item { padding: 0 16px; line-height: 24px; display: inline-block; vertical-align: top; } /* DropDown */ .DropDown { border: 0px; outline: 0px; padding: 0px; position: absolute; margin: 0px; box-sizing: border-box; font: 13px arial, sans-serif; cursor: default; user-select: none; top: 23px; left: 0px; } .DropDown .wrap { position: relative; margin: 0px; padding: 0px; list-style: none; box-sizing: border-box; display: inline-block; vertical-align: text-bottom; border: 1px solid rgb(195, 195, 195); box-shadow: rgba(128, 128, 128, 0.5) 0px 0px 16px 1px; overflow: hidden; border-radius: 5px; } /* DropDownItem */ .DropDownItem { color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); padding: 4px 0px; display: block; } .DropDownItem .prefix { width: 1em; height: 1em; margin: 0px 0.2em; display: inline-block; vertical-align: middle; } .DropDownItem .item { height: 1.2em; display: inline-block; white-space: nowrap; } .DropDownItem .item .icon { width: 16px; height: 16px; margin-right: 0.2em; display: inline-block; } .DropDownItem .item .text { height: 1.2em; line-height: 1.2em; display: inline-block; } .DropDownItem .suffix { width: 16px; height: 16px; line-height: 16px; margin-left: 1em; margin-right: 0.4em; font-size: 75%; text-align: right; float: right; } /* DropDownSeparator */ .DropDownSeparator { white-space: nowrap; display: block; } .DropDownSeparator .separator { height: 1px; background: rgb(229, 229, 229); } /* Panel */ .Panel { position: relative; left: 0; top: 0; width: 240px; height: 320px; background: rgb(44, 62, 80); border: 1px solid rgb(44, 62, 80); box-sizing: border-box; } .Panel .wrap { width: 100%; height: 100%; background: white; } .Panel .wrap .title { font-size: 14px; line-height: 24px; color: rgb(255, 255, 255); background: rgb(44, 62, 80); cursor: default; white-space: nowrap; overflow: hidden; } .Panel .wrap .title .icon { width: 16px; height: 24px; margin-right: 4px; vertical-align: top; display: inline-block; } .Panel .wrap .title .controls { position: absolute; right: 5px; top: 0px; } .Panel .wrap .title .controls .control { width: 16px; height: 24px; margin-right: 4px; vertical-align: top; display: inline-block; cursor: pointer; } .Panel .wrap .content { position: absolute; top: 24px; bottom: 32px; left: 0; right: 0; overflow: hidden; } .Panel .resize { position: absolute; bottom: 0px; right: 0px; width: 10px; height: 10px; } /* Toolbar */ .Toolbar { background: rgb(236, 240, 241); display: flex; align-items: center; box-sizing: border-box; overflow: hidden; } .Toolbar.horizontal { width: 100%; height: 40px; flex-direction: row; } .Toolbar.vertical { width: 40px; height: 100%; flex-direction: column; } .Toolbar .Icon { width: 32px; height: 32px; line-height: 32px; text-align: center; } /* Alert */ div.Alert { outline: none; position: fixed; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 10px 0px; padding: 0px 5px 5px; box-sizing: border-box; background: rgb(7, 97, 134); width: 190px; height: 139px; left: 816px; top: 339px; transform: scale(1, 1); opacity: 1; } div.Alert .wrap { position: relative; width: 100%; height: 100%; outline: none; background: white; } div.Alert .wrap .title { outline: none; cursor: default; white-space: nowrap; overflow: hidden; font: 14px/24px arial, sans-serif; background: rgb(7, 97, 134); color: rgb(255, 255, 255); text-align: left; display: block; } div.Alert .wrap .title .controls { outline: none; position: absolute; left: 0px; right: 5px; top: 0px; bottom: 0px; text-align: right; white-space: nowrap; } div.Alert .wrap .title .controls .icon { cursor: pointer; display: inline-block; margin-right: 4px; vertical-align: top; width: 16px; height: 24px; } div.Alert .wrap .content { outline: none; position: absolute; font: 12px arial, sans-serif; top: 44px; bottom: 52px; left: 20px; right: 20px; overflow: hidden; } div.Alert .wrap .buttons { outline: none; line-height: 32px; position: absolute; bottom: 0px; left: 0px; white-space: nowrap; overflow: hidden; right: 0px; background: rgb(218, 236, 244); text-align: right; } div.Alert .wrap .buttons .button-wrap { border: 0px; outline: 0px; padding: 0px; position: relative; margin: 0px 5px 0px 0px; box-sizing: border-box; height: 24px; width: 33.5762px; display: inline-block; text-align: left; vertical-align: middle; } div.Alert .wrap .buttons .button-wrap .button { pointer-events: none; border: 0px; outline: 0px; padding: 0px; position: absolute; margin: 0px; box-sizing: border-box; width: 34px; height: 24px; background-color: #E74C3C; color: #fff; } div.Alert .resize { outline: none; width: 10px; height: 10px; position: absolute; bottom: 0px; right: 0px; } /* 通用 */ button.Button { height: 24px; color: #fff; background-color: #E74C3C; border: none; padding: 0 8px; outline: 0; box-sizing: border-box; }