/*************************************************************************************************/ /* BRAND COLORS */ /* DO NOT USE DIRECTLY! Use $brandColor instead. See brand.*.pcss for definitions. */ /*************************************************************************************************/ /* Green Splunk Enterprise */ /* Orange Splunk Lite */ /* Brand colors */ /*===============================================================================================*/ /* SPLUNK: VARIABLES */ /* Variables to customize the look and feel of Bootstrap (splunk version). */ /* See /en-US/static/docs/style/style-guide.html for style guide */ /*===============================================================================================*/ /*===============================================================================================*/ /* WARNING */ /* This file has an implicit dependency on the brand variables injected by the */ /* 'splunk-postcss-theme-import' postcss plugin. */ /*===============================================================================================*/ /*===============================================================================================*/ /* SPLUNK: COLORS */ /*===============================================================================================*/ /*************************************************************************************************/ /* NEUTRAL COLORS */ /* */ /* PRE IVORY -> CURRENT VARIABLE */ /* $black -> $black */ /* $grayDarker -> $gray20 */ /* $grayDark -> $gray30 */ /* $gray -> $gray45 */ /* $grayLight -> $gray60 */ /* $grayLightMedium -> $gray80 */ /* $grayLighter -> $gray92 */ /* $gray96 */ /* $offWhite -> $gray98 */ /* $white -> $white */ /*************************************************************************************************/ /*************************************************************************************************/ /* SEMANTIC COLORS */ /* */ /* PRE IVORY -> CURRENT VARIABLE */ /* $red -> $errorColor */ /* $orange -> $alertColor */ /* $yellow -> $warningColor */ /* $yellowLight -> $warningColorL20 */ /* $yellowLighter -> $warningColorL40 */ /* $green -> $successColor */ /* $blue -> $infoColor */ /* $blueDark -> $infoColorD40 */ /* $pink -> No Equivalent or $errorColorL30 */ /* $purple -> No Equivalent */ /* $teal -> No Equivalent */ /* $focusColor -> $accentColorL10 */ /*************************************************************************************************/ /* Blue Accent */ /* Red Error */ /* Orange Alert */ /* Yellow Warning */ /* Green Success */ /* Blue Info */ /*************************************************************************************************/ /* CATEGORICAL COLORS */ /*************************************************************************************************/ /*************************************************************************************************/ /* DIVERGING COLORS */ /*************************************************************************************************/ /*************************************************************************************************/ /* STATIC PATHS */ /*************************************************************************************************/ /*************************************************************************************************/ /* TYPOGRAPHY */ /*************************************************************************************************/ /* Lite listing pages */ /* empty to use BS default, $fontFamily */ /* instead of browser default, bold */ /*************************************************************************************************/ /* SCAFFOLDING */ /*************************************************************************************************/ /* Border Colors */ /* aliases: $tableBorderColor $tableBorderColorVertical */ /* also see: $interactiveBorderColor */ /* Borders */ /* Border Radius */ /* For containers without a wrapper */ /* For for containers with a wrapper, like popdown */ /* Padding & Margin */ /* 200% - 40px */ /* 150% - 30px */ /* 75% - 15px */ /* 50% - 10px */ /* 25% - 5px */ /* Popdown Arrows */ /* Large Icons */ /*************************************************************************************************/ /* TRANSITIONS */ /*************************************************************************************************/ /*************************************************************************************************/ /* HORIZONTAL FORMS & LISTS */ /*************************************************************************************************/ /*************************************************************************************************/ /* Z-INDEX */ /*************************************************************************************************/ /* If a variable does not suit your purpose, set a value relatively such as, $zindexModal +1 */ /* Splunk Lite */ /* Splunk Lite */ /* Sidebar Component */ /* Sidebar Component */ /* timerange popdown needs to be above modal + backdrop */ /* top interactive element */ /* top interactive element */ /* top uninteractive */ /* top uninteractive */ /*************************************************************************************************/ /* TABLES */ /*************************************************************************************************/ /* overall background-color */ /*************************************************************************************************/ /* FORMS */ /*************************************************************************************************/ /* base input height + 10px vertical padding + 2px top/bottom border */ /* This is generally overridden. */ /*************************************************************************************************/ /* MODAL */ /*************************************************************************************************/ /*************************************************************************************************/ /* POPUP */ /*************************************************************************************************/ /*************************************************************************************************/ /* TABS */ /*************************************************************************************************/ /*************************************************************************************************/ /* MENU */ /*************************************************************************************************/ /*************************************************************************************************/ /* BASE INTERACTIVE */ /*************************************************************************************************/ /* text */ /* background */ /* borders */ /* shadow */ /*************************************************************************************************/ /* BASE INTERACTIVE ERROR */ /*************************************************************************************************/ /* text */ /* background */ /*************************************************************************************************/ /* BUTTONS */ /*************************************************************************************************/ /* 1 rem */ /*************************************************************************************************/ /* PRIMARY BUTTONS */ /*************************************************************************************************/ /* text */ /* background */ /* borders */ /* shadow */ /*************************************************************************************************/ /* PILL BUTTONS */ /*************************************************************************************************/ /* text */ /* background */ /*************************************************************************************************/ /* COMPONENT VARIABLES */ /*************************************************************************************************/ /*************************************************************************************************/ /* NAVBAR */ /*************************************************************************************************/ /*************************************************************************************************/ /* APP BAR */ /*************************************************************************************************/ /*************************************************************************************************/ /* ACCORDION */ /*************************************************************************************************/ /*************************************************************************************************/ /* CONCERTINA */ /* Concertina has the same color as Accordion, maybe we should just reuse them? */ /*************************************************************************************************/ /*************************************************************************************************/ /* TOOLTIPS & POPOVERS */ /*************************************************************************************************/ /*************************************************************************************************/ /* SELECTORS FOR CUSTOMIZING SPECIFIC LOCALES */ /*************************************************************************************************/ /*************************************************************************************************/ /* DASHBOARDS */ /*************************************************************************************************/ /*************************************************************************************************/ /* VIZ & VIZ PICKERS */ /*************************************************************************************************/ /*************************************************************************************************/ /* MAPS */ /*************************************************************************************************/ /* leaflet popup defaults */ /*************************************************************************************************/ /* Search IDE */ /*************************************************************************************************/ /*************************************************************************************************/ /* Date Picker */ /*************************************************************************************************/ /*************************************************************************************************/ /* Time Range Picker */ /*************************************************************************************************/ /*************************************************************************************************/ /* Events Viewer */ /*************************************************************************************************/ /*************************************************************************************************/ /* Misc */ /*************************************************************************************************/ /*************************************************************************************************/ /* TYPOGRAPHY */ /*************************************************************************************************/ /* Lite listing pages */ /*************************************************************************************************/ /* SCAFFOLDING */ /*************************************************************************************************/ /* Borders */ /*************************************************************************************************/ /* MODAL */ /*************************************************************************************************/ /*************************************************************************************************/ /* POPUP */ /*************************************************************************************************/ /*************************************************************************************************/ /* TABS */ /*************************************************************************************************/ /*************************************************************************************************/ /* MENU */ /*************************************************************************************************/ /*************************************************************************************************/ /* BASE INTERACTIVE */ /*************************************************************************************************/ /* text */ /* background */ /* borders */ /* shadow */ /*************************************************************************************************/ /* BUTTONS */ /*************************************************************************************************/ /*************************************************************************************************/ /* TABLES */ /*************************************************************************************************/ /* overall background-color */ /* fixme */ /*************************************************************************************************/ /* FORMS */ /*************************************************************************************************/ /*************************************************************************************************/ /* COMPONENT VARIABLES */ /*************************************************************************************************/ /*************************************************************************************************/ /* PILL BUTTONS */ /*************************************************************************************************/ /* text */ /* background */ /*************************************************************************************************/ /* ACCORDION */ /*************************************************************************************************/ /*************************************************************************************************/ /* CONCERTINA */ /* Note the selected state color of conertina is different from accordion */ /*************************************************************************************************/ /*************************************************************************************************/ /* NAVBAR */ /*************************************************************************************************/ /*************************************************************************************************/ /* TOOLTIPS & POPOVERS */ /*************************************************************************************************/ /*************************************************************************************************/ /* DASHBOARDS */ /*************************************************************************************************/ /*************************************************************************************************/ /* VIZ & VIZ PICKERS */ /*************************************************************************************************/ /*************************************************************************************************/ /* MAPS */ /*************************************************************************************************/ /*************************************************************************************************/ /* Search IDE */ /*************************************************************************************************/ /*************************************************************************************************/ /* Date Picker */ /*************************************************************************************************/ /*************************************************************************************************/ /* Time Range Picker */ /*************************************************************************************************/ /*************************************************************************************************/ /* Events Viewer */ /*************************************************************************************************/ /*************************************************************************************************/ /* Misc */ /*************************************************************************************************/ /*===============================================================================================*/ /* SPLUNK: MIXINS */ /* Snippets of reusable CSS to develop faster and keep code readable */ /*===============================================================================================*/ /* Reset */ /* ------------------ */ /* Link */ /* ------------------ */ /*************************************************************************************************/ /* FOCUS STATES */ /*************************************************************************************************/ /* Use when are outer focus glow will be block (i.e Menu Items). Provide background color.*/ /* Block elements change the background color */ /* Block elements change the background color and spread via box-shadow */ /*************************************************************************************************/ /* INTERACTIVE */ /* These are by any element that can be clicked, such as buttons, menus and table headings. */ /*************************************************************************************************/ /*----------------------------------------------*/ /* Interactive style: */ /* @params: */ /* Background Color */ /* Border Color */ /* Box Shadow */ /* Text Color */ /* Transition */ /*----------------------------------------------*/ /*----------------------------------------------*/ /* Primary interactive style: */ /* @params: */ /* Background Color */ /* Box Shadow */ /* Text Color */ /* Transition */ /*----------------------------------------------*/ /*************************************************************************************************/ /* INTERACTIVE ERROR */ /* These are by any interactive element that is is in an error state. */ /*************************************************************************************************/ /*************************************************************************************************/ /* BUTTONS */ /*************************************************************************************************/ /*----------------------------------------------*/ /* Pills, Links */ /*----------------------------------------------*/ /*----------------------------------------------*/ /* Define states of buttons: */ /* :hover, :active, disabled and :focus */ /* @params: */ /* Hover Mixin */ /* Active Mixin */ /* Disabled Mixin */ /* Focus Mixin */ /*----------------------------------------------*/ /*----------------------------------------------*/ /* Button Padding: */ /* @params: */ /* Vertical Padding */ /* Horizontal Padding */ /*----------------------------------------------*/ /*----------------------------------------------*/ /* Primary Button Padding: */ /* @params: */ /* Vertical Padding */ /* Horizontal Padding */ /*----------------------------------------------*/ /*----------------------------------------------*/ /* Button Padding For Other Button Sizes: */ /* @params: */ /* Vertical Padding */ /* Horizontal Padding */ /* Button Icon Margin Top */ /*----------------------------------------------*/ /* Draggable Handle */ /*************************************************************************************************/ /* FONTS */ /*************************************************************************************************/ /*----------------------------------------------*/ /* Define Font Family: */ /* @params: */ /* Font Name */ /* Name of Font File */ /* Font Format */ /* Font Weight */ /* Font Style */ /*----------------------------------------------*/ /*----------------------------------------------*/ /* Create a heading */ /* @params: */ /* Font Size */ /* Margin */ /* Font Color */ /* Text Transform */ /*----------------------------------------------*/ /*************************************************************************************************/ /* UTILITY MIXINS */ /*************************************************************************************************/ /*----------------------------------------------*/ /* Clearfix: */ /* For clearing floats like a boss h5bp.com/q */ /*----------------------------------------------*/ /* Placeholder text */ /* Basic input styles */ /* Sets Modal width and margin */ /* Define card style. Add white background and shadow. */ /* Workaround for table shadows in IE. Don't use this mixin, use create-card-table */ /* Define card style on tables. Adds workaround for IE */ /* Cover browser specific radio button with styled radio button. */ /* Can only be used if label comes immediately after input[type=radio] */ /* Use to cover button in .radio class */ /*-------------------------------------------------------------------------*/ /* CSS image replacement */ /* For clearing floats like a boss h5bp.com/q */ /* Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 */ /*-------------------------------------------------------------------------*/ /*************************************************************************************************/ /* ICONS */ /*************************************************************************************************/ /*************************************************************************************************/ /* FORMS */ /*************************************************************************************************/ /* Block level inputs */ /*************************************************************************************************/ /* COMPONENT MIXINS */ /*************************************************************************************************/ /*----------------------------------------------*/ /* Horizontal Dividers: */ /* Dividers (basically an hr) within dropdowns */ /* and nav lists. */ /* @params: */ /* Border Color */ /*----------------------------------------------*/ /*----------------------------------------------*/ /* Navbar Vertical Align: */ /* Vertically center elements in the navbar. */ /* Example: an element has a height of 30px, */ /* so write out `.navbarVerticalAlign(30px);` */ /* to calculate the appropriate top margin. */ /* @params: */ /* Element Height */ /*----------------------------------------------*/ /*************************************************************************************************/ /* PRINTING */ /*************************************************************************************************/ /*************************************************************************************************/ /* POPDOWN */ /*************************************************************************************************/ /*----------------------------------------------*/ /* Arrow: */ /* Create an arrow. */ /* @params: */ /* Arrow Direction (up, down, left, right) */ /* Arrow Color */ /* Arrow Size */ /*----------------------------------------------*/ /* popdown body */ /*************************************************************************************************/ /* FULL PAGE LAYOUT */ /*************************************************************************************************/ /* Splunk bootstrap */ /* import and override bootstrap defaults */ /* CSS Reset */ /*===============================================================================================*/ /* SPLUNK: RESET CSS */ /* Adapted from http://github.com/necolas/normalize.css */ /*===============================================================================================*/ /* Display in IE6-9 and FF3 */ /* ------------------------- */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } /* Display block in IE6-9 and FF3 */ /* ------------------------- */ audio, canvas, video { display: inline-block; } /* Prevents modern browsers from displaying 'audio' without controls */ /* ------------------------- */ audio:not([controls]) { display: none; } /* Base settings */ /* ------------------------- */ html { font-size: 100%; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; } /* Focus states */ a:focus { -webkit-box-shadow: 0 0 1px 2px #00A4FD; box-shadow: 0 0 1px 2px #00A4FD; border-collapse: separate; /* Fix IE9 Issue with box-shadow */ outline: 0; text-decoration: none; } a:focus:active:not([disabled]) { -webkit-box-shadow: none; box-shadow: none; } /* Hover & Active */ a:hover, a:active { outline: 0; } /* Prevents sub and sup affecting line-height in all browsers */ /* ------------------------- */ sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* Img border in a's and image quality */ /* ------------------------- */ img { /* Responsive images (ensure images don't scale beyond their parents) */ max-width: 100%; /* Part 1: Set a maxium relative to the parent */ height: auto; /* Part 2: Scale the height according to the width, otherwise you get stretching */ vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; } /* Prevent max-width from affecting Google Maps */ #map_canvas img, .google-maps img { max-width: none; } /* Forms */ /* ------------------------- */ /* Font size in all browsers, margin changes, misc consistency */ button, input, select, textarea { margin: 0; font-size: 100%; vertical-align: middle; } button, input { line-height: normal; /* FF3/4 have !important on line-height in UA stylesheet */ } button::-moz-focus-inner, input::-moz-focus-inner { /* Inner padding and border oddities in FF3/4 */ padding: 0; border: 0; } button, html input[type="button"], /* Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls. */ input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* Corrects inability to style clickable `input` types in iOS. */ cursor: pointer; /* Improves usability and consistency of cursor style between image-type `input` and others. */ } label, select, button, input[type="button"], input[type="reset"], input[type="submit"], input[type="radio"], input[type="checkbox"] { cursor: pointer; /* Improves usability and consistency of cursor style between image-type `input` and others. */ } input[type="search"] { /* Appearance in Safari/Chrome */ -webkit-box-sizing: content-box; box-sizing: content-box; -webkit-appearance: textfield; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; /* Inner-padding issues in Chrome OSX, Safari 5 */ } textarea { overflow: auto; /* Remove vertical scrollbar in IE6-9 */ vertical-align: top; /* Readability and alignment cross-browser */ } /* Printing */ /* ------------------------- */ /* Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css */ @media print { * { text-shadow: none !important; color: #000 !important; /* Black prints faster: h5bp.com/s */ background: transparent !important; -webkit-box-shadow: none !important; box-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } /* Don't show links for images, or javascript/internal links */ .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; /* h5bp.com/t */ } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } /* Grid system and page structure */ /*===============================================================================================*/ /* SPLUNK: SCAFFOLDING */ /*===============================================================================================*/ /*************************************************************************************************/ /* DEFAULT & STRUCTURE */ /*************************************************************************************************/ body { margin: 0; background: #31373E; color: #FFFFFF; min-width: 960px; font-family: "Splunk Platform Sans", "Proxima Nova", Roboto, Droid, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; -webkit-transition: margin 0.2s; transition: margin 0.2s; } body.open { margin-left: 300px; margin-right: -300px; } .shared-page { height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } /*************************************************************************************************/ /* LINKS */ /*************************************************************************************************/ a { color: #00A4FD; text-decoration: none; cursor: pointer; } a:hover { color: #006EAA; text-decoration: underline; } a:focus { -webkit-box-shadow: 0 0 1px 2px #00A4FD; box-shadow: 0 0 1px 2px #00A4FD; border-collapse: separate; /* Fix IE9 Issue with box-shadow */ outline: 0; text-decoration: none; } a:focus:active:not([disabled]) { -webkit-box-shadow: none; box-shadow: none; } a:focus { text-decoration: none; } a:active { -webkit-box-shadow: none; box-shadow: none; } a.disabled { color: #5C6773; } a.external:after { font-family: "Splunk Icons"; content: "\EC13"; display: inline-block; padding-left: 0.5em; } /*************************************************************************************************/ /* IMAGES */ /*************************************************************************************************/ /* Rounded corners */ .img-rounded { border-radius: 3px; } /* Add polaroid-esque trim */ .img-polaroid { padding: 4px; background-color: #FFFFFF; border: 1px solid #171D21; border: 1px solid rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.1); box-shadow: 0 1px 3px rgba(0,0,0,.1); } /* Perfect circle */ .img-circle { border-radius: 500px; /* crank the border-radius so it works with most reasonably sized images */ } /*************************************************************************************************/ /* SECTIONS */ /*************************************************************************************************/ /* add padding to a section
padded content
*/ .section-padded { padding: 20px; } /* section-header extends section-padded */ .section-header { position: relative; } .section-header .section-title { margin-top: 0; font-size: 24px; font-weight: 500; line-height: 24px; } .section-header.page-heading { padding: 20px 20px 10px 20px; } /* default container */ .main-section-body { color: #FFFFFF; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .main-section-body > :first-child { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } /* using three color so we can set color stop even though its only 2 colors */ .main-section-body h2 i[class^="icon-"], .main-section-body h2 i[class*=" icon-"] { color: #6b7785; } .main-section-body .divider { border-top: 1px solid #171D21; margin: 0; } /* huh? */ .main-section-body > .pull-right { margin-right: 20px; } .main-section-body .loading-message { padding-top: 100px; min-height: 400px; text-align: center; } .main-section-body .main-section { padding: 0 20px; } .main-section-body .card { background-color: transparent; -webkit-box-shadow: 0; box-shadow: 0; } /*************************************************************************************************/ /* UTILITY CLASSES */ /*************************************************************************************************/ /* for full width unpadded content TODO: this should probably also remove width and margin: auto
content here ...
*/ .container-full-width { padding: 0; } /* force full width even in padded container
padded content here ...
expanded content here ...
*/ .push-margins { margin-left: -20px; margin-right: -20px; } /* new image replacement hidden */ .hide-text { text-indent: 100%; white-space: nowrap; overflow: hidden; } /*************************************************************************************************/ /* PANELS */ /*************************************************************************************************/ /* panels for dashboards?
panel content ...
panel content ...
panel content ...
*/ .panel { position: relative; border: 1px solid #171D21; background-color: #FFFFFF; padding: 20px; margin-right: 20px; border-radius: 2px; } .panel:last-child { margin-right: 0; } /* panel rows?
panel content ...
panel content ...
panel content ...
panel content ...
*/ .panel-row { padding: 0 20px; margin-bottom: 20px; } /*************************************************************************************************/ /* SIMPLE LAYOUT COLUMNS */ /*************************************************************************************************/ .section-content { background-color: #FFFFFF; min-height: 400px; border-top: 1px solid #171D21; } .column { position: relative; padding: 20px; margin-right: 20px; } /*************************************************************************************************/ /* 508 ACCESSIBILITY */ /*************************************************************************************************/ .navSkip { position: absolute; margin: 1px 0px 0px 10px; top: 0; left: -1000px; width: 150px; height: 32px; text-align: center; line-height: 32px; background-color: #171D21; color: #C3CBD4; z-index: 1040; } .navSkip:focus { left: 0px; } /*************************************************************************************************/ /* PAYWALL */ /*************************************************************************************************/ .shared-paywall { padding-top: 30px; } /*************************************************************************************************/ /* DEFINITION LISTS */ /*************************************************************************************************/ .list-dotted { line-height: 20px; margin-top: 0; } .list-dotted dt { float: left; width: 120px; overflow: hidden; white-space: nowrap; margin-right: 5px; font-weight: normal; line-height: 20px; /* SPL-69719 - fix IE10 when in dropdown */ word-wrap: normal; } .list-dotted dt:after { content: " ............................................"; } .list-dotted dd { line-height: 20px; margin-left: 125px; } /*************************************************************************************************/ /* PAGE LOAD PLACEHOLDER */ /*************************************************************************************************/ #placeholder-splunk-bar { padding: 0 ; background-color: #171D21; text-rendering: geometricPrecision; } #placeholder-splunk-bar .brand, #placeholder-splunk-bar .brand:hover { font-family: "Splunk Icons"; font-weight: normal; color: #FFFFFF; padding: 0 20px; height: 34px; font-size: 18px; line-height: 34px; text-shadow: none; text-decoration: none; text-rendering: geometricPrecision; margin-left: 0; } #placeholder-splunk-bar .brand strong { color: #818D99; font-weight: normal; } /* reg symbol */ #placeholder-splunk-bar .brand strong:after { content: '\AE'; color: #818D99; font-weight: normal; } #placeholder-app-bar { color: #FFFFFF; background-color: #3C444D; height: 44px; } #placeholder-main-section-body { color: #FFFFFF; padding-top: 100px; min-height: 400px; text-align: center; } /*************************************************************************************************/ /* LITE UI */ /*************************************************************************************************/ /*************************************************************************************************/ /* PRINT */ /*************************************************************************************************/ @media print { body, .main-section-body { background: none !important; } @page { margin: 1.27cm; } .navSkip { display: none !important; } } /*===============================================================================================*/ /* SPLUNK: MIXINS GRID SYSTEM */ /*===============================================================================================*/ /* Default 940px grid */ /* 1200px min */ /* 768px-979px */ /*************************************************************************************************/ /* FLUID GRID */ /*************************************************************************************************/ /* 1200px min */ /* 768px-979px */ /* Responsive Variables */ /* Centered container element */ /* Table columns */ /* Make a Grid */ /* Use .makeRow and .makeColumn to assign semantic layouts grid system behavior */ /* The Grid */ /*===============================================================================================*/ /* SPLUNK: GRID SYSTEM */ /*===============================================================================================*/ /* Fixed (940px) */ .span1 { width: 60px; float: left; min-height: 1px; /* prevent collapsing columns */ margin-left: 20px; } .span2 { width: 140px; float: left; min-height: 1px; /* prevent collapsing columns */ margin-left: 20px; } .span3 { width: 220px; float: left; min-height: 1px; /* prevent collapsing columns */ margin-left: 20px; } .span4 { width: 300px; float: left; min-height: 1px; /* prevent collapsing columns */ margin-left: 20px; } .span5 { width: 380px; float: left; min-height: 1px; /* prevent collapsing columns */ margin-left: 20px; } .span6 { width: 460px; float: left; min-height: 1px; /* prevent collapsing columns */ margin-left: 20px; } .span7 { width: 540px; float: left; min-height: 1px; /* prevent collapsing columns */ margin-left: 20px; } .span8 { width: 620px; float: left; min-height: 1px; /* prevent collapsing columns */ margin-left: 20px; } .span9 { width: 700px; float: left; min-height: 1px; /* prevent collapsing columns */ margin-left: 20px; } .span10 { width: 780px; float: left; min-height: 1px; /* prevent collapsing columns */ margin-left: 20px; } .span11 { width: 860px; float: left; min-height: 1px; /* prevent collapsing columns */ margin-left: 20px; } .span12 { width: 940px; float: left; min-height: 1px; /* prevent collapsing columns */ margin-left: 20px; } .offset1 { margin-left: 100px; } .offset2 { margin-left: 180px; } .offset3 { margin-left: 260px; } .offset4 { margin-left: 340px; } .offset5 { margin-left: 420px; } .offset6 { margin-left: 500px; } .offset7 { margin-left: 580px; } .offset8 { margin-left: 660px; } .offset9 { margin-left: 740px; } .offset10 { margin-left: 820px; } .offset11 { margin-left: 900px; } .offset12 { margin-left: 980px; } .row { margin-left: -20px; } .row:before, .row:after { display: table; content: ""; line-height: 0; } .row:after { clear: both; } /* Set the container width, and override it for fixed navbars in media queries */ .container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container { width: 940px; } /* Fluid (940px) */ .row-fluid { width: 100%; } .row-fluid:before, .row-fluid:after { display: table; content: ""; line-height: 0; } .row-fluid:after { clear: both; } .row-fluid .span1 { display: block; width: 100%; min-height: 32px; /* Make inputs at least the height of their button counterpart (base line-height + padding + border) */ -webkit-box-sizing: border-box; box-sizing: border-box; /* Makes inputs behave like true block-level elements */ width: 6.38298%; float: left; margin-left: 2.127659574%; } .row-fluid .span1:first-child { margin-left: 0; } .row-fluid .span2 { display: block; width: 100%; min-height: 32px; /* Make inputs at least the height of their button counterpart (base line-height + padding + border) */ -webkit-box-sizing: border-box; box-sizing: border-box; /* Makes inputs behave like true block-level elements */ width: 14.89362%; float: left; margin-left: 2.127659574%; } .row-fluid .span2:first-child { margin-left: 0; } .row-fluid .span3 { display: block; width: 100%; min-height: 32px; /* Make inputs at least the height of their button counterpart (base line-height + padding + border) */ -webkit-box-sizing: border-box; box-sizing: border-box; /* Makes inputs behave like true block-level elements */ width: 23.40426%; float: left; margin-left: 2.127659574%; } .row-fluid .span3:first-child { margin-left: 0; } .row-fluid .span4 { display: block; width: 100%; min-height: 32px; /* Make inputs at least the height of their button counterpart (base line-height + padding + border) */ -webkit-box-sizing: border-box; box-sizing: border-box; /* Makes inputs behave like true block-level elements */ width: 31.91489%; float: left; margin-left: 2.127659574%; } .row-fluid .span4:first-child { margin-left: 0; } .row-fluid .span5 { display: block; width: 100%; min-height: 32px; /* Make inputs at least the height of their button counterpart (base line-height + padding + border) */ -webkit-box-sizing: border-box; box-sizing: border-box; /* Makes inputs behave like true block-level elements */ width: 40.42553%; float: left; margin-left: 2.127659574%; } .row-fluid .span5:first-child { margin-left: 0; } .row-fluid .span6 { display: block; width: 100%; min-height: 32px; /* Make inputs at least the height of their button counterpart (base line-height + padding + border) */ -webkit-box-sizing: border-box; box-sizing: border-box; /* Makes inputs behave like true block-level elements */ width: 48.93617%; float: left; margin-left: 2.127659574%; } .row-fluid .span6:first-child { margin-left: 0; } .row-fluid .span7 { display: block; width: 100%; min-height: 32px; /* Make inputs at least the height of their button counterpart (base line-height + padding + border) */ -webkit-box-sizing: border-box; box-sizing: border-box; /* Makes inputs behave like true block-level elements */ width: 57.44681%; float: left; margin-left: 2.127659574%; } .row-fluid .span7:first-child { margin-left: 0; } .row-fluid .span8 { display: block; width: 100%; min-height: 32px; /* Make inputs at least the height of their button counterpart (base line-height + padding + border) */ -webkit-box-sizing: border-box; box-sizing: border-box; /* Makes inputs behave like true block-level elements */ width: 65.95745%; float: left; margin-left: 2.127659574%; } .row-fluid .span8:first-child { margin-left: 0; } .row-fluid .span9 { display: block; width: 100%; min-height: 32px; /* Make inputs at least the height of their button counterpart (base line-height + padding + border) */ -webkit-box-sizing: border-box; box-sizing: border-box; /* Makes inputs behave like true block-level elements */ width: 74.46809%; float: left; margin-left: 2.127659574%; } .row-fluid .span9:first-child { margin-left: 0; } .row-fluid .span10 { display: block; width: 100%; min-height: 32px; /* Make inputs at least the height of their button counterpart (base line-height + padding + border) */ -webkit-box-sizing: border-box; box-sizing: border-box; /* Makes inputs behave like true block-level elements */ width: 82.97873%; float: left; margin-left: 2.127659574%; } .row-fluid .span10:first-child { margin-left: 0; } .row-fluid .span11 { display: block; width: 100%; min-height: 32px; /* Make inputs at least the height of their button counterpart (base line-height + padding + border) */ -webkit-box-sizing: border-box; box-sizing: border-box; /* Makes inputs behave like true block-level elements */ width: 91.48937%; float: left; margin-left: 2.127659574%; } .row-fluid .span11:first-child { margin-left: 0; } .row-fluid .span12 { display: block; width: 100%; min-height: 32px; /* Make inputs at least the height of their button counterpart (base line-height + padding + border) */ -webkit-box-sizing: border-box; box-sizing: border-box; /* Makes inputs behave like true block-level elements */ width: 100%; float: left; margin-left: 2.127659574%; } .row-fluid .span12:first-child { margin-left: 0; } .row-fluid .offset1 { margin-left: 10.6383%; } .row-fluid .offset2 { margin-left: 19.14894%; } .row-fluid .offset3 { margin-left: 27.65958%; } .row-fluid .offset4 { margin-left: 36.17021%; } .row-fluid .offset5 { margin-left: 44.68085%; } .row-fluid .offset6 { margin-left: 53.19149%; } .row-fluid .offset7 { margin-left: 61.70213%; } .row-fluid .offset8 { margin-left: 70.21277%; } .row-fluid .offset9 { margin-left: 78.72341%; } .row-fluid .offset10 { margin-left: 87.23405%; } .row-fluid .offset11 { margin-left: 95.74469%; } .row-fluid .offset12 { margin-left: 104.25532%; } /* Space grid-sized controls properly if multiple per line */ .row-fluid .controls-row [class*="span"] + [class*="span"] { margin-left: 2.127659574%; } /* Reset utility classes due to specificity */ [class*="span"].hide, .row-fluid [class*="span"].hide { display: none; } [class*="span"].pull-right, .row-fluid [class*="span"].pull-right { float: right; } /*===============================================================================================*/ /* SPLUNK: LAYOUTS */ /*===============================================================================================*/ /* Container (centered, fixed-width layouts) */ .container { margin-right: auto; margin-left: auto; } .container:before, .container:after { display: table; content: ""; line-height: 0; } .container:after { clear: both; } /* Fluid layouts (left aligned, with sidebar, min- & max-width content) */ .container-fluid { padding-right: 20px; padding-left: 20px; } .container-fluid:before, .container-fluid:after { display: table; content: ""; line-height: 0; } .container-fluid:after { clear: both; } /* Base CSS */ /*************************************************************************************************/ /* FONTS */ /*************************************************************************************************/ @font-face { font-family: 'Splunk Platform Sans'; src: url('/static/fonts/proxima-bold-webfont.woff') format('woff'); font-weight: bold; font-style: normal; } /* Bold */ @font-face { font-family: 'Splunk Platform Sans'; src: url('/static/fonts/proxima-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } /* Regular */ @font-face { font-family: 'Splunk Platform Sans'; src: url('/static/fonts/proxima-semibold-webfont.woff') format('woff'); font-weight: 500; font-style: normal; } /* Semi-bold */ @font-face { font-family: 'Splunk Platform Mono'; src: url('/static/fonts/inconsolata-regular.woff') format('woff'); font-weight: normal; font-style: normal; } /* Monospace */ @font-face { font-family: 'Splunk Icons'; src: url('/static/fonts/splunkicons-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } /* Splunk Icons : unicode-range: U+00-FF; */ /*===============================================================================================*/ /* SPLUNK: TYPOGRAPHY */ /* Headings, body text, lists, code, and more for a versatile and durable typography system. */ /*===============================================================================================*/ /*************************************************************************************************/ /* BODY TEXT */ /*************************************************************************************************/ p { margin: 0 0 10px; } .lead { margin-bottom: 20px; font-size: 21px; font-weight: 200; line-height: 30px; } /*************************************************************************************************/ /* EMPHASIS & MISC */ /*************************************************************************************************/ small { font-size: 85%; } /* Ex: 14px base font * 85% = about 12px */ strong { font-weight: bold; } em { font-style: italic; } cite { font-style: normal; } /* Utility classes */ .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } .muted { color: #6b7785; } a.muted:hover, a.muted:focus { color: rgb(84, 94, 105); } /* .muted */ .text-warning { color: #F8BE34; } a.text-warning:hover, a.text-warning:focus { color: rgb(241, 171, 9); } /* .text-warning */ .text-error { color: #DC4E41; } a.text-error:hover, a.text-error:focus { color: rgb(198, 50, 36); } /* .text-error */ .text-info { color: #006D9C; } a.text-info:hover, a.text-info:focus { color: rgb(0, 75, 107); } /* .text-info */ .text-success { color: #53A051; } a.text-success:hover, a.text-success:focus { color: rgb(65, 125, 63); } /* .text-success */ /*************************************************************************************************/ /* FONT FAMILIES */ /*************************************************************************************************/ /* monospace for code and raw

normal

mono space

*/ .mono-space { font-family: "Splunk Platform Mono", Inconsolata, Consolas, "Droid Sans Mono", Monaco, "Courier New", Courier, monospace; } /*************************************************************************************************/ /* HEADINGS */ /*************************************************************************************************/ h1 { margin: 10px 0; font-size: 24px; font-family: inherit; font-weight: 500; line-height: 20px; text-transform: none; color: #FFFFFF; text-rendering: optimizelegibility; } /* Fix the character spacing for headings */ h1 small { font-size: 21.6px; } h2 { margin: 10px 0; font-size: 18px; font-family: inherit; font-weight: 500; line-height: 20px; text-transform: none; color: #FFFFFF; text-rendering: optimizelegibility; } /* Fix the character spacing for headings */ h2 small { font-size: 16.2px; } h3 { margin: 10px 0; font-size: 16px; font-family: inherit; font-weight: 500; line-height: 20px; text-transform: none; color: #FFFFFF; text-rendering: optimizelegibility; } /* Fix the character spacing for headings */ h3 small { font-size: 14px; } h4 { margin: 10px 0; font-size: 14px; font-family: inherit; font-weight: 500; line-height: 20px; text-transform: none; color: #FFFFFF; text-rendering: optimizelegibility; /* Fix the character spacing for headings */ font-size: 14px; } h5 { margin: 10px 0; font-size: 18px; font-family: inherit; font-weight: 500; line-height: 20px; text-transform: none; color: #FFFFFF; text-rendering: optimizelegibility; /* Fix the character spacing for headings */ font-size: 12px; } h6 { margin: 10px 0; font-size: 18px; font-family: inherit; font-weight: 500; line-height: 20px; text-transform: none; color: #FFFFFF; text-rendering: optimizelegibility; /* Fix the character spacing for headings */ font-size: 11px; } .section-heading { margin: 5px 0; font-size: 14px; font-family: inherit; font-weight: 500; line-height: 20px; text-transform: uppercase; color: #F7F8FA; text-rendering: optimizelegibility; /* Fix the character spacing for headings */ } .section-heading-small { margin: 5px 0; font-size: 12px; font-family: inherit; font-weight: 500; line-height: 20px; text-transform: uppercase; color: #F7F8FA; text-rendering: optimizelegibility; /* Fix the character spacing for headings */ } /*************************************************************************************************/ /* PAGE HEADER */ /*************************************************************************************************/ .page-header { padding-bottom: 9px; margin: 20px 0 30px; border-bottom: 1px solid #2B3033; } /*************************************************************************************************/ /* LISTS */ /*************************************************************************************************/ /* Unordered and Ordered lists */ ul, ol { padding: 0; margin: 0 0 10px 25px; } ul ul, ul ol, ol ul, ol ol { margin-bottom: 0; } /* Remove default list styles */ ul.unstyled, ol.unstyled { margin-left: 0; list-style: none; } /* Single-line list items */ ul.inline, ol.inline { margin-left: 0; list-style: none; } ul.inline > li, ol.inline > li { display: inline-block; padding-left: 5px; padding-right: 5px; } li { line-height: 20px; } /* Description Lists */ dl { margin-bottom: 20px; } dt, dd { line-height: 20px; } dt { font-weight: bold; } dd { margin-left: 10px; } /* Horizontal layout (like forms) */ .dl-horizontal:before, .dl-horizontal:after { display: table; content: ""; line-height: 0; } .dl-horizontal:after { clear: both; } /* Ensure dl clears floats if empty dd elements present */ .dl-horizontal dt { float: left; width: 160px; clear: left; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dl-horizontal dd { margin-left: 180px; } /*************************************************************************************************/ /* MISC */ /*************************************************************************************************/ /* Horizontal rules */ hr { margin: 20px 0; border: 0; border-top: 1px solid #2B3033; border-bottom: 1px solid #FFFFFF; } /* Abbreviations and acronyms */ abbr[title], /* Added data-* attribute to help out our tooltip plugin, per https://github.com/twitter/bootstrap/issues/5257 */ abbr[data-original-title] { cursor: help; border-bottom: 1px dotted #818D99; } abbr.initialism { font-size: 90%; text-transform: uppercase; } /* Blockquotes */ blockquote { padding: 0 0 0 15px; margin: 0 0 20px; border-left: 5px solid #E1E6EB; } blockquote p { margin-bottom: 0; font-size: 17.5px; font-weight: 300; line-height: 1.25; } blockquote small { display: block; line-height: 20px; color: #818D99; } blockquote small:before { content: '\2014 \A0'; } /* Float right with text-align: right */ blockquote.pull-right { float: right; padding-right: 15px; padding-left: 0; border-right: 5px solid #E1E6EB; border-left: 0; } blockquote.pull-right p, blockquote.pull-right small { text-align: right; } blockquote.pull-right small:before { content: ''; } blockquote.pull-right small:after { content: '\A0 \2014'; } /* Quotes */ q:before, q:after, blockquote:before, blockquote:after { content: ""; } /* Addresses */ address { display: block; margin-bottom: 20px; font-style: normal; line-height: 20px; } /*===============================================================================================*/ /* SPLUNK: CODE (INLINE AND BLOCK) */ /*===============================================================================================*/ /* Inline and block code styles */ code, pre { font-family: "Splunk Platform Mono", Inconsolata, Consolas, "Droid Sans Mono", Monaco, "Courier New", Courier, monospace; border-radius: 3px; } /* Inline code */ code { padding: 2px 4px; color: #D14; background-color: #F7F7F9; border: 1px solid #E1E1E8; white-space: nowrap; font-size: 12px; } /* Blocks of code */ pre { display: block; padding: 9.5px; margin: 0 0 10px; font-size: 13px; /* 14px to 13px */ color: #3C444D; line-height: 20px; word-break: break-all; word-wrap: break-word; white-space: pre; white-space: pre-wrap; background-color: #F5F5F5; border: 1px solid rgba(0, 0, 0, .15); } /* Make prettyprint styles more spaced out for readability */ pre.prettyprint { margin-bottom: 20px; } /* Account for some code outputs that place code tags in pre tags */ pre code { padding: 0; color: inherit; white-space: pre; white-space: pre-wrap; background-color: transparent; border: 0; } /* Enable scrollable blocks of code */ .pre-scrollable { max-height: 340px; overflow-y: scroll; } /*===============================================================================================*/ /* SPLUNK: FORMS */ /* Base styles for various input types, form layouts, and states */ /*===============================================================================================*/ /*************************************************************************************************/ /* GENERAL STYLES */ /*************************************************************************************************/ /* Make all forms have space below them */ form, form:last-child { margin: 0 0 20px; } fieldset { padding: 0; margin: 0; border: 0; } /* Groups of fields with labels on top (legends) */ legend { display: block; width: 100%; padding: 0; margin-bottom: 20px; font-size: 15px; line-height: 40px; color: #3C444D; border: 0; border-bottom: 1px solid #e5e5e5; } /* Small */ legend small { font-size: 15px; color: #818D99; } /* Set font for forms */ label, input, button, select, textarea { font-size: 14px; font-weight: normal; line-height: 20px; } input, button, select, textarea { font-family: "Splunk Platform Sans", "Proxima Nova", Roboto, Droid, "Helvetica Neue", Helvetica, Arial, sans-serif; /* And only set font-family here for those that need it (note the missing label element) */ } /* Identify controls by their labels */ label { display: block; margin-bottom: 5px; cursor: default; /* reset pointer */ } /*************************************************************************************************/ /* FORM CONTROLS */ /*************************************************************************************************/ /* Shared size and type resets */ select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { display: inline-block; padding: 5px 8px; height: 32px; line-height: 20px; font-size: 14px; -webkit-box-sizing: border-box; box-sizing: border-box; margin-bottom: 10px; color: #FFFFFF; border-radius: 3px; vertical-align: middle; } /* Reset appearance properties for textual inputs and textarea */ /* Declare width for legacy (can't be on input[type=*] selectors or it's too specific) */ input, textarea, .uneditable-input { width: 206px; /* plus 12px padding and 2px border */ -webkit-box-sizing: border-box; box-sizing: border-box; } /* Reset height since textareas have rows */ textarea { height: auto; } /* Everything else */ textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { background-color: #2B3033; border: 1px solid #171D21; -webkit-transition: border 0.2s, -webkit-box-shadow 0.2s; transition: border 0.2s, -webkit-box-shadow 0.2s; transition: border 0.2s, box-shadow 0.2s; transition: border 0.2s, box-shadow 0.2s, -webkit-box-shadow 0.2s; } /* Focus state */ textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus { -webkit-box-shadow: 0 0 1px 2px #00A4FD; box-shadow: 0 0 1px 2px #00A4FD; border-collapse: separate; /* Fix IE9 Issue with box-shadow */ outline: 0; text-decoration: none; } textarea:focus:active:not([disabled]), input[type="text"]:focus:active:not([disabled]), input[type="password"]:focus:active:not([disabled]), input[type="datetime"]:focus:active:not([disabled]), input[type="datetime-local"]:focus:active:not([disabled]), input[type="date"]:focus:active:not([disabled]), input[type="month"]:focus:active:not([disabled]), input[type="time"]:focus:active:not([disabled]), input[type="week"]:focus:active:not([disabled]), input[type="number"]:focus:active:not([disabled]), input[type="email"]:focus:active:not([disabled]), input[type="url"]:focus:active:not([disabled]), input[type="search"]:focus:active:not([disabled]), input[type="tel"]:focus:active:not([disabled]), input[type="color"]:focus:active:not([disabled]), .uneditable-input:focus:active:not([disabled]) { -webkit-box-shadow: none; box-shadow: none; } textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus { z-index: 3; } textarea.text-clear, input[type="text"].text-clear, input[type="password"].text-clear, input[type="datetime"].text-clear, input[type="datetime-local"].text-clear, input[type="date"].text-clear, input[type="month"].text-clear, input[type="time"].text-clear, input[type="week"].text-clear, input[type="number"].text-clear, input[type="email"].text-clear, input[type="url"].text-clear, input[type="search"].text-clear, input[type="tel"].text-clear, input[type="color"].text-clear, .uneditable-input.text-clear { padding-right: 28px; } /* Don't show IE clear button when an artificial one is shown. */ textarea.text-clear::-ms-clear, input[type="text"].text-clear::-ms-clear, input[type="password"].text-clear::-ms-clear, input[type="datetime"].text-clear::-ms-clear, input[type="datetime-local"].text-clear::-ms-clear, input[type="date"].text-clear::-ms-clear, input[type="month"].text-clear::-ms-clear, input[type="time"].text-clear::-ms-clear, input[type="week"].text-clear::-ms-clear, input[type="number"].text-clear::-ms-clear, input[type="email"].text-clear::-ms-clear, input[type="url"].text-clear::-ms-clear, input[type="search"].text-clear::-ms-clear, input[type="tel"].text-clear::-ms-clear, input[type="color"].text-clear::-ms-clear, .uneditable-input.text-clear::-ms-clear { display: none; width: 0; /* IE 11 on windows 8 */ height: 0; /* IE 11 on windows 8 */ } /* Position radios and checkboxes better */ input[type="radio"], input[type="checkbox"] { margin: 4px 0 0; margin-top: 1px \9; /* IE9 */ line-height: normal; } /* Reset width of input images, buttons, radios, checkboxes */ input[type="file"], input[type="image"], input[type="submit"], input[type="reset"], input[type="button"], input[type="radio"], input[type="checkbox"] { width: auto; /* Override of generic input selector */ } /* Set the height of select and file controls to match text inputs */ select, input[type="file"] { height: 32px; line-height: 32px; } /* Make select elements obey height by applying a border */ select { width: 220px; /* default input width + 10px of padding that doesn't get applied */ border: 1px solid #171D21; background-color: #2B3033; /* Chrome on Linux and Mobile Safari need background-color */ } /* Make multiple select elements height not fixed */ select[multiple], select[size] { height: auto; } /* Focus for select, file, radio, and checkbox */ select:focus, input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus { -webkit-box-shadow: 0 0 1px 2px #00A4FD; box-shadow: 0 0 1px 2px #00A4FD; border-collapse: separate; /* Fix IE9 Issue with box-shadow */ outline: 0; text-decoration: none; } select:focus:active:not([disabled]), input[type="file"]:focus:active:not([disabled]), input[type="radio"]:focus:active:not([disabled]), input[type="checkbox"]:focus:active:not([disabled]) { -webkit-box-shadow: none; box-shadow: none; } input[type="radio"]:focus { border-radius: 100%; } /*************************************************************************************************/ /* UNEDITABLE INPUTS */ /*************************************************************************************************/ /* Make uneditable inputs look inactive */ .uneditable-input, .uneditable-textarea { color: #5C6773; background-color: #2B3033; border-color: #3C444D; -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.025); box-shadow: inset 0 1px 2px rgba(0,0,0,.025); cursor: not-allowed; } /* For text that needs to appear as an input but should not be an input */ .uneditable-input { overflow: hidden; /* prevent text from wrapping, but still cut it off like an input does */ white-space: nowrap; } /* Make uneditable textareas behave like a textarea */ .uneditable-textarea { width: auto; height: auto; } /* restrict text area resize */ textarea { min-height: 2em; resize: vertical; } /*************************************************************************************************/ /* PLACEHOLDER */ /*************************************************************************************************/ /* Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector */ input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #C3CBD4; opacity: 1; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #C3CBD4; opacity: 1; } input::-ms-input-placeholder, textarea::-ms-input-placeholder { color: #C3CBD4; opacity: 1; } input::placeholder, textarea::placeholder { color: #C3CBD4; opacity: 1; } /*************************************************************************************************/ /* CHECKBOXES & RADIOS */ /*************************************************************************************************/ /* Indent the labels to position radios/checkboxes as hanging */ .radio, .checkbox { min-height: 20px; /* clear the floating input if there is no label text */ padding-left: 20px; } .radio input[type="radio"], .checkbox input[type="checkbox"] { float: left; margin-left: -20px; } .radio input[type="radio"] { border-radius: 100%; } /* Move the options list down to align with labels */ .controls > .radio:first-child, .controls > .checkbox:first-child { padding-top: 5px; /* has to be padding because margin collaspes */ } /* Radios and checkboxes on same line */ /* TODO v3: Convert .inline to .control-inline */ .radio.inline, .checkbox.inline { display: inline-block; padding-top: 5px; margin-bottom: 0; vertical-align: middle; } .radio.inline + .radio.inline, .checkbox.inline + .checkbox.inline { margin-left: 10px; /* space out consecutive inline controls */ } /*************************************************************************************************/ /* DISABLED STATE */ /************************************************************************************************/ /* Disabled and read-only inputs */ input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] { cursor: not-allowed; background-color: #2B3033; border-color: #3C444D; color: #5C6773; } /* Explicitly reset the colors here */ input[type="radio"][disabled], input[type="checkbox"][disabled], input[type="radio"][readonly], input[type="checkbox"][readonly] { background-color: #2B3033; } /*************************************************************************************************/ /* FORM FIELD FEEDBACK STATES */ /*************************************************************************************************/ /* Warning */ /* Set the text color */ .control-group.warning .control-label, .control-group.warning .help-block, .control-group.warning .help-inline, .control-group.warning .checkbox, .control-group.warning .radio { color: #F8BE34; } /* Style inputs accordingly */ .control-group.warning input, .control-group.warning select, .control-group.warning textarea { color: #F8BE34; border-color: #F8BE34; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); } /* Redeclare so transitions work */ .control-group.warning input:focus, .control-group.warning select:focus, .control-group.warning textarea:focus { -webkit-box-shadow: 0 0 1px 2px #00A4FD; box-shadow: 0 0 1px 2px #00A4FD; border-collapse: separate; /* Fix IE9 Issue with box-shadow */ outline: 0; text-decoration: none; } .control-group.warning input:focus:active:not([disabled]), .control-group.warning select:focus:active:not([disabled]), .control-group.warning textarea:focus:active:not([disabled]) { -webkit-box-shadow: none; box-shadow: none; } .control-group.warning input:focus, .control-group.warning select:focus, .control-group.warning textarea:focus { z-index: 3; } /* Give a small background color for input-prepend/-append */ .control-group.warning .input-prepend .add-on, .control-group.warning .input-append .add-on { color: #F8BE34; background-color: #FEF2D7; border-color: #F8BE34; } /* Error */ /* Set the text color */ .control-group.error .control-label, .control-group.error .help-block, .control-group.error .help-inline, .control-group.error .checkbox, .control-group.error .radio { color: #DC4E41; } /* Style inputs accordingly */ .control-group.error input, .control-group.error select, .control-group.error textarea { color: #DC4E41; border-color: #DC4E41; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); } /* Redeclare so transitions work */ .control-group.error input:focus, .control-group.error select:focus, .control-group.error textarea:focus { -webkit-box-shadow: 0 0 1px 2px #00A4FD; box-shadow: 0 0 1px 2px #00A4FD; border-collapse: separate; /* Fix IE9 Issue with box-shadow */ outline: 0; text-decoration: none; } .control-group.error input:focus:active:not([disabled]), .control-group.error select:focus:active:not([disabled]), .control-group.error textarea:focus:active:not([disabled]) { -webkit-box-shadow: none; box-shadow: none; } .control-group.error input:focus, .control-group.error select:focus, .control-group.error textarea:focus { z-index: 3; } /* Give a small background color for input-prepend/-append */ .control-group.error .input-prepend .add-on, .control-group.error .input-append .add-on { color: #DC4E41; background-color: #31373E; border-color: #DC4E41; } /* Success */ /* Set the text color */ .control-group.success .control-label, .control-group.success .help-block, .control-group.success .help-inline, .control-group.success .checkbox, .control-group.success .radio { color: #53A051; } /* Style inputs accordingly */ .control-group.success input, .control-group.success select, .control-group.success textarea { color: #53A051; border-color: #53A051; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); } /* Redeclare so transitions work */ .control-group.success input:focus, .control-group.success select:focus, .control-group.success textarea:focus { -webkit-box-shadow: 0 0 1px 2px #00A4FD; box-shadow: 0 0 1px 2px #00A4FD; border-collapse: separate; /* Fix IE9 Issue with box-shadow */ outline: 0; text-decoration: none; } .control-group.success input:focus:active:not([disabled]), .control-group.success select:focus:active:not([disabled]), .control-group.success textarea:focus:active:not([disabled]) { -webkit-box-shadow: none; box-shadow: none; } .control-group.success input:focus, .control-group.success select:focus, .control-group.success textarea:focus { z-index: 3; } /* Give a small background color for input-prepend/-append */ .control-group.success .input-prepend .add-on, .control-group.success .input-append .add-on { color: #53A051; background-color: #DDECDD; border-color: #53A051; } /* Success */ /* Set the text color */ .control-group.info .control-label, .control-group.info .help-block, .control-group.info .help-inline, .control-group.info .checkbox, .control-group.info .radio { color: #006D9C; } /* Style inputs accordingly */ .control-group.info input, .control-group.info select, .control-group.info textarea { color: #006D9C; border-color: #006D9C; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); } /* Redeclare so transitions work */ .control-group.info input:focus, .control-group.info select:focus, .control-group.info textarea:focus { -webkit-box-shadow: 0 0 1px 2px #00A4FD; box-shadow: 0 0 1px 2px #00A4FD; border-collapse: separate; /* Fix IE9 Issue with box-shadow */ outline: 0; text-decoration: none; } .control-group.info input:focus:active:not([disabled]), .control-group.info select:focus:active:not([disabled]), .control-group.info textarea:focus:active:not([disabled]) { -webkit-box-shadow: none; box-shadow: none; } .control-group.info input:focus, .control-group.info select:focus, .control-group.info textarea:focus { z-index: 3; } /* Give a small background color for input-prepend/-append */ .control-group.info .input-prepend .add-on, .control-group.info .input-append .add-on { color: #006D9C; background-color: #CCE2EB; border-color: #006D9C; } /* HTML5 invalid states */ /* Shares styles with the .control-group.error above */ input:focus:invalid, textarea:focus:invalid, select:focus:invalid { color: #b94a48; border-color: #ee5f5b; } input:focus:invalid:focus, textarea:focus:invalid:focus, select:focus:invalid:focus { border-color: rgb(233, 53, 47); -webkit-box-shadow: 0 0 6px rgb(248, 188, 186); box-shadow: 0 0 6px rgb(248, 188, 186); } /*************************************************************************************************/ /* FORM ACTIONS */ /*************************************************************************************************/ .form-actions { padding: 19px 20px 20px; margin-top: 20px; margin-bottom: 20px; background-color: #F7F8FA; border-top: 1px solid #e5e5e5; /* Adding clearfix to allow for .pull-right button containers */ } .form-actions:before, .form-actions:after { display: table; content: ""; line-height: 0; } .form-actions:after { clear: both; } /*************************************************************************************************/ /* HELP TEXT */ /*************************************************************************************************/ .help-block, .help-inline { color: #C3CBD4; } .help-block > .learn-more-link, .help-block > .help-link, .help-inline > .learn-more-link, .help-inline > .help-link { white-space: nowrap; } .help-block { display: block; /* account for any element using help-block */ margin-top: 3px; margin-bottom: 10px; line-height: 1.4em; font-size: 12px; word-wrap: break-word; } .help-inline { display: inline-block; vertical-align: middle; padding-left: 5px; } /*************************************************************************************************/ /* INPUT GROUPS */ /*************************************************************************************************/ /* Allow us to put symbols and text within the input field for a cleaner look */ /*************************************************************************************************/ /* SEARCH FORM */ /*************************************************************************************************/ input.search-query { margin-bottom: 0; /* Remove the default margin on all inputs */ -webkit-transition: background-color 0.2s; transition: background-color 0.2s; } /*************************************************************************************************/ /* HORIZONTAL & VERTICAL FORMS */ /*************************************************************************************************/ /* Common properties */ /* ----------------- */ .form-search input, .form-search textarea, .form-search select, .form-search .uneditable-input, .form-inline input, .form-inline textarea, .form-inline select, .form-inline .uneditable-input, .form-horizontal input, .form-horizontal textarea, .form-horizontal select, .form-horizontal .uneditable-input { display: inline-block; margin-bottom: 0; vertical-align: middle; } /* Re-hide hidden elements due to specifity */ .form-search .hide, .form-inline .hide, .form-horizontal .hide { display: none; } .form-search label, .form-search .btn-group, .form-inline label, .form-inline .btn-group { display: inline-block; } .form-search .radio, .form-search .checkbox, .form-inline .radio, .form-inline .checkbox { /* Inline checkbox/radio labels (remove padding on left) */ padding-left: 0; margin-bottom: 0; vertical-align: middle; } .form-search .radio input[type="radio"], .form-search .checkbox input[type="checkbox"], .form-inline .radio input[type="radio"], .form-inline .checkbox input[type="checkbox"] { /* Remove float and margin, set to inline-block */ float: left; margin-right: 3px; margin-left: 0; } /* Margin to space out fieldsets */ .control-group { margin-bottom: 10px; position: relative; } .control-group.disabled .control-label { /* If a control is disabled, also gray out the control label */ color: #5C6773; cursor: default; } .control-group .tooltip-link { /* Tooltop link */ top: -0.5em; position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; margin: 0 2px; padding: 2px; cursor: default; font-weight: normal; } /* Legend collapses margin, so next element is responsible for spacing */ /* Only applies to legends that are not visually hidden for accessibility purposes */ legend:not(.visuallyhidden) + .control-group { margin-top: 20px; -webkit-margin-top-collapse: separate; } /*************************************************************************************************/ /* HORIZONTAL SPECIFIC STYLES */ /*************************************************************************************************/ .form-horizontal { /* Increase spacing between groups */ width: 600px; max-width: 100%; } .form-horizontal .control-group { margin-bottom: 10px; } .form-horizontal .control-group:before, .form-horizontal .control-group:after { display: table; content: ""; line-height: 0; } .form-horizontal .control-group:after { clear: both; } /* Float the labels left */ .form-horizontal .control-label { float: left; width: 160px; padding-top: 5px; text-align: right; } /* Move over all input controls and content */ .form-horizontal .controls { margin-left: 180px; } .form-horizontal .controls > .help-block { margin-left: 0; } /* Remove bottom margin on block level help text since that's accounted for on .control-group */ .form-horizontal .help-block { margin-bottom: 0; margin-left: 180px; } /* And apply it only to .help-block instances that follow a form control */ .form-horizontal input + .help-block, .form-horizontal select + .help-block, .form-horizontal textarea + .help-block, .form-horizontal .uneditable-input + .help-block { margin-top: 10px; } /* Move over buttons in .form-actions to align with .controls */ .form-horizontal .form-actions { padding-left: 180px; } /*************************************************************************************************/ /* INLINE SPECIFIC STYLES */ /*************************************************************************************************/ .form-inline label { line-height: 28px; } .form-inline .form-value { line-height: 28px; margin-right: 15px; } .form-inline input { width: auto; margin-right: 15px; } /*************************************************************************************************/ /* CONTROLS LAYOUT */ /*************************************************************************************************/ /* Synthetic Radio is always full width */ .controls .shared-controls-syntheticradiocontrol, .controls .shared-controls-booleanradiocontrol { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; } .controls .shared-controls-syntheticradiocontrol > .btn, .controls .shared-controls-booleanradiocontrol > .btn { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; } .controls-join { display: -webkit-box; display: -ms-flexbox; display: flex; } /* evenly space controls */ .controls-join .control:not(:only-child) { -webkit-box-flex: 1; -ms-flex: 1 0 0px; flex: 1 0 0px; max-width: 100%; } .controls-join .control:only-child { width: 100%; } /* Text-inputs should take up any extra space */ .controls-join .shared-controls-textcontrol { -webkit-box-flex: 0; -ms-flex: 0 1 100%; flex: 0 1 100%; min-width: 30%; } /* If there are three controls, allow the text control to get very small */ .controls-join .shared-controls-textcontrol:nth-last-child(n+3), .controls-join .control:nth-last-child(n+3) ~ .shared-controls-textcontrol { min-width: 48px; } /* First or in the Middle do not have right corners */ .controls-join .shared-controls-textcontrol:not(:last-child) input, .controls-join .shared-controls-textcontrol:not(:last-child) .uneditable-input, .controls-join .shared-controls-syntheticselectcontrol:not(:last-child) .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; } /* Last or in the Middle do not have left corners */ .controls-join .shared-controls-textcontrol:not(:first-child) input, .controls-join .shared-controls-textcontrol:not(:first-child) .uneditable-input, .controls-join .shared-controls-syntheticselectcontrol:not(:first-child) .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: none; } /* Control should fill the control div */ .controls-join input, .controls-join textarea, .controls-join select, .controls-join .uneditable-input, .controls-join .shared-controls-syntheticselectcontrol .btn { width: 100%; } /* Reset width of input images, buttons, radios, checkboxes */ .controls-join input[type="file"], .controls-join input[type="image"], .controls-join input[type="submit"], .controls-join input[type="reset"], .controls-join input[type="button"], .controls-join input[type="radio"], .controls-join input[type="checkbox"] { width: auto; /* Override of generic input selector */ } .controls-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .controls-separate { display: -webkit-box; display: -ms-flexbox; display: flex; } .controls-separate .control + .control { margin-left: 10px; } .controls-stack { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column } /*************************************************************************************************/ /* FORM ELEMENTS */ /*************************************************************************************************/ .control { position: relative; } /* synthetic placeholder */ .control .placeholder { color: #C3CBD4; position: absolute; max-width: 100%; top: 3px; left: 6px; font-size: 14px; } .control ::-webkit-input-placeholder { color: #C3CBD4; opacity: 1; } .control :-ms-input-placeholder { color: #C3CBD4; opacity: 1; } .control ::-ms-input-placeholder { color: #C3CBD4; opacity: 1; } .control ::placeholder { color: #C3CBD4; opacity: 1; } /* uneditable-input a read only text field or text area */ .control .uneditable-input { background-color: #2B3033; min-height: 32px; } .control .uneditable-input.uneditable-input-multiline { overflow-y: auto; white-space: normal; white-space: pre-wrap; word-break: break-all; word-break: break-word; height: auto; max-height: 100px; } .control.shared-controls-textcontrol .control-clear, .control.shared-controls-textcontrol .search-icon { position: absolute; top: calc(50% + 1px); -webkit-transform: translate(0, -50%); transform: translate(0, -50%); right: 10px; font-size: 18px; color: #6b7785; } .control.shared-controls-textcontrol .control-clear { display: none; } .control.shared-controls-textcontrol > input { width: 100%; } .control.shared-controls-spinnercontrol { text-align: center; } .control.shared-controls-spinnercontrol input, .control.shared-controls-spinnercontrol .uneditable-input { display: block; padding: 4px 65px 4px 6px; -webkit-transition: border 0.2s, -webkit-box-shadow 0.2s; transition: border 0.2s, -webkit-box-shadow 0.2s; transition: border 0.2s, box-shadow 0.2s; transition: border 0.2s, box-shadow 0.2s, -webkit-box-shadow 0.2s; } .control.shared-controls-spinnercontrol input.corrected-value { border-color: #DC4E41; -webkit-box-shadow: #FCEDEC 0px 0px 8px 0px; box-shadow: #FCEDEC 0px 0px 8px 0px; } .control.shared-controls-spinnercontrol .increment-down, .control.shared-controls-spinnercontrol .increment-up { position: absolute; right: 1px; top: 1px; width: 30px; line-height: 30px; } .control.shared-controls-spinnercontrol .increment-down:focus, .control.shared-controls-spinnercontrol .increment-up:focus { background-color: rgba(0, 164, 253, 0.1); -webkit-box-shadow: none; box-shadow: none; outline: none; } .control.shared-controls-spinnercontrol .increment-down.disabled, .control.shared-controls-spinnercontrol .increment-up.disabled { color: #5C6773; } .control.shared-controls-spinnercontrol .increment-down { right: 31px; } .control.shared-findinput { display: inline-block; margin: 5px 0; } .control.shared-findinput input { width: 250px; } /* simple text only control (LabelControl) */ .input-label { display: inline-block; padding: 8px 0 4px 0; height: auto; line-height: 15px; font-size: 14px; -webkit-box-sizing: border-box; box-sizing: border-box; max-width: 100%; word-wrap: break-word; word-break: break-word; font-weight: 500; } /* wrapper for checkbox */ label.checkbox { padding: 2px 0 2px 21px; margin-bottom: 0; position: relative; } label.checkbox.disabled { color: #5C6773; } label.checkbox >.btn { padding: 0; width: 16px; height: 16px; border-radius: 2px; position: absolute; left: 0; top: 3px; } label.checkbox >.btn > [class*="icon-"] { margin: 0; position: relative; bottom: 6px; vertical-align: text-top; } /*************************************************************************************************/ /* SMALL FORMS */ /*************************************************************************************************/ .control-group-small .control-label { font-size: 12px; } .control-small { font-size: 12px; } .control-small input[type="text"], .control-small .uneditable-input, .control-small textarea { padding-top: 2px; padding-bottom: 2px; font-size: inherit; } .control-small input[type="text"], .control-small .uneditable-input { height: 26px } .control-small .uneditable-input { min-height: 16px; } .control-small .btn, .control-small.btn-group > .btn { padding-top: 2px; padding-bottom: 2px; font-size: 12px; } .control-small.shared-controls-spinnercontrol input, .control-small.shared-controls-spinnercontrol .uneditable-input { padding-right: 55px; } .control-small.shared-controls-spinnercontrol .increment-down, .control-small.shared-controls-spinnercontrol .increment-up { width: 24px; line-height: 24px; } .control-small.shared-controls-spinnercontrol .increment-down { right: 25px; } /*************************************************************************************************/ /* CHECKBOX CONTROLS */ /*************************************************************************************************/ .shared-controls-checkboxgroup label.checkbox { padding-top: 2px; padding-bottom: 2px; } .control-group > .controls > .shared-controls-syntheticcheckboxcontrol:only-child { padding-top: 4px; /* Align to label */ } /*************************************************************************************************/ /* KEY VALUE CONTROL */ /*************************************************************************************************/ .shared-controls-keyvaluecontrol .shared-controls-textcontrol { margin-right: 10px; } .shared-controls-keyvaluecontrol .key-text-control-placeholder, .shared-controls-keyvaluecontrol .value-text-control-placeholder { float: left; } /*************************************************************************************************/ /* ACCUMULATOR CONTROL */ /*************************************************************************************************/ .accumulator { width: 700px; } .controls-join .accumulator { width: 100%; } .accumulator .availableOptionsContainer, .accumulator .selectedOptionsContainer { float: left; width: calc(50% - 10px); margin: 0px 20px 0px 0px; } .accumulator .addAllLink, .accumulator .removeAllLink { float: right; } .accumulator .selectedOptionsContainer { margin-right: 0px; } .accumulator .availableOptionsHeader { font-weight: normal; font-size: 14px; width: 200px; margin-right: 22px; padding-bottom: 5px; line-height: 0px; } .accumulator .selectedOptionsHeader { width: 200px; margin-right: 0px; } .accumulator ul.availableOptions, .accumulator ul.selectedOptions { border-radius: 3px; height: 100px; overflow: auto; list-style: none; margin: 0; padding: 0; border: 1px solid #171D21; clear: left; } .accumulator .accDisabled ul.availableOptions, .accumulator .accDisabled ul.selectedOptions { background-color: #F7F8FA; } .accumulator ul.availableOptions li, .accumulator ul.selectedOptions li { clear: left; padding: 4px 5px; font-size: 14px; cursor: pointer; line-height: 1; } .accumulator ul.availableOptions li:hover, .accumulator ul.selectedOptions li:hover { background-color: #3C444D; } .accumulator ul.availableOptions li span, .accumulator ul.selectedOptions li span { margin: 0px 8px 0 0; display: block; float: left; } .accumulator ul span.splIcon-arrow-e { background-color: #007ABD; } .accumulator ul.availableOptions li.selected, .accumulator .accDisabled ul li { color: #6b7785; } .accumulator ul.availableOptions li.selected span.splIcon, .accumulator .accDisabled ul li span.splIcon { background-color: #C3CBD4; } .accumulator .selected { background-color: transparent; } .control-group.error .accumulator ul { border-color: #DC4E41; } .accumulator .icon-class { color: #6b7785; } .accumulator div.wide { width: 340px; } /*************************************************************************************************/ /* TABLE FORMS */ /* TODO: figure out what this is for. */ /*************************************************************************************************/ /*
cell
help-block
cell
help-block
*/ table.form td { padding-right: 10px; padding-bottom: 5px; } table.form tr:last-child td { padding-bottom: 0; } table.form tr:last-child .help-block { margin-bottom: 0; } /*************************************************************************************************/ /* FORMAT DIALOGS */ /*************************************************************************************************/ .form-format .control-label { width: 100px; } /* remove margin from last group */ .form-format .control-group:last-child { margin-bottom: 0; } .form-format .controls { margin-left: 120px; } /* Horizontal form, left-aligned */ .form-horizontal.align-left .control-label { width: auto; text-align: left; display: inline-block; float: none; } .form-horizontal.align-left .controls { margin-left: 15px; display: inline-block; } /* Append /Prepend */ /* -------------- */ .shared-controls-textcontrol.input-prepend { display: -webkit-box; display: -ms-flexbox; display: flex; } .shared-controls-textcontrol.input-prepend > input, .shared-controls-textcontrol.input-prepend .uneditable-input { border-top-left-radius: 0; border-bottom-left-radius: 0; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; width: 0; } .shared-controls-textcontrol.input-prepend > .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none; } .shared-controls-textcontrol.input-append, .shared-controls-textbrowsecontrol { display: -webkit-box; display: -ms-flexbox; display: flex; } .shared-controls-textcontrol.input-append > input, .shared-controls-textcontrol.input-append .uneditable-input, .shared-controls-textbrowsecontrol > input, .shared-controls-textbrowsecontrol .uneditable-input { border-top-right-radius: 0; border-bottom-right-radius: 0; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; /* SPL-122817 */ width: 0; } .shared-controls-textcontrol.input-append > input + .btn, .shared-controls-textcontrol.input-append .uneditable-input + .btn, .shared-controls-textbrowsecontrol > input + .btn, .shared-controls-textbrowsecontrol .uneditable-input + .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: none; } .shared-controls-textcontrol.input-append .add-on, .shared-controls-textbrowsecontrol .add-on { display: inline-block; padding: 5px 14px; height: auto; line-height: 20px; font-size: 14px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 5px 14px; margin-bottom: 0; /* For input.btn */ font-weight: 400; color: #FFFFFF; text-align: center; vertical-align: middle; border: 1px solid; border-left: none; border-top-right-radius: 3px; border-bottom-right-radius: 3px; background-color: #5C6773; border-color: #171D21; color: #FFFFFF; -webkit-box-shadow: inset 0px -1px 0 #3C444D; box-shadow: inset 0px -1px 0 #3C444D; text-decoration: none; text-shadow: none; -webkit-transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; -webkit-filter: none; filter: none; /* this breaks some bootstrap styles */ } .shared-controls-textcontrol.input-append .add-on[disabled], .shared-controls-textbrowsecontrol .add-on[disabled] { color: #5C6773; border-color: #3C444D; cursor: not-allowed; } /* Form Complex */ /* -------------- */ /*
eg. this is some help text
that goes outside the form for some reason ;_;
*/ /* complex forms? maybe use form-narrow? */ .form-complex { width: 100%; } .form-complex .controls { position: relative; } .form-complex .control-group { width: 440px; /* magic number ;_; maybe move width to container */ } .form-complex .control-heading { /* like control-label but without the float */ padding-top: 5px; text-align: right; width: 160px; font-weight: bold; } .form-complex .help-block, .form-complex .help-outer { position: absolute; top: 4px; left: 100%; margin-left: 10px; margin-top: 0 !important; /* TODO: get rid of important; */ width: 280px; } .form-complex .outline { border: 1px solid #171D21; border-radius: 3px; margin-bottom: 10px; /* TOOD: use var here; */ margin-top: 0; padding-top: 10px; } .form-complex fieldset { border: 1px solid transparent; } .form-complex .btn-check { display: inline-block; padding: 0; height: auto; line-height: 20px; font-size: 14px; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center; vertical-align: middle; width: 20px; } .form-complex .control-feedback { display: block; width: 100%; } /* feedback for controls */ .control-feedback { color: #FFFFFF; background-color: #2B3033; border-radius: 3px; font-size: 85%; text-align: center; margin-top: 3px; } /*************************************************************************************************/ /* SYNTHETIC RADIO CONTROL */ /*************************************************************************************************/ .shared-controls-syntheticradiocontrol > .tooltip { white-space:normal; } .shared-controls-syntheticradiocontrol .btn-radio { -webkit-animation: none 0s ease 0s 1 normal none running; animation: none 0s ease 0s 1 normal none running; -webkit-backface-visibility: visible; backface-visibility: visible; background: transparent none repeat 0 0 / auto auto padding-box border-box scroll; border: medium none currentColor; border-collapse: separate; -o-border-image: none; border-image: none; border-radius: 0; border-spacing: 0; bottom: auto; -webkit-box-shadow: none; box-shadow: none; -webkit-box-sizing: content-box; box-sizing: content-box; caption-side: top; clear: none; clip: auto; color: #000; -webkit-columns: auto; columns: auto; -webkit-column-count: auto; column-count: auto; -webkit-column-fill: balance; column-fill: balance; -webkit-column-gap: normal; column-gap: normal; -webkit-column-rule: medium none currentColor; column-rule: medium none currentColor; -webkit-column-span: 1; column-span: 1; -webkit-column-width: auto; column-width: auto; content: normal; counter-increment: none; counter-reset: none; cursor: auto; direction: ltr; display: inline; empty-cells: show; float: none; font-family: serif; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal; height: auto; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; left: auto; letter-spacing: normal; list-style: disc outside none; margin: 0; max-height: none; max-width: none; min-height: 0; min-width: 0; opacity: 1; orphans: 2; outline: medium none invert; overflow: visible; overflow-x: visible; overflow-y: visible; padding: 0; page-break-after: auto; page-break-before: auto; page-break-inside: auto; -webkit-perspective: none; perspective: none; -webkit-perspective-origin: 50% 50%; perspective-origin: 50% 50%; position: static; right: auto; -moz-tab-size: 8; -o-tab-size: 8; tab-size: 8; table-layout: auto; text-align: left; text-align-last: auto; text-decoration: none; text-indent: 0; text-shadow: none; text-transform: none; top: auto; -webkit-transform: none; transform: none; -webkit-transform-origin: 50% 50% 0; transform-origin: 50% 50% 0; -webkit-transform-style: flat; transform-style: flat; -webkit-transition: none 0s ease 0s; transition: none 0s ease 0s; unicode-bidi: normal; vertical-align: baseline; visibility: visible; white-space: normal; widows: 2; width: auto; word-spacing: normal; z-index: auto; font-family: "Splunk Platform Sans", "Proxima Nova", Roboto, Droid, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; color: #FFFFFF; -webkit-box-sizing: border-box; box-sizing: border-box; display: block; border-width: 1px; visibility: inherit; /* postcss-initial does not correctly reset this for all browsers */ outline: medium none #00A4FD; outline: medium none invert; position: relative; padding: 3px 0 3px 20px; color: #FFFFFF; text-decoration: none; } .shared-controls-syntheticradiocontrol .btn-radio:before { content:''; border: 1px solid; background-color: #5C6773; border-color: #171D21; color: #FFFFFF; -webkit-box-shadow: inset 0px -1px 0 #3C444D; box-shadow: inset 0px -1px 0 #3C444D; text-decoration: none; text-shadow: none; -webkit-transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; -webkit-filter: none; filter: none; position: absolute; left: 0; top: 4px; -webkit-box-sizing: border-box; box-sizing: border-box; width: 16px; height: 16px; border-radius: 8px; } .shared-controls-syntheticradiocontrol .btn-radio.disabled { cursor: not-allowed; color: #5C6773; opacity: 0.65; } .shared-controls-syntheticradiocontrol .btn-radio.disabled:before { background: #2B3033; -webkit-filter: none; filter: none; border-color: #3C444D; } .shared-controls-syntheticradiocontrol .btn-radio:not(.disabled):hover:before { background-color: #3C444D; border-color: #171D21; color: #FFFFFF; -webkit-box-shadow: inset 0px -1px 0 #3C444D; box-shadow: inset 0px -1px 0 #3C444D; text-decoration: none; text-shadow: none; -webkit-transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; -webkit-filter: none; filter: none; } .shared-controls-syntheticradiocontrol .btn-radio:focus:before { -webkit-box-shadow: 0 0 1px 2px #00A4FD; box-shadow: 0 0 1px 2px #00A4FD; border-collapse: separate; /* Fix IE9 Issue with box-shadow */ outline: 0; text-decoration: none; } .shared-controls-syntheticradiocontrol .btn-radio:focus:before:active:not([disabled]) { -webkit-box-shadow: none; box-shadow: none; } .shared-controls-syntheticradiocontrol .btn-radio.active:after { content:''; position: absolute; left: 4px; top: 8px; -webkit-box-sizing: border-box; box-sizing: border-box; width: 8px; height: 8px; border-radius: 4px; background-color: currentColor; } .radio-control-list { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } /*************************************************************************************************/ /* ERROR STATES */ /*************************************************************************************************/ .error .btn { background-color: #F1B9B3; border-color: #DC4E41; color: #DC4E41; -webkit-box-shadow: inset 0px -1px 0 #3C444D; box-shadow: inset 0px -1px 0 #3C444D; text-decoration: none; text-shadow: none; -webkit-transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; -webkit-filter: none; filter: none; } .error .btn.active { background-color: #EA958D; border-color: #DC4E41; color: #DC4E41; -webkit-box-shadow: inset 0px -1px 0 #3C444D; box-shadow: inset 0px -1px 0 #3C444D; text-decoration: none; text-shadow: none; -webkit-transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; -webkit-filter: none; filter: none; background-image: none; } .error .btn:hover { background-color: #EA958D; border-color: #DC4E41; color: #DC4E41; -webkit-box-shadow: inset 0px -1px 0 #3C444D; box-shadow: inset 0px -1px 0 #3C444D; text-decoration: none; text-shadow: none; -webkit-transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; -webkit-filter: none; filter: none; } .required { color: #DC4E41; } /* Custom shared form components for color editing */ /* ------------------------------------------------------ */ .color-square { display: block; width: 32px; height: 32px; background: #53A051; border: 1px solid #000000; border-radius: 2px; -webkit-box-sizing: border-box; box-sizing: border-box; } .color-square:focus { -webkit-box-shadow: 0 0 1px 2px #00A4FD; box-shadow: 0 0 1px 2px #00A4FD; border-collapse: separate; /* Fix IE9 Issue with box-shadow */ outline: 0; text-decoration: none; } .color-square:focus:active:not([disabled]) { -webkit-box-shadow: none; box-shadow: none; } .color-square-standalone { margin-top: 3px; } /*===============================================================================================*/ /* SPLUNK: TABLES */ /* Tables for, you guessed it, tabular data. */ /*===============================================================================================*/ /*************************************************************************************************/ /* BASE TABLES */ /*************************************************************************************************/ table { max-width: 100%; background-color: transparent; border-collapse: collapse; border-spacing: 0; } /*************************************************************************************************/ /* BASELINE STYLES */ /*************************************************************************************************/ .table { width: auto; min-width: 100%; max-width: none; margin-bottom: 20px; } /* Cells */ .table th, .table td { text-align: left; vertical-align: top; padding: 6px 12px; line-height: 20px; border-bottom: 1px solid transparent; } .table th td:focus, .table td td:focus { -webkit-box-shadow: none; box-shadow: none; border-collapse: separate; /* Fix IE9 Issue with box-shadow */ outline: 0; text-decoration: none; } .table th td:focus:active:not([disabled]), .table td td:focus:active:not([disabled]) { -webkit-box-shadow: none; box-shadow: none; } .table th td:focus, .table td td:focus { -webkit-box-shadow: inset 0 0 2px 1px #FFFFFF, inset 0 0 0 2px #00A4FD; box-shadow: inset 0 0 2px 1px #FFFFFF, inset 0 0 0 2px #00A4FD; } .table th .tooltip-link, .table td .tooltip-link { top:-.5em; position:relative; font-size:75%; line-height:0; vertical-align:baseline; cursor:default; font-weight:400; } .table th div { padding: 6px 12px; } .table thead th { vertical-align: bottom; } /* Remove top border from thead by default */ .table caption + thead tr:first-child th, .table caption + thead tr:first-child td, .table colgroup + thead tr:first-child th, .table colgroup + thead tr:first-child td, .table thead:first-child tr:first-child th, .table thead:first-child tr:first-child td { border-top: 0; } /* Account for multiple tbody instances */ .table tbody + tbody { border-top: 2px solid transparent; } /* sorts */ .table .sorts { white-space: nowrap; cursor: pointer; } .table .sorts a { color: inherit; } .table .sorts a:hover { text-decoration: none; } .table .sorts:hover { color: #00A4FD; } .table .sorts .icon-sorts:before { font-family: "Splunk Icons"; content: "\2195"; padding-left: 5px; color: unset; } .table .sorts.active .icon-sorts:before { color: unset; } .table .sorts .asc:before, .table .sorts .Asc:before { content: "\21A5"; color: inherit; } .table .sorts .desc:before, .table .sorts .Desc:before { content: "\21A7"; color: inherit; } .table .sorts[tabindex]:focus { outline: 0; -webkit-box-shadow: none; box-shadow: none; border-collapse: separate; /* Fix IE9 Issue with box-shadow */ outline: 0; text-decoration: none; } .table .sorts[tabindex]:focus:active:not([disabled]) { -webkit-box-shadow: none; box-shadow: none; } .table .sorts[tabindex]:focus { -webkit-box-shadow: inset 0 0 2px 1px #171D21, inset 0 0 0 2px #00A4FD; box-shadow: inset 0 0 2px 1px #171D21, inset 0 0 0 2px #00A4FD; } /* Nesting */ .table .table { background-color: transparent; } /*************************************************************************************************/ /* CONDENSED TABLE W/ HALF PADDING */ /*************************************************************************************************/ .table-condensed th, .table-condensed td { padding: 3px 6px; } /*************************************************************************************************/ /* BORDERED TABLE */ /*************************************************************************************************/ .table-bordered { border: 1px solid transparent; border-collapse: separate; /* Done so we can round those corners! */ border-left: 0; } .table-bordered th, .table-bordered td { border-left: 1px solid transparent; } /*************************************************************************************************/ /* BORDERED LITE TABLE */ /* A stripped-down version of bootstrap's table-bordered */ /*************************************************************************************************/ .table-bordered-lite th, .table-bordered-lite td { border-left: 1px solid transparent; } .table-bordered-lite th:first-child, .table-bordered-lite td:first-child { border-left: none; } /*************************************************************************************************/ /* BORDERED DOTTED TABLE */ /*************************************************************************************************/ .table-dotted td, .table-dotted th { border-top: 1px dashed #171D21; } /*************************************************************************************************/ /* STRIPED TABLE */ /*************************************************************************************************/ .table-striped > thead > tr > th { background-color: #2B3033; border-top: 1px solid transparent; } .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th { background-color: #31373E; } .table-striped > tbody > tr:nth-child(even) > td { background-color: #2B3033; } .table-striped > tbody > tr.odd > td, .table-striped > tbody > tr.odd > th { background-color: #31373E; } .table-striped > tbody > tr.even > td, .table-striped > tbody > tr.even > th { background-color: #2B3033; } .table-striped > tbody > tr > td { border: none; } .table-striped.table-chrome > tbody > tr:nth-child(even) > td, .table-striped.table-chrome > tbody > tr:nth-child(odd).even > td, .table-striped.table-chrome > tbody > tr.even > td { background-color: #31373E; } .table-striped.table-chrome > tbody > tr:nth-child(odd) > td, .table-striped.table-chrome > tbody > tr:nth-child(even).odd > td, .table-striped.table-chrome > tbody > tr.odd > td { background-color: #2B3033; } /*************************************************************************************************/ /* CHROME TABLE */ /* Table with dark header background color. */ /*************************************************************************************************/ .table-chrome, .table-chrome.table-row-expanding { border: none; } .table-chrome > thead > tr > th { font-weight: normal; background-color: #171D21; border-right: 1px solid #32414C; border-bottom: none; -webkit-box-shadow: none; box-shadow: none; } .table-chrome > thead > tr > th:last-child { border-right: none; } /* sorting */ .table-chrome .sorts { border-bottom: none; } /* saf3+, chrome1+ */ @media screen and (-webkit-min-device-pixel-ratio:0) { /* fix table headers */ .table-chrome > thead > tr > th { position: relative; } } /*************************************************************************************************/ /* HOVER EFFECT */ /*************************************************************************************************/ .table-hover > tbody > tr > td, .table-hover > tbody > tr > th { -webkit-transition: background 0.05s; transition: background 0.05s; } .table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th { background-color: #3C444D !important; } /*************************************************************************************************/ /* TABLE CELL SIZING */ /*************************************************************************************************/ /* Reset default grid behavior */ table td[class*="span"], table th[class*="span"], .row-fluid table td[class*="span"], .row-fluid table th[class*="span"] { display: table-cell; float: none; /* undo default grid column styles */ margin-left: 0; /* undo default grid column styles */ } /* Change the column widths to account for td/th padding */ .table td.span1, .table th.span1 { float: none; /* undo default grid column styles */ width: 44px; /* 16 is total padding on left and right of table cells */ margin-left: 0; /* undo default grid column styles */ } .table td.span2, .table th.span2 { float: none; /* undo default grid column styles */ width: 124px; /* 16 is total padding on left and right of table cells */ margin-left: 0; /* undo default grid column styles */ } .table td.span3, .table th.span3 { float: none; /* undo default grid column styles */ width: 204px; /* 16 is total padding on left and right of table cells */ margin-left: 0; /* undo default grid column styles */ } .table td.span4, .table th.span4 { float: none; /* undo default grid column styles */ width: 284px; /* 16 is total padding on left and right of table cells */ margin-left: 0; /* undo default grid column styles */ } .table td.span5, .table th.span5 { float: none; /* undo default grid column styles */ width: 364px; /* 16 is total padding on left and right of table cells */ margin-left: 0; /* undo default grid column styles */ } .table td.span6, .table th.span6 { float: none; /* undo default grid column styles */ width: 444px; /* 16 is total padding on left and right of table cells */ margin-left: 0; /* undo default grid column styles */ } .table td.span7, .table th.span7 { float: none; /* undo default grid column styles */ width: 524px; /* 16 is total padding on left and right of table cells */ margin-left: 0; /* undo default grid column styles */ } .table td.span8, .table th.span8 { float: none; /* undo default grid column styles */ width: 604px; /* 16 is total padding on left and right of table cells */ margin-left: 0; /* undo default grid column styles */ } .table td.span9, .table th.span9 { float: none; /* undo default grid column styles */ width: 684px; /* 16 is total padding on left and right of table cells */ margin-left: 0; /* undo default grid column styles */ } .table td.span10, .table th.span10 { float: none; /* undo default grid column styles */ width: 764px; /* 16 is total padding on left and right of table cells */ margin-left: 0; /* undo default grid column styles */ } .table td.span11, .table th.span11 { float: none; /* undo default grid column styles */ width: 844px; /* 16 is total padding on left and right of table cells */ margin-left: 0; /* undo default grid column styles */ } .table td.span12, .table th.span12 { float: none; /* undo default grid column styles */ width: 924px; /* 16 is total padding on left and right of table cells */ margin-left: 0; /* undo default grid column styles */ } /*************************************************************************************************/ /* FOCUS EFFECT */ /* Add focus back in, needs to come last */ /*************************************************************************************************/ .table > tbody > tr.even > td:focus, .table > tbody > tr.odd > td:focus { -webkit-box-shadow: none; box-shadow: none; border-collapse: separate; /* Fix IE9 Issue with box-shadow */ outline: 0; text-decoration: none;} .table > tbody > tr.even > td:focus:active:not([disabled]), .table > tbody > tr.odd > td:focus:active:not([disabled]) { -webkit-box-shadow: none; box-shadow: none; } .table > tbody > tr.even > td:focus, .table > tbody > tr.odd > td:focus { -webkit-box-shadow: inset 0 0 2px 1px #2B3033, inset 0 0 0 2px #00A4FD; box-shadow: inset 0 0 2px 1px #2B3033, inset 0 0 0 2px #00A4FD; } .table > tbody > tr:focus, .table > tbody > tr.even:focus, .table > tbody > tr.odd:focus { outline: none; } .table > tbody > tr:focus > td, .table > tbody > tr.even:focus > td, .table > tbody > tr.odd:focus > td { -webkit-box-shadow: none; box-shadow: none; border-collapse: separate; /* Fix IE9 Issue with box-shadow */ outline: 0; text-decoration: none;} .table > tbody > tr:focus > td:active:not([disabled]), .table > tbody > tr.even:focus > td:active:not([disabled]), .table > tbody > tr.odd:focus > td:active:not([disabled]) { -webkit-box-shadow: none; box-shadow: none; } .table > tbody > tr:focus > td, .table > tbody > tr.even:focus > td, .table > tbody > tr.odd:focus > td { -webkit-box-shadow: inset 0 0 2px 1px #2B3033, inset 0 0 0 2px #00A4FD; box-shadow: inset 0 0 2px 1px #2B3033, inset 0 0 0 2px #00A4FD; } /*************************************************************************************************/ /* TABLE BACKGROUNDS */ /* Exact selectors below required to override .table-striped */ /*************************************************************************************************/ .table tbody tr.success > td { background-color: #DDECDD; } .table tbody tr.error > td { background-color: #31373E; } .table tbody tr.warning > td { background-color: #FEF2D7; } .table tbody tr.info > td { background-color: #CCE2EB; } /* Hover states for .table-hover */ .table-hover tbody tr.success:hover > td { background-color: rgb(206, 227, 206); } .table-hover tbody tr.error:hover > td { background-color: rgb(38, 43, 49); } .table-hover tbody tr.warning:hover > td { background-color: rgb(253, 234, 190); } .table-hover tbody tr.info:hover > td { background-color: rgb(185, 216, 228); } /* EMBEDDED TABLES */ /* -------------------- */ /* tables that appear within other tables. */ .table-embed { width: 100%; border: 0; } .table-embed td { border-bottom: 1px dashed #171D21; border-left: 0; padding: 0; background-color: transparent !important; } .table-embed td:first-child { padding-right: 10px; } /*************************************************************************************************/ /* ROW EXPANDING */ /*************************************************************************************************/ .table-row-expanding { width: 100%; table-layout: fixed; margin-bottom: -1px; border-bottom: 1px solid #171D21; } .table-row-expanding > tbody > tr > td.expands { cursor: pointer; border-right: 1px solid #32414C; padding: 0; } .table-row-expanding > tbody > tr > td.expands.disabled { color: #5C6773; cursor: default; } .table-row-expanding > tbody > tr > td.expands.disabled > span, .table-row-expanding > tbody > tr > td.expands.disabled a { color: inherit; cursor: inherit; } .table-row-expanding > tbody > tr > td.expands > span, .table-row-expanding > tbody > tr > td.expands a, .table-row-expanding > tbody > tr > td.expands > i { color: #FFFFFF; display: block; padding: 6px 10px; width: 15px; height: 100%; text-decoration: none; text-align: center; } .table-row-expanding > tbody > tr > td.expands a:focus { -webkit-box-shadow: none; box-shadow: none; border-collapse: separate; /* Fix IE9 Issue with box-shadow */ outline: 0; text-decoration: none; } .table-row-expanding > tbody > tr > td.expands a:focus:active:not([disabled]) { -webkit-box-shadow: none; box-shadow: none; } .table-row-expanding > tbody > tr > td.expands a:focus { -webkit-box-shadow: inset 0 0 2px 1px #FFFFFF, inset 0 0 0 2px #00A4FD; box-shadow: inset 0 0 2px 1px #FFFFFF, inset 0 0 0 2px #00A4FD; } .table-row-expanding > tbody > tr > td > .btn-combo { margin: -4px 5px -6px 20px; } .table-row-expanding > tbody > tr > td > .btn-combo:first-child { margin-left: 0; } .table-row-expanding > tbody > tr > td.title > a, .table-row-expanding > tbody > tr > td.title > span { margin: -6px -12px; padding: 6px 12px; display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 14px; line-height: 20px; } .table-row-expanding > tbody > tr > td.title > a:focus, .table-row-expanding > tbody > tr > td.title > span:focus { -webkit-box-shadow: none; box-shadow: none; border-collapse: separate; /* Fix IE9 Issue with box-shadow */ outline: 0; text-decoration: none; } .table-row-expanding > tbody > tr > td.title > a:focus:active:not([disabled]), .table-row-expanding > tbody > tr > td.title > span:focus:active:not([disabled]) { -webkit-box-shadow: none; box-shadow: none; } .table-row-expanding > tbody > tr > td.title > a:focus, .table-row-expanding > tbody > tr > td.title > span:focus { -webkit-box-shadow: inset 0 0 2px 1px #FFFFFF, inset 0 0 0 2px #00A4FD; box-shadow: inset 0 0 2px 1px #FFFFFF, inset 0 0 0 2px #00A4FD; } .table-row-expanding > tbody > tr > td.title > .disabled { color: #5C6773; } .table-row-expanding > tbody > tr > td:focus { -webkit-box-shadow: none; box-shadow: none; border-collapse: separate; /* Fix IE9 Issue with box-shadow */ outline: 0; text-decoration: none; } .table-row-expanding > tbody > tr > td:focus:active:not([disabled]) { -webkit-box-shadow: none; box-shadow: none; } .table-row-expanding > tbody > tr > td:focus { -webkit-box-shadow: inset 0 0 2px 1px #FFFFFF, inset 0 0 0 2px #00A4FD; box-shadow: inset 0 0 2px 1px #FFFFFF, inset 0 0 0 2px #00A4FD; } /* TODO unify these class names */ .table-row-expanding > tbody > tr.more-info, .table-row-expanding > tbody > tr.info-row > td { border-top: none; background-color: #3C444D; } /* style for an extra row inserted in the expanded state */ .table-row-expanding > tbody > tr.expanded > td { background-color: #3C444D; } .table-row-expanding > tbody > tr.expanded > td.title > a { white-space: normal; } .table-row-expanding th.col-info { width: 15px; padding-left: 10px; padding-right: 10px; text-align: center; vertical-align: top; font-size: 100%; border-right: 1px solid #32414C; } .table-row-expanding th.col-info a { text-decoration: none; color: #000000; -webkit-box-shadow: none; box-shadow: none; } .table-row-expanding th.col-info .icon-info { width: 15px; display: block; } .table-row-expanding td.expands:hover:not(.disabled), .table-row-expanding td.col-info:hover:not(.disabled) { border-right: 1px solid #32414C !important; } .table-row-expanding td.expands:hover:not(.disabled) a > i, .table-row-expanding td.col-info:hover:not(.disabled) a > i { color: #00A4FD; } .table-row-expanding td.expands.disabled:hover, .table-row-expanding td.col-info.disabled:hover { background-color: inherit !important; } .table-row-expanding td.expands .icon-triangle-right-small:before { content: "\203A"; } .table-row-expanding td.expands .icon-triangle-down-small:before { content: "\2C5"; } /* remove sorting icons for info column */ .table-chrome .sorts th.col-info:after { content: ""; } .table-padded { padding: 0 20px; } /*************************************************************************************************/ /* SPECIAL COLUMNS AND CELLS */ /* Custom styles for row numbers */ /*************************************************************************************************/ td.row-number, th.row-number { width: 1px; } td.row-number, td.line-num { text-align: right; color: #6b7785; } /* custom styles for numeric value cells */ th.numeric, td.numeric { text-align: right } td.end-group { border-right: 1px solid #32414C; } /*************************************************************************************************/ /* DOCKING AND STATIC TABLE HEADERS */ /* Class for docking table header and scroll bar */ /*************************************************************************************************/ .header-table-docked { position: fixed; top: 0; z-index: 405; overflow: hidden; -webkit-box-shadow: 0 2px 4px #C3CBD4; box-shadow: 0 2px 4px #C3CBD4; background: #FFFFFF; } .header-table-docked > .disable { display: block; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background-color: #5C6773; opacity: 0.30; } .header-table-docked > table { table-layout: fixed; margin-bottom: 0; /* SPL-71945, this prevents the last header cell from appearing un-styled in Firefox and IE */ max-width: inherit; } .main-section > .header-table-docked, .table-padded > .header-table-docked { width: calc(100% - 40px); margin-left: 20px !important; } .table-scroll-bar-docked { position: fixed; bottom: 0; left: 0; right: 0; overflow-x: auto; } /* class for static table header and scroll bar */ .header-table-static { height: 0; position: relative; z-index: 405; } .header-table-static > table { margin-bottom: 0; } .header-table-wrapper { overflow: hidden; border-bottom: 1px solid transparent; } .header-table-wrapper .table { margin-bottom: 0; } /* need to clean up these two classes to make sense */ .scroll-table-wrapper { /* used on dashboards and embedded tables, the wrapper scrolls horz and vert */ height: 380px; /* override */ width: 100%; overflow: auto; } .scrolling-table-wrapper { /* tables that will scroll horizontally */ width: 100%; overflow-x: auto; position: relative; } /* tables that will scroll vertically, up to consumer to set height or max-height */ .vertical-scrolling-table-wrapper { width: 100%; overflow-y: auto; } /*************************************************************************************************/ /* MODALIZING ROWS */ /*************************************************************************************************/ .modalize-table-top, .modalize-table-bottom, .modalize-table-overlay { position: absolute; left: 0; background-color: #5C6773; opacity: 0.30; } .modalize-table-top { top: 0; } .modalize-table-bottom { bottom: 0; } .modalize-table-overlay { position: fixed; top: 0; bottom: 0; right: 0; } /*************************************************************************************************/ /* DRILLDOWN */ /*************************************************************************************************/ .table-drilldown > tbody > tr > td { color: #00A4FD; } .table-drilldown > tbody > tr > td:hover { color: #006EAA; } /* reset for row # */ .table-drilldown > tbody > tr > td.row-number { color: #6b7785; } .table-drilldown-row > tbody > tr:hover > td { color: #006EAA; } /* reset for row # */ .table-drilldown-row > tbody > tr:hover > td.row-number { color: #6b7785; } .table-drilldown-cell > tbody > tr > td:hover .multivalue-subcell { color: #00A4FD; } .table-drilldown-cell > tbody > tr > td:hover .multivalue-subcell:hover { color: #006EAA; } /*************************************************************************************************/ /* MISC */ /*************************************************************************************************/ /* misc hacks that should probably never been added */ .ui-grid-head-table, .ui-grid-body-table { margin-bottom: 0; } /* table-scroll? */ .table-scroll tbody { max-height: 200px; overflow-y: scroll; } /* just the row borders */ .table-border-row { border-top: 1px solid transparent; } .table-border-row th, .table-border-row td { border-top: 1px solid transparent; } /* fixed width tables */ .table-fixed { table-layout: fixed; } .table-fixed tr > td:first-child { max-width: 300px; word-break: break-all; } /* remove the sorting icons for the row number column */ .table-chrome .sorts th.row-number:after { content: ""; } /* Print */ /* -------------------------------------------------- */ @media print { body table { max-width: 100% !important; width: 100% !important; overflow: hidden !important; table-layout: auto !important; } body .scrolling-table-wrapper, body .results-wrapper, body .results-table, body .events-viewer-wrapper { max-width: 100% !important; width: 100% !important; overflow: hidden !important; } body td, body th { background: none !important; word-break: break-all !important; word-wrap: break-word !important; overflow-wrap: break-word !important; white-space: normal !important; width: auto !important; page-break-inside:auto; } body .table-chrome .sorts:after { content: ''; } body .header-table-docked, body .table-scroll-bar-docked { display: none !important; } } body.print table { max-width: 100% !important; width: 100% !important; overflow: hidden !important; table-layout: auto !important; } body.print .scrolling-table-wrapper, body.print .results-wrapper, body.print .results-table, body.print .events-viewer-wrapper { max-width: 100% !important; width: 100% !important; overflow: hidden !important; } body.print td, body.print th { background: none !important; word-break: break-all !important; word-wrap: break-word !important; overflow-wrap: break-word !important; white-space: normal !important; width: auto !important; page-break-inside:auto; } body.print .table-chrome .sorts:after { content: ''; } body.print .header-table-docked, body.print .table-scroll-bar-docked { display: none !important; } /*===============================================================================================*/ /* SPLUNK: TABLE CAPTIONS */ /* The count, filters and pagination that appear above a listing. */ /*===============================================================================================*/ .table-caption, .table-caption-inner { min-height: 42px; text-align: center; margin-bottom: 5px; } .table-caption-inner.affix-top { left: 0; top: 0; right: 0; background-color: #F2F4F5; z-index: 405; position: fixed; } .table-caption h3, .table-caption span.shared-collectioncount { font-size: 14px; font-weight: normal; float: left; padding-left: 20px; line-height: 42px; margin: 0; min-width: 140px; text-align: left; } .table-caption .shared-waitspinner { float: left; width: 14px; height: 14px; margin: 12px 5px 2px 0; } .table-caption form.shared-tablecaption-input { display: inline-block; margin: 5px 0; } .table-caption form.shared-tablecaption-input input { width: 250px; } .table-caption .btn-group { display: inline-block; margin-right: 10px; } .table-caption .pagination { min-width: 150px; margin: 5px 20px 0 20px; } /*************************************************************************************************/ /* FILTER FORMS */ /*************************************************************************************************/ .shared-tablecaption-input { position: relative; } .table-caption div.shared-controls-controlgroup { display: inline-block; margin: 0px 10px 0px 0; } .table-caption .pagination { min-width: 150px; margin: 5px 20px 0 20px; } /*===============================================================================================*/ /* SPLUNK: STANDARD TOUR */ /*===============================================================================================*/ .tourbar { background-color: #171D21; min-height: 46px; position: relative; } .tourbar .info-container { margin: 0px 200px; padding: 10px; background-color: #3C444D; min-height: 26px; } .tourbar .info-container .info { font-size: 14px; color: #E1E6EB; } .tourbar .btn { background: transparent; -webkit-filter: none; filter: none; border-color: #000000; color: #E1E6EB; text-shadow: none; -webkit-box-shadow: none; box-shadow: none; top: 50%; margin-top: -13px; position: absolute; } .tourbar .btn.next { right: 158px; } .tourbar .btn.previous { left: 158px; } .tourbar .btn.close-btn { right: 10px; } .tourbar .close-container { float: right; margin: 10px 25px 10px 25px; } .tourbar .next-container { float: right; margin: 10px 0px 10px 25px; } .tourbar .previous-container { float: left; margin: 10px 25px; } .tour-highlight { position: relative; } .tour-highlight::after { content: ""; position: absolute; right: -20px; top: -20px; height: 30px; width: 30px; z-index: 99999; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjIwcHgiIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAwIDIwIDIwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnNrZXRjaD0iaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoL25zIj4KICAgIDx0aXRsZT5VbnRpdGxlZCAyPC90aXRsZT4KICAgIDxkZXNjcmlwdGlvbj5DcmVhdGVkIHdpdGggU2tldGNoIChodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gpPC9kZXNjcmlwdGlvbj4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHNrZXRjaDp0eXBlPSJNU1BhZ2UiPgogICAgICAgIDxwYXRoIGQ9Ik02LjcxNDQ2NjA5LDYuNzE0NDY2MDkgTDAsMCBMMCwyMCBMMjAsMjAgTDEzLjc4NTUzMzksMTMuNzg1NTMzOSBMMjAuMDQ1OTQxNSw3LjUyNTEyNjI3IEwxMi45NzQ4NzM3LDAuNDU0MDU4NDU0IEw2LjcxNDQ2NjA5LDYuNzE0NDY2MDkgWiIgaWQ9IlRyaWFuZ2xlLTEiIGZpbGw9IiNEODVEM0MiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4KICAgIDwvZz4KPC9zdmc+); background-size: 30px 30px; -webkit-animation: highlightedElementAnimation 2s infinite alternate; animation: highlightedElementAnimation 2s infinite alternate; } @-webkit-keyframes highlightedElementAnimationFrames { from { right: -20px; top: -20px; } to { right: -30px; top: -30px; } } @keyframes highlightedElementAnimationFrames { from { right: -20px; top: -20px; } to { right: -30px; top: -30px; } } /* IMAGE TOUR CAROUSEL */ .image-tour-container .carousel { width: 960px; height: 718px; background: #3C444D; margin-bottom: 0; } .image-tour-container .carousel .carousel-control { top: 52%; background: none; border: none; color: #5CC05C; opacity: 1; left: 45px; font-size: 48px; z-index: 60; } .image-tour-container .carousel .carousel-control polygon { fill: #5CC05C; } .image-tour-container .carousel .carousel-control:hover polygon{ fill: #7ECD7E; } .image-tour-container .carousel .carousel-control.disabled { display: none; } .image-tour-container .carousel .carousel-control:focus { -webkit-box-shadow: none; box-shadow: none; } .image-tour-container .carousel .carousel-control.right { right: 45px; left: auto; } .image-tour-container .carousel .carousel-indicators { bottom: 18px; top: inherit; right: 50%; -webkit-transform: translate(50%, 0); transform: translate(50%, 0); z-index: 60; } .image-tour-container .carousel .carousel-indicators li { height: 6px; width: 6px; cursor: pointer; background: #818D99; border: none; margin-left: 10px; margin-bottom: 0px; } .image-tour-container .carousel .carousel-indicators li.active { background-color: #5CC05C; } .image-tour-container .carousel .carousel-indicators li:first-child { margin-left: 0; } .image-tour-container .carousel .item { width: 960px; height: 716px; } .image-tour-container .carousel .item img { width:100%; } .image-tour-container .carousel .item.active img:hover { cursor: pointer; } .image-tour-container .carousel .help-link { position: absolute; width: 150px; height: 30px; top: 122px; left: 563px; } .image-tour-container .carousel a#splunk-answers { top: 160px; left: 504px; width: 140px; } .image-tour-container .tour-links { position: absolute; top: 15px; right: 5px; padding: 5px; text-align: right; z-index: 50; font-size: 12px; } .image-tour-container .tour-links a { color: #FFFFFF; margin-left: 15px; } .image-tour-container .tour-links a:hover { text-decoration: underline; } .image-tour-container .welcome-slide { position: absolute; top: 0; left: 0; z-index: 100; } .image-tour-container .tour-btn { background: rgba(0, 0, 0, 0.3); position: absolute; top: 300px; left: 50%; padding: 30px 40px; font-size: 30px; color: #FFFFFF; cursor: pointer; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } .image-tour-container .start-tour, .image-tour-container .exit-tour { color: #5CC05C; } .image-tour-container .tour-gutter { background: rgba(60, 68, 77, 0.9); height: 132px; width: 962px; font-size: 16px; color: #FFFFFF; position: absolute; bottom: 0px; z-index: 50; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } .image-tour-container .tour-gutter div.gutter-text { -webkit-transform: translate(0, -50%); transform: translate(0, -50%); margin: 0 auto; position: relative; top: 50%; line-height: 150%; width: 720px; text-align: center; } .image-tour-container .tour-gutter a { color: #FFFFFF; text-decoration: underline; } .image-tour-container .carousel-assets { position: absolute; height: 132px; width: 960px; bottom: 0; } .image-tour-container .next-tour, .image-tour-container .try-it-now { display: none; } .image-tour-container .try-it-now { position: absolute; right: 30px; z-index: 500; bottom: 50px; } @media only screen and (max-height: 750px) { .image-tour-container .carousel-assets, .image-tour-container .tour-gutter { position: fixed; } .image-tour-container .carousel-assets { bottom: -132px; z-index: 60; } .image-tour-container .carousel-assets .carousel-control { top: inherit; bottom: 175px; } .image-tour-container .carousel-assets .carousel-indicators { bottom: 150px; } .image-tour-container .carousel-assets .tour-links { top: inherit; bottom: 220px; } .image-tour-container .carousel-assets .try-it-now { top: inherit; bottom: 180px; } } /* IMAGE TOUR MODAL */ .image-tour .tour-modal { width: 960px; margin-left: -480px; height: 716px; background: #3C444D; z-index: 1061; } .image-tour .tour-modal.fade.in { top: 15px; } .modal-backdrop.tour-backdrop.fade { background: #3C444D; z-index: 1060; } .modal-backdrop.tour-backdrop.fade.in { opacity: 1; background: #3C444D; } .shared-tour-producttours.modal, .shared-tour-imagetour.modal, .shard-interactivetour.modal { background-clip: border-box; } .shared-tour-producttours.modal .modal-header, .shared-tour-imagetour.modal .modal-header, .shard-interactivetour.modal .modal-header { padding-bottom: 10px; } .shared-tour-producttours.modal .modal-body, .shared-tour-imagetour.modal .modal-body, .shard-interactivetour.modal .modal-body { padding: 0 10px 10px; border-top: 0; } .shared-tour-producttours.modal .modal-body:last-child, .shared-tour-imagetour.modal .modal-body:last-child, .shard-interactivetour.modal .modal-body:last-child { max-height: none; } /* INTERACTIVE TOUR */ .introjs-overlay { position: absolute; z-index: 999999; background-color: #000000; opacity: 0; background: radial-gradient(center,ellipse cover,rgba(0, 0, 0, 0.4) 0,rgba(0, 0, 0, 0.9) 100%); } .introjs-fixParent { z-index: auto !important; opacity: 1.0 !important; position: absolute !important; -webkit-transform: none !important; transform: none !important; display: block !important; } .introjs-showElement, tr.introjs-showElement > td, tr.introjs-showElement > th { z-index: 9999999 !important; } .introjs-disableInteraction { z-index: 99999999 !important; position: absolute; } a.introjs-showElement { display: inline-block !important; } .introjs-relativePosition, tr.introjs-showElement > td, tr.introjs-showElement > th { position: relative; } .introjs-helperLayer { position: absolute; z-index: 9999998; background-color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(0, 0, 0, 0.5); border-radius: 4px; -webkit-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4); box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4); } .introjs-tooltipReferenceLayer { position: absolute; z-index: 10000000; background-color: transparent; } .introjs-helperLayer *, .introjs-helperLayer *:before, .introjs-helperLayer *:after { -webkit-box-sizing: content-box; box-sizing: content-box; } .introjs-helperNumberLayer { position: absolute; top: -16px; left: -16px; z-index: 9999999999 !important; padding: 2px; font-size: 13px; font-weight: bold; color: white; text-align: center; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); background: -webkit-gradient(linear, left top, left bottom, from(#DC4E41), to(#5C6773)); background: linear-gradient(to bottom, #DC4E41 0%, #5C6773 100%); width: 20px; height:20px; line-height: 20px; border: 3px solid white; border-radius: 50%; -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); } .introjs-arrow { border: 8px solid rgba(60, 68, 77, 0.9); content:''; position: absolute; } .introjs-arrow.top { top: -15px; border-top-color:transparent; border-right-color:transparent; border-bottom-color: rgba(60, 68, 77, 0.9); border-left-color:transparent; } .introjs-arrow.top-right { top: -15px; right: 10px; border-top-color:transparent; border-right-color:transparent; border-bottom-color: rgba(60, 68, 77, 0.9); border-left-color:transparent; } .introjs-arrow.top-middle { top: -15px; left: 50%; margin-left: -5px; border-top-color:transparent; border-right-color:transparent; border-bottom-color: rgba(60, 68, 77, 0.9); border-left-color:transparent; } .introjs-arrow.right { right: -15px; top: 15px; border-top-color:transparent; border-right-color:transparent; border-bottom-color:transparent; border-left-color: rgba(60, 68, 77, 0.9); } .introjs-arrow.right-bottom { bottom:10px; right: -15px; border-top-color:transparent; border-right-color:transparent; border-bottom-color:transparent; border-left-color: rgba(60, 68, 77, 0.9); } .introjs-arrow.bottom { bottom: -15px; border-top-color: rgba(60, 68, 77, 0.9); border-right-color:transparent; border-bottom-color:transparent; border-left-color:transparent; } .introjs-arrow.left { left: -15px; top: 10px; border-top-color:transparent; border-right-color: rgba(60, 68, 77, 0.9); border-bottom-color:transparent; border-left-color:transparent; } .introjs-arrow.left-bottom { left: -15px; bottom:10px; border-top-color:transparent; border-right-color: rgba(60, 68, 77, 0.9); border-bottom-color:transparent; border-left-color:transparent; } .introjs-tooltip { position: absolute; padding: 40px 60px 10px; text-align: center; color: #FFFFFF; background-color: rgba(60, 68, 77, 0.9); min-width: 400px; max-width: 500px; border-radius: 0; -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4); box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4); } .introjs-tooltiptext a { color: #FFFFFF; text-decoration: underline; } .introjs-tooltipbuttons { text-align: right; white-space: nowrap; } .introjs-button { overflow: visible; padding: 5px; margin: 0; color: #5CC05C; fill: #5CC05C; text-decoration: none; font-size: 25px; cursor: pointer; outline: none; position: absolute; top: 50%; -webkit-transform: translate(0, -45%); transform: translate(0, -45%); } .introjs-button:hover polygon{ fill: rgb(130, 206, 130); } .introjs-button.introjs-disabled { display: none; } .introjs-button:focus { -webkit-box-shadow: none; box-shadow: none; background: none; } .introjs-tooltiplinks { position: absolute; top: 10px; right: 5px; } .introjs-skipbutton, .introjs-nexttourbutton { font-size: 12px; color: #FFFFFF; position: relative; } .introjs-skipbutton:hover, .introjs-nexttourbutton:hover { color: #FFFFFF; } .introjs-skipbutton:focus, .introjs-nexttourbutton:focus { color: #FFFFFF; } .introjs-skipbutton.done { color: #5CC05C; } .introjs-prevbutton { left: 10px; } .introjs-nextbutton { right: 10px; } .introjs-disabled, .introjs-disabled:hover, .introjs-disabled:focus { color: #818D99; -webkit-box-shadow: none; box-shadow: none; cursor: default; background-image: none; text-decoration: none; } .introjs-bullets { text-align: center; padding-top: 30px; } .introjs-bullets ul { clear: both; margin: 15px auto 0; padding: 0; display: inline-block; } .introjs-bullets ul li { list-style: none; float: left; margin: 0 5px; } .introjs-bullets ul li a { display: block; width: 6px; height: 6px; background: #C3CBD4; border-radius: 10px; text-decoration: none; } .introjs-bullets ul li a.active { background: #5CC05C; } .introjs-progress { overflow: hidden; height: 10px; margin: 10px 0 5px 0; border-radius: 4px; background-color: #E1E6EB; } .introjs-progressbar { float: left; width: 0%; height: 100%; font-size: 10px; line-height: 10px; text-align: center; background-color: #006D9C; } .introjsFloatingElement { position: absolute; height: 0; width: 0; left: 50%; top: 50%; } .introjs-tooltiptext { font-size: 16px; line-height: 24px; } /* tour links in product tours modal */ .tours-links { text-align: center; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .tours-links li { position: relative; list-style: none; margin-bottom: 20px; display: inline-block; text-align: center; } .tours-links .mask { position:absolute; top:0; bottom:0; left: 0; right: 0; opacity:0; border-radius: 3px; cursor: pointer; background-color: #5CC05C; -webkit-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } .tours-links .mask:hover { opacity:0.1; } .tours-links .svg-wrapper { height: 84px; padding: 10px; -webkit-box-sizing: border-box; box-sizing: border-box; } .tours-links .svg-wrapper svg { width: 84px; fill: #5CC05C; } .tour-link { position: relative; padding: 10px; margin: 10px; display: inline-block; color: #3C444D !important; font-weight: 500; -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; max-width: 25%; -webkit-transition: opacity 0.125s, background 0.05s; transition: opacity 0.125s, background 0.05s; } .tour-link:hover { background: rgba(195, 203, 212, 0.1); text-decoration: none; } .tour-link:focus { -webkit-box-shadow: 0 0 1px 2px #00A4FD; box-shadow: 0 0 1px 2px #00A4FD; border-collapse: separate; /* Fix IE9 Issue with box-shadow */ outline: 0; text-decoration: none; } .tour-link:focus:active:not([disabled]) { -webkit-box-shadow: none; box-shadow: none; } .tour-link i { height: 84px; padding: 32px 40px; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 76px; line-height: 60px; color: #5CC05C; } /* Components: common */ /*===============================================================================================*/ /* SPLUNK: ICONS */ /* Override bootstrap glyph icons and replace with custom font icons loosely based on */ /* [FontAwesome](http://fortawesome.github.com/Font-Awesome/) see splunk */ /* [styleguide](http://localhost:8000/static/style-guide.html) for more details */ /*===============================================================================================*/ /*----------------------------------------------*/ /* Make Icon Class: */ /* .icon-[icon name] */ /* @params: */ /* Icon Name */ /* Content */ /*----------------------------------------------*/ /*----------------------------------------------*/ /* Make Icon Class + Font Smoothing */ /*----------------------------------------------*/ /*----------------------------------------------*/ /* Make Icon Class + Margin Right */ /*----------------------------------------------*/ /*----------------------------------------------*/ /* Make Icon Class + Font Family Inherit */ /*----------------------------------------------*/ /*************************************************************************************************/ /* ICON FONT FACE */ /*************************************************************************************************/ [class^="icon-"]:before, [class*=" icon-"]:before { font-family: "Splunk Icons"; font-style: normal; font-weight: normal; text-decoration: inherit; line-height: inherit; } a [class^="icon-"], a [class*=" icon-"] { display: inline-block; text-decoration: none; line-height: inherit; } /* makes the font 33% larger relative to the icon container */ .icon-large { font-size: 1.3333333333333333em; vertical-align: middle; } /*************************************************************************************************/ /* UTILS & HELPERS */ /*************************************************************************************************/ /* utility for setting font-family */ /* TODO: is this used? or needed? */ .font-icon { font-family: "Splunk Icons"; font-size: inherit; line-height: inherit; } .icon-no-underline:first-child { padding-right: 0.3em; } .icon-no-underline:last-child { padding-left: 0.3em; } .icon-no-underline:first-child:last-child { padding-right: 0; padding-left: 0; } .icon-no-underline:before { text-decoration: none; } .padded-icon { margin-right: 0.5em; } /*image replace helper*/ .ir { position: relative; display: inline-block; min-width: 0.5em; text-indent: -9999px; outline:none; } /* vertical-align:middle; */ .ir:before { position: absolute; top: 0; left: 0; /* Firefox needs to be explicit here */ text-indent: 0; } /*************************************************************************************************/ /* FONT ICONS */ /* When possible we should use the Unicode Private Use Area (PUA) to ensure screen readers do */ /* not read off random characters that represent icons. */ /* convert this ... */ /* .icon-share:before { */ /* content: "\EC83 "; */ /* } */ /* into this */ /*
  • */ /* Search: */ /* \.(icon-[^:]+).* */ /* Replace: */ /*
  • */ /*************************************************************************************************/ /* example Check - Check */ /* Splunk logo */ .icon-splunk:before { content: "splunk"; } .icon-greater:before { content: ">"; } .icon-hunk:before { content: "\F000"; } .icon-enterprise:before { content: "\F001"; } .icon-cloud-logo:before { content: "\F002"; } .icon-splunk-light:before { content: "\F003"; } /* Shapes */ .icon-circle:before { content: "\ECD0"; } .icon-circle-filled:before { content: "\25CF"; } .icon-box-filled:before { content: "\25A0"; } .icon-triangle-up-small:before { content: "\25B4"; } .icon-triangle-right:before { content: "\25B6"; } .icon-triangle-right-small:before { content: "\25B8"; } .icon-triangle-down:before { content: "\25BC"; } .icon-triangle-down-small:before { content: "\25BE"; } .icon-triangle-left:before { content: "\25C0"; } .icon-triangle-left-small:before { content: "\25C2"; } /* Arrows & Pointers */ .icon-arrow-up:before { content: "\EC01"; } .icon-arrow-right:before { content: "\27A1"; } .icon-arrow-down:before { content: "\EC02"; } .icon-arrow-left:before { content: "\EC00"; } .icon-two-arrows-cycle:before { content: "\EC12"; } .icon-external:before { content: "\EC13"; } .icon-rotate-counter:before { content: "\21BA"; } .icon-rotate:before { content: "\21BB"; } .icon-location:before { content: "\EC80"; } .icon-chevron-left:before { content: "\2039"; } .icon-chevron-right:before { content: "\203A"; } .icon-chevron-up:before { content: "\2C4"; } .icon-chevron-down:before { content: "\2C5"; } /* Actions */ .icon-trash:before { content: "\EC66"; } .icon-share:before { content: "\27A6"; } .icon-export:before { content: "\EC68"; } .icon-print:before { content: "\EC89"; } .icon-search:before { content: "\EC9B"; } .icon-search-thin:before { content: "\ECC2"; } .icon-pivot:before { content: "\EC12"; } .icon-clone:before { content: "\ECE8"; } .icon-pause:before { content: "\EC50"; } .icon-stop:before { content: "\25A0"; } .icon-play:before { content: "\25B6"; } .icon-sort:before { content: "\2195"; } .icon-sorted-up:before { content: "\21A5"; } .icon-sorted-down:before { content: "\21A7"; } .icon-minus:before { content: "\2212"; } .icon-minus-circle:before { content: "\2296"; margin-right: 0.25em } .icon-plus:before { content: "+"; } .icon-plus-circle:before { content: "\2295"; } .icon-x:before { content: "\2717"; } .icon-x-circle:before { content: "\2297"; } .icon-close:before { content: "\2717"; } .icon-cancel:before { content: "\2717"; } .icon-collapse-left:before { content: "\ECE0"; } .icon-expand-right:before { content: "\ECE1"; } /* Concepts */ .icon-activity:before { content: "\ECAE"; } .icon-string:before { content: "a"; } .icon-number:before { content: "#"; } .icon-text:before { content: "\ECD9"; } .icon-not-allowed:before { content: "\EC9E"; } .icon-data:before { content: "\ECA4"; } .icon-data-input:before { content: "\ECA3"; } .icon-settings:before { content: "\ECA5"; } .icon-distributed-environment:before { content: "\ECA6"; } .icon-visible:before { content: "\ECC0"; } .icon-hidden:before { content: "\ECC1"; } .icon-boolean:before { content: "\ECD2"; } .icon-menu:before { content: "\EC56"; } .icon-rows:before { content: "\EC56"; } .icon-tiles:before { content: "\ECF0"; } .icon-metric:before { content: "\ECF5"; } .icon-event:before { content: "\ECF6"; } .icon-rollup:before { content: "\ECF8"; } /* Misc */ .icon-info:before { content: "i"; } .icon-info-circle:before { content: "I"; } .icon-question:before { content: "?"; font-family: inherit } .icon-question-circle:before { content: "\EC9D"; } .icon-box-unchecked:before { content: "\2610"; } .icon-box-checked:before { content: "\2611"; } .icon-check-circle:before { content: "\ECD3"; } .icon-alert-circle:before { content: "\ECD4"; } .icon-code:before { content: "\ECD7"; } .icon-code-thin:before { content: "\ECD6"; } .icon-alert:before { content: "\26A0"; } .icon-error:before { content: "\ECE2"; } .icon-warning:before { content: "\26A0"; } .icon-fullscreen:before { content: "\ECF3"; } /* Objects */ .icon-bell:before { content: "\EC9C"; } .icon-bookmark:before { content: "\ECA1"; } .icon-bulb:before { content: "\EC98"; } .icon-calendar:before { content: "\EC9A"; } .icon-check:before { content: "\2713"; } .icon-clock:before { content: "\231A"; } .icon-cloud:before { content: "\2601"; } .icon-flag:before { content: "\2691"; } .icon-gear:before { content: "\2699"; } .icon-lightning:before { content: "\2301"; } .icon-link:before { content: "\ECF1"; } .icon-lock:before { content: "\EC9F"; } .icon-lock-unlocked:before { content: "\ECA0"; } .icon-mail:before { content: "\2709"; } .icon-pencil:before { content: "\270F"; } .icon-speech-bubble:before { content: "\EC99"; } .icon-star:before { content: "\2605"; } .icon-user:before { content: "\EC84"; } .icon-clipboard:before { content: "\ECD5"; } .icon-paintbrush:before { content: "\ECCA"; } .icon-warning-sign:before { content: "\26A0"; } /* Results and Visualizations */ .icon-chart-area:before { content: "\ECA9"; } .icon-chart-bar:before { content: "\ECAA"; } .icon-chart-column:before { content: "\ECAB"; } .icon-chart-pie:before { content: "\ECAC"; } .icon-chart-scatter:before { content: "\ECAD"; } .icon-chart-bubble:before { content: "\ECB8"; } .icon-chart-line:before { content: "\ECAE"; } .icon-single-value:before { content: "\ECAF"; } .icon-gauge-radial:before { content: "\ECA2"; } .icon-gauge-marker:before { content: "\ECB0"; } .icon-gauge-filler:before { content: "\ECB1"; } .icon-choropleth-map:before { content: "\ECB9"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-external-viz:before { content: "\ECF2"; } .icon-label-rotation--90:before { content: "\ECE3"; } .icon-label-rotation--45:before { content: "\ECE4"; } .icon-label-rotation-0:before { content: "\ECE5"; } .icon-label-rotation-45:before { content: "\ECE6"; } .icon-label-rotation-90:before { content: "\ECE7"; } .icon-trellis-layout:before { content: "\F004"; } .icon-chart-area-plus-table:before { content: "\ECA9 + \ECA8"; } .icon-chart-bar-plus-table:before { content: "\ECAA + \ECA8"; } .icon-chart-column-plus-table:before { content: "\ECAB + \ECA8"; } .icon-chart-pie-plus-table:before { content: "\ECAC + \ECA8"; } .icon-chart-scatter-plus-table:before { content: "\ECAD + \ECA8"; } .icon-chart-bubble-plus-table:before { content: "\ECB8 + \ECA8"; } .icon-chart-line-plus-table:before { content: "\ECAE + \ECA8"; } .icon-single-value-plus-table:before { content: "\ECAF + \ECA8"; } .icon-gauge-radial-plus-table:before { content: "\ECA2 + \ECA8"; } .icon-gauge-marker-plus-table:before { content: "\ECB0 + \ECA8"; } .icon-gauge-filler-plus-table:before { content: "\ECB1 + \ECA8"; } .icon-location-plus-table:before { content: "\EC80 + \ECA8"; } .icon-choropleth-map-plus-table:before { content: "\ECB9 + \ECA8"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-external-viz-plus-table:before { content: "\ECF2 + \ECA8"; } /* Formatting */ .icon-list:before { content: "\ECA7"; } .icon-table:before { content: "\ECA8"; } .icon-bar-beside:before { content: "\ECB2"; } .icon-bar-stacked:before { content: "\ECB3"; } .icon-bar-stacked-100:before { content: "\ECB4"; } .icon-missing-value-skipped:before { content: "\ECB5"; } .icon-missing-value-zero:before { content: "\ECB6"; } .icon-missing-value-join:before { content: "\ECB7"; } /* Documents */ .icon-folder:before { content: "\ECE9"; } .icon-document:before { content: "\ECC3"; } .icon-report:before { content: "\ECC3"; } .icon-report-search:before { content: "\ECC4"; } .icon-report-pivot:before { content: "\ECC5"; } .icon-dashboard:before { content: "\ECC6"; } .icon-panel:before { content: "\ECC7"; } .icon-panel-search:before { content: "\ECC8"; } .icon-panel-pivot:before { content: "\ECC9"; } /*===============================================================================================*/ /* SPLUNK: POPDOWN */ /*===============================================================================================*/ /* TODO: review how this works with dropdown */ /* popdown for variable content
    content ...
    */ /* Popdown wrapper */ .popdown { position: relative } /* popdown container */ .popdown-dialog { background-color: #31373E; border: 1px solid #000000; -webkit-box-shadow: 1px 4px 5px rgba(0, 0, 0, 0.5); box-shadow: 1px 4px 5px rgba(0, 0, 0, 0.5); border-radius: 2px; top: 100%; left: 50%; margin: 8px 0 0 -103px; display: none; position: absolute; z-index: 1059; white-space: normal; } /* placement of arrow */ .popdown-dialog .arrow { position: absolute; height: 0; width: 0; border: 8px solid transparent; content: ""; display: block; border-top: 0; border-bottom-color: #000000; top: -8px; left: 50%; margin-left: -4px; } /* generated arrow */ .popdown-dialog .arrow:before { position: absolute; height: 0; width: 0; border: 8px solid transparent; content: ""; display: block; border-top: 0; border-bottom-color: #31373E; top: 1px; left: -8px; } /* prevent inheriting nowrap from btn-group */ .popdown-dialog.up { margin-top: 0; } /* placement of arrow */ .popdown-dialog.up > .arrow { position: absolute; height: 0; width: 0; border: 8px solid transparent; content: ""; display: block; border-bottom: 0; border-top-color: #000000; top: auto; bottom: -8px; } .popdown-dialog.up > .arrow:before { position: absolute; height: 0; width: 0; border: 8px solid transparent; content: ""; display: block; border-bottom: 0; border-top-color: #31373E; top: auto; bottom: 1px; } .popdown-dialog.right { /* point left */ margin-left: 5px; margin-top: 0; } /* placement of arrow */ .popdown-dialog.right .arrow { position: absolute; height: 0; width: 0; border: 8px solid transparent; content: ""; display: block; border-left: 0; border-right-color: #000000; top: 50%; left: -8px; margin: -8px 0 0 0; } .popdown-dialog.right .arrow:before { position: absolute; height: 0; width: 0; border: 8px solid transparent; content: ""; display: block; border-left: 0; border-right-color: #31373E; top: 50%; left: 1px; margin: -8px 0 0 0; } /* position of arrow when floated right */ .popdown-dialog.pull-right .arrow { left: auto; right: 8px; } /* open state */ .popdown-dialog.open { display: block; } /* SPL-68751 - IE10 box shadow animation artifacts fix */ .popdown-dialog:after { content: ""; font-size: 0; display: inline; overflow: hidden; } /* popdown body */ .popdown-dialog-body { margin: 0; border-radius: 1px; background-color: #31373E; } .popdown-dialog-body:before, .popdown-dialog-body:after { display: table; content: ""; line-height: 0; } .popdown-dialog-body:after { clear: both; } /* popdown body */ .popdown-dialog-footer { border-top: 1px solid #171D21; padding: 5px; border-bottom-left-radius: 1px; border-bottom-right-radius: 1px; } .popdown-dialog-footer:before, .popdown-dialog-footer:after { display: table; content: ""; line-height: 0; } .popdown-dialog-footer:after { clear: both; } /* variations */ /* ------------ */ /* extends popdown-dialog, adds extra padding
    content ...
    */ .popdown-dialog-padded { padding: 10px; } /*===============================================================================================*/ /* SPLUNK: DROP DOWN ARROW/CARET */ /*===============================================================================================*/ .dropup, .dropdown { position: relative; } .dropdown-toggle:active, .open .dropdown-toggle { outline: 0; } /*************************************************************************************************/ /* CARET / ARROW */ /* Icon for caret. */ /*************************************************************************************************/ /* */ .caret { display: inline-block; content: ""; border: none; width: auto; height: auto; line-height: 20px; font-size: inherit; margin: 0; padding-left: 0.3em; text-decoration: none; vertical-align: baseline; font-family: "Splunk Icons"; font-weight: normal; } /* generated font icon */ .caret:before { content: "\25BE"; font-size: inherit; text-decoration: none; } .icon-no-underline + .caret { padding-left: 0; } .caret-char { font-weight: normal; font-family: "Splunk Icons"; font-weight: normal; } .caret-char:before { content: "\25BE"; } /*************************************************************************************************/ /* DROPDOWNS */ /*************************************************************************************************/ .dropdown-menu { float: left; min-width: 160px; list-style: none; word-wrap: break-word; width: 20em; line-height: 1.33333em; padding: 0; background-clip: padding-box; } .open > .dropdown-menu { display: block; } .dropdown-menu { background-color: #31373E; border: 1px solid #000000; -webkit-box-shadow: 1px 4px 5px rgba(0, 0, 0, 0.5); box-shadow: 1px 4px 5px rgba(0, 0, 0, 0.5); border-radius: 2px; top: 100%; left: 50%; margin: 8px 0 0 -103px; display: none; position: absolute; z-index: 1059; white-space: normal; } /* placement of arrow */ .dropdown-menu .arrow { position: absolute; height: 0; width: 0; border: 8px solid transparent; content: ""; display: block; border-top: 0; border-bottom-color: #000000; top: -8px; left: 50%; margin-left: -4px; } /* generated arrow */ .dropdown-menu .arrow:before { position: absolute; height: 0; width: 0; border: 8px solid transparent; content: ""; display: block; border-top: 0; border-bottom-color: #31373E; top: 1px; left: -8px; } /* prevent inheriting nowrap from btn-group */ .dropdown-menu.up { margin-top: 0; } /* placement of arrow */ .dropdown-menu.up > .arrow { position: absolute; height: 0; width: 0; border: 8px solid transparent; content: ""; display: block; border-bottom: 0; border-top-color: #000000; top: auto; bottom: -8px; } .dropdown-menu.up > .arrow:before { position: absolute; height: 0; width: 0; border: 8px solid transparent; content: ""; display: block; border-bottom: 0; border-top-color: #31373E; top: auto; bottom: 1px; } .dropdown-menu.right { /* point left */ margin-left: 5px; margin-top: 0; } /* placement of arrow */ .dropdown-menu.right .arrow { position: absolute; height: 0; width: 0; border: 8px solid transparent; content: ""; display: block; border-left: 0; border-right-color: #000000; top: 50%; left: -8px; margin: -8px 0 0 0; } .dropdown-menu.right .arrow:before { position: absolute; height: 0; width: 0; border: 8px solid transparent; content: ""; display: block; border-left: 0; border-right-color: #31373E; top: 50%; left: 1px; margin: -8px 0 0 0; } /* position of arrow when floated right */ .dropdown-menu.pull-right .arrow { left: auto; right: 8px; } /* open state */ .dropdown-menu.open { display: block; } /* Dividers (basically an hr) within the dropdown */ .dropdown-menu .divider { height: 1px; margin: 9px 1px; /* 8px 1px */ overflow: hidden; background-color: #171D21; } /* link info style */ .dropdown-menu .info, .dropdown-menu .title { color: #6b7785; } .dropdown-menu ul li.info:not(:first-child) { border-top: 1px solid #171D21; } /* menu lists */ .dropdown-menu ul { list-style: none; margin: 0; border-radius: 1px; background-color: #31373E; /* FIXME: this should be separate from popdown */ /* in rare cases that long strings increase the container size, this will minimize the issues */ } .dropdown-menu ul:before, .dropdown-menu ul:after { display: table; content: ""; line-height: 0; } .dropdown-menu ul:after { clear: both; } .dropdown-menu ul { overflow-x: hidden; overflow-y: auto; max-width: 100%; max-height: 270px; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius:0; } /* give spacing to double lists */ .dropdown-menu ul + ul { margin-top: -1px; } .dropdown-menu ul + ul li:first-child > a, .dropdown-menu ul + ul li.title:first-child { border-top: 1px solid #171D21; } /* rounding for first and last items */ .dropdown-menu .arrow + ul, .dropdown-menu .arrow + ul > li:first-child > a { border-top-left-radius: 1px; border-top-right-radius: 1px; border-top: none; } .dropdown-menu ul:last-of-type, .dropdown-menu ul:last-of-type > li:last-of-type > a { border-bottom-left-radius: 1px; border-bottom-right-radius: 1px; } /* for selectable lists */ .dropdown-menu a .icon-check { position: absolute; left: 5px; top: 5px; color: #00A4FD; } .dropdown-menu [class^="icon-"], .dropdown-menu [class*=" icon-"] { width: 1.25em; text-align: center; } .dropdown-menu li { position: relative; } .dropdown-menu li.info { padding: 5px 10px; } .dropdown-menu li.title { text-transform: uppercase; padding: 3px 10px; } .dropdown-menu li.message { padding: 5px 10px; } .dropdown-menu li > span.field-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; word-wrap: normal; } /* link style */ .dropdown-menu li > a { display: block; clear: both; font-weight: normal; line-height: 20px; position: relative; color: #FFFFFF; padding: 5px 10px; white-space: normal; text-decoration: none; } .dropdown-menu li > a > .info { display: block; font-size: 12px; } /* focus state */ .dropdown-menu li > a:focus { -webkit-box-shadow: none; box-shadow: none; border-collapse: separate; /* Fix IE9 Issue with box-shadow */ outline: 0; text-decoration: none; } .dropdown-menu li > a:focus:active:not([disabled]) { -webkit-box-shadow: none; box-shadow: none; } .dropdown-menu li > a:focus { -webkit-box-shadow: inset 0 0 2px 1px #31373E, inset 0 0 0 2px #00A4FD; box-shadow: inset 0 0 2px 1px #31373E, inset 0 0 0 2px #00A4FD; } /* hover state */ .dropdown-menu li > a:hover { color: #FFFFFF; background: #212527; } /* items with secondary action icons */ .dropdown-menu li > a.primary-link { margin-right: 40px; border-top-right-radius: 0; border-bottom-right-radius: 0; } .dropdown-menu li > a.secondary-link { position: absolute; right: 0; top: 0; bottom: 0; width: 40px; padding-left:0; padding-right: 0; font-size: 16px; text-align: center; border-top-left-radius: 0; border-bottom-left-radius: 0; } .dropdown-menu li > a > .link-description { color: #6b7785; display: block; font-size: 0.85em; } /* disabled state */ .dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus, .dropdown-menu li > a.disabled, .dropdown-menu li > a.disabled:hover, .dropdown-menu li > a.disabled:focus { color: #5C6773; cursor: not-allowed; text-decoration: none; background-color: transparent; background-image: none; /* Remove CSS gradient */ -webkit-box-shadow: none; box-shadow: none; } /* divider style */ .dropdown-menu .divider { margin: 0; border: none; border-top: 1px solid #171D21; margin-top: 0; height: 0; } /* remove top border when there is already a divider */ .dropdown-menu .divider + li > a { border-top: none; } /* select menus with find */ .dropdown-menu .input-container .shared-findinput { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 5px; margin:0; } .dropdown-menu .input-container .search-query { width: 100%; } /* truncated dropdown text */ .dropdown-truncated li > a { /* wrapping */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /*************************************************************************************************/ /* DROPDOWN SIZES */ /*************************************************************************************************/ .dropdown-menu-narrow { width: 10em; } .dropdown-menu-medium { width: 25em; } .dropdown-menu-wide { width: 30em; } .dropdown-menu-width-auto { width: auto; max-width: 20em; } .dropdown-menu-width-auto.dropdown-menu-narrow { max-width: 10em; } .dropdown-menu-width-auto.dropdown-menu-medium { max-width: 25em; } .dropdown-menu-width-auto.dropdown-menu-wide { max-width: 30em; } /*************************************************************************************************/ /* SELECTABLE DROPDOWN */ /*************************************************************************************************/ .dropdown-menu-selectable li > a { /* BS 2.2 scoped */ padding-left: 24px; } /*************************************************************************************************/ /* BOOTSTRAP OVERRIDE */ /*************************************************************************************************/ .navbar .nav > li > .dropdown-menu:before, .navbar .nav > li > .dropdown-menu:after { display: none; } .dropdown-header { display: block; padding: 3px 20px; font-size: 12px; line-height: 1.42857143; color: #6b7785; } /*************************************************************************************************/ /* FIXED HEIGHT DROPDOWNS & POPDOWNS */ /*************************************************************************************************/ .dropdown-menu-tall ul { max-height: 20em; overflow: auto; } .dropdown-menu-short ul { max-height: 10em; overflow: auto; } /* disable scrolling */ .dropdown-menu-noscroll ul { max-height: none; } /* Allow for dropdowns to go bottom up (aka, dropup-menu) */ /* ------------------------------------------------------ */ /* Just add .dropup after the standard .dropdown class and you're set, bro. */ /* TODO: abstract this so that the navbar fixed styles are not placed here? */ /* Reverse the caret */ .dropup .caret, .navbar-fixed-bottom .dropdown .caret { border-top: 0; border-bottom: 4px solid #000000; content: ""; } /* Different positioning for bottom up menu */ .dropup .dropdown-menu, .navbar-fixed-bottom .dropdown .dropdown-menu { top: auto; bottom: 100%; margin-bottom: 1px; } /*************************************************************************************************/ /* SUBMENUS */ /*************************************************************************************************/ .dropdown-submenu { position: relative; } /* Default dropdowns */ .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; border-radius: 2px 2px 2px 2px; } .dropdown-submenu:hover > .dropdown-menu { display: block; } /* hover state of dropdown submenu */ .dropdown-submenu:hover > a, .dropdown-submenu:focus > a { text-decoration: none; color: #006EAA; background: #3C444D; } .dropdown-submenu > a { paddin-right: 20px; } /* Caret to indicate there is a submenu */ .dropdown-submenu > a:after { display: block; content: ""; position: absolute; right: 8px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: rgb(204, 204, 204); } .dropdown-submenu > ul { overflow-x: hidden; overflow-y: auto; } /* Left aligned submenus */ .dropdown-submenu.pull-left { /* Undo the float */ /* Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere. */ float: none; } /* Positioning the submenu */ .dropdown-submenu.pull-left > .dropdown-menu { left: -100%; margin-left: 10px; border-radius: 6px 0 6px 6px; } /*************************************************************************************************/ /* DROPUPS */ /*************************************************************************************************/ .dropup .dropdown-submenu > .dropdown-menu { top: auto; bottom: 0; margin-top: 0; margin-bottom: -2px; border-radius: 5px 5px 5px 0; } /*************************************************************************************************/ /* TWEAK NAV HEADERS */ /*************************************************************************************************/ /* Increase padding from 15px to 20px on sides */ .dropdown .dropdown-menu .nav-header { padding-left: 20px; padding-right: 20px; } /*************************************************************************************************/ /* TYPEAHEAD */ /*************************************************************************************************/ .typeahead { z-index: 1051; margin-top: 2px; /* give it some space to breathe */ border-radius: 3px; } /*===============================================================================================*/ /* SPLUNK: COMPONENT ANIMATIONS */ /*===============================================================================================*/ .fade { opacity: 0; -webkit-transition: opacity 0.125s; transition: opacity 0.125s; } .fade.in { opacity: 1; } .collapse { position: relative; height: 0; overflow: hidden; -webkit-transition: height 0.2s ease; transition: height 0.2s ease; } .collapse.in { height: auto; } /*===============================================================================================*/ /* SPLUNK: CLOSE ICONS */ /*===============================================================================================*/ .close { float: right; border-radius: 3px; width: 27px; height: 27px; /* hide any placeholder text */ color: transparent; font-size: 0; line-height: 0; text-align: center; -webkit-transition: background 0.2s, color 0.2s; transition: background 0.2s, color 0.2s; /* Additional properties for button version */ /* iOS requires the button element instead of an anchor tag. */ } .close:before { font-family: "Splunk Icons"; content: '\2717'; font-size: 20px; color: #FFFFFF; line-height: 28px; -webkit-transition: color 0.2s; transition: color 0.2s; } .close:hover { background-color: #3C444D; cursor: pointer; text-decoration: none; } .close:hover:before { color: #FFFFFF; } .close:focus { -webkit-box-shadow: 0 0 1px 2px #00A4FD; box-shadow: 0 0 1px 2px #00A4FD; border-collapse: separate; /* Fix IE9 Issue with box-shadow */ outline: 0; text-decoration: none; } .close:focus:active:not([disabled]) { -webkit-box-shadow: none; box-shadow: none; } .close:focus:before { color: #FFFFFF; } /* If you want the anchor version, it requires `href="#"`. */ button.close { padding: 0; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; } /* Components: Buttons & Alerts */ /*===============================================================================================*/ /* SPLUNK: BUTTONS */ /*===============================================================================================*/ /*************************************************************************************************/ /* Base Styles & Overrides */ /* Standard button class for use on a, button */ /*************************************************************************************************/ /* Button Button Button */ .btn { display: inline-block; padding: 5px 14px; height: auto; line-height: 20px; font-size: 14px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 5px 14px; margin-bottom: 0; /* For input.btn */ font-weight: 400; color: #5C6773; text-align: center; vertical-align: middle; cursor: pointer; border: 1px solid; border-radius: 3px; white-space: nowrap; background-color: #5C6773; border-color: #171D21; color: #FFFFFF; -webkit-box-shadow: inset 0px -1px 0 #3C444D; box-shadow: inset 0px -1px 0 #3C444D; text-decoration: none; text-shadow: none; -webkit-transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; -webkit-filter: none; filter: none; } /* this breaks some bootstrap styles */ .btn:hover { background-color: #3C444D; border-color: #171D21; color: #FFFFFF; -webkit-box-shadow: inset 0px -1px 0 #3C444D; box-shadow: inset 0px -1px 0 #3C444D; text-decoration: none; text-shadow: none; -webkit-transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; -webkit-filter: none; filter: none; } .btn:focus { background-color: #5C6773; border-color: #171D21; color: #FFFFFF; -webkit-box-shadow: inset 0px -1px 0 #3C444D; box-shadow: inset 0px -1px 0 #3C444D; text-decoration: none; text-shadow: none; -webkit-transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; -webkit-filter: none; filter: none; -webkit-box-shadow: 0 0 1px 2px #00A4FD; box-shadow: 0 0 1px 2px #00A4FD; border-collapse: separate; /* Fix IE9 Issue with box-shadow */ outline: 0; text-decoration: none; } .btn:focus:active:not([disabled]) { -webkit-box-shadow: none; box-shadow: none; } .btn:active, .btn.active { background-color: #2B3033; border-color: #171D21; color: #FFFFFF; -webkit-box-shadow: none; box-shadow: none; text-decoration: none; text-shadow: none; -webkit-transition: none; transition: none; -webkit-filter: none; filter: none; } .btn.disabled, .btn[disabled], .btn.disabled:hover, .btn[disabled]:hover, .btn.disabled:focus, .btn[disabled]:focus, .btn.disabled:active, .btn[disabled]:active { background-color: #3C444D; border-color: transparent; color: #5C6773; -webkit-box-shadow: inset 0px -1px 0 transparent; box-shadow: inset 0px -1px 0 transparent; text-decoration: none; text-shadow: none; -webkit-transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; -webkit-filter: none; filter: none; cursor: not-allowed; } /*************************************************************************************************/ /* PRIMARY BUTTONS */ /* Provides extra visual weight and identifies the primary action in a set of buttons. */ /*************************************************************************************************/ /* Primary Primary Primary */ .btn-primary { padding: 6px 15px; font-weight: 500; border: none; background-color: #5CC05C; border-color: transparent; color: #FFFFFF; -webkit-box-shadow: inset 0px -2px 0 rgba(0, 0, 0, 0.1); box-shadow: inset 0px -2px 0 rgba(0, 0, 0, 0.1); text-decoration: none; text-shadow: none; -webkit-transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; -webkit-filter: none; filter: none; } .btn-primary:hover { background-color: #40A540; border-color: transparent; color: #FFFFFF; -webkit-box-shadow: inset 0px -2px 0 rgba(0, 0, 0, 0.1); box-shadow: inset 0px -2px 0 rgba(0, 0, 0, 0.1); text-decoration: none; text-shadow: none; -webkit-transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; -webkit-filter: none; filter: none; } .btn-primary:focus { background-color: #5CC05C; border-color: transparent; color: #FFFFFF; -webkit-box-shadow: inset 0px -2px 0 rgba(0, 0, 0, 0.1); box-shadow: inset 0px -2px 0 rgba(0, 0, 0, 0.1); text-decoration: none; text-shadow: none; -webkit-transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; -webkit-filter: none; filter: none; -webkit-box-shadow: 0 0 1px 2px #00A4FD; box-shadow: 0 0 1px 2px #00A4FD; border-collapse: separate; /* Fix IE9 Issue with box-shadow */ outline: 0; text-decoration: none; } .btn-primary:focus:active:not([disabled]) { -webkit-box-shadow: none; box-shadow: none; } .btn-primary:active, .btn-primary.active { background-color: #389038; border-color: transparent; color: #FFFFFF; -webkit-box-shadow: none; box-shadow: none; text-decoration: none; text-shadow: none; -webkit-transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; -webkit-filter: none; filter: none; } .btn-primary.disabled, .btn-primary[disabled], .btn-primary.disabled:hover, .btn-primary[disabled]:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, .btn-primary.disabled:active, .btn-primary[disabled]:active { background-color: #9ED99E; border-color: transparent; color: #DFF2DF; -webkit-box-shadow: inset 0px -2px 0 rgba(0, 0, 0, 0.1); box-shadow: inset 0px -2px 0 rgba(0, 0, 0, 0.1); text-decoration: none; text-shadow: none; -webkit-transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; -webkit-filter: none; filter: none; cursor: not-allowed; } .btn-secondary { font-weight: 500; } .btn-secondary:hover { background-color: #3C444D; border-color: #171D21; color: #FFFFFF; -webkit-box-shadow: inset 0px -1px 0 #3C444D; box-shadow: inset 0px -1px 0 #3C444D; text-decoration: none; text-shadow: none; -webkit-transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; -webkit-filter: none; filter: none; } .btn-secondary:focus { background-color: #5C6773; border-color: #171D21; color: #FFFFFF; -webkit-box-shadow: inset 0px -1px 0 #3C444D; box-shadow: inset 0px -1px 0 #3C444D; text-decoration: none; text-shadow: none; -webkit-transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; -webkit-filter: none; filter: none; -webkit-box-shadow: 0 0 1px 2px #00A4FD; box-shadow: 0 0 1px 2px #00A4FD; border-collapse: separate; /* Fix IE9 Issue with box-shadow */ outline: 0; text-decoration: none; } .btn-secondary:focus:active:not([disabled]) { -webkit-box-shadow: none; box-shadow: none; } .btn-secondary:active, .btn-secondary.active { background-color: #2B3033; border-color: #171D21; color: #FFFFFF; -webkit-box-shadow: none; box-shadow: none; text-decoration: none; text-shadow: none; -webkit-transition: none; transition: none; -webkit-filter: none; filter: none; } .btn-secondary.disabled, .btn-secondary[disabled], .btn-secondary.disabled:hover, .btn-secondary[disabled]:hover, .btn-secondary.disabled:focus, .btn-secondary[disabled]:focus, .btn-secondary.disabled:active, .btn-secondary[disabled]:active { background-color: #3C444D; border-color: transparent; color: #5C6773; -webkit-box-shadow: inset 0px -1px 0 transparent; box-shadow: inset 0px -1px 0 transparent; text-decoration: none; text-shadow: none; -webkit-transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; -webkit-filter: none; filter: none; cursor: not-allowed; } /*************************************************************************************************/ /* Links */ /* Pager style button pill */ /* Note: this does not inherit or extend btn base styles and is meant for links only */ /*************************************************************************************************/ /* Pill Pill Pill Pill */ .btn-pill { display: inline-block; padding: 5px 14px; /* note the vertical padding will be funky unless it's block, inline-block, or floated */ line-height: 20px; border-radius: 3px; border: 1px solid transparent; background-color: none; border-color: transparent; color: #FFFFFF; -webkit-box-shadow: none; box-shadow: none; text-decoration: none; text-shadow: none; -webkit-transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; -webkit-filter: none; filter: none; } .btn-pill:hover { color: #FFFFFF; background: #3C444D; border-color: #171D21; text-decoration: none; } .btn-pill:focus { color: #FFFFFF; background: none; border-color: transparent; text-decoration: none; -webkit-box-shadow: 0 0 1px 2px #00A4FD; box-shadow: 0 0 1px 2px #00A4FD; border-collapse: separate; /* Fix IE9 Issue with box-shadow */ outline: 0; text-decoration: none; } .btn-pill:focus:active:not([disabled]) { -webkit-box-shadow: none; box-shadow: none; } .btn-pill:active, .btn-pill.active { color: #FFFFFF; background: #2B3033; border-color: transparent; text-decoration: none; } .btn-pill.disabled, .btn-pill[disabled], .btn-pill.disabled:hover, .btn-pill[disabled]:hover, .btn-pill.disabled:focus, .btn-pill[disabled]:focus, .btn-pill.disabled:active, .btn-pill[disabled]:active { color: #5C6773; background: none; border-color: transparent; text-decoration: none; -webkit-box-shadow: none; box-shadow: none; cursor: not-allowed; } /*************************************************************************************************/ /* LINK BUTTONS */ /* Make a button look and behave like a link. */ /*************************************************************************************************/ .btn-link { background-color: transparent; border-color: transparent; color: #00A4FD; -webkit-box-shadow: none; box-shadow: none; text-decoration: none; text-shadow: none; -webkit-transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; -webkit-filter: none; filter: none; } .btn-link:hover { color: #006EAA; text-decoration: underline; } .btn-link:focus { color: #00A4FD; text-decoration: none; -webkit-box-shadow: 0 0 1px 2px #00A4FD; box-shadow: 0 0 1px 2px #00A4FD; border-collapse: separate; /* Fix IE9 Issue with box-shadow */ outline: 0; text-decoration: none; } .btn-link:focus:active:not([disabled]) { -webkit-box-shadow: none; box-shadow: none; } .btn-link:active, .btn-link.active { color: #00A4FD; text-decoration: none; } .btn-link.disabled, .btn-link[disabled], .btn-link.disabled:hover, .btn-link[disabled]:hover, .btn-link.disabled:focus, .btn-link[disabled]:focus, .btn-link.disabled:active, .btn-link[disabled]:active { color: #6b7785; text-decoration: none; cursor: not-allowed; } /*************************************************************************************************/ /* BLOCK BUTTON */ /*************************************************************************************************/ .btn-block { display: block; width: 100%; padding-left: 0; padding-right: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } /* Vertically space out multiple block buttons */ .btn-block + .btn-block { margin-top: 5px; } /* Specificity overrides */ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="button"].btn-block { width: 100%; } /*************************************************************************************************/ /* DRAGGABLE BUTTON */ /*************************************************************************************************/ /* Draggable
    Combo
    */ .btn-draggable { cursor: move; width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -webkit-box-sizing: border-box; box-sizing: border-box; } /* generated handle */ .btn-draggable:before, .btn-draggable .before { content: ""; float: left; margin-left: -8px; height: 18px; width: 6px; background: url(data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20width%3D%224px%22%20height%3D%224px%22%20viewBox%3D%220%200%204%204%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Crect%20fill%3D%22%23818D99%22%20width%3D%222%22%20height%3D%222%22/%3E%0A%3C/svg%3E); cursor: move; } /* sizes */ .btn-draggable.btn-small:before{ height: 14px; } .btn-draggable.btn-mini:before{ height: 12px; } /*************************************************************************************************/ /* BUTTON SIZES */ /*************************************************************************************************/ /* Large */ .btn-large { padding: 8px 28px; } .btn-large [class^="icon-"], .btn-large [class*=" icon-"] { margin-top: 4px; } .btn-large.btn-primary { padding: 9px 29px; } /* Small */ .btn-small { padding: 3px 14px; } .btn-small [class^="icon-"], .btn-small [class*=" icon-"] { margin-top: 0px; } .btn-small.btn-primary { padding: 4px 15px; } /* Mini */ .btn-mini { padding: 0px 7px; } .btn-mini [class^="icon-"], .btn-mini [class*=" icon-"] { margin-top: -1px; } .btn-mini.btn-primary { padding: 1px 8px; } .btn-mini, .btn-group > .btn-mini { font-size: 12px; font-weight: 500; line-height: 18px; } /* Square Button */ .btn-square { padding: 6px 0; height: 32px; width: 32px; text-align: center; -webkit-box-sizing: border-box; box-sizing: border-box; } /*************************************************************************************************/ /* PRINT */ /*************************************************************************************************/ @media print { .btn { background: none !important; border: none !important; padding: 0 !important; color: #FFFFFF !important; text-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; } .caret { display: none !important; } } /*===============================================================================================*/ /* SPLUNK: BUTTON GROUPS */ /* BTN-GROUP handles rounding & spacing on btns & btn-combo. */ /* BTN-COMBO handles rounding on dropdowns & splits only, behaves like group but without */ /* grouping or spacing. */ /*===============================================================================================*/ /* button combos, grouping and toolbar
    */ /* Make the div behave like a button */ .btn-group, .btn-combo { position: relative; display: inline-block; font-size: 0; /* remove as part 1 of font-size inline-block hack */ white-space: nowrap; /* prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page) */ vertical-align: middle; /* match .btn alignment given font-size hack above */ } /* Space out series of button groups */ .btn-group + .btn-group, .btn-combo + .btn-combo { margin-left: 10px; } /* Float them, remove border radius, then re-add to first and last elements */ .btn-group > .btn, .btn-group > .btn-combo > .btn { position: relative; border-radius: 0; } /* reset margin when in a group */ .btn-group > .btn + .btn, .btn-group > .btn + .btn-combo, .btn-group > .btn-combo + .btn-combo, .btn-group > .btn-combo + .btn { margin-left: -1px; } /* Redeclare as part 2 of font-size inline-block hack */ .btn-group > .btn, .btn-group > .btn-large, .btn-group > .btn-small, .btn-group > .dropdown-menu, .btn-group > .popover, .btn-group .btn-pill, .btn-group .popdown-dialog, .btn-group .dropdown-toggle, .btn-group ul { font-size: 14px; } .btn-group > .btn-mini { font-size: 12px; /* Reset font for mini size */ } /* Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match */ .btn-group > .btn:first-child, .btn-group > .btn-combo:first-child > .btn:first-child, .btn-group > .btn-combo:first-child > .drodown-toggle, .btn-group > .btn-combo:first-child > .btn:first-child { margin-left: 0; border-top-left-radius: 3px; border-bottom-left-radius: 3px; } /* Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it */ .btn-group > .btn:last-child, .btn-group > .dropdown-toggle, .btn-group > .btn-combo:last-child > .btn:last-child, .btn-group > .btn-combo:last-child > .dropdown-toggle { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } /* Reset corners for large buttons */ .btn-group > .btn.large:first-child, .btn-group > .btn-combo:first-child > .btn.large:first-child { margin-left: 0; border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .btn-group > .btn.large:last-child, .btn-group > .large.dropdown-toggle, .btn-group > .btn-combo:last-child > .btn.large:last-child, .btn-group > .btn-combo:last-child > .large.dropdown-toggle { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } /* On hover/active, bring the proper btn to front */ .btn-group > .btn:hover, .btn-group > .btn:active, .btn-group > .btn.active, .btn-group > .btn-combo > .btn:hover, .btn-group > .btn-combo > .btn:active, .btn-group > .btn-combo > .btn.active { z-index: 2; } /* On focus, bring the btn to front */ .btn-group > .btn:focus, .btn-group > .btn-combo > .btn:focus { z-index: 3; } /* On active and open, don't show outline */ .btn-group .dropdown-toggle:active, .btn-group.open .dropdown-toggle { outline: 0; } /*************************************************************************************************/ /* BUTTON COMBO */ /*************************************************************************************************/ /* special case for btn-combo */ .btn-combo > .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .btn-combo > .btn:last-child, .btn-combo > .dropdown-toggle { border-top-left-radius: 0; border-bottom-left-radius: 0; } /* reset margin when in a group */ .btn-combo > .btn + .btn { margin-left: -1px; } /* Redeclare as part 2 of font-size inline-block hack */ .btn-combo > .btn, .btn-combo > .btn-large, .btn-combo > .btn-small, .btn-combo > .dropdown-menu, .btn-combo .btn-pill, .btn-combo .popdown-dialog, .btn-combo .dropdown-toggle, .btn-combo ul { font-size: 14px; } .btn-combo > .btn-mini { font-size: 12px; /* Reset font for mini size */ } /* Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match */ .btn-combo:first-child > .btn:first-child { margin-left: 0; border-top-left-radius: 3px; border-bottom-left-radius: 3px; } /* Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it */ .btn-combo > .dropdown-toggle { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } /*************************************************************************************************/ /* BUTTON TOOLBAR */ /* Optional: Group multiple button groups together for a toolbar. */ /*************************************************************************************************/ .btn-toolbar { font-size: 0; /* Hack to remove whitespace that results from using inline-block */ margin-top: 10px; margin-bottom: 10px; } .btn-toolbar .btn-combo { display: inline-block; /* display inline for toolbar */ } .btn-toolbar > .btn + .btn, .btn-toolbar > .btn-group + .btn, .btn-toolbar > .btn + .btn-group, .btn-toolbar > .btn-combo + .btn, .btn-toolbar > .btn + .btn-combo { margin-left: 5px; } /*************************************************************************************************/ /* SPLIT BUTTON DROPDOWNS */ /*************************************************************************************************/ /* Give the line between buttons some depth */ .btn-group > .btn-combo > .btn + .dropdown-toggle, .btn-combo > .btn + .dropdown-toggle { padding-left: 8px; padding-right: 8px; -webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); } .btn-group > .btn-mini + .dropdown-toggle, .btn-group > .btn-combo > .btn-mini + .dropdown-toggle { padding-left: 5px; padding-right: 5px; } .btn-group > .btn-large + .dropdown-toggle, .btn-group > .btn-combo > .btn-large + .dropdown-toggle { padding-left: 12px; padding-right: 12px; } /* Remove the gradient and set the same inset shadow as the :active state */ .btn-group.open .dropdown-toggle { background-image: none; -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); } /* Keep the hover's background when dropdown is open */ .btn-group.open .btn.dropdown-toggle { background-color: #3C444D; } /* The clickable button for toggling the menu */ .btn-group.open .btn-primary.dropdown-toggle { background-color: #40A540; } .btn-group.open .btn-danger.dropdown-toggle { background-color: #EA958D; } .btn-group.open .btn-success.dropdown-toggle { background-color: #40A540; } /* Prevent Tooltip from spacing two buttons */ .btn-group > .btn + div.tooltip + .btn { margin-left: -1px; } /*************************************************************************************************/ /* VERTICAL BUTTON GROUPS */ /*************************************************************************************************/ .btn-group-vertical { display: inline-block; } /* makes buttons only take up the width they need */ .btn-group-vertical > .btn { display: block; float: none; max-width: 100%; border-radius: 0; } .btn-group-vertical > .btn + .btn { margin-left: 0; margin-top: -1px; } .btn-group-vertical:first-child { border-radius: 3px 3px 0 0; } .btn-group-vertical:last-child { border-radius: 0 0 3px 3px; } .btn-group-vertical > .btn-large:first-child { border-radius: 3px 3px 0 0; } .btn-group-vertical > .btn-large:last-child { border-radius: 0 0 3px 3px; } /*************************************************************************************************/ /* RADIO BUTTON GROUP */ /*************************************************************************************************/ .btn-group-radio > .btn { text-overflow: ellipsis; overflow: hidden; border-color: #171D21; } .btn-group-radio > .btn:hover { background-color: #3C444D; -webkit-box-shadow: inset 0px -1px 0 #31373E; box-shadow: inset 0px -1px 0 #31373E; } .btn-group-radio > .btn.active { cursor: default; background-color: #2B3033; -webkit-box-shadow: inset 0px 1px 0 #000000; box-shadow: inset 0px 1px 0 #000000; border-color: #171D21; } .btn-group-radio > .btn.active:focus { cursor: default; -webkit-box-shadow: 0 0 1px 2px #00A4FD; box-shadow: 0 0 1px 2px #00A4FD; border-collapse: separate; /* Fix IE9 Issue with box-shadow */ outline: 0; text-decoration: none; } .btn-group-radio > .btn.active:focus:active:not([disabled]) { -webkit-box-shadow: none; box-shadow: none; } .btn-group-radio > .btn.active[disabled] { cursor: not-allowed; background-color: #2B3033; -webkit-box-shadow: inset 0px 1px 0 #000000; box-shadow: inset 0px 1px 0 #000000; border-color: #171D21; } .btn-group-radio > .btn:disabled { -webkit-box-shadow: none; box-shadow: none; border-color: transparent; background-color: #3C444D; } /* For synthetic radio with the "locale-responsive-layout" class, align the items vertically to accommodate long words (SPL-83062). */ body.locale-de .btn-group-radio.locale-responsive-layout { display: block; } body.locale-de .btn-group-radio.locale-responsive-layout .btn { border-radius: 0; display: block; width: 100%; margin-left: 0; border-bottom-width: 0; } body.locale-de .btn-group-radio.locale-responsive-layout .btn:first-child { border-radius: 3px 3px 0 0; } body.locale-de .btn-group-radio.locale-responsive-layout .btn:last-child { border-radius: 0 0 3px 3px; border-bottom-width: 1px; } /*===============================================================================================*/ /* SPLUNK: ALERTS */ /*===============================================================================================*/ /*************************************************************************************************/ /* ALERTS CONTAINER */ /*************************************************************************************************/ .alerts:not(.alerts-view) { max-height: 500px; overflow-y: auto; } /*************************************************************************************************/ /* BASE STYLES */ /*************************************************************************************************/ .alert { margin-bottom: 20px; border-radius: 3px; position: relative; padding: 8px 35px 8px 27px; word-wrap: break-word; color: #FFFFFF; } .alert .icon-alert { font-size: 200%; position: absolute; left: 0px; top: 8px; } .alert h4 { color: inherit; margin: 0; } .alert .close { position: relative; top: -2px; right: -21px; line-height: 20px; } .alert-inline { display: inline-block; border: 0; margin-bottom: 0; } /*************************************************************************************************/ /* ALERTS LEVELS */ /*************************************************************************************************/ .alert-warning .icon-alert { color: #F8BE34; } .alert-info .icon-alert { color: #006D9C; } .alert-info .icon-alert:before { content: 'I'; } .alert-success .icon-alert { color: #53A051; } .alert-success .icon-alert:before { content: 'I'; } .alert-404, .alert-error .icon-alert { color: #DC4E41; } .alert-404:before, .alert-error .icon-alert:before { content: '\ECE2'; } /* Components: Nav */ /*===============================================================================================*/ /* SPLUNK: NAVS */ /* Navigation styles and components. */ /*===============================================================================================*/ /*************************************************************************************************/ /* BASE CLASS */ /*************************************************************************************************/ .nav { margin-left: 0; margin-bottom: 0; list-style: none; } .nav > li > a { display: block; } .nav > li > a:hover, .nav > li > a:focus { text-decoration: none; } /* Redeclare pull classes because of specifity */ .nav > .pull-right { float: right; } /* Nav headers (for dropdowns and lists) */ .nav-header { display: block; padding: 3px 15px; font-size: 12px; font-weight: bold; line-height: 20px; color: #818D99; text-shadow: 0 1px 0 rgba(255,255,255,.5); text-transform: uppercase; } /* Space them out when they follow another list item (link) */ .nav li + .nav-header { margin-top: 9px; } /*************************************************************************************************/ /* NAV LIST */ /*************************************************************************************************/ .nav-list { padding-left: 15px; padding-right: 15px; margin-bottom: 0; } .nav-list > li > a, .nav-list .nav-header { margin-left: -15px; margin-right: -15px; text-shadow: 0 1px 0 rgba(255,255,255,.5); } .nav-list > li > a { padding: 3px 15px; } .nav-list > .active > a, .nav-list > .active > a:hover, .nav-list > .active > a:focus { color: #FFFFFF; text-shadow: 0 -1px 0 rgba(0,0,0,.2); background-color: #00A4FD; } .nav-list [class^="icon-"], .nav-list [class*=" icon-"] { margin-right: 2px; } /* Dividers (basically an hr) within the dropdown */ .nav-list .divider { height: 1px; margin: 9px 1px; /* 8px 1px */ overflow: hidden; background-color: #171D21; } /*************************************************************************************************/ /* TABS & PILLS */ /*************************************************************************************************/ .nav-tabs:before, .nav-tabs:after, .nav-pills:before, .nav-pills:after { display: table; content: ""; line-height: 0; } .nav-tabs:after, .nav-pills:after { clear: both; } .nav-tabs > li, .nav-pills > li { float: left; } .nav-tabs > li > a, .nav-pills > li > a { padding-right: 15px; padding-left: 15px; margin-right: 2px; line-height: 14px; /* keeps the overall height an even number */ } /*************************************************************************************************/ /* TABS */ /* Splunk style tabs. */ /* extends: nav */ /* overrides: bootstrap default nav-tabs */ /*************************************************************************************************/ /* */ .nav-tabs { padding: 0 5px; height: 38px; background-color: #FFFFFF; border-bottom: 1px solid #2B3033; } .nav-tabs > li { position: relative; } .nav-tabs > li > a { line-height: 34px; padding: 2px 15px; color: #5C6773; } .nav-tabs > li > a:before { content: ''; position: absolute; width: calc(100% - 30px); height: 0; bottom: 0; left: 14px; background-color: #E1E6EB; -webkit-transition: height 0.2s; transition: height 0.2s; } .nav-tabs > li > a:hover { background: transparent; } .nav-tabs > li > a:focus { -webkit-box-shadow: none; box-shadow: none; border-collapse: separate; /* Fix IE9 Issue with box-shadow */ outline: 0; text-decoration: none; } .nav-tabs > li > a:focus:active:not([disabled]) { -webkit-box-shadow: none; box-shadow: none; } .nav-tabs > li > a:focus { -webkit-box-shadow: inset 0 0 2px 1px #FFFFFF, inset 0 0 0 2px #00A4FD; box-shadow: inset 0 0 2px 1px #FFFFFF, inset 0 0 0 2px #00A4FD; background-color: transparent; border-radius: 3px; } .nav-tabs > li:not(.active):hover > a:before { height: 3px; } .nav-tabs > li.active > a:before { height: 3px; background-color: #007ABD; } .nav-tabs > li.active, .nav-tabs > li > a.active { -webkit-box-shadow: none !important; box-shadow: none !important; border-radius: 0 !important; font-weight: 500; color: #FFFFFF; } /*************************************************************************************************/ /* PILLS */ /*************************************************************************************************/ /* Links rendered as pills */ .nav-pills > li > a { padding-top: 8px; padding-bottom: 8px; margin-top: 2px; margin-bottom: 2px; border-radius: 5px; } /* Active State */ .nav-pills > .active > a, .nav-pills > .active > a:hover, .nav-pills > .active > a:focus { color: #FFFFFF; background-color: #00A4FD; } /*************************************************************************************************/ /* STACKED NAV */ /*************************************************************************************************/ /* Stacked tabs and pills */ .nav-stacked > li { float: none; } .nav-stacked > li > a { margin-right: 0; /* no need for the gap between nav items */ } /* Tabs */ .nav-stacked > li.nav-tabs { border-bottom: 0; } .nav-stacked > li.nav-tabs > li > a { border: 1px solid #171D21; border-radius: 0; } .nav-stacked > li.nav-tabs > li > a:hover, .nav-stacked > li.nav-tabs > li > a:focus { border-color: #171D21; z-index: 2; } .nav-stacked > li.nav-tabs > li:first-child > a { border-top-right-radius: 3px; border-top-left-radius: 3px; } .nav-stacked > li.nav-tabs > li:last-child > a { border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } /* Pills */ .nav-stacked > li.nav-pills > li > a { margin-bottom: 3px; } .nav-stacked > li.nav-pills > li:last-child > a { margin-bottom: 1px; /* decrease margin to match sizing of stacked tabs */ } /*************************************************************************************************/ /* DROPDOWNS */ /*************************************************************************************************/ .nav-tabs .dropdown-menu { border-radius: 0 0 3px 3px; /* remove the top rounded corners here since there is a hard edge above the menu */ } .nav-pills .dropdown-menu { border-radius: 3px; /* make rounded corners match the pills */ } /*************************************************************************************************/ /* DEFAULT DROPDOWN LINKS */ /*************************************************************************************************/ /* Make carets use linkColor to start */ .nav .dropdown-toggle .caret { border-top-color: #00A4FD; border-bottom-color: #00A4FD; margin-top: 6px; } .nav .dropdown-toggle:hover .caret, .nav .dropdown-toggle:focus .caret { border-top-color: #006EAA; border-bottom-color: #006EAA; } /* move down carets for tabs */ .nav-tabs .dropdown-toggle .caret { margin-top: 8px; } /*************************************************************************************************/ /* ACTIVE DROPDOWN LINKS */ /*************************************************************************************************/ .nav .active .dropdown-toggle .caret { border-top-color: #FFFFFF; border-bottom-color: #FFFFFF; } .nav-tabs .active .dropdown-toggle .caret { border-top-color: #5C6773; border-bottom-color: #5C6773; } /*************************************************************************************************/ /* ACTIVE:HOVER / :FOCUS DROPDOWN LINKS */ /*************************************************************************************************/ .nav > .dropdown.active > a:hover, .nav > .dropdown.active > a:focus { cursor: pointer; } /*************************************************************************************************/ /* OPEN DROPDOWNS */ /*************************************************************************************************/ .nav-tabs .open .dropdown-toggle, .nav-pills .open .dropdown-toggle, .nav > li.dropdown.open.active > a:hover, .nav > li.dropdown.open.active > a:focus { color: #FFFFFF; background-color: #818D99; border-color: #818D99; } .nav li.dropdown.open .caret, .nav li.dropdown.open.active .caret, .nav li.dropdown.open a:hover .caret, .nav li.dropdown.open a:focus .caret { border-top-color: #FFFFFF; border-bottom-color: #FFFFFF; opacity: 1.0; } /* Dropdowns in stacked tabs */ .tabs-stacked .open > a:hover, .tabs-stacked .open > a:focus { border-color: #818D99; } /*************************************************************************************************/ /* TABBABLE COMMON STYLES */ /*************************************************************************************************/ /* Clear any floats */ .tabbable:before, .tabbable:after { display: table; content: ""; line-height: 0; } .tabbable:after { clear: both; } .tab-content { overflow: auto; /* prevent content from running below tabs */ } /* Remove border on bottom, left, right */ .tabs-below > .nav-tabs, .tabs-right > .nav-tabs, .tabs-left > .nav-tabs { border-bottom: 0; } /* Show/hide tabbable areas */ .tab-content > .tab-pane, .pill-content > .pill-pane { display: none; } .tab-content > .active, .pill-content > .active { display: block; } /*************************************************************************************************/ /* TABBABLE BOTTOM STYLES */ /*************************************************************************************************/ .tabs-below > .nav-tabs { border-top: 1px solid #171D21; } .tabs-below > .nav-tabs > li { margin-top: -1px; margin-bottom: 0; } .tabs-below > .nav-tabs > li > a { border-radius: 0 0 3px 3px; } .tabs-below > .nav-tabs > li > a:hover, .tabs-below > .nav-tabs > li > a:focus { border-bottom-color: transparent; border-top-color: #171D21; } .tabs-below > .nav-tabs > .active > a, .tabs-below > .nav-tabs > .active > a:hover, .tabs-below > .nav-tabs > .active > a:focus { border-color: transparent #171D21 #171D21 #171D21; } /*************************************************************************************************/ /* TABBABLE LEFT & RIGHT STYLES */ /*************************************************************************************************/ /* Common styles */ .tabs-left > li, .tabs-right > li { float: none; } .tabs-left > li > a, .tabs-right > li > a { min-width: 74px; margin-right: 0; margin-bottom: 3px; } /* Tabs on the left */ .tabs-left > .nav-tabs { float: left; margin-right: 19px; border-right: 1px solid #171D21; } .tabs-left > .nav-tabs > li > a { margin-right: -1px; border-radius: 3px 0 0 3px; } .tabs-left > .nav-tabs > li > a:hover, .tabs-left > .nav-tabs > li > a:focus { border-color: #E1E6EB #171D21 #E1E6EB #E1E6EB; } .tabs-left > .nav-tabs .active > a, .tabs-left > .nav-tabs .active > a:hover, .tabs-left > .nav-tabs .active > a:focus { border-color: #171D21 transparent #171D21 #171D21; } /* Tabs on the right */ .tabs-right > .nav-tabs { float: right; margin-left: 19px; border-left: 1px solid #171D21; } .tabs-right > .nav-tabs > li > a { margin-left: -1px; border-radius: 0 3px 3px 0; } .tabs-right > .nav-tabs > li > a:hover, .tabs-right > .nav-tabs > li > a:focus { border-color: #E1E6EB #E1E6EB #E1E6EB #171D21; } .tabs-right > .nav-tabs .active > a, .tabs-right > .nav-tabs .active > a:hover, .tabs-right > .nav-tabs .active > a:focus { border-color: #171D21 #171D21 #171D21 transparent; } /* fixes an alignment issue with out font based carets. */ .nav .dropdown-toggle .caret, .nav-tabs .dropdown-toggle .caret, .navbar .nav .dropdown-toggle .caret { margin-top: 0; } /*************************************************************************************************/ /* DISABLED STATES */ /*************************************************************************************************/ /* Gray out text */ .nav > .disabled > a { color: #5C6773; } /* Nuke hover/focus effects */ .nav > .disabled > a:focus, .nav > .disabled > a:hover { text-decoration: none; background-color: transparent; cursor: default; } /*************************************************************************************************/ /* PRINT */ /*************************************************************************************************/ @media print { header, .app-bar { display: none !important; } .main-tabs { border: none !important; } .main-tabs li:not(.active) { display: none !important; } .main-tabs li.active:before, .main-tabs li.active:after { display:none !important; } } /*===============================================================================================*/ /* SPLUNK: NAVBARS (REDUX) */ /*===============================================================================================*/ /*************************************************************************************************/ /* COMMON STYLES */ /*************************************************************************************************/ /* Base class and wrapper */ .navbar { overflow: visible; margin-bottom: 0; } /* We then reset it for fixed navbars in the #gridSystem mixin */ .navbar .container { width: auto; } /* Brand: Website or project name. */ .navbar .brand { float: left; display: block; /* Vertically center the text given $navbarHeight */ padding: 7px 20px 7px; margin-left: -20px; /* negative indent to left-align the text down the page */ font-size: 20px; font-weight: 200; color: #00A4FD; text-shadow: 0 1px 0 #FFFFFF; } .navbar .brand:hover, .navbar .brand:focus { text-decoration: none; } /* Dividers in navbar */ .navbar .divider-vertical { height: 34px; margin: 0 9px; border-left: 1px solid #171D21; border-right: 1px solid #FFFFFF; } /* Buttons in navbar */ .navbar .btn, .navbar .btn-group { margin-top: 2px; /* Vertically center in navbar */ } /* Set width to auto for default container */ .navbar .btn-group .btn, .navbar .input-prepend .btn, .navbar .input-append .btn, .navbar .input-prepend .btn-group, .navbar .input-append .btn-group { margin-top: 0; /* then undo the margin here so we don't accidentally double it */ } /* Inner for background effects */ /* Gradient is applied to its own element because overflow visible is not honored by IE when filter is present */ .navbar-inner { min-height: 34px; padding-left: 20px; padding-right: 20px; background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#171D21)); background-image: linear-gradient(to bottom, #FFFFFF, #171D21); border: 1px solid rgb(0, 0, 0); border-radius: 3px; -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065); box-shadow: 0 1px 4px rgba(0,0,0,.065); } /* Prevent floats from breaking the navbar */ .navbar-inner:before, .navbar-inner:after { display: table; content: ""; line-height: 0; } .navbar-inner:after { clear: both; } /* Override the default collapsed state */ .nav-collapse.collapse { height: auto; overflow: visible; } /* Plain text in topbar */ .navbar-text { margin-bottom: 0; line-height: 34px; color: #C3CBD4; } /* Janky solution for now to account for links outside the .nav */ .navbar-link { color: #C3CBD4; } .navbar-link:hover, .navbar-link:focus { color: #3C444D; } /*************************************************************************************************/ /* NAVBAR FORMS */ /*************************************************************************************************/ .navbar-form { margin-bottom: 0; } /* remove default bottom margin */ .navbar-form:before, .navbar-form:after { display: table; content: ""; line-height: 0; } .navbar-form:after { clear: both; } .navbar-form input, .navbar-form select, .navbar-form .radio, .navbar-form .checkbox { margin-top: 2px; /* Vertically center in navbar */ } .navbar-form input, .navbar-form select, .navbar-form .btn { display: inline-block; margin-bottom: 0; } .navbar-form input[type="image"], .navbar-form input[type="checkbox"], .navbar-form input[type="radio"] { margin-top: 3px; } .navbar-form .input-append, .navbar-form .input-prepend { margin-top: 5px; white-space: nowrap; } /* preven two items from separating within a .navbar-form that has .pull-left */ .navbar-form .input-append input, .navbar-form .input-prepend input { margin-top: 0; /* remove the margin on top since it's on the parent */ } /*************************************************************************************************/ /* NAVBAR SEARCH */ /*************************************************************************************************/ .navbar-search { position: relative; float: left; margin-top: 2px; /* Vertically center in navbar */ margin-bottom: 0; } .navbar-search .search-query { margin-bottom: 0; padding: 4px 14px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 13px; font-weight: normal; line-height: 1; border-radius: 15px; /* redeclare because of specificity of the type attribute */ } /*************************************************************************************************/ /* STATIC NAVBAR */ /*************************************************************************************************/ .navbar-static-top { position: static; margin-bottom: 0; } /* remove 18px margin for default navbar */ .navbar-static-top .navbar-inner { border-radius: 0; } /*************************************************************************************************/ /* FIXED NAVBAR */ /*************************************************************************************************/ /* Shared (top/bottom) styles */ .navbar-fixed-top, .navbar-fixed-bottom { position: fixed; right: 0; left: 0; z-index: 1030; margin-bottom: 0; } /* remove 18px margin for default navbar */ .navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .navbar-inner { padding-left: 0; padding-right: 0; border-radius: 0; } .navbar-fixed-top .navbar-inner, .navbar-static-top .navbar-inner { border-width: 0 0 1px; -webkit-box-shadow: 0 1px 10px rgba(0,0,0,.1); box-shadow: 0 1px 10px rgba(0,0,0,.1); } /* Fixed to top */ .navbar-fixed-top { top: 0; } /* Fixed to bottom */ .navbar-fixed-bottom { bottom: 0; } .navbar-fixed-bottom .navbar-inner { border-width: 1px 0 0; -webkit-box-shadow: 0 -1px 10px rgba(0,0,0,.1); box-shadow: 0 -1px 10px rgba(0,0,0,.1); } /* Reset container width */ /* Required here as we reset the width earlier on and the grid mixins don't override early enough */ .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container { width: 940px; } /*************************************************************************************************/ /* NAVIGATION */ /*************************************************************************************************/ .navbar { /* Navbar button for toggling navbar items in responsive layouts */ } .navbar .nav { position: relative; left: 0; display: block; float: left; margin: 0 10px 0 0; } .navbar .nav.pull-right { float: right; /* redeclare due to specificity */ margin-right: 0; /* remove margin on float right nav */ } .navbar .nav > li { float: left; } /* Links */ .navbar .nav > li > a { float: none; /* Vertically center the text given $navbarHeight */ padding: 7px 15px 7px; color: #C3CBD4; text-decoration: none; text-shadow: 0 1px 0 #FFFFFF; } /* Hover/focus */ .navbar .nav > li > a:focus, .navbar .nav > li > a:hover { background-color: transparent; /* "transparent" is default to differentiate :hover/:focus from .active */ color: #3C444D; text-decoration: none; } /* Dropdown Menus */ .navbar .nav > li > .dropdown-menu:before { content: ''; display: inline-block; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #171D21; border-bottom-color: #171D21; position: absolute; top: -7px; left: 9px; } .navbar .nav > li > .dropdown-menu:after { content: ''; display: inline-block; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #FFFFFF; position: absolute; top: -6px; left: 10px; } /* Caret should match text color on hover/focus */ .navbar .nav > li.dropdown > a:hover .caret, .navbar .nav > li.dropdown > a:focus .caret { border-top-color: #3C444D; border-bottom-color: #3C444D; } /* Remove background color from open dropdown */ .navbar .nav > li.dropdown.open > .dropdown-toggle, .navbar .nav > li.dropdown.active > .dropdown-toggle, .navbar .nav > li.dropdown.open.active > .dropdown-toggle { background-color: rgb(13, 16, 18); color: #5C6773; } .navbar .nav > li.dropdown.open > .dropdown-toggle .caret, .navbar .nav > li.dropdown.active > .dropdown-toggle .caret, .navbar .nav > li.dropdown.open.active > .dropdown-toggle .caret { border-top-color: #5C6773; border-bottom-color: #5C6773; } .navbar .nav > li.dropdown > .dropdown-toggle .caret { border-top-color: #C3CBD4; border-bottom-color: #C3CBD4; } .navbar .nav .dropdown-toggle .caret { margin-top: 8px; } /* Active nav items */ .navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus { color: #5C6773; text-decoration: none; background-color: rgb(13, 16, 18); -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.125); box-shadow: inset 0 3px 8px rgba(0,0,0,.125); } /* These definitions need to come after '.navbar .btn' */ .navbar .btn-navbar { display: none; float: right; padding: 7px 10px; margin-left: 5px; margin-right: 5px; background-color: #5C6773; border-color: #171D21; color: #FFFFFF; -webkit-box-shadow: inset 0px -1px 0 #3C444D; box-shadow: inset 0px -1px 0 #3C444D; text-decoration: none; text-shadow: none; -webkit-transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; -webkit-filter: none; filter: none; -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075); } .navbar .btn-navbar .icon-bar { display: block; width: 18px; height: 2px; background-color: #f5f5f5; border-radius: 1px; -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.25); box-shadow: 0 1px 0 rgba(0,0,0,.25); } .navbar .btn-navbar .icon-bar+ .icon-bar { margin-top: 3px; } /* Right aligned menus need alt position */ .navbar .pull-right > li > .dropdown-menu, .navbar .nav > li > .dropdown-menu.pull-right { left: auto; right: 0; } .navbar .pull-right > li > .dropdown-menu:before, .navbar .nav > li > .dropdown-menu.pull-right:before { left: auto; right: 12px; } .navbar .pull-right > li > .dropdown-menu:after, .navbar .nav > li > .dropdown-menu.pull-right:after { left: auto; right: 13px; } .navbar .pull-right > li > .dropdown-menu .dropdown-menu, .navbar .nav > li > .dropdown-menu.pull-right .dropdown-menu { left: auto; right: 100%; margin-left: 0; margin-right: -1px; border-radius: 6px 0 6px 6px; } /* Menu position and menu caret support for dropups via extra dropup class */ .navbar-fixed-bottom .nav > li > .dropdown-menu:before { border-top: 7px solid #171D21; border-top-color: #171D21; border-bottom: 0; bottom: -7px; top: auto; } .navbar-fixed-bottom .nav > li > .dropdown-menu:after { border-top: 6px solid #FFFFFF; border-bottom: 0; bottom: -6px; top: auto; } /*===============================================================================================*/ /* SPLUNK: PAGINATOR */ /* Navigation styles and components. */ /*===============================================================================================*/ /* pagination styles and overrides */ .pagination { height: auto; } .pagination > ul { display: inline-block; /* Reset default ul styles */ margin-left: 0; margin-bottom: 0; list-style: none; } .pagination > ul > li { float: left; } .pagination > ul > li > span, .pagination > ul > li > a { padding: 5px 14px; /* note the vertical padding will be funky unless it's block, inline-block, or floated */ float: left; line-height: 20px; border: 1px solid transparent; border-radius: 3px; background-color: none; border-color: transparent; color: #FFFFFF; -webkit-box-shadow: none; box-shadow: none; text-decoration: none; text-shadow: none; -webkit-transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; -webkit-filter: none; filter: none; } .pagination > ul > li > span:hover, .pagination > ul > li > a:hover { color: #FFFFFF; background: #3C444D; border-color: #171D21; text-decoration: none; } .pagination > ul > li > span:focus, .pagination > ul > li > a:focus { color: #00A4FD; background: none; border-color: transparent; text-decoration: none; -webkit-box-shadow: 0 0 1px 2px #00A4FD; box-shadow: 0 0 1px 2px #00A4FD; border-collapse: separate; /* Fix IE9 Issue with box-shadow */ outline: 0; text-decoration: none; } .pagination > ul > li > span:focus:active:not([disabled]), .pagination > ul > li > a:focus:active:not([disabled]) { -webkit-box-shadow: none; box-shadow: none; } .pagination > ul > li > span:active, .pagination > ul > li > span.active, .pagination > ul > li > a:active, .pagination > ul > li > a.active { color: #FFFFFF; background: #2B3033; border-color: transparent; text-decoration: none; } .pagination > ul > li > span.disabled, .pagination > ul > li > span[disabled], .pagination > ul > li > span.disabled:hover, .pagination > ul > li > span[disabled]:hover, .pagination > ul > li > span.disabled:focus, .pagination > ul > li > span[disabled]:focus, .pagination > ul > li > span.disabled:active, .pagination > ul > li > span[disabled]:active, .pagination > ul > li > a.disabled, .pagination > ul > li > a[disabled], .pagination > ul > li > a.disabled:hover, .pagination > ul > li > a[disabled]:hover, .pagination > ul > li > a.disabled:focus, .pagination > ul > li > a[disabled]:focus, .pagination > ul > li > a.disabled:active, .pagination > ul > li > a[disabled]:active { color: #5C6773; background: none; border-color: transparent; text-decoration: none; -webkit-box-shadow: none; box-shadow: none; cursor: not-allowed; } .pagination > ul > li > span:not(.page-controls),.pagination > ul > li > a:not(.page-controls){ padding: 5px 10px; margin: 0 1px; } .pagination > ul > li > span:not(.page-controls).btn-square, .pagination > ul > li > a:not(.page-controls).btn-square { padding: 5px 0; } .pagination > ul .active > a, .pagination > ul .active > a:hover { cursor: default; border: 1px solid #007ABD; color: #007ABD; } .pagination > ul .icon-chevron-left, .pagination > ul .icon-triangle-left-small { padding-right: 6.66667px; } .pagination > ul .icon-chevron-right, .pagination > ul .icon-triangle-right-small { padding-left: 6.66667px; } .pagination > ul > .disabled > span, .pagination > ul > .disabled > a, .pagination > ul > .disabled > a:hover, .pagination > ul > .disabled > a:focus { background-color: transparent; border-color: transparent; color: #5C6773; cursor: default; -webkit-box-shadow: none; box-shadow: none; } .pagination .max-events-per-bucket { color: #F8BE34; font-size: 18px; } /* .pagination */ .splunk-paginator.splunk-view { padding: 0 10px; } .splunk-paginator.splunk-view .disabled, .splunk-paginator.splunk-view a.selected { color: #5C6773; cursor: default; } .splunk-paginator.splunk-view a.selected { color: #00A4FD; border: 1px solid #00A4FD; background: transparent; } .splunk-paginator.splunk-view a { border: 1px solid transparent; border-radius: 3px; color: #FFFFFF; padding: 2px 8px 2px; text-decoration: none; min-width: 10px; line-height: 20px; display: inline-block; text-align: center; } .splunk-paginator.splunk-view a:hover { background: #3C444D; } .splunk-paginator.splunk-view a:disabled { background: none; } .splunk-paginator.splunk-view span { padding-left: 5px; padding-right: 5px; } /*===============================================================================================*/ /* SPLUNK: PAGER PAGINATION */ /*===============================================================================================*/ .pager { margin: 20px 0; list-style: none; text-align: center; } .pager:before, .pager:after { display: table; content: ""; line-height: 0; } .pager:after { clear: both; } .pager li { display: inline; } .pager li > a, .pager li > span { display: inline-block; padding: 5px 14px; background-color: #FFFFFF; border: 1px solid #171D21; border-radius: 15px; } .pager li > a:hover, .pager li > a:focus { text-decoration: none; background-color: #F7F8FA; } .pager .next > a, .pager .next > span { float: right; } .pager .previous > a, .pager .previous > span { float: left; } .pager .disabled > a, .pager .disabled > a:hover, .pager .disabled > a:focus, .pager .disabled > span { text-decoration: none; background-color: #F7F8FA; } /* Components: Popovers */ /*===============================================================================================*/ /* SPLUNK: MODALS */ /*===============================================================================================*/ /* TODO: the close button seems to have issues on placement */ /* modal windows */ /* body while modal is open */ .body-modal-open { overflow: hidden; } /* Background */ .modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #b3b3b3; } /* Fade for backdrop */ .modal-backdrop.fade { opacity: 0; } .modal-backdrop, .modal-backdrop.fade.in { opacity: 0.80; } /* modal container */ .modal { position: fixed; top: 40px; left: 50%; width: 550px; margin-left: -275px; } .modal .form-horizontal { width: 550px; -webkit-box-sizing: border-box; box-sizing: border-box; } .modal { z-index: 1050; background-color: #31373E; border: none; -webkit-box-shadow: 0 3px 7px rgba(0,0,0,0.3); box-shadow: 0 3px 7px rgba(0,0,0,0.3); background-clip: border-box; outline: none; } /* Remove focus outline from opened modal */ .modal.fade { -webkit-transition: opacity 0.125s, top 0.125s ease; transition: opacity 0.125s, top 0.125s ease; top: 0; } .modal.fade.in { top: 40px } /* modal */ /* SPL-68751 - IE10 box shadow animation artifacts fix */ .modal:after { content: ""; font-size: 0; display: inline; overflow: hidden; } /*************************************************************************************************/ /* MODAL HEADER */ /*************************************************************************************************/ .modal-header { border: none; position: relative; background: #31373E; padding: 20px; } /* heading */ .modal-header h3, .modal-header h1, .modal-header .modal-title { font-size: 20px; font-weight: 500; line-height: 22px; margin: 0; overflow-wrap: break-word; padding-right: 40px; } /* close button */ .modal-header .close { border: 1px solid; top: 20px; right: 20px; margin-top: -2px; position: absolute; background-color: none; border-color: transparent; color: #FFFFFF; -webkit-box-shadow: none; box-shadow: none; text-decoration: none; text-shadow: none; -webkit-transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; -webkit-filter: none; filter: none; } .modal-header .close:hover { color: #FFFFFF; background: #3C444D; border-color: #171D21; text-decoration: none; } .modal-header .close:focus { color: #00A4FD; background: none; border-color: transparent; text-decoration: none; -webkit-box-shadow: 0 0 1px 2px #00A4FD; box-shadow: 0 0 1px 2px #00A4FD; border-collapse: separate; /* Fix IE9 Issue with box-shadow */ outline: 0; text-decoration: none; } .modal-header .close:focus:active:not([disabled]) { -webkit-box-shadow: none; box-shadow: none; } .modal-header .close:active, .modal-header .close.active { color: #FFFFFF; background: #2B3033; border-color: transparent; text-decoration: none; } .modal-header .close.disabled, .modal-header .close[disabled], .modal-header .close.disabled:hover, .modal-header .close[disabled]:hover, .modal-header .close.disabled:focus, .modal-header .close[disabled]:focus, .modal-header .close.disabled:active, .modal-header .close[disabled]:active { color: #5C6773; background: none; border-color: transparent; text-decoration: none; -webkit-box-shadow: none; box-shadow: none; cursor: not-allowed; } /*************************************************************************************************/ /* MODAL BODY */ /*************************************************************************************************/ .modal-body { position: relative; padding: 0 20px; overflow: visible; max-height: calc(100vh - 246px); } .modal-body:last-child { max-height: calc(100vh - 259px); /* if no footer, can be somewhat taller */ } /* Remove bottom margin if need be */ .modal-form { margin-bottom: 0; } .modal-body-scrolling { overflow-y: auto; padding: 20px; position: relative; border-top: 1px solid #32414C; border-bottom: 1px solid #32414C; } /*************************************************************************************************/ /* MODAL FOOTER */ /*************************************************************************************************/ .modal-footer { padding: 20px; margin-bottom: 0; text-align: right; /* right align buttons */ background: #31373E; } .modal-footer:before, .modal-footer:after { display: table; content: ""; line-height: 0; } .modal-footer:after { clear: both; } /* clear it in case folks use .pull-* classes on buttons */ .modal-footer > .btn { min-width: 80px; } .modal-footer > .btn + .btn:not(.pull-left) { /* Properly space out buttons */ margin-left: 10px; margin-bottom: 0; /* account for input[type="submit"] which gets the bottom margin like all other inputs */ } /* but override that for button groups */ .modal-footer > .btn-group .btn + .btn { margin-left: -1px; } /* and override it for block buttons as well */ .modal-footer > .btn-block + .btn-block { margin-left: 0; } .modal-footer:empty { padding: 0; } /*************************************************************************************************/ /* MODAL VARIATIONS */ /*************************************************************************************************/ /* extends modal; sets width & offset */ .modal-wide { width: 800px; margin-left: -400px; } .modal-wide .form-horizontal { width: 800px; -webkit-box-sizing: border-box; box-sizing: border-box; } /* Disconnect needs to be above other modals */ .modal.disconnection-warning-modal { z-index: 1090; } .shared-splunkbar-messages-noconnectionoverlay .modal-backdrop { z-index: 1080; } /* loading ... */ .modal-loading { text-align: center; color: #C3CBD4; } /*************************************************************************************************/ /* WHATS NEW DIALOG */ /*************************************************************************************************/ .shared-whatsnewdialog.modal { width: 900px; margin-left: -450px; } .shared-whatsnewdialog.modal .modal-body { padding-right: 0; } .shared-whatsnewdialog h2 { font-weight: 200; font-size: 24px; margin: 0 0 20px -20px; padding-left: 20px; } .shared-whatsnewdialog .feature { display:inline-block; width: 260px; margin: 0 20px 20px 0; position: relative; vertical-align: top; } .shared-whatsnewdialog .feature > h3 { margin: 0 0 5px 0; } .shared-whatsnewdialog .feature > img { display: block; width: 100%; height: 170px; border: 1px solid #171D21; margin-bottom: 10px; } .shared-whatsnewdialog .feature > p { margin: 0; } .shared-whatsnewdialog .feature + h2 { padding-top: 20px; border-top: 1px dotted #171D21; } /*===============================================================================================*/ /* SPLUNK: TOOLTIPS */ /*===============================================================================================*/ /* Base class */ .tooltip { position: absolute; z-index: 1070; display: block; visibility: visible; font-size: 12px; line-height: 1.4; opacity: 0.0; } .tooltip.in { opacity: 0.85; } .tooltip.top { margin-top: -3px; padding: 5px 0; } .tooltip.right { margin-left: 3px; padding: 0 5px; } .tooltip.bottom { margin-top: 3px; padding: 5px 0; } .tooltip.left { margin-left: -3px; padding: 0 5px; } /* Wrapper for the tooltip content */ .tooltip-inner { max-width: 200px; padding: 6px 12px; color: #171D21; text-align: center; text-decoration: none; background-color: #FFFFFF; } /* Arrows */ .tooltip-arrow { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; } .tooltip.top .tooltip-arrow { bottom: 0; left: 50%; margin-left: -5px; border-width: 5px 5px 0; border-top-color: #FFFFFF; } .tooltip.right .tooltip-arrow { top: 50%; left: 0; margin-top: -5px; border-width: 5px 5px 5px 0; border-right-color: #FFFFFF; } .tooltip.left .tooltip-arrow { top: 50%; right: 0; margin-top: -5px; border-width: 5px 0 5px 5px; border-left-color: #FFFFFF; } .tooltip.bottom .tooltip-arrow { top: 0; left: 50%; margin-left: -5px; border-width: 0 5px 5px; border-bottom-color: #FFFFFF; } /* Components: Misc */ /*===============================================================================================*/ /* SPLUNK: THUMBNAILS */ /*===============================================================================================*/ /* Note: `.thumbnails` and `.thumbnails > li` are overriden in responsive files */ /* Make wrapper ul behave like the grid */ .thumbnails { margin-left: -20px; list-style: none; } .thumbnails:before, .thumbnails:after { display: table; content: ""; line-height: 0; } .thumbnails:after { clear: both; } /* Fluid rows have no left margin */ .row-fluid .thumbnails { margin-left: 0; } /* Float li to make thumbnails appear in a row */ .thumbnails > li { float: left; /* Explicity set the float since we don't require .span* classes */ margin-bottom: 20px; margin-left: 20px; } /* The actual thumbnail (can be `a` or `div`) */ .thumbnail { display: block; padding: 4px; line-height: 20px; border: 1px solid #ddd; border-radius: 3px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.055); box-shadow: 0 1px 3px rgba(0,0,0,.055); -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } /* Add a hover/focus state for linked versions only */ a.thumbnail:hover, a.thumbnail:focus { border-color: #00A4FD; -webkit-box-shadow: 0 1px 4px rgba(0,105,214,.25); box-shadow: 0 1px 4px rgba(0,105,214,.25); } /* Images and captions */ .thumbnail > img { display: block; max-width: 100%; margin-left: auto; margin-right: auto; } .thumbnail .caption { padding: 9px; color: #5C6773; } /*===============================================================================================*/ /* SPLUNK: LABELS & BADGES OVERRIDES */ /*===============================================================================================*/ /* Base classes */ .label, .badge { display: inline-block; padding: 2px 4px; font-size: 11.844px; font-weight: bold; line-height: 14px; /* ensure proper line-height if floated */ color: #FFFFFF; vertical-align: baseline; white-space: nowrap; text-shadow: 0 -1px 0 rgba(0,0,0,.25); background-color: #818D99; } /* Set unique padding and border-radii */ .label { border-radius: 3px; } .badge { padding-left: 9px; padding-right: 9px; border-radius: 9px; } /* Empty labels/badges collapse */ .label:empty, .badge:empty { display: none; } /* Hover/focus state, but only for links */ a.label:hover, a.label:focus, a.badge:hover, a.badge:focus { color: #FFFFFF; text-decoration: none; cursor: pointer; } /* Colors */ /* Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute) */ /* Important (red) */ .label-important, .badge-important { background-color: #31373E; } .label-important[href], .badge-important[href] { background-color: rgb(27, 30, 34); } /* Warnings (orange) */ .label-warning, .badge-warning { background-color: #F1813F; } .label-warning[href], .badge-warning[href] { background-color: rgb(237, 98, 18); } /* Success (green) */ .label-success, .badge-success { background-color: #53A051; } .label-success[href], .badge-success[href] { background-color: rgb(65, 125, 63); } /* Info (turquoise) */ .label-info, .badge-info { background-color: #006D9C; } .label-info[href], .badge-info[href] { background-color: rgb(0, 75, 107); } /* Inverse (black) */ .label-inverse, .badge-inverse { background-color: #3C444D; } .label-inverse[href], .badge-inverse[href] { background-color: rgb(38, 43, 49); } /* Quick fix for labels/badges in buttons */ .btn .label, .btn .badge { position: relative; top: -1px; } .btn-mini .label, .btn-mini .badge { top: 0; } /* Labels */ /* ------ */ /* TODO: use vars here */ .label { padding: 1px 4px 0 4px; border-radius: 4px; line-height: 17px; font-size: 12px; font-weight: normal; text-transform: uppercase; color: #FFFFFF; text-shadow: none; background-color: #C3CBD4; border: 1px solid #3C444D; } /* icons in labels */ .label [class*="icon-"]{ font-size: 16px; margin-right: 3px; vertical-align: middle; } /* Important (red) */ .label-important { background-color: #31373E; border-color: #DC4E41; color: #DC4E41; } /* Warnings (orange) */ .label-warning { background-color: rgb(253, 239, 231); border-color: #F1813F; color: #F1813F; } /* Success (green) */ .label-success { background-color: #DDECDD; border-color: #53A051; color: #53A051; } /* Info (yellow) */ .label-info { background-color: #FEF2D7; border-color: #F8BE34; color: #F8BE34; } /* Inverse (black) */ .label-inverse { background-color: #5C6773; border-color: #3C444D; color: #FFFFFF; } /*===============================================================================================*/ /* SPLUNK: PROGRESS BARS */ /*===============================================================================================*/ /* ANIMATIONS */ /* ---------- */ @-webkit-keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } @keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } /* Spinners */ /* ---------------------------- */ .spinner-small { background-image: url("/static/img/skins/default/loading_small.png"); background-position: left top; width: 14px; height: 14px; background-size: 280px 14px; } .spinner-medium { background-image: url("/static/img/skins/default/loading_medium.png"); background-position: left top; width: 19px; height: 19px; background-size: 380px 19px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .spinner-small { background-image: url("/static/img/skins/default/loading_small_2x.png"); } .spinner-medium { background-image: url("/static/img/skins/default/loading_medium_2x.png"); } } /* Progress */ /* ---------------------------- */ /* This is suppose to match Bootstrap, but it doesn't. */ .progress { overflow: hidden; height: 20px; margin-bottom: 20px; background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#f9f9f9)); background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9); -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1); box-shadow: inset 0 1px 2px rgba(0,0,0,.1); background-color: #F7F8FA; border-radius: 3px; } /* Bootstrap uses the .bar class, but our standard components use .progress-bar */ .progress .bar, .progress .progress-bar { width: 0%; height: 100%; color: #FFFFFF; float: left; font-size: 12px; text-align: center; -webkit-transition: width .6s ease; transition: width .6s ease; } .progress .bar { background-color: #007ABD; -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); -webkit-box-sizing: border-box; box-sizing: border-box; } .progress .bar + .bar { -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15); box-shadow: inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15); } .progress .progress-bar { line-height: 20px; background-color: #C3CBD4; } .progress .progress-striped.progress-bar { background-color: #C3CBD4; background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); background-size: 40px 40px; } /* Striped bars */ .progress-striped .bar { background-color: #007ABD; background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); background-size: 40px 40px; } /* Call animation for the active one */ .progress.active .bar, .active.progress-bar { -webkit-animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite; } /* PROGRESS STATES */ /* --------------- */ /* These have been inherited from Bootstrap and are not used on Core. */ /* Danger (red) */ .progress-danger .bar, .progress .bar-danger { background: #DC4E41; } .progress-danger.progress-striped .bar, .progress-striped .bar-danger { background-color: #DC4E41; background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); } /* Success (green) */ .progress-success .bar, .progress .bar-success { background: #53A051; } .progress-success.progress-striped .bar, .progress-striped .bar-success { background-color: #53A051; background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); } /* Info (teal) */ .progress-info .bar, .progress .bar-info { background: #006D9C; } .progress-info.progress-striped .bar, .progress-striped .bar-info { background-color: #006D9C; background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); } /* Warning (orange) */ .progress-warning .bar, .progress .bar-warning { background: #F1813F; } .progress-warning.progress-striped .bar, .progress-striped .bar-warning { background-color: #F1813F; background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); } /*===============================================================================================*/ /* SPLUNK: ACCORDION */ /* Accordion for expanding content. */ /*===============================================================================================*/ /*
    Anim pariatur cliche...
    Anim pariatur cliche...
    */ /* Parent container */ .accordion { margin-bottom: 0; background: #31373E; } /* Heading */ .accordion-heading { border-bottom: 0; position: relative; } /* Heading Toggle */ .accordion-heading .accordion-toggle { display: block; padding: 5px 14px; padding-left: 30px; line-height: 20px; background-color: #3C444D; color: #FFFFFF; text-decoration: none; -webkit-transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; -webkit-filter: none; filter: none; cursor: pointer; } .accordion-heading .accordion-toggle .icon-triangle-right-small:before { content: "\203A"; } .accordion-heading .accordion-toggle .icon-triangle-down-small:before { content: "\2C5"; } /* Group == heading + body */ .accordion-group { margin-bottom: 2px; border: none; border-radius: 0; } .accordion-group:first-child .accordion-toggle { border-top: none; } .accordion-group:last-child .accordion-toggle, .accordion-group.active:last-child .accordion-body { border-bottom: none; } .accordion-group .accordion-toggle:focus { -webkit-box-shadow: none; box-shadow: none; border-collapse: separate; /* Fix IE9 Issue with box-shadow */ outline: 0; text-decoration: none; } .accordion-group .accordion-toggle:focus:active:not([disabled]) { -webkit-box-shadow: none; box-shadow: none; } .accordion-group .accordion-toggle:focus { -webkit-box-shadow: inset 0 0 2px 1px #3C444D, inset 0 0 0 2px #00A4FD; box-shadow: inset 0 0 2px 1px #3C444D, inset 0 0 0 2px #00A4FD; } .accordion-group.active .accordion-toggle { background: #31373E; border-bottom: none; cursor: default; } .accordion-group.active .accordion-toggle:focus { -webkit-box-shadow: none; box-shadow: none; border-collapse: separate; /* Fix IE9 Issue with box-shadow */ outline: 0; text-decoration: none; } .accordion-group.active .accordion-toggle:focus:active:not([disabled]) { -webkit-box-shadow: none; box-shadow: none; } .accordion-group.active .accordion-toggle:focus { -webkit-box-shadow: inset 0 0 2px 1px #31373E, inset 0 0 0 2px #00A4FD; box-shadow: inset 0 0 2px 1px #31373E, inset 0 0 0 2px #00A4FD; } .accordion-group:not(.active) .accordion-toggle:hover { background-color: #212527; -webkit-box-shadow: none; box-shadow: none; } .accordion-group:not(.active) .accordion-toggle:hover:focus { -webkit-box-shadow: none; box-shadow: none; border-collapse: separate; /* Fix IE9 Issue with box-shadow */ outline: 0; text-decoration: none; } .accordion-group:not(.active) .accordion-toggle:hover:focus:active:not([disabled]) { -webkit-box-shadow: none; box-shadow: none; } .accordion-group:not(.active) .accordion-toggle:hover:focus { -webkit-box-shadow: inset 0 0 2px 1px #212527, inset 0 0 0 2px #00A4FD; box-shadow: inset 0 0 2px 1px #212527, inset 0 0 0 2px #00A4FD; } /* Heading Toggle Icon */ .icon-accordion-toggle { position: absolute; left: 10px; } /* Body */ .accordion-body { background-color: #31373E; } .accordion-inner { padding: 10px 20px 20px 20px; border: none; } .accordion-inner:before, .accordion-inner:after { display: table; content: ""; line-height: 0; } .accordion-inner:after { clear: both; } .accordion-inner { position: relative; } /*===============================================================================================*/ /* SPLUNK: CAROUSEL */ /*===============================================================================================*/ .carousel { position: relative; margin-bottom: 20px; line-height: 1; } .carousel-inner { overflow: hidden; width: 100%; position: relative; } .carousel-inner > .item { display: none; position: relative; -webkit-transition: .6s ease-in-out left; transition: .6s ease-in-out left; } /* Account for jankitude on images */ .carousel-inner > .item > img, .carousel-inner > .item > a > img { display: block; line-height: 1; } .carousel-inner > .active, .carousel-inner > .next, .carousel-inner > .prev { display: block; } .carousel-inner > .next, .carousel-inner > .prev { position: absolute; top: 0; width: 100%; } .carousel-inner > .next { left: 100%; } .carousel-inner > .prev { left: -100%; } .carousel-inner > .next.left, .carousel-inner > .prev.right { left: 0; } .carousel-inner > .active { left: 0; } .carousel-inner > .active.left, .carousel-inner > .active.right { left: 100%; } /*************************************************************************************************/ /* LEFT/RIGHT CONTROLS FOR NAV */ /*************************************************************************************************/ .carousel-control { position: absolute; top: 40%; left: 15px; width: 40px; height: 40px; margin-top: -20px; font-size: 60px; font-weight: 100; line-height: 30px; color: #FFFFFF; text-align: center; background: #171D21; border: 3px solid #FFFFFF; border-radius: 23px; opacity: 0.50; /* we can't have this transition here */ /* because webkit cancels the carousel */ /* animation if you trip this while */ /* in the middle of another animation */ /* ;_; */ /* transition: opacity .2s linear; */ } /* Reposition the right one */ .carousel-control.right { left: auto; right: 15px; } /* Hover/focus state */ .carousel-control:hover, .carousel-control:focus { color: #FFFFFF; text-decoration: none; opacity: 0.90; } /*************************************************************************************************/ /* CAROUSEL INDICATOR PIPS */ /*************************************************************************************************/ .carousel-indicators { position: absolute; top: 15px; right: 15px; z-index: 5; margin: 0; list-style: none; } .carousel-indicators li { display: block; float: left; width: 10px; height: 10px; margin-left: 5px; text-indent: -999px; background-color: #C3CBD4; background-color: rgba(255, 255, 255, .25); border-radius: 5px; } .carousel-indicators .active { background-color: #FFF; } /*************************************************************************************************/ /* CAPTION FOR TEXT BELOW IMAGES */ /*************************************************************************************************/ .carousel-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 15px; background: #3C444D; background: rgba(0, 0, 0, .75); } .carousel-caption h4, .carousel-caption p { color: #FFFFFF; line-height: 20px; } .carousel-caption h4 { margin: 0 0 5px; } .carousel-caption p { margin-bottom: 0; } /* Utility classes */ /*===============================================================================================*/ /* SPLUNK: UTILITY CLASSES */ /*===============================================================================================*/ /* Quick floats */ .pull-right { float: right; } .pull-left { float: left; } /* Toggling content */ .hide { display: none; } .show { display: block; } /* Visibility */ .invisible { visibility: hidden; } /* For Affix plugin */ .affix { position: fixed; } /* Proxy mixin s */ .clearfix:before, .clearfix:after { display: table; content: ""; line-height: 0; } .clearfix:after { clear: both; } .hide-text { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; position: absolute; width: 0; } .input-block-level { display: block; width: 100%; min-height: 32px; /* Make inputs at least the height of their button counterpart (base line-height + padding + border) */ -webkit-box-sizing: border-box; box-sizing: border-box; /* Makes inputs behave like true block-level elements */ } /* 508 helper class - Hide only visually, but have it available for screenreaders */ .visuallyhidden { clip: rect(0 0 0 0); position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; border: 0; } /* Has to be last to override when necessary */ /* 3rd party */ /*===============================================================================================*/ /* SPLUNK: JQUERY UI THEME */ /*===============================================================================================*/ /* generic widgets */ /* --------------- */ .ui-widget { font-family: inherit; } .ui-widget-header { font-weight: normal; background: transparent; border: 0; color: #FFFFFF; } .ui-widget-header a { color: #000000; } .ui-corner-all { border-radius: 2px; } .ui-icon { font-family: "Splunk Icons"; width: 20px; height: 20px; } /* Tabs */ /* ----------- */ /*jq-ui adds background to tabs which is shared by other components*/ .ui-tabs .ui-widget-header { background: none; border-bottom:1px solid #171D21; border-radius: 0; } /* override default tabs borders */ .ui-tabs .ui-tabs-nav li { border-bottom: 1px solid #171D21 !important; /*need important to override jq-ui bs*/ margin-bottom:-1px; } /* selected state */ .ui-tabs .ui-tabs-nav li.ui-tabs-selected { border-bottom:1px solid #171D21 !important; /*need important to override the other important*/ } /* Accordiion */ /* ------------ */ .ui-accordion .ui-accordion-header .ui-icon { left: 0.5em; margin-top: -8px; position: absolute; top: 50%; } .ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; } /* Datepicker */ /* ------------- */ #ui-datepicker-div { display:none; /* jquery ui adds this id by default ;_; */ z-index: 1070 !important; /* need to override jquery inline z-index nonsense ;_; */ } .ui-datepicker { background-color: #31373E; border: 1px solid #000000; -webkit-box-shadow: 1px 4px 5px rgba(0, 0, 0, 0.5); box-shadow: 1px 4px 5px rgba(0, 0, 0, 0.5); border-radius: 2px; top: 100%; left: 50%; margin: 8px 0 0 -103px; display: none; position: absolute; z-index: 1059; white-space: normal; } /* placement of arrow */ .ui-datepicker .arrow { position: absolute; height: 0; width: 0; border: 8px solid transparent; content: ""; display: block; border-top: 0; border-bottom-color: #000000; top: -8px; left: 50%; margin-left: -4px; } /* generated arrow */ .ui-datepicker .arrow:before { position: absolute; height: 0; width: 0; border: 8px solid transparent; content: ""; display: block; border-top: 0; border-bottom-color: #31373E; top: 1px; left: -8px; } /* prevent inheriting nowrap from btn-group */ .ui-datepicker.up { margin-top: 0; } /* placement of arrow */ .ui-datepicker.up > .arrow { position: absolute; height: 0; width: 0; border: 8px solid transparent; content: ""; display: block; border-bottom: 0; border-top-color: #000000; top: auto; bottom: -8px; } .ui-datepicker.up > .arrow:before { position: absolute; height: 0; width: 0; border: 8px solid transparent; content: ""; display: block; border-bottom: 0; border-top-color: #31373E; top: auto; bottom: 1px; } .ui-datepicker.right { /* point left */ margin-left: 5px; margin-top: 0; } /* placement of arrow */ .ui-datepicker.right .arrow { position: absolute; height: 0; width: 0; border: 8px solid transparent; content: ""; display: block; border-left: 0; border-right-color: #000000; top: 50%; left: -8px; margin: -8px 0 0 0; } .ui-datepicker.right .arrow:before { position: absolute; height: 0; width: 0; border: 8px solid transparent; content: ""; display: block; border-left: 0; border-right-color: #31373E; top: 50%; left: 1px; margin: -8px 0 0 0; } /* position of arrow when floated right */ .ui-datepicker.pull-right .arrow { left: auto; right: 8px; } /* open state */ .ui-datepicker.open { display: block; } .ui-datepicker { background-color: #31373E; width: 17em; height: auto; position: relative; padding: 5px; margin: 0; } .ui-datepicker .ui-datepicker-header { position: relative; padding: 0.2em 0; background: transparent; } /* header */ .ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 32px; text-align: center; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position: absolute; text-decoration: none; } .ui-datepicker .ui-datepicker-prev .ui-icon,.ui-datepicker .ui-datepicker-next .ui-icon{ font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; position: absolute; width: 0; left: 0; /* override hide-text for ie-7 */ } .ui-datepicker .ui-datepicker-prev .ui-icon:after, .ui-datepicker .ui-datepicker-next .ui-icon:after { display: block; position: absolute; top: 0; left: 0; text-align: center; width: 32px; line-height: 32px; color: #FFFFFF; text-indent: 0; font-size: 12px; font-family: "Splunk Icons"; } /* prev-next */ .ui-datepicker .ui-datepicker-prev .ui-icon:after { content: "\25C0"; } .ui-datepicker .ui-datepicker-next { top: 0; right: 0; } .ui-datepicker .ui-datepicker-next .ui-icon:after { content: "\25B6"; } .ui-datepicker table { margin-bottom: 0; width: 100%; border-collapse: collapse; margin: 0 0 0.4em; } .ui-datepicker .ui-datepicker-calendar {/* table */ margin: 0; } .ui-datepicker .ui-datepicker-calendar th { line-height: 10px; padding: 0.7em 0.3em; padding-top: 20px; color: #C3CBD4; text-align: center; border: 0; font-weight: normal; } .ui-datepicker .ui-datepicker-calendar td { padding: 1px; } .ui-datepicker .ui-datepicker-calendar td a { display: block; padding: 0.2em; text-align: right; color: #FFFFFF; } .ui-datepicker .ui-datepicker-calendar a { border: 1px solid #171D21; } .ui-datepicker .ui-datepicker-calendar a:hover {text-decoration: none;} .ui-datepicker .ui-datepicker-calendar .ui-state-default { background: #31373E; border:1px solid #3C444D; color: #FFFFFF; } .ui-datepicker .ui-datepicker-calendar .ui-state-active { background-color: #C3CBD4; border-color: #007ABD; color: #006EAA; } .ui-datepicker .ui-datepicker-calendar .ui-state-hover { border-color: #00A4FD; background: #C3CBD4; color: #006EAA; } /* calendar */ .ui-datepicker a.ui-corner-all { display: inline-block; padding: 5px 14px; /* note the vertical padding will be funky unless it's block, inline-block, or floated */ border-radius: 3px; background-color: none; border-color: transparent; color: #FFFFFF; -webkit-box-shadow: none; box-shadow: none; text-decoration: none; text-shadow: none; -webkit-transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, text-decoration 0.2s, -webkit-box-shadow 0.2s, -webkit-text-decoration 0.2s; -webkit-filter: none; filter: none; } .ui-datepicker a.ui-corner-all:hover { color: #00A4FD; text-decoration: none; } .ui-datepicker a.ui-corner-all:focus { color: #00A4FD; text-decoration: underline; -webkit-box-shadow: 0 0 1px 2px #00A4FD; box-shadow: 0 0 1px 2px #00A4FD; border-collapse: separate; /* Fix IE9 Issue with box-shadow */ outline: 0; text-decoration: none; } .ui-datepicker a.ui-corner-all:focus:active:not([disabled]) { -webkit-box-shadow: none; box-shadow: none; } .ui-datepicker a.ui-corner-all:active, .ui-datepicker a.ui-corner-all.active { color: #00A4FD; text-decoration: none; } .ui-datepicker a.ui-corner-all.disabled, .ui-datepicker a.ui-corner-all[disabled], .ui-datepicker a.ui-corner-all.disabled:hover, .ui-datepicker a.ui-corner-all[disabled]:hover, .ui-datepicker a.ui-corner-all.disabled:focus, .ui-datepicker a.ui-corner-all[disabled]:focus, .ui-datepicker a.ui-corner-all.disabled:active, .ui-datepicker a.ui-corner-all[disabled]:active { color: #5C6773; text-decoration: none; cursor: not-allowed; } .ui-datepicker a.ui-corner-all { width: 32px; height: 32px; text-align: center; padding:0; } .ui-datepicker a.ui-corner-all:hover { cursor: pointer; /* ensure pointer if missing href */ color: #006EAA; background: #F7F8FA; font-weight: normal; } .ui-datepicker a.ui-corner-all:hover .ui-icon:after { color: #006EAA; } /* .ui-datepicker */ /* * jQuery UI Resizable $VERSION * * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) * Dual licensed under the MIT or GPL Version 2 licenses. * http://jquery.org/license * * http://docs.jquery.com/UI/Resizable#theming */ .ui-resizable { position: relative;} .ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block; } .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; } .ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; } .ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; } .ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; } .ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; } .ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; } .ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; } .ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; } .ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;} .ui-resizable-handle { width: 100%; height: 9px; background-color: transparent; z-index: 1000; cursor: ns-resize; cursor: row-resize; bottom: 0; } .ui-resizable-handle:before { content: ""; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-top:-1px; display: block; border-radius: 3px; border: none; height: 6px; width: 6px; background-color: rgba(0, 0, 0, 0.25); } .ui-resizable-handle:hover { /* .gradient-vertical($interactiveGradientStartColorHover, $interactiveGradientEndColorHover); */ } .ui-resizable-handle .ui-draggable-dragging { position: relative; } .ui-resizable:hover .ui-resizable-handle { visibility: visible; }