@import '../../style/common_mixin.css'; .title-config { .letter-wrap{ width: 3rem; flex: 0 0 3rem; } .str-wrap{ margin-left: 1rem;flex: 1 1; } .type-row{ margin: 0;padding-top: 1rem; } } @font-face { font-family: 'BRLNSDB'; src: url("../../../assets/font/BRLNSDB.TTF") ; } @font-face { font-family: 'BRLNSB'; src: url("../../../assets/font/BRLNSB.TTF") ; } @font-face { font-family: 'BRLNSR'; src: url("../../../assets/font/BRLNSR.TTF") ; } @font-face { font-family: 'GOTHIC'; src: url("../../../assets/font/GOTHIC.TTF") ; } @font-face { font-family: 'GOTHICB'; src: url("../../../assets/font/GOTHICB.TTF") ; } @font-face { font-family: 'GOTHICBI'; src: url("../../../assets/font/GOTHICBI.TTF") ; } @font-face { font-family: 'GOTHICI'; src: url("../../../assets/font/GOTHICI.TTF") ; } @font-face { font-family: 'MMTextBook'; src: url("../../../assets/font/MMTextBook.otf") ; } @font-face { font-family: 'MMTextBook-Bold'; src: url("../../../assets/font/MMTextBook-Bold.otf") ; } @font-face { font-family: 'MMTextBook-BoldItalic'; src: url("../../../assets/font/MMTextBook-BoldItalic.otf") ; } @font-face { font-family: 'MMTextBook-Italic'; src: url("../../../assets/font/MMTextBook-Italic.otf") ; } @mixin tool-btn { border: 1px solid #ddd; display: flex; justify-content: center; align-items: center; height: 100%; outline: none; border-radius: 6px; color: #555; } .d-flex{ display: flex; } .position-relative { position: relative; } .flex-fill { -webkit-box-flex: 1; flex: 1 1 auto; justify-content: center; display: flex; } .i-dropdown-menu{ width: 15px; font-size: 10px; border-left: 1px solid #ddd; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; flex: 0 } .p-title-box .p-title { font-size: 20px; } .p-title-box input { width: 300px; margin-left: 10px; } .p-content { border: 1px solid #ddd; box-shadow: 0 0 8px #eee; margin-top: 10px; } .p-divider { border-left: 1px solid #ccc; margin: 5px 8px; height: 85%; } .p-tool-box { background-color: #efefef; padding: 2px; height: 37px; display: flex; align-items: center; border-bottom: 1px solid #ddd; } // save .i-tool-save { //@include tool-btn(); color: white; } .i-tool-save:disabled { color: #555; } // font-size .i-tool-font-size { //@include tool-btn(); width: 37px; } .i-tool-font-size:hover { color: black; border-color: #bbb; } // font-color .i-tool-font-color, .i-tool-font-btn { border: 1px solid #ddd; //padding: 3px 7px; border-radius: 6px; width: 45px; height: 31px; background-color: white; color: #555; ::ng-deep > span { display: flex; position: absolute; left: 0; right: 0; top: 0; bottom: 0; padding: 3px 7px; } .i-left { .fa-font,.fa-bold,.fa-italic,.fa-strikethrough, .fa-underline { font-size: 10px; position: absolute; color: #555; left: 8px; top: 7px; } .i-color { width: 68%; height: 5px; background-color: black; position: absolute; top: 21px; left: 5px; } } .i-dropdown-menu { width: 15px; font-size: 10px; border-left: 1px solid #ddd; display: flex; align-items: center; .anticon-down { transform: scale(0.6); } } } .i-tool-font-btn{ width: 31px; } .fa-icon{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; cursor: pointer; } // bg-color .i-tool-bg-color { @include tool-btn(); padding: 0 9px; ::ng-deep > span { display: flex; align-items: center; } .i-color { display: block; width: 16px; height: 16px; background-color: white; margin-left: 10px; } } // horizontal-center .i-tool-horizontal-center { @include tool-btn(); width: 37px; } .p-box { width: 1280px; height: 720px; left: 0; top: 0; transform-origin: top left; overflow: hidden; } .p-animation-index-box { .i-animation-index { position: absolute; font-size: 34px; font-family: Arial; border: 1px solid #ddd; border-radius: 4px; min-width: 50px; min-height: 50px; display: flex; align-items: center; justify-content: center; background-color: darkorange; color: white; } } .p-edit { background-color: white; border: 1px solid black; padding: 2px 15px; } .p-selected { border: 1px solid darkorange; box-shadow: 0 0 8px #ddd; } .p-tool-item-disable { color: rgba(0, 0, 0, .25) !important; background-color: transparent !important; pointer-events: none; } // ----------- .p-color-pane { width: 80px; .p-color-item { width: 17px; height: 17px; cursor: pointer; margin: 4px; border: 1px solid #bbb; } .p-color-item-active { border: 1px solid white; transform: scale(1.1); } } .p-user-guide { font-size: 40px; display: flex; justify-content: center; align-items: center; } .p-animation-box { width: 400px; background-color: #efefef; border-left: 1px solid #ddd; padding: 10px; text-align: center; .p-animation-label { z-index: 1; position: relative; } ::ng-deep .ant-radio-button-wrapper { padding: 0 10px; } .i-toolbox { & > div { font-size: 20px; cursor: pointer; color: #555; padding: 0 3px; margin: 0 5px; } & > div:hover { color: #1585ff; transform: scale(1.1); } } .p-animation-list { background-color: white; border-radius: 10px; height: calc(100% - 86px); overflow-y: auto; .p-animation-item { padding: 0 20px; background-color: aliceblue; margin-top: 6px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; cursor: pointer; text-align: left; display: flex; } .i-active { background-color: antiquewhite; } } }