| |
| @import "dt/0.0.1/ui/all.less"; |
| |
| @main-high-color: #B03A5B; |
| @main-light-high-color: #C592A0; |
| @main-text-color: #333; |
| @main-high-color-hover: rgba(176,59,91,.25); |
| @text-active-color: #b23a59; |
| @ec-doc-line-highlight-color: #E9EDF3; |
| @split-line-color: #ddd; |
| @left-width: 290px; |
| @background-color: #FAFAFC; |
| |
| |
| // ---------------------- |
| // dtui theme |
| // ---------------------- |
| |
| @dtui-close-cross-background-color: #ddd; |
| @dtui-close-cross-color: #333; |
| @dtui-close-cross-hover-background-color: #3498DB; |
| @dtui-close-cross-hover-color: #fff; |
| |
| |
| @dtui-panel-background-color: #f5f5f5; |
| @dtui-panel-color: #222; |
| @dtui-panel-a-color: #99D0FF; |
| |
| |
| @dtui-txipt-disabled-color: #eee; |
| |
| |
| @dtui-treelist-text-color: #333; |
| @dtui-treelist-text-highlight-background: #efd689; |
| @dtui-treelist-text-highlight-color: #000; |
| @dtui-treelist-text-active-background: @main-high-color; |
| @dtui-treelist-text-active-color: #fff; |
| @dtui-treelist-text-hover-background: @main-high-color-hover; |
| @dtui-treelist-text-hover-color: #000; |
| |
| |
| @dtui-checkbutton-item-border-radius: 2px; |
| @dtui-checkbutton-item-text-border: 0 solid #828599; |
| @dtui-checkbutton-item-text-color: #777; |
| @dtui-checkbutton-item-text-background: transparent; |
| @dtui-checkbutton-item-text-hover-border: 0 solid #828599; |
| @dtui-checkbutton-item-text-hover-color: #619FBD; |
| @dtui-checkbutton-item-text-hover-background: transparent; |
| @dtui-checkbutton-item-text-active-border: 0 solid #d2d2d2; |
| @dtui-checkbutton-item-text-active-color: #41A8D9; |
| @dtui-checkbutton-item-text-active-background: transparent; |
| @dtui-checkbutton-item-text-disabled-border: 0 solid #828599; |
| @dtui-checkbutton-item-text-disabled-color: #828599; |
| @dtui-checkbutton-item-text-disabled-background: transparent; |
| @dtui-checkbutton-item-text-disabled-active-border: 0 solid #828599; |
| @dtui-checkbutton-item-text-disabled-active-color: #828599; |
| @dtui-checkbutton-item-text-disabled-active-background: #ddd; |
| |
| |
| @dtui-tooltip-border: 1px solid #bbb; |
| @dtui-tooltip-color: #111; |
| @dtui-tooltip-background: #fff; |
| |
| // --------------- |
| // dtui theme end |
| // --------------- |
| |
| .mixin-iconfont() { |
| font-family:"iconfont" !important; |
| font-size:16px; |
| font-style:normal; |
| -webkit-font-smoothing: antialiased; |
| -webkit-text-stroke-width: 0.2px; |
| -moz-osx-font-smoothing: grayscale; |
| } |
| |
| .iconfont { |
| .mixin-iconfont(); |
| } |
| |
| * { |
| font-family: "Helvetica Neue", "Segoe UI", Tahoma, Arial, "Hiragino Sans GB", STHeiti, "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif; |
| } |
| body { |
| background: @background-color; |
| color: @main-text-color; |
| } |
| code { |
| color: #293C55; |
| } |
| |
| .ecdocmixin-panel() { |
| background: #f5f5f5; |
| border: 1px solid #ccc; |
| color: #333; |
| padding: 5px 10px; |
| line-height: 25px; |
| border-radius: 4px; |
| |
| & a, |
| & a:visited { |
| color: @main-high-color; |
| } |
| } |
| .ecdoc-normal-panel { |
| .ecdocmixin-panel(); |
| } |
| |
| |
| .ecdoc-apidoc { |
| position: absolute; |
| top: 50px; |
| bottom: 0; |
| width: 100%; |
| } |
| .ecdoc-api-left-area { |
| position: absolute; |
| left: 0; |
| top: 0; |
| margin-left: 10px; |
| height: 100%; |
| width: @left-width - 10px; |
| } |
| .ecdoc-api-right-area { |
| position: absolute; |
| right: 0; |
| height: 100%; |
| left: @left-width; |
| border-left: 1px solid @split-line-color; |
| } |
| |
| |
| .ecdoc-quick-link { |
| position: relative; |
| z-index: 999; |
| font-size: 14px; |
| text-align: center; |
| background: #FAFAFC; |
| height: 46px; |
| line-height: 38px; |
| font-weight: bold; |
| border-bottom: 1px solid #ddd; |
| margin-right: 10px; |
| |
| // Mask scroll bar |
| &:after { |
| content: " "; |
| display: block; |
| position: absolute; |
| top: 0; |
| right: -10px; |
| width: 10px; |
| height: 47px; |
| background: #FAFAFC; |
| } |
| |
| a, span { |
| display: inline-block; |
| height: 46px; |
| vertical-align: middle; |
| color: #555; |
| margin: 0 10px; |
| padding: 0 5px; |
| } |
| a { |
| // border-bottom: 1px solid transparent; |
| border-top: 4px solid transparent; |
| } |
| a:hover { |
| text-decoration: none; |
| background: #e9e9e9; |
| } |
| span { |
| border-top: 4px solid #b03a5b; |
| // border-bottom: 1px solid #b03a5b; |
| } |
| } |
| |
| .ecdoc-api-query-box { |
| position: relative; |
| padding: 15px 30px 0 20px; |
| z-index: 12; |
| background: @background-color; |
| // width: @left-width - 13px; |
| .clearfix(); |
| |
| .dtui-txipt { |
| background: #fff; |
| color: #000; |
| height: 30px; |
| width: @left-width - 52px; |
| display: block; |
| margin: 0; |
| text-align: right; |
| position: relative; |
| |
| input { |
| // width: @left-width - 85px; |
| width: 100%; |
| text-indent: 20px; |
| background: #fff; |
| color: #000; |
| } |
| &:before { |
| .mixin-iconfont(); |
| content: "\e601"; |
| position: absolute; |
| left: 5px; |
| top: 2px; |
| color: #777; |
| } |
| } |
| .query-mode { |
| float: left; |
| margin-top: 4px; |
| font-size: 12px; |
| margin-left: 3px; |
| |
| .dtui-chkbtn-i-active { |
| color: #333; |
| } |
| } |
| .collapse-all { |
| margin-top: 7px; |
| width: auto; |
| min-width: 0; |
| float: right; |
| background: transparent; |
| height: 18px; |
| line-height: 18px; |
| font-size: 12px; |
| color: #666; |
| } |
| .query-result-info { |
| font-size: 12px; |
| color: #aaa; |
| width: 94px; |
| float: left; |
| height: 18px; |
| line-height: 18px; |
| margin-top: 0; |
| margin-left: 13px; |
| } |
| } |
| |
| .autocomplete-suggestions { |
| top: 143px !important; |
| left: 35px !important; |
| width: 228px !important; |
| font-size: 12px !important; |
| // position: absolute; |
| // top: 100px; |
| // left: 35px; |
| // width: 228px; |
| // max-height: 200px; |
| // overflow: scroll; |
| // border: 1px solid #979bb2; |
| // background: #fff; |
| // padding: 10px; |
| // z-index: 99999; |
| } |
| |
| .ecdoc-api-tree-area { |
| position: absolute; |
| top: 0; |
| left: 0; |
| bottom: 0; |
| width: 100%; |
| |
| // For gradient mask. |
| &:before { |
| content: " "; |
| position: fixed; |
| top: 50px; |
| left: 0; |
| width: @left-width; |
| background: @background-color; |
| height: 95px; |
| z-index: 1; |
| background-image: linear-gradient(to bottom, @background-color, rgba(247,247,249,0.1)); |
| } |
| |
| .ps-scrollbar-y-rail { |
| z-index: 2; |
| } |
| |
| .ecdoc-api-tree { |
| padding-top: 137px; |
| } |
| .ecdoc-api-tree * { |
| font-family: Monaco,Consolas,Courier new,monospace; |
| font-size: 13px; |
| white-space: nowrap; |
| } |
| |
| .dtui-treelist-text { |
| .ecdoc-api-tree-text-prop { |
| } |
| .ecdoc-api-tree-text-default { |
| color: #999; |
| font-style: normal; |
| margin-left: 5px; |
| } |
| &-highlight { |
| .ecdoc-api-tree-text-default { |
| color: #333; |
| } |
| } |
| &-active { |
| .ecdoc-api-tree-text-default { |
| color: #fff; |
| } |
| } |
| &-hover { |
| .ecdoc-api-tree-text-default { |
| color: #777; |
| } |
| } |
| } |
| |
| .dtui-treelist-thumb { |
| .iconfont(); |
| font-size: 12px; |
| margin: 2px 0 0 -1.2em; |
| |
| &:hover { |
| color: @main-light-high-color; |
| } |
| } |
| |
| .dtui-treelist-expanded > .dtui-treelist-thumb:after { |
| content: "\e600"; |
| } |
| .dtui-treelist-collapsed > .dtui-treelist-thumb:after { |
| content: "\e602"; |
| } |
| } |
| |
| |
| .ecdoc-api-doc-group-area { |
| position: relative; |
| height: 100%; |
| } |
| .ecdoc-api-doc-group-content { |
| margin: 0; |
| padding: 14px 50px; |
| |
| blockquote { |
| font-size: 12px; |
| color: #999; |
| |
| p { |
| margin: 0; |
| } |
| |
| pre { |
| font-size: 12px; |
| } |
| } |
| |
| iframe { |
| border: 1px solid #ccc; |
| } |
| |
| p { |
| line-height: 1.7em; |
| margin: 18px 0 0 0; |
| } |
| pre { |
| margin: 0 -15px; |
| background-color: #f5f5f5; |
| border: none; |
| padding: 15px; |
| border-radius: 0; |
| } |
| |
| code * { |
| font-family: Monaco, Consolas, 'Courier New'; |
| } |
| |
| ul li { |
| list-style: disc; |
| margin: 10px 20px; |
| } |
| ol li { |
| list-style: decimal; |
| } |
| } |
| .ecdoc-api-doc-group-line { |
| position: relative; |
| padding: 0px 15px 15px 15px; |
| background: #fff; |
| margin: 10px 0px; |
| box-shadow: 0 0 1px rgba(0, 0, 0, 0.3); |
| |
| blockquote { |
| font-size: 12px; |
| color: #999; |
| } |
| } |
| .ecdoc-api-doc-sub-group .ecdoc-api-doc-group-line { |
| border-radius: 4px; |
| } |
| .ecdoc-api-doc-line-expand { |
| position: absolute; |
| top: 10px; |
| right: 10px; |
| cursor: pointer; |
| user-select: none; |
| } |
| .ecdoc-api-doc-prop-expand { |
| span { |
| font-size: 12px; |
| background: rgba(176, 59, 91, 0.15); |
| margin: 20px 0 0 0; |
| padding: 0 10px; |
| line-height: 2; |
| display: inline-block; |
| border-radius: 3px; |
| cursor: pointer; |
| user-select: none; |
| } |
| } |
| .ecdoc-api-doc-line-head { |
| cursor: pointer; |
| |
| // &.ecdoc-api-doc-expandable { |
| background-color: rgba(0,0,0,0.05); |
| &:hover { |
| background-color: rgba(0,0,0,0.2); |
| } |
| |
| margin-left: -15px; |
| margin-right: -15px; |
| padding: 8px 15px; |
| |
| } |
| .ecdoc-api-doc-line-label { |
| color: @main-light-high-color; |
| font-size: 14px; |
| padding-right: 20px; |
| |
| strong { |
| color: @main-high-color; |
| font-size: 18px; |
| padding-left: 5px; |
| } |
| } |
| .ecdoc-api-doc-line-type { |
| padding-left: 20px; |
| border-left: 1px solid #ccc; |
| } |
| .ecdoc-api-doc-group-line-highlight { |
| // background-color: @ec-doc-line-highlight-color; |
| box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); |
| } |
| .ecdoc-api-doc-group-title { |
| color: @main-high-color; |
| font-size: 20px; |
| border-bottom: 1px solid #ccc; |
| height: 40px; |
| line-height: 40px; |
| } |
| .ecdoc-api-doc-group-title-desc { |
| margin-top: 20px; |
| margin-bottom: 20px; |
| } |
| |
| |
| .ecdoc-api-hover-desc { |
| position: fixed; |
| left: 310px; |
| right: 25px; |
| height: 130px; |
| bottom: 15px; |
| background-color: white; |
| box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); |
| |
| .ecdoc-api-doc-group-line { |
| margin: 0; |
| height: 100%; |
| overflow: hidden; |
| box-shadow: none; |
| } |
| |
| // For gradiant mask. |
| &:after { |
| content: " "; |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| height: 25px; |
| background-image: linear-gradient(to top, #fff, #fff, #fff, rgba(255,255,255,0.1)); |
| color: red; |
| } |
| } |
| |
| |
| // Tutorial page |
| #main.tutorial { |
| .ecdoc-api-doc-group-content { |
| li { |
| font-size: 16px; |
| } |
| p { |
| font-size: 16px; |
| margin: 18px 0; |
| } |
| h2 { |
| margin: 30px 0 20px 0; |
| border-bottom: 1px solid #ccc; |
| padding-bottom: 4px; |
| font-size: 26px; |
| } |
| h3, h4 { |
| margin: 20px 0; |
| } |
| } |
| .dtui-treelist-i { |
| line-height: 30px; |
| margin: 0; |
| padding-left: 0; |
| |
| * { |
| font-size: 14px; |
| font-family:"Helvetica Neue", "Segoe UI", Tahoma, Arial, "Hiragino Sans GB", STHeiti, "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif; |
| } |
| .dtui-treelist-text { |
| padding-left: 15px; |
| } |
| } |
| } |
| |
| @media (max-width: 600px) { |
| .ecdoc-api-left-area { |
| display: none; |
| } |
| |
| .ecdoc-api-right-area { |
| left: 0px; |
| } |
| .ecdoc-api-doc-group-content iframe { |
| max-width: 100%; |
| } |
| .ecdoc-api-doc-group-content { |
| padding: 14px 30px; |
| } |
| } |
