From 62d83cc91583ec2d39afa4ef33ab1e165bb302c7 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 16 May 2017 16:48:43 -0700 Subject: [PATCH 01/75] Import new theme --- ui/src/style/theme/bootstrap-theme.scss | 8546 +++++++++++++++++------ ui/src/style/theme/theme-dark.scss | 1082 +-- 2 files changed, 6780 insertions(+), 2848 deletions(-) diff --git a/ui/src/style/theme/bootstrap-theme.scss b/ui/src/style/theme/bootstrap-theme.scss index 529877637..5d3ec9dfb 100755 --- a/ui/src/style/theme/bootstrap-theme.scss +++ b/ui/src/style/theme/bootstrap-theme.scss @@ -10,6 +10,12 @@ * NOTE: Items are in no particular order */ +.user-select-none { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} .u-flex { display: -webkit-box; display: -webkit-flex; @@ -109,12 +115,45 @@ -ms-flex-line-pack: distribute; align-content: space-around; } +.margin-zero { + margin: 0 !important; +} .margin-bottom-zero { margin-bottom: 0 !important; } .margin-top-zero { margin-top: 0 !important; } +.margin-left-zero { + margin-left: 0 !important; +} +.margin-right-zero { + margin-right: 0 !important; +} +.padding-zero { + padding: 0 !important; +} +.padding-bottom-zero { + padding-bottom: 0 !important; +} +.padding-top-zero { + padding-top: 0 !important; +} +.padding-left-zero { + padding-left: 0 !important; +} +.padding-right-zero { + padding-right: 0 !important; +} +span.text-color-success { + color: #4ed8a0; +} +span.text-color-warning { + color: #7a65f2; +} +span.text-color-danger { + color: #f95f53; +} @font-face { font-family: 'icomoon'; font-style: normal; @@ -434,19 +473,724 @@ .icon.stackoverflow:before { content: "\ead0"; } -body { - padding-bottom: 30px; - font-family: 'Roboto', Helvetica, Arial, Tahoma, Verdana, sans-serif; - color: #676978; +body, +html { + position: absolute; + width: 100%; + height: 100%; + overflow: hidden; +} +.influx-layout-styles { + position: absolute; +} +.ix-app, +.ix-sidebar, +.ix-app-wrapper { + height: 100%; +} +.ix-app { + position: absolute; + top: 0; + left: 0; + z-index: 2; + width: 100%; +} +.ix-sidebar { + position: absolute; + top: 0; + left: 0; + z-index: 10; + width: 100%; + height: 60px; + background: #545667; + background: -webkit-linear-gradient(left, #545667 0%, #31313d 100%); + background: -webkit-gradient(linear, left top, right top, from(#545667), to(#31313d)); + background: -o-linear-gradient(left, #545667 0%, #31313d 100%); + background: linear-gradient(to right, #545667 0%, #31313d 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); +} +.ix-app-wrapper { + position: absolute; + top: 120px; + left: 0; + z-index: 3; + width: 100%; + height: -webkit-calc(100% - 60px ); + height: calc(100% - 60px ); + overflow: auto; + background: #202028; + background: -webkit-linear-gradient(top, #202028 0%, #0f0e15 100%); + background: -webkit-gradient(linear, left top, left bottom, from(#202028), to(#0f0e15)); + background: -o-linear-gradient(top, #202028 0%, #0f0e15 100%); + background: linear-gradient(to bottom, #202028 0%, #0f0e15 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=0); +} +.ix-app-wrapper::-webkit-scrollbar { + width: 14px; + height: 14px; +} +.ix-app-wrapper::-webkit-scrollbar-button { + background-color: #202028; +} +.ix-app-wrapper::-webkit-scrollbar-track { + background-color: #202028; +} +.ix-app-wrapper::-webkit-scrollbar-track-piece { + background: #202028; +} +.ix-app-wrapper::-webkit-scrollbar-thumb { + background-color: #22adf6; + border: 4px solid #202028; + border-radius: 7px; +} +.ix-app-wrapper::-webkit-scrollbar-corner { + background-color: #202028; +} +.ix-app-wrapper::-webkit-scrollbar-resizer { + background-color: #22adf6; +} +.ix-app-heading { + position: absolute; + top: 60px; + left: 0; + z-index: 5; + width: 100%; + height: 60px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background-color: #0f0e15; +} +.ix-app-heading:after { + position: absolute; + top: 100%; + left: 0; + display: block; + width: 100%; + height: 6px; + content: ''; + background: rgba(41, 41, 51, .02); + background: -webkit-linear-gradient(top, rgba(41, 41, 51, .02) 0%, rgba(41, 41, 51, 0) 100%); + background: -webkit-gradient(linear, left top, left bottom, from(rgba(41, 41, 51, .02)), to(rgba(41, 41, 51, 0))); + background: -o-linear-gradient(top, rgba(41, 41, 51, .02) 0%, rgba(41, 41, 51, 0) 100%); + background: linear-gradient(to bottom, rgba(41, 41, 51, .02) 0%, rgba(41, 41, 51, 0) 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=0); +} +.ix-app-heading--container { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + width: 100%; + height: 60px; + + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: stretch; + -webkit-align-items: stretch; + -ms-flex-align: stretch; + align-items: stretch; +} +.ix-app-heading .app-heading-section-styles { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; +} +.ix-app-heading--left { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + text-align: left; + + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} +.ix-app-heading--left > * { + margin-right: 8px !important; +} +.ix-app-heading--right { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + text-align: right; + + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; +} +.ix-app-heading--right > * { + margin-left: 4px !important; +} +.ix-app-heading.dark-theme { + color: #d4d7dd; + background-color: #0f0e15; +} +.ix-app-title { + font-size: 21px; + font-weight: 400; + color: #eeeff2; + text-transform: uppercase; + letter-spacing: 1px; +} +.ix-app-splash { + position: absolute; + top: 60px; + left: 0; + z-index: 3; + width: 100%; + height: -webkit-calc(100% - 60px ); + height: calc(100% - 60px ); + overflow: auto; + background-repeat: no-repeat; + background-position: center center; + -webkit-background-size: cover; + background-size: cover; +} +.ix-app-splash::-webkit-scrollbar { + width: 14px; + height: 14px; +} +.ix-app-splash::-webkit-scrollbar-button { background-color: #fafafc; +} +.ix-app-splash::-webkit-scrollbar-track { + background-color: #fafafc; +} +.ix-app-splash::-webkit-scrollbar-track-piece { + background: #fafafc; +} +.ix-app-splash::-webkit-scrollbar-thumb { + background-color: #22adf6; + border: 4px solid #fafafc; + border-radius: 7px; +} +.ix-app-splash::-webkit-scrollbar-corner { + background-color: #fafafc; +} +.ix-app-splash::-webkit-scrollbar-resizer { + background-color: #22adf6; +} +.ix-sidebar .navbar-toggle { + width: 60px; + height: 60px; + padding: 0; + margin: 0 7px 0 0; + background-color: transparent; + border: 0; +} +.ix-sidebar .navbar-toggle .icon-bar { + position: absolute; + top: 50%; + left: 50%; + width: 24px; + height: 2px; + margin: 0 !important; + background-color: #a4a8b6; + opacity: 0; + -webkit-transition: top .25s ease, opacity .25s ease, -webkit-transform .25s ease .25s, background-color .25s ease; + -o-transition: top .25s ease, opacity .25s ease, -o-transform .25s ease .25s, background-color .25s ease; + transition: top .25s ease, opacity .25s ease, transform .25s ease .25s, background-color .25s ease; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + -o-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} +.ix-sidebar .navbar-toggle .icon-bar:nth-of-type(2) { + opacity: 1; + -webkit-transform: translate(-50%, -50%) rotate(45deg); + -ms-transform: translate(-50%, -50%) rotate(45deg); + -o-transform: translate(-50%, -50%) rotate(45deg); + transform: translate(-50%, -50%) rotate(45deg); +} +.ix-sidebar .navbar-toggle .icon-bar:nth-of-type(3) { + opacity: 1; + -webkit-transform: translate(-50%, -50%) rotate(-45deg); + -ms-transform: translate(-50%, -50%) rotate(-45deg); + -o-transform: translate(-50%, -50%) rotate(-45deg); + transform: translate(-50%, -50%) rotate(-45deg); +} +.ix-sidebar .navbar-toggle.collapsed .icon-bar { + opacity: 1; + -webkit-transition: top .25s ease .25s, opacity .25s ease, -webkit-transform .25s ease, background-color .25s ease; + -o-transition: top .25s ease .25s, opacity .25s ease, -o-transform .25s ease, background-color .25s ease; + transition: top .25s ease .25s, opacity .25s ease, transform .25s ease, background-color .25s ease; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + -o-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} +.ix-sidebar .navbar-toggle.collapsed .icon-bar:nth-of-type(2) { + top: -webkit-calc(50% - 8px); + top: calc(50% - 8px); + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + -o-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} +.ix-sidebar .navbar-toggle.collapsed .icon-bar:nth-of-type(3) { + top: -webkit-calc(50% + 8px); + top: calc(50% + 8px); + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + -o-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} +.ix-sidebar .navbar-toggle:hover { + background-color: transparent; +} +.ix-sidebar .navbar-toggle:hover .icon-bar { + background-color: #fff; +} +.ix-sidebar .navbar-brand { + position: relative; + width: 60px; + height: 60px; + padding: 0; +} +.ix-sidebar .navbar-brand span.icon { + position: absolute; + top: 50%; + left: 50%; + font-size: 26px; + color: #676978; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + -o-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} +.ix-sidebar .navbar-brand a:link, +.ix-sidebar .navbar-brand a:active, +.ix-sidebar .navbar-brand a:visited { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + color: #676978; + background-color: #eeeff2; + -webkit-transition: background-color .25s ease; + -o-transition: background-color .25s ease; + transition: background-color .25s ease; +} +.ix-sidebar .navbar-brand a:hover { + cursor: pointer; + background-color: #fafafc; +} +.ix-sidebar .navbar-brand a:hover span.icon { + color: #8e91a1; +} +.ix-sidebar .navbar-collapse { + position: absolute; + top: 60px; + left: 15px; + width: 100%; + background: #22adf6; + background: -webkit-linear-gradient(left, #22adf6 0%, #9394ff 100%); + background: -webkit-gradient(linear, left top, right top, from(#22adf6), to(#9394ff)); + background: -o-linear-gradient(left, #22adf6 0%, #9394ff 100%); + background: linear-gradient(to right, #22adf6 0%, #9394ff 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); + border: 0; +} +.ix-sidebar .navbar-nav { + display: block; + width: -webkit-calc(100% + 30px) !important; + width: calc(100% + 30px) !important; + max-height: 270px; + margin: 0 -15px; + overflow: auto; +} +.ix-sidebar .navbar-nav::-webkit-scrollbar { + width: 14px; + height: 14px; +} +.ix-sidebar .navbar-nav::-webkit-scrollbar-button { + background-color: #9394ff; +} +.ix-sidebar .navbar-nav::-webkit-scrollbar-track { + background-color: #9394ff; +} +.ix-sidebar .navbar-nav::-webkit-scrollbar-track-piece { + background: #9394ff; +} +.ix-sidebar .navbar-nav::-webkit-scrollbar-thumb { + background-color: #6bdfff; + border: 4px solid #9394ff; + border-radius: 7px; +} +.ix-sidebar .navbar-nav::-webkit-scrollbar-corner { + background-color: #9394ff; +} +.ix-sidebar .navbar-nav::-webkit-scrollbar-resizer { + background-color: #6bdfff; +} +.ix-sidebar .navbar-nav > li > a:link, +.ix-sidebar .navbar-nav > li > a:active, +.ix-sidebar .navbar-nav > li > a:visited, +.ix-sidebar .navbar-nav > li > a.dropdown-toggle { + position: relative; + padding-left: 60px; + font-family: 'Roboto', Helvetica, Arial, Tahoma, Verdana, sans-serif !important; + color: #bef0ff; + background-color: transparent; + -webkit-transition: background-color .25s ease, color .25s ease; + -o-transition: background-color .25s ease, color .25s ease; + transition: background-color .25s ease, color .25s ease; +} +.ix-sidebar .navbar-nav > li > a:link:before, +.ix-sidebar .navbar-nav > li > a:active:before, +.ix-sidebar .navbar-nav > li > a:visited:before, +.ix-sidebar .navbar-nav > li > a.dropdown-toggle:before { + display: none; + font-family: 'icomoon' !important; +} +.ix-sidebar .navbar-nav > li > a:hover, +.ix-sidebar .navbar-nav > li > a.dropdown-toggle:hover { + color: #fff; + background: rgba(69, 145, 237, .5); + background: -webkit-linear-gradient(left, rgba(69, 145, 237, .5) 0%, #9394ff 100%); + background: -webkit-gradient(linear, left top, right top, from(rgba(69, 145, 237, .5)), to(#9394ff)); + background: -o-linear-gradient(left, rgba(69, 145, 237, .5) 0%, #9394ff 100%); + background: linear-gradient(to right, rgba(69, 145, 237, .5) 0%, #9394ff 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); +} +.ix-sidebar .navbar-nav > li > a.dropdown-toggle:after { + position: absolute; + top: 50%; + left: 30px; + font-family: 'icomoon' !important; + color: #bef0ff; + content: "\e902"; + -webkit-transition: color .25s ease, + -webkit-transform .25s ease; + -o-transition: color .25s ease, + -o-transform .25s ease; + transition: color .25s ease, + transform .25s ease; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + -o-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} +.ix-sidebar .navbar-nav > li > a.dropdown-toggle:hover:after { + color: #fff; +} +.ix-sidebar .navbar-nav > li.open > a.dropdown-toggle { + color: #fff; + background: #4591ed; + background: -webkit-linear-gradient(left, #4591ed 0%, #9394ff 100%); + background: -webkit-gradient(linear, left top, right top, from(#4591ed), to(#9394ff)); + background: -o-linear-gradient(left, #4591ed 0%, #9394ff 100%); + background: linear-gradient(to right, #4591ed 0%, #9394ff 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); +} +.ix-sidebar .navbar-nav > li.open > a.dropdown-toggle:after { + color: #fff; + -webkit-transform: translate(-50%, -50%) rotate(-90deg); + -ms-transform: translate(-50%, -50%) rotate(-90deg); + -o-transform: translate(-50%, -50%) rotate(-90deg); + transform: translate(-50%, -50%) rotate(-90deg); +} +.ix-sidebar .navbar-nav .dropdown-menu { + padding: 0; + background: #4591ed; + background: -webkit-linear-gradient(left, #4591ed 0%, #9394ff 100%); + background: -webkit-gradient(linear, left top, right top, from(#4591ed), to(#9394ff)); + background: -o-linear-gradient(left, #4591ed 0%, #9394ff 100%); + background: linear-gradient(to right, #4591ed 0%, #9394ff 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); + border-radius: 0; +} +.ix-sidebar .navbar-nav .dropdown-menu li { + padding: 0; + margin: 0; +} +.ix-sidebar .navbar-nav .dropdown-menu li > a { + padding: 4px 15px 4px 60px; + color: #bef0ff; + -webkit-transition: color .25s ease, background-color .25s ease; + -o-transition: color .25s ease, background-color .25s ease; + transition: color .25s ease, background-color .25s ease; +} +.ix-sidebar .navbar-nav .dropdown-menu li > a:hover { + color: #fff; + background: rgba(50, 107, 186, .5); + background: -webkit-linear-gradient(left, rgba(50, 107, 186, .5) 0%, #9394ff 100%); + background: -webkit-gradient(linear, left top, right top, from(rgba(50, 107, 186, .5)), to(#9394ff)); + background: -o-linear-gradient(left, rgba(50, 107, 186, .5) 0%, #9394ff 100%); + background: linear-gradient(to right, rgba(50, 107, 186, .5) 0%, #9394ff 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); +} +.ix-sidebar .navbar-nav .dropdown-menu li.active > a { + color: #fff; + background: #326bba; + background: -webkit-linear-gradient(left, #326bba 0%, #9394ff 100%); + background: -webkit-gradient(linear, left top, right top, from(#326bba), to(#9394ff)); + background: -o-linear-gradient(left, #326bba 0%, #9394ff 100%); + background: linear-gradient(to right, #326bba 0%, #9394ff 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); +} +.ix-sidebar .navbar-nav .dropdown-menu .dropdown-header { + position: relative; + padding: 0 0 8px 60px !important; + margin: 0 0 8px 0 !important; + color: #bef0ff; + text-transform: uppercase; +} +.ix-sidebar .navbar-nav .dropdown-menu .dropdown-header:after { + position: absolute; + bottom: 0; + left: 60px; + width: -webkit-calc(100% - 60px - 15px); + width: calc(100% - 60px - 15px); + height: 2px; + content: ''; + background: #22adf6; + background: -webkit-linear-gradient(left, #22adf6 0%, #9394ff 100%); + background: -webkit-gradient(linear, left top, right top, from(#22adf6), to(#9394ff)); + background: -o-linear-gradient(left, #22adf6 0%, #9394ff 100%); + background: linear-gradient(to right, #22adf6 0%, #9394ff 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); +} +@media (min-width: 768px) { + .ix-sidebar { + top: 0; + left: 0; + width: 60px; + height: 100%; + background: #545667; + background: -webkit-linear-gradient(top, #545667 0%, #31313d 100%); + background: -webkit-gradient(linear, left top, left bottom, from(#545667), to(#31313d)); + background: -o-linear-gradient(top, #545667 0%, #31313d 100%); + background: linear-gradient(to bottom, #545667 0%, #31313d 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=0); + } + .ix-sidebar .container { + position: absolute; + top: 0; + left: 0; + width: 100% !important; + height: 100% !important; + padding: 0 !important; + margin: 0 !important; + } + .ix-sidebar .navbar-nav { + width: 60px; + overflow: visible; + } + .ix-sidebar .navbar-nav > li { + width: 60px; + height: 60px; + } + .ix-sidebar .navbar-nav > li > a:link, + .ix-sidebar .navbar-nav > li > a:active, + .ix-sidebar .navbar-nav > li > a:visited, + .ix-sidebar .navbar-nav > li > a.dropdown-toggle { + position: relative; + width: 60px; + height: 60px; + padding: 0 !important; + font-family: 'Roboto', Helvetica, Arial, Tahoma, Verdana, sans-serif !important; + font-size: 0 !important; + color: #999dab; + background-color: transparent; + -webkit-transition: background-color .25s ease, color .25s ease, text-shadow .25s ease; + -o-transition: background-color .25s ease, color .25s ease, text-shadow .25s ease; + transition: background-color .25s ease, color .25s ease, text-shadow .25s ease; + } + .ix-sidebar .navbar-nav > li > a:link:before, + .ix-sidebar .navbar-nav > li > a:active:before, + .ix-sidebar .navbar-nav > li > a:visited:before, + .ix-sidebar .navbar-nav > li > a.dropdown-toggle:before { + position: absolute; + top: 50%; + left: 50%; + display: block; + font-size: 26px !important; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + -o-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + } + .ix-sidebar .navbar-nav > li > a:hover, + .ix-sidebar .navbar-nav > li > a.dropdown-toggle:hover { + color: #fff; + cursor: pointer; + background-color: rgba(49, 49, 61, .5); + background-image: none; + } + .ix-sidebar .navbar-nav > li > a.dropdown-toggle:after { + display: none; + content: none; + } + .ix-sidebar .navbar-nav > li.active > a, + .ix-sidebar .navbar-nav > li.active > a.dropdown-toggle { + color: #fff; + cursor: pointer; + background-color: rgba(49, 49, 61, .5); + background-image: none; + } + .ix-sidebar .navbar-nav > li.active > a:before, + .ix-sidebar .navbar-nav > li.active > a.dropdown-toggle:before { + text-shadow: 0 0 9px #00c9ff, 0 0 16px #22adf6, 0 0 20px #4591ed; + } + .ix-sidebar .navbar-nav > li.open > a.dropdown-toggle { + color: #fff; + background-color: #31313d; + background-image: none; + } + .ix-sidebar .navbar-nav .dropdown-menu { + top: 0; + left: 60px; + width: auto !important; + background: #22adf6 !important; + background: -webkit-linear-gradient(top, #22adf6 0%, #9394ff 100%) !important; + background: -webkit-gradient(linear, left top, left bottom, from(#22adf6), to(#9394ff)) !important; + background: -o-linear-gradient(top, #22adf6 0%, #9394ff 100%) !important; + background: linear-gradient(to bottom, #22adf6 0%, #9394ff 100%) !important; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=0) !important; + border-radius: 0 4px 4px 0 !important; + } + .ix-sidebar .navbar-nav .dropdown-menu > li { + display: block; + padding: 0; + } + .ix-sidebar .navbar-nav .dropdown-menu > li > a { + padding: 4px 28px !important; + font-weight: 500; + color: #bef0ff; + border-radius: 0; + -webkit-transition: color .25s ease, background-color .25s ease; + -o-transition: color .25s ease, background-color .25s ease; + transition: color .25s ease, background-color .25s ease; + } + .ix-sidebar .navbar-nav .dropdown-menu > li > a:hover { + color: #fff; + background: #4591ed !important; + background: -webkit-linear-gradient(left, #4591ed 0%, rgba(69, 145, 237, 0) 100%) !important; + background: -webkit-gradient(linear, left top, right top, from(#4591ed), to(rgba(69, 145, 237, 0))) !important; + background: -o-linear-gradient(left, #4591ed 0%, rgba(69, 145, 237, 0) 100%) !important; + background: linear-gradient(to right, #4591ed 0%, rgba(69, 145, 237, 0) 100%) !important; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1) !important; + } + .ix-sidebar .navbar-nav .dropdown-menu > li.active > a { + color: #fff; + background: #326bba !important; + background: -webkit-linear-gradient(left, #326bba 0%, rgba(50, 107, 186, 0) 100%) !important; + background: -webkit-gradient(linear, left top, right top, from(#326bba), to(rgba(50, 107, 186, 0))) !important; + background: -o-linear-gradient(left, #326bba 0%, rgba(50, 107, 186, 0) 100%) !important; + background: linear-gradient(to right, #326bba 0%, rgba(50, 107, 186, 0) 100%) !important; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1) !important; + } + .ix-sidebar .navbar-nav .dropdown-menu > li:first-child > a { + border-top-right-radius: 4px !important; + } + .ix-sidebar .navbar-nav .dropdown-menu > li:last-child > a { + border-bottom-right-radius: 4px !important; + } + .ix-sidebar .navbar-nav .dropdown-menu .dropdown-header { + padding-right: 28px !important; + padding-left: 28px !important; + } + .ix-sidebar .navbar-nav .dropdown-menu .dropdown-header:after { + position: absolute; + bottom: 0; + left: 28px; + width: -webkit-calc(100% - 56px ); + width: calc(100% - 56px ); + height: 2px; + content: ''; + background-color: rgba(0, 201, 255, .5); + background-image: none; + } + .ix-sidebar .navbar-collapse { + left: 0; + max-height: -webkit-calc(100% - 60px ); + max-height: calc(100% - 60px ); + background-color: transparent; + background-image: none; + } + .ix-app-wrapper { + top: 60px; + left: 60px; + width: -webkit-calc(100% - 60px ); + width: calc(100% - 60px ); + height: -webkit-calc(100% - 60px ); + height: calc(100% - 60px ); + } + .ix-app-heading { + top: 0; + left: 60px; + width: -webkit-calc(100% - 60px ); + width: calc(100% - 60px ); + padding-right: 14px; + } + .ix-app-splash { + top: 0; + left: 60px; + width: -webkit-calc(100% - 60px ); + width: calc(100% - 60px ); + height: 100%; + } +} +.navbar-label { + position: relative; + height: 60px; + padding: 0 28px !important; + font-size: 18px; + font-weight: 400; + line-height: 60px; + color: #fff; + text-transform: uppercase; + white-space: nowrap; + background: none; + border-top-right-radius: 4px; +} +.navbar-label:after { + position: absolute; + top: 0; + left: 0; + display: block; + width: 60px; + height: 60px; + content: ''; + border-color: transparent transparent transparent #31313d; + border-style: solid; + border-width: 30px; + -webkit-transform: scale(.5, 1) translateX(-50%); + -ms-transform: scale(.5, 1) translateX(-50%); + -o-transform: scale(.5, 1) translateX(-50%); + transform: scale(.5, 1) translateX(-50%); +} +body { + font-family: 'Roboto', Helvetica, Arial, Tahoma, Verdana, sans-serif; + color: #bec2cc; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } -body.fixed-nav-offset { - padding-top: 60px; - /* Offset for navbar */ -} a:link, a:visited { font-weight: 700; @@ -487,638 +1231,2408 @@ a:active.link-warning { } ::-moz-selection { color: #fff; - background-color: #22ADF6; + background-color: #22adf6; /* WebKit/Blink Browsers */ } ::selection { color: #fff; - background-color: #22ADF6; + background-color: #22adf6; /* WebKit/Blink Browsers */ } ::-moz-selection { color: #fff; - background-color: #22ADF6; + background-color: #22adf6; /* Gecko Browsers */ } -.btn { - padding: 8px 17px; - font-weight: 700; - text-decoration: none !important; +.type-base-styles { + display: inline-block; + width: 100%; + margin: 8px 0 .55em 0; +} +.type-small-styles small { + font-size: .8em; + font-weight: inherit; + color: #bec2cc; +} +p { + display: inline-block; + width: 100%; + margin: 8px 0 .55em 0; + font-size: 14.5px; + font-weight: 400; + line-height: 1.55em; +} +p b, +p strong { + font-weight: 900; +} +p small { + font-size: 12.5px; + font-weight: 500; + color: #bec2cc; +} +h1 { + display: inline-block; + width: 100%; + margin: 8px 0 .55em 0; + font-size: 35px; + font-weight: 300; + line-height: 1.25em; + letter-spacing: -1px; +} +h1 small { + font-size: .8em; + font-weight: inherit; + color: #bec2cc; +} +h2 { + display: inline-block; + width: 100%; + margin: 8px 0 .55em 0; + font-size: 30px; + font-weight: 300; + line-height: 1.25em; + letter-spacing: -1px; +} +h2 small { + font-size: .8em; + font-weight: inherit; + color: #bec2cc; +} +h3 { + display: inline-block; + width: 100%; + margin: 8px 0 .55em 0; + font-size: 25px; + font-weight: 400; + line-height: 1.25em; +} +h3 small { + font-size: .8em; + font-weight: inherit; + color: #bec2cc; +} +h3 small { + font-weight: 400; +} +h4 { + display: inline-block; + width: 100%; + margin: 8px 0 .55em 0; + font-size: 21px; + font-weight: 400; + line-height: 1.25em; +} +h4 small { + font-size: .8em; + font-weight: inherit; + color: #bec2cc; +} +h4 small { + font-weight: 400; +} +h5 { + display: inline-block; + width: 100%; + margin: 8px 0 .55em 0; + font-size: 18px; + font-weight: 600; + line-height: 1.25em; +} +h5 small { + font-size: .8em; + font-weight: inherit; + color: #bec2cc; +} +h5 small { + font-weight: 500; +} +h6 { + display: inline-block; + width: 100%; + margin: 8px 0 .55em 0; + font-size: 14.5px; + font-weight: 900; + line-height: 1.25em; +} +h6 small { + font-size: .8em; + font-weight: inherit; + color: #bec2cc; +} +h6 small { + font-weight: 500; +} +ol, +ul { + display: inline-block; + width: 100%; + padding-left: 16px; + margin: 8px 0 .55em 0; + font-size: 14.5px; + font-weight: 500; + line-height: 1.55em; +} +li { + padding-left: 8px; + margin: 0 0 8px 0; +} +li:last-child { + margin-bottom: 0; +} +blockquote { + position: relative; + display: inline-block; + width: 100%; + padding: 8px 16px; + margin: 8px 0 .55em 0; + font-size: 14.5px; + font-style: italic; + font-weight: 400; + line-height: 1.55em; + color: #bec2cc; + border: 0; +} +blockquote:before, +blockquote:after { + position: absolute; + width: 64px; + height: 32px; + content: ''; + border-color: #383846; border-style: solid; - border-width: 2px; +} +blockquote:before { + top: 0; + left: 0; + border-width: 2px 0 0 2px; +} +blockquote:after { + right: 0; + bottom: 0; + border-width: 0 2px 2px 0; +} +blockquote b, +blockquote strong { + font-weight: 900; +} +hr { + height: 2px; + margin: 16px 0 32px 0; + background-color: #383846; + border: 0; + border-radius: 1px; +} +hr.dark { + background-color: #292933; +} +b, +strong { + font-weight: 900; +} +mark { + padding: 2px 4px; + color: #7ce490; + background-color: #108174; + border-radius: 3px; +} +::-moz-selection { + color: #fff; + background-color: #22adf6; +} +::selection { + color: #fff; + background-color: #22adf6; +} +::-moz-selection { + color: #fff; + background-color: #22adf6; +} +br { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.btn, +a.btn, +div.btn, +button.btn, +input.btn { + position: relative; + height: 38px; + padding: 0 14px; + margin: 0; + font-size: 15px; + font-weight: 700; + line-height: 38px; + text-decoration: none; + border-style: solid; + border-radius: 4px; outline: none !important; -webkit-box-shadow: none; box-shadow: none; - -webkit-transition: background-color .25s ease, color .25s ease, border-color .25s ease !important; - -o-transition: background-color .25s ease, color .25s ease, border-color .25s ease !important; - transition: background-color .25s ease, color .25s ease, border-color .25s ease !important; + -webkit-transition: background-color .25s ease, color .25s ease, border-color .25s ease, opacity .3s ease; + -o-transition: background-color .25s ease, color .25s ease, border-color .25s ease, opacity .3s ease; + transition: background-color .25s ease, color .25s ease, border-color .25s ease, opacity .3s ease; } -.btn:hover, -.btn:focus { - cursor: pointer; +.btn > .icon, +a.btn > .icon, +div.btn > .icon, +button.btn > .icon, +input.btn > .icon { + position: relative; + top: 0; + margin: 0 4px 0 0; + font-size: 1.125em; +} +.btn-square, +a.btn-square, +div.btn-square, +button.btn-square, +input.btn-square { + width: 38px; + padding: 0 !important; +} +.btn-square .icon, +a.btn-square .icon, +div.btn-square .icon, +button.btn-square .icon, +input.btn-square .icon { + margin: 0 !important; +} +.btn-xs, +a.btn-xs, +div.btn-xs, +button.btn-xs, +input.btn-xs { + height: 22px; + padding: 0 7px; + font-size: 12px; + line-height: 22px; + border-radius: 3px; +} +.btn-xs > .icon, +a.btn-xs > .icon, +div.btn-xs > .icon, +button.btn-xs > .icon, +input.btn-xs > .icon { + top: 0; + margin-right: 3px; +} +.btn-xs.btn-square, +a.btn-xs.btn-square, +div.btn-xs.btn-square, +button.btn-xs.btn-square, +input.btn-xs.btn-square { + width: 22px; +} +.btn-sm, +a.btn-sm, +div.btn-sm, +button.btn-sm, +input.btn-sm { + height: 30px; + padding: 0 11px; + font-size: 13px; + line-height: 30px; + border-radius: 4px; +} +.btn-sm > .icon, +a.btn-sm > .icon, +div.btn-sm > .icon, +button.btn-sm > .icon, +input.btn-sm > .icon { + top: 0; + margin-right: 4px; +} +.btn-sm.btn-square, +a.btn-sm.btn-square, +div.btn-sm.btn-square, +button.btn-sm.btn-square, +input.btn-sm.btn-square { + width: 30px; +} +.btn-md, +a.btn-md, +div.btn-md, +button.btn-md, +input.btn-md { + height: 38px; + padding: 0 14px; + font-size: 15px; + line-height: 38px; + border-radius: 4px; +} +.btn-md > .icon, +a.btn-md > .icon, +div.btn-md > .icon, +button.btn-md > .icon, +input.btn-md > .icon { + top: 0; + margin-right: 6px; +} +.btn-md.btn-square, +a.btn-md.btn-square, +div.btn-md.btn-square, +button.btn-md.btn-square, +input.btn-md.btn-square { + width: 38px; +} +.btn-lg, +a.btn-lg, +div.btn-lg, +button.btn-lg, +input.btn-lg { + height: 46px; + padding: 0 17px; + font-size: 17px; + line-height: 46px; + border-radius: 4px; +} +.btn-lg > .icon, +a.btn-lg > .icon, +div.btn-lg > .icon, +button.btn-lg > .icon, +input.btn-lg > .icon { + top: -.5px; + margin-right: 8px; +} +.btn-lg.btn-square, +a.btn-lg.btn-square, +div.btn-lg.btn-square, +button.btn-lg.btn-square, +input.btn-lg.btn-square { + width: 46px; } .btn-group-xs > .btn, .btn.btn-xs { - padding: 2px 9px; + height: 22px; + padding: 0 7px; + font-size: 12px; + line-height: 22px; } .btn-group-sm > .btn, .btn.btn-sm { - padding: 4px 13px; + height: 30px; + padding: 0 11px; + font-size: 13px; + line-height: 30px; } .btn-group-lg > .btn, .btn.btn-lg { - padding: 13px 24px; + height: 46px; + padding: 0 17px; + font-size: 17px; + line-height: 46px; } -.btn-default { - color: #fff !important; - /* Default Style */ - background-color: #a4a8b6; - border-color: #a4a8b6; - /* Disabled Styles */ -} -.btn-default:hover, -.btn-default:hover:focus { - color: #fff !important; - /* Hover + Focus + Active all the same */ - background-color: #bec2cc; - border-color: #bec2cc; -} -.btn-default:active, -.btn-default:active:hover, -.btn-default:active:focus, -.btn-default.active { - color: #fff !important; - background-color: #c6cad3; - border-color: #bec2cc; - -webkit-box-shadow: none; - box-shadow: none; -} -.btn-default:focus { - background-color: #a4a8b6; - border-color: #a4a8b6; -} -.btn-default.disabled, -.btn-default[disabled], -fieldset[disabled] .btn-default { - color: #fafafc !important; - background-color: #e7e8eb; - border-color: #e7e8eb; - opacity: 1; -} -.btn-default.disabled:hover, -.btn-default[disabled]:hover, -fieldset[disabled] .btn-default:hover, -.btn-default.disabled:active, -.btn-default[disabled]:active, -fieldset[disabled] .btn-default:active, -.btn-default.disabled:focus, -.btn-default[disabled]:focus, -fieldset[disabled] .btn-default:focus, -.btn-default.disabled.active, -.btn-default[disabled].active, -fieldset[disabled] .btn-default.active, -.btn-default.disabled:active:focus, -.btn-default[disabled]:active:focus, -fieldset[disabled] .btn-default:active:focus { - color: #fafafc !important; - cursor: not-allowed; - background-color: #e7e8eb; - border-color: #e7e8eb; -} -.open .btn-default.dropdown-toggle { - color: #fff !important; - background-color: #c6cad3 !important; - border-color: #bec2cc !important; -} -.btn-primary { - color: #fff !important; - /* Default Style */ - background-color: #22adf6; - border-color: #22adf6; - /* Disabled Styles */ -} -.btn-primary:hover, -.btn-primary:hover:focus { - color: #fff !important; - /* Hover + Focus + Active all the same */ - background-color: #00c9ff; - border-color: #00c9ff; -} -.btn-primary:active, -.btn-primary:active:hover, -.btn-primary:active:focus, -.btn-primary.active { - color: #fff !important; - background-color: #6bdfff; - border-color: #00c9ff; - -webkit-box-shadow: none; - box-shadow: none; -} -.btn-primary:focus { - background-color: #22adf6; - border-color: #22adf6; -} -.btn-primary.disabled, -.btn-primary[disabled], -fieldset[disabled] .btn-primary { - color: #fafafc !important; - background-color: #c9e0ed; - border-color: #c9e0ed; - opacity: 1; -} -.btn-primary.disabled:hover, -.btn-primary[disabled]:hover, -fieldset[disabled] .btn-primary:hover, -.btn-primary.disabled:active, -.btn-primary[disabled]:active, -fieldset[disabled] .btn-primary:active, -.btn-primary.disabled:focus, -.btn-primary[disabled]:focus, -fieldset[disabled] .btn-primary:focus, -.btn-primary.disabled.active, -.btn-primary[disabled].active, -fieldset[disabled] .btn-primary.active, -.btn-primary.disabled:active:focus, -.btn-primary[disabled]:active:focus, -fieldset[disabled] .btn-primary:active:focus { - color: #fafafc !important; - cursor: not-allowed; - background-color: #c9e0ed; - border-color: #c9e0ed; -} -.open .btn-primary.dropdown-toggle { - color: #fff !important; - background-color: #6bdfff !important; - border-color: #00c9ff !important; -} -.btn-success { - color: #fff !important; - /* Default Style */ - background-color: #4ed8a0; - border-color: #4ed8a0; - /* Disabled Styles */ -} -.btn-success:hover, -.btn-success:hover:focus { - color: #fff !important; - /* Hover + Focus + Active all the same */ - background-color: #7ce490; - border-color: #7ce490; -} -.btn-success:active, -.btn-success:active:hover, -.btn-success:active:focus, -.btn-success.active { - color: #fff !important; - background-color: #a5f3b4; - border-color: #7ce490; - -webkit-box-shadow: none; - box-shadow: none; -} -.btn-success:focus { - background-color: #4ed8a0; - border-color: #4ed8a0; -} -.btn-success.disabled, -.btn-success[disabled], -fieldset[disabled] .btn-success { - color: #fafafc !important; - background-color: #cfe6e1; - border-color: #cfe6e1; - opacity: 1; -} -.btn-success.disabled:hover, -.btn-success[disabled]:hover, -fieldset[disabled] .btn-success:hover, -.btn-success.disabled:active, -.btn-success[disabled]:active, -fieldset[disabled] .btn-success:active, -.btn-success.disabled:focus, -.btn-success[disabled]:focus, -fieldset[disabled] .btn-success:focus, -.btn-success.disabled.active, -.btn-success[disabled].active, -fieldset[disabled] .btn-success.active, -.btn-success.disabled:active:focus, -.btn-success[disabled]:active:focus, -fieldset[disabled] .btn-success:active:focus { - color: #fafafc !important; - cursor: not-allowed; - background-color: #cfe6e1; - border-color: #cfe6e1; -} -.open .btn-success.dropdown-toggle { - color: #fff !important; - background-color: #a5f3b4 !important; - border-color: #7ce490 !important; -} -.btn-info { - color: #bec2cc !important; - /* Default Style */ +a.btn-default, +div.btn-default, +button.btn-default, +input.btn-default { + color: #c6cad3; + text-shadow: none; background-color: #383846; - border-color: #383846; - /* Disabled Styles */ + border-width: 0; } -.btn-info:hover, -.btn-info:hover:focus { - color: #fff !important; - /* Hover + Focus + Active all the same */ +a.btn-default:focus, +div.btn-default:focus, +button.btn-default:focus, +input.btn-default:focus { + color: #c6cad3; + background-color: #383846; + -webkit-box-shadow: none; + box-shadow: none; +} +a.btn-default:hover, +div.btn-default:hover, +button.btn-default:hover, +input.btn-default:hover, +a.btn-default:focus:hover, +div.btn-default:focus:hover, +button.btn-default:focus:hover, +input.btn-default:focus:hover { + color: #f6f6f8; + cursor: pointer; background-color: #434453; - border-color: #434453; + -webkit-box-shadow: none; + box-shadow: none; } -.btn-info:active, -.btn-info:active:hover, -.btn-info:active:focus, -.btn-info.active { - color: #fff !important; +a.btn-default.active, +div.btn-default.active, +button.btn-default.active, +input.btn-default.active, +a.btn-default.active:hover, +div.btn-default.active:hover, +button.btn-default.active:hover, +input.btn-default.active:hover, +a.btn-default:active, +div.btn-default:active, +button.btn-default:active, +input.btn-default:active, +a.btn-default:active:hover, +div.btn-default:active:hover, +button.btn-default:active:hover, +input.btn-default:active:hover, +a.btn-default:focus:active, +div.btn-default:focus:active, +button.btn-default:focus:active, +input.btn-default:focus:active, +a.btn-default:focus:active:hover, +div.btn-default:focus:active:hover, +button.btn-default:focus:active:hover, +input.btn-default:focus:active:hover, +.dropdown.open a.btn-default.dropdown-toggle, +.dropdown.open div.btn-default.dropdown-toggle, +.dropdown.open button.btn-default.dropdown-toggle, +.dropdown.open input.btn-default.dropdown-toggle { + color: #f6f6f8; + cursor: pointer; background-color: #545667; - border-color: #434453; -webkit-box-shadow: none; box-shadow: none; } -.btn-info:focus { +a.btn-default.disabled, +div.btn-default.disabled, +button.btn-default.disabled, +input.btn-default.disabled, +a.btn-default[disabled], +div.btn-default[disabled], +button.btn-default[disabled], +input.btn-default[disabled], +fieldset[disabled] a.btn-default, +fieldset[disabled] div.btn-default, +fieldset[disabled] button.btn-default, +fieldset[disabled] input.btn-default { + font-style: italic; + color: #545667; background-color: #383846; - border-color: #383846; -} -.btn-info.disabled, -.btn-info[disabled], -fieldset[disabled] .btn-info { - color: #fafafc !important; - background-color: #d4d7dd; - border-color: #d4d7dd; + -webkit-box-shadow: none; + box-shadow: none; opacity: 1; } -.btn-info.disabled:hover, -.btn-info[disabled]:hover, -fieldset[disabled] .btn-info:hover, -.btn-info.disabled:active, -.btn-info[disabled]:active, -fieldset[disabled] .btn-info:active, -.btn-info.disabled:focus, -.btn-info[disabled]:focus, -fieldset[disabled] .btn-info:focus, -.btn-info.disabled.active, -.btn-info[disabled].active, -fieldset[disabled] .btn-info.active, -.btn-info.disabled:active:focus, -.btn-info[disabled]:active:focus, -fieldset[disabled] .btn-info:active:focus { - color: #fafafc !important; +a.btn-default.disabled:hover, +div.btn-default.disabled:hover, +button.btn-default.disabled:hover, +input.btn-default.disabled:hover, +a.btn-default[disabled]:hover, +div.btn-default[disabled]:hover, +button.btn-default[disabled]:hover, +input.btn-default[disabled]:hover, +fieldset[disabled] a.btn-default:hover, +fieldset[disabled] div.btn-default:hover, +fieldset[disabled] button.btn-default:hover, +fieldset[disabled] input.btn-default:hover, +a.btn-default.disabled:active, +div.btn-default.disabled:active, +button.btn-default.disabled:active, +input.btn-default.disabled:active, +a.btn-default[disabled]:active, +div.btn-default[disabled]:active, +button.btn-default[disabled]:active, +input.btn-default[disabled]:active, +fieldset[disabled] a.btn-default:active, +fieldset[disabled] div.btn-default:active, +fieldset[disabled] button.btn-default:active, +fieldset[disabled] input.btn-default:active, +a.btn-default.disabled:focus, +div.btn-default.disabled:focus, +button.btn-default.disabled:focus, +input.btn-default.disabled:focus, +a.btn-default[disabled]:focus, +div.btn-default[disabled]:focus, +button.btn-default[disabled]:focus, +input.btn-default[disabled]:focus, +fieldset[disabled] a.btn-default:focus, +fieldset[disabled] div.btn-default:focus, +fieldset[disabled] button.btn-default:focus, +fieldset[disabled] input.btn-default:focus, +a.btn-default.disabled.active, +div.btn-default.disabled.active, +button.btn-default.disabled.active, +input.btn-default.disabled.active, +a.btn-default[disabled].active, +div.btn-default[disabled].active, +button.btn-default[disabled].active, +input.btn-default[disabled].active, +fieldset[disabled] a.btn-default.active, +fieldset[disabled] div.btn-default.active, +fieldset[disabled] button.btn-default.active, +fieldset[disabled] input.btn-default.active, +a.btn-default.disabled:active:focus, +div.btn-default.disabled:active:focus, +button.btn-default.disabled:active:focus, +input.btn-default.disabled:active:focus, +a.btn-default[disabled]:active:focus, +div.btn-default[disabled]:active:focus, +button.btn-default[disabled]:active:focus, +input.btn-default[disabled]:active:focus, +fieldset[disabled] a.btn-default:active:focus, +fieldset[disabled] div.btn-default:active:focus, +fieldset[disabled] button.btn-default:active:focus, +fieldset[disabled] input.btn-default:active:focus { + color: #545667; cursor: not-allowed; - background-color: #d4d7dd; - border-color: #d4d7dd; + background-color: #383846; + -webkit-box-shadow: none; + box-shadow: none; + opacity: 1; } -.open .btn-info.dropdown-toggle { - color: #fff !important; - background-color: #545667 !important; - border-color: #434453 !important; +a.btn-default.disabled:after, +div.btn-default.disabled:after, +button.btn-default.disabled:after, +input.btn-default.disabled:after, +a.btn-default[disabled]:after, +div.btn-default[disabled]:after, +button.btn-default[disabled]:after, +input.btn-default[disabled]:after, +fieldset[disabled] a.btn-default:after, +fieldset[disabled] div.btn-default:after, +fieldset[disabled] button.btn-default:after, +fieldset[disabled] input.btn-default:after { + display: none; } -.btn-warning { - color: #fff !important; - /* Default Style */ +a.btn-primary, +div.btn-primary, +button.btn-primary, +input.btn-primary { + color: #fff; + text-shadow: none; + background-color: #22adf6; + border-width: 0; +} +a.btn-primary:focus, +div.btn-primary:focus, +button.btn-primary:focus, +input.btn-primary:focus { + color: #fff; + background-color: #22adf6; + -webkit-box-shadow: none; + box-shadow: none; +} +a.btn-primary:hover, +div.btn-primary:hover, +button.btn-primary:hover, +input.btn-primary:hover, +a.btn-primary:focus:hover, +div.btn-primary:focus:hover, +button.btn-primary:focus:hover, +input.btn-primary:focus:hover { + color: #fff; + cursor: pointer; + background-color: #00c9ff; + -webkit-box-shadow: none; + box-shadow: none; +} +a.btn-primary.active, +div.btn-primary.active, +button.btn-primary.active, +input.btn-primary.active, +a.btn-primary.active:hover, +div.btn-primary.active:hover, +button.btn-primary.active:hover, +input.btn-primary.active:hover, +a.btn-primary:active, +div.btn-primary:active, +button.btn-primary:active, +input.btn-primary:active, +a.btn-primary:active:hover, +div.btn-primary:active:hover, +button.btn-primary:active:hover, +input.btn-primary:active:hover, +a.btn-primary:focus:active, +div.btn-primary:focus:active, +button.btn-primary:focus:active, +input.btn-primary:focus:active, +a.btn-primary:focus:active:hover, +div.btn-primary:focus:active:hover, +button.btn-primary:focus:active:hover, +input.btn-primary:focus:active:hover, +.dropdown.open a.btn-primary.dropdown-toggle, +.dropdown.open div.btn-primary.dropdown-toggle, +.dropdown.open button.btn-primary.dropdown-toggle, +.dropdown.open input.btn-primary.dropdown-toggle { + color: #fff; + cursor: pointer; + background-color: #6bdfff; + -webkit-box-shadow: none; + box-shadow: none; +} +a.btn-primary.disabled, +div.btn-primary.disabled, +button.btn-primary.disabled, +input.btn-primary.disabled, +a.btn-primary[disabled], +div.btn-primary[disabled], +button.btn-primary[disabled], +input.btn-primary[disabled], +fieldset[disabled] a.btn-primary, +fieldset[disabled] div.btn-primary, +fieldset[disabled] button.btn-primary, +fieldset[disabled] input.btn-primary { + font-style: italic; + color: #545667; + background-color: #383846; + -webkit-box-shadow: none; + box-shadow: none; + opacity: 1; +} +a.btn-primary.disabled:hover, +div.btn-primary.disabled:hover, +button.btn-primary.disabled:hover, +input.btn-primary.disabled:hover, +a.btn-primary[disabled]:hover, +div.btn-primary[disabled]:hover, +button.btn-primary[disabled]:hover, +input.btn-primary[disabled]:hover, +fieldset[disabled] a.btn-primary:hover, +fieldset[disabled] div.btn-primary:hover, +fieldset[disabled] button.btn-primary:hover, +fieldset[disabled] input.btn-primary:hover, +a.btn-primary.disabled:active, +div.btn-primary.disabled:active, +button.btn-primary.disabled:active, +input.btn-primary.disabled:active, +a.btn-primary[disabled]:active, +div.btn-primary[disabled]:active, +button.btn-primary[disabled]:active, +input.btn-primary[disabled]:active, +fieldset[disabled] a.btn-primary:active, +fieldset[disabled] div.btn-primary:active, +fieldset[disabled] button.btn-primary:active, +fieldset[disabled] input.btn-primary:active, +a.btn-primary.disabled:focus, +div.btn-primary.disabled:focus, +button.btn-primary.disabled:focus, +input.btn-primary.disabled:focus, +a.btn-primary[disabled]:focus, +div.btn-primary[disabled]:focus, +button.btn-primary[disabled]:focus, +input.btn-primary[disabled]:focus, +fieldset[disabled] a.btn-primary:focus, +fieldset[disabled] div.btn-primary:focus, +fieldset[disabled] button.btn-primary:focus, +fieldset[disabled] input.btn-primary:focus, +a.btn-primary.disabled.active, +div.btn-primary.disabled.active, +button.btn-primary.disabled.active, +input.btn-primary.disabled.active, +a.btn-primary[disabled].active, +div.btn-primary[disabled].active, +button.btn-primary[disabled].active, +input.btn-primary[disabled].active, +fieldset[disabled] a.btn-primary.active, +fieldset[disabled] div.btn-primary.active, +fieldset[disabled] button.btn-primary.active, +fieldset[disabled] input.btn-primary.active, +a.btn-primary.disabled:active:focus, +div.btn-primary.disabled:active:focus, +button.btn-primary.disabled:active:focus, +input.btn-primary.disabled:active:focus, +a.btn-primary[disabled]:active:focus, +div.btn-primary[disabled]:active:focus, +button.btn-primary[disabled]:active:focus, +input.btn-primary[disabled]:active:focus, +fieldset[disabled] a.btn-primary:active:focus, +fieldset[disabled] div.btn-primary:active:focus, +fieldset[disabled] button.btn-primary:active:focus, +fieldset[disabled] input.btn-primary:active:focus { + color: #545667; + cursor: not-allowed; + background-color: #383846; + -webkit-box-shadow: none; + box-shadow: none; + opacity: 1; +} +a.btn-primary.disabled:after, +div.btn-primary.disabled:after, +button.btn-primary.disabled:after, +input.btn-primary.disabled:after, +a.btn-primary[disabled]:after, +div.btn-primary[disabled]:after, +button.btn-primary[disabled]:after, +input.btn-primary[disabled]:after, +fieldset[disabled] a.btn-primary:after, +fieldset[disabled] div.btn-primary:after, +fieldset[disabled] button.btn-primary:after, +fieldset[disabled] input.btn-primary:after { + display: none; +} +a.btn-success, +div.btn-success, +button.btn-success, +input.btn-success { + color: #fff; + text-shadow: none; + background-color: #4ed8a0; + border-width: 0; +} +a.btn-success:focus, +div.btn-success:focus, +button.btn-success:focus, +input.btn-success:focus { + color: #fff; + background-color: #4ed8a0; + -webkit-box-shadow: none; + box-shadow: none; +} +a.btn-success:hover, +div.btn-success:hover, +button.btn-success:hover, +input.btn-success:hover, +a.btn-success:focus:hover, +div.btn-success:focus:hover, +button.btn-success:focus:hover, +input.btn-success:focus:hover { + color: #fff; + cursor: pointer; + background-color: #7ce490; + -webkit-box-shadow: none; + box-shadow: none; +} +a.btn-success.active, +div.btn-success.active, +button.btn-success.active, +input.btn-success.active, +a.btn-success.active:hover, +div.btn-success.active:hover, +button.btn-success.active:hover, +input.btn-success.active:hover, +a.btn-success:active, +div.btn-success:active, +button.btn-success:active, +input.btn-success:active, +a.btn-success:active:hover, +div.btn-success:active:hover, +button.btn-success:active:hover, +input.btn-success:active:hover, +a.btn-success:focus:active, +div.btn-success:focus:active, +button.btn-success:focus:active, +input.btn-success:focus:active, +a.btn-success:focus:active:hover, +div.btn-success:focus:active:hover, +button.btn-success:focus:active:hover, +input.btn-success:focus:active:hover, +.dropdown.open a.btn-success.dropdown-toggle, +.dropdown.open div.btn-success.dropdown-toggle, +.dropdown.open button.btn-success.dropdown-toggle, +.dropdown.open input.btn-success.dropdown-toggle { + color: #fff; + cursor: pointer; + background-color: #a5f3b4; + -webkit-box-shadow: none; + box-shadow: none; +} +a.btn-success.disabled, +div.btn-success.disabled, +button.btn-success.disabled, +input.btn-success.disabled, +a.btn-success[disabled], +div.btn-success[disabled], +button.btn-success[disabled], +input.btn-success[disabled], +fieldset[disabled] a.btn-success, +fieldset[disabled] div.btn-success, +fieldset[disabled] button.btn-success, +fieldset[disabled] input.btn-success { + font-style: italic; + color: #545667; + background-color: #383846; + -webkit-box-shadow: none; + box-shadow: none; + opacity: 1; +} +a.btn-success.disabled:hover, +div.btn-success.disabled:hover, +button.btn-success.disabled:hover, +input.btn-success.disabled:hover, +a.btn-success[disabled]:hover, +div.btn-success[disabled]:hover, +button.btn-success[disabled]:hover, +input.btn-success[disabled]:hover, +fieldset[disabled] a.btn-success:hover, +fieldset[disabled] div.btn-success:hover, +fieldset[disabled] button.btn-success:hover, +fieldset[disabled] input.btn-success:hover, +a.btn-success.disabled:active, +div.btn-success.disabled:active, +button.btn-success.disabled:active, +input.btn-success.disabled:active, +a.btn-success[disabled]:active, +div.btn-success[disabled]:active, +button.btn-success[disabled]:active, +input.btn-success[disabled]:active, +fieldset[disabled] a.btn-success:active, +fieldset[disabled] div.btn-success:active, +fieldset[disabled] button.btn-success:active, +fieldset[disabled] input.btn-success:active, +a.btn-success.disabled:focus, +div.btn-success.disabled:focus, +button.btn-success.disabled:focus, +input.btn-success.disabled:focus, +a.btn-success[disabled]:focus, +div.btn-success[disabled]:focus, +button.btn-success[disabled]:focus, +input.btn-success[disabled]:focus, +fieldset[disabled] a.btn-success:focus, +fieldset[disabled] div.btn-success:focus, +fieldset[disabled] button.btn-success:focus, +fieldset[disabled] input.btn-success:focus, +a.btn-success.disabled.active, +div.btn-success.disabled.active, +button.btn-success.disabled.active, +input.btn-success.disabled.active, +a.btn-success[disabled].active, +div.btn-success[disabled].active, +button.btn-success[disabled].active, +input.btn-success[disabled].active, +fieldset[disabled] a.btn-success.active, +fieldset[disabled] div.btn-success.active, +fieldset[disabled] button.btn-success.active, +fieldset[disabled] input.btn-success.active, +a.btn-success.disabled:active:focus, +div.btn-success.disabled:active:focus, +button.btn-success.disabled:active:focus, +input.btn-success.disabled:active:focus, +a.btn-success[disabled]:active:focus, +div.btn-success[disabled]:active:focus, +button.btn-success[disabled]:active:focus, +input.btn-success[disabled]:active:focus, +fieldset[disabled] a.btn-success:active:focus, +fieldset[disabled] div.btn-success:active:focus, +fieldset[disabled] button.btn-success:active:focus, +fieldset[disabled] input.btn-success:active:focus { + color: #545667; + cursor: not-allowed; + background-color: #383846; + -webkit-box-shadow: none; + box-shadow: none; + opacity: 1; +} +a.btn-success.disabled:after, +div.btn-success.disabled:after, +button.btn-success.disabled:after, +input.btn-success.disabled:after, +a.btn-success[disabled]:after, +div.btn-success[disabled]:after, +button.btn-success[disabled]:after, +input.btn-success[disabled]:after, +fieldset[disabled] a.btn-success:after, +fieldset[disabled] div.btn-success:after, +fieldset[disabled] button.btn-success:after, +fieldset[disabled] input.btn-success:after { + display: none; +} +a.btn-info, +div.btn-info, +button.btn-info, +input.btn-info { + color: #e7e8eb; + text-shadow: none; + background-color: #545667; + border-width: 0; +} +a.btn-info:focus, +div.btn-info:focus, +button.btn-info:focus, +input.btn-info:focus { + color: #e7e8eb; + background-color: #545667; + -webkit-box-shadow: none; + box-shadow: none; +} +a.btn-info:hover, +div.btn-info:hover, +button.btn-info:hover, +input.btn-info:hover, +a.btn-info:focus:hover, +div.btn-info:focus:hover, +button.btn-info:focus:hover, +input.btn-info:focus:hover { + color: #fff; + cursor: pointer; + background-color: #676978; + -webkit-box-shadow: none; + box-shadow: none; +} +a.btn-info.active, +div.btn-info.active, +button.btn-info.active, +input.btn-info.active, +a.btn-info.active:hover, +div.btn-info.active:hover, +button.btn-info.active:hover, +input.btn-info.active:hover, +a.btn-info:active, +div.btn-info:active, +button.btn-info:active, +input.btn-info:active, +a.btn-info:active:hover, +div.btn-info:active:hover, +button.btn-info:active:hover, +input.btn-info:active:hover, +a.btn-info:focus:active, +div.btn-info:focus:active, +button.btn-info:focus:active, +input.btn-info:focus:active, +a.btn-info:focus:active:hover, +div.btn-info:focus:active:hover, +button.btn-info:focus:active:hover, +input.btn-info:focus:active:hover, +.dropdown.open a.btn-info.dropdown-toggle, +.dropdown.open div.btn-info.dropdown-toggle, +.dropdown.open button.btn-info.dropdown-toggle, +.dropdown.open input.btn-info.dropdown-toggle { + color: #fff; + cursor: pointer; + background-color: #757888; + -webkit-box-shadow: none; + box-shadow: none; +} +a.btn-info.disabled, +div.btn-info.disabled, +button.btn-info.disabled, +input.btn-info.disabled, +a.btn-info[disabled], +div.btn-info[disabled], +button.btn-info[disabled], +input.btn-info[disabled], +fieldset[disabled] a.btn-info, +fieldset[disabled] div.btn-info, +fieldset[disabled] button.btn-info, +fieldset[disabled] input.btn-info { + font-style: italic; + color: #545667; + background-color: #383846; + -webkit-box-shadow: none; + box-shadow: none; + opacity: 1; +} +a.btn-info.disabled:hover, +div.btn-info.disabled:hover, +button.btn-info.disabled:hover, +input.btn-info.disabled:hover, +a.btn-info[disabled]:hover, +div.btn-info[disabled]:hover, +button.btn-info[disabled]:hover, +input.btn-info[disabled]:hover, +fieldset[disabled] a.btn-info:hover, +fieldset[disabled] div.btn-info:hover, +fieldset[disabled] button.btn-info:hover, +fieldset[disabled] input.btn-info:hover, +a.btn-info.disabled:active, +div.btn-info.disabled:active, +button.btn-info.disabled:active, +input.btn-info.disabled:active, +a.btn-info[disabled]:active, +div.btn-info[disabled]:active, +button.btn-info[disabled]:active, +input.btn-info[disabled]:active, +fieldset[disabled] a.btn-info:active, +fieldset[disabled] div.btn-info:active, +fieldset[disabled] button.btn-info:active, +fieldset[disabled] input.btn-info:active, +a.btn-info.disabled:focus, +div.btn-info.disabled:focus, +button.btn-info.disabled:focus, +input.btn-info.disabled:focus, +a.btn-info[disabled]:focus, +div.btn-info[disabled]:focus, +button.btn-info[disabled]:focus, +input.btn-info[disabled]:focus, +fieldset[disabled] a.btn-info:focus, +fieldset[disabled] div.btn-info:focus, +fieldset[disabled] button.btn-info:focus, +fieldset[disabled] input.btn-info:focus, +a.btn-info.disabled.active, +div.btn-info.disabled.active, +button.btn-info.disabled.active, +input.btn-info.disabled.active, +a.btn-info[disabled].active, +div.btn-info[disabled].active, +button.btn-info[disabled].active, +input.btn-info[disabled].active, +fieldset[disabled] a.btn-info.active, +fieldset[disabled] div.btn-info.active, +fieldset[disabled] button.btn-info.active, +fieldset[disabled] input.btn-info.active, +a.btn-info.disabled:active:focus, +div.btn-info.disabled:active:focus, +button.btn-info.disabled:active:focus, +input.btn-info.disabled:active:focus, +a.btn-info[disabled]:active:focus, +div.btn-info[disabled]:active:focus, +button.btn-info[disabled]:active:focus, +input.btn-info[disabled]:active:focus, +fieldset[disabled] a.btn-info:active:focus, +fieldset[disabled] div.btn-info:active:focus, +fieldset[disabled] button.btn-info:active:focus, +fieldset[disabled] input.btn-info:active:focus { + color: #545667; + cursor: not-allowed; + background-color: #383846; + -webkit-box-shadow: none; + box-shadow: none; + opacity: 1; +} +a.btn-info.disabled:after, +div.btn-info.disabled:after, +button.btn-info.disabled:after, +input.btn-info.disabled:after, +a.btn-info[disabled]:after, +div.btn-info[disabled]:after, +button.btn-info[disabled]:after, +input.btn-info[disabled]:after, +fieldset[disabled] a.btn-info:after, +fieldset[disabled] div.btn-info:after, +fieldset[disabled] button.btn-info:after, +fieldset[disabled] input.btn-info:after { + display: none; +} +a.btn-warning, +div.btn-warning, +button.btn-warning, +input.btn-warning { + color: #fff; + text-shadow: none; background-color: #7a65f2; - border-color: #7a65f2; - /* Disabled Styles */ + border-width: 0; } -.btn-warning:hover, -.btn-warning:hover:focus { - color: #fff !important; - /* Hover + Focus + Active all the same */ +a.btn-warning:focus, +div.btn-warning:focus, +button.btn-warning:focus, +input.btn-warning:focus { + color: #fff; + background-color: #7a65f2; + -webkit-box-shadow: none; + box-shadow: none; +} +a.btn-warning:hover, +div.btn-warning:hover, +button.btn-warning:hover, +input.btn-warning:hover, +a.btn-warning:focus:hover, +div.btn-warning:focus:hover, +button.btn-warning:focus:hover, +input.btn-warning:focus:hover { + color: #fff; + cursor: pointer; background-color: #9394ff; - border-color: #9394ff; + -webkit-box-shadow: none; + box-shadow: none; } -.btn-warning:active, -.btn-warning:active:hover, -.btn-warning:active:focus, -.btn-warning.active { - color: #fff !important; +a.btn-warning.active, +div.btn-warning.active, +button.btn-warning.active, +input.btn-warning.active, +a.btn-warning.active:hover, +div.btn-warning.active:hover, +button.btn-warning.active:hover, +input.btn-warning.active:hover, +a.btn-warning:active, +div.btn-warning:active, +button.btn-warning:active, +input.btn-warning:active, +a.btn-warning:active:hover, +div.btn-warning:active:hover, +button.btn-warning:active:hover, +input.btn-warning:active:hover, +a.btn-warning:focus:active, +div.btn-warning:focus:active, +button.btn-warning:focus:active, +input.btn-warning:focus:active, +a.btn-warning:focus:active:hover, +div.btn-warning:focus:active:hover, +button.btn-warning:focus:active:hover, +input.btn-warning:focus:active:hover, +.dropdown.open a.btn-warning.dropdown-toggle, +.dropdown.open div.btn-warning.dropdown-toggle, +.dropdown.open button.btn-warning.dropdown-toggle, +.dropdown.open input.btn-warning.dropdown-toggle { + color: #fff; + cursor: pointer; background-color: #b1b6ff; + -webkit-box-shadow: none; + box-shadow: none; +} +a.btn-warning.disabled, +div.btn-warning.disabled, +button.btn-warning.disabled, +input.btn-warning.disabled, +a.btn-warning[disabled], +div.btn-warning[disabled], +button.btn-warning[disabled], +input.btn-warning[disabled], +fieldset[disabled] a.btn-warning, +fieldset[disabled] div.btn-warning, +fieldset[disabled] button.btn-warning, +fieldset[disabled] input.btn-warning { + font-style: italic; + color: #545667; + background-color: #383846; + -webkit-box-shadow: none; + box-shadow: none; + opacity: 1; +} +a.btn-warning.disabled:hover, +div.btn-warning.disabled:hover, +button.btn-warning.disabled:hover, +input.btn-warning.disabled:hover, +a.btn-warning[disabled]:hover, +div.btn-warning[disabled]:hover, +button.btn-warning[disabled]:hover, +input.btn-warning[disabled]:hover, +fieldset[disabled] a.btn-warning:hover, +fieldset[disabled] div.btn-warning:hover, +fieldset[disabled] button.btn-warning:hover, +fieldset[disabled] input.btn-warning:hover, +a.btn-warning.disabled:active, +div.btn-warning.disabled:active, +button.btn-warning.disabled:active, +input.btn-warning.disabled:active, +a.btn-warning[disabled]:active, +div.btn-warning[disabled]:active, +button.btn-warning[disabled]:active, +input.btn-warning[disabled]:active, +fieldset[disabled] a.btn-warning:active, +fieldset[disabled] div.btn-warning:active, +fieldset[disabled] button.btn-warning:active, +fieldset[disabled] input.btn-warning:active, +a.btn-warning.disabled:focus, +div.btn-warning.disabled:focus, +button.btn-warning.disabled:focus, +input.btn-warning.disabled:focus, +a.btn-warning[disabled]:focus, +div.btn-warning[disabled]:focus, +button.btn-warning[disabled]:focus, +input.btn-warning[disabled]:focus, +fieldset[disabled] a.btn-warning:focus, +fieldset[disabled] div.btn-warning:focus, +fieldset[disabled] button.btn-warning:focus, +fieldset[disabled] input.btn-warning:focus, +a.btn-warning.disabled.active, +div.btn-warning.disabled.active, +button.btn-warning.disabled.active, +input.btn-warning.disabled.active, +a.btn-warning[disabled].active, +div.btn-warning[disabled].active, +button.btn-warning[disabled].active, +input.btn-warning[disabled].active, +fieldset[disabled] a.btn-warning.active, +fieldset[disabled] div.btn-warning.active, +fieldset[disabled] button.btn-warning.active, +fieldset[disabled] input.btn-warning.active, +a.btn-warning.disabled:active:focus, +div.btn-warning.disabled:active:focus, +button.btn-warning.disabled:active:focus, +input.btn-warning.disabled:active:focus, +a.btn-warning[disabled]:active:focus, +div.btn-warning[disabled]:active:focus, +button.btn-warning[disabled]:active:focus, +input.btn-warning[disabled]:active:focus, +fieldset[disabled] a.btn-warning:active:focus, +fieldset[disabled] div.btn-warning:active:focus, +fieldset[disabled] button.btn-warning:active:focus, +fieldset[disabled] input.btn-warning:active:focus { + color: #545667; + cursor: not-allowed; + background-color: #383846; + -webkit-box-shadow: none; + box-shadow: none; + opacity: 1; +} +a.btn-warning.disabled:after, +div.btn-warning.disabled:after, +button.btn-warning.disabled:after, +input.btn-warning.disabled:after, +a.btn-warning[disabled]:after, +div.btn-warning[disabled]:after, +button.btn-warning[disabled]:after, +input.btn-warning[disabled]:after, +fieldset[disabled] a.btn-warning:after, +fieldset[disabled] div.btn-warning:after, +fieldset[disabled] button.btn-warning:after, +fieldset[disabled] input.btn-warning:after { + display: none; +} +a.btn-danger, +div.btn-danger, +button.btn-danger, +input.btn-danger { + color: #fff; + text-shadow: none; + background-color: #f95f53; + border-width: 0; +} +a.btn-danger:focus, +div.btn-danger:focus, +button.btn-danger:focus, +input.btn-danger:focus { + color: #fff; + background-color: #f95f53; + -webkit-box-shadow: none; + box-shadow: none; +} +a.btn-danger:hover, +div.btn-danger:hover, +button.btn-danger:hover, +input.btn-danger:hover, +a.btn-danger:focus:hover, +div.btn-danger:focus:hover, +button.btn-danger:focus:hover, +input.btn-danger:focus:hover { + color: #fff; + cursor: pointer; + background-color: #ff8564; + -webkit-box-shadow: none; + box-shadow: none; +} +a.btn-danger.active, +div.btn-danger.active, +button.btn-danger.active, +input.btn-danger.active, +a.btn-danger.active:hover, +div.btn-danger.active:hover, +button.btn-danger.active:hover, +input.btn-danger.active:hover, +a.btn-danger:active, +div.btn-danger:active, +button.btn-danger:active, +input.btn-danger:active, +a.btn-danger:active:hover, +div.btn-danger:active:hover, +button.btn-danger:active:hover, +input.btn-danger:active:hover, +a.btn-danger:focus:active, +div.btn-danger:focus:active, +button.btn-danger:focus:active, +input.btn-danger:focus:active, +a.btn-danger:focus:active:hover, +div.btn-danger:focus:active:hover, +button.btn-danger:focus:active:hover, +input.btn-danger:focus:active:hover, +.dropdown.open a.btn-danger.dropdown-toggle, +.dropdown.open div.btn-danger.dropdown-toggle, +.dropdown.open button.btn-danger.dropdown-toggle, +.dropdown.open input.btn-danger.dropdown-toggle { + color: #fff; + cursor: pointer; + background-color: #ffb6a0; + -webkit-box-shadow: none; + box-shadow: none; +} +a.btn-danger.disabled, +div.btn-danger.disabled, +button.btn-danger.disabled, +input.btn-danger.disabled, +a.btn-danger[disabled], +div.btn-danger[disabled], +button.btn-danger[disabled], +input.btn-danger[disabled], +fieldset[disabled] a.btn-danger, +fieldset[disabled] div.btn-danger, +fieldset[disabled] button.btn-danger, +fieldset[disabled] input.btn-danger { + font-style: italic; + color: #545667; + background-color: #383846; + -webkit-box-shadow: none; + box-shadow: none; + opacity: 1; +} +a.btn-danger.disabled:hover, +div.btn-danger.disabled:hover, +button.btn-danger.disabled:hover, +input.btn-danger.disabled:hover, +a.btn-danger[disabled]:hover, +div.btn-danger[disabled]:hover, +button.btn-danger[disabled]:hover, +input.btn-danger[disabled]:hover, +fieldset[disabled] a.btn-danger:hover, +fieldset[disabled] div.btn-danger:hover, +fieldset[disabled] button.btn-danger:hover, +fieldset[disabled] input.btn-danger:hover, +a.btn-danger.disabled:active, +div.btn-danger.disabled:active, +button.btn-danger.disabled:active, +input.btn-danger.disabled:active, +a.btn-danger[disabled]:active, +div.btn-danger[disabled]:active, +button.btn-danger[disabled]:active, +input.btn-danger[disabled]:active, +fieldset[disabled] a.btn-danger:active, +fieldset[disabled] div.btn-danger:active, +fieldset[disabled] button.btn-danger:active, +fieldset[disabled] input.btn-danger:active, +a.btn-danger.disabled:focus, +div.btn-danger.disabled:focus, +button.btn-danger.disabled:focus, +input.btn-danger.disabled:focus, +a.btn-danger[disabled]:focus, +div.btn-danger[disabled]:focus, +button.btn-danger[disabled]:focus, +input.btn-danger[disabled]:focus, +fieldset[disabled] a.btn-danger:focus, +fieldset[disabled] div.btn-danger:focus, +fieldset[disabled] button.btn-danger:focus, +fieldset[disabled] input.btn-danger:focus, +a.btn-danger.disabled.active, +div.btn-danger.disabled.active, +button.btn-danger.disabled.active, +input.btn-danger.disabled.active, +a.btn-danger[disabled].active, +div.btn-danger[disabled].active, +button.btn-danger[disabled].active, +input.btn-danger[disabled].active, +fieldset[disabled] a.btn-danger.active, +fieldset[disabled] div.btn-danger.active, +fieldset[disabled] button.btn-danger.active, +fieldset[disabled] input.btn-danger.active, +a.btn-danger.disabled:active:focus, +div.btn-danger.disabled:active:focus, +button.btn-danger.disabled:active:focus, +input.btn-danger.disabled:active:focus, +a.btn-danger[disabled]:active:focus, +div.btn-danger[disabled]:active:focus, +button.btn-danger[disabled]:active:focus, +input.btn-danger[disabled]:active:focus, +fieldset[disabled] a.btn-danger:active:focus, +fieldset[disabled] div.btn-danger:active:focus, +fieldset[disabled] button.btn-danger:active:focus, +fieldset[disabled] input.btn-danger:active:focus { + color: #545667; + cursor: not-allowed; + background-color: #383846; + -webkit-box-shadow: none; + box-shadow: none; + opacity: 1; +} +a.btn-danger.disabled:after, +div.btn-danger.disabled:after, +button.btn-danger.disabled:after, +input.btn-danger.disabled:after, +a.btn-danger[disabled]:after, +div.btn-danger[disabled]:after, +button.btn-danger[disabled]:after, +input.btn-danger[disabled]:after, +fieldset[disabled] a.btn-danger:after, +fieldset[disabled] div.btn-danger:after, +fieldset[disabled] button.btn-danger:after, +fieldset[disabled] input.btn-danger:after { + display: none; +} +a.btn-alert, +div.btn-alert, +button.btn-alert, +input.btn-alert { + color: #fff; + text-shadow: none; + background-color: #ffb94a; + border-width: 0; +} +a.btn-alert:focus, +div.btn-alert:focus, +button.btn-alert:focus, +input.btn-alert:focus { + color: #fff; + background-color: #ffb94a; + -webkit-box-shadow: none; + box-shadow: none; +} +a.btn-alert:hover, +div.btn-alert:hover, +button.btn-alert:hover, +input.btn-alert:hover, +a.btn-alert:focus:hover, +div.btn-alert:focus:hover, +button.btn-alert:focus:hover, +input.btn-alert:focus:hover { + color: #fff; + cursor: pointer; + background-color: #ffd255; + -webkit-box-shadow: none; + box-shadow: none; +} +a.btn-alert.active, +div.btn-alert.active, +button.btn-alert.active, +input.btn-alert.active, +a.btn-alert.active:hover, +div.btn-alert.active:hover, +button.btn-alert.active:hover, +input.btn-alert.active:hover, +a.btn-alert:active, +div.btn-alert:active, +button.btn-alert:active, +input.btn-alert:active, +a.btn-alert:active:hover, +div.btn-alert:active:hover, +button.btn-alert:active:hover, +input.btn-alert:active:hover, +a.btn-alert:focus:active, +div.btn-alert:focus:active, +button.btn-alert:focus:active, +input.btn-alert:focus:active, +a.btn-alert:focus:active:hover, +div.btn-alert:focus:active:hover, +button.btn-alert:focus:active:hover, +input.btn-alert:focus:active:hover, +.dropdown.open a.btn-alert.dropdown-toggle, +.dropdown.open div.btn-alert.dropdown-toggle, +.dropdown.open button.btn-alert.dropdown-toggle, +.dropdown.open input.btn-alert.dropdown-toggle { + color: #fff; + cursor: pointer; + background-color: #ffe480; + -webkit-box-shadow: none; + box-shadow: none; +} +a.btn-alert.disabled, +div.btn-alert.disabled, +button.btn-alert.disabled, +input.btn-alert.disabled, +a.btn-alert[disabled], +div.btn-alert[disabled], +button.btn-alert[disabled], +input.btn-alert[disabled], +fieldset[disabled] a.btn-alert, +fieldset[disabled] div.btn-alert, +fieldset[disabled] button.btn-alert, +fieldset[disabled] input.btn-alert { + font-style: italic; + color: #545667; + background-color: #383846; + -webkit-box-shadow: none; + box-shadow: none; + opacity: 1; +} +a.btn-alert.disabled:hover, +div.btn-alert.disabled:hover, +button.btn-alert.disabled:hover, +input.btn-alert.disabled:hover, +a.btn-alert[disabled]:hover, +div.btn-alert[disabled]:hover, +button.btn-alert[disabled]:hover, +input.btn-alert[disabled]:hover, +fieldset[disabled] a.btn-alert:hover, +fieldset[disabled] div.btn-alert:hover, +fieldset[disabled] button.btn-alert:hover, +fieldset[disabled] input.btn-alert:hover, +a.btn-alert.disabled:active, +div.btn-alert.disabled:active, +button.btn-alert.disabled:active, +input.btn-alert.disabled:active, +a.btn-alert[disabled]:active, +div.btn-alert[disabled]:active, +button.btn-alert[disabled]:active, +input.btn-alert[disabled]:active, +fieldset[disabled] a.btn-alert:active, +fieldset[disabled] div.btn-alert:active, +fieldset[disabled] button.btn-alert:active, +fieldset[disabled] input.btn-alert:active, +a.btn-alert.disabled:focus, +div.btn-alert.disabled:focus, +button.btn-alert.disabled:focus, +input.btn-alert.disabled:focus, +a.btn-alert[disabled]:focus, +div.btn-alert[disabled]:focus, +button.btn-alert[disabled]:focus, +input.btn-alert[disabled]:focus, +fieldset[disabled] a.btn-alert:focus, +fieldset[disabled] div.btn-alert:focus, +fieldset[disabled] button.btn-alert:focus, +fieldset[disabled] input.btn-alert:focus, +a.btn-alert.disabled.active, +div.btn-alert.disabled.active, +button.btn-alert.disabled.active, +input.btn-alert.disabled.active, +a.btn-alert[disabled].active, +div.btn-alert[disabled].active, +button.btn-alert[disabled].active, +input.btn-alert[disabled].active, +fieldset[disabled] a.btn-alert.active, +fieldset[disabled] div.btn-alert.active, +fieldset[disabled] button.btn-alert.active, +fieldset[disabled] input.btn-alert.active, +a.btn-alert.disabled:active:focus, +div.btn-alert.disabled:active:focus, +button.btn-alert.disabled:active:focus, +input.btn-alert.disabled:active:focus, +a.btn-alert[disabled]:active:focus, +div.btn-alert[disabled]:active:focus, +button.btn-alert[disabled]:active:focus, +input.btn-alert[disabled]:active:focus, +fieldset[disabled] a.btn-alert:active:focus, +fieldset[disabled] div.btn-alert:active:focus, +fieldset[disabled] button.btn-alert:active:focus, +fieldset[disabled] input.btn-alert:active:focus { + color: #545667; + cursor: not-allowed; + background-color: #383846; + -webkit-box-shadow: none; + box-shadow: none; + opacity: 1; +} +a.btn-alert.disabled:after, +div.btn-alert.disabled:after, +button.btn-alert.disabled:after, +input.btn-alert.disabled:after, +a.btn-alert[disabled]:after, +div.btn-alert[disabled]:after, +button.btn-alert[disabled]:after, +input.btn-alert[disabled]:after, +fieldset[disabled] a.btn-alert:after, +fieldset[disabled] div.btn-alert:after, +fieldset[disabled] button.btn-alert:after, +fieldset[disabled] input.btn-alert:after { + display: none; +} +a.btn-link, +div.btn-link, +button.btn-link { + line-height: 34px; + color: #22adf6; + background-color: transparent; + border-color: #383846; + border-width: 2px; +} +a.btn-link.btn-xs, +div.btn-link.btn-xs, +button.btn-link.btn-xs { + line-height: 18px; +} +a.btn-link.btn-sm, +div.btn-link.btn-sm, +button.btn-link.btn-sm { + line-height: 26px; +} +a.btn-link.btn-md, +div.btn-link.btn-md, +button.btn-link.btn-md { + line-height: 34px; +} +a.btn-link.btn-lg, +div.btn-link.btn-lg, +button.btn-link.btn-lg { + line-height: 42px; +} +a.btn-link:focus, +div.btn-link:focus, +button.btn-link:focus { + color: #22adf6; + background-color: transparent; + border-color: #383846; + border-width: 2px; +} +a.btn-link:hover, +div.btn-link:hover, +button.btn-link:hover { + color: #00c9ff; + background-color: transparent; + border-color: #434453; +} +a.btn-link:after, +div.btn-link:after, +button.btn-link:after { + top: -4px; + left: -4px; + width: -webkit-calc(100% + 8px); + width: calc(100% + 8px); + height: -webkit-calc(100% + 8px); + height: calc(100% + 8px); +} +a.btn-link.active, +div.btn-link.active, +button.btn-link.active, +a.btn-link.active:hover, +div.btn-link.active:hover, +button.btn-link.active:hover, +a.btn-link:active, +div.btn-link:active, +button.btn-link:active, +a.btn-link:active:hover, +div.btn-link:active:hover, +button.btn-link:active:hover, +.open a.btn-link.dropdown-toggle, +.open div.btn-link.dropdown-toggle, +.open button.btn-link.dropdown-toggle { + color: #00c9ff; + background-color: transparent; + border-color: #00c9ff; + -webkit-box-shadow: none; + box-shadow: none; +} +a.btn-link.disabled, +div.btn-link.disabled, +button.btn-link.disabled, +a.btn-link[disabled], +div.btn-link[disabled], +button.btn-link[disabled], +fieldset[disabled] a.btn-link, +fieldset[disabled] div.btn-link, +fieldset[disabled] button.btn-link { + font-style: italic; + color: #545667; + background-color: transparent; + border-color: #383846; + -webkit-box-shadow: none; + box-shadow: none; + opacity: 1; +} +a.btn-link.disabled:hover, +div.btn-link.disabled:hover, +button.btn-link.disabled:hover, +a.btn-link[disabled]:hover, +div.btn-link[disabled]:hover, +button.btn-link[disabled]:hover, +fieldset[disabled] a.btn-link:hover, +fieldset[disabled] div.btn-link:hover, +fieldset[disabled] button.btn-link:hover, +a.btn-link.disabled:active, +div.btn-link.disabled:active, +button.btn-link.disabled:active, +a.btn-link[disabled]:active, +div.btn-link[disabled]:active, +button.btn-link[disabled]:active, +fieldset[disabled] a.btn-link:active, +fieldset[disabled] div.btn-link:active, +fieldset[disabled] button.btn-link:active, +a.btn-link.disabled:focus, +div.btn-link.disabled:focus, +button.btn-link.disabled:focus, +a.btn-link[disabled]:focus, +div.btn-link[disabled]:focus, +button.btn-link[disabled]:focus, +fieldset[disabled] a.btn-link:focus, +fieldset[disabled] div.btn-link:focus, +fieldset[disabled] button.btn-link:focus, +a.btn-link.disabled.active, +div.btn-link.disabled.active, +button.btn-link.disabled.active, +a.btn-link[disabled].active, +div.btn-link[disabled].active, +button.btn-link[disabled].active, +fieldset[disabled] a.btn-link.active, +fieldset[disabled] div.btn-link.active, +fieldset[disabled] button.btn-link.active, +a.btn-link.disabled:active:focus, +div.btn-link.disabled:active:focus, +button.btn-link.disabled:active:focus, +a.btn-link[disabled]:active:focus, +div.btn-link[disabled]:active:focus, +button.btn-link[disabled]:active:focus, +fieldset[disabled] a.btn-link:active:focus, +fieldset[disabled] div.btn-link:active:focus, +fieldset[disabled] button.btn-link:active:focus { + color: #545667; + cursor: not-allowed; + background-color: transparent; + border-color: #383846; + -webkit-box-shadow: none; + box-shadow: none; + opacity: 1; +} +a.btn-link.disabled:after, +div.btn-link.disabled:after, +button.btn-link.disabled:after, +a.btn-link[disabled]:after, +div.btn-link[disabled]:after, +button.btn-link[disabled]:after, +fieldset[disabled] a.btn-link:after, +fieldset[disabled] div.btn-link:after, +fieldset[disabled] button.btn-link:after { + display: none; +} +a.btn-link-success, +div.btn-link-success, +button.btn-link-success { + line-height: 34px; + color: #4ed8a0; + background-color: transparent; + border-color: #383846; + border-width: 2px; +} +a.btn-link-success.btn-xs, +div.btn-link-success.btn-xs, +button.btn-link-success.btn-xs { + line-height: 18px; +} +a.btn-link-success.btn-sm, +div.btn-link-success.btn-sm, +button.btn-link-success.btn-sm { + line-height: 26px; +} +a.btn-link-success.btn-md, +div.btn-link-success.btn-md, +button.btn-link-success.btn-md { + line-height: 34px; +} +a.btn-link-success.btn-lg, +div.btn-link-success.btn-lg, +button.btn-link-success.btn-lg { + line-height: 42px; +} +a.btn-link-success:focus, +div.btn-link-success:focus, +button.btn-link-success:focus { + color: #4ed8a0; + background-color: transparent; + border-color: #383846; + border-width: 2px; +} +a.btn-link-success:hover, +div.btn-link-success:hover, +button.btn-link-success:hover { + color: #7ce490; + background-color: transparent; + border-color: #434453; +} +a.btn-link-success:after, +div.btn-link-success:after, +button.btn-link-success:after { + top: -4px; + left: -4px; + width: -webkit-calc(100% + 8px); + width: calc(100% + 8px); + height: -webkit-calc(100% + 8px); + height: calc(100% + 8px); +} +a.btn-link-success.active, +div.btn-link-success.active, +button.btn-link-success.active, +a.btn-link-success.active:hover, +div.btn-link-success.active:hover, +button.btn-link-success.active:hover, +a.btn-link-success:active, +div.btn-link-success:active, +button.btn-link-success:active, +a.btn-link-success:active:hover, +div.btn-link-success:active:hover, +button.btn-link-success:active:hover, +.open a.btn-link-success.dropdown-toggle, +.open div.btn-link-success.dropdown-toggle, +.open button.btn-link-success.dropdown-toggle { + color: #7ce490; + background-color: transparent; + border-color: #7ce490; + -webkit-box-shadow: none; + box-shadow: none; +} +a.btn-link-success.disabled, +div.btn-link-success.disabled, +button.btn-link-success.disabled, +a.btn-link-success[disabled], +div.btn-link-success[disabled], +button.btn-link-success[disabled], +fieldset[disabled] a.btn-link-success, +fieldset[disabled] div.btn-link-success, +fieldset[disabled] button.btn-link-success { + font-style: italic; + color: #545667; + background-color: transparent; + border-color: #383846; + -webkit-box-shadow: none; + box-shadow: none; + opacity: 1; +} +a.btn-link-success.disabled:hover, +div.btn-link-success.disabled:hover, +button.btn-link-success.disabled:hover, +a.btn-link-success[disabled]:hover, +div.btn-link-success[disabled]:hover, +button.btn-link-success[disabled]:hover, +fieldset[disabled] a.btn-link-success:hover, +fieldset[disabled] div.btn-link-success:hover, +fieldset[disabled] button.btn-link-success:hover, +a.btn-link-success.disabled:active, +div.btn-link-success.disabled:active, +button.btn-link-success.disabled:active, +a.btn-link-success[disabled]:active, +div.btn-link-success[disabled]:active, +button.btn-link-success[disabled]:active, +fieldset[disabled] a.btn-link-success:active, +fieldset[disabled] div.btn-link-success:active, +fieldset[disabled] button.btn-link-success:active, +a.btn-link-success.disabled:focus, +div.btn-link-success.disabled:focus, +button.btn-link-success.disabled:focus, +a.btn-link-success[disabled]:focus, +div.btn-link-success[disabled]:focus, +button.btn-link-success[disabled]:focus, +fieldset[disabled] a.btn-link-success:focus, +fieldset[disabled] div.btn-link-success:focus, +fieldset[disabled] button.btn-link-success:focus, +a.btn-link-success.disabled.active, +div.btn-link-success.disabled.active, +button.btn-link-success.disabled.active, +a.btn-link-success[disabled].active, +div.btn-link-success[disabled].active, +button.btn-link-success[disabled].active, +fieldset[disabled] a.btn-link-success.active, +fieldset[disabled] div.btn-link-success.active, +fieldset[disabled] button.btn-link-success.active, +a.btn-link-success.disabled:active:focus, +div.btn-link-success.disabled:active:focus, +button.btn-link-success.disabled:active:focus, +a.btn-link-success[disabled]:active:focus, +div.btn-link-success[disabled]:active:focus, +button.btn-link-success[disabled]:active:focus, +fieldset[disabled] a.btn-link-success:active:focus, +fieldset[disabled] div.btn-link-success:active:focus, +fieldset[disabled] button.btn-link-success:active:focus { + color: #545667; + cursor: not-allowed; + background-color: transparent; + border-color: #383846; + -webkit-box-shadow: none; + box-shadow: none; + opacity: 1; +} +a.btn-link-success.disabled:after, +div.btn-link-success.disabled:after, +button.btn-link-success.disabled:after, +a.btn-link-success[disabled]:after, +div.btn-link-success[disabled]:after, +button.btn-link-success[disabled]:after, +fieldset[disabled] a.btn-link-success:after, +fieldset[disabled] div.btn-link-success:after, +fieldset[disabled] button.btn-link-success:after { + display: none; +} +a.btn-link-warning, +div.btn-link-warning, +button.btn-link-warning { + line-height: 34px; + color: #7a65f2; + background-color: transparent; + border-color: #383846; + border-width: 2px; +} +a.btn-link-warning.btn-xs, +div.btn-link-warning.btn-xs, +button.btn-link-warning.btn-xs { + line-height: 18px; +} +a.btn-link-warning.btn-sm, +div.btn-link-warning.btn-sm, +button.btn-link-warning.btn-sm { + line-height: 26px; +} +a.btn-link-warning.btn-md, +div.btn-link-warning.btn-md, +button.btn-link-warning.btn-md { + line-height: 34px; +} +a.btn-link-warning.btn-lg, +div.btn-link-warning.btn-lg, +button.btn-link-warning.btn-lg { + line-height: 42px; +} +a.btn-link-warning:focus, +div.btn-link-warning:focus, +button.btn-link-warning:focus { + color: #7a65f2; + background-color: transparent; + border-color: #383846; + border-width: 2px; +} +a.btn-link-warning:hover, +div.btn-link-warning:hover, +button.btn-link-warning:hover { + color: #9394ff; + background-color: transparent; + border-color: #434453; +} +a.btn-link-warning:after, +div.btn-link-warning:after, +button.btn-link-warning:after { + top: -4px; + left: -4px; + width: -webkit-calc(100% + 8px); + width: calc(100% + 8px); + height: -webkit-calc(100% + 8px); + height: calc(100% + 8px); +} +a.btn-link-warning.active, +div.btn-link-warning.active, +button.btn-link-warning.active, +a.btn-link-warning.active:hover, +div.btn-link-warning.active:hover, +button.btn-link-warning.active:hover, +a.btn-link-warning:active, +div.btn-link-warning:active, +button.btn-link-warning:active, +a.btn-link-warning:active:hover, +div.btn-link-warning:active:hover, +button.btn-link-warning:active:hover, +.open a.btn-link-warning.dropdown-toggle, +.open div.btn-link-warning.dropdown-toggle, +.open button.btn-link-warning.dropdown-toggle { + color: #9394ff; + background-color: transparent; border-color: #9394ff; -webkit-box-shadow: none; box-shadow: none; } -.btn-warning:focus { - background-color: #7a65f2; - border-color: #7a65f2; -} -.btn-warning.disabled, -.btn-warning[disabled], -fieldset[disabled] .btn-warning { - color: #fafafc !important; - background-color: #d6d5ed; - border-color: #d6d5ed; +a.btn-link-warning.disabled, +div.btn-link-warning.disabled, +button.btn-link-warning.disabled, +a.btn-link-warning[disabled], +div.btn-link-warning[disabled], +button.btn-link-warning[disabled], +fieldset[disabled] a.btn-link-warning, +fieldset[disabled] div.btn-link-warning, +fieldset[disabled] button.btn-link-warning { + font-style: italic; + color: #545667; + background-color: transparent; + border-color: #383846; + -webkit-box-shadow: none; + box-shadow: none; opacity: 1; } -.btn-warning.disabled:hover, -.btn-warning[disabled]:hover, -fieldset[disabled] .btn-warning:hover, -.btn-warning.disabled:active, -.btn-warning[disabled]:active, -fieldset[disabled] .btn-warning:active, -.btn-warning.disabled:focus, -.btn-warning[disabled]:focus, -fieldset[disabled] .btn-warning:focus, -.btn-warning.disabled.active, -.btn-warning[disabled].active, -fieldset[disabled] .btn-warning.active, -.btn-warning.disabled:active:focus, -.btn-warning[disabled]:active:focus, -fieldset[disabled] .btn-warning:active:focus { - color: #fafafc !important; +a.btn-link-warning.disabled:hover, +div.btn-link-warning.disabled:hover, +button.btn-link-warning.disabled:hover, +a.btn-link-warning[disabled]:hover, +div.btn-link-warning[disabled]:hover, +button.btn-link-warning[disabled]:hover, +fieldset[disabled] a.btn-link-warning:hover, +fieldset[disabled] div.btn-link-warning:hover, +fieldset[disabled] button.btn-link-warning:hover, +a.btn-link-warning.disabled:active, +div.btn-link-warning.disabled:active, +button.btn-link-warning.disabled:active, +a.btn-link-warning[disabled]:active, +div.btn-link-warning[disabled]:active, +button.btn-link-warning[disabled]:active, +fieldset[disabled] a.btn-link-warning:active, +fieldset[disabled] div.btn-link-warning:active, +fieldset[disabled] button.btn-link-warning:active, +a.btn-link-warning.disabled:focus, +div.btn-link-warning.disabled:focus, +button.btn-link-warning.disabled:focus, +a.btn-link-warning[disabled]:focus, +div.btn-link-warning[disabled]:focus, +button.btn-link-warning[disabled]:focus, +fieldset[disabled] a.btn-link-warning:focus, +fieldset[disabled] div.btn-link-warning:focus, +fieldset[disabled] button.btn-link-warning:focus, +a.btn-link-warning.disabled.active, +div.btn-link-warning.disabled.active, +button.btn-link-warning.disabled.active, +a.btn-link-warning[disabled].active, +div.btn-link-warning[disabled].active, +button.btn-link-warning[disabled].active, +fieldset[disabled] a.btn-link-warning.active, +fieldset[disabled] div.btn-link-warning.active, +fieldset[disabled] button.btn-link-warning.active, +a.btn-link-warning.disabled:active:focus, +div.btn-link-warning.disabled:active:focus, +button.btn-link-warning.disabled:active:focus, +a.btn-link-warning[disabled]:active:focus, +div.btn-link-warning[disabled]:active:focus, +button.btn-link-warning[disabled]:active:focus, +fieldset[disabled] a.btn-link-warning:active:focus, +fieldset[disabled] div.btn-link-warning:active:focus, +fieldset[disabled] button.btn-link-warning:active:focus { + color: #545667; cursor: not-allowed; - background-color: #d6d5ed; - border-color: #d6d5ed; + background-color: transparent; + border-color: #383846; + -webkit-box-shadow: none; + box-shadow: none; + opacity: 1; } -.open .btn-warning.dropdown-toggle { - color: #fff !important; - background-color: #b1b6ff !important; - border-color: #9394ff !important; +a.btn-link-warning.disabled:after, +div.btn-link-warning.disabled:after, +button.btn-link-warning.disabled:after, +a.btn-link-warning[disabled]:after, +div.btn-link-warning[disabled]:after, +button.btn-link-warning[disabled]:after, +fieldset[disabled] a.btn-link-warning:after, +fieldset[disabled] div.btn-link-warning:after, +fieldset[disabled] button.btn-link-warning:after { + display: none; } -.btn-danger { - color: #fff !important; - /* Default Style */ - background-color: #f95f53; - border-color: #f95f53; - /* Disabled Styles */ +a.btn-link-danger, +div.btn-link-danger, +button.btn-link-danger { + line-height: 34px; + color: #f95f53; + background-color: transparent; + border-color: #383846; + border-width: 2px; } -.btn-danger:hover, -.btn-danger:hover:focus { - color: #fff !important; - /* Hover + Focus + Active all the same */ - background-color: #ff8564; - border-color: #ff8564; +a.btn-link-danger.btn-xs, +div.btn-link-danger.btn-xs, +button.btn-link-danger.btn-xs { + line-height: 18px; } -.btn-danger:active, -.btn-danger:active:hover, -.btn-danger:active:focus, -.btn-danger.active { - color: #fff !important; - background-color: #ffb6a0; +a.btn-link-danger.btn-sm, +div.btn-link-danger.btn-sm, +button.btn-link-danger.btn-sm { + line-height: 26px; +} +a.btn-link-danger.btn-md, +div.btn-link-danger.btn-md, +button.btn-link-danger.btn-md { + line-height: 34px; +} +a.btn-link-danger.btn-lg, +div.btn-link-danger.btn-lg, +button.btn-link-danger.btn-lg { + line-height: 42px; +} +a.btn-link-danger:focus, +div.btn-link-danger:focus, +button.btn-link-danger:focus { + color: #f95f53; + background-color: transparent; + border-color: #383846; + border-width: 2px; +} +a.btn-link-danger:hover, +div.btn-link-danger:hover, +button.btn-link-danger:hover { + color: #ff8564; + background-color: transparent; + border-color: #434453; +} +a.btn-link-danger:after, +div.btn-link-danger:after, +button.btn-link-danger:after { + top: -4px; + left: -4px; + width: -webkit-calc(100% + 8px); + width: calc(100% + 8px); + height: -webkit-calc(100% + 8px); + height: calc(100% + 8px); +} +a.btn-link-danger.active, +div.btn-link-danger.active, +button.btn-link-danger.active, +a.btn-link-danger.active:hover, +div.btn-link-danger.active:hover, +button.btn-link-danger.active:hover, +a.btn-link-danger:active, +div.btn-link-danger:active, +button.btn-link-danger:active, +a.btn-link-danger:active:hover, +div.btn-link-danger:active:hover, +button.btn-link-danger:active:hover, +.open a.btn-link-danger.dropdown-toggle, +.open div.btn-link-danger.dropdown-toggle, +.open button.btn-link-danger.dropdown-toggle { + color: #ff8564; + background-color: transparent; border-color: #ff8564; -webkit-box-shadow: none; box-shadow: none; } -.btn-danger:focus { - background-color: #f95f53; - border-color: #f95f53; -} -.btn-danger.disabled, -.btn-danger[disabled], -fieldset[disabled] .btn-danger { - color: #fafafc !important; - background-color: #eadad8; - border-color: #eadad8; +a.btn-link-danger.disabled, +div.btn-link-danger.disabled, +button.btn-link-danger.disabled, +a.btn-link-danger[disabled], +div.btn-link-danger[disabled], +button.btn-link-danger[disabled], +fieldset[disabled] a.btn-link-danger, +fieldset[disabled] div.btn-link-danger, +fieldset[disabled] button.btn-link-danger { + font-style: italic; + color: #545667; + background-color: transparent; + border-color: #383846; + -webkit-box-shadow: none; + box-shadow: none; opacity: 1; } -.btn-danger.disabled:hover, -.btn-danger[disabled]:hover, -fieldset[disabled] .btn-danger:hover, -.btn-danger.disabled:active, -.btn-danger[disabled]:active, -fieldset[disabled] .btn-danger:active, -.btn-danger.disabled:focus, -.btn-danger[disabled]:focus, -fieldset[disabled] .btn-danger:focus, -.btn-danger.disabled.active, -.btn-danger[disabled].active, -fieldset[disabled] .btn-danger.active, -.btn-danger.disabled:active:focus, -.btn-danger[disabled]:active:focus, -fieldset[disabled] .btn-danger:active:focus { - color: #fafafc !important; +a.btn-link-danger.disabled:hover, +div.btn-link-danger.disabled:hover, +button.btn-link-danger.disabled:hover, +a.btn-link-danger[disabled]:hover, +div.btn-link-danger[disabled]:hover, +button.btn-link-danger[disabled]:hover, +fieldset[disabled] a.btn-link-danger:hover, +fieldset[disabled] div.btn-link-danger:hover, +fieldset[disabled] button.btn-link-danger:hover, +a.btn-link-danger.disabled:active, +div.btn-link-danger.disabled:active, +button.btn-link-danger.disabled:active, +a.btn-link-danger[disabled]:active, +div.btn-link-danger[disabled]:active, +button.btn-link-danger[disabled]:active, +fieldset[disabled] a.btn-link-danger:active, +fieldset[disabled] div.btn-link-danger:active, +fieldset[disabled] button.btn-link-danger:active, +a.btn-link-danger.disabled:focus, +div.btn-link-danger.disabled:focus, +button.btn-link-danger.disabled:focus, +a.btn-link-danger[disabled]:focus, +div.btn-link-danger[disabled]:focus, +button.btn-link-danger[disabled]:focus, +fieldset[disabled] a.btn-link-danger:focus, +fieldset[disabled] div.btn-link-danger:focus, +fieldset[disabled] button.btn-link-danger:focus, +a.btn-link-danger.disabled.active, +div.btn-link-danger.disabled.active, +button.btn-link-danger.disabled.active, +a.btn-link-danger[disabled].active, +div.btn-link-danger[disabled].active, +button.btn-link-danger[disabled].active, +fieldset[disabled] a.btn-link-danger.active, +fieldset[disabled] div.btn-link-danger.active, +fieldset[disabled] button.btn-link-danger.active, +a.btn-link-danger.disabled:active:focus, +div.btn-link-danger.disabled:active:focus, +button.btn-link-danger.disabled:active:focus, +a.btn-link-danger[disabled]:active:focus, +div.btn-link-danger[disabled]:active:focus, +button.btn-link-danger[disabled]:active:focus, +fieldset[disabled] a.btn-link-danger:active:focus, +fieldset[disabled] div.btn-link-danger:active:focus, +fieldset[disabled] button.btn-link-danger:active:focus { + color: #545667; cursor: not-allowed; - background-color: #eadad8; - border-color: #eadad8; -} -.open .btn-danger.dropdown-toggle { - color: #fff !important; - background-color: #ffb6a0 !important; - border-color: #ff8564 !important; -} -.btn-link { - color: #22adf6 !important; - /* Default Style */ background-color: transparent; - border-color: transparent; - /* Disabled Styles */ + border-color: #383846; + -webkit-box-shadow: none; + box-shadow: none; + opacity: 1; } -.btn-link:hover, -.btn-link:hover:focus { - color: #00c9ff !important; - /* Hover + Focus + Active all the same */ - background-color: transparent; - border-color: transparent; +a.btn-link-danger.disabled:after, +div.btn-link-danger.disabled:after, +button.btn-link-danger.disabled:after, +a.btn-link-danger[disabled]:after, +div.btn-link-danger[disabled]:after, +button.btn-link-danger[disabled]:after, +fieldset[disabled] a.btn-link-danger:after, +fieldset[disabled] div.btn-link-danger:after, +fieldset[disabled] button.btn-link-danger:after { + display: none; } -.btn-link:active, -.btn-link:active:hover, -.btn-link:active:focus, -.btn-link.active { - color: #00c9ff !important; +a.btn-link-alert, +div.btn-link-alert, +button.btn-link-alert { + line-height: 34px; + color: #ffb94a; background-color: transparent; - border-color: #f6f6f8; + border-color: #383846; + border-width: 2px; +} +a.btn-link-alert.btn-xs, +div.btn-link-alert.btn-xs, +button.btn-link-alert.btn-xs { + line-height: 18px; +} +a.btn-link-alert.btn-sm, +div.btn-link-alert.btn-sm, +button.btn-link-alert.btn-sm { + line-height: 26px; +} +a.btn-link-alert.btn-md, +div.btn-link-alert.btn-md, +button.btn-link-alert.btn-md { + line-height: 34px; +} +a.btn-link-alert.btn-lg, +div.btn-link-alert.btn-lg, +button.btn-link-alert.btn-lg { + line-height: 42px; +} +a.btn-link-alert:focus, +div.btn-link-alert:focus, +button.btn-link-alert:focus { + color: #ffb94a; + background-color: transparent; + border-color: #383846; + border-width: 2px; +} +a.btn-link-alert:hover, +div.btn-link-alert:hover, +button.btn-link-alert:hover { + color: #ffd255; + background-color: transparent; + border-color: #434453; +} +a.btn-link-alert:after, +div.btn-link-alert:after, +button.btn-link-alert:after { + top: -4px; + left: -4px; + width: -webkit-calc(100% + 8px); + width: calc(100% + 8px); + height: -webkit-calc(100% + 8px); + height: calc(100% + 8px); +} +a.btn-link-alert.active, +div.btn-link-alert.active, +button.btn-link-alert.active, +a.btn-link-alert.active:hover, +div.btn-link-alert.active:hover, +button.btn-link-alert.active:hover, +a.btn-link-alert:active, +div.btn-link-alert:active, +button.btn-link-alert:active, +a.btn-link-alert:active:hover, +div.btn-link-alert:active:hover, +button.btn-link-alert:active:hover, +.open a.btn-link-alert.dropdown-toggle, +.open div.btn-link-alert.dropdown-toggle, +.open button.btn-link-alert.dropdown-toggle { + color: #ffd255; + background-color: transparent; + border-color: #ffd255; -webkit-box-shadow: none; box-shadow: none; } -.btn-link:focus { +a.btn-link-alert.disabled, +div.btn-link-alert.disabled, +button.btn-link-alert.disabled, +a.btn-link-alert[disabled], +div.btn-link-alert[disabled], +button.btn-link-alert[disabled], +fieldset[disabled] a.btn-link-alert, +fieldset[disabled] div.btn-link-alert, +fieldset[disabled] button.btn-link-alert { + font-style: italic; + color: #545667; background-color: transparent; - border-color: transparent; -} -.btn-link.disabled, -.btn-link[disabled], -fieldset[disabled] .btn-link { - color: #999dab !important; - background-color: transparent; - border-color: transparent; - opacity: 1; -} -.btn-link.disabled:hover, -.btn-link[disabled]:hover, -fieldset[disabled] .btn-link:hover, -.btn-link.disabled:active, -.btn-link[disabled]:active, -fieldset[disabled] .btn-link:active, -.btn-link.disabled:focus, -.btn-link[disabled]:focus, -fieldset[disabled] .btn-link:focus, -.btn-link.disabled.active, -.btn-link[disabled].active, -fieldset[disabled] .btn-link.active, -.btn-link.disabled:active:focus, -.btn-link[disabled]:active:focus, -fieldset[disabled] .btn-link:active:focus { - color: #999dab !important; - cursor: not-allowed; - background-color: transparent; - border-color: transparent; -} -.open .btn-link.dropdown-toggle { - color: #00c9ff !important; - background-color: transparent !important; - border-color: #f6f6f8 !important; -} -.btn-link-danger { - color: #f95f53 !important; - /* Default Style */ - background-color: transparent; - border-color: transparent; - /* Disabled Styles */ -} -.btn-link-danger:hover, -.btn-link-danger:hover:focus { - color: #ff8564 !important; - /* Hover + Focus + Active all the same */ - background-color: transparent; - border-color: transparent; -} -.btn-link-danger:active, -.btn-link-danger:active:hover, -.btn-link-danger:active:focus, -.btn-link-danger.active { - color: #ff8564 !important; - background-color: transparent; - border-color: #f6f6f8; + border-color: #383846; -webkit-box-shadow: none; box-shadow: none; -} -.btn-link-danger:focus { - background-color: transparent; - border-color: transparent; -} -.btn-link-danger.disabled, -.btn-link-danger[disabled], -fieldset[disabled] .btn-link-danger { - color: #999dab !important; - background-color: transparent; - border-color: transparent; opacity: 1; } -.btn-link-danger.disabled:hover, -.btn-link-danger[disabled]:hover, -fieldset[disabled] .btn-link-danger:hover, -.btn-link-danger.disabled:active, -.btn-link-danger[disabled]:active, -fieldset[disabled] .btn-link-danger:active, -.btn-link-danger.disabled:focus, -.btn-link-danger[disabled]:focus, -fieldset[disabled] .btn-link-danger:focus, -.btn-link-danger.disabled.active, -.btn-link-danger[disabled].active, -fieldset[disabled] .btn-link-danger.active, -.btn-link-danger.disabled:active:focus, -.btn-link-danger[disabled]:active:focus, -fieldset[disabled] .btn-link-danger:active:focus { - color: #999dab !important; +a.btn-link-alert.disabled:hover, +div.btn-link-alert.disabled:hover, +button.btn-link-alert.disabled:hover, +a.btn-link-alert[disabled]:hover, +div.btn-link-alert[disabled]:hover, +button.btn-link-alert[disabled]:hover, +fieldset[disabled] a.btn-link-alert:hover, +fieldset[disabled] div.btn-link-alert:hover, +fieldset[disabled] button.btn-link-alert:hover, +a.btn-link-alert.disabled:active, +div.btn-link-alert.disabled:active, +button.btn-link-alert.disabled:active, +a.btn-link-alert[disabled]:active, +div.btn-link-alert[disabled]:active, +button.btn-link-alert[disabled]:active, +fieldset[disabled] a.btn-link-alert:active, +fieldset[disabled] div.btn-link-alert:active, +fieldset[disabled] button.btn-link-alert:active, +a.btn-link-alert.disabled:focus, +div.btn-link-alert.disabled:focus, +button.btn-link-alert.disabled:focus, +a.btn-link-alert[disabled]:focus, +div.btn-link-alert[disabled]:focus, +button.btn-link-alert[disabled]:focus, +fieldset[disabled] a.btn-link-alert:focus, +fieldset[disabled] div.btn-link-alert:focus, +fieldset[disabled] button.btn-link-alert:focus, +a.btn-link-alert.disabled.active, +div.btn-link-alert.disabled.active, +button.btn-link-alert.disabled.active, +a.btn-link-alert[disabled].active, +div.btn-link-alert[disabled].active, +button.btn-link-alert[disabled].active, +fieldset[disabled] a.btn-link-alert.active, +fieldset[disabled] div.btn-link-alert.active, +fieldset[disabled] button.btn-link-alert.active, +a.btn-link-alert.disabled:active:focus, +div.btn-link-alert.disabled:active:focus, +button.btn-link-alert.disabled:active:focus, +a.btn-link-alert[disabled]:active:focus, +div.btn-link-alert[disabled]:active:focus, +button.btn-link-alert[disabled]:active:focus, +fieldset[disabled] a.btn-link-alert:active:focus, +fieldset[disabled] div.btn-link-alert:active:focus, +fieldset[disabled] button.btn-link-alert:active:focus { + color: #545667; cursor: not-allowed; background-color: transparent; - border-color: transparent; -} -.open .btn-link-danger.dropdown-toggle { - color: #ff8564 !important; - background-color: transparent !important; - border-color: #f6f6f8 !important; -} -.btn-link-success { - color: #4ed8a0 !important; - /* Default Style */ - background-color: transparent; - border-color: transparent; - /* Disabled Styles */ -} -.btn-link-success:hover, -.btn-link-success:hover:focus { - color: #7ce490 !important; - /* Hover + Focus + Active all the same */ - background-color: transparent; - border-color: transparent; -} -.btn-link-success:active, -.btn-link-success:active:hover, -.btn-link-success:active:focus, -.btn-link-success.active { - color: #7ce490 !important; - background-color: transparent; - border-color: #f6f6f8; + border-color: #383846; -webkit-box-shadow: none; box-shadow: none; -} -.btn-link-success:focus { - background-color: transparent; - border-color: transparent; -} -.btn-link-success.disabled, -.btn-link-success[disabled], -fieldset[disabled] .btn-link-success { - color: #999dab !important; - background-color: transparent; - border-color: transparent; opacity: 1; } -.btn-link-success.disabled:hover, -.btn-link-success[disabled]:hover, -fieldset[disabled] .btn-link-success:hover, -.btn-link-success.disabled:active, -.btn-link-success[disabled]:active, -fieldset[disabled] .btn-link-success:active, -.btn-link-success.disabled:focus, -.btn-link-success[disabled]:focus, -fieldset[disabled] .btn-link-success:focus, -.btn-link-success.disabled.active, -.btn-link-success[disabled].active, -fieldset[disabled] .btn-link-success.active, -.btn-link-success.disabled:active:focus, -.btn-link-success[disabled]:active:focus, -fieldset[disabled] .btn-link-success:active:focus { - color: #999dab !important; - cursor: not-allowed; - background-color: transparent; - border-color: transparent; +a.btn-link-alert.disabled:after, +div.btn-link-alert.disabled:after, +button.btn-link-alert.disabled:after, +a.btn-link-alert[disabled]:after, +div.btn-link-alert[disabled]:after, +button.btn-link-alert[disabled]:after, +fieldset[disabled] a.btn-link-alert:after, +fieldset[disabled] div.btn-link-alert:after, +fieldset[disabled] button.btn-link-alert:after { + display: none; } -.open .btn-link-success.dropdown-toggle { - color: #ff8564 !important; - background-color: transparent !important; - border-color: #f6f6f8 !important; +.btn-group > * { + margin-right: 2px; + margin-left: 0; +} +.btn-group > *:last-child { + margin-right: 0; +} +.btn-group.open .dropdown-toggle { + -webkit-box-shadow: none !important; + box-shadow: none !important; } .panel { - background-color: #fff; + background-color: #292933; border: none; - border-bottom: 2px solid #eef0f2; border-radius: 4px; - -webkit-box-shadow: none; - box-shadow: none; } .panel-heading { - padding: 25px 30px; + padding: 30px 30px; margin-top: 0; margin-bottom: 0; - color: #676978; - background-color: #fff; + color: #bec2cc; + background-color: #292933; border: none; border-radius: 4px 4px 0 0; } .panel-body { - padding: 15px 30px; - background-color: #fff; + padding: 30px; + background-color: #292933; +} +.panel-body:first-child { + border-top-left-radius: 4px; + border-top-right-radius: 4px; +} +.panel-body:last-child { + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.panel-body > *:first-child { + margin-top: 0; +} +.panel-body > *:last-child { + margin-bottom: 0; } .panel-footer { - padding: 18px 30px; - color: #999dab; - background: #fafafc; - background: -webkit-linear-gradient(top, #fafafc 0%, #fff 100%); - background: -webkit-gradient(linear, left top, left bottom, from(#fafafc), to(#fff)); - background: -o-linear-gradient(top, #fafafc 0%, #fff 100%); - background: linear-gradient(to bottom, #fafafc 0%, #fff 100%); + padding: 14px 30px; + color: #757888; + background: #202028; + background: -webkit-linear-gradient(top, #202028 0%, #292933 100%); + background: -webkit-gradient(linear, left top, left bottom, from(#202028), to(#292933)); + background: -o-linear-gradient(top, #202028 0%, #292933 100%); + background: linear-gradient(to bottom, #202028 0%, #292933 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=0); - border-color: #f6f6f8; - border-style: solid; - border-width: 2px 0 0 0; - border-radius: 0 0 5px 5px; + border: none; + border-radius: 0 0 4px 4px; } .panel-title { - margin: 5px 0; - font-size: 18px; - font-weight: 500 !important; + margin: 0; + font-size: 17px; + font-weight: 500; color: inherit; letter-spacing: .015em; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } .panel-title .icon:first-child { margin-right: 7px; @@ -1128,7 +3642,7 @@ fieldset[disabled] .btn-link-success:active:focus { display: inline-block; width: 14px; height: 14px; - margin-right: 10px; + margin-right: 5px; vertical-align: middle; border: none; -webkit-transition: -webkit-transform .25s ease; @@ -1156,125 +3670,296 @@ fieldset[disabled] .btn-link-success:active:focus { -o-transform: rotate(-90deg); transform: rotate(-90deg); } +.u-flex .panel-title { + width: auto !important; +} .panel-default .panel-heading { - color: #676978; - background-color: #fff; + padding: 0 30px; + background-color: #292933; +} +.panel-default .panel-title { + position: relative; + padding: 30px 0; + color: #bec2cc; +} +.panel-default .panel-title:after { + position: absolute; + bottom: 0; + left: 0; + display: block; + width: 100%; + height: 2px; + content: ''; + background-color: #292933; } .panel-primary .panel-heading { + padding: 0 30px; + background-color: #292933; +} +.panel-primary .panel-title { + position: relative; + padding: 30px 0; color: #22adf6; - background: #f0fcff; - background: -webkit-linear-gradient(left, #f0fcff 0%, #fff 100%); - background: -webkit-gradient(linear, left top, right top, from(#f0fcff), to(#fff)); - background: -o-linear-gradient(left, #f0fcff 0%, #fff 100%); - background: linear-gradient(to right, #f0fcff 0%, #fff 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); +} +.panel-primary .panel-title:after { + position: absolute; + bottom: 0; + left: 0; + display: block; + width: 100%; + height: 2px; + content: ''; + background-color: #31313d; } .panel-success .panel-heading { - color: #32b08c; - background: #f2fff4; - background: -webkit-linear-gradient(left, #f2fff4 0%, #fff 100%); - background: -webkit-gradient(linear, left top, right top, from(#f2fff4), to(#fff)); - background: -o-linear-gradient(left, #f2fff4 0%, #fff 100%); - background: linear-gradient(to right, #f2fff4 0%, #fff 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); + padding: 0 30px; + background-color: #292933; +} +.panel-success .panel-title { + position: relative; + padding: 30px 0; + color: #4ed8a0; +} +.panel-success .panel-title:after { + position: absolute; + bottom: 0; + left: 0; + display: block; + width: 100%; + height: 2px; + content: ''; + background-color: #31313d; } .panel-info .panel-heading { - color: #676978; - background-color: #fff; - border-bottom: 2px solid #fafafc; + padding: 0 30px; + background-color: #292933; +} +.panel-info .panel-title { + position: relative; + padding: 30px 0; + color: #bec2cc; +} +.panel-info .panel-title:after { + position: absolute; + bottom: 0; + left: 0; + display: block; + width: 100%; + height: 2px; + content: ''; + background-color: #31313d; } .panel-warning .panel-heading { + padding: 0 30px; + background-color: #292933; +} +.panel-warning .panel-title { + position: relative; + padding: 30px 0; color: #7a65f2; - background: #f2f4ff; - background: -webkit-linear-gradient(left, #f2f4ff 0%, #fff 100%); - background: -webkit-gradient(linear, left top, right top, from(#f2f4ff), to(#fff)); - background: -o-linear-gradient(left, #f2f4ff 0%, #fff 100%); - background: linear-gradient(to right, #f2f4ff 0%, #fff 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); +} +.panel-warning .panel-title:after { + position: absolute; + bottom: 0; + left: 0; + display: block; + width: 100%; + height: 2px; + content: ''; + background-color: #31313d; } .panel-danger .panel-heading { + padding: 0 30px; + background-color: #292933; +} +.panel-danger .panel-title { + position: relative; + padding: 30px 0; color: #f95f53; - background: #fff7f4; - background: -webkit-linear-gradient(left, #fff7f4 0%, #fff 100%); - background: -webkit-gradient(linear, left top, right top, from(#fff7f4), to(#fff)); - background: -o-linear-gradient(left, #fff7f4 0%, #fff 100%); - background: linear-gradient(to right, #fff7f4 0%, #fff 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); } -.panel-telegraf .panel-heading { - color: #fff; - background: #f95f53; - background: -webkit-linear-gradient(left, #f95f53 0%, #ff8564 100%); - background: -webkit-gradient(linear, left top, right top, from(#f95f53), to(#ff8564)); - background: -o-linear-gradient(left, #f95f53 0%, #ff8564 100%); - background: linear-gradient(to right, #f95f53 0%, #ff8564 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); -} -.panel-influxdb .panel-heading { - color: #fff; - background: #4591ed; - background: -webkit-linear-gradient(left, #4591ed 0%, #22adf6 100%); - background: -webkit-gradient(linear, left top, right top, from(#4591ed), to(#22adf6)); - background: -o-linear-gradient(left, #4591ed 0%, #22adf6 100%); - background: linear-gradient(to right, #4591ed 0%, #22adf6 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); -} -.panel-chronograf .panel-heading { - color: #fff; - background: #7a65f2; - background: -webkit-linear-gradient(left, #7a65f2 0%, #9394ff 100%); - background: -webkit-gradient(linear, left top, right top, from(#7a65f2), to(#9394ff)); - background: -o-linear-gradient(left, #7a65f2 0%, #9394ff 100%); - background: linear-gradient(to right, #7a65f2 0%, #9394ff 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); -} -.panel-kapacitor .panel-heading { - color: #fff; - background: #4ed8a0; - background: -webkit-linear-gradient(left, #4ed8a0 0%, #7ce490 100%); - background: -webkit-gradient(linear, left top, right top, from(#4ed8a0), to(#7ce490)); - background: -o-linear-gradient(left, #4ed8a0 0%, #7ce490 100%); - background: linear-gradient(to right, #4ed8a0 0%, #7ce490 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); +.panel-danger .panel-title:after { + position: absolute; + bottom: 0; + left: 0; + display: block; + width: 100%; + height: 2px; + content: ''; + background-color: #31313d; } .panel-spring .panel-heading { - color: #fff; - background: #22adf6; - background: -webkit-linear-gradient(left, #22adf6 0%, #4ed8a0 100%); - background: -webkit-gradient(linear, left top, right top, from(#22adf6), to(#4ed8a0)); - background: -o-linear-gradient(left, #22adf6 0%, #4ed8a0 100%); - background: linear-gradient(to right, #22adf6 0%, #4ed8a0 100%); + color: #383846; + background: #00c9ff; + background: -webkit-linear-gradient(left, #00c9ff 0%, #7ce490 100%); + background: -webkit-gradient(linear, left top, right top, from(#00c9ff), to(#7ce490)); + background: -o-linear-gradient(left, #00c9ff 0%, #7ce490 100%); + background: linear-gradient(to right, #00c9ff 0%, #7ce490 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); } +.panel-spring .panel-heading + .panel-body { + position: relative; +} +.panel-spring .panel-heading + .panel-body:after, +.panel-spring .panel-heading + .panel-body:before { + position: absolute; + top: 0; + display: block; + width: 2px; + height: 70%; + content: ''; +} +.panel-spring .panel-heading + .panel-body:after { + left: 0; + background: #00c9ff; + background: -webkit-linear-gradient(top, #00c9ff 0%, #292933 100%); + background: -webkit-gradient(linear, left top, left bottom, from(#00c9ff), to(#292933)); + background: -o-linear-gradient(top, #00c9ff 0%, #292933 100%); + background: linear-gradient(to bottom, #00c9ff 0%, #292933 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=0); +} +.panel-spring .panel-heading + .panel-body:before { + right: 0; + background: #7ce490; + background: -webkit-linear-gradient(top, #7ce490 0%, #292933 100%); + background: -webkit-gradient(linear, left top, left bottom, from(#7ce490), to(#292933)); + background: -o-linear-gradient(top, #7ce490 0%, #292933 100%); + background: linear-gradient(to bottom, #7ce490 0%, #292933 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=0); +} +.panel-spring .panel-title { + color: #383846; +} .panel-summer .panel-heading { - color: #fff; - background: #00c9ff; - background: -webkit-linear-gradient(left, #00c9ff 0%, #b1b6ff 100%); - background: -webkit-gradient(linear, left top, right top, from(#00c9ff), to(#b1b6ff)); - background: -o-linear-gradient(left, #00c9ff 0%, #b1b6ff 100%); - background: linear-gradient(to right, #00c9ff 0%, #b1b6ff 100%); + color: #383846; + background: #22adf6; + background: -webkit-linear-gradient(left, #22adf6 0%, #6bdfff 100%); + background: -webkit-gradient(linear, left top, right top, from(#22adf6), to(#6bdfff)); + background: -o-linear-gradient(left, #22adf6 0%, #6bdfff 100%); + background: linear-gradient(to right, #22adf6 0%, #6bdfff 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); } +.panel-summer .panel-heading + .panel-body { + position: relative; +} +.panel-summer .panel-heading + .panel-body:after, +.panel-summer .panel-heading + .panel-body:before { + position: absolute; + top: 0; + display: block; + width: 2px; + height: 70%; + content: ''; +} +.panel-summer .panel-heading + .panel-body:after { + left: 0; + background: #22adf6; + background: -webkit-linear-gradient(top, #22adf6 0%, #292933 100%); + background: -webkit-gradient(linear, left top, left bottom, from(#22adf6), to(#292933)); + background: -o-linear-gradient(top, #22adf6 0%, #292933 100%); + background: linear-gradient(to bottom, #22adf6 0%, #292933 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=0); +} +.panel-summer .panel-heading + .panel-body:before { + right: 0; + background: #6bdfff; + background: -webkit-linear-gradient(top, #6bdfff 0%, #292933 100%); + background: -webkit-gradient(linear, left top, left bottom, from(#6bdfff), to(#292933)); + background: -o-linear-gradient(top, #6bdfff 0%, #292933 100%); + background: linear-gradient(to bottom, #6bdfff 0%, #292933 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=0); +} +.panel-summer .panel-title { + color: #383846; +} .panel-fall .panel-heading { - color: #fff; - background: #9394ff; - background: -webkit-linear-gradient(left, #9394ff 0%, #ff8564 100%); - background: -webkit-gradient(linear, left top, right top, from(#9394ff), to(#ff8564)); - background: -o-linear-gradient(left, #9394ff 0%, #ff8564 100%); - background: linear-gradient(to right, #9394ff 0%, #ff8564 100%); + color: #383846; + background: #ff8564; + background: -webkit-linear-gradient(left, #ff8564 0%, #b1b6ff 100%); + background: -webkit-gradient(linear, left top, right top, from(#ff8564), to(#b1b6ff)); + background: -o-linear-gradient(left, #ff8564 0%, #b1b6ff 100%); + background: linear-gradient(to right, #ff8564 0%, #b1b6ff 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); } +.panel-fall .panel-heading + .panel-body { + position: relative; +} +.panel-fall .panel-heading + .panel-body:after, +.panel-fall .panel-heading + .panel-body:before { + position: absolute; + top: 0; + display: block; + width: 2px; + height: 70%; + content: ''; +} +.panel-fall .panel-heading + .panel-body:after { + left: 0; + background: #ff8564; + background: -webkit-linear-gradient(top, #ff8564 0%, #292933 100%); + background: -webkit-gradient(linear, left top, left bottom, from(#ff8564), to(#292933)); + background: -o-linear-gradient(top, #ff8564 0%, #292933 100%); + background: linear-gradient(to bottom, #ff8564 0%, #292933 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=0); +} +.panel-fall .panel-heading + .panel-body:before { + right: 0; + background: #b1b6ff; + background: -webkit-linear-gradient(top, #b1b6ff 0%, #292933 100%); + background: -webkit-gradient(linear, left top, left bottom, from(#b1b6ff), to(#292933)); + background: -o-linear-gradient(top, #b1b6ff 0%, #292933 100%); + background: linear-gradient(to bottom, #b1b6ff 0%, #292933 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=0); +} +.panel-fall .panel-title { + color: #383846; +} .panel-winter .panel-heading { - color: #fff; + color: #383846; background: #22adf6; - background: -webkit-linear-gradient(left, #22adf6 0%, #9394ff 100%); - background: -webkit-gradient(linear, left top, right top, from(#22adf6), to(#9394ff)); - background: -o-linear-gradient(left, #22adf6 0%, #9394ff 100%); - background: linear-gradient(to right, #22adf6 0%, #9394ff 100%); + background: -webkit-linear-gradient(left, #22adf6 0%, #b1b6ff 100%); + background: -webkit-gradient(linear, left top, right top, from(#22adf6), to(#b1b6ff)); + background: -o-linear-gradient(left, #22adf6 0%, #b1b6ff 100%); + background: linear-gradient(to right, #22adf6 0%, #b1b6ff 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); } +.panel-winter .panel-heading + .panel-body { + position: relative; +} +.panel-winter .panel-heading + .panel-body:after, +.panel-winter .panel-heading + .panel-body:before { + position: absolute; + top: 0; + display: block; + width: 2px; + height: 70%; + content: ''; +} +.panel-winter .panel-heading + .panel-body:after { + left: 0; + background: #22adf6; + background: -webkit-linear-gradient(top, #22adf6 0%, #292933 100%); + background: -webkit-gradient(linear, left top, left bottom, from(#22adf6), to(#292933)); + background: -o-linear-gradient(top, #22adf6 0%, #292933 100%); + background: linear-gradient(to bottom, #22adf6 0%, #292933 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=0); +} +.panel-winter .panel-heading + .panel-body:before { + right: 0; + background: #b1b6ff; + background: -webkit-linear-gradient(top, #b1b6ff 0%, #292933 100%); + background: -webkit-gradient(linear, left top, left bottom, from(#b1b6ff), to(#292933)); + background: -o-linear-gradient(top, #b1b6ff 0%, #292933 100%); + background: linear-gradient(to bottom, #b1b6ff 0%, #292933 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=0); +} +.panel-winter .panel-title { + color: #383846; +} .panel-minimal { - background-color: transparent !important; + margin: 0; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; } .panel-minimal .panel-heading { padding-right: 0; @@ -1282,12 +3967,12 @@ fieldset[disabled] .btn-link-success:active:focus { background-color: transparent; } .panel-minimal .panel-title { - font-size: 24px; - font-weight: 300 !important; - color: #676978 !important; + font-size: 19px; + font-weight: 400; + color: #a4a8b6; } .panel-minimal .panel-body { - background-color: #fff; + background-color: #292933; border-top-left-radius: 4px; border-top-right-radius: 4px; } @@ -1302,6 +3987,9 @@ fieldset[disabled] .btn-link-success:active:focus { .panel-collapse .panel-body { border-top: 2px solid #fafafc; } +.panel-collapse .panel-body > *:last-child { + margin-bottom: 0 !important; +} .panel-collapse.panel-collapse-grey .panel-title a { color: #676978 !important; } @@ -1315,12 +4003,7 @@ fieldset[disabled] .btn-link-success:active:focus { background-color: #f2fff4; } .panel-collapse.panel-collapse-mint .panel-body { - background: #c6ffd0; - background: -webkit-linear-gradient(top, #c6ffd0 0%, #f2fff4 100%); - background: -webkit-gradient(linear, left top, left bottom, from(#c6ffd0), to(#f2fff4)); - background: -o-linear-gradient(top, #c6ffd0 0%, #f2fff4 100%); - background: linear-gradient(to bottom, #c6ffd0 0%, #f2fff4 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=0); + background-color: #f2fff4; border-color: #c6ffd0; } .panel-collapse.panel-collapse-mint .panel-title a { @@ -1367,12 +4050,7 @@ fieldset[disabled] .btn-link-success:active:focus { background-color: #f0fcff; } .panel-collapse.panel-collapse-frost .panel-body { - background: #bef0ff; - background: -webkit-linear-gradient(top, #bef0ff 0%, #f0fcff 100%); - background: -webkit-gradient(linear, left top, left bottom, from(#bef0ff), to(#f0fcff)); - background: -o-linear-gradient(top, #bef0ff 0%, #f0fcff 100%); - background: linear-gradient(to bottom, #bef0ff 0%, #f0fcff 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=0); + background-color: #f0fcff; border-color: #bef0ff; } .panel-collapse.panel-collapse-frost .panel-title a { @@ -1412,85 +4090,21 @@ fieldset[disabled] .btn-link-success:active:focus { .panel-collapse.panel-collapse-frost pre::-webkit-scrollbar-resizer { background-color: #fff; } -.panel-anim { - -webkit-transition: all .25s ease; - -o-transition: all .25s ease; - transition: all .25s ease; +.panel-collapse.panel-collapse-sm .panel-heading { + padding: 6px 11px; } -.panel-checkmark { - position: absolute; - top: -20px; - right: 10px; - width: 38px; - height: 38px; - font-weight: 900; - line-height: 38px; - color: #22adf6; - text-align: center; - background-color: #7ce490; - border-radius: 50%; - opacity: 0; - -webkit-transition: all .4s cubic-bezier(.175, .885, .32, 1.275); - -o-transition: all .4s cubic-bezier(.175, .885, .32, 1.275); - transition: all .4s cubic-bezier(.175, .885, .32, 1.275); +.panel-collapse.panel-collapse-sm .panel-title { + margin: 2px 0 3px 0; } -.panel-disabled, -.panel-available, -.panel-selected { - position: relative; - display: block; - width: 100%; - overflow: hidden; - text-align: center; - outline: none; +.panel-collapse.panel-collapse-sm .panel-title a { + font-size: 14px; + font-weight: 600; } -.panel-disabled .panel-heading, -.panel-available .panel-heading, -.panel-selected .panel-heading, -.panel-disabled .panel-body, -.panel-available .panel-body, -.panel-selected .panel-body { - background-color: transparent; +.panel-collapse.panel-collapse-sm .panel-title a span.caret { + margin-right: 4px; } -.panel-disabled .panel-footer, -.panel-available .panel-footer, -.panel-selected .panel-footer { - border-color: transparent !important; -} -.panel-disabled .panel-title, -.panel-available .panel-title, -.panel-selected .panel-title { - font-size: 36px; - font-weight: 200 !important; -} -.panel-disabled { - color: #a4a8b6; - background-color: #f6f6f8; - border-color: #d4d7dd; -} -.panel-available { - background-color: #fff; - -webkit-transition: background-color .25s ease, color .25s ease, border-color .25s ease; - -o-transition: background-color .25s ease, color .25s ease, border-color .25s ease; - transition: background-color .25s ease, color .25s ease, border-color .25s ease; -} -.panel-available:hover { - cursor: pointer; - background-color: #f0fcff; - border-color: #bef0ff; -} -.panel-selected { - color: #fff; - background-color: #4591ed; - border-color: #326bba; -} -.panel-selected .panel-checkmark { - top: 10px; - opacity: 1; -} -.panel-selected:focus { - -webkit-box-shadow: 0 0 10px #4591ed; - box-shadow: 0 0 10px #4591ed; +.panel-collapse.panel-collapse-sm .panel-title a span.caret:after { + font-size: 13px; } .panel > .table { border-top: 2px solid #eef0f2; @@ -1516,27 +4130,27 @@ fieldset[disabled] .btn-link-success:active:focus { } .label.label-default { color: inherit; - background-color: #e7e8eb; + background-color: #0f0e15; } .label.label-primary { - color: #4591ed; - background-color: #f0fcff; + color: #00c9ff; + background-color: #0f0e15; } .label.label-success { - color: #32b08c; - background-color: #f2fff4; + color: #4ed8a0; + background-color: #0f0e15; } .label.label-info { - color: #8e91a1; - background-color: #fff; + color: #c6cad3; + background-color: #0f0e15; } .label.label-warning { - color: #7a65f2; - background-color: #f2f4ff; + color: #9394ff; + background-color: #0f0e15; } .label.label-danger { - color: #f95f53; - background-color: #fff7f4; + color: #ff8564; + background-color: #0f0e15; } h1 .label, h2 .label { @@ -1558,55 +4172,366 @@ h6 .label, p .label { letter-spacing: .04em; } -h1.deluxe .label, -h2.deluxe .label, -h3.deluxe .label { - font-weight: 400; +.dropdown { + position: relative; + display: inline-block; + width: auto; } -h4.deluxe .label, -h5.deluxe .label, -h6.deluxe .label { - letter-spacing: .15em; +.dropdown .dropdown-toggle { + width: 120px; } -.dropdown-menu { - padding: 4px; - background-color: #292933; +.dropdown-80 .dropdown-toggle { + width: 80px; +} +.dropdown-90 .dropdown-toggle { + width: 90px; +} +.dropdown-100 .dropdown-toggle { + width: 100px; +} +.dropdown-110 .dropdown-toggle { + width: 110px; +} +.dropdown-120 .dropdown-toggle { + width: 120px; +} +.dropdown-130 .dropdown-toggle { + width: 130px; +} +.dropdown-140 .dropdown-toggle { + width: 140px; +} +.dropdown-150 .dropdown-toggle { + width: 150px; +} +.dropdown-160 .dropdown-toggle { + width: 160px; +} +.dropdown-170 .dropdown-toggle { + width: 170px; +} +.dropdown-180 .dropdown-toggle { + width: 180px; +} +.dropdown-190 .dropdown-toggle { + width: 190px; +} +.dropdown-200 .dropdown-toggle { + width: 200px; +} +.dropdown-210 .dropdown-toggle { + width: 210px; +} +.dropdown-220 .dropdown-toggle { + width: 220px; +} +.dropdown-230 .dropdown-toggle { + width: 230px; +} +.dropdown-240 .dropdown-toggle { + width: 240px; +} +.dropdown-250 .dropdown-toggle { + width: 250px; +} +.dropdown-260 .dropdown-toggle { + width: 260px; +} +.dropdown-270 .dropdown-toggle { + width: 270px; +} +.dropdown-280 .dropdown-toggle { + width: 280px; +} +.dropdown-290 .dropdown-toggle { + width: 290px; +} +.dropdown-300 .dropdown-toggle { + width: 300px; +} +.dropdown-320 .dropdown-toggle { + width: 320px; +} +.dropdown-340 .dropdown-toggle { + width: 340px; +} +.dropdown-toggle { + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + text-align: left; + + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; +} +.dropdown-toggle .caret { + position: absolute; + top: -webkit-calc(50% + 1px); + top: calc(50% + 1px); + right: 14px; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + -o-transform: translateY(-50%); + transform: translateY(-50%); +} +.dropdown-toggle > .icon { + display: inline-block; + margin-right: 6px; + vertical-align: middle; +} +.dropdown-toggle .dropdown-selected { + display: inline-block; + padding-right: 14px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + -webkit-box-flex: 1; + -webkit-flex: 1 0 0; + -ms-flex: 1 0 0; + flex: 1 0 0; +} +.dropdown-toggle.btn-xs .caret { + right: 7px; +} +.dropdown-toggle.btn-xs .dropdown-selected { + padding-right: 7px; +} +.dropdown-toggle.btn-sm .caret { + right: 11px; +} +.dropdown-toggle.btn-sm .dropdown-selected { + padding-right: 11px; +} +.dropdown-toggle.btn-md .caret { + right: 14px; +} +.dropdown-toggle.btn-md .dropdown-selected { + padding-right: 14px; +} +.dropdown-toggle.btn-lg .caret { + right: 17px; +} +.dropdown-toggle.btn-lg .dropdown-selected { + padding-right: 17px; +} +.dropdown .dropdown-menu { + min-width: 100%; + padding: 0; + margin-top: 0; + overflow: hidden; + background: #4591ed; + background: -webkit-linear-gradient(left, #4591ed 0%, #22adf6 100%); + background: -webkit-gradient(linear, left top, right top, from(#4591ed), to(#22adf6)); + background: -o-linear-gradient(left, #4591ed 0%, #22adf6 100%); + background: linear-gradient(to right, #4591ed 0%, #22adf6 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); border: 0; - -webkit-box-shadow: none; - box-shadow: none; + -webkit-box-shadow: 0 2px 5px .6px rgba(15, 14, 21, .992); + box-shadow: 0 2px 5px .6px rgba(15, 14, 21, .992); } -.dropdown-menu .divider { - height: 2px; - margin: 5px 0; - background-color: #434453; +.dropdown-menu li.dropdown-item { + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + width: 100%; + padding: 0; + margin: 0; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; } -.dropdown-menu .dropdown-header { - font-weight: 600; - color: #676978; - text-transform: uppercase; +.dropdown-menu li.dropdown-item:hover { + background: #00c9ff; + background: -webkit-linear-gradient(left, #00c9ff 0%, #22adf6 100%); + background: -webkit-gradient(linear, left top, right top, from(#00c9ff), to(#22adf6)); + background: -o-linear-gradient(left, #00c9ff 0%, #22adf6 100%); + background: linear-gradient(to right, #00c9ff 0%, #22adf6 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); } -.dropdown-menu > li > a { - padding: 4px 11px; - font-weight: 400; - color: #c6cad3; - border-radius: 3px; - -webkit-transition: background-color .25s ease, color .25s ease; - -o-transition: background-color .25s ease, color .25s ease; - transition: background-color .25s ease, color .25s ease; +.dropdown-menu li.dropdown-item > a { + padding: 7px 9px; + font-size: 13px; + font-weight: 500; + line-height: 13px; + color: #f0fcff; + outline: none; + -webkit-transition: color .25s ease; + -o-transition: color .25s ease; + transition: color .25s ease; + + -webkit-box-flex: 1; + -webkit-flex: 1 0 0; + -ms-flex: 1 0 0; + flex: 1 0 0; } -.dropdown-menu > li > a .badge { - color: #9394ff; - background-color: #202028; +.dropdown-menu li.dropdown-item > a, +.dropdown-menu li.dropdown-item > a:hover, +.dropdown-menu li.dropdown-item > a:focus { + background: none; + background-color: transparent; } -.dropdown-menu > li > a:hover, -.dropdown-menu > li > a:focus { +.dropdown-menu li.dropdown-item > a:hover { color: #fff; - background-color: #545667; } -.dropdown-menu > .active > a, -.dropdown-menu > .active > a:hover, -.dropdown-menu > .active > a:focus { +.dropdown-menu li.dropdown-item > a.active, +.dropdown-menu li.dropdown-item > a.active:hover, +.dropdown-menu li.dropdown-item > a:active, +.dropdown-menu li.dropdown-item > a:active:hover, +.dropdown-menu li.dropdown-item > a:focus:active, +.dropdown-menu li.dropdown-item > a:focus:active:hover { + color: #fff; + background: #6bdfff; + background: -webkit-linear-gradient(left, #6bdfff 0%, #22adf6 100%); + background: -webkit-gradient(linear, left top, right top, from(#6bdfff), to(#22adf6)); + background: -o-linear-gradient(left, #6bdfff 0%, #22adf6 100%); + background: linear-gradient(to right, #6bdfff 0%, #22adf6 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); +} +.dropdown .dropdown-menu .dropdown-actions { + position: absolute; + top: 50%; + right: 4px; + z-index: 2; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + opacity: 0; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + -o-transform: translateY(-50%); + transform: translateY(-50%); + + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; +} +.dropdown .dropdown-menu li.dropdown-item:hover .dropdown-actions { + opacity: 1; +} +.dropdown .dropdown-menu .dropdown-action { + width: 27px; + height: 27px; + padding: 0; + margin: 0; + line-height: 27px; + color: #326bba; + text-align: center; + background-color: transparent; + outline: none; + -webkit-transition: color .25s ease; + -o-transition: color .25s ease; + transition: color .25s ease; +} +.dropdown .dropdown-menu .dropdown-action:hover { + color: #fff; + cursor: pointer; +} +.dropdown .dropdown-menu li.dropdown-header { + padding: 7px 9px; + margin: 0; + font-size: 13px; font-weight: 600; + line-height: 13px; + color: #326bba; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background-color: #22adf6; +} +.dropdown .dropdown-menu li.dropdown-divider { + width: 100%; + height: 2px; + margin: 0; + background-color: #22adf6; +} +/* + Kapacitor Theme Dropdowns +*/ +.dropdown .dropdown-menu.dropdown-malachite { + background: #22adf6; + background: -webkit-linear-gradient(left, #22adf6 0%, #4ed8a0 100%); + background: -webkit-gradient(linear, left top, right top, from(#22adf6), to(#4ed8a0)); + background: -o-linear-gradient(left, #22adf6 0%, #4ed8a0 100%); + background: linear-gradient(to right, #22adf6 0%, #4ed8a0 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); +} +.dropdown .dropdown-menu.dropdown-malachite li.dropdown-item:hover { + background: #00c9ff; + background: -webkit-linear-gradient(left, #00c9ff 0%, #4ed8a0 100%); + background: -webkit-gradient(linear, left top, right top, from(#00c9ff), to(#4ed8a0)); + background: -o-linear-gradient(left, #00c9ff 0%, #4ed8a0 100%); + background: linear-gradient(to right, #00c9ff 0%, #4ed8a0 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); +} +.dropdown .dropdown-menu.dropdown-malachite li.dropdown-item > a { + color: #f2fff4; +} +.dropdown .dropdown-menu.dropdown-malachite li.dropdown-item > a:hover { + color: #fff; +} +.dropdown .dropdown-menu.dropdown-malachite li.dropdown-item > a.active, +.dropdown .dropdown-menu.dropdown-malachite li.dropdown-item > a.active:hover, +.dropdown .dropdown-menu.dropdown-malachite li.dropdown-item > a:active, +.dropdown .dropdown-menu.dropdown-malachite li.dropdown-item > a:active:hover, +.dropdown .dropdown-menu.dropdown-malachite li.dropdown-item > a:focus:active, +.dropdown .dropdown-menu.dropdown-malachite li.dropdown-item > a:focus:active:hover { + color: #fff; + background: #6bdfff; + background: -webkit-linear-gradient(left, #6bdfff 0%, #4ed8a0 100%); + background: -webkit-gradient(linear, left top, right top, from(#6bdfff), to(#4ed8a0)); + background: -o-linear-gradient(left, #6bdfff 0%, #4ed8a0 100%); + background: linear-gradient(to right, #6bdfff 0%, #4ed8a0 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); +} +.dropdown .dropdown-menu.dropdown-malachite li.dropdown-item .dropdown-action { + color: #108174; +} +.dropdown .dropdown-menu.dropdown-malachite li.dropdown-item .dropdown-action:hover { + color: #fff; +} +.dropdown .dropdown-menu.dropdown-malachite li.dropdown-divider { + background-color: #4ed8a0; +} +.dropdown .dropdown-menu.dropdown-malachite li.dropdown-header { + color: #108174; + background-color: #4ed8a0; +} +/* + Purple Theme Dropdowns +*/ +.dropdown .dropdown-menu.dropdown-astronaut { + background: #4591ed; + background: -webkit-linear-gradient(left, #4591ed 0%, #9394ff 100%); + background: -webkit-gradient(linear, left top, right top, from(#4591ed), to(#9394ff)); + background: -o-linear-gradient(left, #4591ed 0%, #9394ff 100%); + background: linear-gradient(to right, #4591ed 0%, #9394ff 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); +} +.dropdown .dropdown-menu.dropdown-astronaut li.dropdown-item:hover { background: #22adf6; background: -webkit-linear-gradient(left, #22adf6 0%, #9394ff 100%); background: -webkit-gradient(linear, left top, right top, from(#22adf6), to(#9394ff)); @@ -1614,21 +4539,749 @@ h6.deluxe .label { background: linear-gradient(to right, #22adf6 0%, #9394ff 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); } -.dropdown-menu > .active > a .badge, -.dropdown-menu > .active > a:hover .badge, -.dropdown-menu > .active > a:focus .badge { - color: #9394ff; - background-color: #fff; +.dropdown .dropdown-menu.dropdown-astronaut li.dropdown-item > a { + color: #f2f4ff; } -.influx-logo { - display: inline-block; +.dropdown .dropdown-menu.dropdown-astronaut li.dropdown-item > a:hover { + color: #fff; +} +.dropdown .dropdown-menu.dropdown-astronaut li.dropdown-item > a.active, +.dropdown .dropdown-menu.dropdown-astronaut li.dropdown-item > a.active:hover, +.dropdown .dropdown-menu.dropdown-astronaut li.dropdown-item > a:active, +.dropdown .dropdown-menu.dropdown-astronaut li.dropdown-item > a:active:hover, +.dropdown .dropdown-menu.dropdown-astronaut li.dropdown-item > a:focus:active, +.dropdown .dropdown-menu.dropdown-astronaut li.dropdown-item > a:focus:active:hover { + color: #fff; + background: #00c9ff; + background: -webkit-linear-gradient(left, #00c9ff 0%, #9394ff 100%); + background: -webkit-gradient(linear, left top, right top, from(#00c9ff), to(#9394ff)); + background: -o-linear-gradient(left, #00c9ff 0%, #9394ff 100%); + background: linear-gradient(to right, #00c9ff 0%, #9394ff 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); +} +.dropdown .dropdown-menu.dropdown-astronaut li.dropdown-item .dropdown-action { + color: #513cc6; +} +.dropdown .dropdown-menu.dropdown-astronaut li.dropdown-item .dropdown-action:hover { + color: #fff; +} +.dropdown .dropdown-menu.dropdown-astronaut li.dropdown-divider { + background-color: #9394ff; +} +.dropdown .dropdown-menu.dropdown-astronaut li.dropdown-header { + color: #513cc6; + background-color: #9394ff; +} +.alert { + position: relative; + padding: 16px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + border-style: solid; + border-width: 0; + border-radius: 4px; +} +.alert button.close { + position: absolute; + top: 50%; + right: 12px; + width: 20px; height: 20px; + font-size: 14.5px; + outline: none; + opacity: .25; + -webkit-transition: opacity .25s ease; + -o-transition: opacity .25s ease; + transition: opacity .25s ease; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + -o-transform: translateY(-50%); + transform: translateY(-50%); +} +.alert button.close:hover { + opacity: 1; +} +.alert-icon { + padding-left: 56px; +} +.alert-icon span.icon:not(.remove) { + position: absolute; + top: 50%; + left: 16px; + width: 25px; + margin: 0; + font-size: 21px; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + -o-transform: translateY(-50%); + transform: translateY(-50%); +} +.alert-success { + font-size: 16px; + color: #fff; + background: #4ed8a0; + background: -webkit-linear-gradient(left, #4ed8a0 0%, #22adf6 100%); + background: -webkit-gradient(linear, left top, right top, from(#4ed8a0), to(#22adf6)); + background: -o-linear-gradient(left, #4ed8a0 0%, #22adf6 100%); + background: linear-gradient(to right, #4ed8a0 0%, #22adf6 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); +} +.alert-success a:link, +.alert-success a:visited { + font-weight: 700; + color: #c6ffd0; + text-decoration: underline; + -webkit-transition: color .25s ease; + -o-transition: color .25s ease; + transition: color .25s ease; +} +.alert-success a:hover { + color: #fff; + border-color: #fff; +} +.alert-success span.icon { + color: #fff; +} +.alert-primary { + font-size: 16px; + color: #fff; + background: #22adf6; + background: -webkit-linear-gradient(left, #22adf6 0%, #4591ed 100%); + background: -webkit-gradient(linear, left top, right top, from(#22adf6), to(#4591ed)); + background: -o-linear-gradient(left, #22adf6 0%, #4591ed 100%); + background: linear-gradient(to right, #22adf6 0%, #4591ed 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); +} +.alert-primary a:link, +.alert-primary a:visited { + font-weight: 700; + color: #bef0ff; + text-decoration: underline; + -webkit-transition: color .25s ease; + -o-transition: color .25s ease; + transition: color .25s ease; +} +.alert-primary a:hover { + color: #fff; + border-color: #fff; +} +.alert-primary span.icon { + color: #fff; +} +.alert-warning { + font-size: 16px; + color: #fff; + background: #7a65f2; + background: -webkit-linear-gradient(left, #7a65f2 0%, #22adf6 100%); + background: -webkit-gradient(linear, left top, right top, from(#7a65f2), to(#22adf6)); + background: -o-linear-gradient(left, #7a65f2 0%, #22adf6 100%); + background: linear-gradient(to right, #7a65f2 0%, #22adf6 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); +} +.alert-warning a:link, +.alert-warning a:visited { + font-weight: 700; + color: #bef0ff; + text-decoration: underline; + -webkit-transition: color .25s ease; + -o-transition: color .25s ease; + transition: color .25s ease; +} +.alert-warning a:hover { + color: #fff; + border-color: #fff; +} +.alert-warning span.icon { + color: #fff; +} +.alert-danger { + font-size: 16px; + color: #fff; + background: #f95f53; + background: -webkit-linear-gradient(left, #f95f53 0%, #7a65f2 100%); + background: -webkit-gradient(linear, left top, right top, from(#f95f53), to(#7a65f2)); + background: -o-linear-gradient(left, #f95f53 0%, #7a65f2 100%); + background: linear-gradient(to right, #f95f53 0%, #7a65f2 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); +} +.alert-danger a:link, +.alert-danger a:visited { + font-weight: 700; + color: #ffdccf; + text-decoration: underline; + -webkit-transition: color .25s ease; + -o-transition: color .25s ease; + transition: color .25s ease; +} +.alert-danger a:hover { + color: #fff; + border-color: #fff; +} +.alert-danger span.icon { + color: #fff; +} +.alert-info { + font-size: 16px; + color: #676978; + background: #fff; + background: -webkit-linear-gradient(left, #fff 0%, #e7e8eb 100%); + background: -webkit-gradient(linear, left top, right top, from(#fff), to(#e7e8eb)); + background: -o-linear-gradient(left, #fff 0%, #e7e8eb 100%); + background: linear-gradient(to right, #fff 0%, #e7e8eb 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); +} +.alert-info a:link, +.alert-info a:visited { + font-weight: 700; + color: #22adf6; + text-decoration: underline; + -webkit-transition: color .25s ease; + -o-transition: color .25s ease; + transition: color .25s ease; +} +.alert-info a:hover { + color: #00c9ff; + border-color: #00c9ff; +} +.alert-info span.icon { + color: #676978; +} +.progress, +.progress-bar { + height: 16px; + -webkit-box-shadow: none !important; + box-shadow: none !important; +} +.progress { + background-color: #202028; + border-radius: 8px; +} +.progress.progress-lg { + height: 32px; + border-radius: 16px; +} +.progress.progress-lg .progress-bar { + height: 32px; +} +.progress.progress-lg .progress-bar span { + font-size: 20px; + font-weight: 400; + line-height: 32px; +} +.progress.progress-sm { + height: 10px; + border-radius: 5px; +} +.progress.progress-sm .progress-bar { + height: 10px; +} +.progress.progress-xs { + height: 2px; + border-radius: 1px; +} +.progress.progress-xs .progress-bar { + height: 2px; +} +.progress.progress-sm .progress-bar span, +.progress.progress-xs .progress-bar span { + display: none !important; +} +.progress-bar { + position: relative; + background-color: #545667; +} +.progress-bar span { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + font-size: 12px; + font-weight: 600; + line-height: 16px; + color: #fff; + text-align: center; +} +.progress-bar-primary { + background: #22adf6; + background: -webkit-linear-gradient(left, #22adf6 0%, #00c9ff 100%); + background: -webkit-gradient(linear, left top, right top, from(#22adf6), to(#00c9ff)); + background: -o-linear-gradient(left, #22adf6 0%, #00c9ff 100%); + background: linear-gradient(to right, #22adf6 0%, #00c9ff 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); +} +.progress-bar-primary span { + color: #fff; +} +.progress-bar-success { + background: #4ed8a0; + background: -webkit-linear-gradient(left, #4ed8a0 0%, #7ce490 100%); + background: -webkit-gradient(linear, left top, right top, from(#4ed8a0), to(#7ce490)); + background: -o-linear-gradient(left, #4ed8a0 0%, #7ce490 100%); + background: linear-gradient(to right, #4ed8a0 0%, #7ce490 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); +} +.progress-bar-success span { + color: #fff; +} +.progress-bar-info { + background: #434453; + background: -webkit-linear-gradient(left, #434453 0%, #676978 100%); + background: -webkit-gradient(linear, left top, right top, from(#434453), to(#676978)); + background: -o-linear-gradient(left, #434453 0%, #676978 100%); + background: linear-gradient(to right, #434453 0%, #676978 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); +} +.progress-bar-info span { + color: #fff; +} +.progress-bar-warning { + background: #7a65f2; + background: -webkit-linear-gradient(left, #7a65f2 0%, #9394ff 100%); + background: -webkit-gradient(linear, left top, right top, from(#7a65f2), to(#9394ff)); + background: -o-linear-gradient(left, #7a65f2 0%, #9394ff 100%); + background: linear-gradient(to right, #7a65f2 0%, #9394ff 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); +} +.progress-bar-warning span { + color: #fff; +} +.progress-bar-danger { + background: #f95f53; + background: -webkit-linear-gradient(left, #f95f53 0%, #ff8564 100%); + background: -webkit-gradient(linear, left top, right top, from(#f95f53), to(#ff8564)); + background: -o-linear-gradient(left, #f95f53 0%, #ff8564 100%); + background: linear-gradient(to right, #f95f53 0%, #ff8564 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); +} +.progress-bar-danger span { + color: #fff; +} +.progress-bar-spring { + background: #00c9ff; + background: -webkit-linear-gradient(left, #00c9ff 0%, #4ed8a0 100%); + background: -webkit-gradient(linear, left top, right top, from(#00c9ff), to(#4ed8a0)); + background: -o-linear-gradient(left, #00c9ff 0%, #4ed8a0 100%); + background: linear-gradient(to right, #00c9ff 0%, #4ed8a0 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); +} +.progress-bar-spring span { + color: #fff; +} +.progress-bar-summer { + background: #22adf6; + background: -webkit-linear-gradient(left, #22adf6 0%, #6bdfff 100%); + background: -webkit-gradient(linear, left top, right top, from(#22adf6), to(#6bdfff)); + background: -o-linear-gradient(left, #22adf6 0%, #6bdfff 100%); + background: linear-gradient(to right, #22adf6 0%, #6bdfff 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); +} +.progress-bar-summer span { + color: #fff; +} +.progress-bar-fall { + background: #ff8564; + background: -webkit-linear-gradient(left, #ff8564 0%, #b1b6ff 100%); + background: -webkit-gradient(linear, left top, right top, from(#ff8564), to(#b1b6ff)); + background: -o-linear-gradient(left, #ff8564 0%, #b1b6ff 100%); + background: linear-gradient(to right, #ff8564 0%, #b1b6ff 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); +} +.progress-bar-fall span { + color: #fff; +} +.progress-bar-winter { + background: #22adf6; + background: -webkit-linear-gradient(left, #22adf6 0%, #9394ff 100%); + background: -webkit-gradient(linear, left top, right top, from(#22adf6), to(#9394ff)); + background: -o-linear-gradient(left, #22adf6 0%, #9394ff 100%); + background: linear-gradient(to right, #22adf6 0%, #9394ff 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); +} +.progress-bar-winter span { + color: #fff; +} +.progress-heatmap { + position: relative; + background: -webkit-linear-gradient(left, #22adf6 0%, #7a65f2 57%, #f95f53 93%, #ff8564 100%); + background: -webkit-gradient(linear, left top, right top, from(#22adf6), color-stop(57%, #7a65f2), color-stop(93%, #f95f53), to(#ff8564)); + background: -o-linear-gradient(left, #22adf6 0%, #7a65f2 57%, #f95f53 93%, #ff8564 100%); + background: linear-gradient(to right, #22adf6 0%, #7a65f2 57%, #f95f53 93%, #ff8564 100%); + background-color: #22adf6; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@c-pool', endColorstr='@c-dreamsicle', GradientType=1); +} +.progress-heatmap .progress-bar { + position: relative; + float: right; + background: transparent; + background-color: #202028; +} +.list-group { + padding: 2px; + text-shadow: none; + background-color: #fff; + border-bottom: 2px solid #eeeff2; + border-radius: 4px; +} +.list-group-item { + background-color: #fafafc; + border: 2px solid #fff; + border-radius: 5px !important; +} +a.list-group-item { + font-weight: 600; + color: #545667; + -webkit-transition: background-color .25s ease, color .25s ease; + -o-transition: background-color .25s ease, color .25s ease; + transition: background-color .25s ease, color .25s ease; +} +a.list-group-item:hover { + color: #545667; + background-color: #eeeff2; +} +a.list-group-item p { + font-weight: 400; +} +.list-group-item.active, +.list-group-item.active:hover, +.list-group-item.active:focus { + background: #22adf6; + background: -webkit-linear-gradient(left, #22adf6 0%, #9394ff 100%); + background: -webkit-gradient(linear, left top, right top, from(#22adf6), to(#9394ff)); + background: -o-linear-gradient(left, #22adf6 0%, #9394ff 100%); + background: linear-gradient(to right, #22adf6 0%, #9394ff 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); + border-color: #fff; +} +.list-group-item.active .badge, +.list-group-item.active:hover .badge, +.list-group-item.active:focus .badge { + text-shadow: none; +} +.well { + padding: 30px; + background-color: #292933; + border-width: 0; + -webkit-box-shadow: none; + box-shadow: none; +} +.well.well-light { + background-color: #31313d; +} +.well.well-white { + background-color: #383846; +} +.well.well-outline { + background-color: transparent; + border: 2px solid #292933; +} +.well > *:first-child { + margin-top: 0; +} +.well > *:last-child { + margin-bottom: 0; +} +.page-header { + margin: 50px 0 30px 0; + border-bottom-width: 2px; +} +.page-header h1 { + font-weight: 300; +} +.page-header--anchor { + position: relative; + top: -120px; + display: block; + visibility: hidden; +} +.page-header a:link, +.page-header a:active, +.page-header a:visited, +.page-header a:hover { + color: inherit; +} +.jumbotron { + color: #757888; + background-color: #fff; + border-bottom: 2px solid #eeeff2; +} +.jumbotron h1 { + margin-bottom: 30px; + font-weight: 200; +} +.jumbotron p, +.jumbotron ul, +.jumbotron li { + font-weight: 400; +} +.table th { + padding: 8px; + font-size: 13px; + font-weight: 500; + color: #eeeff2; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.table td { + font-size: 12px; + font-weight: 500; + color: #bec2cc; +} +.table > thead > tr > td.active, +.table > tbody > tr > td.active, +.table > tfoot > tr > td.active, +.table > thead > tr > th.active, +.table > tbody > tr > th.active, +.table > tfoot > tr > th.active, +.table > thead > tr.active > td, +.table > tbody > tr.active > td, +.table > tfoot > tr.active > td, +.table > thead > tr.active > th, +.table > tbody > tr.active > th, +.table > tfoot > tr.active > th { + background-color: #fafafc; +} +.table-hover > tbody > tr > td.active:hover, +.table-hover > tbody > tr > th.active:hover, +.table-hover > tbody > tr.active:hover > td, +.table-hover > tbody > tr:hover > .active, +.table-hover > tbody > tr.active:hover > th { + background-color: #eaeaf2; +} +.table > thead > tr > td.primary, +.table > tbody > tr > td.primary, +.table > tfoot > tr > td.primary, +.table > thead > tr > th.primary, +.table > tbody > tr > th.primary, +.table > tfoot > tr > th.primary, +.table > thead > tr.primary > td, +.table > tbody > tr.primary > td, +.table > tfoot > tr.primary > td, +.table > thead > tr.primary > th, +.table > tbody > tr.primary > th, +.table > tfoot > tr.primary > th { + background-color: #f0fcff; +} +.table-hover > tbody > tr > td.primary:hover, +.table-hover > tbody > tr > th.primary:hover, +.table-hover > tbody > tr.primary:hover > td, +.table-hover > tbody > tr:hover > .primary, +.table-hover > tbody > tr.primary:hover > th { + background-color: #d7f7ff; +} +.table > thead > tr > td.success, +.table > tbody > tr > td.success, +.table > tfoot > tr > td.success, +.table > thead > tr > th.success, +.table > tbody > tr > th.success, +.table > tfoot > tr > th.success, +.table > thead > tr.success > td, +.table > tbody > tr.success > td, +.table > tfoot > tr.success > td, +.table > thead > tr.success > th, +.table > tbody > tr.success > th, +.table > tfoot > tr.success > th { + background-color: #f2fff4; +} +.table-hover > tbody > tr > td.success:hover, +.table-hover > tbody > tr > th.success:hover, +.table-hover > tbody > tr.success:hover > td, +.table-hover > tbody > tr:hover > .success, +.table-hover > tbody > tr.success:hover > th { + background-color: #d9ffde; +} +.table > thead > tr > td.info, +.table > tbody > tr > td.info, +.table > tfoot > tr > td.info, +.table > thead > tr > th.info, +.table > tbody > tr > th.info, +.table > tfoot > tr > th.info, +.table > thead > tr.info > td, +.table > tbody > tr.info > td, +.table > tfoot > tr.info > td, +.table > thead > tr.info > th, +.table > tbody > tr.info > th, +.table > tfoot > tr.info > th { + background-color: #676978; +} +.table-hover > tbody > tr > td.info:hover, +.table-hover > tbody > tr > th.info:hover, +.table-hover > tbody > tr.info:hover > td, +.table-hover > tbody > tr:hover > .info, +.table-hover > tbody > tr.info:hover > th { + background-color: #5b5d6a; +} +.table > thead > tr > td.warning, +.table > tbody > tr > td.warning, +.table > tfoot > tr > td.warning, +.table > thead > tr > th.warning, +.table > tbody > tr > th.warning, +.table > tfoot > tr > th.warning, +.table > thead > tr.warning > td, +.table > tbody > tr.warning > td, +.table > tfoot > tr.warning > td, +.table > thead > tr.warning > th, +.table > tbody > tr.warning > th, +.table > tfoot > tr.warning > th { + background-color: #f2f4ff; +} +.table-hover > tbody > tr > td.warning:hover, +.table-hover > tbody > tr > th.warning:hover, +.table-hover > tbody > tr.warning:hover > td, +.table-hover > tbody > tr:hover > .warning, +.table-hover > tbody > tr.warning:hover > th { + background-color: #d9deff; +} +.table > thead > tr > td.danger, +.table > tbody > tr > td.danger, +.table > tfoot > tr > td.danger, +.table > thead > tr > th.danger, +.table > tbody > tr > th.danger, +.table > tfoot > tr > th.danger, +.table > thead > tr.danger > td, +.table > tbody > tr.danger > td, +.table > tfoot > tr.danger > td, +.table > thead > tr.danger > th, +.table > tbody > tr.danger > th, +.table > tfoot > tr.danger > th { + background-color: #fff7f4; +} +.table-hover > tbody > tr > td.danger:hover, +.table-hover > tbody > tr > th.danger:hover, +.table-hover > tbody > tr.danger:hover > td, +.table-hover > tbody > tr:hover > .danger, +.table-hover > tbody > tr.danger:hover > th { + background-color: #ffe4db; +} +.table td.info, +.table th.info, +.table tr.info > td, +.table tr.info > th { + color: #fff; +} +.table td.danger, +.table th.danger, +.table tr.danger > td, +.table tr.danger > th { + color: #f95f53; +} +.table > thead > tr > th, +.table > tbody > tr > th, +.table > tfoot > tr > th, +.table > thead > tr > td, +.table > tbody > tr > td, +.table > tfoot > tr > td { + border-top: 0; +} +.table > thead > tr > th { + padding: 8px; + border-color: #383846; +} +.table > tbody > tr > td, +.table > tbody > tr > th { + padding: 6px 8px; +} +.table.v-center td { + vertical-align: middle; +} +.table.v-center td > * { + display: inline-block; + margin-top: 2px; + margin-bottom: 2px; + vertical-align: middle; +} +.table-bordered { + border: 2px solid #31313d; +} +.table-bordered > thead > tr > th, +.table-bordered > tbody > tr > th, +.table-bordered > tfoot > tr > th, +.table-bordered > thead > tr > td, +.table-bordered > tbody > tr > td, +.table-bordered > tfoot > tr > td { + border: 2px solid #31313d; +} +.table-striped > tbody > tr:nth-child(odd) { + background-color: #31313d; +} +.table-striped > tbody > tr:nth-child(even) { + background-color: transparent; +} +.table-highlight > tbody > tr { + -webkit-transition: background-color .25s ease; + -o-transition: background-color .25s ease; + transition: background-color .25s ease; +} +.table-highlight > tbody > tr:hover { + background-color: #31313d; +} +.table-responsive { + border: 2px solid #31313d; +} +.table-responsive::-webkit-scrollbar { + width: 14px; + height: 14px; +} +.table-responsive::-webkit-scrollbar-button { + background-color: #31313d; +} +.table-responsive::-webkit-scrollbar-track { + background-color: #31313d; +} +.table-responsive::-webkit-scrollbar-track-piece { + background: #31313d; +} +.table-responsive::-webkit-scrollbar-thumb { + background-color: #22adf6; + border: 4px solid #31313d; + border-radius: 7px; +} +.table-responsive::-webkit-scrollbar-corner { + background-color: #31313d; +} +.table-responsive::-webkit-scrollbar-resizer { + background-color: #22adf6; +} +.table-responsive .table { + margin-bottom: 0; + border: 0 !important; +} +.table-responsive .table thead th, +.table-responsive .table tbody td { + white-space: nowrap; +} +.table-responsive .table thead th:first-child, +.table-responsive .table tbody td:first-child { + border-left: 0 !important; +} +.table-responsive .table thead th:last-child, +.table-responsive .table tbody td:last-child { + border-right: 0 !important; +} +@media screen and (max-width: 767px) { + .table-responsive { + border: 2px solid #31313d; + } +} +.panel .panel-body table.table { + margin: 0; } .navbar { border-style: solid; border-width: 2px; border-radius: 4px; } +.navbar-nav { + width: auto !important; +} +.navbar-nav > li { + padding: 0; + margin: 0; +} .navbar-nav > li > a { padding-right: 18px; padding-left: 18px; @@ -1778,498 +5431,729 @@ h6.deluxe .label { background-repeat: repeat-x; } } -.alert { - position: relative; - border-style: solid; - border-width: 2px 2px 2px 40px; +.nav-tablist { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + width: auto; + height: 38px; + padding: 0; + margin: 0; + overflow: hidden; + border: 2px solid #383846; border-radius: 4px; + + -webkit-box-align: stretch; + -webkit-align-items: stretch; + -ms-flex-align: stretch; + align-items: stretch; } -.alert button.close { - position: absolute; - top: 8px; - right: 8px; - width: 20px; - height: 20px; - font-size: 14px; +.nav-tablist > li { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0 14px; + margin: 0; + font-size: 15px; + font-weight: 600; + color: #999dab; + background-color: #202028; + -webkit-transition: background-color .25s ease, color .25s ease; + -o-transition: background-color .25s ease, color .25s ease; + transition: background-color .25s ease, color .25s ease; + + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; } -.alert span.icon:not(.remove) { +.nav-tablist > li:hover { + color: #d4d7dd; + cursor: pointer; + background-color: #31313d; +} +.nav-tablist > li.active { + color: #f6f6f8; + background-color: #383846; +} +.nav-tablist > li.disabled, +.nav-tablist > li[disabled="true"], +.nav-tablist > li.disabled:hover, +.nav-tablist > li[disabled="true"]:hover { + font-style: italic; + color: #545667; + cursor: not-allowed; + background-color: #202028; +} +/* Size Modifiers */ +.nav-tablist.nav-tablist-lg { + height: 46px; +} +.nav-tablist.nav-tablist-lg > li { + padding: 0 17px; + font-size: 17px; +} +.nav-tablist.nav-tablist-md { + height: 38px; +} +.nav-tablist.nav-tablist-md > li { + padding: 0 14px; + font-size: 15px; +} +.nav-tablist.nav-tablist-sm { + height: 30px; +} +.nav-tablist.nav-tablist-sm > li { + padding: 0 11px; + font-size: 13px; +} +.nav-tablist.nav-tablist-xs { + height: 22px; +} +.nav-tablist.nav-tablist-xs > li { + padding: 0 7px; + font-size: 12px; +} +/* Theme Modifiers */ +.nav-tablist.nav-tablist-malachite > li { + background-color: #292933; +} +.nav-tablist.nav-tablist-malachite > li:hover { + background-color: #31313d; +} +.nav-tablist.nav-tablist-malachite > li.active { + color: #4ed8a0; + background-color: #383846; +} +.nav-tablist.nav-tablist-malachite > li.disabled, +.nav-tablist.nav-tablist-malachite > li[disabled="true"], +.nav-tablist.nav-tablist-malachite > li.disabled:hover, +.nav-tablist.nav-tablist-malachite > li[disabled="true"]:hover { + color: #545667; + background-color: #292933; +} +.microtabs-dismiss { + position: relative; + top: -1px; + right: -3px; + display: inline-block; + width: 16px; + height: 16px; + margin-left: -2px; + vertical-align: middle; + background-color: transparent; + border: 0; + outline: none; + /* Using pseudo elements to render an X */ + /* Hover State */ +} +.microtabs-dismiss:after, +.microtabs-dismiss:before { position: absolute; top: 50%; - left: -20px; - z-index: 4; - font-size: 18px; - -webkit-transform: translate(-50%, -50%); - -ms-transform: translate(-50%, -50%); - -o-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); -} -.alert-success { - color: #32b08c; - background-color: #f2fff4; - border-color: #c6ffd0; -} -.alert-success a:link, -.alert-success a:visited { - font-weight: 700; - color: #32b08c; - text-decoration: underline; - -webkit-transition: color .25s ease; - -o-transition: color .25s ease; - transition: color .25s ease; -} -.alert-success a:hover { - color: #4ed8a0; - border-color: #4ed8a0; -} -.alert-success button.close { - color: #32b08c; -} -.alert-success span.icon { - color: #32b08c; -} -.alert-primary { - color: #4591ed; - background-color: #f0fcff; - border-color: #bef0ff; -} -.alert-primary a:link, -.alert-primary a:visited { - font-weight: 700; - color: #4591ed; - text-decoration: underline; - -webkit-transition: color .25s ease; - -o-transition: color .25s ease; - transition: color .25s ease; -} -.alert-primary a:hover { - color: #22adf6; - border-color: #22adf6; -} -.alert-primary button.close { - color: #00c9ff; -} -.alert-primary span.icon { - color: #4591ed; -} -.alert-warning { - color: #7a65f2; - background-color: #f2f4ff; - border-color: #c9d0ff; -} -.alert-warning a:link, -.alert-warning a:visited { - font-weight: 700; - color: #7a65f2; - text-decoration: underline; - -webkit-transition: color .25s ease; - -o-transition: color .25s ease; - transition: color .25s ease; -} -.alert-warning a:hover { - color: #9394ff; - border-color: #9394ff; -} -.alert-warning button.close { - color: #9394ff; -} -.alert-warning span.icon { - color: #7a65f2; -} -.alert-danger { - color: #f95f53; - background-color: #fff7f4; - border-color: #ffdccf; -} -.alert-danger a:link, -.alert-danger a:visited { - font-weight: 700; - color: #f95f53; - text-decoration: underline; - -webkit-transition: color .25s ease; - -o-transition: color .25s ease; - transition: color .25s ease; -} -.alert-danger a:hover { - color: #ff8564; - border-color: #ff8564; -} -.alert-danger button.close { - color: #ff8564; -} -.alert-danger span.icon { - color: #f95f53; -} -.alert-info { - color: #676978; - background-color: #f6f6f8; - border-color: #e7e8eb; -} -.alert-info a:link, -.alert-info a:visited { - font-weight: 700; - color: #22adf6; - text-decoration: underline; - -webkit-transition: color .25s ease; - -o-transition: color .25s ease; - transition: color .25s ease; -} -.alert-info a:hover { - color: #00c9ff; - border-color: #00c9ff; -} -.alert-info button.close { - color: #999dab; -} -.alert-info span.icon { - color: #676978; -} -.progress, -.progress-bar { - height: 12px; - -webkit-box-shadow: none !important; - box-shadow: none !important; -} -.progress { - background-color: #eeeff2; - border-radius: 6px; -} -.progress-bar { - background: #22adf6; - background: -webkit-linear-gradient(left, #22adf6 0%, #00c9ff 100%); - background: -webkit-gradient(linear, left top, right top, from(#22adf6), to(#00c9ff)); - background: -o-linear-gradient(left, #22adf6 0%, #00c9ff 100%); - background: linear-gradient(to right, #22adf6 0%, #00c9ff 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); -} -.progress-bar-success { - background: #4ed8a0; - background: -webkit-linear-gradient(left, #4ed8a0 0%, #7ce490 100%); - background: -webkit-gradient(linear, left top, right top, from(#4ed8a0), to(#7ce490)); - background: -o-linear-gradient(left, #4ed8a0 0%, #7ce490 100%); - background: linear-gradient(to right, #4ed8a0 0%, #7ce490 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); -} -.progress-bar-info { - background: #434453; - background: -webkit-linear-gradient(left, #434453 0%, #676978 100%); - background: -webkit-gradient(linear, left top, right top, from(#434453), to(#676978)); - background: -o-linear-gradient(left, #434453 0%, #676978 100%); - background: linear-gradient(to right, #434453 0%, #676978 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); -} -.progress-bar-warning { - background: #7a65f2; - background: -webkit-linear-gradient(left, #7a65f2 0%, #9394ff 100%); - background: -webkit-gradient(linear, left top, right top, from(#7a65f2), to(#9394ff)); - background: -o-linear-gradient(left, #7a65f2 0%, #9394ff 100%); - background: linear-gradient(to right, #7a65f2 0%, #9394ff 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); -} -.progress-bar-danger { - background: #f95f53; - background: -webkit-linear-gradient(left, #f95f53 0%, #ff8564 100%); - background: -webkit-gradient(linear, left top, right top, from(#f95f53), to(#ff8564)); - background: -o-linear-gradient(left, #f95f53 0%, #ff8564 100%); - background: linear-gradient(to right, #f95f53 0%, #ff8564 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); -} -.progress-heatmap { - background: #00c9ff; - background: -webkit-linear-gradient(left, #00c9ff 0%, #9394ff 63%, #ff8564 99%), #eeeff2 100%; - background: -webkit-gradient(linear, left top, right top, from(#00c9ff), color-stop(63%, #9394ff), color-stop(99%, #ff8564), to(#eeeff2)); - background: -webkit-linear-gradient(left, #00c9ff 0%, #9394ff 63%, #ff8564 99%, #eeeff2 100%); - background: -o-linear-gradient(left, #00c9ff 0%, #9394ff 63%, #ff8564 99%, #eeeff2 100%); - background: linear-gradient(to right, #00c9ff 0%, #9394ff 63%, #ff8564 99%, #eeeff2 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@c-laser', endColorstr='@c-dreamsicle', GradientType=1); -} -.progress-heatmap .progress-bar { - position: relative; - background: transparent; -} -.progress-heatmap .progress-bar:after { - position: absolute; - top: 0; - left: 100%; - display: block; - width: 10000%; - height: 100%; + left: 50%; + width: 2px; + height: 11px; content: ''; + background-color: #d4d7dd; + border-radius: 1px; + -webkit-transition: background-color .25s ease; + -o-transition: background-color .25s ease; + transition: background-color .25s ease; +} +.microtabs-dismiss:after { + -webkit-transform: translate(-50%, -50%) rotate(45deg); + -ms-transform: translate(-50%, -50%) rotate(45deg); + -o-transform: translate(-50%, -50%) rotate(45deg); + transform: translate(-50%, -50%) rotate(45deg); +} +.microtabs-dismiss:before { + -webkit-transform: translate(-50%, -50%) rotate(-45deg); + -ms-transform: translate(-50%, -50%) rotate(-45deg); + -o-transform: translate(-50%, -50%) rotate(-45deg); + transform: translate(-50%, -50%) rotate(-45deg); +} +.microtabs-dismiss:hover { + cursor: pointer; +} +.microtabs-dismiss:hover:after, +.microtabs-dismiss:hover:before { + background-color: #ff8564; +} +.nav-microtabs { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 9px 9px 0 9px; + margin: 0; background-color: #eeeff2; + + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + /* Contextual Alternatives */ + /* Common Seasonal Styles */ } -.list-group { - padding: 2px; - text-shadow: none; - background-color: #fff; - border-bottom: 2px solid #eeeff2; - border-radius: 4px; +.nav-microtabs > li { + padding: 0 !important; + margin: 0 !important; } -.list-group-item { - background-color: #fafafc; - border: 2px solid #fff; - border-radius: 5px !important; -} -a.list-group-item { - font-weight: 600; - color: #545667; +.nav-microtabs > li > a { + position: relative; + height: 30px; + padding: 0 9px; + margin: 0 2px 0 0; + font-size: 13px; + font-weight: 500; + line-height: 30px; + color: #999dab; + background-color: #eeeff2; + border: 0; + border-radius: 3px 3px 0 0; -webkit-transition: background-color .25s ease, color .25s ease; -o-transition: background-color .25s ease, color .25s ease; transition: background-color .25s ease, color .25s ease; } -a.list-group-item:hover { - color: #545667; - background-color: #eeeff2; -} -a.list-group-item p { - font-weight: 400; -} -.list-group-item.active, -.list-group-item.active:hover, -.list-group-item.active:focus { - background: #22adf6; - background: -webkit-linear-gradient(left, #22adf6 0%, #9394ff 100%); - background: -webkit-gradient(linear, left top, right top, from(#22adf6), to(#9394ff)); - background: -o-linear-gradient(left, #22adf6 0%, #9394ff 100%); - background: linear-gradient(to right, #22adf6 0%, #9394ff 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); - border-color: #fff; -} -.list-group-item.active .badge, -.list-group-item.active:hover .badge, -.list-group-item.active:focus .badge { - text-shadow: none; -} -.well { - background-color: #f6f6f8; - border-color: #eeeff2; - border-style: solid; - border-width: 2px 0 0 0; - -webkit-box-shadow: none !important; - box-shadow: none !important; -} -.well.well-light { +.nav-microtabs > li > a:hover { + color: #676978; + cursor: pointer; background-color: #fafafc; - border-color: #f6f6f8; } -.well.well-white { - background-color: #fff; - border-color: #f6f6f8; +.nav-microtabs > li:last-of-type > a { + margin-right: 0; } -.well.well-outline { - background-color: transparent; - border: 2px solid #eeeff2; -} -.page-header { - margin: 50px 0 30px 0; - border-bottom-width: 2px; -} -.page-header h1 { - font-weight: 300; -} -.jumbotron { +.nav-microtabs > li.active > a { color: #757888; background-color: #fff; - border-bottom: 2px solid #eeeff2; } -.jumbotron h1 { - margin-bottom: 30px; - font-weight: 200; +.nav-microtabs > li.disabled > a { + font-style: italic; + color: #c6cad3; } -.jumbotron p, -.jumbotron ul, -.jumbotron li { - font-weight: 400; +.nav-microtabs > li.disabled > a:hover, +.nav-microtabs > li.disabled > a:focus { + color: #c6cad3; + text-decoration: none; + cursor: not-allowed; + background-color: #eeeff2; } -.table th { - font-weight: 500; - color: #676978; +.nav-microtabs-dark { + background-color: #434453; } -.table td { - color: #676978; +.nav-microtabs-dark .microtabs-dismiss { + background-color: transparent; + /* Using pseudo elements to render an X */ + /* Hover State */ } -.table > thead > tr > td.active, -.table > tbody > tr > td.active, -.table > tfoot > tr > td.active, -.table > thead > tr > th.active, -.table > tbody > tr > th.active, -.table > tfoot > tr > th.active, -.table > thead > tr.active > td, -.table > tbody > tr.active > td, -.table > tfoot > tr.active > td, -.table > thead > tr.active > th, -.table > tbody > tr.active > th, -.table > tfoot > tr.active > th { - background-color: #fafafc; +.nav-microtabs-dark .microtabs-dismiss:after, +.nav-microtabs-dark .microtabs-dismiss:before { + width: 2px; + background-color: #8e91a1; } -.table-hover > tbody > tr > td.active:hover, -.table-hover > tbody > tr > th.active:hover, -.table-hover > tbody > tr.active:hover > td, -.table-hover > tbody > tr:hover > .active, -.table-hover > tbody > tr.active:hover > th { - background-color: #eaeaf2; +.nav-microtabs-dark .microtabs-dismiss:hover:after, +.nav-microtabs-dark .microtabs-dismiss:hover:before { + background-color: #ffb6a0; } -.table > thead > tr > td.primary, -.table > tbody > tr > td.primary, -.table > tfoot > tr > td.primary, -.table > thead > tr > th.primary, -.table > tbody > tr > th.primary, -.table > tfoot > tr > th.primary, -.table > thead > tr.primary > td, -.table > tbody > tr.primary > td, -.table > tfoot > tr.primary > td, -.table > thead > tr.primary > th, -.table > tbody > tr.primary > th, -.table > tfoot > tr.primary > th { - background-color: #f0fcff; +.nav-microtabs-dark > li > a { + color: #bec2cc; + background-color: #545667; } -.table-hover > tbody > tr > td.primary:hover, -.table-hover > tbody > tr > th.primary:hover, -.table-hover > tbody > tr.primary:hover > td, -.table-hover > tbody > tr:hover > .primary, -.table-hover > tbody > tr.primary:hover > th { - background-color: #d7f7ff; -} -.table > thead > tr > td.success, -.table > tbody > tr > td.success, -.table > tfoot > tr > td.success, -.table > thead > tr > th.success, -.table > tbody > tr > th.success, -.table > tfoot > tr > th.success, -.table > thead > tr.success > td, -.table > tbody > tr.success > td, -.table > tfoot > tr.success > td, -.table > thead > tr.success > th, -.table > tbody > tr.success > th, -.table > tfoot > tr.success > th { - background-color: #f2fff4; -} -.table-hover > tbody > tr > td.success:hover, -.table-hover > tbody > tr > th.success:hover, -.table-hover > tbody > tr.success:hover > td, -.table-hover > tbody > tr:hover > .success, -.table-hover > tbody > tr.success:hover > th { - background-color: #d9ffde; -} -.table > thead > tr > td.info, -.table > tbody > tr > td.info, -.table > tfoot > tr > td.info, -.table > thead > tr > th.info, -.table > tbody > tr > th.info, -.table > tfoot > tr > th.info, -.table > thead > tr.info > td, -.table > tbody > tr.info > td, -.table > tfoot > tr.info > td, -.table > thead > tr.info > th, -.table > tbody > tr.info > th, -.table > tfoot > tr.info > th { +.nav-microtabs-dark > li > a:hover { + color: #f6f6f8; background-color: #676978; } -.table-hover > tbody > tr > td.info:hover, -.table-hover > tbody > tr > th.info:hover, -.table-hover > tbody > tr.info:hover > td, -.table-hover > tbody > tr:hover > .info, -.table-hover > tbody > tr.info:hover > th { - background-color: #5b5d6a; +.nav-microtabs-dark > li.active > a { + color: #f6f6f8; + background-color: #676978; } -.table > thead > tr > td.warning, -.table > tbody > tr > td.warning, -.table > tfoot > tr > td.warning, -.table > thead > tr > th.warning, -.table > tbody > tr > th.warning, -.table > tfoot > tr > th.warning, -.table > thead > tr.warning > td, -.table > tbody > tr.warning > td, -.table > tfoot > tr.warning > td, -.table > thead > tr.warning > th, -.table > tbody > tr.warning > th, -.table > tfoot > tr.warning > th { - background-color: #f2f4ff; +.nav-microtabs-dark > li.disabled > a { + color: #999dab; + background-color: #545667; } -.table-hover > tbody > tr > td.warning:hover, -.table-hover > tbody > tr > th.warning:hover, -.table-hover > tbody > tr.warning:hover > td, -.table-hover > tbody > tr:hover > .warning, -.table-hover > tbody > tr.warning:hover > th { - background-color: #d9deff; +.nav-microtabs-dark > li.disabled > a:hover, +.nav-microtabs-dark > li.disabled > a:focus { + color: #999dab; + background-color: #545667; } -.table > thead > tr > td.danger, -.table > tbody > tr > td.danger, -.table > tfoot > tr > td.danger, -.table > thead > tr > th.danger, -.table > tbody > tr > th.danger, -.table > tfoot > tr > th.danger, -.table > thead > tr.danger > td, -.table > tbody > tr.danger > td, -.table > tfoot > tr.danger > td, -.table > thead > tr.danger > th, -.table > tbody > tr.danger > th, -.table > tfoot > tr.danger > th { - background-color: #fff7f4; +.nav-microtabs-darker { + background-color: #383846; } -.table-hover > tbody > tr > td.danger:hover, -.table-hover > tbody > tr > th.danger:hover, -.table-hover > tbody > tr.danger:hover > td, -.table-hover > tbody > tr:hover > .danger, -.table-hover > tbody > tr.danger:hover > th { - background-color: #ffe4db; +.nav-microtabs-darker .microtabs-dismiss { + background-color: transparent; + /* Using pseudo elements to render an X */ + /* Hover State */ } -.table td.info, -.table th.info, -.table tr.info > td, -.table tr.info > th { +.nav-microtabs-darker .microtabs-dismiss:after, +.nav-microtabs-darker .microtabs-dismiss:before { + width: 2px; + background-color: #8e91a1; +} +.nav-microtabs-darker .microtabs-dismiss:hover:after, +.nav-microtabs-darker .microtabs-dismiss:hover:before { + background-color: #ffb6a0; +} +.nav-microtabs-darker > li > a { + color: #bec2cc; + background-color: #383846; +} +.nav-microtabs-darker > li > a:hover { + color: #f6f6f8; + background-color: #434453; +} +.nav-microtabs-darker > li.active > a { + color: #f6f6f8; + background-color: #434453; +} +.nav-microtabs-darker > li.disabled > a { + color: #8e91a1; + background-color: #383846; +} +.nav-microtabs-darker > li.disabled > a:hover, +.nav-microtabs-darker > li.disabled > a:focus { + color: #8e91a1; + background-color: #383846; +} +.nav-microtabs-white { + position: relative; + background-color: #fff; + /* Using pseudo element for border since it can be z-indexed beneath the tabs */ +} +.panel-heading + .nav-microtabs-white { + /* Reduced top padding looks better when next to a matching panel heading */ + padding-top: 2px; +} +.nav-microtabs-white:before { + position: absolute; + bottom: 0; + left: 0; + z-index: 1; + width: 100%; + height: 2px; + content: ''; + background-color: #f6f6f8; +} +.nav-microtabs-white > li { + position: relative; + z-index: 2; +} +.nav-microtabs-white > li > a { + /* Removing 4px for borders, keeps text vertically centered */ + line-height: 26px; + background-color: #f6f6f8; + border-color: #f6f6f8; + border-style: solid; + border-width: 2px; + -webkit-transition: background-color .25s ease, border-color .25s ease, color .25s ease; + -o-transition: background-color .25s ease, border-color .25s ease, color .25s ease; + transition: background-color .25s ease, border-color .25s ease, color .25s ease; +} +.nav-microtabs-white > li > a:hover { + background-color: #fff; + border-color: #f6f6f8; +} +.nav-microtabs-white > li.active > a { + color: #676978; + background-color: #fff; + border-color: #f6f6f8 #f6f6f8 #fff #f6f6f8; +} +.nav-microtabs-white > li.disabled > a { + color: #c6cad3; + border-color: #fff #fff #f6f6f8 #fff; +} +.nav-microtabs-white > li.disabled > a:hover, +.nav-microtabs-white > li.disabled > a:focus { + color: #c6cad3; + background-color: #fff; + border-color: #fff #fff #f6f6f8 #fff; +} +.nav-microtabs-spring, +.nav-microtabs-summer, +.nav-microtabs-fall, +.nav-microtabs-winter { + /* Styles for dismiss buttons inside seasonal alternatives */ +} +.panel-heading + .nav-microtabs-spring, +.panel-heading + .nav-microtabs-summer, +.panel-heading + .nav-microtabs-fall, +.panel-heading + .nav-microtabs-winter { + /* Reduced top padding looks better when next to a matching panel heading */ + padding-top: 2px; +} +.nav-microtabs-spring .microtabs-dismiss, +.nav-microtabs-summer .microtabs-dismiss, +.nav-microtabs-fall .microtabs-dismiss, +.nav-microtabs-winter .microtabs-dismiss { + right: -5px; + margin-left: -4px; + /* Using pseudo elements to render an X */ + /* Hover State */ +} +.nav-microtabs-spring .microtabs-dismiss:after, +.nav-microtabs-summer .microtabs-dismiss:after, +.nav-microtabs-fall .microtabs-dismiss:after, +.nav-microtabs-winter .microtabs-dismiss:after, +.nav-microtabs-spring .microtabs-dismiss:before, +.nav-microtabs-summer .microtabs-dismiss:before, +.nav-microtabs-fall .microtabs-dismiss:before, +.nav-microtabs-winter .microtabs-dismiss:before { + width: 2px; + height: 8px; + background-color: #676978; + border-radius: 0; + -webkit-transition: height .25s ease; + -o-transition: height .25s ease; + transition: height .25s ease; +} +.nav-microtabs-spring .microtabs-dismiss:after, +.nav-microtabs-summer .microtabs-dismiss:after, +.nav-microtabs-fall .microtabs-dismiss:after, +.nav-microtabs-winter .microtabs-dismiss:after { + -webkit-transform: translate(-50%, -50%) rotate(45deg); + -ms-transform: translate(-50%, -50%) rotate(45deg); + -o-transform: translate(-50%, -50%) rotate(45deg); + transform: translate(-50%, -50%) rotate(45deg); +} +.nav-microtabs-spring .microtabs-dismiss:before, +.nav-microtabs-summer .microtabs-dismiss:before, +.nav-microtabs-fall .microtabs-dismiss:before, +.nav-microtabs-winter .microtabs-dismiss:before { + -webkit-transform: translate(-50%, -50%) rotate(-45deg); + -ms-transform: translate(-50%, -50%) rotate(-45deg); + -o-transform: translate(-50%, -50%) rotate(-45deg); + transform: translate(-50%, -50%) rotate(-45deg); +} +.nav-microtabs-spring .microtabs-dismiss:hover, +.nav-microtabs-summer .microtabs-dismiss:hover, +.nav-microtabs-fall .microtabs-dismiss:hover, +.nav-microtabs-winter .microtabs-dismiss:hover { + cursor: pointer; +} +.nav-microtabs-spring .microtabs-dismiss:hover:after, +.nav-microtabs-summer .microtabs-dismiss:hover:after, +.nav-microtabs-fall .microtabs-dismiss:hover:after, +.nav-microtabs-winter .microtabs-dismiss:hover:after, +.nav-microtabs-spring .microtabs-dismiss:hover:before, +.nav-microtabs-summer .microtabs-dismiss:hover:before, +.nav-microtabs-fall .microtabs-dismiss:hover:before, +.nav-microtabs-winter .microtabs-dismiss:hover:before { + height: 12px; +} +.nav-microtabs-spring > li > a, +.nav-microtabs-summer > li > a, +.nav-microtabs-fall > li > a, +.nav-microtabs-winter > li > a { + color: #676978; + background-color: rgba(255, 255, 255, .4); +} +.nav-microtabs-spring > li > a:hover, +.nav-microtabs-summer > li > a:hover, +.nav-microtabs-fall > li > a:hover, +.nav-microtabs-winter > li > a:hover { + color: #676978; + background-color: rgba(255, 255, 255, .67); +} +.nav-microtabs-spring > li.active > a, +.nav-microtabs-summer > li.active > a, +.nav-microtabs-fall > li.active > a, +.nav-microtabs-winter > li.active > a { + color: #676978; + background-color: #fff; +} +.nav-microtabs-spring > li.active > a .microtabs-dismiss, +.nav-microtabs-summer > li.active > a .microtabs-dismiss, +.nav-microtabs-fall > li.active > a .microtabs-dismiss, +.nav-microtabs-winter > li.active > a .microtabs-dismiss { + background-color: transparent; +} +.nav-microtabs-spring > li.active > a .microtabs-dismiss:after, +.nav-microtabs-summer > li.active > a .microtabs-dismiss:after, +.nav-microtabs-fall > li.active > a .microtabs-dismiss:after, +.nav-microtabs-winter > li.active > a .microtabs-dismiss:after, +.nav-microtabs-spring > li.active > a .microtabs-dismiss:before, +.nav-microtabs-summer > li.active > a .microtabs-dismiss:before, +.nav-microtabs-fall > li.active > a .microtabs-dismiss:before, +.nav-microtabs-winter > li.active > a .microtabs-dismiss:before { + background-color: #bec2cc; +} +.nav-microtabs-spring > li.disabled > a, +.nav-microtabs-summer > li.disabled > a, +.nav-microtabs-fall > li.disabled > a, +.nav-microtabs-winter > li.disabled > a { + color: rgba(255, 255, 255, .68); + background-color: rgba(255, 255, 255, .19); +} +.nav-microtabs-spring > li.disabled > a:hover, +.nav-microtabs-summer > li.disabled > a:hover, +.nav-microtabs-fall > li.disabled > a:hover, +.nav-microtabs-winter > li.disabled > a:hover, +.nav-microtabs-spring > li.disabled > a:focus, +.nav-microtabs-summer > li.disabled > a:focus, +.nav-microtabs-fall > li.disabled > a:focus, +.nav-microtabs-winter > li.disabled > a:focus { + color: rgba(255, 255, 255, .68); + background-color: rgba(255, 255, 255, .19); +} +.nav-microtabs-spring { + background: #00c9ff; + background: -webkit-linear-gradient(left, #00c9ff 0%, #7ce490 100%); + background: -webkit-gradient(linear, left top, right top, from(#00c9ff), to(#7ce490)); + background: -o-linear-gradient(left, #00c9ff 0%, #7ce490 100%); + background: linear-gradient(to right, #00c9ff 0%, #7ce490 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); +} +.nav-microtabs-summer { + background: #22adf6; + background: -webkit-linear-gradient(left, #22adf6 0%, #6bdfff 100%); + background: -webkit-gradient(linear, left top, right top, from(#22adf6), to(#6bdfff)); + background: -o-linear-gradient(left, #22adf6 0%, #6bdfff 100%); + background: linear-gradient(to right, #22adf6 0%, #6bdfff 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); +} +.nav-microtabs-fall { + background: #ff8564; + background: -webkit-linear-gradient(left, #ff8564 0%, #b1b6ff 100%); + background: -webkit-gradient(linear, left top, right top, from(#ff8564), to(#b1b6ff)); + background: -o-linear-gradient(left, #ff8564 0%, #b1b6ff 100%); + background: linear-gradient(to right, #ff8564 0%, #b1b6ff 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); +} +.nav-microtabs-winter { + background: #22adf6; + background: -webkit-linear-gradient(left, #22adf6 0%, #b1b6ff 100%); + background: -webkit-gradient(linear, left top, right top, from(#22adf6), to(#b1b6ff)); + background: -o-linear-gradient(left, #22adf6 0%, #b1b6ff 100%); + background: linear-gradient(to right, #22adf6 0%, #b1b6ff 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); +} +/* + Increase left & right padding on tab container to match panel paadding + when it is directly inside a panel +*/ +.panel > .nav-microtabs { + padding-right: 30px; + padding-left: 30px; +} +code { + padding: 2.5px 5px; + margin: 0 1px 0 2px; + font-family: "Roboto Mono", monospace; + font-size: 11px; + font-weight: 500; + line-height: 11px; + color: #22adf6; + letter-spacing: .02em; + background-color: #202028; + border: 0; + border-radius: 2px; + /* Reset default tag styles */ +} +code b, +code strong, +code i, +code em, +code mark, +code small, +code del, +code ins, +code sub, +code sup, +code u { + position: static; + top: 0; + bottom: 0; + padding: 0; + font-size: 11px; + font-style: normal; + font-weight: 500; + color: #22adf6; + text-decoration: none; + background-color: inherit; +} +code sup, +code sub { + position: relative; + margin-left: 2px; + font-size: 85%; + color: inherit; +} +code sup { + top: -4px; +} +code sub { + top: 4px; +} +code b { + color: #ff8564; +} +code i { + color: #22adf6; +} +code u { + color: #4ed8a0; +} +code.rainbow-highlighter { + text-shadow: none; + background-image: none; +} +pre { + position: relative; + font-family: "Roboto Mono", monospace; + font-size: 11px; + line-height: 17px; + color: #22adf6; + white-space: normal; + background-color: #202028; + border: 0; + border-radius: 4px; +} +pre code { + margin: 0; + word-break: normal; + word-wrap: normal; + white-space: pre-wrap; + background-color: transparent; + background-image: none; + border: none; + border-radius: 0; +} +pre::-webkit-scrollbar { + width: 14px; + height: 14px; +} +pre::-webkit-scrollbar-button { + background-color: #202028; +} +pre::-webkit-scrollbar-track { + background-color: #202028; +} +pre::-webkit-scrollbar-track-piece { + background: #202028; +} +pre::-webkit-scrollbar-thumb { + background-color: #22adf6; + border: 4px solid #202028; + border-radius: 7px; +} +pre::-webkit-scrollbar-corner { + background-color: #202028; +} +pre::-webkit-scrollbar-resizer { + background-color: #22adf6; +} +pre.rainbow-highlighter { + background-image: none; +} +pre.rainbow-highlighter::-webkit-scrollbar { + width: 14px; + height: 14px; +} +pre.rainbow-highlighter::-webkit-scrollbar-button { + background-color: #202028; +} +pre.rainbow-highlighter::-webkit-scrollbar-track { + background-color: #202028; +} +pre.rainbow-highlighter::-webkit-scrollbar-track-piece { + background: #202028; +} +pre.rainbow-highlighter::-webkit-scrollbar-thumb { + background-color: #22adf6; + border: 4px solid #202028; + border-radius: 7px; +} +pre.rainbow-highlighter::-webkit-scrollbar-corner { + background-color: #202028; +} +pre.rainbow-highlighter::-webkit-scrollbar-resizer { + background-color: #22adf6; +} +pre.rainbow-highlighter code { + text-shadow: none; +} +/* Code Highlighting */ +code.rainbow-highlighter, +pre.rainbow-highlighter { + color: #b1b6ff; + border-color: #1f2039; + /* Literal highlighting */ +} +code.rainbow-highlighter b, +pre.rainbow-highlighter b { + color: #8e91a1; +} +code.rainbow-highlighter strong, +pre.rainbow-highlighter strong { + color: #6bdfff; +} +code.rainbow-highlighter i, +pre.rainbow-highlighter i { + color: #22adf6; +} +code.rainbow-highlighter em, +pre.rainbow-highlighter em { + color: #32b08c; +} +code.rainbow-highlighter mark, +pre.rainbow-highlighter mark { + color: #7ce490; +} +code.rainbow-highlighter small, +pre.rainbow-highlighter small { color: #fff; } -.table td.danger, -.table th.danger, -.table tr.danger > td, -.table tr.danger > th { +code.rainbow-highlighter del, +pre.rainbow-highlighter del { color: #f95f53; } -.table > thead > tr > th, -.table > tbody > tr > th, -.table > tfoot > tr > th, -.table > thead > tr > td, -.table > tbody > tr > td, -.table > tfoot > tr > td { - border-top: 2px solid #f6f6f8; +code.rainbow-highlighter ins, +pre.rainbow-highlighter ins { + color: #ffb6a0; } -.table.v-center td { - vertical-align: middle; +code.rainbow-highlighter sub, +pre.rainbow-highlighter sub { + color: #7ce490; } -.table.v-center td > * { +code.rainbow-highlighter sup, +pre.rainbow-highlighter sup { + color: #9394ff; +} +code.rainbow-highlighter u, +pre.rainbow-highlighter u { + padding: 2px 4px; + color: #b1b6ff; + text-indent: -4px; + background-color: #434453; +} +code.rainbow-highlighter sup, +pre.rainbow-highlighter sup, +code.rainbow-highlighter sub, +pre.rainbow-highlighter sub { + position: initial; + top: 0; + margin: 0; + font-size: 100%; +} +/* Language Labels */ +pre:before { display: inline-block; - vertical-align: middle; -} -.table.v-center td > *:only-child, -.table.v-center td > *:last-child { - margin-bottom: 0; -} -.table-bordered { - border: 2px solid #f6f6f8; -} -.table-bordered > thead > tr > th, -.table-bordered > tbody > tr > th, -.table-bordered > tfoot > tr > th, -.table-bordered > thead > tr > td, -.table-bordered > tbody > tr > td, -.table-bordered > tfoot > tr > td { - border: 2px solid #f6f6f8; -} -@media screen and (max-width: 767px) { - .table-responsive { - border: 2px solid #f6f6f8; - } -} -h1.deluxe, -h2.deluxe, -h3.deluxe { - font-weight: 300; -} -h4.deluxe, -h5.deluxe, -h6.deluxe { - font-weight: 900; + width: 100%; + margin-bottom: 4px; + font-weight: 700; + color: #545667; text-transform: uppercase; - letter-spacing: .19em; +} +pre[data-lang="html"]:before { + content: 'HTML'; +} +pre[data-lang="css"]:before { + content: 'CSS'; +} +pre[data-lang="js"]:before { + content: 'Javascript'; } .panel form { display: inline-block; @@ -2295,31 +6179,62 @@ h6.deluxe { .panel-body:first-child > form { padding-top: 15px; } +.form-control::-webkit-input-placeholder, +textarea::-webkit-input-placeholder, +input::-webkit-input-placeholder { + font-weight: 500 !important; + color: #757888; +} +.form-control::-moz-placeholder, +textarea::-moz-placeholder, +input::-moz-placeholder { + font-weight: 500 !important; + color: #757888; +} +.form-control:-ms-input-placeholder, +textarea:-ms-input-placeholder, +input:-ms-input-placeholder { + font-weight: 500 !important; + color: #757888; +} +.form-control:-moz-placeholder, +textarea:-moz-placeholder, +input:-moz-placeholder { + font-weight: 500 !important; + color: #757888; +} .input-group-addon { + padding-right: 13px; + padding-left: 13px; + font-weight: 600; color: #8e91a1; - background-color: #fafafc; - border: 2px solid #eeeff2; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background-color: #31313d; + border: 2px solid #383846; } .has-error .input-group-addon { - color: #dc4e58; - background-color: #fff7f4; - border-color: #ffb6a0; + color: #ff8564; + background-color: #31313d; + border-color: #f95f53; } .has-success .input-group-addon { - color: #32b08c; - background-color: #f2fff4; - border-color: #7ce490; + color: #4ed8a0; + background-color: #31313d; + border-color: #4ed8a0; } .has-warning .input-group-addon { - color: #7a65f2; - background-color: #f2f4ff; - border-color: #c9d0ff; + color: #9394ff; + background-color: #31313d; + border-color: #7a65f2; } .form-control { font-weight: 500; - color: #757888; - background-color: #fff; - border: 2px solid #eeeff2; + color: #d4d7dd; + background-color: #202028; + border: 2px solid #383846; border-radius: 4px; outline: none; -webkit-box-shadow: none; @@ -2328,42 +6243,31 @@ h6.deluxe { -o-transition: color .25s ease, background-color .25s ease, border-color .4s ease, box-shadow .4s ease; transition: color .25s ease, background-color .25s ease, border-color .4s ease, box-shadow .4s ease; } +.form-control:hover { + border-color: #434453; +} .form-control:focus { - background-color: #fff; - border-color: #00c9ff; - -webkit-box-shadow: 0 0 8px rgba(107, 223, 255, .5); - box-shadow: 0 0 8px rgba(107, 223, 255, .5); -} -.panel-body > form .form-control, -.panel-body > form .form-control:focus { - background-color: #fff; -} -.form-control::-webkit-input-placeholder { - font-weight: 400; - color: #bec2cc; - /* Chrome/Opera/Safari */ -} -.form-control::-moz-placeholder { - font-weight: 400; - color: #bec2cc; - /* Firefox 19+ */ -} -.form-control:-ms-input-placeholder { - font-weight: 400; - color: #bec2cc; - /* IE 10+ */ -} -.form-control:-moz-placeholder { - font-weight: 400; - color: #bec2cc; - /* Firefox 18- */ + color: #fff; + background-color: #202028; + border-color: #22adf6; + -webkit-box-shadow: 0 0 6px 0 #22adf6; + box-shadow: 0 0 6px 0 #22adf6; } .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control, -.form-control.disabled { +.form-control.disabled, +.form-control[disabled]:hover, +.form-control[readonly]:hover, +fieldset[disabled] .form-control:hover, +.form-control.disabled:hover { color: #757888 !important; - background-color: #eeeff2 !important; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background-color: #292933 !important; + border-color: #383846; } .has-error .form-control, .has-success .form-control, @@ -2377,207 +6281,311 @@ fieldset[disabled] .form-control, .has-error .form-control:focus, .has-success .form-control:focus, .has-warning .form-control:focus { - background-color: #fff; + background-color: #202028; } .has-success .form-control { - border-color: #7ce490; + border-color: #4ed8a0; } .has-success .form-control:focus { - border-color: #4ed8a0; - -webkit-box-shadow: 0 0 8px rgba(124, 228, 144, .5); - box-shadow: 0 0 8px rgba(124, 228, 144, .5); + border-color: #7ce490; + -webkit-box-shadow: 0 0 8px #4ed8a0; + box-shadow: 0 0 8px #4ed8a0; +} +.has-success .form-control::-moz-selection { + background-color: #4ed8a0; +} +.has-success .form-control::selection { + background-color: #4ed8a0; +} +.has-success .form-control::-moz-selection { + background-color: #4ed8a0; } .has-error .form-control { - background-color: #fff7f4; - border-color: #ffb6a0; + background-color: #202028; + border-color: #f95f53; } .has-error .form-control:focus { - background-color: #fff; + background-color: #2f1f29; border-color: #ff8564; - -webkit-box-shadow: 0 0 8px rgba(255, 133, 100, .5); - box-shadow: 0 0 8px rgba(255, 133, 100, .5); + -webkit-box-shadow: 0 0 8px #dc4e58; + box-shadow: 0 0 8px #dc4e58; +} +.has-error .form-control::-moz-selection { + background-color: #ff8564; +} +.has-error .form-control::selection { + background-color: #ff8564; +} +.has-error .form-control::-moz-selection { + background-color: #ff8564; } .has-warning .form-control { - border-color: #c9d0ff; + border-color: #7a65f2; } .has-warning .form-control:focus { border-color: #9394ff; - -webkit-box-shadow: 0 0 8px rgba(147, 148, 255, .5); - box-shadow: 0 0 8px rgba(147, 148, 255, .5); + -webkit-box-shadow: 0 0 8px #7a65f2; + box-shadow: 0 0 8px #7a65f2; } -.form-group label { - font-weight: 400; - color: #999dab; +.has-warning .form-control::-moz-selection { + background-color: #9394ff; } -code { - font-family: Consolas, "Lucida Console", Monaco, monospace; - font-size: 11px; +.has-warning .form-control::selection { + background-color: #9394ff; +} +.has-warning .form-control::-moz-selection { + background-color: #9394ff; +} +input.form-control.input-xs { + height: 22px; + padding: 0 7px; + font-size: 12px; +} +input.form-control.input-sm { + height: 30px; + padding: 0 11px; + font-size: 13px; +} +input.form-control, +input.form-control.input-md { + height: 38px; + padding: 0 14px; + font-size: 15px; +} +input.form-control.input-lg { + height: 46px; + padding: 0 17px; + font-size: 17px; +} +.form-group { + margin-bottom: 8px; +} +.form-group > label { + padding: 0 13px; + margin: 0 0 4px 0; + font-size: 12px; font-weight: 600; - color: #7a65f2; - text-shadow: none; - letter-spacing: .02em; - background-color: #fafafc; - border: 1px solid #fafafc; + color: #999dab; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.form-control-static { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + min-height: 38px; + padding: 7px 9px; + border: 2px solid #383846; border-radius: 4px; - -webkit-font-smoothing: initial; - font-smoothing: initial; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; } -pre { - font-size: 11px; - line-height: 17px; - color: #7a65f2; - white-space: pre; - background-color: #fafafc; - border: 2px solid #fafafc; - border-radius: 4px; +.form-control-static label { + margin: 0; + font-size: 14px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } -pre code { - white-space: pre; - background-color: none; - border: none; - border-radius: 0; +.form-control-static input[type="checkbox"] { + position: relative; + left: -9999px; + width: 0; + height: 0; + margin: 0; + visibility: hidden; } -pre::-webkit-scrollbar { - width: 14px; - height: 14px; +.form-control-static input[type="checkbox"] + label { + position: relative; + padding-left: 24px; + color: #999dab; + -webkit-transition: color .25s ease; + -o-transition: color .25s ease; + transition: color .25s ease; } -pre::-webkit-scrollbar-button { - background-color: #fafafc; +.form-control-static input[type="checkbox"] + label:before { + position: absolute; + top: 50%; + left: 0; + display: block; + width: 16px; + height: 16px; + content: ''; + background-color: #202028; + border: 2px solid #383846; + border-radius: 3px; + -webkit-transition: border-color .25s ease; + -o-transition: border-color .25s ease; + transition: border-color .25s ease; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + -o-transform: translateY(-50%); + transform: translateY(-50%); } -pre::-webkit-scrollbar-track { - background-color: #fafafc; +.form-control-static input[type="checkbox"] + label:after { + position: absolute; + top: 50%; + left: 8px; + display: block; + width: 6px; + height: 6px; + content: ''; + background-color: #22adf6; + border-radius: 50%; + opacity: 0; + -webkit-transition: -webkit-transform .25s cubic-bezier(.175, .885, .32, 1.275), opacity .25s ease; + -o-transition: -o-transform .25s cubic-bezier(.175, .885, .32, 1.275), opacity .25s ease; + transition: transform .25s cubic-bezier(.175, .885, .32, 1.275), opacity .25s ease; + -webkit-transform: translate(-50%, -50%) scale(2, 2); + -ms-transform: translate(-50%, -50%) scale(2, 2); + -o-transform: translate(-50%, -50%) scale(2, 2); + transform: translate(-50%, -50%) scale(2, 2); } -pre::-webkit-scrollbar-track-piece { - background: #fafafc; +.form-control-static input[type="checkbox"] + label:hover { + color: #f6f6f8; + cursor: pointer; } -pre::-webkit-scrollbar-thumb { - background-color: #c9d0ff; - border: 4px solid #fafafc; - border-radius: 7px; +.form-control-static input[type="checkbox"] + label:hover:before { + border-color: #434453; } -pre::-webkit-scrollbar-corner { - background-color: #fafafc; +.form-control-static input[type="checkbox"]:checked + label { + color: #f6f6f8; } -pre::-webkit-scrollbar-resizer { - background-color: #c9d0ff; +.form-control-static input[type="checkbox"]:checked + label:after { + opacity: 1; + -webkit-transform: translate(-50%, -50%) scale(1, 1); + -ms-transform: translate(-50%, -50%) scale(1, 1); + -o-transform: translate(-50%, -50%) scale(1, 1); + transform: translate(-50%, -50%) scale(1, 1); } -pre.rainbow-highlighter::-webkit-scrollbar { - width: 14px; - height: 14px; +.form-control-static > .radio-item { + width: 100%; } -pre.rainbow-highlighter::-webkit-scrollbar-button { - background-color: #1f2039; +.form-control-static input[type="radio"] { + position: relative; + left: -9999px; + width: 0; + height: 0; + margin: 0; + visibility: hidden; } -pre.rainbow-highlighter::-webkit-scrollbar-track { - background-color: #1f2039; +.form-control-static input[type="radio"] + label { + position: relative; + padding-left: 24px; + color: #999dab; + -webkit-transition: color .25s ease; + -o-transition: color .25s ease; + transition: color .25s ease; } -pre.rainbow-highlighter::-webkit-scrollbar-track-piece { - background: #1f2039; +.form-control-static input[type="radio"] + label:before { + position: absolute; + top: 50%; + left: 0; + display: block; + width: 16px; + height: 16px; + content: ''; + background-color: #202028; + border: 2px solid #383846; + border-radius: 50%; + -webkit-transition: border-color .25s ease; + -o-transition: border-color .25s ease; + transition: border-color .25s ease; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + -o-transform: translateY(-50%); + transform: translateY(-50%); } -pre.rainbow-highlighter::-webkit-scrollbar-thumb { - background-color: #b1b6ff; - border: 4px solid #1f2039; - border-radius: 7px; +.form-control-static input[type="radio"] + label:after { + position: absolute; + top: 50%; + left: 8px; + display: block; + width: 6px; + height: 6px; + content: ''; + background-color: #22adf6; + border-radius: 50%; + opacity: 0; + -webkit-transition: -webkit-transform .25s cubic-bezier(.175, .885, .32, 1.275), opacity .25s ease; + -o-transition: -o-transform .25s cubic-bezier(.175, .885, .32, 1.275), opacity .25s ease; + transition: transform .25s cubic-bezier(.175, .885, .32, 1.275), opacity .25s ease; + -webkit-transform: translate(-50%, -50%) scale(2, 2); + -ms-transform: translate(-50%, -50%) scale(2, 2); + -o-transform: translate(-50%, -50%) scale(2, 2); + transform: translate(-50%, -50%) scale(2, 2); } -pre.rainbow-highlighter::-webkit-scrollbar-corner { - background-color: #1f2039; +.form-control-static input[type="radio"] + label:hover { + color: #f6f6f8; + cursor: pointer; } -pre.rainbow-highlighter::-webkit-scrollbar-resizer { - background-color: #b1b6ff; +.form-control-static input[type="radio"] + label:hover:before { + border-color: #434453; } -/* Code Highlighting */ -code, -pre { - /* Reset default tag styles */ +.form-control-static input[type="radio"]:checked + label { + color: #f6f6f8; } -code b, -pre b, -code strong, -pre strong, -code i, -pre i, -code em, -pre em, -code mark, -pre mark, -code small, -pre small, -code del, -pre del, -code ins, -pre ins, -code sub, -pre sub, -code sup, -pre sup, -code u, -pre u { - position: static; - top: 0; - bottom: 0; - padding: 0; - font-size: 11px; - font-style: normal; - font-weight: 600; - color: #7a65f2; - text-decoration: none; - background-color: inherit; +.form-control-static input[type="radio"]:checked + label:after { + opacity: 1; + -webkit-transform: translate(-50%, -50%) scale(1, 1); + -ms-transform: translate(-50%, -50%) scale(1, 1); + -o-transform: translate(-50%, -50%) scale(1, 1); + transform: translate(-50%, -50%) scale(1, 1); } -code.rainbow-highlighter, -pre.rainbow-highlighter { - color: #b1b6ff; - background-color: #1f2039; - border-color: #1f2039; - /* Literal highlighting */ -} -code.rainbow-highlighter b, -pre.rainbow-highlighter b { - color: rgba(214, 213, 237, .5); -} -code.rainbow-highlighter strong, -pre.rainbow-highlighter strong { - color: #fcdb9e; -} -code.rainbow-highlighter i, -pre.rainbow-highlighter i { +input.form-control.form-plutonium { color: #22adf6; } -code.rainbow-highlighter em, -pre.rainbow-highlighter em { - color: #32b08c; -} -code.rainbow-highlighter mark, -pre.rainbow-highlighter mark { - color: #7ce490; -} -code.rainbow-highlighter small, -pre.rainbow-highlighter small { +input.form-control.form-plutonium:focus { color: #fff; } -code.rainbow-highlighter del, -pre.rainbow-highlighter del { - color: #dc4e58; +input.form-control.form-malachite { + color: #4ed8a0; } -code.rainbow-highlighter ins, -pre.rainbow-highlighter ins { - color: #ff8564; +input.form-control.form-malachite:focus { + color: #fff; + border-color: #4ed8a0; + -webkit-box-shadow: 0 0 8px #4ed8a0; + box-shadow: 0 0 8px #4ed8a0; } -code.rainbow-highlighter sub, -pre.rainbow-highlighter sub { - color: #7ce490; +input.form-control.form-malachite::-moz-selection { + background-color: #4ed8a0; } -code.rainbow-highlighter sup, -pre.rainbow-highlighter sup { +input.form-control.form-malachite::selection { + background-color: #4ed8a0; +} +input.form-control.form-malachite::-moz-selection { + background-color: #4ed8a0; +} +input.form-control.form-astronaut { color: #9394ff; } -code.rainbow-highlighter u, -pre.rainbow-highlighter u { - padding: 2px 4px; - color: #b1b6ff; - text-indent: -4px; - background-color: #383846; - border-radius: 3px; +input.form-control.form-astronaut:focus { + color: #fff; + border-color: #7a65f2; + -webkit-box-shadow: 0 0 8px #7a65f2; + box-shadow: 0 0 8px #7a65f2; +} +input.form-control.form-astronaut::-moz-selection { + background-color: #9394ff; +} +input.form-control.form-astronaut::selection { + background-color: #9394ff; +} +input.form-control.form-astronaut::-moz-selection { + background-color: #9394ff; +} +.form-control.monotype { + font-family: "Roboto Mono", monospace; } .badge { color: #fff; @@ -2597,156 +6605,6 @@ a.badge:focus { text-decoration: none; cursor: pointer; } -.sparkline { - display: inline-block; - width: 110px; - height: 32px; - vertical-align: middle; - background-color: #fafafc; - border-radius: 4px 0 0 4px; -} -.sparkline-label { - display: inline-block; - height: 32px; - padding: 0 9px; - line-height: 32px; - vertical-align: middle; - background-color: #fafafc; - border-radius: 0 4px 4px 0; -} -.cluster-status { - display: inline-block; - width: 21px; - height: 21px; - padding: 0; - margin: 0; - font-size: 0; - list-style: none; -} -.cluster-status .node { - display: inline-block; - width: 5px; - height: 5px; - margin: 1px; - background-color: #f6f6f8; -} -.cluster-status .node.node-ok { - background-color: #4ed8a0; -} -.cluster-status .node.node-down { - background-color: #f95f53; -} -.cluster-spinner { - display: inline-block; - width: 21px; - height: 21px; -} -.cluster-spinner .spinner-node { - float: left; - width: 5px; - height: 5px; - margin: 1px; - background-color: #fff; - -webkit-animation: clusterLoading 1.9s infinite linear; - -o-animation: clusterLoading 1.9s infinite linear; - animation: clusterLoading 1.9s infinite linear; -} -.cluster-spinner .spinner-node1 { - -webkit-animation-delay: .2s; - -o-animation-delay: .2s; - animation-delay: .2s; -} -.cluster-spinner .spinner-node2 { - -webkit-animation-delay: .3s; - -o-animation-delay: .3s; - animation-delay: .3s; -} -.cluster-spinner .spinner-node3 { - -webkit-animation-delay: .4s; - -o-animation-delay: .4s; - animation-delay: .4s; -} -.cluster-spinner .spinner-node4 { - -webkit-animation-delay: .1s; - -o-animation-delay: .1s; - animation-delay: .1s; -} -.cluster-spinner .spinner-node5 { - -webkit-animation-delay: .2s; - -o-animation-delay: .2s; - animation-delay: .2s; -} -.cluster-spinner .spinner-node6 { - -webkit-animation-delay: .3s; - -o-animation-delay: .3s; - animation-delay: .3s; -} -.cluster-spinner .spinner-node7 { - -webkit-animation-delay: 0s; - -o-animation-delay: 0s; - animation-delay: 0s; -} -.cluster-spinner .spinner-node8 { - -webkit-animation-delay: .1s; - -o-animation-delay: .1s; - animation-delay: .1s; -} -.cluster-spinner .spinner-node9 { - -webkit-animation-delay: .2s; - -o-animation-delay: .2s; - animation-delay: .2s; -} -@-webkit-keyframes clusterLoading { - 0%, - 70%, - 100% { - -webkit-transform: scale3D(1, 1, 1); - transform: scale3D(1, 1, 1); - } - 35% { - -webkit-transform: scale3D(0, 0, 1); - transform: scale3D(0, 0, 1); - } -} -@-o-keyframes clusterLoading { - 0%, - 70%, - 100% { - -webkit-transform: scale3D(1, 1, 1); - -o-transform: scale3D(1, 1, 1); - transform: scale3D(1, 1, 1); - } - 35% { - -webkit-transform: scale3D(0, 0, 1); - -o-transform: scale3D(0, 0, 1); - transform: scale3D(0, 0, 1); - } -} -@keyframes clusterLoading { - 0%, - 70%, - 100% { - -webkit-transform: scale3D(1, 1, 1); - -o-transform: scale3D(1, 1, 1); - transform: scale3D(1, 1, 1); - } - 35% { - -webkit-transform: scale3D(0, 0, 1); - -o-transform: scale3D(0, 0, 1); - transform: scale3D(0, 0, 1); - } -} -.btn-group > * { - margin-right: 2px; - margin-left: 0; -} -.btn-group > *:last-child { - margin-right: 0; -} -.btn-group.open .dropdown-toggle { - -webkit-box-shadow: none !important; - box-shadow: none !important; -} .ui-slider-handle { width: 30px; height: 30px; @@ -3443,7 +7301,7 @@ a.badge:focus { border-color: #22adf6; } .slider-plan-picker .slider-increment:nth-of-type(5) { - border-color: #38c2cb; + border-color: #38c3cb; } .slider-plan-picker .slider-increment:nth-of-type(6) { border-color: #4ed8a0; @@ -3537,23 +7395,23 @@ a.badge:focus { transform: translateX(-50%); } .modal-backdrop { - background: #00c9ff; - background: -webkit-linear-gradient(left, #00c9ff 0%, #9394ff 100%); - background: -webkit-gradient(linear, left top, right top, from(#00c9ff), to(#9394ff)); - background: -o-linear-gradient(left, #00c9ff 0%, #9394ff 100%); - background: linear-gradient(to right, #00c9ff 0%, #9394ff 100%); + background: #22adf6; + background: -webkit-linear-gradient(-45deg, #22adf6 0%, #9394ff 100%); + background: -webkit-linear-gradient(315deg, #22adf6 0%, #9394ff 100%); + background: -o-linear-gradient(315deg, #22adf6 0%, #9394ff 100%); + background: linear-gradient(135deg, #22adf6 0%, #9394ff 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); } .modal-backdrop.in { - opacity: .8; + opacity: .72; } /* Backdrop Alternatives */ body.modal-dark .modal-backdrop { - background: #292933; - background: -webkit-linear-gradient(top, #292933 0%, #434453 100%); - background: -webkit-gradient(linear, left top, left bottom, from(#292933), to(#434453)); - background: -o-linear-gradient(top, #292933 0%, #434453 100%); - background: linear-gradient(to bottom, #292933 0%, #434453 100%); + background: #31313d; + background: -webkit-linear-gradient(top, #31313d 0%, #434453 100%); + background: -webkit-gradient(linear, left top, left bottom, from(#31313d), to(#434453)); + background: -o-linear-gradient(top, #31313d 0%, #434453 100%); + background: linear-gradient(to bottom, #31313d 0%, #434453 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=0); } body.modal-light .modal-backdrop { @@ -3604,8 +7462,35 @@ body.modal-midnight .modal-backdrop { background: linear-gradient(to bottom, #1f2039 0%, #326bba 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=0); } +.modal { + padding: 16px 14px 16px 16px !important; +} +.modal::-webkit-scrollbar { + width: 14px; + height: 14px; +} +.modal::-webkit-scrollbar-button { + background-color: #9394ff; +} +.modal::-webkit-scrollbar-track { + background-color: #9394ff; +} +.modal::-webkit-scrollbar-track-piece { + background: #9394ff; +} +.modal::-webkit-scrollbar-thumb { + background-color: #bef0ff; + border: 4px solid #9394ff; + border-radius: 7px; +} +.modal::-webkit-scrollbar-corner { + background-color: #9394ff; +} +.modal::-webkit-scrollbar-resizer { + background-color: #bef0ff; +} .modal-content { - background-color: #f6f6f8; + background-color: #fafafc; border: 0; -webkit-box-shadow: none; box-shadow: none; @@ -3615,102 +7500,155 @@ body.modal-midnight .modal-backdrop { width: 100%; } .modal-header, +.modal-footer, +.modal-body { + padding-right: 44px; + padding-left: 44px; + background-color: transparent; +} +.modal-header, .modal-footer { - background-color: #fff; - border-color: #383846; + text-align: center; + border: none; } .modal-header { position: relative; + padding: 0 44px; text-align: center; border: none; border-radius: 4px 4px 0 0; } .modal-header .close { position: absolute; - top: 50%; - right: 15px; + top: 58.5%; + right: 44px; width: 30px; height: 30px; - padding: 2px 0 0 0; - font-size: 30px; - font-weight: 400; - color: #bec2cc; + padding: 0; + font-size: 0; + color: transparent; text-align: center; text-shadow: none; opacity: 1; - -webkit-transition: color .25s ease; - -o-transition: color .25s ease; - transition: color .25s ease; + -webkit-transition: none; + -o-transition: none; + transition: none; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } -.modal-header .close:hover { - color: #676978; +.modal-header .close:before, +.modal-header .close:after { + position: absolute; + top: 50%; + left: 50%; + display: block; + width: 2px; + height: 80%; + content: ''; + background-color: #d4d7dd; + border-radius: 1px; + -webkit-transition: background-color .25s ease, -webkit-box-shadow .25s ease; + -o-transition: background-color .25s ease, box-shadow .25s ease; + transition: background-color .25s ease, box-shadow .25s ease; +} +.modal-header .close:before { + -webkit-transform: translate(-50%, -50%) rotate(45deg); + -ms-transform: translate(-50%, -50%) rotate(45deg); + -o-transform: translate(-50%, -50%) rotate(45deg); + transform: translate(-50%, -50%) rotate(45deg); +} +.modal-header .close:after { + -webkit-transform: translate(-50%, -50%) rotate(-45deg); + -ms-transform: translate(-50%, -50%) rotate(-45deg); + -o-transform: translate(-50%, -50%) rotate(-45deg); + transform: translate(-50%, -50%) rotate(-45deg); +} +.modal-header .close:hover:before, +.modal-header .close:hover:after { + background-color: #999dab; +} +.modal-header .close:focus { + outline: none; +} +.modal-header .close:focus:before, +.modal-header .close:focus:after { + background-color: #22adf6; + -webkit-box-shadow: 0 0 3px 0 #6bdfff; + box-shadow: 0 0 3px 0 #6bdfff; } .modal-header .modal-title { - margin: 9px 0; + padding: 30px 0 20px 0; + margin: 0; + font-size: 22px; + font-weight: 400; color: #676978; + border-bottom: 2px solid #f6f6f8; } .modal-footer { - text-align: center; - border: none; + padding-top: 20px; + padding-bottom: 30px; border-radius: 0 0 4px 4px; } +.modal-footer .btn + .btn { + margin: 3px 6px; +} .modal-body { + padding-top: 30px; + padding-bottom: 0; color: #676978; } -form .col-xs-1, -form .col-xs-2, -form .col-xs-3, -form .col-xs-4, -form .col-xs-5, -form .col-xs-6, -form .col-xs-7, -form .col-xs-8, -form .col-xs-9, -form .col-xs-10, -form .col-xs-11, -form .col-xs-12, -form .col-sm-1, -form .col-sm-2, -form .col-sm-3, -form .col-sm-4, -form .col-sm-5, -form .col-sm-6, -form .col-sm-7, -form .col-sm-8, -form .col-sm-9, -form .col-sm-10, -form .col-sm-11, -form .col-sm-12, -form .col-md-1, -form .col-md-2, -form .col-md-3, -form .col-md-4, -form .col-md-5, -form .col-md-6, -form .col-md-7, -form .col-md-8, -form .col-md-9, -form .col-md-10, -form .col-md-11, -form .col-md-12, -form .col-lg-1, -form .col-lg-2, -form .col-lg-3, -form .col-lg-4, -form .col-lg-5, -form .col-lg-6, -form .col-lg-7, -form .col-lg-8, -form .col-lg-9, -form .col-lg-10, -form .col-lg-11, -form .col-lg-12 { - padding-right: 6px; - padding-left: 6px; +.modal-body > *:last-child { + margin-bottom: 0; +} +.modal-body form { + padding: 17px; + background-color: #fff; + border-radius: 4px; + -webkit-box-shadow: 0 2px 5px 2px rgba(238, 239, 242, .5); + box-shadow: 0 2px 5px 2px rgba(238, 239, 242, .5); +} +.modal.fade .modal-dialog { + opacity: 0; + -webkit-transition: opacity .3s ease, + -webkit-transform .3s ease; + -o-transition: opacity .3s ease, + -o-transform .3s ease; + transition: opacity .3s ease, + transform .3s ease; + -webkit-transform: perspective(1000px) translateZ(-500px); + transform: perspective(1000px) translateZ(-500px); +} +.modal.fade.in .modal-dialog { + opacity: 1; + -webkit-transform: perspective(1000px) translateZ(0); + transform: perspective(1000px) translateZ(0); +} +body.modal-open .ix-app, +body.modal-open .ix-app-wrapper { + position: static; +} +body.modal-open .ix-app-wrapper { + width: 100%; + height: 100%; + padding: 120px 14px 0 0; + overflow: hidden; +} +@media (min-width: 768px) { + body.modal-open .ix-app, + body.modal-open .ix-app-wrapper { + position: static; + } + body.modal-open .ix-app-wrapper { + width: 100%; + height: 100%; + padding: 60px 14px 0 60px; + overflow: hidden; + } + .modal-sm { + width: 420px; + } } .hero { width: 100%; @@ -3753,179 +7691,6 @@ form .col-lg-12 { font-size: 22px; } } -hr { - height: 2px; - background-color: #fafafc; - border: 0; - border-radius: 1px; -} -hr.dark { - background-color: #eeeff2; -} -body.modal-open nav.navbar { - padding-right: 15px; -} -.caret { - position: relative; - width: 11px; - height: 16px; - border: none; -} -.caret:after { - position: absolute; - top: 50%; - left: 50%; - display: inline; - font-family: 'icomoon' !important; - font-size: 11px; - color: inherit; - content: "\e902"; - -webkit-transform: translate(-50%, -55%); - -ms-transform: translate(-50%, -55%); - -o-transform: translate(-50%, -55%); - transform: translate(-50%, -55%); - - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} -table.table.icon-font-matrix tr > td { - width: 20%; - padding: 15px; - text-align: center; - border: none; -} -table.table.icon-font-matrix tr > td > * { - display: inline-block; - width: 100%; - vertical-align: middle; -} -table.table.icon-font-matrix tr > td span.icon { - margin-bottom: 15px; - font-size: 38px; -} -table.table.icon-font-matrix tr > td strong { - margin-bottom: 8px; - opacity: .5; -} -.page-header--anchor { - position: relative; - top: -120px; - display: block; - visibility: hidden; -} -.page-header a:link, -.page-header a:active, -.page-header a:visited, -.page-header a:hover { - color: inherit; -} -.docs-color-grid { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - overflow: hidden; - border: 2px solid #f6f6f8; - border-radius: 7px; - - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; -} -.docs-color-field { - display: inline-block; - width: 80px; - font-family: Consolas, "Lucida Console", Monaco, monospace; - font-size: 14px; - font-weight: 200; - text-align: center; - text-transform: uppercase; - background-color: transparent; - border: 0; -} -.docs-color-swatch { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - padding: 60px 22px 45px 22px; - margin: 0; - font-size: 16px; - color: #fff; - text-align: center; - flex-direction: column; - - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -webkit-box-align: center; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -webkit-flex-direction: column; - -ms-flex-direction: column; -} -.docs-color-swatch:hover { - cursor: pointer; -} -.docs-color-swatch.light-bg { - color: #676978; -} -.docs-color-swatch.light-bg .docs-color-field { - color: #676978; -} -.docs-color-swatch h4 { - margin: 0 0 4px 0; - font-size: 14px; - font-weight: 900; -} -.docs-micro-swatch { - display: inline-block; - width: 24px; - height: 12px; - vertical-align: middle; - border-radius: 6px; -} -.docs-micro-swatch.highlight-b { - background-color: rgba(214, 213, 237, .5); -} -.docs-micro-swatch.highlight-strong { - background-color: #fcdb9e; -} -.docs-micro-swatch.highlight-i { - background-color: #22adf6; -} -.docs-micro-swatch.highlight-em { - background-color: #32b08c; -} -.docs-micro-swatch.highlight-mark { - background-color: #7ce490; -} -.docs-micro-swatch.highlight-small { - background-color: #fff; -} -.docs-micro-swatch.highlight-del { - background-color: #dc4e58; -} -.docs-micro-swatch.highlight-ins { - background-color: #ff8564; -} -.docs-micro-swatch.highlight-sub { - background-color: #7ce490; -} -.docs-micro-swatch.highlight-sup { - background-color: #9394ff; -} -.docs-micro-swatch.highlight-u { - background-color: #383846; -} .tooltip-inner { padding: 4px 8px; font-size: 13px; @@ -4099,516 +7864,683 @@ table.table.icon-font-matrix tr > td strong { .tooltip-primary + .tooltip.bottom-right .tooltip-arrow { border-bottom-color: #22adf6; } -span.text-color-success { - color: #4ed8a0; +@-webkit-keyframes popoverIntroTop { + 0% { + margin-top: 0; + } + 100% { + margin-top: -11px; + } } -span.text-color-warning { - color: #7a65f2; +@-o-keyframes popoverIntroTop { + 0% { + margin-top: 0; + } + 100% { + margin-top: -11px; + } } -span.text-color-danger { - color: #f95f53; +@keyframes popoverIntroTop { + 0% { + margin-top: 0; + } + 100% { + margin-top: -11px; + } +} +@-webkit-keyframes popoverIntroRight { + 0% { + margin-left: 0; + } + 100% { + margin-left: 11px; + } +} +@-o-keyframes popoverIntroRight { + 0% { + margin-left: 0; + } + 100% { + margin-left: 11px; + } +} +@keyframes popoverIntroRight { + 0% { + margin-left: 0; + } + 100% { + margin-left: 11px; + } +} +@-webkit-keyframes popoverIntroBottom { + 0% { + margin-top: 0; + } + 100% { + margin-top: 11px; + } +} +@-o-keyframes popoverIntroBottom { + 0% { + margin-top: 0; + } + 100% { + margin-top: 11px; + } +} +@keyframes popoverIntroBottom { + 0% { + margin-top: 0; + } + 100% { + margin-top: 11px; + } +} +@-webkit-keyframes popoverIntroLeft { + 0% { + margin-left: 0; + } + 100% { + margin-left: -11px; + } +} +@-o-keyframes popoverIntroLeft { + 0% { + margin-left: 0; + } + 100% { + margin-left: -11px; + } +} +@keyframes popoverIntroLeft { + 0% { + margin-left: 0; + } + 100% { + margin-left: -11px; + } +} +.popover { + position: absolute; + top: 0; + left: 0; + z-index: 1060; + display: none; + max-width: 276px; + padding: 14px; + font-family: 'Roboto', Helvetica, Arial, Tahoma, Verdana, sans-serif; + font-size: 14px; + font-style: normal; + font-weight: normal; + line-height: 1.5; + text-align: left; + text-align: start; + text-decoration: none; + text-shadow: none; + text-transform: none; + letter-spacing: normal; + word-break: normal; + word-spacing: normal; + word-wrap: normal; + white-space: normal; + background-color: #fff; + -webkit-background-clip: padding-box; + background-clip: padding-box; + border: 2px solid #e7e8eb; + border-radius: 5px; + -webkit-box-shadow: 0 0 10px 4px rgba(32, 32, 40, .04); + box-shadow: 0 0 10px 4px rgba(32, 32, 40, .04); + + line-break: auto; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} +.popover.top, +.popover.right, +.popover.bottom, +.popover.left { + -webkit-animation-duration: .45s; + -o-animation-duration: .45s; + animation-duration: .45s; + -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1.275); + -o-animation-timing-function: cubic-bezier(.175, .885, .32, 1.275); + animation-timing-function: cubic-bezier(.175, .885, .32, 1.275); + -webkit-animation-iteration-count: 1; + -o-animation-iteration-count: 1; + animation-iteration-count: 1; +} +.popover.top { + margin-top: -11px; + -webkit-animation-name: popoverIntroTop; + -o-animation-name: popoverIntroTop; + animation-name: popoverIntroTop; +} +.popover.right { + margin-left: 11px; + -webkit-animation-name: popoverIntroRight; + -o-animation-name: popoverIntroRight; + animation-name: popoverIntroRight; +} +.popover.bottom { + margin-top: 11px; + -webkit-animation-name: popoverIntroBottom; + -o-animation-name: popoverIntroBottom; + animation-name: popoverIntroBottom; +} +.popover.left { + margin-left: -11px; + -webkit-animation-name: popoverIntroLeft; + -o-animation-name: popoverIntroLeft; + animation-name: popoverIntroLeft; +} +.popover-title { + padding: 0; + margin: 0 0 6px 0; + font-size: 15px; + font-weight: 700; + line-height: 16px; + color: #8e91a1; + background-color: #fff; + border-bottom: 0; + border-radius: 4px 4px 0 0; +} +.popover-content { + padding: 0; + font-size: 14px; + font-weight: 500; + line-height: 16px; + color: #8e91a1; +} +.popover > .arrow { + position: absolute; + display: block; + width: 14px; + height: 14px; + margin: 0 !important; + background-color: #fff; + border-color: #fff; + border-style: solid; + border-width: 2px !important; +} +.popover > .arrow:after { + display: none; + content: ""; +} +.popover.bottom > .arrow { + top: 0 !important; + right: initial !important; + bottom: initial !important; + left: 50% !important; + border-color: #e7e8eb transparent transparent #e7e8eb; + border-top-left-radius: 4px; + -webkit-transform: translate(-50%, -50%) rotate(45deg); + -ms-transform: translate(-50%, -50%) rotate(45deg); + -o-transform: translate(-50%, -50%) rotate(45deg); + transform: translate(-50%, -50%) rotate(45deg); +} +.popover.right > .arrow { + top: 50% !important; + right: initial !important; + bottom: initial !important; + left: 0 !important; + border-color: transparent transparent #e7e8eb #e7e8eb; + border-bottom-left-radius: 4px; + -webkit-transform: translate(-50%, -50%) rotate(45deg); + -ms-transform: translate(-50%, -50%) rotate(45deg); + -o-transform: translate(-50%, -50%) rotate(45deg); + transform: translate(-50%, -50%) rotate(45deg); +} +.popover.top > .arrow { + top: initial !important; + right: initial !important; + bottom: 0 !important; + left: 50% !important; + border-color: transparent #e7e8eb #e7e8eb transparent; + border-bottom-right-radius: 4px; + -webkit-transform: translate(-50%, 50%) rotate(45deg); + -ms-transform: translate(-50%, 50%) rotate(45deg); + -o-transform: translate(-50%, 50%) rotate(45deg); + transform: translate(-50%, 50%) rotate(45deg); +} +.popover.left > .arrow { + top: 50% !important; + right: 0 !important; + bottom: initial !important; + left: initial !important; + border-color: #e7e8eb #e7e8eb transparent transparent; + border-top-right-radius: 4px; + -webkit-transform: translate(50%, -50%) rotate(45deg); + -ms-transform: translate(50%, -50%) rotate(45deg); + -o-transform: translate(50%, -50%) rotate(45deg); + transform: translate(50%, -50%) rotate(45deg); +} +*[data-theme="data-explorer"] + .popover { + background-color: #292933; + border-color: #9394ff; + -webkit-box-shadow: 0 0 10px 3px rgba(122, 101, 242, .2); + box-shadow: 0 0 10px 3px rgba(122, 101, 242, .2); +} +*[data-theme="data-explorer"] + .popover > .popover-title, +*[data-theme="data-explorer"] + .popover > .popover-content { + color: #9394ff; +} +*[data-theme="data-explorer"] + .popover > .arrow { + background-color: #292933; +} +*[data-theme="data-explorer"] + .popover.bottom > .arrow { + border-color: #9394ff transparent transparent #9394ff; +} +*[data-theme="data-explorer"] + .popover.right > .arrow { + border-color: transparent transparent #9394ff #9394ff; +} +*[data-theme="data-explorer"] + .popover.top > .arrow { + border-color: transparent #9394ff #9394ff transparent; +} +*[data-theme="data-explorer"] + .popover.left > .arrow { + border-color: #9394ff #9394ff transparent transparent; +} +*[data-theme="primary"] + .popover { + border-color: #00c9ff; + -webkit-box-shadow: 0 0 10px 5px rgba(0, 201, 255, .2); + box-shadow: 0 0 10px 5px rgba(0, 201, 255, .2); +} +*[data-theme="primary"] + .popover.bottom > .arrow { + border-color: #00c9ff transparent transparent #00c9ff; +} +*[data-theme="primary"] + .popover.right > .arrow { + border-color: transparent transparent #00c9ff #00c9ff; +} +*[data-theme="primary"] + .popover.top > .arrow { + border-color: transparent #00c9ff #00c9ff transparent; +} +*[data-theme="primary"] + .popover.left > .arrow { + border-color: #00c9ff #00c9ff transparent transparent; +} +*[data-theme="success"] + .popover { + border-color: #7ce490; + -webkit-box-shadow: 0 0 10px 5px rgba(124, 228, 144, .2); + box-shadow: 0 0 10px 5px rgba(124, 228, 144, .2); +} +*[data-theme="success"] + .popover.bottom > .arrow { + border-color: #7ce490 transparent transparent #7ce490; +} +*[data-theme="success"] + .popover.right > .arrow { + border-color: transparent transparent #7ce490 #7ce490; +} +*[data-theme="success"] + .popover.top > .arrow { + border-color: transparent #7ce490 #7ce490 transparent; +} +*[data-theme="success"] + .popover.left > .arrow { + border-color: #7ce490 #7ce490 transparent transparent; +} +*[data-theme="warning"] + .popover { + border-color: #b1b6ff; + -webkit-box-shadow: 0 0 10px 5px rgba(177, 182, 255, .2); + box-shadow: 0 0 10px 5px rgba(177, 182, 255, .2); +} +*[data-theme="warning"] + .popover > .popover-title, +*[data-theme="warning"] + .popover > .popover-content { + color: #8e91a1; +} +*[data-theme="warning"] + .popover.bottom > .arrow { + border-color: #b1b6ff transparent transparent #b1b6ff; +} +*[data-theme="warning"] + .popover.right > .arrow { + border-color: transparent transparent #b1b6ff #b1b6ff; +} +*[data-theme="warning"] + .popover.top > .arrow { + border-color: transparent #b1b6ff #b1b6ff transparent; +} +*[data-theme="warning"] + .popover.left > .arrow { + border-color: #b1b6ff #b1b6ff transparent transparent; +} +*[data-theme="danger"] + .popover { + border-color: #ff8564; + -webkit-box-shadow: 0 0 10px 5px rgba(255, 133, 100, .2); + box-shadow: 0 0 10px 5px rgba(255, 133, 100, .2); +} +*[data-theme="danger"] + .popover > .popover-title, +*[data-theme="danger"] + .popover > .popover-content { + color: #8e91a1; +} +*[data-theme="danger"] + .popover.bottom > .arrow { + border-color: #ff8564 transparent transparent #ff8564; +} +*[data-theme="danger"] + .popover.right > .arrow { + border-color: transparent transparent #ff8564 #ff8564; +} +*[data-theme="danger"] + .popover.top > .arrow { + border-color: transparent #ff8564 #ff8564 transparent; +} +*[data-theme="danger"] + .popover.left > .arrow { + border-color: #ff8564 #ff8564 transparent transparent; +} +table.table.icon-font-matrix { + border: none; +} +table.table.icon-font-matrix tr > td { + width: 20%; + padding: 15px; + text-align: center; + border: none; +} +table.table.icon-font-matrix tr > td > * { + display: inline-block; + width: 100%; + vertical-align: middle; +} +table.table.icon-font-matrix tr > td span.icon { + margin-bottom: 15px; + font-size: 38px; +} +table.table.icon-font-matrix tr > td strong { + margin-bottom: 8px; + opacity: .5; +} +.docs-color-grid { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + flex-direction: row; + + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + -webkit-box-align: start; + -webkit-align-items: flex-start; + -ms-flex-align: start; + align-items: flex-start; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} +.docs-color-column { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0 2px; + overflow: hidden; + flex-direction: column; + + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + -webkit-box-align: stretch; + -webkit-align-items: stretch; + -ms-flex-align: stretch; + align-items: stretch; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} +.docs-color-column:first-of-type { + padding-left: 0; +} +.docs-color-column:last-of-type { + padding-right: 0; +} +.docs-color-field { + display: inline-block; + width: 80px; + margin-bottom: -6px; + font-family: Consolas, "Lucida Console", Monaco, monospace; + font-size: 18px; + font-weight: 300; + text-align: center; + text-transform: uppercase; + background-color: transparent; + border: 0; +} +.docs-color-swatch { + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 36px 8px; + margin: 0; + font-size: 14px; + color: #fff; + text-align: center; + + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} +.docs-color-swatch:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; +} +.docs-color-swatch:last-of-type { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.docs-color-swatch:hover { + cursor: pointer; +} +.docs-color-swatch.light-bg { + color: #676978; +} +.docs-color-swatch.light-bg .docs-color-field { + color: #676978; +} +.docs-color-swatch h4, +.docs-color-swatch h5 { + position: absolute; + top: 8px; + margin: 0; + font-size: 14px; + opacity: .4; +} +.docs-color-swatch h4 { + right: 8px; + font-weight: 600; +} +.docs-color-swatch h5 { + left: 8px; + font-weight: 900; +} +.docs-micro-swatch { + display: inline-block; + width: 24px; + height: 12px; + vertical-align: middle; + border-radius: 6px; +} +.docs-micro-swatch.highlight-b { + background-color: #8e91a1; +} +.docs-micro-swatch.highlight-strong { + background-color: #6bdfff; +} +.docs-micro-swatch.highlight-i { + background-color: #22adf6; +} +.docs-micro-swatch.highlight-em { + background-color: #32b08c; +} +.docs-micro-swatch.highlight-mark { + background-color: #7ce490; +} +.docs-micro-swatch.highlight-small { + background-color: #fff; +} +.docs-micro-swatch.highlight-del { + background-color: #f95f53; +} +.docs-micro-swatch.highlight-ins { + background-color: #ffb6a0; +} +.docs-micro-swatch.highlight-sub { + background-color: #7ce490; +} +.docs-micro-swatch.highlight-sup { + background-color: #9394ff; +} +.docs-micro-swatch.highlight-u { + background-color: #434453; } section.docs-section { width: 100%; padding: 100px 0; - border-bottom: 2px solid #eef0f2; + border-bottom: 2px solid #292933; } section.docs-section:last-of-type { border-bottom: 0; } section.docs-section .page-header { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; border-bottom: 0; } -.nav-tablist { +.panel.docs-example { + background-color: #eeeff2; + -webkit-box-shadow: inset 0 2px 5px 2px rgba(15, 14, 21, .03); + box-shadow: inset 0 2px 5px 2px rgba(15, 14, 21, .03); +} +.panel.docs-example .example { + padding: 64px 0; +} +.panel.docs-example .panel-body { + position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; + background-color: transparent; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; - /* Size Modifiers */ + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; } -.nav-tablist > li > a { - position: relative; - height: 41px; - padding: 0 12px; - font-size: 14px; +.panel.docs-example .panel-body:after { + position: absolute; + right: 30px; + bottom: 0; + left: 30px; + display: block; + height: 2px; + content: ''; + background-color: #e7e8eb; +} +.panel.docs-example .panel-body:before { + position: absolute; + top: 16px; + left: 30px; + display: block; + font-size: 14.5px; font-weight: 500; - line-height: 37px; - color: #999dab; - background-color: #eeeff2; - border: 2px solid #eeeff2; - border-right-width: 0; - -webkit-transition: background-color .25s ease, color .25s ease; - -o-transition: background-color .25s ease, color .25s ease; - transition: background-color .25s ease, color .25s ease; -} -.nav-tablist > li > a:hover { - color: #676978; - cursor: pointer; - background-color: #f6f6f8; -} -.nav-tablist > li:first-of-type > a { - border-radius: 4px 0 0 4px; -} -.nav-tablist > li:last-of-type > a { - border-right-width: 2px; - border-radius: 0 4px 4px 0; -} -.nav-tablist > li.active > a { - color: #676978; - background-color: #fff; -} -.nav-tablist > li.disabled > a { - font-style: italic; color: #c6cad3; + text-transform: uppercase; + letter-spacing: .5px; + content: 'Example'; } -.nav-tablist > li.disabled > a:hover, -.nav-tablist > li.disabled > a:focus { - color: #c6cad3; - text-decoration: none; - cursor: not-allowed; - background-color: #eeeff2; -} -.nav-tablist.nav-tablist-lg > li > a { - height: 54px; - padding: 0 19px; - font-size: 18px; - font-weight: 400; - line-height: 50px; -} -.nav-tablist.nav-tablist-lg > li:first-of-type > a { - border-radius: 4px 0 0 4px; -} -.nav-tablist.nav-tablist-lg > li:last-of-type > a { - border-radius: 0 4px 4px 0; -} -.nav-tablist.nav-tablist-sm > li > a { - height: 31px; - padding: 0 9px; - font-size: 12px; - font-weight: 600; - line-height: 27px; -} -.nav-tablist.nav-tablist-sm > li:first-of-type > a { - border-radius: 3px 0 0 3px; -} -.nav-tablist.nav-tablist-sm > li:last-of-type > a { - border-radius: 0 3px 3px 0; -} -.nav-tablist.nav-tablist-xs > li > a { - height: 27px; - padding: 0 7px; - font-size: 11px; - font-weight: 600; - line-height: 23px; -} -.nav-tablist.nav-tablist-xs > li:first-of-type > a { - border-radius: 3px 0 0 3px; -} -.nav-tablist.nav-tablist-xs > li:last-of-type > a { - border-radius: 0 3px 3px 0; -} -.microtabs-dismiss { - position: relative; - top: -1px; - right: -3px; - display: inline-block; - width: 16px; - height: 16px; - margin-left: -2px; - vertical-align: middle; +.panel.docs-example pre { + padding: 16px 30px; + margin: 0; background-color: transparent; - border: 0; - outline: none; - /* Using pseudo elements to render an X */ - /* Hover State */ + background-image: none; } -.microtabs-dismiss:after, -.microtabs-dismiss:before { +form .col-xs-1, +form .col-xs-2, +form .col-xs-3, +form .col-xs-4, +form .col-xs-5, +form .col-xs-6, +form .col-xs-7, +form .col-xs-8, +form .col-xs-9, +form .col-xs-10, +form .col-xs-11, +form .col-xs-12, +form .col-sm-1, +form .col-sm-2, +form .col-sm-3, +form .col-sm-4, +form .col-sm-5, +form .col-sm-6, +form .col-sm-7, +form .col-sm-8, +form .col-sm-9, +form .col-sm-10, +form .col-sm-11, +form .col-sm-12, +form .col-md-1, +form .col-md-2, +form .col-md-3, +form .col-md-4, +form .col-md-5, +form .col-md-6, +form .col-md-7, +form .col-md-8, +form .col-md-9, +form .col-md-10, +form .col-md-11, +form .col-md-12, +form .col-lg-1, +form .col-lg-2, +form .col-lg-3, +form .col-lg-4, +form .col-lg-5, +form .col-lg-6, +form .col-lg-7, +form .col-lg-8, +form .col-lg-9, +form .col-lg-10, +form .col-lg-11, +form .col-lg-12 { + padding-right: 6px; + padding-left: 6px; +} +body.modal-open nav.navbar { + padding-right: 15px; +} +.caret { + position: relative; + width: 11px; + height: 16px; + border: none; +} +.caret:after { position: absolute; top: 50%; left: 50%; - width: 2px; - height: 11px; - content: ''; - background-color: #d4d7dd; - border-radius: 1px; - -webkit-transition: background-color .25s ease; - -o-transition: background-color .25s ease; - transition: background-color .25s ease; -} -.microtabs-dismiss:after { - -webkit-transform: translate(-50%, -50%) rotate(45deg); - -ms-transform: translate(-50%, -50%) rotate(45deg); - -o-transform: translate(-50%, -50%) rotate(45deg); - transform: translate(-50%, -50%) rotate(45deg); -} -.microtabs-dismiss:before { - -webkit-transform: translate(-50%, -50%) rotate(-45deg); - -ms-transform: translate(-50%, -50%) rotate(-45deg); - -o-transform: translate(-50%, -50%) rotate(-45deg); - transform: translate(-50%, -50%) rotate(-45deg); -} -.microtabs-dismiss:hover { - cursor: pointer; -} -.microtabs-dismiss:hover:after, -.microtabs-dismiss:hover:before { - background-color: #ff8564; -} -.nav-microtabs { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - padding: 9px 9px 0 9px; - background-color: #eeeff2; + display: inline; + font-family: 'icomoon' !important; + font-size: 11px; + color: inherit; + content: "\e902"; + -webkit-transform: translate(-50%, -55%); + -ms-transform: translate(-50%, -55%); + -o-transform: translate(-50%, -55%); + transform: translate(-50%, -55%); - -webkit-box-align: center; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; - /* Contextual Alternatives */ - /* Common Seasonal Styles */ -} -.nav-microtabs > li > a { - position: relative; - height: 30px; - padding: 0 9px; - margin: 0 2px 0 0; - font-size: 13px; - font-weight: 500; - line-height: 30px; - color: #999dab; - background-color: #eeeff2; - border: 0; - border-radius: 3px 3px 0 0; - -webkit-transition: background-color .25s ease, color .25s ease; - -o-transition: background-color .25s ease, color .25s ease; - transition: background-color .25s ease, color .25s ease; -} -.nav-microtabs > li > a:hover { - color: #676978; - cursor: pointer; - background-color: #fafafc; -} -.nav-microtabs > li:last-of-type > a { - margin-right: 0; -} -.nav-microtabs > li.active > a { - color: #757888; - background-color: #fff; -} -.nav-microtabs > li.disabled > a { - font-style: italic; - color: #c6cad3; -} -.nav-microtabs > li.disabled > a:hover, -.nav-microtabs > li.disabled > a:focus { - color: #c6cad3; - text-decoration: none; - cursor: not-allowed; - background-color: #eeeff2; -} -.nav-microtabs-dark { - background-color: #434453; -} -.nav-microtabs-dark .microtabs-dismiss { - background-color: transparent; - /* Using pseudo elements to render an X */ - /* Hover State */ -} -.nav-microtabs-dark .microtabs-dismiss:after, -.nav-microtabs-dark .microtabs-dismiss:before { - width: 2px; - background-color: #8e91a1; -} -.nav-microtabs-dark .microtabs-dismiss:hover:after, -.nav-microtabs-dark .microtabs-dismiss:hover:before { - background-color: #ffb6a0; -} -.nav-microtabs-dark > li > a { - color: #bec2cc; - background-color: #545667; -} -.nav-microtabs-dark > li > a:hover { - color: #f6f6f8; - background-color: #676978; -} -.nav-microtabs-dark > li.active > a { - color: #f6f6f8; - background-color: #676978; -} -.nav-microtabs-dark > li.disabled > a { - color: #999dab; - background-color: #545667; -} -.nav-microtabs-dark > li.disabled > a:hover, -.nav-microtabs-dark > li.disabled > a:focus { - color: #999dab; - background-color: #545667; -} -.nav-microtabs-darker { - background-color: #383846; -} -.nav-microtabs-darker .microtabs-dismiss { - background-color: transparent; - /* Using pseudo elements to render an X */ - /* Hover State */ -} -.nav-microtabs-darker .microtabs-dismiss:after, -.nav-microtabs-darker .microtabs-dismiss:before { - width: 2px; - background-color: #8e91a1; -} -.nav-microtabs-darker .microtabs-dismiss:hover:after, -.nav-microtabs-darker .microtabs-dismiss:hover:before { - background-color: #ffb6a0; -} -.nav-microtabs-darker > li > a { - color: #bec2cc; - background-color: #383846; -} -.nav-microtabs-darker > li > a:hover { - color: #f6f6f8; - background-color: #434453; -} -.nav-microtabs-darker > li.active > a { - color: #f6f6f8; - background-color: #434453; -} -.nav-microtabs-darker > li.disabled > a { - color: #8e91a1; - background-color: #383846; -} -.nav-microtabs-darker > li.disabled > a:hover, -.nav-microtabs-darker > li.disabled > a:focus { - color: #8e91a1; - background-color: #383846; -} -.nav-microtabs-white { - position: relative; - background-color: #fff; - /* Using pseudo element for border since it can be z-indexed beneath the tabs */ -} -.panel-heading + .nav-microtabs-white { - /* Reduced top padding looks better when next to a matching panel heading */ - padding-top: 2px; -} -.nav-microtabs-white:before { - position: absolute; - bottom: 0; - left: 0; - z-index: 1; - width: 100%; - height: 2px; - content: ''; - background-color: #f6f6f8; -} -.nav-microtabs-white > li { - position: relative; - z-index: 2; -} -.nav-microtabs-white > li > a { - /* Removing 4px for borders, keeps text vertically centered */ - line-height: 26px; - background-color: #f6f6f8; - border-color: #f6f6f8; - border-style: solid; - border-width: 2px; - -webkit-transition: background-color .25s ease, border-color .25s ease, color .25s ease; - -o-transition: background-color .25s ease, border-color .25s ease, color .25s ease; - transition: background-color .25s ease, border-color .25s ease, color .25s ease; -} -.nav-microtabs-white > li > a:hover { - background-color: #fff; - border-color: #f6f6f8; -} -.nav-microtabs-white > li.active > a { - color: #676978; - background-color: #fff; - border-color: #f6f6f8 #f6f6f8 #fff #f6f6f8; -} -.nav-microtabs-white > li.disabled > a { - color: #c6cad3; - border-color: #fff #fff #f6f6f8 #fff; -} -.nav-microtabs-white > li.disabled > a:hover, -.nav-microtabs-white > li.disabled > a:focus { - color: #c6cad3; - background-color: #fff; - border-color: #fff #fff #f6f6f8 #fff; -} -.nav-microtabs-spring, -.nav-microtabs-summer, -.nav-microtabs-fall, -.nav-microtabs-winter { - /* Styles for dismiss buttons inside seasonal alternatives */ -} -.panel-heading + .nav-microtabs-spring, -.panel-heading + .nav-microtabs-summer, -.panel-heading + .nav-microtabs-fall, -.panel-heading + .nav-microtabs-winter { - /* Reduced top padding looks better when next to a matching panel heading */ - padding-top: 2px; -} -.nav-microtabs-spring .microtabs-dismiss, -.nav-microtabs-summer .microtabs-dismiss, -.nav-microtabs-fall .microtabs-dismiss, -.nav-microtabs-winter .microtabs-dismiss { - right: -5px; - margin-left: -4px; - /* Using pseudo elements to render an X */ - /* Hover State */ -} -.nav-microtabs-spring .microtabs-dismiss:after, -.nav-microtabs-summer .microtabs-dismiss:after, -.nav-microtabs-fall .microtabs-dismiss:after, -.nav-microtabs-winter .microtabs-dismiss:after, -.nav-microtabs-spring .microtabs-dismiss:before, -.nav-microtabs-summer .microtabs-dismiss:before, -.nav-microtabs-fall .microtabs-dismiss:before, -.nav-microtabs-winter .microtabs-dismiss:before { - width: 2px; - height: 8px; - background-color: #fff; - border-radius: 0; - -webkit-transition: height .25s ease; - -o-transition: height .25s ease; - transition: height .25s ease; -} -.nav-microtabs-spring .microtabs-dismiss:after, -.nav-microtabs-summer .microtabs-dismiss:after, -.nav-microtabs-fall .microtabs-dismiss:after, -.nav-microtabs-winter .microtabs-dismiss:after { - -webkit-transform: translate(-50%, -50%) rotate(45deg); - -ms-transform: translate(-50%, -50%) rotate(45deg); - -o-transform: translate(-50%, -50%) rotate(45deg); - transform: translate(-50%, -50%) rotate(45deg); -} -.nav-microtabs-spring .microtabs-dismiss:before, -.nav-microtabs-summer .microtabs-dismiss:before, -.nav-microtabs-fall .microtabs-dismiss:before, -.nav-microtabs-winter .microtabs-dismiss:before { - -webkit-transform: translate(-50%, -50%) rotate(-45deg); - -ms-transform: translate(-50%, -50%) rotate(-45deg); - -o-transform: translate(-50%, -50%) rotate(-45deg); - transform: translate(-50%, -50%) rotate(-45deg); -} -.nav-microtabs-spring .microtabs-dismiss:hover, -.nav-microtabs-summer .microtabs-dismiss:hover, -.nav-microtabs-fall .microtabs-dismiss:hover, -.nav-microtabs-winter .microtabs-dismiss:hover { - cursor: pointer; -} -.nav-microtabs-spring .microtabs-dismiss:hover:after, -.nav-microtabs-summer .microtabs-dismiss:hover:after, -.nav-microtabs-fall .microtabs-dismiss:hover:after, -.nav-microtabs-winter .microtabs-dismiss:hover:after, -.nav-microtabs-spring .microtabs-dismiss:hover:before, -.nav-microtabs-summer .microtabs-dismiss:hover:before, -.nav-microtabs-fall .microtabs-dismiss:hover:before, -.nav-microtabs-winter .microtabs-dismiss:hover:before { - height: 12px; - background-color: #fff; -} -.nav-microtabs-spring > li > a, -.nav-microtabs-summer > li > a, -.nav-microtabs-fall > li > a, -.nav-microtabs-winter > li > a { - color: #fff; - background-color: rgba(255, 255, 255, .19); -} -.nav-microtabs-spring > li > a:hover, -.nav-microtabs-summer > li > a:hover, -.nav-microtabs-fall > li > a:hover, -.nav-microtabs-winter > li > a:hover { - color: #fff; - background-color: rgba(255, 255, 255, .3); -} -.nav-microtabs-spring > li.active > a, -.nav-microtabs-summer > li.active > a, -.nav-microtabs-fall > li.active > a, -.nav-microtabs-winter > li.active > a { - color: #676978; - background-color: #fff; -} -.nav-microtabs-spring > li.active > a .microtabs-dismiss, -.nav-microtabs-summer > li.active > a .microtabs-dismiss, -.nav-microtabs-fall > li.active > a .microtabs-dismiss, -.nav-microtabs-winter > li.active > a .microtabs-dismiss { - background-color: transparent; -} -.nav-microtabs-spring > li.active > a .microtabs-dismiss:after, -.nav-microtabs-summer > li.active > a .microtabs-dismiss:after, -.nav-microtabs-fall > li.active > a .microtabs-dismiss:after, -.nav-microtabs-winter > li.active > a .microtabs-dismiss:after, -.nav-microtabs-spring > li.active > a .microtabs-dismiss:before, -.nav-microtabs-summer > li.active > a .microtabs-dismiss:before, -.nav-microtabs-fall > li.active > a .microtabs-dismiss:before, -.nav-microtabs-winter > li.active > a .microtabs-dismiss:before { - background-color: #bec2cc; -} -.nav-microtabs-spring > li.disabled > a, -.nav-microtabs-summer > li.disabled > a, -.nav-microtabs-fall > li.disabled > a, -.nav-microtabs-winter > li.disabled > a { - color: rgba(255, 255, 255, .68); - background-color: rgba(255, 255, 255, .19); -} -.nav-microtabs-spring > li.disabled > a:hover, -.nav-microtabs-summer > li.disabled > a:hover, -.nav-microtabs-fall > li.disabled > a:hover, -.nav-microtabs-winter > li.disabled > a:hover, -.nav-microtabs-spring > li.disabled > a:focus, -.nav-microtabs-summer > li.disabled > a:focus, -.nav-microtabs-fall > li.disabled > a:focus, -.nav-microtabs-winter > li.disabled > a:focus { - color: rgba(255, 255, 255, .68); - background-color: rgba(255, 255, 255, .19); -} -.nav-microtabs-spring { - background: #22adf6; - background: -webkit-linear-gradient(left, #22adf6 0%, #4ed8a0 100%); - background: -webkit-gradient(linear, left top, right top, from(#22adf6), to(#4ed8a0)); - background: -o-linear-gradient(left, #22adf6 0%, #4ed8a0 100%); - background: linear-gradient(to right, #22adf6 0%, #4ed8a0 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); -} -.nav-microtabs-summer { - background: #00c9ff; - background: -webkit-linear-gradient(left, #00c9ff 0%, #b1b6ff 100%); - background: -webkit-gradient(linear, left top, right top, from(#00c9ff), to(#b1b6ff)); - background: -o-linear-gradient(left, #00c9ff 0%, #b1b6ff 100%); - background: linear-gradient(to right, #00c9ff 0%, #b1b6ff 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); -} -.nav-microtabs-fall { - background: #9394ff; - background: -webkit-linear-gradient(left, #9394ff 0%, #ff8564 100%); - background: -webkit-gradient(linear, left top, right top, from(#9394ff), to(#ff8564)); - background: -o-linear-gradient(left, #9394ff 0%, #ff8564 100%); - background: linear-gradient(to right, #9394ff 0%, #ff8564 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); -} -.nav-microtabs-winter { - background: #22adf6; - background: -webkit-linear-gradient(left, #22adf6 0%, #9394ff 100%); - background: -webkit-gradient(linear, left top, right top, from(#22adf6), to(#9394ff)); - background: -o-linear-gradient(left, #22adf6 0%, #9394ff 100%); - background: linear-gradient(to right, #22adf6 0%, #9394ff 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1); -} -/* - Increase left & right padding on tab container to match panel paadding - when it is directly inside a panel -*/ -.panel > .nav-microtabs { - padding-right: 30px; - padding-left: 30px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } /*# sourceMappingURL=bootstrap-theme.css.map */ diff --git a/ui/src/style/theme/theme-dark.scss b/ui/src/style/theme/theme-dark.scss index 31509c31b..a9a22316c 100644 --- a/ui/src/style/theme/theme-dark.scss +++ b/ui/src/style/theme/theme-dark.scss @@ -12,548 +12,548 @@ Dark Panel Styles ---------------------------------------------- */ -.row:only-child .panel, -.row:last-child .panel { - margin-bottom: 0; -} -.panel hr { - background-color: $g5-pepper; -} -.panel-title, -.panel-title a { - @include no-user-select(); -} -.panel-minimal { - border: 0; - - .panel-title { - color: $g12-forge !important; - font-size: 19px; - font-weight: 400 !important; - } - .panel-body { - padding: 30px; - background-color: $g3-castle; - border: 0; - color: $g13-mist; - - > *:first-child { - margin-top: 0; - } - > *:last-child { - margin-bottom: 0; - } - } -} -.panel.panel-info { - background-color: $g3-castle; - border: 0; - - .panel-body, - .panel-heading { - background-color: transparent; - } - .panel-body { - padding: 0px 30px 30px 30px; - } - .panel-heading { - padding: 0 30px; - height: 60px; - border: 0px; - .panel-title { color: $g14-chromium;} - } -} -.panel .panel-body table { - margin: 0; -} - -table thead th { - @include no-user-select(); -} - - -/* - Dark Buttons - ---------------------------------------------- -*/ -.btn { - border: 0; - transition: - background-color 0.25s ease, - color 0.25s ease, - box-shadow 0.25s ease; -} -.btn.btn-sm { - font-size: 13px; - line-height: 30px !important; - height: 30px !important; - padding: 0 9px !important; -} -a.btn.btn-sm > span.icon, -div.btn.btn-sm > span.icon, -button.btn.btn-sm > span.icon { - font-size: 16px; - margin: 0 6px 0 0 ; -} -.btn.btn-xs > .icon { - position: relative; - top: -1px; -} - -.btn.disabled, -.btn[disabled="true"], -.btn[disabled] { - &.btn-success, - &.btn-success:hover, - &.btn-success:focus, - &.btn-success:active, - &.btn-success:hover:active, - &.btn-success:hover:focus, - &.btn-success:focus:active, - &.btn-success:focus:active:hover { - border-color: $c-emerald; - background-color: $c-emerald; - color: $g2-kevlar !important; - } - &.btn-primary, - &.btn-primary:hover, - &.btn-primary:focus, - &.btn-primary:active, - &.btn-primary:hover:active, - &.btn-primary:hover:focus, - &.btn-primary:focus:active, - &.btn-primary:focus:active:hover { - border-color: $c-sapphire; - background-color: $c-sapphire; - color: $g2-kevlar !important; - } - &.btn-info, - &.btn-info:hover, - &.btn-info:focus, - &.btn-info:active, - &.btn-info:hover:active, - &.btn-info:hover:focus, - &.btn-info:focus:active, - &.btn-info:focus:active:hover { - border-color: $g5-pepper; - background-color: $g5-pepper; - color: $g8-storm !important; - } - &.btn-danger, - &.btn-danger:hover, - &.btn-danger:focus, - &.btn-danger:active, - &.btn-danger:hover:active, - &.btn-danger:hover:focus, - &.btn-danger:focus:active, - &.btn-danger:focus:active:hover { - border-color: $c-ruby; - background-color: $c-ruby; - color: $g2-kevlar !important; - } - &.btn-warning, - &.btn-warning:hover, - &.btn-warning:focus, - &.btn-warning:active, - &.btn-warning:hover:active, - &.btn-warning:hover:focus, - &.btn-warning:focus:active, - &.btn-warning:focus:active:hover { - border-color: $c-star; - background-color: $c-star; - color: $g2-kevlar !important; - } -} - - - -/* - Dark Inputs - ---------------------------------------------- -*/ -.form-group { - margin-bottom: 9px; -} -.form-group label { - font-size: 12px; - line-height: 12px; - font-weight: 600; - margin-bottom: 4px; - padding: 0 13px; - @include no-user-select(); -} -.form-control { - padding: 0 13px; - background-color: $g2-kevlar !important; - border-color: $g5-pepper !important; - color: $g15-platinum !important; - - &:hover { - border-color: $g6-smoke !important; - } - - &:focus { - border-color: $c-pool !important; - box-shadow: 0 0 6px 0px $c-pool !important; - color: $g20-white !important; - } - - &--green:focus { - border-color: $c-rainforest !important; - box-shadow: 0 0 6px 0px $c-rainforest !important; - } -} -.form-helper { - margin: 4px 0 !important; - font-weight: 400 !important; - font-style: italic; - line-height: 16px !important; -} -.form-group-submit { - margin-top: 30px; -} - -/* Placeholder Text */ -.form-control, -textarea, -input { - &::-webkit-input-placeholder { color: $g9-mountain; font-weight: 500 !important; } - &::-moz-placeholder { color: $g9-mountain; font-weight: 500 !important; } - &:-ms-input-placeholder { color: $g9-mountain; font-weight: 500 !important; } - &:-moz-placeholder { color: $g9-mountain; font-weight: 500 !important; } -} - -/* Text Selection Styling */ -::selection { - background-color: $c-pool !important; - color: $g20-white !important; -} -::-moz-selection { - background-color: $c-pool !important; - color: $g20-white !important; -} - -/* Green (Kapacitor) themed inputs */ -.form-control--green { - color: $c-rainforest !important; - &:focus {color: $g20-white !important;} - - &::selection { - background-color: $c-rainforest !important; - color: $g20-white !important; - } - &::-moz-selection { - background-color: $c-rainforest !important; - color: $g20-white !important; - } -} - - -/* - Dark Code Samples - ---------------------------------------------- -*/ -code, pre { - font-family: 'RobotoMono', monospace !important; -} -code { - display: inline-block; - background-color: $g2-kevlar; - color: $c-comet; - border: 0 !important; - border-radius: 2px; - padding: 2.5px 5px 2.5px 4px; - margin: 0 1px 0 2px; - line-height: 11px; -} - - -/* - Dark Modals - ---------------------------------------------- -*/ - -.modal-backdrop { - background: $c-pool; - background: -moz-linear-gradient(-45deg, $c-pool 0%, $c-comet 100%); - background: -webkit-linear-gradient(-45deg, $c-pool 0%,$c-comet 100%); - background: linear-gradient(135deg, $c-pool 0%,$c-comet 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$c-pool', endColorstr='$c-comet',GradientType=1 ); -} - -.modal-content { - background-color: $g3-castle; -} -.modal-header, -.modal-body, -.modal-footer { - background-color: transparent; - color: $g13-mist; - padding-left: ($sidebar-width / 2); - padding-right: ($sidebar-width / 2); -} -.modal-body { - padding-top: 0; - padding-bottom: 0; -} -.modal-title { - color: $g18-cloud !important; -} -.modal-header .close { - transition: none; - outline: none; - - &:before, - &:after { - display: block; - content: ''; - width: 20px; - height: 2px; - border-radius: 1px; - background-color: $g7-graphite; - transition: background-color 0.25s ease; - position: absolute; - top: 50%; - left: 50%; - } - &:before { transform: translate(-50%,-50%) rotate(45deg); } - &:after { transform: translate(-50%,-50%) rotate(-45deg); } - - &:hover { - cursor: pointer; - - &:before, - &:after { - background-color: $g13-mist; - } - } - span { - display: none; - } -} - -/* - Dark Toggles - ---------------------------------------------- -*/ -$toggle-height-sm: 30px; -$toggle-font-sm: 13px; -$toggle-padding-sm: 9px; - -$toggle-height-md: 30px; -$toggle-font-md: 13px; -$toggle-padding-md: 9px; - -$toggle-border: 2px; - -.toggle { - display: inline-block; - margin: 0; - width: auto; - padding: $toggle-border; - border-radius: 3px; - background-color: $g5-pepper; - font-size: 0; - white-space: nowrap; - @include no-user-select(); -} -.toggle-btn { - border: 0; - border-radius: 1px; - display: inline-block; - vertical-align: middle; - width: auto; - background-color: $g3-castle; - color: $g11-sidewalk; - transition: - background-color 0.25s, - color 0.25s; - - &:hover { - cursor: pointer; - color: $g14-chromium; - background-color: $g4-onyx; - } - &.active { - background-color: $g5-pepper; - color: $g18-cloud; - } -} -.toggle-sm { - height: $toggle-height-sm; - - .toggle-btn { - height: ($toggle-height-sm - ($toggle-border * 2)); - line-height: ($toggle-height-sm - ($toggle-border * 2)); - padding: 0 16px; - font-size: $toggle-font-sm; - font-weight: 600; - } -} - - -/* - Static Form Controls - ---------------------------------------------- -*/ +// .row:only-child .panel, +// .row:last-child .panel { +// margin-bottom: 0; +// } +// .panel hr { +// background-color: $g5-pepper; +// } +// .panel-title, +// .panel-title a { +// @include no-user-select(); +// } +// .panel-minimal { +// border: 0; +// +// .panel-title { +// color: $g12-forge !important; +// font-size: 19px; +// font-weight: 400 !important; +// } +// .panel-body { +// padding: 30px; +// background-color: $g3-castle; +// border: 0; +// color: $g13-mist; +// +// > *:first-child { +// margin-top: 0; +// } +// > *:last-child { +// margin-bottom: 0; +// } +// } +// } +// .panel.panel-info { +// background-color: $g3-castle; +// border: 0; +// +// .panel-body, +// .panel-heading { +// background-color: transparent; +// } +// .panel-body { +// padding: 0px 30px 30px 30px; +// } +// .panel-heading { +// padding: 0 30px; +// height: 60px; +// border: 0px; +// .panel-title { color: $g14-chromium;} +// } +// } +// .panel .panel-body table { +// margin: 0; +// } +// +// table thead th { +// @include no-user-select(); +// } +// +// +// /* +// Dark Buttons +// ---------------------------------------------- +// */ +// .btn { +// border: 0; +// transition: +// background-color 0.25s ease, +// color 0.25s ease, +// box-shadow 0.25s ease; +// } +// .btn.btn-sm { +// font-size: 13px; +// line-height: 30px !important; +// height: 30px !important; +// padding: 0 9px !important; +// } +// a.btn.btn-sm > span.icon, +// div.btn.btn-sm > span.icon, +// button.btn.btn-sm > span.icon { +// font-size: 16px; +// margin: 0 6px 0 0 ; +// } +// .btn.btn-xs > .icon { +// position: relative; +// top: -1px; +// } +// +// .btn.disabled, +// .btn[disabled="true"], +// .btn[disabled] { +// &.btn-success, +// &.btn-success:hover, +// &.btn-success:focus, +// &.btn-success:active, +// &.btn-success:hover:active, +// &.btn-success:hover:focus, +// &.btn-success:focus:active, +// &.btn-success:focus:active:hover { +// border-color: $c-emerald; +// background-color: $c-emerald; +// color: $g2-kevlar !important; +// } +// &.btn-primary, +// &.btn-primary:hover, +// &.btn-primary:focus, +// &.btn-primary:active, +// &.btn-primary:hover:active, +// &.btn-primary:hover:focus, +// &.btn-primary:focus:active, +// &.btn-primary:focus:active:hover { +// border-color: $c-sapphire; +// background-color: $c-sapphire; +// color: $g2-kevlar !important; +// } +// &.btn-info, +// &.btn-info:hover, +// &.btn-info:focus, +// &.btn-info:active, +// &.btn-info:hover:active, +// &.btn-info:hover:focus, +// &.btn-info:focus:active, +// &.btn-info:focus:active:hover { +// border-color: $g5-pepper; +// background-color: $g5-pepper; +// color: $g8-storm !important; +// } +// &.btn-danger, +// &.btn-danger:hover, +// &.btn-danger:focus, +// &.btn-danger:active, +// &.btn-danger:hover:active, +// &.btn-danger:hover:focus, +// &.btn-danger:focus:active, +// &.btn-danger:focus:active:hover { +// border-color: $c-ruby; +// background-color: $c-ruby; +// color: $g2-kevlar !important; +// } +// &.btn-warning, +// &.btn-warning:hover, +// &.btn-warning:focus, +// &.btn-warning:active, +// &.btn-warning:hover:active, +// &.btn-warning:hover:focus, +// &.btn-warning:focus:active, +// &.btn-warning:focus:active:hover { +// border-color: $c-star; +// background-color: $c-star; +// color: $g2-kevlar !important; +// } +// } +// +// +// +// /* +// Dark Inputs +// ---------------------------------------------- +// */ +// .form-group { +// margin-bottom: 9px; +// } +// .form-group label { +// font-size: 12px; +// line-height: 12px; +// font-weight: 600; +// margin-bottom: 4px; +// padding: 0 13px; +// @include no-user-select(); +// } +// .form-control { +// padding: 0 13px; +// background-color: $g2-kevlar !important; +// border-color: $g5-pepper !important; +// color: $g15-platinum !important; +// +// &:hover { +// border-color: $g6-smoke !important; +// } +// +// &:focus { +// border-color: $c-pool !important; +// box-shadow: 0 0 6px 0px $c-pool !important; +// color: $g20-white !important; +// } +// +// &--green:focus { +// border-color: $c-rainforest !important; +// box-shadow: 0 0 6px 0px $c-rainforest !important; +// } +// } +// .form-helper { +// margin: 4px 0 !important; +// font-weight: 400 !important; +// font-style: italic; +// line-height: 16px !important; +// } +// .form-group-submit { +// margin-top: 30px; +// } +// +// /* Placeholder Text */ +// .form-control, +// textarea, +// input { +// &::-webkit-input-placeholder { color: $g9-mountain; font-weight: 500 !important; } +// &::-moz-placeholder { color: $g9-mountain; font-weight: 500 !important; } +// &:-ms-input-placeholder { color: $g9-mountain; font-weight: 500 !important; } +// &:-moz-placeholder { color: $g9-mountain; font-weight: 500 !important; } +// } +// +// /* Text Selection Styling */ +// ::selection { +// background-color: $c-pool !important; +// color: $g20-white !important; +// } +// ::-moz-selection { +// background-color: $c-pool !important; +// color: $g20-white !important; +// } +// +// /* Green (Kapacitor) themed inputs */ +// .form-control--green { +// color: $c-rainforest !important; +// &:focus {color: $g20-white !important;} +// +// &::selection { +// background-color: $c-rainforest !important; +// color: $g20-white !important; +// } +// &::-moz-selection { +// background-color: $c-rainforest !important; +// color: $g20-white !important; +// } +// } +// +// +// /* +// Dark Code Samples +// ---------------------------------------------- +// */ +// code, pre { +// font-family: 'RobotoMono', monospace !important; +// } +// code { +// display: inline-block; +// background-color: $g2-kevlar; +// color: $c-comet; +// border: 0 !important; +// border-radius: 2px; +// padding: 2.5px 5px 2.5px 4px; +// margin: 0 1px 0 2px; +// line-height: 11px; +// } +// +// +// /* +// Dark Modals +// ---------------------------------------------- +// */ +// +// .modal-backdrop { +// background: $c-pool; +// background: -moz-linear-gradient(-45deg, $c-pool 0%, $c-comet 100%); +// background: -webkit-linear-gradient(-45deg, $c-pool 0%,$c-comet 100%); +// background: linear-gradient(135deg, $c-pool 0%,$c-comet 100%); +// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$c-pool', endColorstr='$c-comet',GradientType=1 ); +// } +// +// .modal-content { +// background-color: $g3-castle; +// } +// .modal-header, +// .modal-body, +// .modal-footer { +// background-color: transparent; +// color: $g13-mist; +// padding-left: ($sidebar-width / 2); +// padding-right: ($sidebar-width / 2); +// } +// .modal-body { +// padding-top: 0; +// padding-bottom: 0; +// } +// .modal-title { +// color: $g18-cloud !important; +// } +// .modal-header .close { +// transition: none; +// outline: none; +// +// &:before, +// &:after { +// display: block; +// content: ''; +// width: 20px; +// height: 2px; +// border-radius: 1px; +// background-color: $g7-graphite; +// transition: background-color 0.25s ease; +// position: absolute; +// top: 50%; +// left: 50%; +// } +// &:before { transform: translate(-50%,-50%) rotate(45deg); } +// &:after { transform: translate(-50%,-50%) rotate(-45deg); } +// +// &:hover { +// cursor: pointer; +// +// &:before, +// &:after { +// background-color: $g13-mist; +// } +// } +// span { +// display: none; +// } +// } +// +// /* +// Dark Toggles +// ---------------------------------------------- +// */ +// $toggle-height-sm: 30px; +// $toggle-font-sm: 13px; +// $toggle-padding-sm: 9px; +// +// $toggle-height-md: 30px; +// $toggle-font-md: 13px; +// $toggle-padding-md: 9px; +// +// $toggle-border: 2px; +// +// .toggle { +// display: inline-block; +// margin: 0; +// width: auto; +// padding: $toggle-border; +// border-radius: 3px; +// background-color: $g5-pepper; +// font-size: 0; +// white-space: nowrap; +// @include no-user-select(); +// } +// .toggle-btn { +// border: 0; +// border-radius: 1px; +// display: inline-block; +// vertical-align: middle; +// width: auto; +// background-color: $g3-castle; +// color: $g11-sidewalk; +// transition: +// background-color 0.25s, +// color 0.25s; +// +// &:hover { +// cursor: pointer; +// color: $g14-chromium; +// background-color: $g4-onyx; +// } +// &.active { +// background-color: $g5-pepper; +// color: $g18-cloud; +// } +// } +// .toggle-sm { +// height: $toggle-height-sm; +// +// .toggle-btn { +// height: ($toggle-height-sm - ($toggle-border * 2)); +// line-height: ($toggle-height-sm - ($toggle-border * 2)); +// padding: 0 16px; +// font-size: $toggle-font-sm; +// font-weight: 600; +// } +// } +// +// +// /* +// Static Form Controls +// ---------------------------------------------- +// */ $form-static-checkbox-size: 16px; -.form-control-static { - border: 2px solid $g5-pepper; - height: auto; - border-radius: 4px; - padding: 7px 12px; - position: relative; - - input[type="checkbox"] { - position: relative; - left: -9999px; - visibility: hidden; - width: 0; - height: 0; - margin: 0; - - // Faux Checkbox - & + label { - font-size: 14px !important; - line-height: 16px; - color: $g11-sidewalk; - font-weight: 500; - transition: color 0.25s ease; - margin: 0; - padding: 0 0 0 (12px + $form-static-checkbox-size) !important; - user-select: none; - -ms-user-select: none; - -moz-user-selct: none; - -webkit-user-select: none; - - &:before { - content: ''; - position: absolute; - top: 50%; - left: 12px; - transform: translateY(-50%); - width: $form-static-checkbox-size; - height: $form-static-checkbox-size; - background-color: $g2-kevlar; - border: 2px solid $g5-pepper; - border-radius: 3px; - z-index: 2; - transition: - border-color 0.25s ease; - } - &:after { - content: ''; - position: absolute; - top: 50%; - left: (12px + ($form-static-checkbox-size / 2)); - transform: translate(-50%,-50%) scale(2,2); - opacity: 0; - width: 6px; - height: 6px; - border-radius: 50%; - background-color: $c-pool; - z-index: 3; - transition: - opacity 0.25s ease, - transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); - } - &:hover { - cursor: pointer; - color: $g20-white; - - &:before { - border-color: $g6-smoke; - } - } - } - // Faux Checkbox (Checked) - &:checked + label { - color: $g20-white; - - &:after { - opacity: 1; - transform: translate(-50%,-50%) scale(1,1); - } - } - } -} - -.form-control-static .radio { - margin: 0; - - input[type="radio"] { - position: relative; - left: -9999px; - visibility: hidden; - width: 0; - height: 0; - margin: 0; - - // Faux Checkbox - & + label { - font-size: 14px !important; - line-height: 16px; - color: $g11-sidewalk; - font-weight: 500; - transition: color 0.25s ease; - margin: 0; - padding: 0 0 0 (12px + $form-static-checkbox-size) !important; - user-select: none; - -ms-user-select: none; - -moz-user-selct: none; - -webkit-user-select: none; - - &:before { - content: ''; - position: absolute; - top: 50%; - left: 0; - transform: translateY(-50%); - width: $form-static-checkbox-size; - height: $form-static-checkbox-size; - background-color: $g2-kevlar; - border: 2px solid $g5-pepper; - border-radius: 50%; - z-index: 2; - transition: - border-color 0.25s ease; - } - &:after { - content: ''; - position: absolute; - top: 50%; - left: ($form-static-checkbox-size / 2); - transform: translate(-50%,-50%) scale(2,2); - opacity: 0; - width: 6px; - height: 6px; - border-radius: 50%; - background-color: $c-pool; - z-index: 3; - transition: - opacity 0.25s ease, - transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); - } - &:hover { - cursor: pointer; - color: $g20-white; - - &:before { - border-color: $g6-smoke; - } - } - } - // Faux Checkbox (Checked) - &:checked + label { - color: $g20-white; - - &:after { - opacity: 1; - transform: translate(-50%,-50%) scale(1,1); - } - } - } -} +// .form-control-static { +// border: 2px solid $g5-pepper; +// height: auto; +// border-radius: 4px; +// padding: 7px 12px; +// position: relative; +// +// input[type="checkbox"] { +// position: relative; +// left: -9999px; +// visibility: hidden; +// width: 0; +// height: 0; +// margin: 0; +// +// // Faux Checkbox +// & + label { +// font-size: 14px !important; +// line-height: 16px; +// color: $g11-sidewalk; +// font-weight: 500; +// transition: color 0.25s ease; +// margin: 0; +// padding: 0 0 0 (12px + $form-static-checkbox-size) !important; +// user-select: none; +// -ms-user-select: none; +// -moz-user-selct: none; +// -webkit-user-select: none; +// +// &:before { +// content: ''; +// position: absolute; +// top: 50%; +// left: 12px; +// transform: translateY(-50%); +// width: $form-static-checkbox-size; +// height: $form-static-checkbox-size; +// background-color: $g2-kevlar; +// border: 2px solid $g5-pepper; +// border-radius: 3px; +// z-index: 2; +// transition: +// border-color 0.25s ease; +// } +// &:after { +// content: ''; +// position: absolute; +// top: 50%; +// left: (12px + ($form-static-checkbox-size / 2)); +// transform: translate(-50%,-50%) scale(2,2); +// opacity: 0; +// width: 6px; +// height: 6px; +// border-radius: 50%; +// background-color: $c-pool; +// z-index: 3; +// transition: +// opacity 0.25s ease, +// transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); +// } +// &:hover { +// cursor: pointer; +// color: $g20-white; +// +// &:before { +// border-color: $g6-smoke; +// } +// } +// } +// // Faux Checkbox (Checked) +// &:checked + label { +// color: $g20-white; +// +// &:after { +// opacity: 1; +// transform: translate(-50%,-50%) scale(1,1); +// } +// } +// } +// } +// +// .form-control-static .radio { +// margin: 0; +// +// input[type="radio"] { +// position: relative; +// left: -9999px; +// visibility: hidden; +// width: 0; +// height: 0; +// margin: 0; +// +// // Faux Checkbox +// & + label { +// font-size: 14px !important; +// line-height: 16px; +// color: $g11-sidewalk; +// font-weight: 500; +// transition: color 0.25s ease; +// margin: 0; +// padding: 0 0 0 (12px + $form-static-checkbox-size) !important; +// user-select: none; +// -ms-user-select: none; +// -moz-user-selct: none; +// -webkit-user-select: none; +// +// &:before { +// content: ''; +// position: absolute; +// top: 50%; +// left: 0; +// transform: translateY(-50%); +// width: $form-static-checkbox-size; +// height: $form-static-checkbox-size; +// background-color: $g2-kevlar; +// border: 2px solid $g5-pepper; +// border-radius: 50%; +// z-index: 2; +// transition: +// border-color 0.25s ease; +// } +// &:after { +// content: ''; +// position: absolute; +// top: 50%; +// left: ($form-static-checkbox-size / 2); +// transform: translate(-50%,-50%) scale(2,2); +// opacity: 0; +// width: 6px; +// height: 6px; +// border-radius: 50%; +// background-color: $c-pool; +// z-index: 3; +// transition: +// opacity 0.25s ease, +// transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); +// } +// &:hover { +// cursor: pointer; +// color: $g20-white; +// +// &:before { +// border-color: $g6-smoke; +// } +// } +// } +// // Faux Checkbox (Checked) +// &:checked + label { +// color: $g20-white; +// +// &:after { +// opacity: 1; +// transform: translate(-50%,-50%) scale(1,1); +// } +// } +// } +// } .dark-checkbox { input { From fd4067e512c7add49d57855d0552e9f33cb47f33 Mon Sep 17 00:00:00 2001 From: Alex P Date: Mon, 22 May 2017 15:40:44 -0700 Subject: [PATCH 02/75] Remove inherited page-header styles --- ui/src/style/layout/page-header.scss | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/ui/src/style/layout/page-header.scss b/ui/src/style/layout/page-header.scss index be82b99d3..c494e3b9d 100644 --- a/ui/src/style/layout/page-header.scss +++ b/ui/src/style/layout/page-header.scss @@ -35,10 +35,6 @@ $page-header-weight: 400 !important; .page-header__right { display: flex; align-items: center; - - > *:only-child { - margin: 0; - } } .page-header__left { justify-content: flex-start; @@ -50,9 +46,14 @@ $page-header-weight: 400 !important; justify-content: flex-end; > * { margin: 0 0 0 4px; + + &:only-child { + margin-right: 0; + } } } .page-header__title { + letter-spacing: 0; text-transform: none; font-size: $page-header-size; font-weight: $page-header-weight; @@ -94,4 +95,4 @@ $page-header-weight: 400 !important; &:hover:after { background-color: $g18-cloud; } -} \ No newline at end of file +} From 885a4d068dbc7f4bd1f07022d2e4fed28f737206 Mon Sep 17 00:00:00 2001 From: Alex P Date: Mon, 22 May 2017 19:17:28 -0700 Subject: [PATCH 03/75] Use "tablist" nav styles from theme, remove excess styles --- ui/src/data_explorer/components/VisHeader.js | 6 ++--- ui/src/kapacitor/components/RuleMessage.js | 9 ++++--- ui/src/kapacitor/components/ValuesSection.js | 4 ++- ui/src/shared/components/Tabs.js | 15 ++++++++++- ui/src/style/pages/kapacitor.scss | 27 -------------------- 5 files changed, 25 insertions(+), 36 deletions(-) diff --git a/ui/src/data_explorer/components/VisHeader.js b/ui/src/data_explorer/components/VisHeader.js index 30f80de1f..54a5cd06f 100644 --- a/ui/src/data_explorer/components/VisHeader.js +++ b/ui/src/data_explorer/components/VisHeader.js @@ -4,14 +4,14 @@ import classnames from 'classnames' const VisHeader = ({views, view, onToggleView, name}) => (
{views.length - ?
    + ?
      {views.map(v => (
    • onToggleView(v)} - className={classnames('toggle-btn ', {active: view === v})} + className={classnames({active: view === v})} > - {v} + {v.charAt(0).toUpperCase() + v.slice(1)}
      • ))}
    diff --git a/ui/src/kapacitor/components/RuleMessage.js b/ui/src/kapacitor/components/RuleMessage.js index 78f6d3efc..fd596a2c7 100644 --- a/ui/src/kapacitor/components/RuleMessage.js +++ b/ui/src/kapacitor/components/RuleMessage.js @@ -58,12 +58,13 @@ export const RuleMessage = React.createClass({

    Send this Alert to:

    -
      +
        {alerts.map(alert => (
      • this.handleChooseAlert(alert)} > diff --git a/ui/src/kapacitor/components/ValuesSection.js b/ui/src/kapacitor/components/ValuesSection.js index 4664d4289..0fa97e60c 100644 --- a/ui/src/kapacitor/components/ValuesSection.js +++ b/ui/src/kapacitor/components/ValuesSection.js @@ -27,7 +27,9 @@ export const ValuesSection = React.createClass({
        - {TABS.map(tab => {tab})} + {TABS.map(tab => ( + {tab} + ))} diff --git a/ui/src/shared/components/Tabs.js b/ui/src/shared/components/Tabs.js index 6fb090712..34b640650 100644 --- a/ui/src/shared/components/Tabs.js +++ b/ui/src/shared/components/Tabs.js @@ -8,9 +8,20 @@ export const Tab = React.createClass({ onClick: func, isDisabled: bool, isActive: bool, + isKapacitorTab: bool, }, render() { + if (this.props.isKapacitorTab) { + return ( +
      • + {this.props.children} +
        • + ) + } return (

        Alert Type

        -
        {children}
        +
        + {children} +
        ) } diff --git a/ui/src/style/pages/kapacitor.scss b/ui/src/style/pages/kapacitor.scss index 79d963fb5..d0788453b 100644 --- a/ui/src/style/pages/kapacitor.scss +++ b/ui/src/style/pages/kapacitor.scss @@ -419,33 +419,6 @@ $kapacitor-font-sm: 13px; .kapacitor-alert-message, { border-radius: $kap-radius-lg $kap-radius-lg 0 0; border-bottom: 2px solid $kapacitor-divider-color; - - .tab-group { - padding: 0; - - > .btn.tab { - padding: 0 $kap-padding-md; - height: $kap-input-height; - line-height: ($kap-input-height - 4px); - font-size: $kapacitor-font-sm; - font-weight: 700; - background-color: $kapacitor-graphic-color; - border-color: $g5-pepper; - color: $g11-sidewalk; - - &:hover { - background-color: $g4-onyx; - color: $g20-white; - } - &.active { - background-color: $g5-pepper; - color: $kapacitor-accent; - } - } - } -} -.rule-builder .form-control--green { - font-weight: 600 !important; } input.size-486 {width: 486px;} From 2c9ecee10c9d167dd565cacad91e7d64f73bddc6 Mon Sep 17 00:00:00 2001 From: Alex P Date: Mon, 22 May 2017 19:30:12 -0700 Subject: [PATCH 04/75] Refactor group by time dropdown --- ui/src/data_explorer/components/FieldList.js | 6 ++- .../data_explorer/components/FieldListItem.js | 25 ++++++---- .../components/GroupByTimeDropdown.js | 48 +++++++------------ ui/src/style/components/dropdown.scss | 37 -------------- 4 files changed, 37 insertions(+), 79 deletions(-) diff --git a/ui/src/data_explorer/components/FieldList.js b/ui/src/data_explorer/components/FieldList.js index 45d8e4bb7..9b0f7add0 100644 --- a/ui/src/data_explorer/components/FieldList.js +++ b/ui/src/data_explorer/components/FieldList.js @@ -1,7 +1,8 @@ import React, {PropTypes} from 'react' import FieldListItem from 'src/data_explorer/components/FieldListItem' -import GroupByTimeDropdown from 'src/data_explorer/components/GroupByTimeDropdown' +import GroupByTimeDropdown + from 'src/data_explorer/components/GroupByTimeDropdown' import FancyScrollbar from 'shared/components/FancyScrollbar' import {showFieldKeys} from 'shared/apis/metaQuery' @@ -77,7 +78,7 @@ const FieldList = React.createClass({ }, render() { - const {query} = this.props + const {query, isKapacitorRule} = this.props const hasAggregates = query.fields.some(f => f.funcs && f.funcs.length) const hasGroupByTime = query.groupBy.time @@ -90,6 +91,7 @@ const FieldList = React.createClass({ isOpen={!hasGroupByTime} selected={query.groupBy.time} onChooseGroupByTime={this.handleGroupByTime} + isInRuleBuilder={isKapacitorRule} /> : null}
    diff --git a/ui/src/data_explorer/components/FieldListItem.js b/ui/src/data_explorer/components/FieldListItem.js index 002d92e83..24eb6e099 100644 --- a/ui/src/data_explorer/components/FieldListItem.js +++ b/ui/src/data_explorer/components/FieldListItem.js @@ -56,7 +56,9 @@ const FieldListItem = React.createClass({ if (isKapacitorRule) { return (
    @@ -66,14 +68,15 @@ const FieldListItem = React.createClass({ {isSelected ? - : null - } + : null}
    ) } @@ -81,7 +84,9 @@ const FieldListItem = React.createClass({ return (
    @@ -89,13 +94,17 @@ const FieldListItem = React.createClass({ {fieldText} {isSelected - ?
    + ?
    Functions
    - : null - } + : null}
    - {(isSelected && isOpen) + {isSelected && isOpen ? -
    - Group by {selected || 'time'} - -
    - -
    + ({ + ...groupBy, + text: groupBy.menuOption, + }))} + onChoose={onChooseGroupByTime} + selected={selected ? `Group by ${selected}` : 'Group by Time'} + /> ) }, }) diff --git a/ui/src/style/components/dropdown.scss b/ui/src/style/components/dropdown.scss index 4e96bc0b4..55174a32a 100644 --- a/ui/src/style/components/dropdown.scss +++ b/ui/src/style/components/dropdown.scss @@ -220,40 +220,3 @@ $dropdown-menu-max-height: 270px; } } -/* - Group By Time Dropdown - ---------------------------------------------- -*/ -.group-by-time-dropdown { - .dropdown-toggle { - width: 120px; - height: 28px !important; - line-height: 28px !important; - font-size: 12px; - text-transform: none; - border-radius: $radius; - display: block; - } - .dropdown-menu > li.dropdown-item > a {display: block;} -} -.data-explorer .group-by-time-dropdown .dropdown-toggle { - font-weight: 600; - background-color: $g2-kevlar; - line-height: 24px !important; - border: 2px solid $g6-smoke; - transition: - border-color 0.25s ease, - color 0.25s ease, - box-shadow 0.25s ease; - color: $g10-wolf; - - &:hover { - border-color: $g7-graphite; - color: $g18-cloud; - } -} -.data-explorer .group-by-time-dropdown.open .dropdown-toggle { - background-color: $g2-kevlar !important; - border-color: $c-pool !important; - box-shadow: 0 0 6px 0px $c-pool !important -} \ No newline at end of file From 5c94c5954b4e7caca30daa10d6446cc67ae128c8 Mon Sep 17 00:00:00 2001 From: Alex P Date: Mon, 22 May 2017 22:41:19 -0700 Subject: [PATCH 05/75] Remove dropdown stylesheet Redundant --- ui/src/style/chronograf.scss | 1 - ui/src/style/components/dropdown.scss | 222 -------------------------- 2 files changed, 223 deletions(-) delete mode 100644 ui/src/style/components/dropdown.scss diff --git a/ui/src/style/chronograf.scss b/ui/src/style/chronograf.scss index 43a68392d..c135589ee 100644 --- a/ui/src/style/chronograf.scss +++ b/ui/src/style/chronograf.scss @@ -27,7 +27,6 @@ // Components @import 'components/confirm-buttons'; @import 'components/custom-time-range'; -@import 'components/dropdown'; @import 'components/dygraphs'; @import 'components/flash-messages'; @import 'components/flip-toggle'; diff --git a/ui/src/style/components/dropdown.scss b/ui/src/style/components/dropdown.scss deleted file mode 100644 index 55174a32a..000000000 --- a/ui/src/style/components/dropdown.scss +++ /dev/null @@ -1,222 +0,0 @@ -/* - Dropdowns - ---------------------------------------------- - Note: Some of these styles are intended to - override styles from bootstrap-theme -*/ - -$dropdown-menu-default-width: 100%; -$dropdown-menu-max-height: 270px; - -/* - Generic width modifiers - Use instead of creating new classes if possible -*/ -.dropdown .dropdown-toggle { - width: 120px; /* Default width */ -} -.dropdown { - &-80 .dropdown-toggle {width: 80px;} - &-90 .dropdown-toggle {width: 90px;} - &-100 .dropdown-toggle {width: 100px;} - &-110 .dropdown-toggle {width: 110px;} - &-120 .dropdown-toggle {width: 120px;} - &-130 .dropdown-toggle {width: 130px;} - &-140 .dropdown-toggle {width: 140px;} - &-150 .dropdown-toggle {width: 150px;} - &-160 .dropdown-toggle {width: 160px;} - &-170 .dropdown-toggle {width: 170px;} - &-180 .dropdown-toggle {width: 180px;} - &-190 .dropdown-toggle {width: 190px;} - &-200 .dropdown-toggle {width: 200px;} - &-210 .dropdown-toggle {width: 210px;} - &-220 .dropdown-toggle {width: 220px;} - &-230 .dropdown-toggle {width: 230px;} - &-240 .dropdown-toggle {width: 240px;} - &-250 .dropdown-toggle {width: 250px;} -} - -.dropdown-toggle { - position: relative; - text-align: left; - display: flex; - align-items: center; - - .caret { - position: absolute; - top: calc(50% + 1px); - right: 8px; - transform: translateY(-50%); - } - > .icon { - display: inline-block; - vertical-align: middle; - margin-right: 6px; - } - .dropdown-selected { - display: inline-block; - flex: 1 0 0; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - padding-right: 15px; - } -} -.dropdown .dropdown-toggle.btn-xs { - height: 22px !important; - line-height: 22px !important; - padding: 0 9px !important; -} - -/* - Dropdown Menu - ---------------------------------------------- -*/ -.dropdown-menu { - width: $dropdown-menu-default-width; - min-width: initial; - margin: 0; - padding: 0; - overflow: hidden; - max-height: $dropdown-menu-max-height; - @include gradient-h($c-ocean, $c-pool); - box-shadow: 0 2px 5px 0.6px fade-out($g0-obsidian, 0.8); - - li.dropdown-item { - position: relative; - width: 100%; - - &:hover { - @include gradient-h($c-laser, $c-pool); - } - } - li.dropdown-item > a { - position: relative; - @include no-user-select(); - width: 100%; - border-radius: 0 !important; - display: inline-block; - padding: 7px 9px; - font-size: 13px; - line-height: 15px; - font-weight: 500; - color: $c-yeti !important; - background-color: transparent; - transition: - color 0.25s ease; - - &:hover { - cursor: pointer; - background-color: transparent; - color: $g20-white !important; - } - &:active, - &:active:focus { - @include gradient-h($c-sapphire, $c-pool); - } - &:focus { - @include gradient-h($c-ocean, $c-pool); - } - } -} -.dropdown.dropdown-kapacitor .dropdown-toggle { - color: $c-rainforest !important; - &:hover {color: $c-honeydew !important;} -} -.dropdown.dropdown-kapacitor .dropdown-menu, -.rule-builder .dropdown .dropdown-menu { - @include custom-scrollbar($c-rainforest, $c-honeydew); - @include gradient-h($c-pool, $c-rainforest); - - li.dropdown-item:hover { - @include gradient-h($c-laser, $c-rainforest); - } - li.dropdown-item > a { - color: $c-mint !important; - &:hover { - color: $g20-white !important; - } - } -} -.dropdown.dropdown-chronograf .dropdown-menu { - @include custom-scrollbar($c-comet, $c-potassium); - @include gradient-h($c-ocean, $c-comet); - - li.dropdown-item:hover { - @include gradient-h($c-laser, $c-comet); - } - li.dropdown-item > a { - color: $c-twilight !important; - &:hover { - color: $g20-white !important; - } - } -} - -/* - Dropdown Header - ---------------------------------------------- -*/ -.dropdown-header { - height: 32px; - line-height: 30px; - padding: 0 9px; - white-space: nowrap; - font-size: 14px !important; - font-weight: 900; - color: $c-neutrino !important; - text-transform: none !important; - border-bottom: 2px solid $c-pool; - background-color: $c-ocean; - - &:hover { - background-image: none !important; - background-color: $c-ocean !important; - cursor: default; - } -} - -/* - Dropdown Actions - ---------------------------------------------- -*/ -.dropdown-item__actions { - z-index: 2; - position: absolute; - top: 0; - right: 3px; - height: 100%; - width: auto; - display: flex; - align-items: center; - justify-content: flex-end; -} -.dropdown-item__action { - padding: 0; - margin: 0; - width: 24px; - height: 24px; - border-radius: 2px; - background-color: transparent; - border: none !important; - font-size: 13px; - transition: - text-shadow 0.25s ease, - color 0.25s ease; - color: $c-sapphire; - - &[data-target="#deleteExplorerModal"] .icon { - position: relative; - right: -1px; - } - - &:hover { - color: $g20-white; - text-shadow: - 0 0 2px $c-hydrogen, - 0 0 3px $c-laser, - 0 0 6px $c-ocean; - background-color: transparent; - } -} - From b6f658346125725f719bc642aa17975aa4bffbab Mon Sep 17 00:00:00 2001 From: Alex P Date: Mon, 22 May 2017 23:05:33 -0700 Subject: [PATCH 06/75] Use newest styles / patterns for dropdowns --- .../dashboards/components/DashboardHeader.js | 4 +- ui/src/dashboards/containers/DashboardPage.js | 5 +- ui/src/hosts/containers/HostPage.js | 17 +++--- .../shared/components/AutoRefreshDropdown.js | 2 +- .../components/CustomTimeRangeDropdown.js | 6 +-- ui/src/shared/components/Dropdown.js | 53 ++++++++++--------- ui/src/shared/components/TimeRangeDropdown.js | 2 +- .../style/components/custom-time-range.scss | 16 ++---- 8 files changed, 47 insertions(+), 58 deletions(-) diff --git a/ui/src/dashboards/components/DashboardHeader.js b/ui/src/dashboards/components/DashboardHeader.js index 4f4576247..804cf4ceb 100644 --- a/ui/src/dashboards/components/DashboardHeader.js +++ b/ui/src/dashboards/components/DashboardHeader.js @@ -32,10 +32,10 @@ const DashboardHeader = ({ type="button" data-toggle="dropdown" > - {buttonText} + {buttonText} -
      +
        {children}
    } diff --git a/ui/src/dashboards/containers/DashboardPage.js b/ui/src/dashboards/containers/DashboardPage.js index 4535fcbbf..b0b1fdf35 100644 --- a/ui/src/dashboards/containers/DashboardPage.js +++ b/ui/src/dashboards/containers/DashboardPage.js @@ -293,10 +293,7 @@ class DashboardPage extends Component { {dashboards ? dashboards.map((d, i) => (
  • - + {d.name}
    • diff --git a/ui/src/hosts/containers/HostPage.js b/ui/src/hosts/containers/HostPage.js index 459eccaf4..42d4be250 100644 --- a/ui/src/hosts/containers/HostPage.js +++ b/ui/src/hosts/containers/HostPage.js @@ -190,21 +190,20 @@ export const HostPage = React.createClass({ > {Object.keys(hosts).map((host, i) => { return ( -
  • - +
  • + {host}
    • ) })} - +
    {layouts.length > 0 ? this.renderLayouts(layouts) : ''}
    diff --git a/ui/src/shared/components/AutoRefreshDropdown.js b/ui/src/shared/components/AutoRefreshDropdown.js index 94244add7..a982c430c 100644 --- a/ui/src/shared/components/AutoRefreshDropdown.js +++ b/ui/src/shared/components/AutoRefreshDropdown.js @@ -46,7 +46,7 @@ const AutoRefreshDropdown = React.createClass({ return (
    self.toggleMenu()} >
    diff --git a/ui/src/shared/components/Dropdown.js b/ui/src/shared/components/Dropdown.js index 52867449e..3ef705a1b 100644 --- a/ui/src/shared/components/Dropdown.js +++ b/ui/src/shared/components/Dropdown.js @@ -3,7 +3,10 @@ import {Link} from 'react-router' import classnames from 'classnames' import OnClickOutside from 'shared/components/OnClickOutside' import FancyScrollbar from 'shared/components/FancyScrollbar' -import {DROPDOWN_MENU_MAX_HEIGHT, DROPDOWN_MENU_ITEM_THRESHOLD} from 'shared/constants/index' +import { + DROPDOWN_MENU_MAX_HEIGHT, + DROPDOWN_MENU_ITEM_THRESHOLD, +} from 'shared/constants/index' class Dropdown extends Component { constructor(props) { @@ -22,7 +25,7 @@ class Dropdown extends Component { static defaultProps = { actions: [], buttonSize: 'btn-sm', - buttonColor: 'btn-info', + buttonColor: 'btn-default', menuWidth: '100%', } @@ -55,13 +58,14 @@ class Dropdown extends Component { } renderShortMenu() { - const {actions, addNew, items, menuWidth, menuLabel} = this.props + const {actions, addNew, items, menuWidth, menuLabel, menuClass} = this.props + return ( -
      - {menuLabel - ?
    • {menuLabel}
      • - : null - } +
        + {menuLabel ?
      • {menuLabel}
        • : null} {items.map((item, i) => { if (item.text === 'SEPARATOR') { return
      • @@ -72,14 +76,13 @@ class Dropdown extends Component { {item.text} {actions.length > 0 - ?
        + ?
        {actions.map(action => { return (
        - {(isOpen && items.length < DROPDOWN_MENU_ITEM_THRESHOLD) + {isOpen && items.length < DROPDOWN_MENU_ITEM_THRESHOLD ? this.renderShortMenu() : null} - {(isOpen && items.length >= DROPDOWN_MENU_ITEM_THRESHOLD) + {isOpen && items.length >= DROPDOWN_MENU_ITEM_THRESHOLD ? this.renderLongMenu() : null}
        @@ -218,6 +220,7 @@ Dropdown.propTypes = { buttonColor: string, menuWidth: string, menuLabel: string, + menuClass: string, } export default OnClickOutside(Dropdown) diff --git a/ui/src/shared/components/TimeRangeDropdown.js b/ui/src/shared/components/TimeRangeDropdown.js index c6cf9a2de..b4268b314 100644 --- a/ui/src/shared/components/TimeRangeDropdown.js +++ b/ui/src/shared/components/TimeRangeDropdown.js @@ -58,7 +58,7 @@ const TimeRangeDropdown = React.createClass({ return (
        self.toggleMenu()} > diff --git a/ui/src/style/components/custom-time-range.scss b/ui/src/style/components/custom-time-range.scss index 4a761ef8f..c74bff6e5 100644 --- a/ui/src/style/components/custom-time-range.scss +++ b/ui/src/style/components/custom-time-range.scss @@ -6,16 +6,6 @@ .custom-time-range { position: relative; } -.btn.btn-sm.btn-info.custom-time-range--btn { - padding: 0 30px 0 9px !important; - - .caret { - position: absolute; - right: 9px; - top: calc(50% + 1px); - transform: translateY(-50%); - } -} .custom-time--container { display: none; position: absolute; @@ -242,8 +232,8 @@ $rd-cell-size: 30px; } -/* Show State */ -.custom-time-range.show { +/* Open State */ +.custom-time-range.open { .custom-time--container { display: flex; } @@ -251,4 +241,4 @@ $rd-cell-size: 30px; color: $g20-white !important; background-color: $g6-smoke; } -} \ No newline at end of file +} From 67dbeb828c9a60635b522755e76509c679c3f6f3 Mon Sep 17 00:00:00 2001 From: Alex P Date: Mon, 22 May 2017 23:06:04 -0700 Subject: [PATCH 07/75] Use latest styles for page headers --- ui/src/dashboards/components/DashboardHeader.js | 8 ++++---- ui/src/kapacitor/components/KapacitorForm.js | 2 +- ui/src/kapacitor/components/RuleHeader.js | 2 +- ui/src/style/layout/page-header.scss | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/ui/src/dashboards/components/DashboardHeader.js b/ui/src/dashboards/components/DashboardHeader.js index 804cf4ceb..5eb56c064 100644 --- a/ui/src/dashboards/components/DashboardHeader.js +++ b/ui/src/dashboards/components/DashboardHeader.js @@ -20,7 +20,7 @@ const DashboardHeader = ({ onAddCell, onEditDashboard, }) => - (isHidden + isHidden ? null :
        @@ -52,7 +52,7 @@ const DashboardHeader = ({ : null} {dashboard ?
        -
        ) +
        const {array, bool, func, number, shape, string} = PropTypes diff --git a/ui/src/kapacitor/components/KapacitorForm.js b/ui/src/kapacitor/components/KapacitorForm.js index 4a6a66dfe..223c3b5ef 100644 --- a/ui/src/kapacitor/components/KapacitorForm.js +++ b/ui/src/kapacitor/components/KapacitorForm.js @@ -83,7 +83,7 @@ class KapacitorForm extends Component {
        diff --git a/ui/src/data_explorer/components/TagListItem.js b/ui/src/data_explorer/components/TagListItem.js index f1d54c1d3..c9e75d1ea 100644 --- a/ui/src/data_explorer/components/TagListItem.js +++ b/ui/src/data_explorer/components/TagListItem.js @@ -65,6 +65,8 @@ const TagListItem = React.createClass({ value={this.state.filterText} onChange={this.handleFilterText} onKeyUp={this.handleEscape} + spellCheck={false} + autoComplete={false} />
    diff --git a/ui/src/kapacitor/components/DataSection.js b/ui/src/kapacitor/components/DataSection.js index 3684a6cfc..fb562fd86 100644 --- a/ui/src/kapacitor/components/DataSection.js +++ b/ui/src/kapacitor/components/DataSection.js @@ -80,13 +80,13 @@ export const DataSection = React.createClass({ const statement = query.rawText || buildInfluxQLQuery({lower}, query) return ( -
    -

    Select a Time Series

    -
    - 
    +      
    
+        
    Select a Time Series
    
+        
    
+          
                 
               {statement || 'Build a query below'}
diff --git a/ui/src/kapacitor/components/RuleGraph.js b/ui/src/kapacitor/components/RuleGraph.js
index 52dfaa074..27fed95fe 100644
--- a/ui/src/kapacitor/components/RuleGraph.js
+++ b/ui/src/kapacitor/components/RuleGraph.js
@@ -33,7 +33,7 @@ export const RuleGraph = React.createClass({
 
     if (!queryText) {
       return (
-        
    
+        
    
           
    Select a Time-Series to preview on a graph
    
         
    
       )
diff --git a/ui/src/kapacitor/components/RuleMessage.js b/ui/src/kapacitor/components/RuleMessage.js
index fd596a2c7..6d55d0469 100644
--- a/ui/src/kapacitor/components/RuleMessage.js
+++ b/ui/src/kapacitor/components/RuleMessage.js
@@ -53,18 +53,17 @@ export const RuleMessage = React.createClass({
     const selectedAlert = rule.alerts[0] || alerts[0].text
 
     return (
-      
    
-        
    Alert Message
    
-        
    
-          
    
+      
    
+        
    Alert Message
    
+        
    
+          
    
             
    Send this Alert to:
    
             
      
               {alerts.map(alert => (
                 
    •  this.handleChooseAlert(alert)}
                 >
@@ -79,25 +78,27 @@ export const RuleMessage = React.createClass({
             rule={rule}
           />
           {selectedAlert === 'smtp'
-            ? 
      
+            ?