bootstrap.css

/**
 * @license
 * Copyright 2019-2020 CERN and copyright holders of ALICE O2.
 * See http://alice-o2.web.cern.ch/copyright for details of the copyright holders.
 * All rights not expressly granted are reserved.
 *
 * This software is distributed under the terms of the GNU General Public
 * License v3 (GPL Version 3), copied verbatim in the file "COPYING".
 *
 * In applying this license CERN does not waive the privileges and immunities
 * granted to it by virtue of its status as an Intergovernmental Organization
 * or submit itself to any jurisdiction.
*/

:root {
  /* Due to Alice's colors going mainly into red, which is about errors
     in the web interfaces, the complementary color (blue) is used as a
     primary color.
  */
  --color-red: #d62631; /* Alice color */
  --color-soft-red: #c75352; /* Alice color */
  --color-orange: #ef8239; /* Alice color */
  --color-dark-blue: #4290C5; /* Alice color */
  --color-blue: #39A6EF; /* Complementary color of orange */
  --color-light-blue: #dbedff;
  --color-green: #4caf50;

  --color-black: #000; /* Darkest color */
  --color-gray-darker: #757575;
  --color-gray-dark: #9e9e9e;
  --color-gray: #d5d5d5;
  --color-gray-light: #eee;
  --color-gray-lighter: #f7f7f7;
  --color-white: #fff; /* Lightest color */

  /* map to semantic names */
  --color-primary: var(--color-blue);
  --color-primary-dark: #2b84bf;
  --color-warning: var(--color-orange);
  --color-warning-darker: #cb5b10;
  --color-danger: var(--color-red);
  --color-danger-dark: #b51822;
  --color-success: var(--color-green);
  --color-success-dark: #357a38;
  --color-global-run: var(--color-light-blue);

  /* padding and margin */
  --space-xs: .25rem;
  --space-s: .5rem;
  --space-m: 1rem;
  --space-l: 2rem;
  --space-xl: 4rem;

  /* fixed size */
  --ui-component-large: 850px;
}

/* reset what specific browsers do */
body { margin: 0; font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--color-black); text-align: left; background-color: var(--color-white); font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; }
* { outline: 0; }
* { box-sizing: border-box; }
hr { border: 0; height: 1px; background-color: var(--color-gray-dark); }
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0; }
code { font-family: monospace, monospace; font-size: 0.8em; padding: 0.2em 0.4em; margin: 0; background-color: var(--color-gray-lighter); }
pre { margin: 0 0 1em 0; padding: 1em; overflow: auto; background-color: var(--color-gray-lighter); }
button, input, optgroup, select, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }

/* Scroll */
.scroll-off { overflow: hidden !important; }
.scroll-y { overflow-x: hidden !important; overflow-y: auto !important; }
.scroll-auto { overflow: auto !important; }

/* text utilities */
.text-left  { text-align: left; }
.text-right  { text-align: right; }
.text-center  { text-align: center; }
.text-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.text-no-select { user-select: none; }
.text-light { font-weight: lighter; }

/* font scale */
h1, .f1 { font-size: 3rem; }
h2, .f2 { font-size: 2.25rem; }
h3, .f3 { font-size: 1.5rem; }
h4, .f4 { font-size: 1.25rem; }
h5, .f5 { font-size: 1rem; }
h6, .f6 { font-size: .875rem; }
.f7 { font-size: .75rem; } /* very small */

/* 'measure' controls the width of a paragraph text to increase readability */
.measure { max-width: 30em; } /* Measure is limited to ~66 characters */
.measure-wide { max-width: 34em; } /* Measure is limited to ~80 characters */
.measure-narrow { max-width: 20em; } /* Measure is limited to ~45 characters */

