|
|
/*************************************************************************************************/
|
|
|
/* 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
|
|
|
<div class="section-padded">
|
|
|
padded content
|
|
|
</div>
|
|
|
*/
|
|
|
.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
|
|
|
<div class="container container-full-width">
|
|
|
content here ...
|
|
|
</div>
|
|
|
*/
|
|
|
.container-full-width {
|
|
|
padding: 0;
|
|
|
}
|
|
|
/* force full width even in padded container
|
|
|
<div class="container section-padded">
|
|
|
padded content here ...
|
|
|
<div class="push-margins">
|
|
|
expanded content here ...
|
|
|
</div>
|
|
|
</div>
|
|
|
*/
|
|
|
.push-margins {
|
|
|
margin-left: -20px;
|
|
|
margin-right: -20px;
|
|
|
}
|
|
|
/* new image replacement
|
|
|
<span class="hide-text">hidden</span>
|
|
|
*/
|
|
|
.hide-text {
|
|
|
text-indent: 100%;
|
|
|
white-space: nowrap;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
/*************************************************************************************************/
|
|
|
/* PANELS */
|
|
|
/*************************************************************************************************/
|
|
|
/* panels for dashboards?
|
|
|
<div class="panel">
|
|
|
panel content ...
|
|
|
</div>
|
|
|
<div class="panel">
|
|
|
panel content ...
|
|
|
</div>
|
|
|
<div class="panel">
|
|
|
panel content ...
|
|
|
</div>
|
|
|
*/
|
|
|
.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?
|
|
|
<div class="panel-row">
|
|
|
<div class="panel">
|
|
|
panel content ...
|
|
|
</div>
|
|
|
<div class="panel">
|
|
|
panel content ...
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="panel-row">
|
|
|
<div class="panel">
|
|
|
panel content ...
|
|
|
</div>
|
|
|
<div class="panel">
|
|
|
panel content ...
|
|
|
</div>
|
|
|
</div>
|
|
|
*/
|
|
|
.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
|
|
|
<p>normal</p>
|
|
|
<p class="mono-space">mono space</p>
|
|
|
*/
|
|
|
.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. */
|
|
|
/*************************************************************************************************/
|
|
|
/*
|
|
|
<table class="form">
|
|
|
<tr>
|
|
|
<td>cell</td>
|
|
|
<td>
|
|
|
<div class="help-block">help-block</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>cell</td>
|
|
|
<td>
|
|
|
<div class="help-block">help-block</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
*/
|
|
|
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 */
|
|
|
/* -------------- */
|
|
|
/*
|
|
|
<form class="form-horizontal form-complex">
|
|
|
<div class="control-group">
|
|
|
<label class="control-label" for="">Email</label>
|
|
|
<div class="controls">
|
|
|
<input type="text" id="" placeholder="Email">
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="control-group">
|
|
|
<label class="control-label" for="">Password</label>
|
|
|
<div class="controls">
|
|
|
<input type="password" id="" placeholder="Password">
|
|
|
<span class="help-block help-outer">
|
|
|
eg. this is some help text <br>
|
|
|
that goes outside the form for some reason ;_;
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="control-group">
|
|
|
<div class="controls">
|
|
|
<label class="checkbox">
|
|
|
<input type="checkbox"> Remember me
|
|
|
</label>
|
|
|
<button type="submit" class="btn">Sign in</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</form>
|
|
|
*/
|
|
|
/* 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 */
|
|
|
/* <li class="icon-share"></li> */
|
|
|
/* Search: */
|
|
|
/* \.(icon-[^:]+).* */
|
|
|
/* Replace: */
|
|
|
/* <li class="$1"></li> */
|
|
|
/*************************************************************************************************/
|
|
|
/* example
|
|
|
<a href="#" class="icon-check">Check</a> -
|
|
|
<a href="#" class="icon-check ir">Check</a>
|
|
|
*/
|
|
|
/* 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
|
|
|
<div class="popdown">
|
|
|
<div class="popdown-dialog open">
|
|
|
<div class="arrow"></div>
|
|
|
<div class="popdown-dialog-body">
|
|
|
content ...
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
*/
|
|
|
/* 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
|
|
|
|
|
|
<div class="popdown">
|
|
|
<div class="popdown-dialog popdown-dialog-padded open">
|
|
|
<div class="arrow"></div>
|
|
|
<div class="popdown-dialog-body">
|
|
|
content ...
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
*/
|
|
|
.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. */
|
|
|
/*************************************************************************************************/
|
|
|
/*
|
|
|
<span class="caret"></span>
|
|
|
*/
|
|
|
.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 */
|
|
|
/*************************************************************************************************/
|
|
|
/*
|
|
|
<a class="btn">Button</a>
|
|
|
<a class="btn :hover">Button</a>
|
|
|
<a class="btn active">Button</a>
|
|
|
<button class="btn">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. */
|
|
|
/*************************************************************************************************/
|
|
|
/*
|
|
|
<a class="btn btn-primary">Primary</a>
|
|
|
<a class="btn btn-primary :hover">Primary</a>
|
|
|
<a class="btn btn-primary active">Primary</a>
|
|
|
<button class="btn btn-primary">Primary</button>
|
|
|
*/
|
|
|
.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 */
|
|
|
/*************************************************************************************************/
|
|
|
/*
|
|
|
<a href="#" class="btn-pill">Pill</a>
|
|
|
<a href="#" class="btn-pill :hover">Pill</a>
|
|
|
<a href="#" class="btn-pill :hover :active">Pill</a>
|
|
|
<a href="#" class="btn-pill active">Pill</a>
|
|
|
*/
|
|
|
.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 */
|
|
|
/*************************************************************************************************/
|
|
|
/*
|
|
|
<a class="btn btn-draggable">Draggable</a>
|
|
|
<button class="btn btn-draggable">Draggable</button>
|
|
|
<div class="btn-combo">
|
|
|
<div class="btn btn-draggable">Combo</div>
|
|
|
<div class="btn"><i class="icon-pencil"></i></div>
|
|
|
</div>
|
|
|
*/
|
|
|
.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
|
|
|
<div class="btn-toolbar">
|
|
|
<div class="btn-group">
|
|
|
<button class="btn">1</button> <button class="btn">2</button> <button class="btn">3</button>
|
|
|
<div class="btn-combo">
|
|
|
<button class="btn">Action</button>
|
|
|
<button class="btn dropdown-toggle" data-toggle="dropdown">
|
|
|
<span class="caret"></span>
|
|
|
</button>
|
|
|
<ul class="dropdown-menu">
|
|
|
<li>
|
|
|
<a href="#">item 1</a>
|
|
|
</li>
|
|
|
<li>
|
|
|
<a href="#">item 2</a>
|
|
|
</li>
|
|
|
<li>
|
|
|
<a href="#">item 3</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div><!-- /.btn-combo -->
|
|
|
</div><!-- /.btn-group -->
|
|
|
</div><!-- /.btn-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 */
|
|
|
/*************************************************************************************************/
|
|
|
/*
|
|
|
<ul class="nav nav-tabs">
|
|
|
<li><a href="#">tab</a></li>
|
|
|
<li class="active"><a href="#">tab</a></li>
|
|
|
<li><a href="#">tab</a></li>
|
|
|
</ul>
|
|
|
*/
|
|
|
.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
|
|
|
<div class="pagination">
|
|
|
<ul>
|
|
|
<li><a href="#">Prev</a></li>
|
|
|
<li><a href="#">1</a></li>
|
|
|
<li><a href="#">2</a></li>
|
|
|
<li><a href="#">3</a></li>
|
|
|
<li><a href="#">4</a></li>
|
|
|
<li><a href="#">Next</a></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
|
|
|
*/
|
|
|
.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 class="body-modal-open">
|
|
|
<div class="modal fade">
|
|
|
<div class="modal-header">
|
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
|
<h3>Modal header</h3>
|
|
|
</div>
|
|
|
<div class="modal-body">
|
|
|
<p>One fine body…</p>
|
|
|
</div>
|
|
|
<div class="modal-footer">
|
|
|
<a href="#" class="btn">Close</a>
|
|
|
<a href="#" class="btn btn-primary">Save changes</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- static example -->
|
|
|
<div style="position: relative; top: auto; left: auto; margin: 0 auto 20px; z-index: 1; max-width: 100%;" class="modal">
|
|
|
<div class="modal-header">
|
|
|
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
|
|
|
<h3>Modal header</h3>
|
|
|
</div>
|
|
|
<div class="modal-body">
|
|
|
<p>One fine body…</p>
|
|
|
</div>
|
|
|
<div class="modal-footer">
|
|
|
<a class="btn" href="#">Close</a>
|
|
|
<a class="btn btn-primary" href="#">Save changes</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</body>
|
|
|
*/
|
|
|
/* 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. */
|
|
|
/*===============================================================================================*/
|
|
|
/*
|
|
|
<div class="accordion" id="accordion2">
|
|
|
<div class="accordion-group">
|
|
|
<div class="accordion-heading">
|
|
|
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
|
|
|
<i class="icon-accordion-arrow"></i>
|
|
|
Collapsible Group Item #1</a>
|
|
|
</div>
|
|
|
<div id="collapseOne" class="accordion-body collapse in">
|
|
|
<div class="accordion-inner">
|
|
|
Anim pariatur cliche...
|
|
|
</div>
|
|
|
</div>
|
|
|
</div><!-- /.accordion-group -->
|
|
|
<div class="accordion-group">
|
|
|
<div class="accordion-heading">
|
|
|
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
|
|
|
<i class="icon-accordion-arrow"></i>
|
|
|
Collapsible Group Item #2</a>
|
|
|
</div>
|
|
|
<div id="collapseTwo" class="accordion-body collapse">
|
|
|
<div class="accordion-inner">
|
|
|
Anim pariatur cliche...
|
|
|
</div>
|
|
|
</div>
|
|
|
</div><!-- /.accordion-group -->
|
|
|
</div><!-- /.accordion -->
|
|
|
*/
|
|
|
/* 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;
|
|
|
}
|
|
|
|