UNPKG

@ustack/uskin

Version:

A graceful framework which provides developers another chance to build an amazing site.

2,588 lines (2,587 loc) 67.8 kB
/*! * USkin v0.6.2 (https://github.com/unitedstack/uskin#readme) * Copyright 2019 The USkin Authors * Licensed under MIT (https://github.com/unitedstack/uskin/blob/master/LICENSE) */ /** * Default theme */ /** * Reference: * http://www.zhihu.com/question/20683099?sort=created * https://ruby-china.org/topics/14005 */ /** * color Pallet v.3 , default color is 500 */ /** * Global mixins */ /*! normalize.css v3.0.1 | MIT License | git.io/normalize */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { font-family: "Helvetica Neue", Helvetica, arial, "Microsoft Yahei", "\5FAE\8F6F\96C5\9ED1", "\5B8B\4F53", sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Remove default margin. */ body { margin: 0; } /* HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined for any HTML5 element in IE 8/9. * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. * Correct `block` display not defined for `main` in IE 11. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } /** * 1. Correct `inline-block` display not defined in IE 8/9. * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address `[hidden]` styling not present in IE 8/9/10. * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */ [hidden], template { display: none; } /* Links ========================================================================== */ /** * Remove the gray background color from active links in IE 10. */ a { background: transparent; text-decoration: none; } /** * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; text-decoration: none; } /* Text-level semantics ========================================================================== */ /** * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ b, strong { font-weight: bold; } /** * Address styling not present in Safari and Chrome. */ dfn { font-style: italic; } /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari, and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9/10. */ img { border: 0; } /** * Correct overflow not hidden in IE 9/10/11. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari. */ figure { margin: 1em 40px; } /** * Address differences between Firefox and other browsers. */ hr { box-sizing: content-box; height: 0; } /** * Contain overflow in all browsers. */ pre { overflow: auto; } /** * Address odd `em`-unit font size rendering in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** * Known limitation: by default, Chrome and Safari on OS X allow very limited * styling of `select`, unless a `border` property is set. */ /** * 1. Correct color not being inherited. * Known issue: affects color of disabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */ button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ } /** * Address `overflow` set to `hidden` in IE 8/9/10/11. */ button { overflow: visible; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ input { line-height: normal; } /** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing, padding, or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ /* 2 */ box-sizing: content-box; } /** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** * Remove default vertical scrollbar in IE 8/9/10/11. */ textarea { overflow: auto; } /** * Don't inherit the `font-weight` (applied by a rule above). * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */ optgroup { font-weight: bold; } /* Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } /** * USkin reset based on normalize.css v3.0.1 * * @author LeeY <yaoli111144@gmail.com> */ html { height: 100%; font-size: 12px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } body { color: #252f3d; } ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, h5, h6 { margin: 0; } h1 { font-size: 36px; } h2 { font-size: 30px; } h3 { font-size: 24px; } h4 { font-size: 18px; } h5 { font-size: 14px; } h6 { font-size: 12px; } form { margin: 0; } a { color: #00afc8; } a:hover { color: #00a6be; } a:active { color: #009db4; } input, textarea { outline: 0; } select::-ms-expand { display: none; } .clearfix:before, .clearfix:after, .tra-row:before, .tra-row:after { content: " "; display: table; } .clearfix:after, .tra-row:after { clear: both; } .hide { display: none !important; } .show { display: block; } .t-left { text-align: left; } .t-center { text-align: center; } .t-right { text-align: right; } .f-left { float: left; } .f-right { float: right; } @font-face { font-family: "icons"; src: url(./fonts/9716772f.icon.eot); src: url(./fonts/9716772f.icon.eot#iefix) format("embedded-opentype"), url(./fonts/a4d22247.icon.woff) format("woff"), url(./fonts/7ffc7893.icon.ttf) format("truetype"), url(./fonts/26f632f2.icon.svg#icons) format("svg"); font-weight: normal; font-style: normal; } .glyphicon { display: inline-block; line-height: 1; font-weight: normal; font-style: normal; speak: none; text-decoration: inherit; text-transform: none; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .glyphicon:before { font-family: "icons"; } .icon-about:before { content: "\F101"; } .icon-account-charge:before { content: "\F102"; } .icon-active-yes:before { content: "\F103"; } .icon-active:before { content: "\F104"; } .icon-add-notice:before { content: "\F105"; } .icon-address-scope:before { content: "\F106"; } .icon-app-center:before { content: "\F107"; } .icon-applications:before { content: "\F108"; } .icon-arch:before { content: "\F109"; } .icon-arrow-down:before { content: "\F10A"; } .icon-arrow-left:before { content: "\F10B"; } .icon-arrow-right:before { content: "\F10C"; } .icon-arrow-up:before { content: "\F10D"; } .icon-associate:before { content: "\F10E"; } .icon-avatar:before { content: "\F10F"; } .icon-backup:before { content: "\F110"; } .icon-billing-record:before { content: "\F111"; } .icon-billing:before { content: "\F112"; } .icon-bucket:before { content: "\F113"; } .icon-bw-in:before { content: "\F114"; } .icon-bw-out:before { content: "\F115"; } .icon-cache-config:before { content: "\F116"; } .icon-cache:before { content: "\F117"; } .icon-calendar:before { content: "\F118"; } .icon-cc-video:before { content: "\F119"; } .icon-centos:before { content: "\F11A"; } .icon-charge-record:before { content: "\F11B"; } .icon-close:before { content: "\F11C"; } .icon-cloud-video:before { content: "\F11D"; } .icon-collaboration:before { content: "\F11E"; } .icon-copy:before { content: "\F11F"; } .icon-coreos:before { content: "\F120"; } .icon-correct:before { content: "\F121"; } .icon-cpu:before { content: "\F122"; } .icon-create:before { content: "\F123"; } .icon-database-config:before { content: "\F124"; } .icon-database:before { content: "\F125"; } .icon-debian:before { content: "\F126"; } .icon-delete:before { content: "\F127"; } .icon-deploy:before { content: "\F128"; } .icon-disable:before { content: "\F129"; } .icon-dissociate:before { content: "\F12A"; } .icon-doc:before { content: "\F12B"; } .icon-docx:before { content: "\F12C"; } .icon-domain:before { content: "\F12D"; } .icon-double-arrow-left:before { content: "\F12E"; } .icon-double-arrow-right:before { content: "\F12F"; } .icon-download:before { content: "\F130"; } .icon-dropdown:before { content: "\F131"; } .icon-edit:before { content: "\F132"; } .icon-empty:before { content: "\F133"; } .icon-enable:before { content: "\F134"; } .icon-epc-suse:before { content: "\F135"; } .icon-exe:before { content: "\F136"; } .icon-eye:before { content: "\F137"; } .icon-fedora:before { content: "\F138"; } .icon-file-sharing:before { content: "\F139"; } .icon-file:before { content: "\F13A"; } .icon-filter-collapse:before { content: "\F13B"; } .icon-filter-expand:before { content: "\F13C"; } .icon-flavor-setting:before { content: "\F13D"; } .icon-flavor:before { content: "\F13E"; } .icon-floating-ip:before { content: "\F13F"; } .icon-flv:before { content: "\F140"; } .icon-folder:before { content: "\F141"; } .icon-freebsd:before { content: "\F142"; } .icon-g-admin:before { content: "\F143"; } .icon-g-approval:before { content: "\F144"; } .icon-g-bill:before { content: "\F145"; } .icon-g-calamari:before { content: "\F146"; } .icon-g-dashboard:before { content: "\F147"; } .icon-g-ec2:before { content: "\F148"; } .icon-g-grafana:before { content: "\F149"; } .icon-g-rds:before { content: "\F14A"; } .icon-g-storage:before { content: "\F14B"; } .icon-g-subaccount:before { content: "\F14C"; } .icon-g-ticket:before { content: "\F14D"; } .icon-g-union:before { content: "\F14E"; } .icon-g-vmware:before { content: "\F14F"; } .icon-g-vpc:before { content: "\F150"; } .icon-gentoo:before { content: "\F151"; } .icon-global:before { content: "\F152"; } .icon-heat-list:before { content: "\F153"; } .icon-help:before { content: "\F154"; } .icon-host-aggregates:before { content: "\F155"; } .icon-host:before { content: "\F156"; } .icon-image:before { content: "\F157"; } .icon-ingress:before { content: "\F158"; } .icon-instance-snapshot:before { content: "\F159"; } .icon-instance:before { content: "\F15A"; } .icon-invoice:before { content: "\F15B"; } .icon-jpg:before { content: "\F15C"; } .icon-keypair:before { content: "\F15D"; } .icon-lb:before { content: "\F15E"; } .icon-listener:before { content: "\F15F"; } .icon-loading:before { content: "\F160"; } .icon-log:before { content: "\F161"; } .icon-logout:before { content: "\F162"; } .icon-m-swallow:before { content: "\F163"; } .icon-memory:before { content: "\F164"; } .icon-metadata-definition:before { content: "\F165"; } .icon-monitor:before { content: "\F166"; } .icon-more:before { content: "\F167"; } .icon-mp3:before { content: "\F168"; } .icon-mp4:before { content: "\F169"; } .icon-mvb:before { content: "\F16A"; } .icon-network-qos:before { content: "\F16B"; } .icon-network:before { content: "\F16C"; } .icon-notice-management:before { content: "\F16D"; } .icon-notification:before { content: "\F16E"; } .icon-object-storage:before { content: "\F16F"; } .icon-opensuse:before { content: "\F170"; } .icon-overview:before { content: "\F171"; } .icon-pdf:before { content: "\F172"; } .icon-performance:before { content: "\F173"; } .icon-png:before { content: "\F174"; } .icon-port:before { content: "\F175"; } .icon-power-off:before { content: "\F176"; } .icon-power-on:before { content: "\F177"; } .icon-ppt:before { content: "\F178"; } .icon-pptx:before { content: "\F179"; } .icon-project:before { content: "\F17A"; } .icon-property:before { content: "\F17B"; } .icon-question:before { content: "\F17C"; } .icon-quota-approval:before { content: "\F17D"; } .icon-rar:before { content: "\F17E"; } .icon-red-hat:before { content: "\F17F"; } .icon-redhat:before { content: "\F180"; } .icon-redirect-policy:before { content: "\F181"; } .icon-refresh:before { content: "\F182"; } .icon-region:before { content: "\F183"; } .icon-registration-approval:before { content: "\F184"; } .icon-remove:before { content: "\F185"; } .icon-resource-pool:before { content: "\F186"; } .icon-restart:before { content: "\F187"; } .icon-rmvb:before { content: "\F188"; } .icon-role:before { content: "\F189"; } .icon-router:before { content: "\F18A"; } .icon-s-lock:before { content: "\F18B"; } .icon-s-unlock:before { content: "\F18C"; } .icon-search:before { content: "\F18D"; } .icon-security-group:before { content: "\F18E"; } .icon-security-log:before { content: "\F18F"; } .icon-select-down:before { content: "\F190"; } .icon-setting:before { content: "\F191"; } .icon-sles:before { content: "\F192"; } .icon-snapshot:before { content: "\F193"; } .icon-status-active:before { content: "\F194"; } .icon-status-approving:before { content: "\F195"; } .icon-status-deleted:before { content: "\F196"; } .icon-status-disabled:before { content: "\F197"; } .icon-status-light:before { content: "\F198"; } .icon-status-paused:before { content: "\F199"; } .icon-status-pending:before { content: "\F19A"; } .icon-status-shutdown:before { content: "\F19B"; } .icon-status-warning:before { content: "\F19C"; } .icon-subnet:before { content: "\F19D"; } .icon-swf:before { content: "\F19E"; } .icon-system-information:before { content: "\F19F"; } .icon-template-list:before { content: "\F1A0"; } .icon-tfcloud:before { content: "\F1A1"; } .icon-ticket:before { content: "\F1A2"; } .icon-tiff:before { content: "\F1A3"; } .icon-topology:before { content: "\F1A4"; } .icon-txt:before { content: "\F1A5"; } .icon-ubuntu:before { content: "\F1A6"; } .icon-upload:before { content: "\F1A7"; } .icon-user-group:before { content: "\F1A8"; } .icon-user:before { content: "\F1A9"; } .icon-video-account-management:before { content: "\F1AA"; } .icon-vnc:before { content: "\F1AB"; } .icon-volume:before { content: "\F1AC"; } .icon-vpn:before { content: "\F1AD"; } .icon-windows:before { content: "\F1AE"; } .icon-wma:before { content: "\F1AF"; } .icon-xls:before { content: "\F1B0"; } .icon-zip:before { content: "\F1B1"; } @keyframes spin { from { transform: rotate(0deg); } 20% { transform: rotate(135deg); } to { transform: rotate(180deg); } } @keyframes modalZoomIn { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8, 0.8); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1, 1); } } @keyframes modalZoomOut { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1, 1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8, 0.8); } } @keyframes modalFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes modalFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } table.table { display: table; width: 100%; max-width: 100%; background-color: #fff; } table.table input[type="checkbox"] { vertical-align: middle; } table.table > thead { height: 36px; background-color: #ecf0f2; font-size: 12px; color: #626f7e; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } table.table > thead > tr { height: 36px; } table.table > thead > tr th { padding-left: 16px; text-align: left; font-weight: normal; } table.table > thead > tr th:not(:first-child) { border-left: 1px solid #fff; } table.table > tbody > tr { height: 40px; border-bottom: 1px solid #ecf0f2; } table.table > tbody > tr.selected { background-color: #b9f1f9 !important; } table.table > tbody > tr > td { padding-left: 16px; } .table { width: 100%; max-width: 100%; background-color: #fff; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; } .table input[type="checkbox"] { vertical-align: middle; } .table .table-header { display: -ms-flexbox; display: flex; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; min-height: 36px; height: 36px; max-height: 36px; } .table .table-header > div { -ms-flex: 1; flex: 1; box-sizing: border-box; height: 36px; line-height: 36px; padding-left: 16px; background-color: #ecf0f2; color: #626f7e; border-right: 1px solid #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .table .table-header > div .filter-box { display: inline-block; cursor: pointer; } .table .table-header > div .filter-box .filter-icon { display: inline-block; width: 16px; height: 36px; text-align: center; cursor: pointer; } .table .table-header > div .filter-box .filter-icon::after { content: ""; font-size: 0; width: 0; position: relative; top: -2px; border-top: 3px solid transparent; border-left: 3px solid transparent; border-bottom: 3px solid #939ba3; border-right: 3px solid #939ba3; } .table .table-header > div .filter-box .filter-icon:hover::after { border-bottom: 3px solid #626f7e; border-right: 3px solid #626f7e; } .table .table-header > div .filter-box .filter { position: absolute; border: 1px solid #ecf0f2; width: 150px; text-align: left; background: #fff; cursor: pointer; box-shadow: 0 0 15px #ecf0f2; z-index: 9; } .table .table-header > div .filter-box .filter > div { margin: 2px; padding-left: 10px; padding-right: 20px; position: relative; height: 36px; line-height: 36px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .table .table-header > div .filter-box .filter > div:hover { background: #f5fdfe; } .table .table-header > div .filter-box .filter > div.selected { background: #b9f1f9 !important; } .table .table-header > div .filter-box .filter > div.selected i { position: absolute; top: 12px; right: 6px; font-weight: bold; color: #00afc8; } .table .table-header > div:last-child { border-right: none; } .table .table-header > div.checkbox { width: 36px; -ms-flex: none; flex: none; padding: 0 10px; } .table .table-header > div.sortable { display: inline-block; } .table .table-header > div.sortable .title { cursor: pointer; } .table .table-header > div.sortable .sort-box { width: 20px; height: 36px; float: right; } .table .table-header > div.sortable .sort-box .sort-up, .table .table-header > div.sortable .sort-box .sort-down { display: block; height: 50%; padding-left: 6px; cursor: pointer; position: relative; } .table .table-header > div.sortable .sort-box .sort-up .arrow-up { position: absolute; bottom: 1px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 4px solid #939ba3; } .table .table-header > div.sortable .sort-box .sort-up:hover .arrow-up { border-bottom: 4px solid #626f7e; } .table .table-header > div.sortable .sort-box .sort-up.selected .arrow-up { border-bottom: 4px solid #626f7e; } .table .table-header > div.sortable .sort-box .sort-down .arrow-down { position: absolute; top: 1px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #939ba3; } .table .table-header > div.sortable .sort-box .sort-down:hover .arrow-down { border-top: 4px solid #626f7e; } .table .table-header > div.sortable .sort-box .sort-down.selected .arrow-down { border-top: 4px solid #626f7e; } .table .table-header > div .drag-line { float: right; width: 8px; height: 36px; cursor: col-resize; } .table .loading-data { -ms-flex: 1; flex: 1; width: 100%; overflow-y: hidden; position: relative; } .table .loading-data .icon-loading { position: absolute; top: 60px; left: 50%; margin-left: -18px; width: 36px; color: #626f7e; animation: spin 1.28s linear .28s infinite; -moz-animation: spin 1.28s linear .28s infinite; -webkit-animation: spin 1.28s linear .28s infinite; font-size: 36px !important; } .table .loading-data .icon-loading:before { content: "\F160"; } .table .table-body { overflow-x: hidden; overflow-y: auto; } .table .table-body .row { display: -ms-flexbox; display: flex; border-bottom: 1px solid #ecf0f2; } .table .table-body .row > div { -ms-flex: 1; flex: 1; box-sizing: border-box; height: 40px; line-height: 40px; padding-left: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .table .table-body .row > div:last-child { border-right: none; } .table .table-body .row > div.checkbox { width: 36px; -ms-flex: none; flex: none; padding: 0 10px; } .table .table-body .row.selected { background-color: #b9f1f9 !important; } .table .resize-column-line { background-color: #d5dddf; width: 1px; position: fixed; z-index: 999; } .table-striped > tbody > tr:nth-child(even) { background-color: #f5fdfe; } .table-striped .table-body .row:nth-child(even) { background-color: #f5fdfe; } .table-hover > tbody > tr:hover { background-color: #f5fdfe; } .table-hover .table-body .row:hover { background-color: #f5fdfe; } .table-mini .table-header { min-height: 28px; height: 28px; max-height: 28px; border-bottom: 1px solid #ecf0f2; } .table-mini .table-header > div { height: 28px; line-height: 28px; background-color: #fff; } .table-mini .table-header > div.sortable .sort-box { height: 28px; width: 16px; } .table-mini .table-header > div .filter-box .filter-icon { width: 12px; height: 28px; } .table-mini .table-body .row > div { height: 36px; line-height: 36px; } input { padding: 4px 10px; border: 1px solid #e3e4e5; border-radius: 2px; height: 22px; line-height: 22px; box-sizing: content-box; } input:hover { border-color: #00afc8; } input:focus { border-color: #00afc8; } input.error { border-color: #e05c69; } select { padding: 4px 10px; width: 125px; height: 22px; border: 1px solid #e3e4e5; border-radius: 2px; background-color: transparent; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: content-box; cursor: pointer; } select:hover { border-color: #00afc8; } select:focus { border-color: #00afc8; } select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #252f3d; } input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] { color: #bbbfc5; border-color: #cccccc; background-color: #eeeeee; cursor: not-allowed !important; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } input[type="radio"], input[type="checkbox"], input[type="radio"][disabled], input[type="checkbox"][disabled], input[type="radio"][readonly], input[type="checkbox"][readonly] { background-color: transparent; height: auto; cursor: pointer; border: none; height: 16px; width: 16px; -webkit-appearance: none; } select, input[type="radio"], input[type="checkbox"], input[type="radio"][disabled], input[type="checkbox"][disabled] { background: url(./img/1a5a0b07.uskin_input.png) no-repeat -20px 0; } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2) { select, input[type="radio"], input[type="checkbox"], input[type="radio"][disabled], input[type="checkbox"][disabled] { background: url(./img/65f2124f.uskin_input@x2.png) no-repeat -20px 0; background-size: 96px 90px; } } select { background-position: right -71px; } select:hover { background-position: right -46px; } select:hover:disabled { background-position: right -71px; } input[type="radio"] { background-position: -20px -21px; } input[type="radio"]:hover { background-position: -40px -21px; } input[type="radio"]:checked { background-position: -60px -21px; } input[type="radio"]:checked:disabled { background-position: -80px -21px; } input[type="radio"]:disabled { background-position: 0 -21px; } input[type="checkbox"]:hover { background-position: -40px 0; } input[type="checkbox"]:checked { background-position: -60px 0; } input[type="checkbox"]:checked:disabled { background-position: -80px 0; } input[type="checkbox"]:disabled { background-position: 0 0; } .btn { display: inline-block; box-sizing: border-box; min-width: 80px; border: 1px solid transparent; font-weight: normal; text-align: center; vertical-align: middle; cursor: pointer; white-space: nowrap; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding: 0 12px; font-size: 13px; height: 32px; line-height: 30px; border-radius: 2px; color: white; background-color: #00afc8; border-color: #00afc8; } .btn:hover { color: white; background-color: #00a6be; border-color: #00a6be; } .btn:active { color: white; background-color: #009db4; } .btn:focus { outline: none; } .btn[disabled], .btn.disabled { color: #939ba3; background-color: #d5dddf; border-color: #d5dddf; cursor: not-allowed; } .btn[disabled]:hover, .btn.disabled:hover { color: #939ba3; background-color: #d5dddf; border-color: #d5dddf; } .btn[disabled]:active, .btn.disabled:active { color: #939ba3; background-color: #d5dddf; } .btn[disabled]:focus, .btn.disabled:focus { outline: none; } .btn > i + span { margin-left: 6px; } .btn > span + i { margin-left: 6px; } .btn .glyphicon { vertical-align: text-bottom; font-weight: bold; width: 13px; } .btn-create { color: white; background-color: #1eb9a5; border-color: #1eb9a5; } .btn-create:hover { color: white; background-color: #1db09d; border-color: #1db09d; } .btn-create:active { color: white; background-color: #1ba795; } .btn-create:focus { outline: none; } .btn-warning { color: white; background-color: #f2994b; border-color: #f2994b; } .btn-warning:hover { color: white; background-color: #f78913; border-color: #f78913; } .btn-warning:active { color: white; background-color: #f78913; } .btn-warning:focus { outline: none; } .btn-delete { color: white; background-color: #e05c69; border-color: #e05c69; } .btn-delete:hover { color: white; background-color: #de5361; border-color: #de5361; } .btn-delete:active { color: white; background-color: #dd4b59; } .btn-delete:focus { outline: none; } .btn-cancel { color: #626f7e; background-color: #ecf0f2; border-color: #ecf0f2; } .btn-cancel:hover { color: #626f7e; background-color: #e6ebee; border-color: #e6ebee; } .btn-cancel:active { color: #626f7e; background-color: #e0e6ea; } .btn-cancel:focus { outline: none; } .btn-status { color: #252f3d; background-color: #ecf0f2; border-color: #ecf0f2; } .btn-status:hover { color: #252f3d; background-color: #f5fdfe; border-color: #f5fdfe; } .btn-status:active { color: #252f3d; background-color: #f5fdfe; } .btn-status:focus { outline: none; } .btn-status.selected { color: #252f3d; background-color: #b9f1f9; border-color: #b9f1f9; } .btn-initial { min-width: initial; } .btn-xl { padding: 0 40px; font-size: 18px; height: 48px; line-height: 46px; border-radius: 2px; } .btn-lg { padding: 0 20px; font-size: 14px; height: 40px; line-height: 38px; border-radius: 2px; } .btn-sm { padding: 0 12px; font-size: 12px; height: 28px; line-height: 26px; border-radius: 2px; } .btn-xs { padding: 0 12px; font-size: 12px; height: 24px; line-height: 22px; border-radius: 2px; } .btn-loading > .icon-loading { animation: spin 1.28s linear .28s infinite; -moz-animation: spin 1.28s linear .28s infinite; -webkit-animation: spin 1.28s linear .28s infinite; } .btn-group { display: inline-block; } .btn-group > .btn { float: left; margin-right: 1px; } .btn-group > .btn:first-child { border-bottom-right-radius: 0; border-top-right-radius: 0; } .btn-group > .btn:last-child { margin-right: 0; border-bottom-left-radius: 0; border-top-left-radius: 0; } .btn-group > .btn:not(:first-child):not(:last-child) { border-radius: 0; } .btn-group-vertical { display: inline-block; } .btn-group-vertical > .btn { display: block; margin-bottom: 1px; } .btn-group-vertical > .btn:first-child { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .btn-group-vertical > .btn:last-child { margin-bottom: 0; border-top-right-radius: 0; border-top-left-radius: 0; } .btn-group-vertical > .btn:not(:first-child):not(:last-child) { border-radius: 0; } .btn-group-justified.btn-group { display: table; wdith: 100%; border-spacing: 1px 0; } .btn-group-justified.btn-group > .btn { float: none; display: table-cell; width: 1%; } .btn-group-justified.btn-group-vertical { display: block; } .dropdown { position: absolute; padding: 10px 0; z-index: 1001; min-width: 135px; border: 1px solid #ecf0f2; border-radius: 2px; background-color: #fff; box-shadow: 0 2px 8px 2px rgba(0, 0, 0, 0.12); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .dropdown::before { position: absolute; left: 0; right: 0; top: 0; height: 3px; background-color: #00afc8; content: ""; } .dropdown ul { position: relative; } .dropdown ul:first-child:before { display: none; } .dropdown ul:before { display: block; margin: 0 16px 5px; height: 5px; border-bottom: 1px solid #e3e4e5; content: ""; } .dropdown ul li.dropdown-header { height: 20px; line-height: 20px; font-weight: normal; padding-left: 16px; color: #939ba3; } .dropdown ul li.dropdown-header:hover, .dropdown ul li.dropdown-header:active, .dropdown ul li.dropdown-header:focus { background-color: transparent; } .dropdown ul li:hover, .dropdown ul li:active, .dropdown ul li:focus { background-color: #b9f1f9; } .dropdown ul li:hover > .dropdown-sub, .dropdown ul li:active > .dropdown-sub, .dropdown ul li:focus > .dropdown-sub { display: block; } .dropdown ul li.disabled { color: #bbbfc5; background-color: transparent !important; cursor: not-allowed; } .dropdown ul li.has-submenu > a::after { display: block; content: ""; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: #bbbfc5; margin-top: 10px; margin-right: -10px; } .dropdown ul li a { display: block; padding: 0 20px; height: 30px; line-height: 30px; color: #252f3d; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .dropdown ul li.danger a:hover, .dropdown ul li.danger a:active, .dropdown ul li.danger a:focus { background-color: #fdc4c8; } .dropdown ul li.disabled a { color: #bbbfc5; background-color: transparent; cursor: not-allowed; } .dropdown ul li > .dropdown-sub { left: 100%; top: 0; position: absolute; display: none; } .dropdown ul li > .dropdown-sub::before { display: none; } .dropdown-btn { display: inline-block; position: relative; margin-right: 8px; } .tip { padding: 18px 20px; line-height: 18px; border-radius: 2px; position: relative; background-color: #fff; } .tip strong { margin-right: 5px; font-size: 14px; line-height: 14px; } .tip strong i { margin-right: 6px; } .tip .tip-icon { display: inline-block; vertical-align: top; } .tip .tip-content { display: inline-block; } .tip .icon-close { position: absolute; display: inline-block; width: 14px; height: 14px; color: #bbbfc5; cursor: pointer; right: 7px; top: 21px; } .tip .icon-close:before { font-size: 14px; } .tip .icon-close:hover { color: #626f7e; } .tip .icon-close:active { color: #626f7e; } .tip .icon-close.hide { display: none; } .tip-shadow { box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); } .tip-info { background-color: #f5fdfe; border: 1px solid #00afc8; } .tip-info strong { color: #00afc8; } .tip-success { background-color: #def9f6; border: 1px solid #1eb9a5; } .tip-success strong { color: #1eb9a5; } .tip-warning { background-color: #fff7ec; border: 1px solid #f2994b; } .tip-warning strong { color: #f2994b; } .tip-danger { background-color: #fff5f5; border: 1px solid #e05c69; } .tip-danger strong { color: #e05c69; } .notification { position: fixed; top: 72px; right: 0; margin-right: 20px; z-index: 1000; } .notification .notice { padding: 18px 20px; line-height: 18px; border-radius: 2px; background-color: #fff; position: relative; margin-bottom: 10px; padding: 20px; width: 300px; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); overflow: hidden; transform-origin: 0 0; } .notification .notice strong { margin-right: 5px; font-size: 14px; line-height: 14px; } .notification .notice strong i { margin-right: 6px; } .notification .notice .tip-icon { display: inline-block; vertical-align: top; } .notification .notice .tip-content { display: inline-block; } .notification .notice .icon-close { position: absolute; display: inline-block; width: 14px; height: 14px; color: #bbbfc5; cursor: pointer; right: 7px; top: 21px; } .notification .notice .icon-close:before { font-size: 14px; } .notification .notice .icon-close:hover { color: #626f7e; } .notification .notice .icon-close:active { color: #626f7e; } .notification .notice .icon-close.hide { display: none; } .notification .notice .tip-icon strong i { font-size: 30px; margin-right: 15px; } .notification .notice .tip-content strong { color: inherit; font-weight: normal; } .notice-info { background-color: #f5fdfe; border: 1px solid #00afc8; } .notice-info strong { color: #00afc8; } .notice-success { background-color: #def9f6; border: 1px solid #1eb9a5; } .notice-success strong { color: #1eb9a5; } .notice-warning { background-color: #fff7ec; border: 1px solid #f2994b; } .notice-warning strong { color: #f2994b; } .notice-danger { background-color: #fff5f5; border: 1px solid #e05c69; } .notice-danger strong { color: #e05c69; } .notice-enter { animation-duration: 0.2s; animation-fill-mode: both; animation-timing-function: ease-in-out; animation-play-state: paused; } .notice-enter.notice-enter-active { animation-name: noticeFadeIn; animation-play-state: running; } .notice-leave { animation-duration: 0.2s; animation-fill-mode: both; animation-timing-function: ease-in-out; animation-play-state: paused; } .notice-leave.notice-leave-active { animation-name: noticeFadeOut; animation-play-state: running; } @keyframes noticeFadeIn { 0% { opacity: 0; transform: translate(100%, 0); } 100% { opacity: 1; transform: translate(0, 0); } } @keyframes noticeFadeOut { 0% { opacity: 1; margin-bottom: 10px; padding-top: 20px; padding-bottom: 20px; max-height: 150px; } 100% { opacity: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; max-height: 0; } } .modal { position: absolute; left: 50%; top: 50%; width: 540px; transform: translate3d(-50%, -50%, 0) scale(1, 1); overflow: hidden; background-color: #fff; border-radius: 2px; box-shadow: 0 0 18px rgba(0, 0, 0, 0.2); z-index: 999; } .modal .modal-hd { position: relative; padding-left: 48px; height: 46px; background-color: #ecf0f2; } .modal .modal-hd h6 { height: 46px; line-height: 46px; font-size: 18px; font-weight: normal; } .modal .modal-hd .close { position: absolute; top: 16px; right: 20px; display: inline-block; width: 14px; height: 14px; color: #bbbfc5; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .modal .modal-hd .close:before { font-size: 14px; } .modal .modal-hd .close:hover { color: #626f7e; } .modal .modal-hd .close:active { color: #626f7e; } .modal .modal-bd { padding: 30px 48px 46px; min-height: 40px; } .modal .modal-ft { padding: 8px 36px; height: 50px; border-top: 1px solid #ecf0f2; text-align: right; font-size: 0; box-sizing: border-box; } .modal .modal-ft > .btn:not(:last-child) { margin-right: 12px; } .modal.modal-enter { opacity: 0; animation-duration: 0.2s; animation-fill-mode: both; animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); animation-play-state: paused; } .modal.modal-enter.modal-enter-active { animation-name: modalZoomIn; animation-play-state: running; } .modal.modal-leave { animation-duration: 0.2s; animation-fill-mode: both; animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); animation-play-state: paused; } .modal.modal-leave.modal-leave-active { animation-name: modalZoomOut; animation-play-state: running; } .modal .modal-bd { padding: 36px; } .modal .modal-bd .modal-reminder-content .modal-reminder-title { height: 36px; line-height: 36px; font-size: 24px; margin-bottom: 8px; } .modal .modal-bd .modal-reminder-content .modal-reminder-title i { margin-right: 8px; } .modal .modal-bd .modal-reminder-content .modal-reminder-title i.info { color: #00afc8; } .modal .modal-bd .modal-reminder-content .modal-reminder-title i.success { color: #1eb9a5; } .modal .modal-bd .modal-reminder-content .modal-reminder-title i.warning { color: #f2994b; } .modal .modal-bd .modal-reminder-content .modal-reminder-title i.danger { color: #e05c69; } .modal .modal-bd .modal-reminder-content .modal-reminder-message { max-height: 100px; overflow-y: auto; } .modal-mask { position: fixed; top: 0; right: 0; left: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.55); height: 100%; z-index: 998; } .modal-mask.modal-mask-enter { opacity: 0; animation-duration: 0.2s; animation-fill-mode: both; animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); animation-play-state: paused; } .modal-mask.modal-mask-enter.modal-mask-enter-active { animation-name: modalFadeIn; animation-play-state: running; } .modal-mask.modal-mask-leave { animation-duration: 0.2s; animation-fill-mode: both; animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); animation-play-state: paused; } .modal-mask.modal-mask-leave.modal-mask-leave-active { animation-name: modalFadeOut; animation-play-state: running; } .tabs { height: 48px; border-bottom: 3px solid #ecf0f2; font-size: 0; box-sizing: border-box; } .tabs .tab { display: inline-block; } .tabs .tab:not(:first-child) { margin-left: 8px; } .tabs .tab:hover, .tabs .tab:active { border-bottom: 3px solid #b9f1f9; } .tabs .tab.selected { border-bottom: 3px solid #00afc8; } .tabs .tab.selected a { color: #00afc8; cursor: default; } .tabs .tab.sole { border-bottom: 3px solid #ecf0f2; } .tabs .tab.sole a { color: #00afc8; cursor: default; } .tabs .tab.disabled { border-bottom: 3px solid #ecf0f2; } .tabs .tab.disabled a { cursor: not-allowed !important; } .tabs .tab a { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: inline-block; padding: 6px 12px 4px; height: 35px; line-height: 35px; font-size: 16px; color: #939ba3; cursor: pointer; } .tabs-mini { padding-left: 70px; height: 36px; background-color: #ecf0f2; border: none; font-size: 12px; } .tabs-mini .tab { display: inline-block; margin-top: 6px; height: 30px; line-height: 30px; border-top-right-radius: 2px; border-top-left-radius: 2px; } .tabs-mini .tab:hover { background-color: #b9f1f9; } .tabs-mini .tab.selected { background-color: #fff; } .tabs-mini .tab.selected a { color: #252f3d; cursor: default; } .tabs-mini .tab.disabled a { cursor: not-allowed !important; background-color: #ecf0f2; cursor: default; } .tabs-mini .tab a { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: block; padding: 0 16px; color: #626f7e; cursor: pointer; } .switch { width: 60px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .switch input { position: absolute; visibility: hidden; left: -99px; } .switch input + .switch-inner { display: block; position: relative; padding-right: 10px; height: 22px; line-height: 22px; width: 100%; background-color: #bbbfc5; color: #fff; font-weight: bold; border-radius: 11px; text-align: right; cursor: pointer; box-sizing: border-box; transition: background-color 0.4s; } .switch input + .switch-inner::after { position: absolute; content: ""; width: 16px; height: 16px; top: 3px; left: 5px; background-color: #fff; border-radius: 50%; transition: all .4s; } .switch input:checked + .switch-inner { padding-left: 10px; background-color: #b9f1f9; color: #00afc8; text-align: left; } .switch input:checked + .switch-inner::after { left: calc(100% - 20px); background-color: #00afc8; } .switch.disabled input + .switch-inner { cursor: not-allowed; color: #bbbfc5; background-color: #d5dddf; } .switch.disabled input + .switch-inner::after { background-color: #bbbfc5; } .slider { position: relative; height: 16px; background-color: #f2f3f4; border-radius: 2px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; width: 300px; } .slider .slider-track { width: 0; height: 100%; background-color: #b9f1f9; border-top-left-radius: 2px; border-bottom-left-radius: 2px; } .slider .slider-track.animate { transition: width .5s; } .slider .slider-default { position: absolute; left: 0; top: 0; width: 0; height: 100%; background-color: #b9f1f9; border-top-left-radius: 2px; border-bottom-left-radius: 2px; } .slider .slider-thumb { position: absolute; left: 0; top: -3px; width: 1px; height: 12px; border: 5px solid #00afc8; border-radius: 1px; background-color: #fff; cursor: pointer; margin-left: -5px; } .slider .slider-thumb.animate { transition: left .5s; } .slider.disabled { cursor: default; } .slider.disabled .slider-track { background-color: #d5dddf; } .slider.disabled .slider-thumb { cursor: default; border-color: #bbbfc5; } .slider.noclick { cursor: default; } .steps .step-item { float: left; position: relative; text-align: center; width: 190px; } .steps .step-item span { display: inline-block; position: relative; width: 16px; height: 16px; border-radius: 50%; border: 3px solid #f2f3f4; background-color: #e3e4e5; z-index: 9; cursor: pointer; } .steps .step-item.selected span { border: 3px solid #ecf0f2; background-color: #1db09d; } .steps .step-item.disabled span { cursor: default; } .steps .step-item .delimiter { position: absolute; top: 10px; right: 0; width: 100%; height: 2px; background-color: #f2f3f4; z-index: 8; } .steps .step-item:first-child .delimiter { width: 50%; } .steps .step-item:last-child .delimiter { left: 0; width: 50%; } .breadcrumb .breadcrumb-item > span { font-weight: bold; color: #bbbfc5; } .breadcrumb .breadcrumb-item > span.breadcrumb-item-next { margin: 0 4px; } .panel { width: 400px; border: 1px solid #ecf0f2; border-radius: 2px; overflow: hidden; } .panel .panel-hd { background-color: #ecf0f2; font-size: 16px; color: #252f3d; height: 44px; line-height: 44px; padding-left: 18px; padding-right: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .panel .panel-hd > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .panel .panel-bd { padding: 18px; line-height: 18px; } .menu { background-color: #fff; width: 200px; height: inherit; overflow-y: auto; overflow-x: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-right: 1px solid #e3e4e5; } .menu > li:first-child > h6 + ul, .menu > li:first-child > div > h6 + ul { margin-top: 0; } .menu > li:first-child > ul, .menu > li:first-child > div > ul { margin-top: 20px; } .menu > li h6, .menu > li > div h6 { padding: 16px 20px 8px; color: #bbbfc5; font-weight: normal; } .menu > li h6.menu-title-toggle, .menu > li > div h6.menu-title-toggle { cursor: pointer; } .menu > li h6.menu-title-toggle .icon-arrow-up, .menu > li > div h6.menu-title-toggle .icon-arrow-up { float: right; transition: all .3s ease; } .menu > li h6.menu-title-toggle .icon-arrow-up.rotate, .menu > li > div h6.menu-title-toggle .icon-arrow-up.rotate { transform: rotate(180deg); } .menu > li ul.menu-item-toggle, .menu > li > div ul.menu-item-toggle { transition: height .3s ease; overflow: hidden; } .menu > li ul > li, .menu > li > div ul > li { display: block; padding-left: 20px; height: 40px; line-height: 40px; font-size: 13px; color: #626f7e; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer; } .menu > li ul > li:hover, .menu > li > div ul > li:hover { color: #00afc8; } .menu > li ul > li.menu-item-selected, .menu > li > div ul > li.menu-item-selected { height: 38px; line-height: 38px; color: #00afc8; background-color: #fff; border-top: 1px solid #e3e4e5; border-bottom: 1px solid #e3e4e5; cursor: default; } .menu > li ul > li.menu-item-selected::after, .menu > li > div ul > li.menu-item-selected::after { content: ""; width: 1px; height: 38px; background-color: #fff; float: right; margin-right: -1px; } .menu > li ul > li .glyphicon, .menu > li > div ul > li .glyphicon { margin-right: 12px; margin-top: -1px; width: 16px; height: 16px; font-size: 16px; } .menu > li ul > li span, .menu > li > div ul > li span { vertical-align: middle; } .pagination { display: inline-block; } .pagination > li { display: inline; } .pagination > li a { float: left; display: block; padding: 0; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 2px; border: 1