/* display */
.d-none         { display: none !important; }
.d-inline       { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block        { display: block !important; }

/* position */
.relative { position: relative !important; }
.absolute { position: absolute !important; }

/* use all space provided by relative parent node */
.absolute-fill { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

/* flexbox */
.flex-row { display: flex; flex-direction: row; }
.flex-column { display: flex; flex-direction: column; }
.flex-wrap { display: flex; flex-wrap: wrap; }
.flex-row > .flex-grow { flex-grow: 1; width: 0; } /* take all available space, no more, no less */
.flex-column > .flex-grow { flex-grow: 1; height: 0; } /* take all available space, no more, no less */
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }
.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.items-center   { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch  { align-items: stretch; }

/* height scale */
.h1 { height: 1rem; }
.h2 { height: 2rem; }
.h3 { height: 4rem; }
.h4 { height: 8rem; }
.h-100 { height: 100%; }

/* width scale */
.w-5 { width: 5%; }
.w-10 { width: 10%; }
.w-15 { width: 15%; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-30 { width: 30%; }
.w-33 { width: 33%; }
.w-40 { width: 40%; }
.w-45 { width: 45%; }
.w-50 { width: 50%; }
.w-55 { width: 55%; }
.w-60 { width: 60%; }
.w-65 { width: 65%; }
.w-70 { width: 70%; }
.w-75 { width: 75%; }
.w-80 { width: 80%; }
.w-85 { width: 85%; }
.w-90 { width: 90%; }
.w-95 { width: 95%; }
.w-100 { width: 100%; }

.w-wrapped { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* padding */
.p0 { padding: 0; }
.p1 { padding: var(--space-xs); }
.p2 { padding: var(--space-s); }
.p3 { padding: var(--space-m); }
.p4 { padding: var(--space-l); }
.ph1 { padding-left: var(--space-xs); padding-right: var(--space-xs); }
.ph2 { padding-left: var(--space-s); padding-right: var(--space-s); }
.ph3 { padding-left: var(--space-m); padding-right: var(--space-m); }
.ph4 { padding-left: var(--space-l); padding-right: var(--space-l); }
.pv1 { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.pv2 { padding-top: var(--space-s); padding-bottom: var(--space-s); }
.pv3 { padding-top: var(--space-m); padding-bottom: var(--space-m); }
.pv4 { padding-top: var(--space-l); padding-bottom: var(--space-l); }

/* margin */
.m0 { margin: 0; }
.m1 { margin: var(--space-xs); }
.m2 { margin: var(--space-s); }
.m3 { margin: var(--space-m); }
.m4 { margin: var(--space-l); }
.mh1 { margin-left: var(--space-xs); margin-right: var(--space-xs); }
.mh2 { margin-left: var(--space-s); margin-right: var(--space-s); }
.mh3 { margin-left: var(--space-m); margin-right: var(--space-m); }
.mh4 { margin-left: var(--space-l); margin-right: var(--space-l); }
.mv1 { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
.mv2 { margin-top: var(--space-s); margin-bottom: var(--space-s); }
.mv3 { margin-top: var(--space-m); margin-bottom: var(--space-m); }
.mv4 { margin-top: var(--space-l); margin-bottom: var(--space-l); }

/* flex and grid gap */
.g0 { gap: 0; }
.g1 { gap: var(--space-xs); }
.g2 { gap: var(--space-s); }
.g3 { gap: var(--space-m); }
.g4 { gap: var(--space-l); }
.gc1 { column-gap: var(--space-xs); }
.gc2 { column-gap: var(--space-s); }
.gc3 { column-gap: var(--space-m); }
.gc4 { column-gap: var(--space-l); }
.gr1 { row-gap: var(--space-xs); }
.gr2 { row-gap: var(--space-s); }
.gr3 { row-gap: var(--space-m); }
.gr4 { row-gap: var(--space-l); }

/* radius */
.br1 { border-radius: .125rem; }
.br2 { border-radius: .25rem; }
.br3 { border-radius: .5rem; }
.br4 { border-radius: 1rem; }
.br-100 { border-radius: 100%; }
.br-pill { border-radius: 9999px; }

/* theme */
.primary { color: var(--color-primary) !important; }
.warning { color: var(--color-warning) !important; }
.danger { color: var(--color-danger) !important; }
.success { color: var(--color-success) !important; }
.global-run-color {color: var(--color-global-run) !important;}

.white { color: var(--color-white) !important; }
.gray { color: var(--color-gray) !important; }
.gray-darker { color: var(--color-gray-darker) !important; }
.black { color: var(--color-black) !important; }

.bg-primary { background-color: var(--color-primary) !important; }
.bg-warning { background-color: var(--color-warning) !important; }
.bg-danger { background-color: var(--color-danger) !important; }
.bg-success { background-color: var(--color-success) !important; }
.bg-global-run {background-color: var(--color-global-run) !important;}

.bg-white { background-color: var(--color-white) !important; }
.bg-gray-darker { background-color: var(--color-gray-darker) !important; }
.bg-gray { background-color: var(--color-gray) !important; }
.bg-gray-light { background-color: var(--color-gray-light) !important; }
.bg-gray-lighter { background-color: var(--color-gray-lighter) !important; }
.bg-black { background-color: var(--color-black) !important; }

a { color: var(--color-blue); text-decoration: none; }
a:hover { color: var(--color-blue); text-decoration: underline; }

/* SVG icons - scale as a font */
svg.icon { height: 1em; width: 1em; margin-bottom: -0.2em; }
.fill-primary { fill: currentcolor; }
.fill-green { fill: var(--color-success); }
.fill-orange { fill: var(--color-orange); }

.actionable-icon { cursor: pointer; }
.actionable-icon:hover { transform: scale(1.2); }
.actionable-icon:active { transform: scale(1.5); }

/* button */

.btn { display: inline-block; font-family: inherit; padding: 0.5em 1em; border: 0; border-radius: .25rem; font-size: 1em; line-height: 1; text-align: center; cursor: pointer; text-decoration: none; user-select: none; position: relative; }
.btn-sm { display: inline-block; font-family: inherit; padding: .3em .7em; border: 0; border-radius: .25rem; font-size: 1em; line-height: 1; text-align: center; cursor: pointer; text-decoration: none; user-select: none; position: relative; margin-left: .3em; }

.btn { background-color: var(--color-gray-light); color: var(--color-gray-darker); }
.btn:hover { background-color: var(--color-gray); color: var(--color-white); }
.btn:active, .btn.active, .dropdown-open > .btn { background-color: var(--color-gray); box-shadow: inset 0 2px 2px rgba(0,0,0,.1) !important; }
.btn[disabled] { box-shadow: none; opacity: 0.4; cursor: not-allowed; }

.btn.btn-primary { background-color: var(--color-primary); color: var(--color-white); }
.btn.btn-primary:hover { background-color: var(--color-primary-dark); color: var(--color-white);}
.btn.btn-primary:active, .btn.btn-primary.active { background-color: var(--color-dark-blue); color: var(--color-white); }
.btn.btn-primary[disabled] { background-image: linear-gradient(var(--color-primary), var(--color-dark-blue)); color: var(--color-white); opacity: 0.4; box-shadow: none; cursor: not-allowed; }

.btn.btn-danger { color: var(--color-danger); }
.btn.btn-danger:hover { background-color: var(--color-danger); color: var(--color-white); }
.btn.btn-danger:active, .btn.btn-danger.active { background-color: var(--color-danger-dark); color: var(--color-white); }
.btn.btn-danger[disabled] { background-image: linear-gradient(var(--color-danger), var(--color-danger-dark)); color: var(--color-white); opacity: 0.4; box-shadow: none; cursor: not-allowed; }

.btn.btn-success { color: var(--color-success); }
.btn.btn-success:hover { background-color: var(--color-success); color: var(--color-white); }
.btn.btn-success:active, .btn.btn-success.active { background-color: var(--color-success-dark); color: var(--color-white); }
.btn.btn-success[disabled] { background-image: linear-gradient(var(--color-success), var(--color-success-dark)); color: var(--color-white); opacity: 0.4; box-shadow: none; cursor: not-allowed; }

.btn.btn-warning { color: var(--color-warning); }
.btn.btn-warning:hover { background-color: var(--color-warning); color: var(--color-white); }
.btn.btn-warning:active,
.btn.btn-warning.active { background-color: var(--color-warning-darker); color: var(--color-white); }
.btn.btn-warning[disabled] { background-image: linear-gradient(var(--color-warning), var(--color-warning-darker)); color: var(--color-white); opacity: 0.4; box-shadow: none; cursor: not-allowed; }

.btn.loading, .btn.loading:focus, .btn.loading:hover { color: transparent !important; }
.btn.loading::after { left: calc(50% - (1em / 2)); top: calc(50% - (1em / 2)); position: absolute!important; animation: spinAround .5s infinite linear; border: 2px solid #0000003d; border-radius: 100%; border-right-color: transparent; border-top-color: transparent; content: ""; display: block; height: 1em; width: 1em; }

.btn-group { display: inline-flex; }
.btn-group .btn:not(:first-child):not(:last-child) { border-radius: 0; }
.btn-group .btn:first-child:not(:last-child) { border-radius: .25rem 0 0 .25rem; }
.btn-group .btn:last-child:not(:first-child) { border-radius: 0 .25rem .25rem 0; }
.btn-group .btn:hover, .btn-group .btn:focus { z-index: 3; }

.btn.btn-tab { background-color: transparent !important; opacity: 1; position: relative; color: var(--color-gray-darker); }
.btn.btn-tab.selected { color: var(--color-primary); }
.btn.btn-tab.selected::after { content: ""; display: block; border: 1px solid var(--color-blue); border-radius: 1em; position: absolute; left: 0; right: 0; bottom: -2px;}

/* badge */

.badge { display: inline-block; padding: .25em .4em; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25rem; }

/* menu */

.menu-title { text-transform: uppercase; height: 2em; line-height: 2em; color: var(--color-gray-dark); padding-left: 1em; font-size: .75em; font-weight: 100; margin: 0.5em; user-select: none; }
.menu-item { cursor: pointer; text-decoration: none; height: 2em; line-height: 2em; padding-left: 1em; padding-right: 1em; color: var(--color-gray-darker); font-weight: 100; margin: 0.25em; border-radius: 0.25em; display: block; user-select: none; }
.menu-item:hover { text-decoration: none; background-color: var(--color-gray-dark); color: var(--color-gray-lighter); }
.menu-item:active { background-color: var(--color-gray-dark); color: var(--color-black);  }
.menu-item.selected { background-color: var(--color-primary); color: var(--color-white); }

/* dropdown */

.dropdown { position: relative; display: inline-block; }
.dropdown-open > .dropdown-menu { display: block; }
.dropdown-menu { z-index: 300; box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2); display: none; position: absolute; top: calc(100% + 0.1rem); left: 0.1rem; z-index: 1000; font-size: 1rem; background-color: #fff; border: 1px solid rgba(0,0,0,.15); border-radius: .25rem; }


/* dropup */

.dropup { position: relative; display: inline-block; }
.dropup-open>.dropup-menu { display: block; }
.dropup-menu { box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); display: none; position: absolute; bottom: calc(100% + 0.1rem); left: 0.1rem; z-index: 1000; font-size: 1rem; background-color: #fff; border: 1px solid rgba(0, 0, 0, .15); border-radius: .25rem; }

/* popover */

.popover { flex-shrink: 0;flex-wrap: wrap;align-items: flex-start;position: absolute;top: 0;left: 0;z-index: 1002;max-width: var(--ui-component-large); }

/* tooltip */
.tooltip {position: relative; display: inline-block; border-bottom: 1px dotted black;}
.tooltip .tooltiptext {visibility: hidden; width: 118px; background-color: #555; color: #fff; text-align: center; padding: 3px; border-radius: 6px; position: absolute; z-index: 1;}
.tooltiptext::after {content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent #555 transparent;}
.tooltip:hover .tooltiptext {visibility: visible;}

/* switches */
.switch { position: relative; display: inline-block; width: 35px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--color-gray); -webkit-transition: .4s; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 16px; width: 12px; left: 2px; bottom: 2px; background-color: white; -webkit-transition: .4s; transition: .4s; }
input:checked + .slider { background-color: var(--color-blue); }
input:focus + .slider { box-shadow: 0 0 1px var(--color-blue); }
input:checked + .slider:before { -webkit-transform: translateX(19px); -ms-transform: translateX(19px); transform: translateX(19px); }
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }

/* form */

.form-group { margin-bottom: 1em; }
label { display: block; margin-bottom: 0.5em; }
.form-control { line-height: 1; background-color: rgb(255, 255, 255); border-width: 1px; border-style: solid; border-color: rgb(221, 221, 221); border-image: initial; border-radius: 0.25em; font-size: 1em; padding: 0.35em; display: block; width: 100%; }
.form-control:focus { border-color: #2188ff; outline: none; box-shadow: inset 0 1px 2px rgba(27,31,35,0.075), 0 0 0 0.2em rgba(3,102,214,0.3); }
.form-inline.form-control { display: inline-block; width: auto; }

.form-check { position: relative; display: block; padding-left: 1.25rem; }
.form-check-input { position: absolute; margin-top: .3rem; margin-left: -1.25rem; }
.form-check-label { margin-bottom: 0; cursor: pointer; }

/* Component sidebar */

.sidebar { width: 15em; background-color: var(--color-gray-light); transition: width 0.3s; overflow: hidden; }
.sidebar-closed { width: 0; }
.sidebar .sidebar-content { width: 15em; height: 100%; overflow: hidden; }
.sidebar-extend { width: 30em; }
.sidebar-extend .sidebar-content { width: 30em; }
.sidebar-minimal { width: 3.6em; }
/* Component Notification */
/* moves to screen to get user attention */
/* 'display none' in .notification-close allow after animation to click though notification on other content */
/* 'user-select none' in .notification allow to click through the div while centering content */

.notification { position: absolute; top: 2em; width: 100%; text-align: center; cursor: pointer; pointer-events: none; }
.notification-content { transition: opacity 0.8s cubic-bezier(0.18, 0.89, 0.34, 1.11), filter 0.8s cubic-bezier(0.18, 0.89, 0.34, 1.11); }
.notification-open { display: inline-flex; opacity: 1; filter: blur(0); pointer-events: all; }
.notification-close { display: inline-flex; opacity: 0; filter: blur(5em); pointer-events: none;  }
.btn.notification-copy-btn { border-radius: 0 .25rem .25rem 0; background-color: rgba(0, 0, 0, .15); color: inherit; }
.btn.notification-copy-btn:hover { background-color: rgba(0, 0, 0, .3); color: inherit; }
.btn.notification-copy-btn:active { background-color: rgba(0, 0, 0, .22); }
.notification-message { border-radius: .25rem 0 0 .25rem; }
.notification-message:hover { background-color: rgba(0, 0, 0, .15); }
.notification-message:active { background-color: rgba(0, 0, 0, .08); }

/* Basic table */

.table { border-collapse: collapse; width: 100%; margin-bottom: 1em; border-radius: 0; }
.table thead { background-color: var(--color-gray-light); color: var(--color-black); }
.table thead { border-bottom: 1px solid var(--color-gray); }
.table th, .table td { padding: 0.625em; text-align: left; }
.table th { font-weight: bold; }
.table tbody tr:nth-child(odd) { background-color: var(--color-white); }
.table tbody tr:nth-child(even) { background-color: var(--color-gray-lighter); }
.table-sm th, .table-sm td { padding: 0.3em; }
.table-primary>th, .table-primary>td { background-color: var(--color-primary); color: var(--color-white); }

/* Shadow
0: content
1: card of content
2: topbar
3: dropdown menu
4: notification
https://material.io/design/environment/elevation.html#default-elevations
*/

.shadow-level0 { z-index: 0; }
.shadow-level1 { z-index: 100; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2); }
.shadow-level2 { z-index: 200; box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.2); }
.shadow-level3 { z-index: 300; box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2) }
.shadow-level4 { z-index: 400; box-shadow: 0 16px 34px 4px rgba(0,0,0,0.14), 0 6px 28px 4px rgba(0,0,0,0.12), 0 10px 10px -6px rgba(0,0,0,0.2) }

.level0 { z-index: 0; }
.level1 { z-index: 100; }
.level2 { z-index: 200; }
.level3 { z-index: 300; }
.level4 { z-index: 400; }

/* Component spinner atomic */
/* Credit: http://epic-spinners.epicmax.co/ */

.atom-spinner { height: 1em; width: 1em; overflow: hidden; display: inline-block; vertical-align: middle; user-select: none; }
  .spinner-inner { position: relative; display: block; height: 100%; width: 100%; }
  .spinner-circle { display: block; position: absolute; color: currentColor; font-size: calc(1em * 0.24); top: 50%; left: 50%; transform: translate(-50%, -50%); }
  .spinner-line { position: absolute; width: 100%; height: 100%; border-radius: 50%; animation-duration: 1s;
    border-left-width: calc(1em / 20); border-top-width: calc(1em / 20); border-left-color: currentColor; border-left-style: solid;
    border-top-style: solid; border-top-color: transparent; top: 0; bottom: 0; left: 0; right: 0; }

  .spinner-line:nth-child(1) { animation: atom-spinner-animation-1 1s linear infinite; transform: rotateZ(120deg) rotateX(66deg) rotateZ(0deg); }
  .spinner-line:nth-child(2) { animation: atom-spinner-animation-2 1s linear infinite; transform: rotateZ(240deg) rotateX(66deg) rotateZ(0deg); }
  .spinner-line:nth-child(3) { animation: atom-spinner-animation-3 1s linear infinite; transform: rotateZ(360deg) rotateX(66deg) rotateZ(0deg); }

@keyframes atom-spinner-animation-1 { 100% { transform: rotateZ(120deg) rotateX(66deg) rotateZ(360deg); } }
@keyframes atom-spinner-animation-2 { 100% { transform: rotateZ(240deg) rotateX(66deg) rotateZ(360deg); } }
@keyframes atom-spinner-animation-3 { 100% { transform: rotateZ(360deg) rotateX(66deg) rotateZ(360deg); } }

/* effects */

.highlight { animation-name: highlight; animation-duration: 1s; }
@keyframes highlight {
  from { box-shadow: inset 0px 10000px 0px yellow; }
  to { box-shadow: inset 0px 10000px 0px transparent; }
}

.spin-around { animation: spinAround 0.8s infinite linear; }
@keyframes spinAround {
  from { transform:rotate(0deg); }
  to { transform:rotate(359deg); }
}

.appearance { animation-name: appearance; animation-duration: 0.2s; }
@keyframes appearance {
  from { opacity: 0; }
  to { opacity: 1; }
}