src/min/papillon.min.css
/*
* Soft CSS - The tweakable CSS framework
* Romain Arnaud - 2016-2017
*/
/*
* Soft CSS - The tweakable CSS framework
* Romain Arnaud - 2016
*/
/*
******************************************************************************
* COLOR PALETTE
******************************************************************************
*/
/*
* HOW TO USE
* - Define the default color each time ( $blue-default, $red-default, etc. )
* - The shades will be automatically calculated using lighten() and darken()
* - At the end, choose the colors of elements using the color palette
* so you have an uniform color scheme
*/
/********************
* COLOR PALETTE *
********************/
/* THEME */
/* Put true here if your theme is a night one ( dark bakcground and white font ) */
/*** COMPLEMENTARY COLORS ***/
/* GREY */
/* Almost white */
/* Very light grey */
/* Darky dark */
/* Almost black */
/*** USED FOR THE ELEMENTS ***/
/* HEADER */
/*#ecf0f1;*/
/*
******************************************************************************
* LAYOUT CONTROL
******************************************************************************
*/
/*
***** NAVIGATION *****
*/
/********** SIZES **********/
/*
***** GRID LAYOUT *****
*/
/*
* -- Container threshold sizes --
* The name is a bit misleading as it isn't only used for containers but
* for the whole responsiveness of the website ( it's the value used in the
* media queries )
*/
/*
******************************************************************************
* FONTS
******************************************************************************
*/
/* basic text */
/* basic text sans serif */
/* basic text serif ? */
/* h1, h2, h3, h4, h5, h6 */
/* Header */
/* code */
/* Basic text */
/* Basic text */
/* Basic text */
/* Header */
/* We reset all the rules so it looks the same for all browsers */
/*! sanitize.css v3.3.0 | CC0 1.0 Public Domain | github.com/10up/sanitize.css */
/* Latest tested: Android 6, Chrome 48, Edge 13, Firefox 44, Internet Explorer 11, iOS 9, Opera 35, Safari 9, Windows Phone 8.1 */
/*
* Normalization
*/
abbr[title] {
text-decoration: underline;
/* Chrome 48+, Edge 12+, Internet Explorer 11-, Safari 9+ */
text-decoration: underline dotted;
/* Firefox 40+ */ }
audio:not([controls]) {
display: none;
/* Chrome 44-, iOS 8+, Safari 9+ */ }
b,
strong {
font-weight: bolder;
/* Edge 12+, Safari 6.2+, and Chrome 18+ */ }
button {
-moz-appearance: button;
-webkit-appearance: button;
/* iOS 8+ */
overflow: visible;
/* Internet Explorer 11- */ }
button::-moz-focus-inner, input::-moz-focus-inner {
border: 0;
/* Firefox 4+ */
padding: 0;
/* Firefox 4+ */ }
button:-moz-focusring, input:-moz-focusring {
outline: 1px dotted ButtonText;
/* Firefox 4+ */ }
button,
select {
text-transform: none;
/* Firefox 40+, Internet Explorer 11- */ }
details {
display: block;
/* Edge 12+, Firefox 40+, Internet Explorer 11-, Windows Phone 8.1+ */ }
html {
-ms-overflow-style: -ms-autohiding-scrollbar;
/* Edge 12+, Internet Explorer 11- */
overflow-y: scroll;
/* All browsers without overlaying scrollbars */
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
/* iOS 8+, Windows Phone 8.1+ */ }
hr {
overflow: visible;
/* Internet Explorer 11-, Edge 12+ */ }
input {
-webkit-border-radius: 0; }
input[type="button"],
input[type="reset"],
input[type="submit"] {
-moz-appearance: button;
-webkit-appearance: button;
/* iOS 8+ */ }
input[type="number"] {
width: auto;
/* Firefox 36+ */ }
input[type="search"] {
-moz-appearance: textfield;
-webkit-appearance: textfield;
/* Chrome 45+, Safari 9+ */ }
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-moz-appearance: none;
-webkit-appearance: none;
/* Chrome 45+, Safari 9+ */ }
main {
display: block;
/* Android 4.3-, Internet Explorer 11-, Windows Phone 8.1+ */ }
pre {
overflow: auto;
/* Internet Explorer 11- */ }
progress {
display: inline-block;
/* Internet Explorer 11-, Windows Phone 8.1+ */ }
summary {
display: block;
/* Firefox 40+, Internet Explorer 11-, Windows Phone 8.1+ */ }
svg:not(:root) {
overflow: hidden;
/* Internet Explorer 11- */ }
template {
display: none;
/* Android 4.3-, Internet Explorer 11-, iOS 7-, Safari 7-, Windows Phone 8.1+ */ }
textarea {
overflow: auto;
/* Edge 12+, Internet Explorer 11- */ }
[hidden] {
display: none;
/* Internet Explorer 10- */ }
/*
* Universal inheritance
*/
*,
:before,
:after {
box-sizing: inherit; }
* {
font-size: inherit;
line-height: inherit; }
:before,
:after {
text-decoration: inherit;
vertical-align: inherit; }
button,
input,
select,
textarea {
font-family: inherit;
font-style: inherit;
font-weight: inherit; }
/*
* Opinionated defaults
*/
/* specify the margin and padding of all elements */
* {
margin: 0;
padding: 0; }
/* specify the border style and width of all elements */
*,
:before,
:after {
border-style: solid;
border-width: 0; }
/* remove the tapping delay from clickable elements */
a,
area,
button,
input,
label,
select,
textarea,
[tabindex] {
-ms-touch-action: manipulation;
touch-action: manipulation; }
/* specify the standard appearance of selects */
select {
-moz-appearance: none;
/* Firefox 40+ */
-webkit-appearance: none; }
select::-ms-expand {
display: none;
/* Edge 12+, Internet Explorer 11- */ }
select::-ms-value {
color: currentColor;
/* Edge 12+, Internet Explorer 11- */ }
/* use current current as the default fill of svg elements */
svg {
fill: currentColor; }
/* specify the progress cursor of updating elements */
[aria-busy="true"] {
cursor: progress; }
/* specify the pointer cursor of trigger elements */
[aria-controls] {
cursor: pointer; }
/* specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
[aria-disabled] {
cursor: default; }
/* specify the style of visually hidden yet accessible elements */
[hidden][aria-hidden="false"] {
clip: rect(0 0 0 0);
display: inherit;
position: absolute; }
[hidden][aria-hidden="false"]:focus {
clip: auto; }
/*
* Configurable defaults
*/
/* specify the background repeat of all elements */
* {
background-repeat: no-repeat; }
/* specify the root styles of the document */
:root {
background-color: #ffffff;
box-sizing: border-box;
color: #000000;
/*cursor: default;*/
font: 100%/1.5 sans-serif; }
/* specify the text decoration of anchors */
a {
text-decoration: none; }
/* specify the alignment of media elements */
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle; }
/* specify the coloring of form elements */
button,
input,
select,
textarea {
background-color: transparent;
color: inherit; }
/* specify the minimum height of form elements */
button,
[type="button"],
[type="date"],
[type="datetime"],
[type="datetime-local"],
[type="email"],
[type="month"],
[type="number"],
[type="password"],
[type="reset"],
[type="search"],
[type="submit"],
[type="tel"],
[type="text"],
[type="time"],
[type="url"],
[type="week"],
select,
textarea {
min-height: 1.5em; }
/* specify the font family of code elements */
code,
kbd,
pre,
samp {
font-family: monospace, monospace; }
/* specify the list style of nav lists */
nav ol,
nav ul {
list-style: none; }
/* specify the font size of small elements */
small {
font-size: 75%; }
/* specify the border styling of tables */
table {
border-collapse: collapse;
border-spacing: 0; }
/* specify the resizability of textareas */
textarea {
resize: vertical; }
/* specify the background color, font color, and drop shadow of text selections */
::-moz-selection {
background-color: #1c5ddd;
/*#b3d4fc; /* required when declaring ::selection */
color: #ffffff;
text-shadow: none; }
::selection {
background-color: #1c5ddd;
/* required when declaring ::selection */
color: #ffffff;
text-shadow: none; }
/* Then we initialize the default values ( must be imported first so they can be
overridden ) */
/*************** CSS INITIALIZATION ***************/
:root {
font-size: 16px; }
html {
width: 100%;
min-height: 100%;
background-color: #fff;
-webkit-font-smoothing: antialiased; }
body {
font-family: Arial, "sans-serif";
background-color: #fff;
line-height: 1.4375;
color: #101010;
width: 100%;
min-height: 100%;
max-width: 100%;
display: block;
margin: 0 auto;
padding: 0;
overflow-x: hidden;
-webkit-transition: all 0.25s;
-moz-transition: all 0.25s;
-o-transition: all 0.25s;
transition: all 0.25s; }
html, p, div, article, form {
margin: 0;
padding: 0;
box-sizing: border-box; }
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
/*************** ELEMENT DEFAULT RULES ***************/
/****
* A *
****/
/***** LINKS *****/
a {
color: #195fc8; }
a:hover, a:visited:hover {
color: #4586e8; }
a:visited {
color: #7718c6; }
/***** ARTICLES *****/
article {
display: block; }
/***** ASIDE *****/
aside {
display: inline-block;
width: 100%;
min-height: 400px;
vertical-align: top;
max-width: 200px;
margin: auto;
background-color: #fff; }
/****
* B *
****/
/***** BLOCKQUOTE *****/
blockquote {
background: rgba(69, 134, 232, 0.1);
padding: 1em;
line-height: 1.5;
width: auto;
display: inline-block;
margin: 0.8em;
border: 1px solid rgba(69, 134, 232, 0.1); }
blockquote:not(.reverse) {
border-left: 4px solid #1c69de;
text-align: left;
float: left; }
blockquote.reverse {
border-right: 4px solid #1c69de;
text-align: right;
float: right; }
blockquote p {
display: inline; }
blockquote footer {
font-size: calc(16px * 0.8);
color: #848b96;
margin-top: 0.5em; }
blockquote cite {
font-style: italic; }
blockquote:not(.reverse) footer::before {
content: '- '; }
blockquote.reverse footer::after {
content: ' -'; }
/****
* C *
****/
/***** CAPTION *****/
caption {
width: 100%;
text-align: center; }
/***** CODE *****/
code {
background-color: rgba(69, 134, 232, 0.1);
font-family: "Source Code Pro", "monospace";
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 0 0.2em;
color: #101010; }
pre > code {
display: block;
margin: 0.4em 1em;
padding: 0.5em;
text-align: left;
border: 1px solid #3e4349;
border-width: 1px 1px 1px 5px;
word-wrap: break-word;
max-width: 100%;
white-space: pre-wrap; }
pre > code[data-lang] {
padding-top: 2em; }
pre > code[data-lang]::before {
content: attr(data-lang);
display: inline-block;
background-color: #3e4349;
color: #fff;
position: relative;
top: calc(-1.33em - 1px);
width: calc(100% + 1em - 2px);
font-size: 150%;
padding: 0 0.6em;
left: calc(-0.5em - 1px);
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0; }
/****
* D *
****/
/***** DIV *****/
div {
display: block; }
/****
* F *
****/
body > footer {
width: 100%;
padding: 2em 1em;
background-color: #0e0e0e;
color: #fff;
text-align: center; }
/****
* H *
****/
/***** HEADER *****/
body > header {
font-size: 96px;
font-family: "Lobster", cursive;
color: #ecf0f1;
background-color: #4586e8;
width: 100%;
text-align: center; }
body > header > small {
font-size: 25%;
font-family: "Source Sans Pro", sans-serif;
color: #dcdcdc;
display: block;
padding-bottom: 2em; }
body > header > img {
height: 64px;
width: auto;
display: inline;
margin: 24px; }
/***** H1, H1, H2, H3, H4, H5, H6 *****/
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
box-sizing: border-box;
color: #101010;
font-family: "Source Sans Pro", sans-serif;
line-height: 2; }
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
color: #848b96;
padding-left: 0;
font-size: 75%; }
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
position: relative;
color: #101010 !important;
display: inline-block;
padding-left: 0.6em; }
h1 a::before,
h2 a::before,
h3 a::before,
h4 a::before,
h5 a::before,
h6 a::before {
content: '#';
color: rgba(182, 208, 246, 0.75);
position: absolute;
left: 0;
line-height: 250%;
font-size: 80%; }
h1 a:hover::before,
h2 a:hover::before,
h3 a:hover::before,
h4 a:hover::before,
h5 a:hover::before,
h6 a:hover::before {
color: #4586e8; }
h1 {
font-size: 40px; }
h2 {
font-size: 32px; }
h3 {
font-size: 24px; }
h4 {
font-size: 20px; }
h5 {
font-size: 16px; }
h6 {
font-size: 12px; }
/***** HR *****/
hr {
width: 80%;
max-width: 600px;
display: block;
margin: 2em auto;
height: 3px;
background-color: #4586e8; }
hr.secondary {
background-color: #9d43e8; }
/****
* I *
****/
/***** IMG *****/
img {
font-family: 'Helvetica';
font-weight: 300;
line-height: 2;
text-align: center;
max-width: 100%;
height: auto;
display: block;
position: relative;
box-sizing: border-box;
margin-left: auto;
margin-right: auto; }
img:after {
content: 'Problem loading " ' attr(alt) ' "';
font-size: 16px;
color: #848b96;
display: block;
position: absolute;
border: 2px dashed #1c69de;
-webkit-border-radius: 0.2em;
-moz-border-radius: 0.2em;
border-radius: 0.2em;
z-index: 2;
top: 0;
left: 0;
max-width: 100%;
height: auto;
background-color: rgba(69, 134, 232, 0.1);
box-sizing: border-box; }
/****
* K *
****/
/***** KEYBOARD *****/
kbd {
background-color: rgba(69, 134, 232, 0.1);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border-width: 1px 1px 3px 1px;
border-style: solid;
border-color: #1c69de;
padding: 0 2px; }
/****
* L *
****/
/***** LIST *****/
li {
margin-left: 1em;
padding: 0.5em 0; }
/***** MAIN *****/
main {
display: block;
width: 100%;
max-width: 1024px;
margin: 0 auto;
background-color: #fff; }
/********** PSEUDO SELECTORS **********/
:target {
outline: 0;
animation: color-fadeout 1s 0s linear; }
/* We import the base classes */
/********** CONTAINERS **********/
.container,
.container-sm,
.container-md,
.container-lg {
display: block;
width: 100%;
margin: 1em auto;
padding: 0.5em; }
.container-sm {
max-width: 730px; }
.container-md {
max-width: 940px; }
.container-lg {
max-width: 1180px; }
/*
* The following classes are classes that are never used by default, but you can
* use them to force the behaviour of an element ( for example if you want to
* force an element to float on the right use "right" )
*/
/********** TITLE **********/
/* Titles of a section with special style added */
.section-header {
position: relative;
left: 0.5em; }
.section-header::before {
content: '';
display: block;
position: absolute;
width: 0;
height: 60%;
top: 20%;
left: -0.5em;
border-right: 6px solid #4586e8; }
/********** ELEMENTS ASPECT **********/
/* Change the aspect of a container to showcase something inside */
.showcase {
background-color: rgba(69, 134, 232, 0.1);
border: #1c69de;
margin: 2em 1em;
padding: 1em;
box-shadow: 0 0 3px 1px #1c69de inset;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px; }
/*** SPOILERS ***/
/* Applied on a span, it hides the text and displays it on hover */
span.spoiler {
color: #101010;
background-color: #101010; }
span.spoiler:hover {
background-color: transparent; }
/* Applied on a div with, it toggle the display with a button */
div.spoiler-block button {
margin: 0.5em auto;
display: block; }
div.spoiler-block .spoiler-content {
display: none; }
/* We import the fonticons-related classes */
/***** GLOBAL RULES *****/
a[target=_blank]::after {
font-family: FontAwesome;
content: "\f08e";
padding-left: 0.5em; }
/* We import the files for the tables */
table {
margin: 1em auto; }
table td {
line-height: 1.6;
padding: 0.2em 0.5em; }
/******** CLASSIC DESIGN ********/
thead, tfoot {
font-weight: bold;
line-height: 2; }
thead {
background-color: #ced3db; }
table {
border: 1px solid #646a72; }
table > :not(:last-child),
tbody > :not(:last-child) {
border-bottom: 1px solid #acb4bf; }
/******** MINIMALISTIC DESIGN ********/
table.min thead,
table.min tbody,
table.min tfoot {
background-color: #777;
background-color: transparent; }
table.min,
table.min thead,
table.min tbody,
table.min td,
table.min tr,
table.min tfoot {
border-width: 0; }
table.min thead {
border-bottom: 2px solid #8e8e8e; }
table.min > :last-child {
border-bottom: 2px solid #c5c5c5; }
table.min tfoot {
border-top: 1px solid #a4a4a4; }
/******** FLAT DESIGN ********/
table.flat,
table.flat * {
border-width: 0; }
/******** ALTERNATING ROWS ********/
table.alt tbody > tr:nth-child(even) {
background: rgba(69, 134, 232, 0.1); }
/*table.alt tbody > tr:nth-child(odd) {background: #fff}*/
/******** REACTIVE DESIGN ********/
table.reactive :not(thead):not(tfoot) tr:hover {
background-color: #fbfcfe;
background-color: rgba(69, 134, 232, 0.1); }
table.reactive :not(thead):not(tfoot) tr td:hover {
background-color: #b6d0f6;
background-color: rgba(69, 134, 232, 0.1); }
/* We import the classes for the forms */
/*
********** INPUT GROUPS **********
*/
/* INPUT-COL */
.input-col {
margin: 1em auto;
width: auto; }
.input-col label {
display: block; }
.input-col input {
display: block;
width: 100%; }
.input-col.center label,
.input-col.center input {
text-align: center; }
/* INPUT-ROW */
.input-row {
width: 100%;
display: flex; }
.input-row label {
flex-basis: 25%;
flex: 1 0;
text-align: right; }
.input-row input {
flex-basis: 75%;
flex: 3 1; }
/*
********** INPUT FIELDS **********
*/
input, label {
line-height: 1.5em;
padding: 0.25em 0.5em; }
input:focus {
border: 1px solid #4586e8; }
/*** TEXT ***/
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"] {
border: 1px solid #acb4bf;
border-radius: 2px;
padding: 0.25em 0.5em; }
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus {
outline: 0;
border-color: #4586e8; }
input[type="text"].invalid,
input[type="email"].invalid,
input[type="password"].invalid,
input[type="search"].invalid,
input[type="url"].invalid {
border-color: #cd2f2b !important; }
input[type="text"].valid,
input[type="email"].valid,
input[type="password"].valid,
input[type="search"].valid,
input[type="url"].valid {
border-color: #36b147 !important; }
/*** BUTTON ***/
input[type="submit"] {
display: block;
margin: 1em auto; }
/* We import the layout for grids and columns */
.soft-row,
.soft-col {
display: -webkit-flex;
display: flex;
box-sizing: border-box;
align-items: stretch;
justify-content: space-between;
padding: 0;
-webkit-flex-wrap: wrap;
flex-wrap: wrap; }
.soft-row,
.soft-col,
.soft-row div,
.soft-col div {
box-sizing: border-box;
text-align: inherit; }
.soft-row {
width: 100%; }
.soft-row, .soft-col {
height: auto;
padding: 0; }
/*
.soft-col :first-child {
margin-top: 0;
}
.soft-col :last-child {
margin-bottom: 0;
}*/
.soft-col > div:not([class*="col"]):not(.soft-row),
.soft-row > div:not([class*="col"]) {
-webkit-flex: 1 0;
flex: 1 0; }
.soft-col > div:not(.soft-row):not(.soft-col):not(.container-sm):not(.container-md):not(.container-lg),
.soft-row > div:not(.soft-row):not(.soft-col):not(.container-sm):not(.container-md):not(.container-lg) {
padding: 0.5em;
margin: 10px; }
/* WIDTH */
.col-1, .space-1 {
width: calc(100% / 12 - 20px); }
.col-2, .space-2 {
width: calc(100% / 6 - 20px); }
.col-3, .space-3 {
width: calc(100% / 4 - 20px); }
.col-4, .space-4 {
width: calc(100% / 3 - 20px); }
.col-5, .space-5 {
width: calc(500% / 12 - 20px); }
.col-6, .space-6 {
width: calc(100% / 2 - 20px); }
.col-7, .space-7 {
width: calc(700% / 12 - 20px); }
.col-8, .space-8 {
width: calc(800% / 12 - 20px); }
.col-9, .space-9 {
width: calc(900% / 12 - 20px); }
.col-10, .space-10 {
width: calc(1000% / 12 - 20px); }
.col-11, .space-11 {
width: calc(1100% / 12 - 20px); }
.col-12 {
width: calc(100% - 20px); }
/* DIVs that are containers of a grid don't need margin */
.col-1.soft-col, .col-1.soft-row {
width: calc(100% / 12); }
.col-2.soft-col, .col-2.soft-row {
width: calc(100% / 6); }
.col-3.soft-col, .col-3.soft-row {
width: calc(100% / 4); }
.col-4.soft-col, .col-4.soft-row {
width: calc(100% / 3); }
.col-5.soft-col, .col-5.soft-row {
width: calc(500% / 12); }
.col-6.soft-col, .col-6.soft-row {
width: calc(100% / 2); }
.col-7.soft-col, .col-7.soft-row {
width: calc(700% / 12); }
.col-8.soft-col, .col-8.soft-row {
width: calc(800% / 12); }
.col-9.soft-col, .col-9.soft-row {
width: calc(900% / 12); }
.col-10.soft-col, .col-10.soft-row {
width: calc(1000% / 12); }
.col-11.soft-col, .col-11.soft-row {
width: calc(1100% / 12); }
.col-12.soft-col, .col-12.soft-row {
width: 100%; }
/* PUSH */
.offset-left-1 {
margin-left: calc(100% / 12) !important; }
.offset-left-2 {
margin-left: calc(100% / 6) !important; }
.offset-left-3 {
margin-left: calc(100% / 4) !important; }
.offset-left-4 {
margin-left: calc(100% / 3) !important; }
.offset-left-5 {
margin-left: calc(500% / 12) !important; }
.offset-left-6 {
margin-left: calc(100% / 2) !important; }
.offset-left-7 {
margin-left: calc(700% / 12) !important; }
.offset-left-8 {
margin-left: calc(800% / 12) !important; }
.offset-left-9 {
margin-left: calc(900% / 12) !important; }
.offset-left-10 {
margin-left: calc(1000% / 12) !important; }
.offset-left-11 {
margin-left: calc(1100% / 12) !important; }
/* PULL */
.offset-right-1 {
margin-right: calc(100% / 12) !important; }
.offset-right-2 {
margin-right: calc(100% / 6) !important; }
.offset-right-3 {
margin-right: calc(100% / 4) !important; }
.offset-right-4 {
margin-right: calc(100% / 3) !important; }
.offset-right-5 {
margin-right: calc(500% / 12) !important; }
.offset-right-6 {
margin-right: calc(100% / 2) !important; }
.offset-right-7 {
margin-right: calc(700% / 12) !important; }
.offset-right-8 {
margin-right: calc(800% / 12) !important; }
.offset-right-9 {
margin-right: calc(900% / 12) !important; }
.offset-right-10 {
margin-right: calc(1000% / 12) !important; }
.offset-right-11 {
margin-right: calc(1100% / 12) !important; }
.space-1,
.space-2,
.space-3,
.space-4,
.space-5,
.space-6,
.space-7,
.space-8,
.space-9,
.space-10,
.space-11 {
padding: 0 !important;
margin: 0 !important;
border: none !important; }
/*************** RESPONSIVE DESIGN ***************/
/* LARGE */
/* Set the value according to the one you put at the beginning */
@media screen and (max-width: 1180px) {
.stack-lg:not(.soft-row) > div,
.stack-lg :not(.soft-row):not(.stack-md):not(.stack-sm) > div {
width: calc(100% - 20px); }
.stack-lg.soft-col > :not(.soft-row):not(.soft-col) {
display: block;
width: calc(100% - 20px); }
[class*="offset-left"] {
margin-left: 0px !important; }
[class*="offset-right"] {
margin-right: 0px !important; } }
/* MEDIUM */
/* Set the value according to the one you put at the beginning */
@media screen and (max-width: 940px) {
.stack-md:not(.soft-row) > div,
.stack-md :not(.soft-row):not(.stack-sm) > div {
width: calc(100% - 20px); }
.stack-md.soft-col > :not(.soft-row):not(.soft-col) {
display: block;
width: calc(100% - 20px); }
[class*="offset-left"] {
margin-left: 0px !important; }
[class*="offset-right"] {
margin-right: 0px !important; } }
/* SMALL */
/* Set the value according to the one you put at the beginning */
@media screen and (max-width: 730px) {
.stack-sm:not(.soft-row) > div,
.stack-sm :not(.soft-row) > div {
width: calc(100% - 20px); }
.soft-col > :not(.soft-row):not(.soft-col) {
display: block;
width: calc(100% - 20px); }
[class*="offset-left"] {
margin-left: 0px !important; }
[class*="offset-right"] {
margin-right: 0px !important; } }
/* We import the classes for the buttons */
button,
.button {
padding: 0.5rem;
line-height: 1em;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
margin: 0.5em;
font-family: Arial, "sans-serif";
box-sizing: border-box;
background-color: #ced3db;
color: #101010;
display: inline-block;
vertical-align: middle;
-webkit-transition: all 0.1s ease-out;
-moz-transition: all 0.1s ease-out;
-o-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
position: relative;
text-align: center; }
button:hover,
.button:hover,
.button:visited:hover,
button:focus,
.button:focus {
cursor: pointer;
background-color: #edf1f7;
color: #101010;
outline: 0; }
button:not(.outline):hover,
.button:not(.outline):hover,
.button:not(.outline):visited:hover,
button:not(.outline):focus,
.button:not(.outline):focus {
box-shadow: 1px 2px 6px 0 #a2a2a2;
top: -1px; }
.button:visited {
color: inherit; }
button:disabled,
.button.disabled {
background-color: #848b96; }
button:disabled:hover {
background-color: #1c69de;
cursor: not-allowed; }
button:not(:disabled):not(.loading):active,
.button:not(.disabled):not(.loading):active {
outline: 0;
background-color: #d8d8d8;
box-shadow: 0 0 0 0 black; }
/********** MODIFIER CLASSES **********/
button.large,
.button.large {
padding: 1rem;
font-size: 1.5em; }
button.large:not(.outline):hover,
.button.large:not(.outline):hover,
button.large:not(.outline):focus,
.button.large:not(.outline):focus {
box-shadow: 2px 4px 12px 0 #a2a2a2;
top: -2px; }
button.loading,
.button.loading {
padding: 0.7em 2em;
content: '';
pointer-events: none; }
button.large.loading,
.button.large.loading {
padding: 0.8em 2.5em; }
button.loading:hover,
.button.loading:hover {
cursor: wait; }
button.primary.loading::after,
button.secondary.loading::after,
button.success.loading::after,
button.info.loading::after,
button.danger.loading::after,
button.warning.loading::after,
button.black.loading::after,
.button.primary.loading:after,
.button.secondary.loading::after,
.button.success.loading::after,
.button.info.loading::after,
.button.danger.loading::after,
.button.warning.loading::after,
.button.black.loading::after {
border-color: transparent transparent white white !important; }
button.loading::after,
.button.loading::after {
animation: spin-right 500ms infinite linear;
border: 2px solid #888;
-webkit-border-radius: 2000px;
-moz-border-radius: 2000px;
border-radius: 2000px;
border-right-color: transparent;
border-top-color: transparent;
content: "";
display: block;
height: 16px;
position: relative;
width: 16px; }
button.large.loading::after,
.button.large.loading::after {
height: calc(16px * 1.5);
width: calc(16px * 1.5); }
button.btn-round,
.button.btn-round {
-webkit-border-radius: 2em !important;
-moz-border-radius: 2em !important;
border-radius: 2em !important; }
button.outline,
.button.outline {
border: 2px solid #2d2d2d;
background-color: transparent;
color: #2d2d2d;
border-radius: 4px; }
button.outline:hover,
.button.outline:hover,
button.outline:focus,
.button.outline:focus {
color: #fff;
background-color: #2d2d2d; }
button.outline:not(:disabled):not(.loading):active,
.button.outline:not(:disabled):not(.loading):active {
background-color: #0e0e0e; }
/*button.loading:after {
left: 50%;
margin-left: -8px;
margin-top: -8px;
position: absolute;
top: 50%;
position: absolute !important;
}*/
/*************** COLORS ***************/
button.success,
button.info,
button.danger,
button.warning,
button.black,
button.primary,
button.secondary,
.button.success,
.button.info,
.button.danger,
.button.warning,
.button.black,
.button.primary,
.button.secondary {
color: #fff; }
.button.success:hover,
.button.info:hover,
.button.danger:hover,
.button.warning:hover,
.button.black:hover,
.button.primary:hover,
.button.secondary:hover {
color: #fff; }
/*
* PRIMARY
*/
button.primary,
.button.primary {
background-color: #4586e8; }
button.primary:not(:disabled):not(.loading):not(.outline):hover:not(:active),
.button.primary:not(.disabled):not(.loading):not(.outline):hover:not(:active) {
background-color: #6098eb; }
button.primary:not(:disabled):not(.loading):active,
.button.primary:not(.disabled):not(.loading):active {
background-color: #2a74e5; }
button.primary:disabled,
.button.primary.disabled {
background-color: #7ba9ef; }
button.primary.outline,
.button.primary.outline {
color: #4586e8;
background-color: transparent;
border-color: #4586e8; }
button.primary.outline:hover,
.button.primary.outline:hover,
button.primary.outline:focus,
.button.primary.outline:focus {
color: #fff;
background-color: #4586e8; }
/*
* SECONDARY
*/
button.secondary,
.button.secondary {
background-color: #9d43e8; }
button.secondary:not(:disabled):not(.loading):not(.outline):hover:not(:active),
.button.secondary:not(.disabled):not(.loading):not(.outline):hover:not(:active) {
background-color: #ab5eeb; }
button.secondary:not(:disabled):not(.loading):active,
.button.secondary:not(.disabled):not(.loading):active {
background-color: #8f28e5; }
button.secondary:disabled,
.button.secondary.disabled {
background-color: #b97aef; }
button.secondary.outline,
.button.secondary.outline {
color: #9d43e8;
background-color: transparent;
border-color: #9d43e8; }
button.secondary.outline:hover,
.button.secondary.outline:hover,
button.secondary.outline:focus,
.button.secondary.outline:focus {
color: #fff;
background-color: #9d43e8; }
/*
* GREEN
*/
button.success,
.button.success {
background-color: #36b147; }
button.success:not(:disabled):not(.loading):not(.outline):hover:not(:active),
.button.success:not(:disabled):not(.loading):not(.outline):hover:not(:active) {
background-color: #41c553; }
button.success:not(:disabled):not(.loading):active,
.button.success:not(:disabled):not(.loading):active {
background-color: #2f9a3e; }
button.success:disabled,
.button.success.disabled {
background-color: #58cc68; }
button.success.outline,
.button.success.outline {
color: #36b147;
background-color: transparent;
border-color: #36b147; }
button.success.outline:hover,
.button.success.outline:hover,
button.success.outline:focus,
.button.success.outline:focus {
color: #fff;
background-color: #36b147; }
/* BLUE */
button.info,
.button.info {
background-color: #296dd1; }
button.info:not(:disabled):not(.loading):not(.outline):hover:not(:active),
.button.info:not(:disabled):not(.loading):not(.outline):hover:not(:active) {
background-color: #3f7ed9; }
button.info:not(:disabled):not(.loading):active,
.button.info:not(:disabled):not(.loading):active {
background-color: #2460b7; }
button.info:disabled,
.button.info.disabled {
background-color: #598fde; }
button.info.outline,
.button.info.outline {
color: #296dd1;
background-color: transparent;
border-color: #296dd1; }
button.info.outline:hover,
.button.info.outline:hover,
button.info.outline:focus,
.button.info.outline:focus {
color: #fff;
background-color: #296dd1; }
/* RED */
button.danger,
.button.danger {
background-color: #cd2f2b; }
button.danger:not(:disabled):not(.loading):not(.outline):hover:not(:active),
.button.danger:not(:disabled):not(.loading):not(.outline):hover:not(:active) {
background-color: #d74340; }
button.danger:not(:disabled):not(.loading):active,
.button.danger:not(:disabled):not(.loading):active {
background-color: #b42926; }
button.danger:disabled,
.button.danger.disabled {
background-color: #dc5c59; }
button.danger.outline,
.button.danger.outline {
color: #cd2f2b;
background-color: transparent;
border-color: #cd2f2b; }
button.danger.outline:hover,
.button.danger.outline:hover,
button.danger.outline:focus,
.button.danger.outline:focus {
color: #fff;
background-color: #cd2f2b; }
/* ORANGE */
button.warning,
.button.warning {
background-color: #e7912c; }
button.warning:not(:disabled):not(.loading):not(.outline):hover:not(:active),
.button.warning:not(.disabled):not(.loading):not(.outline):hover:not(:active) {
background-color: #ea9f47; }
button.warning:not(:disabled):not(.loading):active,
.button.warning:not(:disabled):not(.loading):active {
background-color: #db8219; }
button.warning:disabled,
.button.warning.disabled {
background-color: #edae63; }
button.warning.outline,
.button.warning.outline {
color: #e7912c;
background-color: transparent;
border-color: #e7912c; }
button.warning.outline:hover,
.button.warning.outline:hover,
button.warning.outline:focus,
.button.warning.outline:focus {
color: #fff;
background-color: #e7912c; }
/* BLACK */
button.black,
.button.black {
background-color: #2d2d2d; }
button.black:not(:disabled):not(.loading):not(.outline):hover:not(:active),
.button.black:not(:disabled):not(.loading):not(.outline):hover:not(:active) {
background-color: #3c3c3c; }
button.black:not(:disabled):not(.loading):active,
.button.black:not(:disabled):not(.loading):active {
background-color: #1d1d1d; }
button.black:disabled,
.button.black.disabled {
background-color: #3c3c3c; }
button.black.outline,
.button.black.outline {
color: #2d2d2d;
background-color: transparent;
border-color: #2d2d2d; }
button.black.outline:hover,
.button.black.outline:hover,
button.black.outline:focus,
.button.black.outline:focus {
color: #fff;
background-color: #2d2d2d; }
/* We import the classes for the menus */
nav {
display: -webkit-flex;
display: flex;
box-sizing: border-box; }
nav div,
nav a,
nav span {
box-sizing: border-box; }
/*
********************************************************************************
* TOP NAVBAR
********************************************************************************
*/
nav.top {
width: 100%;
background-color: #13499a;
color: #ecf0f1; }
nav.top.fixed {
position: fixed;
top: 0;
z-index: 5; }
nav.top .links {
width: 100%;
display: -webkit-flex;
display: flex;
-webkit-transition: max-height 0.25s;
-moz-transition: max-height 0.25s;
-o-transition: max-height 0.25s;
transition: max-height 0.25s; }
nav .toggle {
display: none; }
nav .toggle:hover {
cursor: pointer; }
nav .toggle::after {
content: '\2630';
color: #ecf0f1;
font-size: 32px;
line-height: 50px;
text-align: center;
width: 50px;
display: block;
margin-left: calc(50% - 25px);
-webkit-transition: transform 0.25s;
-moz-transition: transform 0.25s;
-o-transition: transform 0.25s;
transition: transform 0.25s; }
nav .toggle.cross::after {
content: '\2716';
transform: rotate(90deg); }
nav.top .links > a,
nav.top .links > div,
nav.top .links > a:visited {
-webkit-flex: 1;
flex: 1;
text-align: center;
color: #ecf0f1;
background-color: #0d346d;
z-index: 3; }
nav.top .links > :not(.submenu),
nav.top .links > .submenu span {
padding: 0.5em 0; }
nav.top .links > :hover,
nav.top .links > a:visited:hover {
background-color: #2569ce;
cursor: pointer; }
/*
* TOP NAVBAR SUBMENU
*/
nav.top .submenu.active {
background-color: #2569ce; }
nav.top .submenu {
position: relative;
-webkit-transition: background-color 0.1s, padding-bottom 0.4s;
-moz-transition: background-color 0.1s, padding-bottom 0.4s;
-o-transition: background-color 0.1s, padding-bottom 0.4s;
transition: background-color 0.1s, padding-bottom 0.4s; }
nav.top .submenu span {
width: 100%;
display: block; }
nav.top .submenu span::before {
-webkit-transition: color 0.2s;
-moz-transition: color 0.2s;
-o-transition: color 0.2s;
transition: color 0.2s;
content: '\25BC';
display: block;
position: absolute;
left: 10%;
color: #ecf0f1; }
nav.top .submenu:hover::before {
color: #ecf0f1; }
nav.top .submenu.active::before {
color: transparent; }
nav.top .submenu.active :not(.dropdown) {
padding: 0.5em 0; }
/*
* TOP NAVBAR SUBMENU DROPDOWN
*/
nav.top .submenu .dropdown {
display: block;
position: absolute;
top: calc(1.4375 * 16px + 1em);
width: 100%;
max-height: 0;
-webkit-transition: max-height 0.4s ease;
-moz-transition: max-height 0.4s ease;
-o-transition: max-height 0.4s ease;
transition: max-height 0.4s ease;
overflow: hidden; }
nav.top .submenu.active .dropdown {
max-height: 800px; }
nav.top .submenu .dropdown a,
nav.top .submenu .dropdown div,
nav.top .submenu .dropdown span {
display: block;
width: 100%;
background-color: #2569ce;
color: #ecf0f1;
-webkit-transition: padding 0.4s;
-moz-transition: padding 0.4s;
-o-transition: padding 0.4s;
transition: padding 0.4s; }
nav.top .submenu .dropdown :not(.category):hover {
background-color: #13499a; }
/*
* TOP NAVBAR SUBMENU CATEGORY
*/
nav.top .submenu .dropdown .category {
padding: 0.4em 1em;
text-align: left;
color: #acb4bf; }
nav.top .submenu .dropdown .category:hover {
cursor: default; }
nav.top .submenu .dropdown .category::before {
content: '';
width: 0;
height: 0; }
/*
********************************************************************************
* SIDE MENU
********************************************************************************
*/
/*
* SIDE MENU BODY
*/
body.navside {
margin-left: 240px;
width: calc(100% - 240px); }
nav.side {
position: fixed;
left: 0;
height: 100%;
top: 0;
z-index: 3;
-webkit-flex-direction: column;
flex-direction: column;
width: 240px;
overflow: hidden;
-webkit-transition: width 0.25s;
-moz-transition: width 0.25s;
-o-transition: width 0.25s;
transition: width 0.25s;
background-color: #1d1d1d;
color: #ecf0f1; }
nav.side div,
nav.side a,
nav.side span,
nav.side input {
z-index: 3; }
/*
* SIDE MENU HEADER
*/
nav.side .header {
width: 100%;
background-color: #1a65d5;
color: #ecf0f1;
height: 150px;
color: #ecf0f1;
width: 100%;
text-align: center;
padding: 0.4em; }
nav.side .header * {
color: #ecf0f1; }
nav.side .header input {
background-color: #ecf0f1;
border: 1px solid #2d2d2d;
font-size: 16px;
line-height: 20px;
border-radius: 10px;
width: 86%;
margin: 0 7%; }
nav.side .toggle {
display: none;
width: 40px; }
/*
* SIDE MENU LINKS
*/
nav.side .links {
display: block;
height: calc(100vh - 150px - 50px);
background-color: #1d1d1d;
overflow: hidden;
-webkit-transition: width 0.25s;
-moz-transition: width 0.25s;
-o-transition: width 0.25s;
transition: width 0.25s; }
nav.side .links > a,
nav.side .links > div,
nav.side .links > :visited,
nav.side .links .category > a,
nav.side .links .category > :visited,
nav.side .links .submenu .dropdown > a,
nav.side .links .submenu .dropdown > :visited {
color: #ecf0f1;
background-color: #1d1d1d;
padding: 0 0.6em;
display: block;
width: 100%;
line-height: 3;
text-align: left;
overflow: hidden;
-webkit-transition: width 0.25s, font-size 0.25s;
-moz-transition: width 0.25s, font-size 0.25s;
-o-transition: width 0.25s, font-size 0.25s;
transition: width 0.25s, font-size 0.25s; }
nav.side .links > :not(.category):hover,
nav.side .links .category > :not(span):hover,
nav.side .links .submenu.active :first-child,
nav.side .links .submenu.active .dropdown,
nav.side .links .submenu.active .dropdown a {
background-color: #282828; }
/*
* SIDE MENU DROPDOWN
*/
nav.side .links .submenu {
padding: 0; }
nav.side .links .submenu:hover {
cursor: pointer; }
nav.side .links .submenu .dropdown {
max-height: 0;
width: 100%;
-webkit-transition: max-height 0.4s ease, border-width 0.4s ease, border-color 0.4s ease;
-moz-transition: max-height 0.4s ease, border-width 0.4s ease, border-color 0.4s ease;
-o-transition: max-height 0.4s ease, border-width 0.4s ease, border-color 0.4s ease;
transition: max-height 0.4s ease, border-width 0.4s ease, border-color 0.4s ease;
border-bottom: 0 solid transparent;
overflow: hidden; }
nav.side .links .submenu.active .dropdown {
max-height: 800px;
border-bottom: 2px solid #9d9d9d; }
nav.side .links .submenu > span {
padding: 0 0.6em;
display: block;
line-height: 3;
width: 100%; }
nav.side .links .submenu > span::before {
content: '+';
border: 1px solid #ecf0f1;
line-height: 1;
width: 16px;
display: inline-block;
text-align: center;
margin-right: 6px;
border-radius: 2px; }
nav.side .links .submenu.active > span::before {
content: '-';
background-color: #ecf0f1;
color: #0e0e0e; }
nav.side .links .submenu .dropdown > a {
width: 100%;
display: block;
padding-left: 1.2em; }
nav.side .links .submenu.active .dropdown > :hover {
background-color: #1d1d1d; }
/*
* SIDE MENU CATEGORY
*/
nav.side .links .category {
width: 100%;
padding: 0; }
nav.side .links .category > span {
color: #646a72;
font-size: 90%;
padding: 0.4em 0.6em; }
nav.side .links .category > a {
font-size: 16px;
border-left: 2px solid #4586e8;
padding-left: 1.2em; }
nav.side .links .category > div {
font-size: 16px;
border-left: 2px solid #4586e8; }
/*
* SIDE MENU FOOTER
*/
nav.side .footer {
width: 100%;
margin: 0;
padding: 8px;
height: 50px;
background-color: #0e0e0e;
font-size: 18px;
text-align: center;
color: #ecf0f1;
overflow: hidden; }
/*
********************************************************************************
* ASIDE MENU
********************************************************************************
*/
nav.aside {
display: flex;
flex-direction: column;
align-items: stretch; }
nav.aside a,
nav.aside .submenu :first-child,
nav.aside .submenu .dropdown a {
width: 100%;
display: block;
color: #4586e8;
border-left: 2px solid transparent;
border-color: transparent;
line-height: 1.2;
box-sizing: border-box; }
nav.aside a,
nav.aside .submenu :first-child {
padding: 0 0.2em;
margin: 0.4em 0; }
nav.aside .submenu .dropdown a {
width: calc(100% - 1em);
margin: 0.3em 0;
margin-left: 1em;
padding: 0 0.4em;
font-size: 90%; }
nav.aside .submenu,
nav.aside .submenu .dropdown {
margin: 0 !important;
padding: 0 !important; }
nav.aside .submenu :first-child:hover {
cursor: pointer; }
nav.aside .submenu .dropdown {
display: none;
overflow: hidden; }
nav.aside .submenu.active .dropdown {
display: block; }
nav.aside a.current,
nav.aside .submenu :first-child.current,
nav.aside .submenu .dropdown a.current {
border-color: #4586e8; }
nav.aside .category {
font-size: 120%;
color: #848b96;
font-style: bold;
margin: 0.4em 0;
border-bottom: 1px dashed #1c69de; }
/*
********************************************************************************
* TABLETS / NARROW DISPLAYS
********************************************************************************
*/
@media (max-width: 1000px) {
nav.side {
width: 150px; }
nav.side .header,
nav.side .links,
nav.side .links .submenu .dropdown > a,
nav.side .links .category > div,
nav.side .links .category > a {
font-size: calc(16px * 0.8); }
nav.side .links .category > span {
font-size: 100%; }
body.navside {
width: calc(100% - 150px);
margin-left: 150px; } }
/*
********************************************************************************
* MOBILE DEVICES / VERY NARROW DISPLAYS
********************************************************************************
*/
@media (max-width: 600px) {
nav.top {
display: block; }
nav.top .links {
max-height: 0;
overflow: hidden;
display: block; }
nav.top .links.show {
max-height: 600px;
display: block; }
nav.top .links > a,
nav.top .links > div {
width: 100%;
display: block;
font-size: 16px; }
nav.top .links > :not(.submenu),
nav.top .links > .submenu span,
nav.top .links > .submenu.active span {
padding: 0.8em 0; }
nav.top .links > :not(:last-child) {
border-bottom: 2px solid #4586e8; }
nav.top .submenu .dropdown {
position: relative;
top: 0; }
nav.top .submenu .dropdown > a,
nav.top .submenu .dropdown > div {
background-color: #0d346d;
padding: 0.8em 0;
border-top: 1px solid #0d346d; }
nav.top .submenu .dropdown > :hover {
background-color: #2569ce; }
nav.top .submenu .dropdown {
max-height: 0; }
nav.top {
padding-left: 0; }
nav.top .toggle {
width: 80px;
display: block;
height: 50px;
margin-right: calc(100% - 80px);
background-color: #1a65d5; }
nav.top .toggle.right {
margin-right: 0;
margin-left: calc(100% - 80px);
display: block; }
/*************************** SIDE MENU MOBILE *******************************/
body.navside {
width: 100% !important;
margin-left: 0 !important; }
nav.side {
width: 0px;
overflow: visible; }
nav.side:not(.active) .header {
padding: 0; }
nav.side .header {
font-size: 16px; }
nav.side .header,
nav.side .links {
overflow: hidden; }
nav.side:not(.active) .toggle {
width: 50px;
background-color: #1a65d5;
-webkit-border-radius: 0 0 4px 0;
-moz-border-radius: 0 0 4px 0;
border-radius: 0 0 4px 0; }
nav.side.active {
width: 100%; }
nav.side:not(.active) .links > a,
nav.side:not(.active) .links > div {
width: 100%;
margin: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0; }
nav.side.active .links {
width: 100%; }
nav.side.active .links > a,
nav.side.active .links > div,
nav.side.active .links .category > a,
nav.side.active .links .category > div,
nav.side.active .links .submenu .dropdown > a {
width: 100%;
margin: 0 auto;
font-size: 18px;
text-align: center; }
nav.side .toggle {
display: block; }
nav.side.active .toggle {
width: 50px; }
nav.side .links .submenu .dropdown,
nav.side .links .submenu.active .dropdown {
border-bottom: 0 solid #000; }
nav.side .links .category > span {
border-bottom: 2px solid #4586e8; }
nav.side .links .category > a,
nav.side .links .category > div {
border-left: 0 solid #000; }
nav.side:not(.active) .footer {
padding: 8px 0; }
nav.side.active .footer {
width: 100%;
padding: 8px; } }
/* We import the custom elements */
.soft-popup, .soft-progress, .soft-notif {
box-sizing: border-box; }
/*************** SOFT POPUPS ***************/
.soft-popupmask {
width: 100vw;
height: 100vh;
z-index: 6;
background-color: #444;
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0; }
.soft-popup {
z-index: 7;
position: fixed;
width: 80%;
max-width: 800px;
height: 50%;
max-height: 400px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align: center;
background-color: #efefef;
color: #0e0e0e;
box-shadow: 0 4px 16px 0 #252525;
vertical-align: middle;
overflow: hidden; }
.soft-popup div {
width: 100%;
height: calc(100% - 5 * 16px);
display: table; }
.soft-popup p {
display: table-cell;
vertical-align: middle;
line-height: normal; }
.soft-popup span:nth-child(1) {
font-weight: bold;
font-size: calc(16px * 1.5);
line-height: 2;
width: 100%;
display: block;
color: #fff;
box-shadow: 0 -2px 16px 2px #121212;
background-color: #9d9d9d;
border-bottom: 0.25em solid #7e7e7e; }
.soft-popup button {
position: relative;
padding: 0.5em 2em;
bottom: 2em; }
.soft-popup.success span:nth-child(1) {
background-color: #288234;
border-color: #36b147; }
.soft-popup.info span:nth-child(1) {
background-color: #1f529e;
border-color: #296dd1; }
.soft-popup.warning span:nth-child(1) {
background-color: #c07216;
border-color: #e7912c; }
.soft-popup.danger span:nth-child(1) {
background-color: #9a2320;
border-color: #cd2f2b; }
/*************** SOFT PROGRESS BARS ***************/
.soft-progress {
width: 100%;
display: block;
margin: 0 !important;
padding: 0 !important;
border: none !important;
height: 0.5em; }
.soft-progress div {
height: 100%;
text-align: center;
border: inherit inherit inherit !important;
margin: 0 !important;
padding: 0 !important;
background-color: #4586e8; }
/*************** SOFT TOOLTIPS ***************/
.soft-tooltip {
position: relative; }
.tooltip {
position: absolute;
display: block;
visibility: hidden;
border-width: 0 !important;
margin: 0 !important;
padding: 0 !important; }
.tooltip div {
padding: 0.6em;
font-size: 14px;
font-weight: normal;
margin: 10px !important;
border: 0 !important;
color: #fff;
background-color: #222;
background-color: rgba(0, 0, 0, 0.75);
position: relative;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: auto;
text-align: center;
z-index: 2;
animation: plop 0.2s 0s ease-in-out;
animation-fill-mode: both; }
.tooltip div::before,
.tooltip div::after {
width: 0;
height: 0;
content: '';
display: block;
animation: plop 0.2s 0s ease-in-out;
animation-fill-mode: both; }
.tooltip.top div::after {
border: 12px solid;
border-color: #222 transparent transparent transparent;
border-color: rgba(0, 0, 0, 0.75) transparent transparent transparent;
position: absolute;
left: calc(50% - 12px);
bottom: -24px; }
.tooltip.right div::after {
border: 12px solid;
border-color: transparent #222 transparent transparent;
border-color: transparent rgba(0, 0, 0, 0.75) transparent transparent;
position: absolute;
top: calc(50% - 12px);
left: -24px; }
.tooltip.bottom div::before {
border: 12px solid;
border-color: transparent transparent #222 transparent;
border-color: transparent transparent rgba(0, 0, 0, 0.75) transparent;
position: absolute;
left: calc(50% - 12px);
top: -24px; }
.tooltip.left div::before {
border: 12px solid;
border-color: transparent transparent transparent #222;
border-color: transparent transparent transparent rgba(0, 0, 0, 0.75);
position: absolute;
top: calc(50% - 12px);
right: -24px; }
/*************** NOTIFICATIONS *****************/
.notif-container {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-start;
position: fixed;
right: 0;
bottom: 0; }
.notification {
display: block;
margin: 0.5em;
display: block;
border: 1px solid #848b96;
background-color: #edf1f7;
box-shadow: 3px 6px 18px 0 #a2a2a2;
font-size: 18px;
text-align: center;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
max-width: 400px;
min-width: 120px;
z-index: 5;
padding: 1em !important;
animation: plop 0.2s 0s ease-in-out; }
.notification.info {
border-color: rgba(41, 109, 209, 0.3);
border-right: 8px solid #296dd1; }
.notification.success {
border-color: rgba(54, 177, 71, 0.3);
border-right: 8px solid #36b147; }
.notification.warning {
border-color: rgba(231, 145, 44, 0.3);
border-right: 8px solid #e7912c; }
.notification.danger {
border-color: rgba(205, 47, 43, 0.3);
border-right: 8px solid #cd2f2b; }
/***************** BANNER **********************/
.banner-top,
.banner-bot {
display: -webkit-flex;
display: flex;
width: 100%;
position: fixed;
background-color: #0e0e0e;
color: #ecf0f1;
z-index: 100;
padding: 0.5em;
left: 0;
box-sizing: border-box; }
.banner-top {
top: 0; }
.banner-bot {
bottom: 0; }
.banner-top .content,
.banner-bot .content {
flex: 1 0;
padding: 4px; }
.banner-top .close,
.banner-bot .close {
flex: 0 0;
margin: auto 8px;
border-radius: 4px;
padding: 4px;
background-color: #4586e8;
color: #ecf0f1;
font-size: 16px;
line-height: 2em;
height: 2em;
box-sizing: content-box; }
.banner-top .close:hover,
.banner-bot .close:hover {
cursor: pointer;
background-color: #1a65d5; }
/**************************************
*** MOBILE
**************************************/
@media screen and (max-width: 600px) {
.soft-notif {
width: 90%;
max-width: 90%;
right: 5%; } }
/* We import all the helpers classes */
/********** TEXT **********/
/* Makes the first letter of the paragraph shifted from the border */
.first-letter-spacing {
text-indent: 2em; }
.first-letter-spacing :not(.first-letter-spacing) {
text-indent: 0; }
/* Makes the first letter of the paragraph bigger */
.first-letter-big::first-letter {
font-size: 200%; }
.first-letter-huge::first-letter {
font-size: 400%; }
/* Makes the text float on the left */
.text-left {
text-align: left !important; }
/* Makes the text justified */
.text-justify {
text-align: justify !important; }
/* Makes the text float on the right */
.text-right {
text-align: right !important; }
/* Center the text */
.text-center {
text-align: center !important; }
/********** ELEMENTS PLACING **********/
/* Hides the element */
.hidden, [hidden] {
display: none !important; }
/* Makes the element float on the left */
.left {
float: left !important; }
/* Makes the element float on the right */
.right {
float: right !important; }
/* Clears the float on an element */
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both; }
/* Center the element ( suppposing it has a width and it's display: block ) */
.center {
margin-left: auto !important;
margin-right: auto !important; }
/* Makes the element takes the full width of its parent */
.fullWidth {
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important; }
/* Makes the element takes the full width of the screen */
.fullScreenW {
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important; }
/* Makes the element takes the full height of its parent */
.fullHeight {
height: 100% !important;
margin-top: 0 !important;
margin-bottom: 0 !important; }
/* Makes the element take the full height of the screen */
.fullScreenH {
height: 100vh !important;
margin-top: 0 !important;
margin-bottom: 0 !important; }
/********** ELEMENTS BEHAVIOUR **********/
.disabled {
pointer-events: none; }
/********** ELEMENTS ASPECT **********/
/* Sets a subtle background color */
.bg-subtle {
background-color: rgba(69, 134, 232, 0.1) !important; }
.bg-subtle.secondary {
background-color: rgba(157, 67, 232, 0.15) !important; }
/* Sets a border */
.border {
border: 1px solid #1c69de !important; }
.border.secondary {
border: 1px solid #851bdd !important; }
/********** SMALL CORRECTIONS ********/
/* Set no padding */
.no-padding {
padding: 0 !important; }
/* Set a small padding */
.padding-sm {
padding: 0.5em !important; }
/* Set a medium padding */
.padding-md {
padding: 1em !important; }
/* Set a big padding */
.padding-lg {
padding: 2em !important; }
/* Set no margin */
.no-margin {
margin: 0 !important; }
/* Set a small margin */
.margin-sm {
margin: 0.5em !important; }
/* Set a medium margin */
.margin-md {
margin: 1em !important; }
/* Set a big margin */
.margin-lg {
margin: 2em !important; }
/* The margin changes depending on the screen size */
.margin-auto {
margin: auto !important; }
/*******************************************************************************
*** ELEMENTS SPECIFIC
*******************************************************************************/
ul.no-style li {
list-style: none; }
/* We import the file adapting some things to mobile with media queries */
/*******************************************************************************
******************************** SCREEN SIZE ***********************************
*******************************************************************************/
/***********
* TABLET
***********/
@media screen and (max-width: 780px) {
/* The padding changes depending on the screen size */
.padding-auto {
padding: 1em; } }
/***********
* MOBILE
***********/
@media screen and (max-width: 600px) {
/* The padding changes depending on the screen size */
.padding-auto {
padding: 0.5em; } }
/*******************************************************************************
*************************** ELEMENT SPECIFIC QUERIES ***************************
*******************************************************************************/
/*******************
* MAIN + ASIDE
*******************/
@media screen and (max-width: 1224px) {
aside {
display: block;
width: 100%; }
main {
width: 100%;
display: block; } }
/*******************************************************************************
***** CONTAINERS
*******************************************************************************/
/*
* LARGE
*/
@media screen and (max-width: 1200px) {
.container-lg {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: auto;
margin-right: auto; } }
/*
* MEDIUM
*/
@media screen and (max-width: 960px) {
.container-md {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: auto;
margin-right: auto; } }
/*
* SMALL
*/
@media screen and (max-width: 750px) {
.container-sm {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: auto;
margin-right: auto; } }
/**************
* HEADER
**************/
@media screen and (max-width: 800px) {
body > header {
font-size: 10vw; } }
/*************
* NAVSIDE
*************/
@media screen and (max-width: 1040px) {
body.navside > header {
font-size: 8vw; } }
/* We import the animations */
/* CONFIGURE THE ANIMATIONS HERE */
/*************** CLASSES ***************/
/*** PLOP ***/
.animation-plop {
animation: plop 200ms 0s ease-in-out;
animation-fill-mode: both;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1; }
/*** HEARTBEAT COLOR ***/
.animation-heartbeat-color {
animation: heartbeat-color 0.75s 0s ease;
animation-iteration-count: infinite; }
/*** HEARTBEAT SCALE ***/
.animation-heartbeat-scale {
animation: heartbeat-scale 0.75s 0s ease;
animation-iteration-count: infinite; }
/*** HEARTBEAT ***/
.animation-heartbeat {
animation: heartbeat-color 0.75s 0s ease, heartbeat-scale 0.75s 0s ease;
animation-iteration-count: infinite; }
/*** FADEOUT ***/
.animation-fadeout {
animation: fadeout 2s 0s ease;
animation-fill-mode: both; }
#heartbeat {
width: 100px;
height: 100px;
-webkit-border-radius: 20%;
-moz-border-radius: 20%;
border-radius: 20%;
background-color: #ffa3a3;
border: 2px solid #cd2f2b;
margin-left: 50px; }
/*************** ANIMATIONS ***************/
/*** PLOP ***/
@keyframes plop {
0% {
-webkit-transform: scale(0.01, 0.01);
-ms-transform: scale(0.01, 0.01);
transform: scale(0.01, 0.01);
opacity: 0; }
100% {
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
transform: scale(1, 1);
opacity: 1; } }
@-webkit-keyframes plop {
0% {
-webkit-transform: scale(0.01, 0.01);
-ms-transform: scale(0.01, 0.01);
transform: scale(0.01, 0.01);
opacity: 0; }
100% {
-webkit-transform: scale(1.3, 1.3);
-ms-transform: scale(1.3, 1.3);
transform: scale(1.3, 1.3);
opacity: 1; } }
/*** SLIDE DOWN ***/
/*********** DISCONTINUED ***********/
@keyframes slide-down {
0% {
-webkit-transform: scale(1, 0);
-ms-transform: scale(1, 0);
transform: scale(1, 0); }
100% {
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
transform: scale(1, 1); } }
@-webkit-keyframes slide-down {
0% {
-webkit-transform: scale(1, 0);
-ms-transform: scale(1, 0);
transform: scale(1, 0); }
100% {
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
transform: scale(1, 1); } }
/*** SLIDE ***/
/************** DISCONTINUED *******/
@keyframes slide {
0% {
height: 0; }
100% {
height: 200px; } }
@-webkit-keyframes slide {
0% {
height: 0; }
100% {
height: 200px; } }
/*** HEARTBEAT SCALE ***/
@keyframes heartbeat-scale {
0% {
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
transform: scale(1, 1); }
40% {
-webkit-transform: scale(1.02, 1.02);
-ms-transform: scale(1.02, 1.02);
transform: scale(1.02, 1.02); }
60% {
-webkit-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2); }
70% {
-webkit-transform: scale(1.15, 1.15);
-ms-transform: scale(1.15, 1.15);
transform: scale(1.15, 1.15); }
100% {
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
transform: scale(1, 1); } }
@-webkit-keyframes heartbeat-scale {
0% {
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
transform: scale(1, 1); }
40% {
-webkit-transform: scale(1.02, 1.02);
-ms-transform: scale(1.02, 1.02);
transform: scale(1.02, 1.02); }
60% {
-webkit-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2); }
70% {
-webkit-transform: scale(1.15, 1.15);
-ms-transform: scale(1.15, 1.15);
transform: scale(1.15, 1.15); }
100% {
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
transform: scale(1, 1); } }
/*** HEARTBEAT COLOR ***/
@keyframes heartbeat-color {
0% {
background-color: #c82a2a; }
40% {
background-color: #c33737; }
60% {
background-color: #d66969; }
70% {
background-color: #d75858; }
100% {
background-color: #c82a2a; } }
@-webkit-keyframes heartbeat-color {
0% {
background-color: #c82a2a; }
40% {
background-color: #c33737; }
60% {
background-color: #d66969; }
70% {
background-color: #d75858; }
100% {
background-color: #c82a2a; } }
/*** SPIN RIGHT ***/
@keyframes spin-right {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg); } }
@-webkit-keyframes spin-right {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg); } }
/*** COLOR FADE OUT ***/
@keyframes color-fadeout {
0% {
background-color: #b6d0f6; }
100% {
background-color: inherit; } }
@-webkit-keyframes color-fadeout {
0% {
background-color: #b6d0f6; }
100% {
background-color: inherit; } }
/*** OPACITY FADE OUT ***/
@keyframes fadeout {
0% {
opacity: 1; }
100% {
opacity: 0; } }
@-webkit-keyframes fadeout {
0% {
opacity: 1; }
100% {
opacity: 0; } }
/*# sourceMappingURL=papillon.min.css.map */