/* ------------------- Basekit Framework · Components Fev . 2022 © Exactuflow http://basekit.exactusensu.pt Table of Contents · Configs · Components · All · Buttons · Labels · Textfields + Textareas · Links · Field Groups · Action fields · Checkbox + Radio Buttons · Selects · Dropper · Switches · Raters · Floaties · Windows · Tag Boxes · Suggestables · Tags · Nesties · Timers · Collapsers · Accordions · Poppies · Eddies · Icons · Forms · Navigators · Progress bars ------------------- */ /* Configs */ /* Configs . Vars */ html, *:before, *:after { /* Configs . Buttons . Widths */ --bw_100: 100px; --bw_150: 150px; --bw_200: 200px; --bw_250: 250px; --bw_300: 300px; --bw_350: 350px; } /* Configs . Components */ body, *:before, *:after, .default { --components_scale: var(--components_scale_default); --text_scale: var(--text_scale_default); } .tiny { --components_scale: var(--components_scale_tiny); --text_scale: var(--text_scale_tiny); } .small { --components_scale: var(--components_scale_small); --text_scale: var(--text_scale_small); } .medium { --components_scale: var(--components_scale_medium); --text_scale: var(--text_scale_medium); } .large { --components_scale: var(--components_scale_large); --text_scale: var(--text_scale_large); } .huge { --components_scale: var(--components_scale_huge); --text_scale: var(--text_scale_huge); } /* Configs . Components . Extra small screens */ @media (min-width: 100px) { /* Configs . Components . Overides */ .xs-default { --components_scale: var(--components_scale_default); --text_scale: var(--text_scale_default); } .xs-tiny { --components_scale: var(--components_scale_tiny); --text_scale: var(--text_scale_tiny); } .xs-small { --components_scale: var(--components_scale_small); --text_scale: var(--text_scale_small); } .xs-medium { --components_scale: var(--components_scale_medium); --text_scale: var(--text_scale_medium); } .xs-large { --components_scale: var(--components_scale_large); --text_scale: var(--text_scale_large); } .xs-huge { --components_scale: var(--components_scale_huge); --text_scale: var(--text_scale_huge); } } /* Configs . Components . Small screens */ @media (min-width: 768px) { /* Configs . Components . Resets */ body, .default { --components_scale: var(--components_scale_default); --text_scale: var(--text_scale_default); } .tiny { --components_scale: var(--components_scale_tiny); --text_scale: var(--text_scale_tiny); } .small { --components_scale: var(--components_scale_small); --text_scale: var(--text_scale_small); } .medium { --components_scale: var(--components_scale_medium); --text_scale: var(--text_scale_medium); } .large { --components_scale: var(--components_scale_large); --text_scale: var(--text_scale_large); } .huge { --components_scale: var(--components_scale_huge); --text_scale: var(--text_scale_huge); } /* Configs . Components . Overides */ .sm-default { --components_scale: var(--components_scale_default); --text_scale: var(--text_scale_default); } .sm-tiny { --components_scale: var(--components_scale_tiny); --text_scale: var(--text_scale_tiny); } .sm-small { --components_scale: var(--components_scale_small); --text_scale: var(--text_scale_small); } .sm-medium { --components_scale: var(--components_scale_medium); --text_scale: var(--text_scale_medium); } .sm-large { --components_scale: var(--components_scale_large); --text_scale: var(--text_scale_large); } .sm-huge { --components_scale: var(--components_scale_huge); --text_scale: var(--text_scale_huge); } } /* Configs . Components . Medium screens */ @media (min-width: 990px) { /* Configs . Components . Resets */ body, .default { --components_scale: var(--components_scale_default); --text_scale: var(--text_scale_default); } .tiny { --components_scale: var(--components_scale_tiny); --text_scale: var(--text_scale_tiny); } .small { --components_scale: var(--components_scale_small); --text_scale: var(--text_scale_small); } .medium { --components_scale: var(--components_scale_medium); --text_scale: var(--text_scale_medium); } .large { --components_scale: var(--components_scale_large); --text_scale: var(--text_scale_large); } .huge { --components_scale: var(--components_scale_huge); --text_scale: var(--text_scale_huge); } /* Configs . Components . Overides */ .md-default { --components_scale: var(--components_scale_default); --text_scale: var(--text_scale_default); } .md-tiny { --components_scale: var(--components_scale_tiny); --text_scale: var(--text_scale_tiny); } .md-small { --components_scale: var(--components_scale_small); --text_scale: var(--text_scale_small); } .md-medium { --components_scale: var(--components_scale_medium); --text_scale: var(--text_scale_medium); } .md-large { --components_scale: var(--components_scale_large); --text_scale: var(--text_scale_large); } .md-huge { --components_scale: var(--components_scale_huge); --text_scale: var(--text_scale_huge); } } /* Configs . Components . Large screens */ @media (min-width: 1200px) { /* Configs . Components . Resets */ body, .default { --components_scale: var(--components_scale_default); --text_scale: var(--text_scale_default); } .tiny { --components_scale: var(--components_scale_tiny); --text_scale: var(--text_scale_tiny); } .small { --components_scale: var(--components_scale_small); --text_scale: var(--text_scale_small); } .medium { --components_scale: var(--components_scale_medium); --text_scale: var(--text_scale_medium); } .large { --components_scale: var(--components_scale_large); --text_scale: var(--text_scale_large); } .huge { --components_scale: var(--components_scale_huge); --text_scale: var(--text_scale_huge); } /* Configs . Components . Overides */ .lg-default { --components_scale: var(--components_scale_default); --text_scale: var(--text_scale_default); } .lg-tiny { --components_scale: var(--components_scale_tiny); --text_scale: var(--text_scale_tiny); } .lg-small { --components_scale: var(--components_scale_small); --text_scale: var(--text_scale_small); } .lg-medium { --components_scale: var(--components_scale_medium); --text_scale: var(--text_scale_medium); } .lg-large { --components_scale: var(--components_scale_large); --text_scale: var(--text_scale_large); } .lg-huge { --components_scale: var(--components_scale_huge); --text_scale: var(--text_scale_huge); } } /* Configs . Components . All */ input, textarea, button, .button, select, label, a.download, .rater ul li, liker { --components_components_spacing_h: calc((var(--components_global_h) * var(--components_scale))/var(--components_spacing_h)); } /* Components */ /* Components . All */ input, textarea, button, .button, select, label, switch, a.download, .rater ul li, navigator { display: inline-block; margin: 0px; padding: 0px; font-family: var(--font_family); font-size: calc(1px * (var(--font_size) * var(--text_scale)) ); color: var(--color_text); border: 1px solid var(--color_grey_light); box-sizing: border-box; } input, button, .button, select, switch, a.download, .rater ul li { height: calc(1px * (var(--components_global_h) * var(--components_scale)))!important; line-height: calc(1px * (var(--components_global_h) * var(--components_scale)))!important; } /* Components . Buttons */ /* Components . Buttons . Default */ button, .button { display: inline-block; padding-left: calc(1px * (var(--components_components_spacing_h) * 2 ) ); padding-right: calc(1px * (var(--components_components_spacing_h) * 2 )); border: none; font-family: Gotham; text-align: center; text-decoration: none; background-color: var(--color_primary); color: var(--color_white); box-sizing: border-box; cursor: pointer; outline: none; user-select: none; transition: 0.2s filter ease-in-out; text-overflow: ellipsis; overflow: hidden; } button:hover, .button:hover, input[type="submit"]:hover, button.hover, .button.hover, input[type="submit"].hover { filter: brightness(110%); } button.pressed, .button.pressed, input[type="submit"].pressed { filter: brightness(90%); transition: none; } button.disabled, button.disabled:hover button.pressed.disabled, .button.disabled, .button.pressed.disabled, .button.disabled:hover, input[type="submit"].disabled, input[type="submit"].pressed.disabled, input[type="submit"].disabled:hover { opacity: 0.3; filter: none; cursor: not-allowed; } /* Components . Buttons . Colors */ /* Components . Buttons . Colors . Default */ body { background-color: #ffffff; } .bc_transparent { background-color: transparent; color: var(--color_text); } .bc_default { background-color: var(--color_primary); color: var(--color_white); } .bc_primary { background-color: var(--color_primary); color: var(--color_white); } .bc_secondary { background-color: var(--color_secondary); color: var(--color_white); } /* Components . Buttons . Colors . Red */ .bc_red { background-color: var(--color_red); color: var(--color_white); } .bc_red_dark { background-color: var(--color_red_dark); color: var(--color_white); } .bc_red_medium { background-color: var(--color_red_medium); color: var(--color_white); } .bc_red_light { background-color: var(--color_red_light); color: var(--color_text); } /* Components . Buttons . Colors . Green */ .bc_green { background-color: var(--color_green); color: var(--color_white); } .bc_green_dark { background-color: var(--color_green_dark); color: var(--color_white); } .bc_green_medium { background-color: var(--color_green_medium); color: var(--color_white); } .bc_green_light { background-color: var(--color_green_light); color: var(--color_text); } /* Components . Buttons . Colors . Blue */ .bc_blue { background-color: var(--color_blue); color: var(--color_white); } .bc_blue_dark { background-color: var(--color_blue_dark); color: var(--color_white); } .bc_blue_medium { background-color: var(--color_blue_medium); color: var(--color_white); } .bc_blue_light { background-color: var(--color_blue_light); color: var(--color_text); } /* Components . Buttons . Colors . Orange */ .bc_orange { background-color: var(--color_orange); color: var(--color_white); } .bc_orange_dark { background-color: var(--color_orange_dark); color: var(--color_white); } .bc_orange_medium { background-color: var(--color_orange_medium); color: var(--color_white); } .bc_orange_light { background-color: var(--color_orange_light); color: var(--color_text); } /* Components . Buttons . Colors . Yellow */ .bc_yellow { background-color: var(--color_yellow); color: var(--color_white); } .bc_yellow_dark { background-color: var(--color_yellow_dark); color: var(--color_white); } .bc_yellow_medium { background-color: var(--color_yellow_medium); color: var(--color_white); } .bc_yellow_light { background-color: var(--color_yellow_light); color: var(--color_text); } /* Components . Buttons . Colors . Grey */ .bc_grey { background-color: var(--color_grey); color: var(--color_white); } .bc_grey_dark { background-color: var(--color_grey_dark); color: var(--color_white); } .bc_grey_medium { background-color: var(--color_grey_medium); color: var(--color_white); } .bc_grey_light { background-color: var(--color_grey_light); color: var(--color_text); } /* Components . Buttons . Colors . Black */ .bc_black { background-color: var(--color_black); color: var(--color_white); } .bc_black_dark { background-color: var(--color_black_dark); color: var(--color_white); } .bc_black_medium { background-color: var(--color_black_medium); color: var(--color_white); } .bc_black_light { background-color: var(--color_black_light); color: var(--color_text); } /* Components . Buttons . Colors . White */ .bc_white { background-color: var(--color_white); color: var(--color_text) !important; } .bc_white_dark { background-color: var(--color_white_dark); color: var(--color_text); } .bc_white_medium { background-color: var(--color_white_medium); color: var(--color_white); } .bc_white_light { background-color: var(--color_white_light); color: var(--color_white); } /* Components . Buttons . Width */ /* Components . Buttons . Width . Default */ .bw_100 { width: var(--bw_100) !important; } .bw_150 { width: var(--bw_150) !important; } .bw_200 { width: var(--bw_200) !important; } .bw_250 { width: var(--bw_250) !important; } .bw_300 { width: var(--bw_300) !important; } .bw_350 { width: var(--bw_350) !important; } /* Components . Buttons . Width . Extra small screens */ @media (min-width: 100px) { /* Screen specific overides */ .xs-bw_100 { width: var(--bw_100) !important; } .xs-bw_150 { width: var(--bw_150) !important; } .xs-bw_200 { width: var(--bw_200) !important; } .xs-bw_250 { width: var(--bw_250) !important; } .xs-bw_300 { width: var(--bw_300) !important; } .xs-bw_350 { width: var(--bw_350) !important; } } /* Components . Buttons . Width . Small screens */ @media (min-width: 768px) { /* Screen specific resets */ .bw_100 { width: var(--bw_100) !important; } .bw_150 { width: var(--bw_150) !important; } .bw_200 { width: var(--bw_200) !important; } .bw_250 { width: var(--bw_250) !important; } .bw_300 { width: var(--bw_300) !important; } .bw_350 { width: var(--bw_350) !important; } /* Screen specific overides */ .sm-bw_100 { width: var(--bw_100) !important; } .sm-bw_150 { width: var(--bw_150) !important; } .sm-bw_200 { width: var(--bw_200) !important; } .sm-bw_250 { width: var(--bw_250) !important; } .sm-bw_300 { width: var(--bw_300) !important; } .sm-bw_350 { width: var(--bw_350) !important; } } /* Components . Buttons . Width . Medium screens */ @media (min-width: 990px) { /* Screen specific resets */ .bw_100 { width: var(--bw_100) !important; } .bw_150 { width: var(--bw_150) !important; } .bw_200 { width: var(--bw_200) !important; } .bw_250 { width: var(--bw_250) !important; } .bw_300 { width: var(--bw_300) !important; } .bw_350 { width: var(--bw_350) !important; } /* Screen specific overides */ .md-bw_100 { width: var(--bw_100) !important; } .md-bw_150 { width: var(--bw_150) !important; } .md-bw_200 { width: var(--bw_200) !important; } .md-bw_250 { width: var(--bw_250) !important; } .md-bw_300 { width: var(--bw_300) !important; } .md-bw_350 { width: var(--bw_350) !important; } } /* Components . Buttons . Width . Large screens */ @media (min-width: 1200px) { /* Screen specific resets */ .bw_100 { width: var(--bw_100) !important; } .bw_150 { width: var(--bw_150) !important; } .bw_200 { width: var(--bw_200) !important; } .bw_250 { width: var(--bw_250) !important; } .bw_300 { width: var(--bw_300) !important; } .bw_350 { width: var(--bw_350) !important; } /* Screen specific overides */ .lg-bw_100 { width: var(--bw_100) !important; } .lg-bw_150 { width: var(--bw_150) !important; } .lg-bw_200 { width: var(--bw_200) !important; } .lg-bw_250 { width: var(--bw_250) !important; } .lg-bw_300 { width: var(--bw_300) !important; } .lg-bw_350 { width: var(--bw_350) !important; } } /* Components . Buttons . Custom */ /* Components . Buttons . Operations */ .button.operation::before, button.operation::before { display: block; font-family: BasekitSymbols; font-size: calc(1px * (var(--font_size) * 0.4) )!important; line-height: calc(1px * (var(--components_global_h) * var(--components_scale)))!important; } .button.operation.create::before, button.operation.create::before { content: "q"; } .button.operation.save::before, button.operation.save::before { content: "?"; } .button.operation.cancel::before, button.operation.cancel::before { content: "%"; } .button.operation.delete::before, button.operation.delete::before { content: "p"; } /* Components . Buttons . Operations . Extra small screens */ @media (min-width: 100px) { .button.operation, button.operation { font-size: 0px !important; padding-left: calc(1px * (var(--components_components_spacing_h) * 0.3 )) !important; padding-right: calc(1px * (var(--components_components_spacing_h) * 0.3 )) !important; } } /* Components . Buttons . Operations . Small screens */ @media (min-width: 768px) { .button.operation::before, button.operation::before { display: none; } .button.operation, button.operation { padding-left: calc(1px * (var(--components_components_spacing_h) * 2 )) !important; padding-right: calc(1px * (var(--components_components_spacing_h) * 2 )) !important; font-size: calc(1px * (var(--font_size) * var(--text_scale)) )!important; } } /* Components . Buttons . Operations . Medium screens */ @media (min-width: 990px) {} /* Components . Buttons . Operations . Large screens */ @media (min-width: 1200px) {} /* Components . Buttons . Action */ .button.action, button.action { --action_button_scale: 0.6; --action_button_height: calc((var(--components_global_h) * var(--components_scale)) * var(--action_button_scale)); --action_button_width: var(--action_button_height); --action_button_margin: calc(var(--components_components_spacing_h)*0.5); display: inline-block; height: calc(1px * var(--action_button_height)) !important; width: calc(1px * var(--action_button_width)) !important; margin-right: calc(1px * var(--action_button_margin)); padding: 0px !important; border-radius: 50%; color: #ffffff; font-family: BasekitSymbols !important; line-height: calc(1px * ((var(--components_global_h) * var(--components_scale)) * var(--editable_button_scale))) !important; opacity: 0.6; transition: 0.2s all ease-in-out; } .tiny .button.action, .tiny button.action { font-size: calc(1px * ((var(--font_size) * var(--text_scale)) * 0.8) ) !important; } .small .button.action, .small button.action { font-size: calc(1px * ((var(--font_size) * var(--text_scale)) * 0.8) ) !important; } .button.action, .default .button.action, button.action, .default button.action { font-size: calc(1px * ((var(--font_size) * var(--text_scale)) * 1) ) !important; line-height: calc(1px * ((var(--font_size) * var(--text_scale)) * 1) ) !important; } .medium .button.action, .medium button.action { font-size: calc(1px * ((var(--font_size) * var(--text_scale)) * 0.6) ) !important; } .large .button.action, .large button.action { font-size: calc(1px * ((var(--font_size) * var(--text_scale)) * 0.5) ) !important; } .huge .button.action, .huge button.action { font-size: calc(1px * ((var(--font_size) * var(--text_scale)) * 0.5) ) !important; } .button.action:hover, button.action:hover { opacity: 1; } .button.action.cancel, button.action.cancel { background-color: #d45353; } .button.action.save, button.action.save { background-color: #39b876; } .button.action.remove, button.action.remove { border: 1px solid var(--color_grey_medium); background-color: transparent; color: var(--color_grey_medium) !important; } .button.action.remove:hover, button.action.remove:hover { color: #ffffff !important; background-color: var(--color_grey_medium) !important; } .button.action.duplicate, button.action.duplicate { border: 1px solid var(--color_grey_medium); background-color: transparent; color: var(--color_grey_medium) !important; } .button.action.duplicate:hover, button.action.duplicate:hover { color: #ffffff !important; background-color: var(--color_grey_medium) !important; } /* Components . Labels */ label { display: block; border: none; } /* Components . Textfields + Textareas */ /* Components . Textfields + Textareas . Overides . Numeric Fields */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance: textfield; } /* Components . Textfields + Textareas . Settings */ input[type="text"], input[type="file"], input[type="password"], input[type="email"], input[type="number"], input[type="datepicker"], textarea { --textfield_icon_padding: calc( (var(--components_global_h) * var(--components_scale)) * 1.2); width: 100%; background-color: transparent; background-repeat: no-repeat; background-size: calc(1px * (var(--components_global_h) * var(--components_scale))); transition: 0.2s all ease-in-out; } input[type="text"], input[type="file"], input[type="password"], input[type="email"], input[type="number"], input[type="datepicker"] { text-indent: calc(1px * var(--components_components_spacing_h)); padding-right: calc(1px * var(--components_components_spacing_h)); background-position: right center; } input[type="file"] { border-style: dashed; background-color: transparent; cursor: pointer; transition: 0.2s all ease-in-out; } input[type="file"]::-webkit-file-upload-button { padding: 0px; margin-right: calc(1px * var(--components_components_spacing_h)); background-color: transparent; border: none; font-family: Gotham; color: var(--color_links); cursor: pointer; transition: 0.2s all ease-in-out; outline-width: 0px; } input[type="file"]:hover::-webkit-file-upload-button { filter: brightness(130%); } textarea { padding: calc(1px * var(--components_components_spacing_h)); line-height: 18px; background-position: right bottom; } /* Components . Textfields + Textareas . Placeholder */ input::placeholder, textarea::placeholder { color: var(--color_placeholders); } /* Components . Textfields + Textareas . Styles */ /* Components . Textfields + Textareas . Styles . Transparent */ input.transparent, textarea.transparent, button.transparent, .button.transparent, select.transparent, label.transparent, switch.transparent, a.download.transparent { background-color: transparent !important; } /* Components . Textfields + Textareas . Styles . Light */ input.light , textarea.light , button.light , .button.light , select.light , label.light , switch.light , a.download.light { border-color: var(--color_white_medium) !important; } input.light.transparent, textarea.light.transparent, button.light.transparent, .button.light.transparent, select.light.transparent, label.light.transparent, switch.light.transparent, a.download.light.transparent { color: var(--color_white) !important; } /* Components . Textfields + Textareas . States */ /* Components . Textfields + Textareas . States . Hover */ input[type="text"]:hover, input[type="file"]:hover, input[type="password"]:hover, textarea:hover { border-color: var(--color_grey_medium); } input[type="text"].light:hover, input[type="file"].light:hover, input[type="password"].light:hover, textarea.light:hover { border-color: var(--color_white) !important; } /* Components . Textfields + Textareas . States . Focus + Active */ input[type="text"]:focus, input[type="text"].active, input[type="password"]:focus, input[type="password"].active, textarea:focus, textarea.active { border-color: var(--color_links) !important; outline-width: 0px; } input[type="text"].light:focus, input[type="text"].light.active, input[type="password"].light:focus, input[type="password"].light.active, textarea.light:focus, textarea.light.active { border-color: var(--color_white) !important; } /* Components . Textfields + Textareas . States . Disabled */ input[disabled], input[disabled]:hover, textarea[disabled], textarea[disabled]:hover, input[type="file"][disabled]::-webkit-file-upload-button { color: var(--color_grey_light); border-color: var(--color_grey_light); cursor: not-allowed; filter: none; } /* Components . Textfields + Textareas . States . Readonly */ input[readonly], input[readonly]:hover, input[readonly]:focus, textarea[readonly], textarea[readonly]:hover, textarea[readonly]:focus { padding-right: calc( 1px * var(--textfield_icon_padding)); background-image: url(../media/icon.field.disabled.png); cursor: default; } /* Components . Textfields + Textareas . States . Readonly Display */ input[readonly].display, textarea[readonly].display { border-color: transparent !important; background-color: transparent !important; background-image: none !important; } /* Components . Textfields + Textareas . States . Changed */ input[type="text"].changed, input[type="password"].changed, input[type="email"].changed, input[type="number"].changed, textarea.changed { color: #333; } /* Components . Textfields + Textareas . States . Valid */ input[type="text"].valid, input[type="password"].valid, input[type="email"].valid, input[type="number"].valid, textarea.valid { padding-right: calc( 1px * var(--textfield_icon_padding)); border-color: var(--color_green) !important; background-image: url(../media/icon.field.valid.png); } /* Components . Textfields + Textareas . States . Invalid */ input[type="text"].invalid, input[type="password"].invalid, input[type="email"].invalid, input[type="number"].invalid, textarea.invalid { padding-right: calc( 1px * var(--textfield_icon_padding)); color: var(--color_red_medium); border-color: var(--color_red) !important; background-image: url(../media/icon.field.invalid.png); animation-name: pulse_invalid; animation-duration: 2000ms; animation-iteration-count: 1; } /* Components . Textfields + Textareas . States . Editing */ input[type="text"].editing, input[type="password"].editing, input[type="email"].editing, input[type="number"].editing, textarea.editing { background: none !important; } input[type="text"].editing:hover, input[type="password"].editing:hover, input[type="email"].editing:hover, input[type="number"].editing:hover, textarea.editing:hover { background: none !important; } /* Components . Textfields + Textareas . States . Saving */ input[type="text"].saving, input[type="password"].saving, input[type="email"].saving, input[type="number"].saving, textarea.saving { color: var(--color_grey_light); border-color: var(--color_grey_light); background-image: url(../media/icon.field.saving.png); background-repeat: no-repeat; cursor: wait; } /* Components . Textfields + Textareas . States . Saved */ input[type="text"].saved, input[type="password"].saved, input[type="email"].saving, input[type="number"].saving, textarea.saved { border-color: var(--color_green) !important; background-image: url(../media/icon.field.saved.png) !important; background-repeat: no-repeat !important; animation-name: pulse_saved; animation-duration: 1000ms; animation-iteration-count: 1; } /* Components . Textfields + Textareas . Types */ /* Components . Textfields + Textareas . Types . Mandatory */ input[type="text"].mandatory, input[type="password"].mandatory, textarea.mandatory { padding-right: calc( 1px * var(--textfield_icon_padding)); background-image: url(../media/icon.field.mandatory.png); } /* Components . Textfields + Textareas . Types . Editable */ input[type="text"].editable, input[type="password"].editable, textarea.editable { padding-right: calc( 1px * var(--textfield_icon_padding)); background-image: url(../media/icon.field.editable.png); } input[type="text"].editable:hover, input[type="password"].editable:hover, textarea.editable:hover { background-color: #fffbee; } .field_wrapper * { --editable_button_scale: 0.6; --editable_button_height: calc((var(--components_global_h) * var(--components_scale)) * var(--editable_button_scale)); --editable_button_width: var(--editable_button_height); --editable_button_margin: calc(var(--components_components_spacing_h)*0.5); } .field_wrapper input[type="text"].editable.editing { padding-right: calc(1px * ((var(--editable_button_width) *2 ) + (var(--editable_button_margin) * 3 ) ) ); } .field_wrapper .field_controls { position: relative; float: right; margin-top: calc(-1px * (var(--editable_button_height) + (( (var(--components_global_h) * var(--components_scale)) - var(--editable_button_height) ) / 2) )); font-size: 0px; z-index: 2; opacity: 0; transition: 0.1s opacity ease-in-out; } .field_wrapper .field_controls.visible { opacity: 1; } /* Components . Textfields + Textareas . Animations */ @keyframes pulse_invalid { 0% { -moz-box-shadow: 0 0 0 0 rgba(212,83,83, 0.4); box-shadow: 0 0 0 0 rgba(212,83,83, 0.4); } 100% { -moz-box-shadow: 0 0 0 10px rgba(212,83,83, 0); box-shadow: 0 0 0 10px rgba(212,83,83, 0); } } @keyframes pulse_saved { 0% { -moz-box-shadow: 0 0 0 0 rgba(57,184,118, 0.4); box-shadow: 0 0 0 0 rgba(57,184,118, 0.4); } 100% { -moz-box-shadow: 0 0 0 10px rgba(57,184,118, 0); box-shadow: 0 0 0 10px rgba(57,184,118, 0); } } /* Components . Links . Download */ a.download { display: block; padding-left: calc(1px * var(--components_components_spacing_h) ); border-style: dashed; text-align: left; text-indent: calc(1px * var(--components_components_spacing_h)); color: var(--color_links); text-indent: 0px !important; transition: 0.2s all ease-in-out; } a.download:hover { border-color: var(--color_grey_dark) !important; } a.download:before { --download_button_scale: 0.6; --download_button_height: calc((var(--components_global_h) * var(--components_scale)) * var(--download_button_scale)); --download_button_width: var(--download_button_height); display: block; float: left; height: calc(1px * var(--download_button_height) ); width: calc(1px * var(--download_button_width) ); margin-top: calc(1px * (( ( (var(--components_global_h) * var(--components_scale)) - var(--download_button_height) ) / 2 ) - 1) ); margin-right: calc(1px * (var(--components_components_spacing_h) / 2)); ; padding: 0px; content: ""; color: #ffffff; font-family: PaperIcons ; line-height: calc(1px * var(--download_button_height) ); text-align: center; border-radius: 50%; background-color: var(--color_links); } a.download.disabled, a.download.disabled:hover { border-color: var(--color_grey_light) !important; color: var(--color_grey_light) !important; filter: none; cursor: not-allowed; } a.download.disabled:before { background-color: var(--color_grey_light) !important; } /* Components . Field groups */ /* Components . Field Groups . Multi-line */ /* Components . Field Groups . Multi-line . Rows */ ul.fieldgroup.multi-line li { padding-right: 30px; text-align: left; } ul.fieldgroup.multi-line li:last-child { border-bottom: none; } ul.fieldgroup.multi-line li:last-child{ } ul.fieldgroup.multi-line li { padding-right: 0px; overflow: auto; } /* Components . Field Groups . Multi-line . Templates */ ul.fieldgroup.multi-line li.template { display: none; } /* Components . Field Groups . Multi-line . Textfields */ ul.fieldgroup.multi-line li input { padding-right: calc( 1px * (var(--components_global_h) * var(--components_scale))); } /* Components . Field Groups . Multi-line . Remove button */ ul.fieldgroup.multi-line li .button.action.remove, ul.fieldgroup.multi-line li button.action.remove { position: relative; float: right; margin-top: calc(-1px * (var(--action_button_height) + (( (var(--components_global_h) * var(--components_scale)) - var(--action_button_height) ) / 2) )); margin-right: calc(1px * var(--action_button_margin)) !important; opacity: 0.3; z-index: 2; } ul.fieldgroup.multi-line.light li .button.action.remove, ul.fieldgroup.multi-line.light li button.action.remove { border-color: var(--color_white) !important; color: var(--color_white) !important; background-color: transparent !important; } ul.fieldgroup.multi-line li .button.action.remove:hover, ul.fieldgroup.multi-line li button.action.remove:hover { opacity: 1; } ul.fieldgroup.multi-line.light li .button.action.remove:hover, ul.fieldgroup.multi-line.light li button.action.remove:hover { color: var(--color_grey_medium) !important; background-color: var(--color_white) !important; } .fieldgroup.multi-line.saving li .button.remove, .fieldgroup.multi-line.saving li button.remove { opacity: 0; } /* Components . Field Groups . Multi-line . Controls */ ul.fieldgroup.multi-line .controls { padding: 0px; margin-top: 10px; } ul.fieldgroup.multi-line .controls a { display: block; text-align: left; margin-left: 6px; line-height: calc( 1px * calc((var(--components_global_h) * var(--components_scale)) * 0.6)); } ul.fieldgroup.multi-line .controls .button, ul.fieldgroup.multi-line .controls button { display: none; position: relative; float: right; z-index: 2; } ul.fieldgroup.multi-line.editing .controls .button, ul.fieldgroup.multi-line.editing .controls button { display: block; } ul.fieldgroup.multi-line .controls .button.save, ul.fieldgroup.multi-line .controls button.save { } ul.fieldgroup.multi-line .controls .button.cancel, ul.fieldgroup.multi-line .controls button.cancel { } /* Components . Field Groups . Multi-line . Combined */ ul.fieldgroup.readonly.multi-line.combined { border-color: transparent; } ul.fieldgroup.multi-line.combined > li { padding: calc( 1px * ( (var(--components_global_h) * var(--components_scale)) /var(--components_spacing_h) ) ) !important; border: 1px dashed var(--color_grey_light); transition: 0.2s all ease-in-out; overflow: visible; } ul.fieldgroup.disabled.multi-line.combined li, ul.fieldgroup.readonly.multi-line.combined li { padding-right: 6px; } ul.fieldgroup.multi-line.combined li:hover { border-color: var(--color_grey_medium); } ul.fieldgroup.disabled.multi-line.combined li:hover { border-color: transparent; } ul.fieldgroup.readonly.multi-line.combined li:hover { border-color: transparent; } ul.fieldgroup.multi-line.combined li:last-child { border: 1px solid transparent; } ul.fieldgroup.readonly.multi-line.combined li:last-child { display: none; } ul.fieldgroup.multi-line.combined li input[type="text"] { margin: 0px 0px 0px 0px; } ul.fieldgroup.multi-line.combined li .button.remove { margin: 0px -23px 0px 0px; margin-right: 0px !important; } /* Components . Field Groups . Multi-line . Floating */ ul.fieldgroup.multi-line.floating { border-color: transparent; } ul.fieldgroup.multi-line.floating li { border: none; overflow: visible; margin-bottom: 6px; } ul.fieldgroup.multi-line.floating li:nth-last-child(2) { margin-bottom: 0px !important; } ul.fieldgroup.multi-line.floating li input { /*border: 1px solid #cccccc;*/ } /* Components . Field Groups . Multi-line . List */ ul.fieldgroup.multi-line.list li input { border: none !important; } ul.fieldgroup.multi-line.list { border-top-width: 1px; border-top-color: var(--color_grey_medium); border-top-style: solid; } ul.fieldgroup.multi-line.list.empty { border-top-color: transparent !important; } ul.fieldgroup.multi-line.list li { line-height: 0px; border: 1px solid var(--color_grey_medium); border-top-width: 0px; border-bottom: 1px dashed var(--color_grey_medium); } ul.fieldgroup.multi-line.list li:last-child { border: none; line-height: initial; } ul.fieldgroup.multi-line.list li:nth-last-child(2), ul.fieldgroup.multi-line.list li.last { border-bottom: 1px solid var(--color_grey_medium) !important; } ul.fieldgroup.multi-line.list.invalid, ul.fieldgroup.multi-line.list.invalid li, ul.fieldgroup.multi-line.list.invalid li:nth-last-child(2), ul.fieldgroup.multi-line.list.invalid li.last { border-color: var(--color_red) !important; } ul.fieldgroup.multi-line.list.invalid li:not(:last-child) { animation-name: pulse_invalid; animation-duration: 2000ms; animation-iteration-count: 1; } ul.fieldgroup.multi-line.list a.download { border: none; } ul.fieldgroup.multi-line.list a.download:before { margin-top: calc(1px * ( ( (var(--components_global_h) * var(--components_scale)) - var(--download_button_height) ) / 2 ) ); } /* Components . Field Groups . Multi-line . Disabled */ ul.fieldgroup.disabled.multi-line.list, ul.fieldgroup.disabled.multi-line li { border-color: var(--color_grey_light) !important; } ul.fieldgroup.disabled.multi-line li:last-child a, ul.fieldgroup.disabled.multi-line li:last-child a:hover, ul.fieldgroup.multi-line li:last-child a.disabled, ul.fieldgroup.multi-line li:last-child a.disabled:hover{ color: var(--color_grey_light) !important; cursor: default; filter: none; } ul.fieldgroup.disabled.multi-line li input { padding-right: calc(1px * var(--components_components_spacing_h)); color: var(--color_grey_light); cursor: not-allowed; } /* Components . Field Groups . Multi-line . Readonly */ ul.fieldgroup.readonly.multi-line.list, ul.fieldgroup.readonly.multi-line li { border-color: var(--color_grey_light) !important; } ul.fieldgroup.readonly.multi-line li:last-child{ display: none; } ul.fieldgroup.readonly.multi-line li input { } /* Components . Field Groups . Multi-language */ ul.fieldgroup.multi-language { border-top-width: 1px; border-top-color: var(--color_grey_light); border-top-style: solid; } ul.fieldgroup.multi-language li { line-height: 0px; border: 1px solid var(--color_grey_light); border-top-width: 0px; border-bottom: 1px dashed #DDDDDD; } ul.fieldgroup.multi-language li:last-child { border-bottom: 1px solid var(--color_grey_light); } ul.fieldgroup.multi-language li input[type="text"] { padding-right: 32px; border: none; background-color: transparent; } ul.fieldgroup.readonly.multi-language li input { border-bottom-color: transparent; } ul.fieldgroup.multi-language li:last-child input { border-bottom: none; } ul.fieldgroup.multi-language li .language_marker { display: block; float: right; margin: 0px 6px 0px 0px; margin-top: calc(-1px * ((var(--components_global_h) * var(--components_scale)) - 10) ); font-size: 10px; text-transform: uppercase; color: #939598; opacity: 0.5; user-select: none; } /* Components . Action fields */ .actionfield input { padding-right: calc(1px * ((var(--components_global_h) * var(--components_scale)) + var(--components_components_spacing_h) ) )!important; border-style:dashed ; color: var(--color_links); box-sizing: border-box; transition: 0.4s all ease-in-out; } .actionfield:hover input { border-color: var(--color_grey_dark) !important; } .actionfield.disabled:hover input { border-color: var(--color_grey_light) !important; } .actionfield:hover input.active { border-color: var(--color_links) !important; } .actionfield:hover input.light { border-color: var(--color_white) !important; } .actionfield:hover button { transition: 0.2s all ease-in-out; } .actionfield.highlighted input { background-color: rgba(57,184,118,0.1) !important; } .actionfield.highlighted button { background-color: var(--color_green); } .actionfield button { position: relative; float: right; width: calc(1px * (var(--components_global_h) * var(--components_scale)))!important; margin-top: calc(-1px * (var(--components_global_h) * var(--components_scale)))!important; padding: 0px !important; font-family: PaperIcons !important; } .actionfield.disabled input { color: var(--color_grey_light) !important; } .actionfield.readonly input{ color: var(--color_text); } .actionfield.readonly input, .actionfield input[readonly] { background-image: none !important; } .actionfield.readonly input:focus, .actionfield input[readonly]:focus { border-color: var(--color_grey_medium) !important; } .actionfield.readonly button { opacity: 0.3; cursor: not-allowed; } .actionfield.clipper input { cursor: pointer; } /* Components . Checkbox + Radio Buttons */ /* Components . Checkbox + Radio Buttons . Default */ input[type="checkbox"], input[type="radio"] { display: inline-block; height: calc(1px * ((var(--components_global_h) * var(--components_scale)) / 2.1) ) !important; width: calc(1px * ((var(--components_global_h) * var(--components_scale)) / 2.1) ) !important; } /* Components . Fieldgroups */ /* Components . Fieldgroups . Default */ fieldgroup { display: block; box-sizing: border-box; } /* Components . Fieldgroups . Checkbox + Radio Buttons Overides */ fieldgroup.checkbox, fieldgroup.radio { text-align: left; padding-left: calc( 1px *( ((var(--components_global_h) * var(--components_scale)) / 2 ) + 10 )) !important; } fieldgroup.checkbox input, fieldgroup.radio input { position: absolute; float: left; margin-left: calc( -1px *( ((var(--components_global_h) * var(--components_scale)) / 2 ) + 10 )) !important; display: inline-block !important; } fieldgroup.checkbox.medium input, fieldgroup.radio.medium input { margin-top: 3px; } fieldgroup.checkbox.large input, fieldgroup.radio.large input { margin-top: 4px; } fieldgroup.checkbox.huge input, fieldgroup.radio.huge input { margin-top: 5px; } /* Components . Selects */ /* Components . Selects . Default */ select { display: inline-block; width: 100%; padding-right: calc(1px * (var(--components_global_h) * var(--components_scale)))!important; padding-left: calc(1px * (var(--components_components_spacing_h) / 2.5)); background-color: #f4f4f4; background-image: url(../media/select.arrow.dark.active.png); background-position: right center; background-size: contain; background-repeat: no-repeat; -webkit-appearance: none; -moz-appearance: none; transition: 0.2s all ease-in-out; } /* Components . Selects . Styles */ /* Components . Selects . Styles . Rounded */ select.rounded { border-radius: calc(1px * (var(--components_components_spacing_h) * 0.8)); } /* Components . Selects . States . Hover */ select:hover { border-color: var(--color_grey_medium); } /* Components . Selects . States . Focus + Active */ select:focus, select.active { border-color: var(--color_links) !important; outline-width: 0px; } /* Components . Selects . States . Disabled */ select[disabled], select[disabled]:hover { color: var(--color_grey_light); border-color: var(--color_grey_light); background-image: url(../media/select.arrow.dark.disabled.png); cursor: not-allowed; } /* Components . Selects . States . Readonly */ select[readonly], select[readonly]:hover, select[readonly]:focus { border-color: var(--color_grey_light) !important; cursor: default; } /* Components . Selects . States . Readonly Display */ select[readonly].display { border-color: transparent !important; background-color: transparent !important; background-image: none !important; } /* Components . Selects . Colors */ /* Components . Selects . Colors . Base */ select.primary { color: var(--color_white); background-color: var(--color_primary); background-image: url(../media/select.arrow.light.active.png); } select.secondary { color: var(--color_white); background-color: var(--color_secondary); background-image: url(../media/select.arrow.light.active.png); } select.transparent { color: var(--color_text); background-color: transparent; } select.transparent.light { background-image: url(../media/select.arrow.light.active.png); } /* Components . Selects . Colors . Default */ select.red { color: var(--color_white); background-color: var(--color_red); background-image: url(../media/select.arrow.light.active.png); } select.green { color: var(--color_white); background-color: var(--color_green); background-image: url(../media/select.arrow.light.active.png); } select.blue { color: var(--color_white); background-color: var(--color_blue); background-image: url(../media/select.arrow.light.active.png); } select.orange { color: var(--color_white); background-color: var(--color_orange); background-image: url(../media/select.arrow.light.active.png); } select.yellow { color: var(--color_text); background-color: var(--color_yellow); } select.grey, select.gray { color: var(--color_white); background-color: var(--color_grey); background-image: url(../media/select.arrow.light.active.png); } select.black { color: var(--color_white); background-color: var(--color_black); background-image: url(../media/select.arrow.light.active.png); } select.white { color: var(--color_text); background-color: var(--color_white); } /* Components . Selects . Colors . Light */ select.red_light { color: var(--color_text); background-color: var(--color_red_light); } select.green_light { color: var(--color_text); background-color: var(--color_green_light); } select.blue_light { color: var(--color_text); background-color: var(--color_blue_light); } select.orange_light { color: var(--color_text); background-color: var(--color_orange_light); } select.yellow_light { color: var(--color_text); background-color: var(--color_yellow_light); } select.grey_light, select.gray_light { color: var(--color_text); background-color: var(--color_grey_light); } select.black_light { color: var(--color_text); background-color: var(--color_black_light); } select.white_light { color: var(--color_white); background-color: var(--color_white_light); background-image: url(../media/select.arrow.light.active.png); } /* Components . Selects . Colors . Medium */ select.red_medium { color: var(--color_white); background-color: var(--color_red_medium); background-image: url(../media/select.arrow.light.active.png); } select.green_medium { color: var(--color_white); background-color: var(--color_green_medium); background-image: url(../media/select.arrow.light.active.png); } select.blue_medium { color: var(--color_white); background-color: var(--color_blue_medium); background-image: url(../media/select.arrow.light.active.png); } select.orange_medium { color: var(--color_white); background-color: var(--color_orange_medium); background-image: url(../media/select.arrow.light.active.png); } select.yellow_medium { color: var(--color_white); background-color: var(--color_yellow_medium); background-image: url(../media/select.arrow.light.active.png); } select.grey_medium, select.gray_medium { color: var(--color_white); background-color: var(--color_grey_medium); background-image: url(../media/select.arrow.light.active.png); } select.black_medium { color: var(--color_white); background-color: var(--color_black_medium); background-image: url(../media/select.arrow.light.active.png); } select.white_medium { color: var(--color_white); background-color: var(--color_white_medium); background-image: url(../media/select.arrow.light.active.png); } /* Components . Selects . Colors . Dark */ select.red_dark { color: var(--color_white); background-color: var(--color_red_dark); background-image: url(../media/select.arrow.light.active.png); } select.green_dark { color: var(--color_white); background-color: var(--color_green_dark); background-image: url(../media/select.arrow.light.active.png); } select.blue_dark { color: var(--color_white); background-color: var(--color_blue_dark); background-image: url(../media/select.arrow.light.active.png); } select.orange_dark { color: var(--color_white); background-color: var(--color_orange_dark); background-image: url(../media/select.arrow.light.active.png); } select.yellow_dark { color: var(--color_white); background-color: var(--color_yellow_dark); background-image: url(../media/select.arrow.light.active.png); } select.grey_dark, select.gray_dark { color: var(--color_white); background-color: var(--color_grey_dark); background-image: url(../media/select.arrow.light.active.png); } select.black_dark { color: var(--color_white); background-color: var(--color_black_dark); background-image: url(../media/select.arrow.light.active.png); } select.white_dark { color: var(--color_white); background-color: var(--color_white_dark); background-image: url(../media/select.arrow.light.active.png); } /* Components . Selects . Colors . All */ select.primary, select.secondary, select.transparent, select.red, select.green, select.blue, select.orange, select.yellow, select.grey, select.gray, select.black, select.white, select.red_light, select.green_light, select.blue_light, select.orange_light, select.yellow_light, select.grey_light, select.gray_light, select.black_light, select.white_light, select.red_medium, select.green_medium, select.blue_medium, select.orange_medium, select.yellow_medium, select.grey_medium, select.gray_medium, select.black_medium, select.white_medium, select.red_dark, select.green_dark, select.blue_dark, select.orange_dark, select.yellow_dark, select.grey_dark, select.gray_dark, select.black_dark, select.white_dark { border-color: transparent !important; } /* Components . Droppers */ /* Components . Droppers . Sizes */ dropper, dropper.default { --dropper_font_size: var(--fs_default); } dropper.tiny { --dropper_font_size: var(--fs_tiny); } dropper.small { --dropper_font_size: var(--fs_small); } dropper.medium { --dropper_font_size: var(--fs_medium); } dropper.large { --dropper_font_size: var(--fs_large); } dropper.huge { --dropper_font_size: var(--fs_huge); } /* Components . Droppers . Extra small screens */ @media (min-width: 100px) { dropper, dropper.xs-default { --dropper_font_size: var(--fs_default); } dropper.xs-tiny { --dropper_font_size: var(--fs_tiny); } dropper.xs-small { --dropper_font_size: var(--fs_small); } dropper.xs-medium { --dropper_font_size: var(--fs_medium); } dropper.xs-large { --dropper_font_size: var(--fs_large); } dropper.xs-huge { --dropper_font_size: var(--fs_huge); } } /* Components . Droppers . Small screens */ @media (min-width: 768px) { dropper, dropper.default { --dropper_font_size: var(--fs_default); } dropper.tiny { --dropper_font_size: var(--fs_tiny); } dropper.small { --dropper_font_size: var(--fs_small); } dropper.medium { --dropper_font_size: var(--fs_medium); } dropper.large { --dropper_font_size: var(--fs_large); } dropper.huge { --dropper_font_size: var(--fs_huge); } dropper, dropper.sm-default { --dropper_font_size: var(--fs_default); } dropper.sm-tiny { --dropper_font_size: var(--fs_tiny); } dropper.sm-small { --dropper_font_size: var(--fs_small); } dropper.sm-medium { --dropper_font_size: var(--fs_medium); } dropper.sm-large { --dropper_font_size: var(--fs_large); } dropper.sm-huge { --dropper_font_size: var(--fs_huge); } } /* Components . Droppers . Medium screens */ @media (min-width: 990px) { dropper, dropper.md-default { --dropper_font_size: var(--fs_default); } dropper.md-tiny { --dropper_font_size: var(--fs_tiny); } dropper.md-small { --dropper_font_size: var(--fs_small); } dropper.md-medium { --dropper_font_size: var(--fs_medium); } dropper.md-large { --dropper_font_size: var(--fs_large); } dropper.md-huge { --dropper_font_size: var(--fs_huge); } } /* Components . Droppers . Large screens */ @media (min-width: 1200px) { dropper, dropper.lg-default { --dropper_font_size: var(--fs_default); } dropper.lg-tiny { --dropper_font_size: var(--fs_tiny); } dropper.lg-small { --dropper_font_size: var(--fs_small); } dropper.lg-medium { --dropper_font_size: var(--fs_medium); } dropper.lg-large { --dropper_font_size: var(--fs_large); } dropper.lg-huge { --dropper_font_size: var(--fs_huge); } } /* Components . Droppers . Default */ dropper { display: inline-block; text-align: left !important; background-color: transparent; overflow: visible; } /* Droppers . Button */ dropper button { border-width: 1px; border-style: solid; padding-right: calc(1px * (var(--components_global_h) * var(--components_scale)))!important; box-sizing: border-box; background-image: url(../media/dropper.arrow.down.light.active.png); background-size: auto 100%; background-position: right center; background-repeat: no-repeat; transition: all 200ms ease-in-out; } dropper button:hover, dropper.open button { filter: none !important; transition: none; } dropper.open button { background-image: url(../media/dropper.arrow.up.light.active.png); } dropper.light button { background-image: url(../media/dropper.arrow.down.light.active.png) !important; } dropper.light.open button { background-image: url(../media/dropper.arrow.up.light.active.png); } /* Droppers . List */ dropper ul { display: none; position: absolute; } dropper.open ul { display: block; margin-top: 6px; z-index: 999; border: 1px solid #59595B; background-color: white; } dropper.open ul li.active { display: none; } /* Droppers . List . Item */ dropper.open ul li a { display: block; padding: calc(var(--dropper_font_size) * 0.7); font-size: var(--dropper_font_size); color: var(--color_text); text-decoration: none; transition: all 200ms cubic-bezier(0.825, 0.000, 0.150, 1.000); cursor: pointer; } dropper.open ul li a:hover { color: #3C3C3B; background-color: var(--color_grey_light) !important; filter: none !important; } /* Components . Droppers . Styles */ dropper.rounded button { border-radius: calc(1px * (var(--components_components_spacing_h) * 0.8)); } /* Components . Droppers . Colors */ /* Components . Droppers . Colors . Base */ dropper.primary button { border-color: var(--color_primary); background-color: var(--color_primary); } dropper.secondary button { border-color: var(--color_secondary); background-color: var(--color_secondary); } dropper.transparent button { border-color: transparent; background-color: transparent; } /* Components . Droppers . Colors . Default */ dropper.red button { border-color: var(--color_red); background-color: var(--color_red); } dropper.green button { border-color: var(--color_green); background-color: var(--color_green); } dropper.blue button { border-color: var(--color_blue); background-color: var(--color_blue); } dropper.orange button { border-color: var(--color_orange); background-color: var(--color_orange); } dropper.yellow button { border-color: var(--color_yellow); background-color: var(--color_yellow); } dropper.grey button, dropper.gray button { border-color: var(--color_grey); background-color: var(--color_grey); } dropper.black button { border-color: var(--color_black); background-color: var(--color_black); } dropper.white button { border-color: var(--color_white); background-color: var(--color_white); color: var(--color_text) !important; } /* Components . Droppers . Colors . Light */ dropper.red_light button { border-color: var(--color_red_light); background-color: var(--color_red_light); } dropper.green_light button { border-color: var(--color_green_light); background-color: var(--color_green_light); } dropper.blue_light button { border-color: var(--color_blue_light); background-color: var(--color_blue_light); } dropper.orange_light button { border-color: var(--color_orange_light); background-color: var(--color_orange_light); } dropper.yellow_light button { border-color: var(--color_yellow_light); background-color: var(--color_yellow_light); } dropper.grey_light button, dropper.gray_light button { border-color: var(--color_grey_light); background-color: var(--color_grey_light); } dropper.black_light button { border-color: transparent; background-color: var(--color_black_light); } dropper.white_light button { border-color: transparent; background-color: var(--color_white_light); } /* Components . Droppers . Colors . Medium */ dropper.red_medium button { border-color: var(--color_red_medium); background-color: var(--color_red_medium); } dropper.green_medium button { border-color: var(--color_green_medium); background-color: var(--color_green_medium); } dropper.blue_medium button { border-color: var(--color_blue_medium); background-color: var(--color_blue_medium); } dropper.orange_medium button { border-color: var(--color_orange_medium); background-color: var(--color_orange_medium); } dropper.yellow_medium button { border-color: var(--color_yellow_medium); background-color: var(--color_yellow_medium); } dropper.grey_medium button, dropper.gray_medium button { border-color: var(--color_grey_medium); background-color: var(--color_grey_medium); } dropper.black_medium button { border-color: transparent; background-color: var(--color_black_medium); } dropper.white_medium button { border-color: transparent; background-color: var(--color_white_medium); } /* Components . Droppers . Colors . Dark */ dropper.red_dark button { border-color: var(--color_red_dark); background-color: var(--color_red_dark); } dropper.green_dark button { border-color: var(--color_green_dark); background-color: var(--color_green_dark); } dropper.blue_dark button { border-color: var(--color_blue_dark); background-color: var(--color_blue_dark); } dropper.orange_dark button { border-color: var(--color_orange_dark); background-color: var(--color_orange_dark); } dropper.yellow_dark button { border-color: var(--color_yellow_dark); background-color: var(--color_yellow_dark); } dropper.grey_dark button, dropper.gray_dark button { border-color: var(--color_grey_dark); background-color: var(--color_grey_dark); } dropper.black_dark button { border-color: transparent; background-color: var(--color_black_dark); } dropper.white_dark button { border-color: transparent; background-color: var(--color_white_dark); } /* Components . Droppers . Options */ /* Dropper . Dark */ dropper.dark button { background-image: url(../media/dropper.arrow.down.dark.active.png) !important; } dropper.dark.open button { background-image: url(../media/dropper.arrow.up.dark.active.png) !important; } dropper.transparent.dark button { color: var(--color_text) !important; } /* Dropper . Outlines */ dropper.outline button { border-width: 1px; border-style: solid; background-color: transparent; } dropper.outline.white button { color: var(--color_white) !important; } dropper.outline.black_light button { border-color: var(--color_black_light);} dropper.outline.white_light button { border-color: var(--color_white_light);} dropper.outline.black_medium button { border-color: var(--color_black_medium);} dropper.outline.white_medium button { border-color: var(--color_white_medium);} dropper.outline.black_dark button { border-color: var(--color_black_dark);} dropper.outline.white_dark button { border-color: var(--color_white_dark);} dropper.outline.dark button { color: var(--color_text) !important; } /* Components . Switches */ /* Components . Switches . Default */ switch { --switch_height: calc((var(--components_global_h) * var(--components_scale))); --switch_width: calc(( (var(--switch_height) * 2 ) - (var(--switch_height) * var(--switch_cursor_margin_scale)) * 2 )); --switch_cursor_margin_scale: 0.1; --switch_cursor_height: calc((var(--switch_height) - ((var(--switch_height) * var(--switch_cursor_margin_scale)) * 2)) - 2); --switch_cursor_width: var(--switch_cursor_height); --switch_cursor_margin: calc( var(--switch_height) * var(--switch_cursor_margin_scale)); --switch_cursor_offset: calc((var(--switch_cursor_height) + var(--switch_cursor_margin)) + 1 ); display: inline-block; width: calc(1px * var(--switch_width)); background-image: url(../media/switch.default.png); background-position: center center; background-size: contain; background-repeat: no-repeat; background-color: var(--color_white); transition: 0.2s all cubic-bezier(0.76, 0, 0.24, 1); cursor: pointer; } switch:hover { border-color: var(--color_grey_dark); } /* Components . Switches . Default . Cursor */ switch .cursor { display: block; height: calc(1px * var(--switch_cursor_height)); width: calc(1px * var(--switch_cursor_width)); margin: calc(1px * var(--switch_cursor_margin)); background-color: var(--color_grey_dark); background-position: center center; background-size: cover; background-repeat: no-repeat; transition: 0.2s all cubic-bezier(0.76, 0, 0.24, 1); } switch.on .cursor { margin-left: calc(1px * var(--switch_cursor_offset) ); } /* Components . Switches . States */ switch.disabled:hover, switch.readonly:hover { border-color: var(--color_grey_medium); } switch.disabled { opacity: 0.3; background-image: url(../media/switch.disabled.dark.png); cursor: not-allowed; } switch.readonly { cursor: default; } switch.readonly .cursor { background-color: var(--color_grey_light); background-image: url(../media/switch.readonly.light.png); } /* Components . Switches . Styles */ /* Components . Switches . Styles . Rounded */ switch.rounded { border-radius: calc(1px * (var(--switch_height))); } switch.rounded .cursor { border-radius: calc(1px * (var(--switch_cursor_height))); } /* Components . Switches . Styles . Shaded */ switch.shaded { border-color: var(--color_red_light); background-color: var(--color_red_light); background-image: url(../media/switch.light.png); } switch.shaded:hover { border-color: var(--color_red); } switch.shaded.readonly:hover { border-color: var(--color_red_light); } switch.shaded.disabled, switch.shaded.disabled:hover { background-color: var(--color_grey_light); border-color: var(--color_grey_medium); } switch.shaded.on { border-color: var(--color_green_light); background-color: var(--color_green_light);; } switch.shaded.on:hover { border-color: var(--color_green_medium); } switch.shaded.on.readonly:hover { border-color: var(--color_green_light); } switch.shaded.iconless { background-image: none !important; } /* Components . Switches . Styles . Outlined */ switch.outlined { background-color: transparent; } /* Components . Switches . Styles . Dark */ switch.dark { background-image: url(../media/switch.dark.png); } /* Components . Switches . Styles . Light */ switch.light { border-color: var(--color_white_medium); background-image: url(../media/switch.light.png); } switch.light:hover { border-color: var(--color_white); } switch.light.disabled:hover, switch.light.readonly:hover { border-color: var(--color_white_medium); } switch.light.disabled { background-image: url(../media/switch.disabled.light.png); } switch.light .cursor, switch.light.disabled .cursor, switch.light.readonly .cursor { background-color: var(--color_white); } switch.light.readonly .cursor { background-image: url(../media/switch.readonly.dark.png); } /* Components . Switches . Styles . Iconless */ switch.iconless { background-image: none !important; } /* Components . Raters */ /* Components . Rater . Default */ .rater ul { font-size: 0px !important; } .rater ul li { --rater_height: calc((var(--components_global_h) * var(--components_scale))); --rater_width: var(--rater_height); display: inline-block; height: calc(1px * var(--rater_height)); width: calc(1px * var(--rater_width)); margin-right: calc(1px * (var(--components_components_spacing_h)/2)); margin-left: calc(1px * (var(--components_components_spacing_h)/2)); line-height: calc(1px * var(--rater_height)); text-align: center; cursor: pointer; transition: 0.2s all cubic-bezier(0.76, 0, 0.24, 1); } /* Components . Rater . States */ .rater ul li.active, .rater ul li.active:hover { cursor: default; } /* Components . Rater . Styles */ /* Components . Rater . Styles . Rounded */ .rater.rounded ul li { border-radius: 100%; } /* Components . Rater . Styles . Outlined */ /* Base */ .rater.ol_primary ul li, .rater ul li.ol_primary { border-color: rgba(var(--color_primary_r), var(--color_primary_g), var(--color_primary_b), 0.6 );} .rater.ol_primary ul li:hover, .rater ul li.ol_primary:hover { border-color: rgba(var(--color_primary_r), var(--color_primary_g), var(--color_primary_b), 1); } .rater.ol_secondary ul li, .rater ul li.ol_secondary { border-color: rgba(var(--color_secondary_r), var(--color_secondary_g), var(--color_secondary_b), 0.6 );} .rater.ol_secondary ul li:hover, .rater ul li.ol_secondary:hover { border-color: rgba(var(--color_secondary_r), var(--color_secondary_g), var(--color_secondary_b), 1);} /* Standard */ .rater.ol_red ul li, .rater ul li.ol_red { border-color: rgba(var(--color_red_r), var(--color_red_g), var(--color_red_b), 0.6 );} .rater.ol_red ul li:hover, .rater ul li.ol_red:hover { border-color: rgba(var(--color_red_r), var(--color_red_g), var(--color_red_b), 1); } .rater.ol_green ul li, .rater ul li.ol_green { border-color: rgba(var(--color_green_r), var(--color_green_g), var(--color_green_b), 0.6 );} .rater.ol_green ul li:hover, .rater ul li.ol_green:hover { border-color: rgba(var(--color_green_r), var(--color_green_g), var(--color_green_b), 1); } .rater.ol_blue ul li, .rater ul li.ol_blue { border-color: rgba(var(--color_blue_r), var(--color_blue_g), var(--color_blue_b), 0.6 );} .rater.ol_blue ul li:hover, .rater ul li.ol_blue:hover { border-color: rgba(var(--color_blue_r), var(--color_blue_g), var(--color_blue_b), 1); } .rater.ol_orange ul li, .rater ul li.ol_orange { border-color: rgba(var(--color_orange_r), var(--color_orange_g), var(--color_orange_b), 0.6 );} .rater.ol_orange ul li:hover, .rater ul li.ol_orange:hover { border-color: rgba(var(--color_orange_r), var(--color_orange_g), var(--color_orange_b), 1); } .rater.ol_yellow ul li, .rater ul li.ol_yellow { border-color: rgba(var(--color_yellow_r), var(--color_yellow_g), var(--color_yellow_b), 0.6 );} .rater.ol_yellow ul li:hover, .rater ul li.ol_yellow:hover { border-color: rgba(var(--color_yellow_r), var(--color_yellow_g), var(--color_yellow_b), 1); } .rater.ol_grey ul li, .rater ul li.ol_grey { border-color: rgba(var(--color_grey_r), var(--color_grey_g), var(--color_grey_b), 0.6 );} .rater.ol_grey ul li:hover, .rater ul li.ol_grey:hover { border-color: rgba(var(--color_grey_r), var(--color_grey_g), var(--color_grey_b), 1); } .rater.ol_black ul li, .rater ul li.ol_black { border-color: rgba(var(--color_black_r), var(--color_black_g), var(--color_black_b), 0.6 );} .rater.ol_black ul li:hover, .rater ul li.ol_black:hover { border-color: rgba(var(--color_black_r), var(--color_black_g), var(--color_black_b), 1); } .rater.ol_white ul li, .rater ul li.ol_white { border-color: rgba(var(--color_white_r), var(--color_white_g), var(--color_white_b), 0.6 );} .rater.ol_white ul li:hover, .rater ul li.ol_white:hover { border-color: rgba(var(--color_white_r), var(--color_white_g), var(--color_white_b), 1);} /* Dark */ .rater.ol_red_dark ul li, .rater ul li.ol_red_dark { border-color: rgba(var(--color_red_dark_r), var(--color_red_dark_g), var(--color_red_dark_b), 0.75 );} .rater.ol_red_dark ul li:hover, .rater ul li.ol_red_dark:hover { border-color: rgba(var(--color_red_dark_r), var(--color_red_dark_g), var(--color_red_dark_b), 1); } .rater.ol_green_dark ul li, .rater ul li.ol_green_dark { border-color: rgba(var(--color_green_dark_r), var(--color_green_dark_g), var(--color_green_dark_b), 0.75 );} .rater.ol_green_dark ul li:hover, .rater ul li.ol_green_dark:hover { border-color: rgba(var(--color_green_dark_r), var(--color_green_dark_g), var(--color_green_dark_b), 1); } .rater.ol_blue_dark ul li, .rater ul li.ol_blue_dark { border-color: rgba(var(--color_blue_dark_r), var(--color_blue_dark_g), var(--color_blue_dark_b), 0.75 );} .rater.ol_blue_dark ul li:hover, .rater ul li.ol_blue_dark:hover { border-color: rgba(var(--color_blue_dark_r), var(--color_blue_dark_g), var(--color_blue_dark_b), 1); } .rater.ol_orange_dark ul li, .rater ul li.ol_orange_dark { border-color: rgba(var(--color_orange_dark_r), var(--color_orange_dark_g), var(--color_orange_dark_b), 0.75 );} .rater.ol_orange_dark ul li:hover, .rater ul li.ol_orange_dark:hover { border-color: rgba(var(--color_orange_dark_r), var(--color_orange_dark_g), var(--color_orange_dark_b), 1); } .rater.ol_yellow_dark ul li, .rater ul li.ol_yellow_dark { border-color: rgba(var(--color_yellow_dark_r), var(--color_yellow_dark_g), var(--color_yellow_dark_b), 0.75 );} .rater.ol_yellow_dark ul li:hover, .rater ul li.ol_yellow_dark:hover { border-color: rgba(var(--color_yellow_dark_r), var(--color_yellow_dark_g), var(--color_yellow_dark_b), 1); } .rater.ol_grey_dark ul li, .rater ul li.ol_grey_dark { border-color: rgba(var(--color_grey_dark_r), var(--color_grey_dark_g), var(--color_grey_dark_b), 0.75 );} .rater.ol_grey_dark ul li:hover, .rater ul li.ol_grey_dark:hover { border-color: rgba(var(--color_grey_dark_r), var(--color_grey_dark_g), var(--color_grey_dark_b), 1); } .rater.ol_black_dark ul li, .rater ul li.ol_black_dark { border-color: rgba(var(--color_black_r), var(--color_black_g), var(--color_black_b), 0.75 );} .rater.ol_black_dark ul li:hover, .rater ul li.ol_black_dark:hover { border-color: rgba(var(--color_black_r), var(--color_black_g), var(--color_black_b), 0.1); } .rater.ol_white_dark ul li, .rater ul li.ol_white_dark { border-color: rgba(var(--color_white_r), var(--color_white_g), var(--color_white_b), 0.75 );} .rater.ol_white_dark ul li:hover, .rater ul li.ol_white_dark:hover { border-color: rgba(var(--color_white_r), var(--color_white_g), var(--color_white_b), 1);} /* Medium */ .rater.ol_red_medium ul li, .rater ul li.ol_red_medium { border-color: rgba(var(--color_red_medium_r), var(--color_red_medium_g), var(--color_red_medium_b), 0.75 );} .rater.ol_red_medium ul li:hover, .rater ul li.ol_red_medium:hover { border-color: rgba(var(--color_red_medium_r), var(--color_red_medium_g), var(--color_red_medium_b), 1); } .rater.ol_green_medium ul li, .rater ul li.ol_green_medium { border-color: rgba(var(--color_green_medium_r), var(--color_green_medium_g), var(--color_green_medium_b), 0.75 );} .rater.ol_green_medium ul li:hover, .rater ul li.ol_green_medium:hover { border-color: rgba(var(--color_green_medium_r), var(--color_green_medium_g), var(--color_green_medium_b), 1); } .rater.ol_blue_medium ul li, .rater ul li.ol_blue_medium { border-color: rgba(var(--color_blue_medium_r), var(--color_blue_medium_g), var(--color_blue_medium_b), 0.75 );} .rater.ol_blue_medium ul li:hover, .rater ul li.ol_blue_medium:hover { border-color: rgba(var(--color_blue_medium_r), var(--color_blue_medium_g), var(--color_blue_medium_b), 1); } .rater.ol_orange_medium ul li, .rater ul li.ol_orange_medium { border-color: rgba(var(--color_orange_medium_r), var(--color_orange_medium_g), var(--color_orange_medium_b), 0.75 );} .rater.ol_orange_medium ul li:hover, .rater ul li.ol_orange_medium:hover { border-color: rgba(var(--color_orange_medium_r), var(--color_orange_medium_g), var(--color_orange_medium_b), 1); } .rater.ol_yellow_medium ul li, .rater ul li.ol_yellow_medium { border-color: rgba(var(--color_yellow_medium_r), var(--color_yellow_medium_g), var(--color_yellow_medium_b), 0.75 );} .rater.ol_yellow_medium ul li:hover, .rater ul li.ol_yellow_medium:hover { border-color: rgba(var(--color_yellow_medium_r), var(--color_yellow_medium_g), var(--color_yellow_medium_b), 1); } .rater.ol_grey_medium ul li, .rater ul li.ol_grey_medium { border-color: rgba(var(--color_grey_medium_r), var(--color_grey_medium_g), var(--color_grey_medium_b), 0.75 );} .rater.ol_grey_medium ul li:hover, .rater ul li.ol_grey_medium:hover { border-color: rgba(var(--color_grey_medium_r), var(--color_grey_medium_g), var(--color_grey_medium_b), 1); } .rater.ol_black_medium ul li, .rater ul li.ol_black_medium { border-color: rgba(var(--color_black_r), var(--color_black_g), var(--color_black_b), 0.50 );} .rater.ol_black_medium ul li:hover, .rater ul li.ol_black_medium:hover { border-color: rgba(var(--color_black_r), var(--color_black_g), var(--color_black_b), 0.1); } .rater.ol_white_medium ul li, .rater ul li.ol_white_medium { border-color: rgba(var(--color_white_r), var(--color_white_g), var(--color_white_b), 0.50 );} .rater.ol_white_medium ul li:hover, .rater ul li.ol_white_medium:hover { border-color: rgba(var(--color_white_r), var(--color_white_g), var(--color_white_b), 1);} /* Light */ .rater.ol_red_light ul li, .rater ul li.ol_red_light { border-color: rgba(var(--color_red_light_r), var(--color_red_light_g), var(--color_red_light_b), 0.75 );} .rater.ol_red_light ul li:hover, .rater ul li.ol_red_light:hover { border-color: rgba(var(--color_red_light_r), var(--color_red_light_g), var(--color_red_light_b), 1); } .rater.ol_green_light ul li, .rater ul li.ol_green_light { border-color: rgba(var(--color_green_light_r), var(--color_green_light_g), var(--color_green_light_b), 0.75 );} .rater.ol_green_light ul li:hover, .rater ul li.ol_green_light:hover { border-color: rgba(var(--color_green_light_r), var(--color_green_light_g), var(--color_green_light_b), 1); } .rater.ol_blue_light ul li, .rater ul li.ol_blue_light { border-color: rgba(var(--color_blue_light_r), var(--color_blue_light_g), var(--color_blue_light_b), 0.75 );} .rater.ol_blue_light ul li:hover, .rater ul li.ol_blue_light:hover { border-color: rgba(var(--color_blue_light_r), var(--color_blue_light_g), var(--color_blue_light_b), 1); } .rater.ol_orange_light ul li, .rater ul li.ol_orange_light { border-color: rgba(var(--color_orange_light_r), var(--color_orange_light_g), var(--color_orange_light_b), 0.75 );} .rater.ol_orange_light ul li:hover, .rater ul li.ol_orange_light:hover { border-color: rgba(var(--color_orange_light_r), var(--color_orange_light_g), var(--color_orange_light_b), 1); } .rater.ol_yellow_light ul li, .rater ul li.ol_yellow_light { border-color: rgba(var(--color_yellow_light_r), var(--color_yellow_light_g), var(--color_yellow_light_b), 0.75 );} .rater.ol_yellow_light ul li:hover, .rater ul li.ol_yellow_light:hover { border-color: rgba(var(--color_yellow_light_r), var(--color_yellow_light_g), var(--color_yellow_light_b), 1); } .rater.ol_grey_light ul li, .rater ul li.ol_grey_light { border-color: rgba(var(--color_grey_light_r), var(--color_grey_light_g), var(--color_grey_light_b), 0.75 );} .rater.ol_grey_light ul li:hover, .rater ul li.ol_grey_light:hover { border-color: rgba(var(--color_grey_light_r), var(--color_grey_light_g), var(--color_grey_light_b), 1); } .rater.ol_black_light ul li, .rater ul li.ol_black_light { border-color: rgba(var(--color_black_r), var(--color_black_g), var(--color_black_b), 0.50 );} .rater.ol_black_light ul li:hover, .rater ul li.ol_black_light:hover { border-color: rgba(var(--color_black_r), var(--color_black_g), var(--color_black_b), 0.1); } .rater.ol_white_light ul li, .rater ul li.ol_white_light { border-color: rgba(var(--color_white_r), var(--color_white_g), var(--color_white_b), 0.50 );} .rater.ol_white_light ul li:hover, .rater ul li.ol_white_light:hover { border-color: rgba(var(--color_white_r), var(--color_white_g), var(--color_white_b), 1);} /* Components . Rater . Colors */ /* Normal */ /* Default */ .rater ul li { color: var(--color_text); border-color: rgba(var(--color_grey_light_r), var(--color_grey_light_g), var(--color_grey_light_b),0.5);} .rater ul li:hover { color: var(--color_text); border-color: transparent; background-color: rgba(var(--color_grey_medium_r),var(--color_grey_medium_g),var(--color_grey_medium_b),0.25); } /* Base */ .rater.primary ul li { color: var(--color_text);} .rater.primary ul li:hover, .rater ul li.primary:hover { color: var(--color_text); border-color: transparent; background-color: rgba(var(--color_primary_r), var(--color_primary_g), var(--color_primary_b), 0.5);} .rater.secondary ul li { color: var(--color_text);} .rater.secondary ul li:hover, .rater ul li.secondary:hover { color: var(--color_text); border-color: transparent; background-color: rgba(var(--color_secondary_r), var(--color_secondary_g), var(--color_secondary_b), 0.5);} /* Standard */ .rater.red ul li { color: var(--color_text);} .rater.red ul li:hover, .rater ul li.red:hover { color: var(--color_text); border-color: transparent; background-color: rgba(var(--color_red_r), var(--color_red_g), var(--color_red_b), 0.5);} .rater.green ul li { color: var(--color_text);} .rater.green ul li:hover, .rater ul li.green:hover { color: var(--color_text); border-color: transparent; background-color: rgba(var(--color_green_r), var(--color_green_g), var(--color_green_b), 0.5);} .rater.blue ul li { color: var(--color_text);} .rater.blue ul li:hover, .rater ul li.blue:hover { color: var(--color_text); border-color: transparent; background-color: rgba(var(--color_blue_r), var(--color_blue_g), var(--color_blue_b), 0.5);} .rater.orange ul li { color: var(--color_text);} .rater.orange ul li:hover, .rater ul li.orange:hover { color: var(--color_text); border-color: transparent; background-color: rgba(var(--color_orange_r), var(--color_orange_g), var(--color_orange_b), 0.5);} .rater.yellow ul li { color: var(--color_text);} .rater.yellow ul li:hover, .rater ul li.yellow:hover { color: var(--color_text); border-color: transparent; background-color: rgba(var(--color_yellow_r), var(--color_yellow_g), var(--color_yellow_b), 0.5);} .rater.grey ul li { color: var(--color_text);} .rater.grey ul li:hover, .rater ul li.grey:hover { color: var(--color_text); border-color: transparent; background-color: rgba(var(--color_grey_r), var(--color_grey_g), var(--color_grey_b), 0.5);} .rater.black ul li { color: var(--color_text);} .rater.black ul li:hover, .rater ul li.black:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_black_r), var(--color_black_g), var(--color_black_b), 0.5);} .rater.white ul li { color: var(--color_white);} .rater.white ul li:hover, .rater ul li.white:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_white_r), var(--color_white_g), var(--color_white_b), 0.5);} /* Dark */ .rater.red_dark ul li { color: var(--color_text);} .rater.red_dark ul li:hover, .rater ul li.red_dark:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_red_dark_r), var(--color_red_dark_g), var(--color_red_dark_b), 0.5);} .rater.green_dark ul li { color: var(--color_text);} .rater.green_dark ul li:hover, .rater ul li.green_dark:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_green_dark_r), var(--color_green_dark_g), var(--color_green_dark_b), 0.5);} .rater.blue_dark ul li { color: var(--color_text);} .rater.blue_dark ul li:hover, .rater ul li.blue_dark:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_blue_dark_r), var(--color_blue_dark_g), var(--color_blue_dark_b), 0.5);} .rater.orange_dark ul li { color: var(--color_text);} .rater.orange_dark ul li:hover, .rater ul li.orange_dark:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_orange_dark_r), var(--color_orange_dark_g), var(--color_orange_dark_b), 0.5);} .rater.yellow_dark ul li { color: var(--color_text);} .rater.yellow_dark ul li:hover, .rater ul li.yellow_dark:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_yellow_dark_r), var(--color_yellow_dark_g), var(--color_yellow_dark_b), 0.5);} .rater.grey_dark ul li { color: var(--color_text);} .rater.grey_dark ul li:hover, .rater ul li.grey_dark:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_grey_dark_r), var(--color_grey_dark_g), var(--color_grey_dark_b), 0.5);} .rater.black_dark ul li { color: var(--color_text);} .rater.black_dark ul li:hover, .rater ul li.black_dark:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_black_r), var(--color_black_g), var(--color_black_b), 0.375);} .rater.white_dark ul li { color: var(--color_white_dark);} .rater.white_dark ul li:hover, .rater ul li.white_dark:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_white_r), var(--color_white_g), var(--color_white_b), 0.375);} /* Medium */ .rater.red_medium ul li { color: var(--color_text);} .rater.red_medium ul li:hover, .rater ul li.red_medium:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_red_medium_r), var(--color_red_medium_g), var(--color_red_medium_b), 0.5);} .rater.green_medium ul li { color: var(--color_text);} .rater.green_medium ul li:hover, .rater ul li.green_medium:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_green_medium_r), var(--color_green_medium_g), var(--color_green_medium_b), 0.5);} .rater.blue_medium ul li { color: var(--color_text);} .rater.blue_medium ul li:hover, .rater ul li.blue_medium:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_blue_medium_r), var(--color_blue_medium_g), var(--color_blue_medium_b), 0.5);} .rater.orange_medium ul li { color: var(--color_text);} .rater.orange_medium ul li:hover, .rater ul li.orange_medium:hover { color: var(--color_text); border-color: transparent; background-color: rgba(var(--color_orange_medium_r), var(--color_orange_medium_g), var(--color_orange_medium_b), 0.5);} .rater.yellow_medium ul li { color: var(--color_text);} .rater.yellow_medium ul li:hover, .rater ul li.yellow_medium:hover { color: var(--color_text); border-color: transparent; background-color: rgba(var(--color_yellow_medium_r), var(--color_yellow_medium_g), var(--color_yellow_medium_b), 0.5);} .rater.grey_medium ul li { color: var(--color_text);} .rater.grey_medium ul li:hover, .rater ul li.grey_medium:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_grey_medium_r), var(--color_grey_medium_g), var(--color_grey_medium_b), 0.5);} .rater.black_medium ul li { color: var(--color_text);} .rater.black_medium ul li:hover, .rater ul li.black_medium:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_black_r), var(--color_black_g), var(--color_black_b), 0.25);} .rater.white_medium ul li { color: var(--color_white_medium);} .rater.white_medium ul li:hover, .rater ul li.white_medium:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_white_r), var(--color_white_g), var(--color_white_b), 0.25);} /* Light */ .rater.red_light ul li { color: var(--color_text);} .rater.red_light ul li:hover, .rater ul li.red_light:hover { color: var(--color_text); border-color: transparent; background-color: rgba(var(--color_red_light_r), var(--color_red_light_g), var(--color_red_light_b), 0.5);} .rater.green_light ul li { color: var(--color_text);} .rater.green_light ul li:hover, .rater ul li.green_light:hover { color: var(--color_text); border-color: transparent; background-color: rgba(var(--color_green_light_r), var(--color_green_light_g), var(--color_green_light_b), 0.5);} .rater.blue_light ul li { color: var(--color_text);} .rater.blue_light ul li:hover, .rater ul li.blue_light:hover { color: var(--color_text); border-color: transparent; background-color: rgba(var(--color_blue_light_r), var(--color_blue_light_g), var(--color_blue_light_b), 0.5);} .rater.orange_light ul li { color: var(--color_text);} .rater.orange_light ul li:hover, .rater ul li.orange_light:hover { color: var(--color_text); border-color: transparent; background-color: rgba(var(--color_orange_light_r), var(--color_orange_light_g), var(--color_orange_light_b), 0.5);} .rater.yellow_light ul li { color: var(--color_text);} .rater.yellow_light ul li:hover, .rater ul li.yellow_light:hover { color: var(--color_text); border-color: transparent; background-color: rgba(var(--color_yellow_light_r), var(--color_yellow_light_g), var(--color_yellow_light_b), 0.5);} .rater.grey_light ul li { color: var(--color_text);} .rater.grey_light ul li:hover, .rater ul li.grey_light:hover { color: var(--color_text); border-color: transparent; background-color: rgba(var(--color_grey_light_r), var(--color_grey_light_g), var(--color_grey_light_b), 0.5);} .rater.black_light ul li { color: var(--color_text);} .rater.black_light ul li:hover, .rater ul li.black_light:hover { color: var(--color_text); border-color: transparent; background-color: rgba(var(--color_black_r), var(--color_black_g), var(--color_black_b), 0.125);} .rater.white_light ul li { color: var(--color_white_light);} .rater.white_light ul li:hover, .rater ul li.white_light:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_white_r), var(--color_white_g), var(--color_white_b), 0.125);} /* Active */ /* Default */ .rater ul li.active, .rater ul li.active:hover { color: var(--color_white); border-color: transparent; background-color: var(--color_grey_medium); } /* Base */ .rater.primary ul li.active, .rater ul li.primary.active, .rater.primary ul li.active:hover, .rater ul li.primary.active:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_primary_r), var(--color_primary_g), var(--color_primary_b), 1); } .rater.secondary ul li.active, .rater ul li.secondary.active, .rater.secondary ul li.active:hover, .rater ul li.secondary.active:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_secondary_r), var(--color_secondary_g), var(--color_secondary_b), 1); } /* Standard */ .rater.red ul li.active, .rater ul li.red.active, .rater.red ul li.active:hover, .rater ul li.red.active:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_red_r), var(--color_red_g), var(--color_red_b), 1); } .rater.green ul li.active, .rater ul li.green.active, .rater.green ul li.active:hover, .rater ul li.green.active:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_green_r), var(--color_green_g), var(--color_green_b), 1); } .rater.blue ul li.active, .rater ul li.blue.active, .rater.blue ul li.active:hover, .rater ul li.blue.active:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_blue_r), var(--color_blue_g), var(--color_blue_b), 1); } .rater.orange ul li.active, .rater ul li.orange.active, .rater.orange ul li.active:hover, .rater ul li.orange.active:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_orange_r), var(--color_orange_g), var(--color_orange_b), 1); } .rater.yellow ul li.active, .rater ul li.yellow.active, .rater.yellow ul li.active:hover, .rater ul li.yellow.active:hover { color: var(--color_text); border-color: transparent; background-color: rgba(var(--color_yellow_r), var(--color_yellow_g), var(--color_yellow_b), 1); } .rater.grey ul li.active, .rater ul li.grey.active, .rater.grey ul li.active:hover, .rater ul li.grey.active:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_grey_r), var(--color_grey_g), var(--color_grey_b), 1); } .rater.black ul li.active, .rater ul li.black.active, .rater.black ul li.active:hover, .rater ul li.black.active:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_black_r), var(--color_black_g), var(--color_black_b), 1); } .rater.white ul li.active, .rater ul li.white.active, .rater.white ul li.active:hover, .rater ul li.white.active:hover { color: var(--color_text); border-color: transparent; background-color: rgba(var(--color_white_r), var(--color_white_g), var(--color_white_b), 1); } /* Dark */ .rater.red_dark ul li.active, .rater ul li.red_dark.active, .rater.red_dark ul li.active:hover, .rater ul li.red_dark.active:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_red_dark_r), var(--color_red_dark_g), var(--color_red_dark_b), 1); } .rater.green_dark ul li.active, .rater ul li.green_dark.active, .rater.green_dark ul li.active:hover, .rater ul li.green_dark.active:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_green_dark_r), var(--color_green_dark_g), var(--color_green_dark_b), 1); } .rater.blue_dark ul li.active, .rater ul li.blue_dark.active, .rater.blue_dark ul li.active:hover, .rater ul li.blue_dark.active:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_blue_dark_r), var(--color_blue_dark_g), var(--color_blue_dark_b), 1); } .rater.orange_dark ul li.active, .rater ul li.orange_dark.active, .rater.orange_dark ul li.active:hover, .rater ul li.orange_dark.active:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_orange_dark_r), var(--color_orange_dark_g), var(--color_orange_dark_b), 1); } .rater.yellow_dark ul li.active, .rater ul li.yellow_dark.active, .rater.yellow_dark ul li.active:hover, .rater ul li.yellow_dark.active:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_yellow_dark_r), var(--color_yellow_dark_g), var(--color_yellow_dark_b), 1); } .rater.grey_dark ul li.active, .rater ul li.grey_dark.active, .rater.grey_dark ul li.active:hover, .rater ul li.grey_dark.active:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_grey_dark_r), var(--color_grey_dark_g), var(--color_grey_dark_b), 1); } .rater.black_dark ul li.active, .rater ul li.black_dark.active, .rater.black_dark ul li.active:hover, .rater ul li.black_dark.active:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_black_r), var(--color_black_g), var(--color_black_b), 0.75);} .rater.white_dark ul li.active, .rater ul li.white_dark.active, .rater.white_dark ul li.active:hover, .rater ul li.white_dark.active:hover { color: var(--color_text); border-color: transparent; background-color: rgba(var(--color_white_r), var(--color_white_g), var(--color_white_b), 0.75);} /* Medium */ .rater.red_medium ul li.active, .rater ul li.red_medium.active, .rater.red_medium ul li.active:hover, .rater ul li.red_medium.active:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_red_medium_r), var(--color_red_medium_g), var(--color_red_medium_b), 1); } .rater.green_medium ul li.active, .rater ul li.green_medium.active, .rater.green_medium ul li.active:hover, .rater ul li.green_medium.active:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_green_medium_r), var(--color_green_medium_g), var(--color_green_medium_b), 1); } .rater.blue_medium ul li.active, .rater ul li.blue_medium.active, .rater.blue_medium ul li.active:hover, .rater ul li.blue_medium.active:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_blue_medium_r), var(--color_blue_medium_g), var(--color_blue_medium_b), 1); } .rater.orange_medium ul li.active, .rater ul li.orange_medium.active, .rater.orange_medium ul li.active:hover, .rater ul li.orange_medium.active:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_orange_medium_r), var(--color_orange_medium_g), var(--color_orange_medium_b), 1); } .rater.yellow_medium ul li.active, .rater ul li.yellow_medium.active, .rater.yellow_medium ul li.active:hover, .rater ul li.yellow_medium.active:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_yellow_medium_r), var(--color_yellow_medium_g), var(--color_yellow_medium_b), 1); } .rater.grey_medium ul li.active, .rater ul li.grey_medium.active, .rater.grey_medium ul li.active:hover, .rater ul li.grey_medium.active:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_grey_medium_r), var(--color_grey_medium_g), var(--color_grey_medium_b), 1); } .rater.black_medium ul li.active, .rater ul li.black_medium.active, .rater.black_medium ul li.active:hover, .rater ul li.black_medium.active:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_black_r), var(--color_black_g), var(--color_black_b), 0.5);} .rater.white_medium ul li.active, .rater ul li.white_medium.active, .rater.white_medium ul li.active:hover, .rater ul li.white_medium.active:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_white_r), var(--color_white_g), var(--color_white_b), 0.5);} /* Light */ .rater.red_light ul li.active, .rater ul li.red_light.active, .rater.red_light ul li.active:hover, .raterul li.red_light.active:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_red_light_r), var(--color_red_light_g), var(--color_red_light_b), 1); } .rater.green_light ul li.active, .rater ul li.green_light.active, .rater.green_light ul li.active:hover, .rater ul li.green_light.active:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_green_light_r), var(--color_green_light_g), var(--color_green_light_b), 1); } .rater.blue_light ul li.active, .rater ul li.blue_light.active, .rater.blue_light ul li.active:hover, .rater ul li.blue_light.active:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_blue_light_r), var(--color_blue_light_g), var(--color_blue_light_b), 1); } .rater.orange_light ul li.active, .rater ul li.orange_light.active, .rater.orange_light ul li.active:hover, .rater ul li.orange_light.active:hover { color: var(--color_text); border-color: transparent; background-color: rgba(var(--color_orange_light_r), var(--color_orange_light_g), var(--color_orange_light_b), 1); } .rater.yellow_light ul li.active, .rater ul li.yellow_light.active, .rater.yellow_light ul li.active:hover, .rater ul li.yellow_light.active:hover { color: var(--color_text); border-color: transparent; background-color: rgba(var(--color_yellow_light_r), var(--color_yellow_light_g), var(--color_yellow_light_b), 1); } .rater.grey_light ul li.active, .rater ul li.grey_light.active, .rater.grey_light ul li.active:hover, .rater ul li.grey_light.active:hover { color: var(--color_text); border-color: transparent; background-color: rgba(var(--color_grey_light_r), var(--color_grey_light_g), var(--color_grey_light_b), 1); } .rater.black_light ul li.active, .rater ul li.black_light.active, .rater.black_light ul li.active:hover, .rater ul li.black_light.active:hover { color: var(--color_text); border-color: transparent; background-color: rgba(var(--color_black_r), var(--color_black_g), var(--color_black_b), 0.25);} .rater.white_light ul li.active, .rater ul li.white_light.active, .rater.white_light ul li.active:hover, .rater ul li.white_light.active:hover { color: var(--color_white); border-color: transparent; background-color: rgba(var(--color_white_r), var(--color_white_g), var(--color_white_b), 0.25);} /* Components . Rater . Disabled */ .rater.disabled ul li, .rater.disabled ul li:hover { cursor: not-allowed; } /* Components . Likers */ /* Components . Likers . Default */ liker { display: inline-block; overflow: auto; } liker * { user-select: none; } liker .icon { float: left; height: calc(1px * (var(--components_global_h) * var(--components_scale)))!important; width: calc(1px * (var(--components_global_h) * var(--components_scale)))!important; /* padding: 6px; */ box-sizing: border-box; padding: calc(1px * (var(--components_components_spacing_h) / 1.9)); } liker .icon path { fill: transparent; stroke-width: 1px; transition: all .2s ease; } liker label { float: left; margin-bottom: 0px !important; font-weight: normal !important; line-height: calc(1px * (var(--components_global_h) * var(--components_scale)))!important; } liker, liker label { cursor: pointer; } /* Components . Likers . States */ /* Components . Likers . States . Hover */ liker:hover .icon .fill { fill: var(--color_grey_medium); } /* Components . Likers . States . Off */ liker.off .icon .outline { stroke: var(--color_grey_medium); } /* Components . Likers . States . Pressed */ liker.pressed .icon .outline { stroke-width: 0px; } liker.pressed .icon .fill { fill: var(--color_grey); } /* Components . Likers . States . Disabled */ liker.disabled { cursor: not-allowed; } liker.disabled label { cursor: default; color: var(--color_grey_light); } liker.disabled .icon .outline { stroke-width: initial !important ; stroke: var(--color_grey_light) !important; } liker.disabled .icon .fill { fill: transparent !important; } /* Components . Likers . States . Readonly & Locked */ liker.readonly, liker.locked { cursor: not-allowed; } liker.readonly label, liker.locked label { cursor: default; } liker.readonly .icon .outline, liker.locked .icon .outline { stroke-width: initial !important ; } liker.readonly .icon .fill, liker.locked .icon .fill { fill: transparent; } /* Components . Likers . Colors */ /* Components . Likers . Colors . Base */ liker.on .icon .fill, liker.on.primary .icon .fill { fill: var(--color_primary);} liker.on .icon .outline, liker.on.primary .icon .outline { stroke: var(--color_primary);} liker.on.secondary .icon .fill { fill: var(--color_secondary);} liker.on.secondary .icon .outline { stroke: var(--color_secondary);} /* Components . Likers . Colors . Default */ liker.on.red .icon .fill { fill: var(--color_red);} liker.on.red .icon .outline { stroke: var(--color_red);} liker.on.green .icon .fill { fill: var(--color_green);} liker.on.green .icon .outline { stroke: var(--color_green);} liker.on.blue .icon .fill { fill: var(--color_blue);} liker.on.blue .icon .outline { stroke: var(--color_blue);} liker.on.orange .icon .fill { fill: var(--color_orange);} liker.on.orange .icon .outline { stroke: var(--color_orange);} liker.on.yellow .icon .fill { fill: var(--color_yellow);} liker.on.yellow .icon .outline { stroke: var(--color_yellow);} liker.on.grey .icon .fill, liker.on.gray .icon .fill { fill: var(--color_grey);} liker.on.grey .icon .outline, liker.on.gray .icon .outline { stroke: var(--color_grey);} liker.on.black .icon .fill { fill: var(--color_black);} liker.on.black .icon .outline { stroke: var(--color_black);} liker.on.white .icon .fill { fill: var(--color_white);} liker.on.white .icon .outline { stroke: var(--color_white);} /* Components . Likers . Colors . Light */ liker.on.red_light .icon .fill { fill: var(--color_red_light);} liker.on.red_light .icon .outline { stroke: var(--color_red_light);} liker.on.green_light .icon .fill { fill: var(--color_green_light);} liker.on.green_light .icon .outline { stroke: var(--color_green_light);} liker.on.blue_light .icon .fill { fill: var(--color_blue_light);} liker.on.blue_light .icon .outline { stroke: var(--color_blue_light);} liker.on.orange_light .icon .fill { fill: var(--color_orange_light);} liker.on.orange_light .icon .outline { stroke: var(--color_orange_light);} liker.on.yellow_light .icon .fill { fill: var(--color_yellow_light);} liker.on.yellow_light .icon .outline { stroke: var(--color_yellow_light);} liker.on.grey_light .icon .fill, liker.on.gray_light .icon .fill { fill: var(--color_grey_light);} liker.on.grey_light .icon .outline, liker.on.gray_light .icon .outline { stroke: var(--color_grey_light);} liker.on.black_light .icon .fill { fill: var(--color_black_light);} liker.on.black_light .icon .outline { stroke: var(--color_black_light);} liker.on.white_light .icon .fill { fill: var(--color_white_light);} liker.on.white_light .icon .outline { stroke: var(--color_white_light);} /* Components . Likers . Colors . Medium */ liker.on.red_medium .icon .fill { fill: var(--color_red_medium); } liker.on.red_medium .icon .outline { stroke: var(--color_red_medium); } liker.on.green_medium .icon .fill { fill: var(--color_green_medium); } liker.on.green_medium .icon .outline { stroke: var(--color_green_medium); } liker.on.blue_medium .icon .fill { fill: var(--color_blue_medium); } liker.on.blue_medium .icon .outline { stroke: var(--color_blue_medium); } liker.on.orange_medium .icon .fill { fill: var(--color_orange_medium);} liker.on.orange_medium .icon .outline { stroke: var(--color_orange_medium);} liker.on.yellow_medium .icon .fill { fill: var(--color_yellow_medium);} liker.on.yellow_medium .icon .outline { stroke: var(--color_yellow_medium);} liker.on.grey_medium .icon .fill, liker.on.gray_medium .icon .fill { fill: var(--color_grey_medium);} liker.on.grey_medium .icon .outline, liker.on.gray_medium .icon .outline { stroke: var(--color_grey_medium);} liker.on.black_medium .icon .fill { fill: var(--color_black_medium);} liker.on.black_medium .icon .outline { stroke: var(--color_black_medium);} liker.on.white_medium .icon .fill { fill: var(--color_white_medium);} liker.on.white_medium .icon .outline { stroke: var(--color_white_medium);} /* Components . Likers . Colors . Dark */ liker.on.red_dark .icon .fill { fill: var(--color_red_dark);} liker.on.red_dark .icon .outline { stroke: var(--color_red_dark);} liker.on.green_dark .icon .fill { fill: var(--color_green_dark);} liker.on.green_dark .icon .outline { stroke: var(--color_green_dark);} liker.on.blue_dark .icon .fill { fill: var(--color_blue_dark);} liker.on.blue_dark .icon .outline { stroke: var(--color_blue_dark);} liker.on.orange_dark .icon .fill { fill: var(--color_orange_dark);} liker.on.orange_dark .icon .outline { stroke: var(--color_orange_dark);} liker.on.yellow_dark .icon .fill { fill: var(--color_yellow_dark);} liker.on.yellow_dark .icon .outline { stroke: var(--color_yellow_dark);} liker.on.grey_dark .icon .fill, liker.on.gray_dark .icon .fill { fill: var(--color_grey_dark);} liker.on.grey_dark .icon .outline, liker.on.gray_dark .icon .outline { stroke: var(--color_grey_dark);} liker.on.black_dark .icon .fill { fill: var(--color_black_dark);} liker.on.black_dark .icon .outline { stroke: var(--color_black_dark);} liker.on.white_dark .icon .fill { fill: var(--color_white_dark);} liker.on.white_dark .icon .outline { stroke: var(--color_white_dark);} /* Components . Floaties */ .floaty { /* Variables */ --floaty_background_transparency: 0.8; /* Definitions */ position: fixed; display: block; z-index: 999999; transition: 400ms all cubic-bezier(0.320, 0.230, 0.160, 0.995); opacity: 0; overflow: auto; } .floaty.fake { z-index: 1; position: relative; } .floaty.visible { opacity: 1; } .floaty.top_left.visible { top: 30px !important; left: 30px !important; } .floaty.top.visible { top: 30px !important; } .floaty.top_right.visible { top: 30px !important; right: 30px !important; } .floaty.right.visible { right: 30px !important; } .floaty.bottom_right.visible { bottom: 30px !important; right: 30px !important; } .floaty.bottom.visible { bottom: 30px !important; } .floaty.bottom_left.visible { bottom: 30px !important; left: 30px !important; } .floaty.left.visible { left: 30px !important; } /* Components . Floaty . Sizes */ .floaty.tiny { font-size: var(--fs_tiny) !important; } .floaty.small { font-size: var(--fs_small) !important; } .floaty, .floaty.default { font-size: var(--fs_default) !important; } .floaty.medium { font-size: var(--fs_medium) !important; } .floaty.large { font-size: var(--fs_large) !important; } .floaty.huge { font-size: var(--fs_huge) !important; } /* Components . Floaty . Colors */ .floaty { background-color: rgba(var(--color_grey_light_r), var(--color_grey_light_g), var(--color_grey_light_b), var(--floaty_background_transparency)) !important; color: var(--color_text); } .floaty.red { background-color: rgba(247, 222, 221, var(--floaty_background_transparency)) !important; color: var(--color_red); } .floaty.green { background-color: rgba(219, 241, 228, var(--floaty_background_transparency)) !important; color: var(--color_green); } .floaty.blue { background-color: rgba(210, 229, 251, var(--floaty_background_transparency)) !important; color: var(--color_blue); } .floaty.orange { background-color: rgba(255, 239, 222, var(--floaty_background_transparency)) !important; color: var(--color_orange); } .floaty.yellow { background-color: rgba(255, 251, 216, var(--floaty_background_transparency)) !important; color: var(--color_yellow_dark); } .floaty.gray, .floaty.grey { background-color: rgba(219, 219, 219, var(--floaty_background_transparency)) !important; color: var(--color_grey); } .floaty.black { background-color: rgba(204, 204, 204, var(--floaty_background_transparency)) !important; color: var(--color_black); } .floaty.white { background-color: rgba(255, 255, 255, var(--floaty_background_transparency)) !important; color: var(--color_text); } .floaty.primary_standard { background-color: rgba(var(--color_primary_r), var(--color_primary_g), var(--color_primary_b), var(--floaty_background_transparency)) !important; color: var(--color_white); } .floaty.secondary_standard { background-color: rgba(var(--color_secondary_r), var(--color_secondary_g), var(--color_secondary_b), var(--floaty_background_transparency)) !important; color: var(--color_white); } .floaty.red_standard { background-color: rgba(var(--color_red_r), var(--color_red_g), var(--color_red_b), var(--floaty_background_transparency)) !important; color: var(--color_white); } .floaty.green_standard { background-color: rgba(var(--color_green_r), var(--color_green_g), var(--color_green_b), var(--floaty_background_transparency)) !important; color: var(--color_white); } .floaty.blue_standard { background-color: rgba(var(--color_blue_r), var(--color_blue_g), var(--color_blue_b), var(--floaty_background_transparency)) !important; color: var(--color_white); } .floaty.orange_standard { background-color: rgba(var(--color_orange_r), var(--color_orange_g), var(--color_orange_b), var(--floaty_background_transparency)) !important; color: var(--color_white); } .floaty.yellow_standard { background-color: rgba(var(--color_yellow_r), var(--color_yellow_g), var(--color_yellow_b), var(--floaty_background_transparency)) !important; color: var(--color_text); } .floaty.gray_standard, .floaty.grey_standard { background-color: rgba(var(--color_grey_r), var(--color_grey_g), var(--color_grey_b), var(--floaty_background_transparency)) !important; color: var(--color_white); } .floaty.black_standard { background-color: rgba(var(--color_black_r), var(--color_black_g), var(--color_black_b), var(--floaty_background_transparency)) !important; color: var(--color_white); } .floaty.white_standard { background-color: rgba(var(--color_white_r), var(--color_white_g), var(--color_white_b), var(--floaty_background_transparency)) !important; color: var(--color_text); } .floaty.red_dark { background-color: rgba(var(--color_red_dark_r), var(--color_red_dark_g), var(--color_red_dark_b), var(--floaty_background_transparency)) !important; color: var(--color_white); } .floaty.green_dark { background-color: rgba(var(--color_green_dark_r), var(--color_green_dark_g), var(--color_green_dark_b), var(--floaty_background_transparency)) !important; color: var(--color_white); } .floaty.blue_dark { background-color: rgba(var(--color_blue_dark_r), var(--color_blue_dark_g), var(--color_blue_dark_b), var(--floaty_background_transparency)) !important; color: var(--color_white); } .floaty.orange_dark { background-color: rgba(var(--color_orange_dark_r), var(--color_orange_dark_g), var(--color_orange_dark_b), var(--floaty_background_transparency)) !important; color: var(--color_white); } .floaty.yellow_dark { background-color: rgba(var(--color_yellow_dark_r), var(--color_yellow_dark_g), var(--color_yellow_dark_b), var(--floaty_background_transparency)) !important; color: var(--color_white); } .floaty.gray_dark, .floaty.grey_dark { background-color: rgba(var(--color_grey_dark_r), var(--color_grey_dark_g), var(--color_grey_dark_b), var(--floaty_background_transparency)) !important; color: var(--color_white); } .floaty.black_dark { background-color: var(--color_black_dark) !important; color: var(--color_white); } .floaty.white_dark { background-color: var(--color_white_dark) !important; color: var(--color_text); } .floaty.red_medium { background-color: rgba(var(--color_red_medium_r), var(--color_red_medium_g), var(--color_red_medium_b), var(--floaty_background_transparency)) !important; color: var(--color_white); } .floaty.green_medium { background-color: rgba(var(--color_green_medium_r), var(--color_green_medium_g), var(--color_green_medium_b), var(--floaty_background_transparency)) !important; color: var(--color_white); } .floaty.blue_medium { background-color: rgba(var(--color_blue_medium_r), var(--color_blue_medium_g), var(--color_blue_medium_b), var(--floaty_background_transparency)) !important; color: var(--color_white); } .floaty.orange_medium { background-color: rgba(var(--color_orange_medium_r), var(--color_orange_medium_g), var(--color_orange_medium_b), var(--floaty_background_transparency)) !important; color: var(--color_white); } .floaty.yellow_medium { background-color: rgba(var(--color_yellow_medium_r), var(--color_yellow_medium_g), var(--color_yellow_medium_b), var(--floaty_background_transparency)) !important; color: var(--color_white); } .floaty.gray_medium, .floaty.grey_medium { background-color: rgba(var(--color_grey_medium_r), var(--color_grey_medium_g), var(--color_grey_medium_b), var(--floaty_background_transparency)) !important; color: var(--color_white); } .floaty.black_medium { background-color: var(--color_black_medium) !important; color: var(--color_white); } .floaty.white_medium { background-color: var(--color_white_medium) !important; color: var(--color_white); } .floaty.red_light { background-color: rgba(var(--color_red_light_r), var(--color_red_light_g), var(--color_red_light_b), var(--floaty_background_transparency)) !important; color: var(--color_red_dark); } .floaty.green_light { background-color: rgba(var(--color_green_light_r), var(--color_green_light_g), var(--color_green_light_b), var(--floaty_background_transparency)) !important; color: var(--color_green_dark); } .floaty.blue_light { background-color: rgba(var(--color_blue_light_r), var(--color_blue_light_g), var(--color_blue_light_b), var(--floaty_background_transparency)) !important; color: var(--color_blue_dark); } .floaty.orange_light { background-color: rgba(var(--color_orange_light_r), var(--color_orange_light_g), var(--color_orange_light_b), var(--floaty_background_transparency)) !important; color: var(--color_orange_dark); } .floaty.yellow_light { background-color: rgba(var(--color_yellow_light_r), var(--color_yellow_light_g), var(--color_yellow_light_b), var(--floaty_background_transparency)) !important; color: var(--color_yellow_dark); } .floaty.gray_light, .floaty.grey_light { background-color: rgba(var(--color_grey_light_r), var(--color_grey_light_g), var(--color_grey_light_b), var(--floaty_background_transparency)) !important; color: var(--color_grey_dark); } .floaty.black_light { background-color: var(--color_black_light) !important; color: var(--color_black); } .floaty.white_light { background-color: var(--color_white_light) !important; color: var(--color_white); } /* Floaty . Header */ .floaty .header { display: block; overflow: auto; } .floaty .header .block { float: left; } .floaty .header .block.left { float: left; width: 80%; padding-left: calc( 1px * ((var(--components_global_h) * var(--components_scale))/var(--components_spacing_h) ) ) !important; line-height: calc(1px * (var(--components_global_h) * var(--components_scale)))!important; text-align: left; box-sizing: border-box; } /* Floaty . Header . Colors */ .floaty .header .block.left { color: var(--color_text); } /* Default */ .floaty.red .header .block.left { color: var(--color_red); } .floaty.green .header .block.left { color: var(--color_green); } .floaty.blue .header .block.left { color: var(--color_blue); } .floaty.orange .header .block.left { color: var(--color_orange); } .floaty.yellow .header .block.left { color: var(--color_yellow_dark); } .floaty.gray .header .block.left, .floaty.grey .header .block.left { color: var(--color_grey); } .floaty.black .header .block.left { color: var(--color_black); } .floaty.white .header .block.left { color: var(--color_text); } /* Light */ .floaty.red_light .header .block.left { color: var(--color_red_dark); } .floaty.green_light .header .block.left { color: var(--color_green_dark); } .floaty.blue_light .header .block.left { color: var(--color_blue_dark); } .floaty.orange_light .header .block.left { color: var(--color_orange_dark); } .floaty.yellow_light .header .block.left { color: var(--color_yellow_dark); } .floaty.gray_light .header .block.left, .floaty.grey_light .header .block.left { color: var(--color_grey_dark); } .floaty.black_light .header .block.left { color: var(--color_black); } .floaty.white_light .header .block.left { color: var(--color_white); } /* Standard */ .floaty.primary_standard .header .block.left { color: var(--color_white); } .floaty.secondary_standard .header .block.left { color: var(--color_white); } .floaty.red_standard .header .block.left { color: var(--color_white); } .floaty.green_standard .header .block.left { color: var(--color_white); } .floaty.blue_standard .header .block.left { color: var(--color_white); } .floaty.orange_standard .header .block.left { color: var(--color_white); } .floaty.yellow_standard .header .block.left { color: var(--color_text); } .floaty.gray_standard .header .block.left, .floaty.grey_standard .header .block.left { color: var(--color_white); } .floaty.black_standard .header .block.left { color: var(--color_white); } .floaty.white_standard .header .block.left { color: var(--color_text); } /* Medium */ .floaty.red_medium .header .block.left { color: var(--color_white); } .floaty.green_medium .header .block.left { color: var(--color_white); } .floaty.blue_medium .header .block.left { color: var(--color_white); } .floaty.orange_medium .header .block.left { color: var(--color_white); } .floaty.yellow_medium .header .block.left { color: var(--color_white); } .floaty.gray_medium .header .block.left { color: var(--color_white); } .floaty.grey_medium .header .block.left { color: var(--color_white); } .floaty.black_medium .header .block.left { color: var(--color_white); } .floaty.white_medium .header .block.left { color: var(--color_white); } /* Dark */ .floaty.red_dark .header .block.left { color: var(--color_white); } .floaty.green_dark .header .block.left { color: var(--color_white); } .floaty.blue_dark .header .block.left { color: var(--color_white); } .floaty.orange_dark .header .block.left { color: var(--color_white); } .floaty.yellow_dark .header .block.left { color: var(--color_white); } .floaty.gray_dark .header .block.left { color: var(--color_white); } .floaty.grey_dark .header .block.left { color: var(--color_white); } .floaty.black_dark .header .block.left { color: var(--color_white); } .floaty.white_dark .header .block.left { color: var(--color_text); } .floaty .header .block.right { float: right; width: 20%; text-align: right; } .floaty .header .block.right button { font-family: Papericons !important; opacity: 0.5; transition: 0.1s all ease-in-out; color: var(--color_red) !important; } .floaty .header .block.right button:hover { opacity: 1; } .floaty.red .header .block.right button { color: var(--color_red) !important; } .floaty.green .header .block.right button { color: var(--color_red) !important; } .floaty.blue .header .block.right button { color: var(--color_red) !important; } .floaty.orange .header .block.right button { color: var(--color_red) !important; } .floaty.yellow .header .block.right button { color: var(--color_red) !important; } .floaty.gray .header .block.right button, .floaty.grey .header .block.right button { color: var(--color_red) !important; } .floaty.black .header .block.right button { color: var(--color_red) !important; } .floaty.white .header .block.right button { color: var(--color_red) !important; } .floaty.red_light .header .block.right button { color: var(--color_red) !important; } .floaty.green_light .header .block.right button { color: var(--color_red) !important; } .floaty.blue_light .header .block.right button { color: var(--color_red) !important; } .floaty.orange_light .header .block.right button { color: var(--color_red) !important; } .floaty.yellow_light .header .block.right button { color: var(--color_red) !important; } .floaty.gray_light .header .block.right button, .floaty.grey_light .header .block.right button { color: var(--color_red) !important; } .floaty.black_light .header .block.right button { color: var(--color_red) !important; } .floaty.white_light .header .block.right button { color: var(--color_white) !important; } .floaty.primary_standard .header .block.right button { color: var(--color_white) !important; } .floaty.secondary_standard .header .block.right button { color: var(--color_white) !important; } .floaty.red_standard .header .block.right button { color: var(--color_white) !important; } .floaty.green_standard .header .block.right button { color: var(--color_white) !important; } .floaty.blue_standard .header .block.right button { color: var(--color_white) !important; } .floaty.orange_standard .header .block.right button { color: var(--color_white) !important; } .floaty.yellow_standard .header .block.right button { color: var(--color_red) !important; } .floaty.gray_standard .header .block.right button, .floaty.grey_standard .header .block.right button { color: var(--color_white) !important; } .floaty.black_standard .header .block.right button { color: var(--color_white) !important; } .floaty.white_standard .header .block.right button { color: var(--color_red) !important; } .floaty.red_medium .header .block.right button { color: var(--color_white) !important; } .floaty.green_medium .header .block.right button { color: var(--color_white) !important; } .floaty.blue_medium .header .block.right button { color: var(--color_white) !important; } .floaty.orange_medium .header .block.right button { color: var(--color_white) !important; } .floaty.yellow_medium .header .block.right button { color: var(--color_red) !important; } .floaty.gray_medium .header .block.right button, .floaty.grey_medium .header .block.right button { color: var(--color_white) !important; } .floaty.black_medium .header .block.right button { color: var(--color_white) !important; } .floaty.white_medium .header .block.right button { color: var(--color_white) !important; } .floaty.red_dark .header .block.right button { color: var(--color_white) !important; } .floaty.green_dark .header .block.right button { color: var(--color_white) !important; } .floaty.blue_dark .header .block.right button { color: var(--color_white) !important; } .floaty.orange_dark .header .block.right button { color: var(--color_white) !important; } .floaty.yellow_dark .header .block.right button { color: var(--color_white) !important; } .floaty.gray_dark .header .block.right button, .floaty.grey_dark .header .block.right button { color: var(--color_white) !important; } .floaty.black_dark .header .block.right button { color: var(--color_white) !important; } .floaty.white_dark .header .block.right button { color: var(--color_red) !important; } /* Floaty . Body */ .floaty .body { text-align: center; } .floaty.confirm .body, .floaty.message .body, .floaty.warning .body { padding: calc(1px * (var(--components_global_h) * var(--components_scale)))!important; } .floaty .body .icon { margin-bottom: calc(1px * ((var(--components_global_h) * var(--components_scale))/2) )!important; font-family: Papericons !important; font-size: calc(3px * var(--font_size)); line-height: calc(3px * var(--font_size)); } .floaty.message .body { padding-top: calc(1px * ((var(--components_global_h) * var(--components_scale)) / 2 ) )!important; } .floaty.notification .body { text-align: left; margin-top: calc(-1px * ((var(--components_global_h) * var(--components_scale))/2) )!important; padding-left: calc(1px * ((var(--components_global_h) * var(--components_scale))/2) )!important; padding-right: calc(1px * (var(--components_global_h) * var(--components_scale)))!important; padding-bottom: calc(1px * ((var(--components_global_h) * var(--components_scale))/2) )!important; } .floaty.notification .body .icon { float: left; display: block; margin-right: calc(1px * ((var(--components_global_h) * var(--components_scale))/4) )!important; margin-bottom: 0px; text-align: center; } .floaty.tiny.notification .body .icon { width: calc(2px * var(--fs_tiny)); font-size: calc(2px * var(--fs_tiny)); line-height: calc(2px * var(--fs_tiny)); } .floaty.small.notification .body .icon { width: calc(2px * var(--fs_small)); font-size: calc(2px * var(--fs_small)); line-height: calc(2px * var(--fs_small)); } .floaty.notification .body .icon, .floaty.default.notification .body .icon { width: calc(2px * var(--fs_default)); font-size: calc(2px * var(--fs_default)); line-height: calc(2px * var(--fs_default)); } .floaty.medium.notification .body .icon { width: calc(2px * var(--fs_medium)); font-size: calc(2px * var(--fs_medium)); line-height: calc(2px * var(--fs_medium)); } .floaty.large.notification .body .icon { width: calc(2px * var(--fs_large)); font-size: calc(2px * var(--fs_large)); line-height: calc(2px * var(--fs_large)); } .floaty.huge.notification .body .icon { width: calc(2px * var(--fs_huge)); font-size: calc(2px * var(--fs_huge)); line-height: calc(2px * var(--fs_huge)); } .floaty.notification .body p { /*padding: 8px;*/ } .floaty.tiny.notification .body p { padding-left: calc( 1px * ( ( (var(--components_global_h) * var(--components_scale)) /4) + (var(--text_size) * var(--text_scale_tiny)) ) ); margin-top: calc(-2px * var(--fs_tiny)); } .floaty.small.notification .body p { padding-left: calc( 1px * ( ( (var(--components_global_h) * var(--components_scale)) /4) + (var(--text_size) * var(--text_scale_small)) ) ); } .floaty.notification .body p, .floaty.default.notification .body p { padding-left: calc( 1px * ( ( (var(--components_global_h) * var(--components_scale)) /4) + (var(--text_size) * var(--text_scale_default)) ) ); } .floaty.medium.notification .body p { padding-left: calc( 1px * ( ( (var(--components_global_h) * var(--components_scale)) /4) + (var(--text_size) * var(--text_scale_medium)) ) ); } .floaty.large.notification .body p { padding-left: calc( 1px * ( ( (var(--components_global_h) * var(--components_scale)) /4) + (var(--text_size) * var(--text_scale_large)) ) ); } .floaty.huge.notification .body p { padding-left: calc( 1px * ( ( (var(--components_global_h) * var(--components_scale)) /4) + (var(--text_size) * var(--text_scale_huge)) ) ); } /* Floaty . Footer */ .floaty .footer { display: block; text-align: center; /*min-height: calc(1px * ((var(--components_global_h) * var(--components_scale))/2) )!important;*/ } .floaty .footer button, .floaty .footer .button { margin-right: calc( 1px * (((var(--components_global_h) * var(--components_scale))/var(--components_spacing_h) ) / 2 ) ) !important; margin-left: calc( 1px * (((var(--components_global_h) * var(--components_scale))/var(--components_spacing_h) ) / 2 ) ) !important; } .floaty .footer button{ margin-bottom: calc(1px * (var(--components_global_h) * var(--components_scale)))!important; } /* Floaty . Temporization */ .floaty .temporization { padding-bottom: calc(1px * (var(--components_global_h) * var(--components_scale)))!important; text-align: center; } /* Floaty . Sizing */ /* Floaty . Extra small screens */ @media (min-width: 100px) { .floaty.tiny { width: 40%; } .floaty.small { } .floaty.default { } .floaty.medium { } .floaty.large { } .floaty.huge { width: 40%; } } /* Floaty . Small screens */ @media (min-width: 768px) { } /* Floaty . Medium screens */ @media (min-width: 990px) { } /* Floaty . Large screens */ @media (min-width: 1200px) { } /* Components . Windows */ .window{ position: absolute; background-color: #FFFFFF; border: 1px solid #CCC; box-shadow: 0px 0px 6px #CCCCCC; -moz-box-shadow: 0px 0px 6px #CCCCCC; -webkit-box-shadow: 0px 0px 6px #CCCCCC; } .window-header{ height: 16px; padding: 10px 10px 10px 10px; } .window-header .window-title{ float: left; margin: 0px; font-size: 15px; font-weight: bold; color: #134661; } .window-close-button{ float: right; height: 16px; width: 16px; background: transparent url(images/button-x.png) center top no-repeat; cursor: pointer; } .window-close-button:hover{ background-position: center -16px; } .window-content{ padding: 20px; } .window-footer{ padding: 16px; background: transparent url(images/window-footer-background.png) left top no-repeat; } .window-footer .button{ float: right; } /* Components . Tag Boxes */ .tagbox { position: relative; border: 1px dashed var(--color_grey_light); } .tagbox.readonly .tag-filter, .tagbox.readonly .button-drop{ display: none; } .tagbox input { border-color: transparent; } .tagbox ul.tagbox-list-suggested { display: none; position: absolute; max-height: 100px; width: 100%; margin: 0px 0px 6px 0px; padding: 0px 0px 0px 0px; border: 1px solid #999; border-top: none; overflow: auto; background-color: #ffffff; z-index: 99999999999999999; box-sizing: border-box; } .tagbox ul.tagbox-list-suggested li { display: block; list-style: none; padding: 3px 6px 3px 6px; line-height: calc(1px * (var(--components_global_h) * var(--components_scale)))!important; cursor: pointer; } .tagbox ul.tagbox-list-suggested li.disabled{ color: #CCCCCC; } .tagbox ul.tagbox-list-suggested li.disabled .button.add{ display: none; } .tagbox ul.tagbox-list-suggested li:hover{ background-color: #DDDDDD; } .tagbox ul.tagbox-list-suggested li.active{ color: #FFFFFF; background-color: #39F; } .tagbox ul.tagbox-list-suggested li .button.add{ float: right; } .tagbox ul.tagbox-list-selected { min-height: 16px; padding-top: 6px; padding-left: 6px; padding-right: 6px; overflow: auto; } .tagbox ul.tagbox-list-selected li { float: left; } .tagbox ul.tagbox-list-selected tag { margin-right: calc(var(--text_tag_font_size) * var(--text_tags_margin_scale_x)); } .tagbox.readonly ul.tagbox-list-selected { border-color: transparent; } /* Tag-box . Drop button */ .tagbox .button-drop{ margin-top: 0px; } .tagbox .button-drop ul.button-drop-list { margin-left: -1px; } /* Default size */ .tagbox .button-drop .button-drop-display, .tagbox .button-drop .button-drop-display:hover{ padding: 0px 10px 0px 10px; line-height: 25px; font-size: 12px; border-radius: 5px; } /* Extra small */ .tagbox.extra-small .button-drop .button-drop-display, .tagbox.extra-small .button-drop .button-drop-display:hover{ padding: 0px 6px 0px 6px; line-height: 12px; font-size: 8px; border-radius: 4px; } /* Small */ .tagbox.small .button-drop .button-drop-display, .tagbox.small .button-drop .button-drop-display:hover{ padding: 0px 6px 0px 6px; line-height: 16px; font-size: 10px; border-radius: 4px; } /* Medium */ .tagbox.medium .button-drop .button-drop-display, .tagbox.medium .button-drop .button-drop-display:hover{ padding: 0px 8px 0px 8px; line-height: 24px; font-size: 12px; border-radius: 5px; } /* Large */ .tagbox.large .button-drop .button-drop-display, .tagbox.large .button-drop .button-drop-display:hover{ padding: 0px 10px 0px 10px; line-height: 32px; font-size: 14px; border-radius: 6px; } /* Extra-large */ .tagbox.extra-large .button-drop .button-drop-display, .tagbox.extra-large .button-drop .button-drop-display:hover{ padding: 0px 12px 0px 12px; line-height: 40px; font-size: 16px; border-radius: 8px; } /* Components . Suggestables */ .suggestable_wrapper { --suggestable_line_height: calc((var(--font_size) * var(--text_scale)) + (var(--font_size) * 1.5)); --suggestable_border_width: 1; --suggestable_list_size: 5 ; overflow: visible; height: calc(1px * (var(--components_global_h) * var(--components_scale)))!important; } ul.suggestion-list { position: relative; max-height: calc(1px * ((var(--suggestable_line_height) * var(--suggestable_list_size)) + (var(--suggestable_border_width) * (var(--suggestable_list_size)) - 1))) !important; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; border-style: solid; border-color: var(--color_grey_light); border-width: calc(1px * var(--suggestable_border_width)); border-top: none; background-color: transparent; overflow-y: scroll; z-index: 999999999; } ul.suggestion-list li { width: 100%; padding: 0px 0px 0px 0px; margin: 0px !important; list-style: none; font-size: calc(1px * (var(--font_size) * var(--text_scale)) ); line-height: calc(1px * var(--suggestable_line_height)); text-indent: calc(1px * (var(--suggestable_line_height)*0.3)); text-align: left !important; border-bottom-style: solid !important; border-bottom-color: var(--color_grey_light) !important; border-bottom-width: calc(1px * var(--suggestable_border_width)) !important; cursor: pointer; background-color: var(--color_white); } ul.suggestion-list li:hover{ background-color: #E6F1F8; } ul.suggestion-list li.active{ color: #fff; background-color: #69F; } ul.suggestion-list li:last-child{ border-bottom: none; } /*.suggestable_wrapper ul.suggestion-list li, .suggestable_wrapper.default ul.suggestion-list li { line-height: calc(var(--fs_default)*2);} .suggestable_wrapper.tiny ul.suggestion-list li { font-size: var(--fs_tiny); } .suggestable_wrapper.small ul.suggestion-list li { font-size: var(--fs_small); } .suggestable_wrapper.medium ul.suggestion-list li { font-size: var(--fs_medium); } .suggestable_wrapper.large ul.suggestion-list li { font-size: var(--fs_large); } .suggestable_wrapper.huge ul.suggestion-list li { font-size: var(--fs_huge); } */ /* Components . Tags */ /* Components . Tags . Sizes */ tag, tag.default, tag.default::after { --text_tag_font_size: var(--fs_default); } tag.tiny, tag.tiny::after { --text_tag_font_size: var(--fs_tiny); } tag.small, tag.small::after { --text_tag_font_size: var(--fs_small); } tag.medium, tag.medium::after { --text_tag_font_size: var(--fs_medium); } tag.large, tag.large::after { --text_tag_font_size: var(--fs_large); } tag.huge, tag.huge::after { --text_tag_font_size: var(--fs_huge); } /* Components . Tags . Default */ tag { display: inline-block; height: auto; width: auto; padding-right: calc(var(--text_tag_font_size) * var(--text_tags_margin_scale_x)) !important; padding-left: calc(var(--text_tag_font_size) * var(--text_tags_margin_scale_x)) !important; font-size: var(--text_tag_font_size) !important; line-height: calc( var(--text_tag_font_size) * var(--text_tags_height_scale)) !important; color: var(--color_white); background-color: var(--color_primary); text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } /* Components . Tags . Types */ tag.inline { display: inline-block !important; } /* Components . Tags . Styles */ tag.rounded { --cenas: calc( var(--text_tag_font_size) * var(--text_tags_height_scale)); border-radius: calc((var(--cenas) / 3 )); } tag.pill { border-radius: 999px; } /* Components . Tags . States */ /* Components . Tags . States . Disabled */ tag.disabled{ opacity: 0.2; } /* Components . Tags . States . Collapsed */ tag.collapsed { padding: 0px!important; } tag.collapsed span { display: none; } tag.collapsed::after, tag.xs-collapsed::after, tag.sm-collapsed::after, tag.md-collapsed::after, tag.lg-collapsed::after { display: none; height: calc( var(--text_tag_font_size) * var(--text_tags_height_scale)) !important; width: calc( var(--text_tag_font_size) * var(--text_tags_height_scale)) !important; content: " "; color: transparent; } tag.collapsed::after { display: block; } /* Components . Tags . States . Collapsed . Extra small screens */ @media (min-width: 100px) { /* Screen size specific overides */ tag.xs-collapsed { padding: 0px!important; } tag.xs-collapsed span { display: none; } tag.xs-collapsed::after { display: block; } } /* Components . Tags . States . Collapsed . Small screens */ @media (min-width: 768px) { /* Screen size specific resets */ tag, tag.xs-collapsed { padding-right: calc(var(--text_tag_font_size) * var(--text_tags_margin_scale_x)) !important; padding-left: calc(var(--text_tag_font_size) * var(--text_tags_margin_scale_x)) !important; } tag span, tag.xs-collapsed span { display: inline; } tag::after, tag.xs-collapsed::after { display: none; } /* Screen size specific overides */ tag.sm-collapsed { padding: 0px!important; } tag.sm-collapsed span { display: none; } tag.sm-collapsed::after { display: block; } } /* Components . Tags . States . Collapsed . Medium screens */ @media (min-width: 990px) { /* Screen size specific resets */ tag, tag.xs-collapsed, tag.sm-collapsed { padding-right: calc(var(--text_tag_font_size) * var(--text_tags_margin_scale_x)) !important; padding-left: calc(var(--text_tag_font_size) * var(--text_tags_margin_scale_x)) !important; } tag span, tag.xs-collapsed span, tag.sm-collapsed span { display: inline; } tag::after, tag.xs-collapsed::after, tag.sm-collapsed::after { display: none; } /* Screen size specific overides */ tag.md-collapsed { padding: 0px!important; } tag.md-collapsed span { display: none; } tag.md-collapsed::after { display: block; } } /* Components . Tags . States . Collapsed . Large screens */ @media (min-width: 1200px) { /* Screen size specific resets */ tag, tag.xs-collapsed, tag.sm-collapsed, tag.md-collapsed { padding-right: calc(var(--text_tag_font_size) * var(--text_tags_margin_scale_x)) !important; padding-left: calc(var(--text_tag_font_size) * var(--text_tags_margin_scale_x)) !important; } tag span, tag.xs-collapsed span, tag.sm-collapsed span, tag.md-collapsed span { display: inline; } tag::after, tag.xs-collapsed::after, tag.sm-collapsed::after, tag.md-collapsed::after { display: none; } /* Screen size specific overides */ tag.lg-collapsed { padding: 0px!important; } tag.lg-collapsed span { display: none; } tag.lg-collapsed::after { display: block; } } /* Components . Tags . Colors */ /* Components . Tags . Colors . Base */ tag.primary { background-color: var(--color_primary); } tag.secondary { background-color: var(--color_secondary); } tag.text { background-color: var(--color_text); } tag.links { background-color: var(--color_links); } /* Components . Tags . Colors . Default */ tag.red { background-color: var(--color_red); } tag.green { background-color: var(--color_green); } tag.blue { background-color: var(--color_blue); } tag.orange { background-color: var(--color_orange); } tag.yellow { background-color: var(--color_yellow); } tag.grey, tag.gray { background-color: var(--color_grey); } tag.black { background-color: var(--color_black); } tag.white { background-color: var(--color_white); color: var(--color_text); } /* Components . Tags . Colors . Light */ tag.red_light { background-color: var(--color_red_light); } tag.green_light { background-color: var(--color_green_light); } tag.blue_light { background-color: var(--color_blue_light); } tag.orange_light { background-color: var(--color_orange_light); } tag.yellow_light { background-color: var(--color_yellow_light); } tag.grey_light, tag.gray_light { background-color: var(--color_grey_light); } tag.black_light { background-color: var(--color_black_light); } tag.white_light { background-color: var(--color_white_light); } /* Components . Tags . Colors . Medium */ tag.red_medium { background-color: var(--color_red_medium); } tag.green_medium { background-color: var(--color_green_medium); } tag.blue_medium { background-color: var(--color_blue_medium); } tag.orange_medium { background-color: var(--color_orange_medium); } tag.yellow_medium { background-color: var(--color_yellow_medium); } tag.grey_medium, tag.gray_medium { background-color: var(--color_grey_medium); } tag.black_medium { background-color: var(--color_black_medium); } tag.white_medium { background-color: var(--color_white_medium); } /* Components . Tags . Colors . Dark */ tag.red_dark { background-color: var(--color_red_dark); } tag.green_dark { background-color: var(--color_green_dark); } tag.blue_dark { background-color: var(--color_blue_dark); } tag.orange_dark { background-color: var(--color_orange_dark); } tag.yellow_dark { background-color: var(--color_yellow_dark); } tag.grey_dark, tag.gray_dark { background-color: var(--color_grey_dark); } tag.black_dark { background-color: var(--color_black_dark); } tag.white_dark { background-color: var(--color_white_dark); } tag a { color: inherit; } /* Components . Tags . Deletable */ tag.deletable { padding-right: 0px !important; } tag.deletable button.delete { padding-left: calc(var(--text_tag_font_size) * var(--text_tags_margin_scale_x)); padding-right: calc(var(--text_tag_font_size) * var(--text_tags_margin_scale_x)); --delete_button_scale: 0.6; --delete_button_height: calc((var(--components_global_h) * var(--components_scale)) * var(--action_button_scale)); --delete_button_width: var(--action_button_height); height: calc(1px * var(--delete_button_height)) ; height: calc(1px * var(--delete_button_width)) ; font-family: BasekitSymbols !important; opacity: 0.5; transition: 0.2s all ease-in-out; background-color: transparent !important; } tag.deletable button.delete:hover { opacity: 1; } /* Components . Nesties */ .nesty { --handle_height: calc(var(--components_global_h) * var(--components_scale)) ; --handle_width: calc(var(--handle_height)); --right_block_height: calc((var(--components_global_h) * var(--components_scale)) * 0.6); --components_components_spacing_h: calc((var(--components_global_h) * var(--components_scale))/var(--components_spacing_h)); overflow: auto; } .nesty .templates { display: none; } .nesty container { display: block; overflow: auto; border-width: 1px; border-style: solid; transition: 0.2s all; } .nesty container:not(:first-child) { margin-top: calc(1px * var(--components_components_spacing_h)); } .nesty container container { border-left-width: 3px; } .nesty .block { float: left; display: inline-block; } /* Components . Nesties . Header */ .nesty container .header { overflow: auto; padding: 0px !important; min-height: 36px; } /* Components . Nesties . Header . Input */ .nesty container .header input { --textfield_right_padding: calc((var(--right_block_height) * 2) + (( var(--components_components_spacing_h)*0.5)*4 )) ; padding-left: 10px; padding-right: calc( 1px * var(--textfield_right_padding) ); border-color: transparent !important; text-indent: 0px; background-color: transparent !important; } .nesty .sortable container .header input { padding-left: calc(1px * var(--handle_width)); } .nesty container .header input.invalid { border-color: var(--color_red) !important; background-image: none; } /* Components . Nesties . Header . Block . Left */ .nesty container .header .block.left { float: left; position: relative; margin-top: calc(-1px * var(--handle_height)); } .nesty container .header .block.left .handle { display: none; height: calc(1px * var(--handle_height))!important; width: calc(1px * var(--handle_width))!important; padding: 0px!important; color: var(--color_grey_medium); font-family: BasekitSymbols !important; font-size: calc(1px * ((var(--font_size) * var(--text_scale)) * 2) ) !important; text-align: center; line-height: calc(1px * (var(--components_global_h) * var(--components_scale)))!important; background-color: transparent; opacity: 1; cursor: move; cursor: grab; cursor: -moz-grab; cursor: -webkit-grab; } .nesty .sortable container .header .block.left .handle { display: block; } /* Components . Nesties . Header . Block . Right */ .nesty container .header .block.right { --right_block_diff: calc( (var(--handle_height) - var(--right_block_height)) / 2); float: right; position: relative; margin-top: calc(-1px * (var(--right_block_height) + var(--right_block_diff))); font-size: 0px; } .nesty container.headless .header .block.right { margin-top: 0px; } .nesty container .header .block.right button { height: calc(1px * (var(--components_global_h)/2) )!important; width: calc(1px * (var(--components_global_h)/2) )!important; font-size: 24px !important; border-color: transparent !important; opacity: 0.5; } .nesty container .header .block.right button:hover { opacity: 1; background-color: transparent !important; } .nesty container .header .block.right button.action.duplicate { color: var(--color_grey_medium) !important; } .nesty container .header .block.right button.action.remove { color: var(--color_red) !important; } /* Components . Nesties . Body */ .nesty container .body { padding: 0px; /*margin: calc(1px * var(--components_components_spacing_h));*/ margin-bottom: 0px; } /* Components . Nesties . Footer . Block . Left */ .nesty .footer { overflow: auto; } .nesty .footer .block.left, .nesty container .footer .block.left { margin-top: 0px; margin-right: 0px; /*margin-bottom: calc(1px * var(--components_components_spacing_h));*/ margin-bottom: 0px; margin-left: calc(1px * var(--components_components_spacing_h)); } .nesty > .footer > .block.left{ margin-left: 0px; } .nesty .footer .block.left button, .nesty container .footer .block.left button { height: auto !important; line-height: initial; padding: 0px; background: transparent; color: var(--color_links) !important; } /* Components . Nesties . Sortable placeholder */ .ui-sortable-placeholder { border: 1px dashed rgba(var(--color_links_r), var(--color_links_g), var(--color_links_b), 0.5) !important; background-color: rgba(var(--color_links_r), var(--color_links_g), var(--color_links_b), 0.1); min-height: calc(1px * ( var(--handle_height) * 3 )); } /* Components . Nesties . Colors */ /* Components . Nesties . Colors . Standard */ .nesty container { border-color: var(--color_grey_light); } .nesty container:hover { border-color: var(--color_grey_medium); } .nesty container container { border-color: var(--color_grey_light); } .nesty container container:hover { border-color: var(--color_grey_medium); } .nesty container container, .nesty.default container container { border-left-color: var(--color_grey_light); } .nesty.primary container container { border-left-color: var(--color_primary); } .nesty.secondary container container { border-left-color: var(--color_secondary); } .nesty.red container container { border-left-color: var(--color_red); } .nesty.green container container { border-left-color: var(--color_green); } .nesty.blue container container { border-left-color: var(--color_blue); } .nesty.orange container container { border-left-color: var(--color_orange); } .nesty.yellow container container { border-left-color: var(--color_yellow); } .nesty.grey container container { border-left-color: var(--color_grey); } .nesty.black container container { border-left-color: var(--color_black); } .nesty.white container container { border-color: var(--color_white_light); border-left-color: var(--color_white); } .nesty.white container:hover { border-color: var(--color_white) !important; } .nesty.white container container:hover { border-color: var(--color_white) !important; } .nesty.white input { color: var(--color_white); } /* Components . Nesties . Colors . Light */ .nesty.red_light container container { border-left-color: var(--color_red_light); } .nesty.green_light container container { border-left-color: var(--color_green_light); } .nesty.blue_light container container { border-left-color: var(--color_blue_light); } .nesty.orange_light container container { border-left-color: var(--color_orange_light); } .nesty.yellow_light container container { border-left-color: var(--color_yellow_light); } .nesty.grey_light container container { border-left-color: var(--color_grey_light); } .nesty.black_light container container { border-left-color: var(--color_black_light); } .nesty.white_light container container { border-left-color: var(--color_white_light); } /* Components . Nesties . Colors . Medium */ .nesty.red_medium container container { border-left-color: var(--color_red_medium); } .nesty.green_medium container container { border-left-color: var(--color_green_medium); } .nesty.blue_medium container container { border-left-color: var(--color_blue_medium); } .nesty.orange_medium container container { border-left-color: var(--color_orange_medium); } .nesty.yellow_medium container container { border-left-color: var(--color_yellow_medium); } .nesty.grey_medium container container { border-left-color: var(--color_grey_medium); } .nesty.black_medium container container { border-left-color: var(--color_black_medium); } .nesty.white_medium container container { border-left-color: var(--color_white_medium); } /* Components . Nesties . Colors . Dark */ .nesty.red_dark container container { border-left-color: var(--color_red_dark); } .nesty.green_dark container container { border-left-color: var(--color_green_dark); } .nesty.blue_dark container container { border-left-color: var(--color_blue_dark); } .nesty.orange_dark container container { border-left-color: var(--color_orange_dark); } .nesty.yellow_dark container container { border-left-color: var(--color_yellow_dark); } .nesty.grey_dark container container { border-left-color: var(--color_grey_dark); } .nesty.black_dark container container { border-left-color: var(--color_black_dark); } .nesty.white_dark container container { border-left-color: var(--color_white_dark); } /* Components . Timers */ .timer.active, .timer.active * { transition: 0.2s opacity ease-in-out, 1s stroke-dashoffset ease-in-out, 1s stroke-dasharray ease-in-out; user-select: none; opacity: 1; } .timer { /* Settings */ --height: calc( var(--components_global_h) * (var(--components_scale) * 1.2)); --stroke: 2; --radius: calc( var(--height) / 2 ); --normalized_radius: calc( var(--radius) - (var(--stroke)/2)); --circunference: calc( (2 * 3.14) * var(--normalized_radius) ); /* Definitions */ height: calc(1px * var(--height)); width: calc(1px * var(--height)); opacity: 0; transition: 0.2s opacity ease-in-out; } /* Components . Timers . Rings */ .timer .ring { r: var(--normalized_radius); cx: var(--radius); cy: var(--radius); fill: transparent; stroke-width: var(--stroke); stroke-linecap: round; } /* Components . Timers . Rings . Background */ .timer .ring.background { transform: rotate(-90deg); transform-origin: 50% 50%; stroke: var(--color_grey); stroke-width: 2; opacity: 0.8; stroke-dasharray: 0px calc(1px * (var(--circunference)/24)); } .timer.tiny .ring.background{ stroke-width: 1; } .timer.tiny .ring.background, .timer.small .ring.background { stroke-dasharray: 0px calc(1px * (var(--circunference)/12)); } .timer.light .ring.background { stroke: var(--color_white) !important; } /* Components . Timers . Rings . Background . Colors */ /* Components . Timers . Rings . Background . Main */ .timer .ring.background, .timer.default .ring.background { stroke: var(--color_primary) !important; } .timer.primary .ring.background { stroke: var(--color_primary) !important; } .timer.secondary .ring.background { stroke: var(--color_secondary) !important; } /* Components . Timers . Rings . Background . Standard */ .timer.red .ring.background { stroke: var(--color_red) !important; } .timer.green .ring.background { stroke: var(--color_green) !important; } .timer.blue .ring.background { stroke: var(--color_blue) !important; } .timer.orange .ring.background { stroke: var(--color_orange) !important; } .timer.yellow .ring.background { stroke: var(--color_yellow) !important; } .timer.grey .ring.background, .timer.gray .ring.background { stroke: var(--color_grey) !important; } .timer.black .ring.background { stroke: var(--color_black) !important; } .timer.white .ring.background { stroke: var(--color_white) !important; } /* Components . Timers . Rings . Background . Dark */ .timer.red_dark .ring.background { stroke: var(--color_red_dark) !important; } .timer.green_dark .ring.background { stroke: var(--color_green_dark) !important; } .timer.blue_dark .ring.background { stroke: var(--color_blue_dark) !important; } .timer.orange_dark .ring.background { stroke: var(--color_orange_dark) !important; } .timer.yellow_dark .ring.background { stroke: var(--color_yellow_dark) !important; } .timer.grey_dark .ring.background, .timer.gray_dark .ring.background { stroke: var(--color_grey_dark) !important; } .timer.black_dark .ring.background { stroke: var(--color_black_dark) !important; } .timer.white_dark .ring.background { stroke: var(--color_white_dark) !important; } /* Components . Timers . Rings . Background . Medium */ .timer.red_medium .ring.background { stroke: var(--color_red_medium) !important; } .timer.green_medium .ring.background { stroke: var(--color_green_medium) !important; } .timer.blue_medium .ring.background { stroke: var(--color_blue_medium) !important; } .timer.orange_medium .ring.background { stroke: var(--color_orange_medium) !important; } .timer.yellow_medium .ring.background { stroke: var(--color_yellow_medium) !important; } .timer.grey_medium .ring.background, .timer.gray_medium .ring.background { stroke: var(--color_grey_medium) !important; } .timer.black_medium .ring.background { stroke: var(--color_black_medium) !important; } .timer.white_medium .ring.background { stroke: var(--color_white_medium) !important; } /* Components . Timers . Rings . Background . Light */ .timer.red_light .ring.background { stroke: var(--color_red_light) !important; } .timer.green_light .ring.background { stroke: var(--color_green_light) !important; } .timer.blue_light .ring.background { stroke: var(--color_blue_light) !important; } .timer.orange_light .ring.background { stroke: var(--color_orange_light) !important; } .timer.yellow_light .ring.background { stroke: var(--color_yellow_light) !important; } .timer.grey_light .ring.background, .timer.gray_light .ring.background { stroke: var(--color_grey_light) !important; } .timer.black_light .ring.background { stroke: var(--color_black_light) !important; } .timer.white_light .ring.background { stroke: var(--color_white_light) !important; } /* Components . Timers . Rings . Foreground */ .timer .ring.foreground { transform: rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray: var(--circunference) var(--circunference); stroke-dashoffset: var(--circunference); /*stroke-dashoffset: calc(var(--circunference) / 2 );*/ } .timer.reverse .ring.foreground{ stroke-dashoffset: 0; } .timer.light .ring.foreground { stroke: var(--color_white) !important; } /* Components . Timers . Rings . Foreground . Colors */ /* Components . Timers . Rings . Foreground . Main */ .timer .ring.foreground, .timer.default .ring.foreground { stroke: var(--color_primary) !important; } .timer.primary .ring.foreground { stroke: var(--color_primary) !important; } .timer.secondary .ring.foreground { stroke: var(--color_secondary) !important; } /* Components . Timers . Rings . Foreground . Standard */ .timer.red .ring.foreground { stroke: var(--color_red) !important; } .timer.green .ring.foreground { stroke: var(--color_green) !important; } .timer.blue .ring.foreground { stroke: var(--color_blue) !important; } .timer.orange .ring.foreground { stroke: var(--color_orange) !important; } .timer.yellow .ring.foreground { stroke: var(--color_yellow) !important; } .timer.grey .ring.foreground, .timer.gray .ring.foreground { stroke: var(--color_grey) !important; } .timer.black .ring.foreground { stroke: var(--color_black) !important; } .timer.white .ring.foreground { stroke: var(--color_white) !important; } /* Components . Timers . Rings . Foreground . Main */ .timer.red_dark .ring.foreground { stroke: var(--color_red_dark) !important; } .timer.green_dark .ring.foreground { stroke: var(--color_green_dark) !important; } .timer.blue_dark .ring.foreground { stroke: var(--color_blue_dark) !important; } .timer.orange_dark .ring.foreground { stroke: var(--color_orange_dark) !important; } .timer.yellow_dark .ring.foreground { stroke: var(--color_yellow_dark) !important; } .timer.grey_dark .ring.foreground, .timer.gray_dark .ring.foreground { stroke: var(--color_grey_dark) !important; } .timer.black_dark .ring.foreground { stroke: var(--color_black_dark) !important; } .timer.white_dark .ring.foreground { stroke: var(--color_white_dark) !important; } /* Components . Timers . Rings . Foreground . Medium */ .timer.red_medium .ring.foreground { stroke: var(--color_red_medium) !important; } .timer.green_medium .ring.foreground { stroke: var(--color_green_medium) !important; } .timer.blue_medium .ring.foreground { stroke: var(--color_blue_medium) !important; } .timer.orange_medium .ring.foreground { stroke: var(--color_orange_medium) !important; } .timer.yellow_medium .ring.foreground { stroke: var(--color_yellow_medium) !important; } .timer.grey_medium .ring.foreground, .timer.gray_medium .ring.foreground { stroke: var(--color_grey_medium) !important; } .timer.black_medium .ring.foreground { stroke: var(--color_black_medium) !important; } .timer.white_medium .ring.foreground { stroke: var(--color_white_medium) !important; } /* Components . Timers . Rings . Foreground . Light */ .timer.red_light .ring.foreground { stroke: var(--color_red_light) !important; } .timer.green_light .ring.foreground { stroke: var(--color_green_light) !important; } .timer.blue_light .ring.foreground { stroke: var(--color_blue_light) !important; } .timer.orange_light .ring.foreground { stroke: var(--color_orange_light) !important; } .timer.yellow_light .ring.foreground { stroke: var(--color_yellow_light) !important; } .timer.grey_light .ring.foreground, .timer.gray_light .ring.foreground { stroke: var(--color_grey_light) !important; } .timer.black_light .ring.foreground { stroke: var(--color_black_light) !important; } .timer.white_light .ring.foreground { stroke: var(--color_white_light) !important; } /* Components . Timers . Text */ .timer .text { transform: translate(50%, 52%); fill: var(--color_text); font-size: calc(1px * (var(--font_size) * var(--text_scale)) )!important; dominant-baseline: middle; text-anchor: middle; } .timer.light .text { fill: var(--color_white) !important; } /* Components . Timers . Text . Colors */ /* Components . Timers . Text . Colors . Main */ .timer .text, .timer.tc_default .text { fill: var(--color_text) !important; } .timer.tc_primary .text { fill: var(--color_primary) !important; } .timer.tc_secondary .text { fill: var(--color_secondary) !important; } /* Components . Timers . Text . Colors . Standard */ .timer.tc_red .text { fill: var(--color_red) !important; } .timer.tc_green .text { fill: var(--color_green) !important; } .timer.tc_blue .text { fill: var(--color_blue) !important; } .timer.tc_orange .text { fill: var(--color_orange) !important; } .timer.tc_yellow .text { fill: var(--color_yellow) !important; } .timer.tc_grey .text { fill: var(--color_grey) !important; } .timer.tc_black .text { fill: var(--color_black) !important; } .timer.tc_white .text { fill: var(--color_white) !important; } /* Components . Timers . Text . Colors . Dark */ .timer.tc_red_dark .text { fill: var(--color_red_dark) !important; } .timer.tc_green_dark .text { fill: var(--color_green_dark) !important; } .timer.tc_blue_dark .text { fill: var(--color_blue_dark) !important; } .timer.tc_orange_dark .text { fill: var(--color_orange_dark) !important; } .timer.tc_yellow_dark .text { fill: var(--color_yellow_dark) !important; } .timer.tc_grey_dark .text { fill: var(--color_grey_dark) !important; } .timer.tc_black_dark .text { fill: var(--color_black_dark) !important; } .timer.tc_white_dark .text { fill: var(--color_white_dark) !important; } /* Components . Timers . Text . Colors . Medium */ .timer.tc_red_medium .text { fill: var(--color_red_medium) !important; } .timer.tc_green_medium .text { fill: var(--color_green_medium) !important; } .timer.tc_blue_medium .text { fill: var(--color_blue_medium) !important; } .timer.tc_orange_medium .text { fill: var(--color_orange_medium) !important; } .timer.tc_yellow_medium .text { fill: var(--color_yellow_medium) !important; } .timer.tc_grey_medium .text { fill: var(--color_grey_medium) !important; } .timer.tc_black_medium .text { fill: var(--color_black_medium) !important; } .timer.tc_white_medium .text { fill: var(--color_white_medium) !important; } /* Components . Timers . Text . Colors . Light */ .timer.tc_red_light .text { fill: var(--color_red_light) !important; } .timer.tc_green_light .text { fill: var(--color_green_light) !important; } .timer.tc_blue_light .text { fill: var(--color_blue_light) !important; } .timer.tc_orange_light .text { fill: var(--color_orange_light) !important; } .timer.tc_yellow_light .text { fill: var(--color_yellow_light) !important; } .timer.tc_grey_light .text { fill: var(--color_grey_light) !important; } .timer.tc_black_light .text { fill: var(--color_black_light) !important; } .timer.tc_white_light .text { fill: var(--color_white_light) !important; } /* Components . Collapsers */ /* .wrapper { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s ease-out; } .wrapper.is-open { grid-template-rows: 1fr; } .inner { overflow: hidden; } */ /* Collapser . Open */ .collapser { width: 100%; box-sizing: border-box; } /* Components . Collapsers . Title */ .collapser .title { padding-top: calc(1px * ((var(--components_global_h) * var(--components_scale)) / 4) ); border-bottom: 1px solid var(--color_grey_light); overflow: auto; cursor: pointer; transition: all 200ms cubic-bezier(0.825, 0.000, 0.150, 1.000); overflow: hidden; } .collapser .title * { user-select: none; } /* Components . Collapsers . Title . Icon */ .collapser .title icon { float: left; width: 36px; margin-top: calc(-1px * (((var(--components_global_h) * var(--components_scale)) / 5) + 1) ); padding-right: calc(1px * ((var(--components_global_h) * var(--components_scale)) / 10) ); font-size: var(--fs_medium); line-height: calc(1px * (var(--components_global_h) * var(--components_scale))); text-align: center; color: var(--color_primary); transition: all 500ms cubic-bezier(0.825, 0.000, 0.150, 1.000); } /* Components . Collapsers . Title . String */ .collapser .title string { font-size: var(--fs_small); text-transform: uppercase; color: var(--color_primary); } /* Components . Collapsers . Title . Handle */ .collapser .title handle { display: block; float: right; margin-top: calc(-1px * ((var(--components_global_h) * var(--components_scale)) / 5) ); padding-left: calc(1px * ((var(--components_global_h) * var(--components_scale)) / 3) ); padding-right: calc(1px * ((var(--components_global_h) * var(--components_scale)) / 3) ); font-family: BasekitSymbols; font-size: var(--fs_default); line-height: calc(1px * (var(--components_global_h) * var(--components_scale))); transform: rotate(0deg); transition: all 500ms cubic-bezier(0.825, 0.000, 0.150, 1.000); transition-delay: 150ms; } /* Components . Collapsers . Title . Hover */ .collapser .title:hover { border-bottom-color: rgba(var(--color_primary_r),var(--color_primary_g),var(--color_primary_b),0.3); background-color: rgba(var(--color_primary_r),var(--color_primary_g),var(--color_primary_b),0.05); } .collapser .title:hover *, .collapser .title:hover handle { } /* Components . Collapsers . Content */ .collapser .content { transition: all 500ms cubic-bezier(0.825, 0.000, 0.150, 1.000); overflow: hidden; } /* Collapser . Closed */ .collapser.closed .title handle { transform: rotate(180deg); } /* Components . Collapsers . Closed . Title */ .collapser.closed .title { border-bottom-color: transparent; } /* Components . Collapsers . Closed . Content */ .collapser.closed .content { /*height: 0px !important;*/ } /* Components . Accordions */ /* .wrapper { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s ease-out; } .wrapper.is-open { grid-template-rows: 1fr; } .inner { overflow: hidden; } */ .accordion { } /* Components . Accordions . Row */ .accordion li { padding-bottom: 10px; /*border-bottom: 1px solid var(--color_grey_light);*/ } .accordion li.closed { padding-bottom: 0px; } /* Components . Accordions . Row . Title */ .accordion .title { padding: 6px; cursor: pointer; transition: 0.2s background-color ease-in-out ; } .accordion .title:hover { background-color: var(--color_grey_ultra_light); } .accordion .title label { font-size: var(--fs_small); color: var(--color_grey_medium); opacity: 0.7; user-select: none !important; cursor: pointer; } .accordion .title label:hover { opacity: 1; } /* Components . Accordions . Row . Title . Label . Default + Open */ .accordion li .title label.show, .accordion li.open .title label.show, .accordion li.closed .title label.hide { display: none; } .accordion li .title label.hide, .accordion li.open .title label.hide, .accordion li.closed .title label.show { display: inline; } /* Components . Accordions . Row . Content */ .accordion .content { overflow: hidden; } .accordion li.closed .content { height: 0px; } .accordion column { padding: 0px; } /* Components . Wizards */ wizard { display: block; } /* Wizards . Progress */ /* Wizards . Progress . Markers */ .wizard_progress ul.markers { font-family: basekitSymbols; font-size: var(--fs_medium); color: var(--color_black_light); } .wizard_progress ul.markers li { display: inline; transition: color 0.2s ease-in-out; cursor: default; } .wizard_progress.light ul.markers{ color: var(--color_white_light); } .wizard_progress ul.markers li.active { color: var(--color_primary); } .wizard_progress.light ul.markers li.active { color: var(--color_white); } /* Wizards . View */ wizard .view { overflow: hidden !important; transition: height; } /* Wizards . Canvas */ wizard .canvas { overflow: hidden !important; transition: margin; } /* Wizards . Steps */ wizard step { display: block; float: left; width: 100%; opacity: 0; transition: opacity; } wizard step.active { opacity: 1; } /* Wizards . Transitions */ wizard .view, wizard .canvas, wizard step { transition-duration: 1s; transition-timing-function: cubic-bezier(.29,.94,.11,1.01); } /* Components . Poppies */ .popper { font-family: BasekitSymbols; } .popper_content { display: none; } /* Components . Eddies */ /* Eddies . Wrapper */ .eddy { border-width: 1px; border-style: solid; border-color: transparent; white-space: nowrap; transition: all 500ms; } .eddy.editing:hover { background-color: #ffffff; background-image: none; } .eddy.editing .mandatory { background-image: none; } .eddy.saving { animation-name: eddies_pulse_saving; animation-duration: 200ms; animation-iteration-count: infinite; } .eddy.save_ok { border-color: var(--color_green); animation-name: eddies_pulse_saved; animation-duration: 1000ms; animation-iteration-count: 1; } .eddy.save_fail { border-color: red; animation-name: eddies_pulse_invalid; animation-duration: 1000ms; animation-iteration-count: 1; } /* Eddies . Components */ .eddy { transition: 0.2s all ease-in-out; background-position: center right; background-size: 30px 30px; background-repeat: no-repeat; line-height: 0px; } .eddy:hover { background-color: #fffdf7; background-image: url(../media/icon.field.editable.png); } .eddy[data-component-type="textfield"] { background-position: center right; } .eddy[data-component-type="select"] { padding-right: 30px; } .eddy[data-component-type="field"] { background-position: center right; } .eddy[data-component-type="checkbox"] { display: inline-block; background-position: center right; padding-right: 30px; overflow: auto; } .eddy[data-component-type="radiobutton"] { display: inline-block; background-position: center right; padding-right: 30px; overflow: auto; } .eddy[data-component-type="textarea"] { background-position: top right; } .eddy[data-component-type="multilanguage"] { background-position: bottom right; } .eddy[data-component-type="multiliner"] { background-position: bottom right; } .eddy[data-component-type="nesty"] { background-position: bottom right; } .eddy[data-component-type="tagbox"] { background-position: top right; } .eddy[data-component-type="dropper"] { } .eddy[data-component-type="rater"] { background-position: bottom right; } .eddy[data-component-type="switch"] { display: inline-block; background-position: center right; padding-right: 30px; overflow: auto; border-radius: 20px; } /* Eddies . Controls */ .eddy .eddy_controls { padding: 6px 0px 6px 6px; overflow: hidden; transition: all 1000ms ease-in-out; } .eddy.saving .eddy_controls button, .eddy.save_ok .eddy_controls button { display: none; } .eddy .eddy_controls .icon:after { --eddy_icon_scale: 0.6; --eddy_icon_height: calc((var(--components_global_h) * var(--components_scale)) * var(--eddy_icon_scale)); --eddy_icon_width: var(--eddy_icon_height); --eddy_icon_margin: calc(var(--components_components_spacing_h)*0.5); display: none; height: calc(1px * var(--eddy_icon_height)); width: calc(1px * var(--eddy_icon_width)); margin-right: 10px; font-family: 'BasekitSymbols'; font-size: 22px; line-height: calc(1px * var(--eddy_icon_height)); text-align: center; transition: all 500ms; } .eddy.saving .eddy_controls .icon:after { display: inline-block; content: '?'; color: var(--color_grey_medium); animation-name: eddies_icon_pulse; animation-duration: 200ms; animation-iteration-count: infinite; } .eddy.save_ok .eddy_controls .icon:after { display: inline-block; content: 'Ň'; color: var(--color_green); } /* Eddies . Positions */ /* Eddies . Positions . Top */ .eddy_controls.top_left, .eddy_controls.top_center, .eddy_controls.top_right { margin-bottom: 10px; border-bottom: 1px dashed var(--color_grey_light); } /* Eddies . Positions . Top . Left */ .eddy_controls.top_left { text-align: left; } /* Eddies . Positions . Top . Center */ .eddy_controls.top_center { text-align: center; } /* Eddies . Positions . Top . Right */ .eddy_controls.top_right { text-align: right; } /* Eddies . Positions . Left */ .eddy_controls.left { text-align: left !important; } /* Eddies . Positions . Right */ .eddy_controls.right { float: right; text-align: right !important; } /* Eddies . Positions . Bottom . Left */ .eddy_controls.bottom_left, .eddy_controls.bottom_center, .eddy_controls.bottom_right { margin-top: 10px; border-top: 1px dashed var(--color_grey_light); } /* Eddies . Positions . Bottom . Left */ .eddy_controls.bottom_left { text-align: left; } /* Eddies . Positions . Bottom . Center */ .eddy_controls.bottom_center { text-align: center; } /* Eddies . Positions . Bottom . Right */ .eddy_controls.bottom_right { text-align: right; } /* Eddies . Animations */ @keyframes eddies_icon_pulse { 0%{ opacity: 0.3;} 50%{ opacity: 1;} 100%{ opacity: 0.3;} } @keyframes eddies_pulse_saving { 0%{ border-color: rgba(var(--color_grey_medium_r), var(--color_grey_medium_g), var(--color_grey_medium_b), 0.7);} 50%{ border-color: rgba(var(--color_grey_medium_r), var(--color_grey_medium_g), var(--color_grey_medium_b), 1);} 100%{ border-color: rgba(var(--color_grey_medium_r), var(--color_grey_medium_g), var(--color_grey_medium_b), 0.7);} } @keyframes eddies_pulse_invalid { 0% { -moz-box-shadow: 0 0 0 0 rgba(212,83,83, 0.4); box-shadow: 0 0 0 0 rgba(212,83,83, 0.4);} 100% { -moz-box-shadow: 0 0 0 10px rgba(212,83,83, 0); box-shadow: 0 0 0 10px rgba(212,83,83, 0);} } @keyframes eddies_pulse_saved { 0% { -moz-box-shadow: 0 0 0 0 rgba(57,184,118, 0.4); box-shadow: 0 0 0 0 rgba(57,184,118, 0.4);} 100% { -moz-box-shadow: 0 0 0 10px rgba(57,184,118, 0); box-shadow: 0 0 0 10px rgba(57,184,118, 0);} } /* Components . Icons */ i.icon { } i.icon.red { } /* Components . Forms */ /* Components . Navigators */ navigator, navigator panel { display: block; } navigator { display: flex; justify-content: left; overflow-y: hidden; overflow-x: scroll; } navigator * { user-select: none; } /* Navigator . Panels */ navigator panel { min-width: 300px; max-width: 300px; border-right: 1px solid var(--color_grey_light); flex: none; transition: 0.2s all ease-in-out; opacity: 1; } navigator panel.closed { opacity: 0; width: 0px !important; min-width: 0px !important; } navigator panel block { padding: 6px; } navigator.debugg panel block { border: 1px solid red; } navigator panel block container { line-height: 0px; } navigator panel block container * { line-height: initial; } /* Navigators . Panels . Headers & Footers */ navigator panel header, navigator panel footer { display: flex; background-image: linear-gradient(to right, #24556e 10%, rgba(255, 255, 255, 0) 0%); background-size: 6px 1px; background-repeat: repeat-x; } navigator panel header block.center, navigator panel footer block.center { flex-grow: 4; } navigator panel header block > container, navigator panel footer block > container { display: block; width: 100%; margin: 0; text-align: center; position: relative; top: 50%; transform: translateY(-50%); flex: none; } navigator panel header block > container .button.action, navigator panel footer block > container .button.action { height: calc(1px * (var(--components_global_h) * var(--components_scale))) !important; width: calc(1px * (var(--components_global_h) * var(--components_scale))) !important; margin: 0px; font-size: calc(1px * ((var(--font_size) * var(--text_scale)) + 6) ) !important; line-height: calc(1px * (var(--components_global_h) * var(--components_scale))) !important; color: var(--color_text) !important; background-color: transparent !important; } navigator panel header block > container .button.action:hover, navigator panel footer block > container .button.action:hover { background-color: var(--color_grey_light) !important; filter: none !important; } /* Navigators . Panels . Headers */ navigator panel header { background-position: bottom; } navigator panel header block.center p.title{ font-weight: var(--fw_medium); color: var(--color_text); } navigator panel header block.center p.description { font-weight: var(--fw_regular); color: var(--color_grey_medium); } /* Navigators . Panels . Footers */ navigator panel footer { padding: 0px; background-position: top; } navigator panel footer block fieldgroup.checkbox { margin: 0px 9px !important; } navigator panel footer block fieldgroup.checkbox * { cursor: pointer; } navigator panel footer block fieldgroup.disabled * { cursor: default; color: var(--color_grey_light); } navigator panel footer block.center p.title{ font-weight: var(--fw_medium); color: var(--color_text); } navigator panel footer block.center p.description { font-weight: var(--fw_regular); color: var(--color_grey_medium); } /* Navigators . Panels . Lists */ /* Navigators . Content */ navigator panel > content { display: block; height: 400px; overflow-y: auto; overflow-x: hidden; } /* Navigators . Content . Lists . Items */ navigator panel > content > ul > li { display: flex; padding-top: 8px; padding-bottom: 8px; transition: 0.2s all ease-in-out; } navigator.debugg panel > content > ul > li { border: 1px solid blue; } navigator panel > content > ul > li.active { background-color: #f5f5f6; } navigator panel > content > ul > li:hover { background-color: var(--color_grey_light); } navigator panel > content > ul > li * { cursor: pointer; } /* Navigators . Lists . Items . Blocks */ navigator.debugg panel > content > ul > li block { border: 1px solid green; } navigator panel > content > ul > li block.left{ min-width: calc(1px * (var(--components_global_h) * var(--components_scale))) !important; text-align: center; padding-right: 0px; } navigator panel > content > ul > li block.left icon { font-family: BasekitSymbols; } navigator panel > content > ul > li block.center{ flex-grow: 4; } /* Navigators . Lists . Items . Blocks . Containers */ navigator panel > content > ul > li block container { width: 100%; margin: 0; position: relative; top: 50%; transform: translateY(-50%); line-height: 0px; } navigator panel > content > ul > li block.center container { display: flex; align-items: center; } navigator panel > content > ul > li block.center container .thumbnail img, navigator panel > content > ul > li block.center container .thumbnail icon { display: block; height: 36px; width: 36px; border-radius: 50%; line-height: 36px !important; text-align: center; font-family: BasekitSymbols; font-size: var(--fs_medium); /*margin: 0; position: relative; top: 50%; transform: translateY(-50%); line-height: 0px;*/ margin-right: 10px; } navigator panel > content > ul > li block.center container p.title { font-weight: var(--fw_regular); line-height: normal !important; } navigator panel > content > ul > li block.center container p.description { font-weight: var(--fw_regular); color: var(--color_grey_medium); line-height: normal !important; } navigator panel > content > ul > li.partial block container input[type="checkbox"] { background-color: red !important; border: 1px solid red; } /* Navigators . Content . Preview */ navigator panel > content > block { display: block; } navigator panel > content > block.preview { padding: 20px; } navigator panel > content > block.preview .pictures { text-align: center; } navigator panel > content > block.preview .pictures img { width: 100%; margin-bottom: 20px; } navigator panel > content > block.preview .title { font-size: var(--fs_default); line-height: normal !important; word-wrap: normal !important; } navigator panel > content > block.preview .description { margin-bottom: 20px; color: var(--color_grey_medium); line-height: normal !important; word-wrap: normal !important; } navigator panel > content > block.preview row * { color: var(--color_grey_medium); } navigator panel > content > block.preview .metadata { margin-bottom: 20px; } navigator panel > content > block.preview .metadata .title { margin-bottom: 6px; text-transform: uppercase; font-size: var(--fs_small); color: var(--color_grey_medium); } navigator panel > content > block.preview .metadata .value, navigator panel > content > block.preview .metadata .value a { color: var(--color_grey_medium); } navigator panel > content > block.preview .metadata .value .symbol { font-family: BasekitSymbols; margin-right: 6px; color: var(--color_grey_medium); } /* Scope . Extra small screens */ @media (min-width: 100px) { navigator panel { width: var(--width_100); } .button.expand { display: none; } } /* Scope . Small screens */ @media (min-width: 768px) { navigator panel { width: var(--width_third); } .button.expand { display: block; } } /* Scope . Medium screens */ @media (min-width: 990px) { navigator panel { width: var(--width_third); } } /* Scope . Large screens */ @media (min-width: 1200px) { navigator panel { min-width: 300px; } } navigator panel header block container { border: 1px solid transparent; box-sizing: border-box; } navigator panel header block input{ display: none; } navigator panel.filtering header block input{ display: block; border: none; } navigator panel.filtering header block.left { display: none; } navigator panel.filtering header block.center { display: none; } navigator panel.filtering header block.right { flex-grow: 4; } navigator panel.filtering header block.right container { border-color: var(--color_grey_light); display: flex; } navigator panel.filtering header block.right container .button { flex: none; flex-grow: 0; height: 24px !important; width: 24px !important; line-height: 24px !important; margin-top: 4px; margin-right: 6px; font-size: var(--fs_default) !important; } navigator panel header block.right container .button icon.close, navigator panel.filtering header block.right container .button icon.filter { display: none; } navigator panel.filtering header block.right container .button icon.close, navigator panel header block.right container .button icon.filter { display: inline; } /* Components . Progress bars */ .progress-bar { /* Components . Progress bars . Globals */ --progress_bar_height: calc((var(--components_global_h) * var(--components_scale))); } .progress-bar, .progress-bar .progress-bar-fill { transition: all; transition-duration: 0.5s; transition-timing-function: cubic-bezier(.29,.94,.11,1.01); } /* Components . Progress bars . Colors */ /* Colors . Default */ .progress-bar { background-color: var(--color_grey_light); } .progress-bar .progress-bar-fill { background-color: var(--color_grey_medium); } /* Colors . Primary */ .progress-bar.primary .progress-bar-fill { background-color: var(--color_primary); } .progress-bar.primary { background-color: rgba(var(--color_primary_r), var(--color_primary_g), var(--color_primary_b), 0.5); } /* Colors . Secondary */ .progress-bar.secondary .progress-bar-fill { background-color: var(--color_secondary); } .progress-bar.secondary { background-color: rgba(var(--color_secondary_r), var(--color_secondary_g), var(--color_secondary_b), 0.5); } /* Colors . Red */ .progress-bar.red { background-color: rgba(var(--color_red_r), var(--color_red_g), var(--color_red_b), 0.5); } .progress-bar.red .progress-bar-fill { background-color: var(--color_red); } .progress-bar.red_ultra_light { background-color: rgba(var(--color_red_ultra_light_r), var(--color_red_ultra_light_g), var(--color_red_ultra_light_b), 0.5); } .progress-bar.red_ultra_light .progress-bar-fill { background-color: var(--color_red_ultra_light); } .progress-bar.red_light { background-color: rgba(var(--color_red_light_r), var(--color_red_light_g), var(--color_red_light_b), 0.5); } .progress-bar.red_light .progress-bar-fill { background-color: var(--color_red_light); } .progress-bar.red_medium { background-color: rgba(var(--color_red_medium_r), var(--color_red_medium_g), var(--color_red_medium_b), 0.5); } .progress-bar.red_medium .progress-bar-fill { background-color: var(--color_red_medium); } .progress-bar.red_dark { background-color: rgba(var(--color_red_dark_r), var(--color_red_dark_g), var(--color_red_dark_b), 0.5); } .progress-bar.red_dark .progress-bar-fill { background-color: var(--color_red_dark); } /* Colors . Green */ .progress-bar.green { background-color: rgba(var(--color_green_r), var(--color_green_g), var(--color_green_b), 0.5); } .progress-bar.green .progress-bar-fill { background-color: var(--color_green); } .progress-bar.green_ultra_light { background-color: rgba(var(--color_green_ultra_light_r), var(--color_green_ultra_light_g), var(--color_green_ultra_light_b), 0.5); } .progress-bar.green_ultra_light .progress-bar-fill { background-color: var(--color_green_ultra_light); } .progress-bar.green_light { background-color: rgba(var(--color_green_light_r), var(--color_green_light_g), var(--color_green_light_b), 0.5); } .progress-bar.green_light .progress-bar-fill { background-color: var(--color_green_light); } .progress-bar.green_medium { background-color: rgba(var(--color_green_medium_r), var(--color_green_medium_g), var(--color_green_medium_b), 0.5); } .progress-bar.green_medium .progress-bar-fill { background-color: var(--color_green_medium); } .progress-bar.green_dark { background-color: rgba(var(--color_green_dark_r), var(--color_green_dark_g), var(--color_green_dark_b), 0.5); } .progress-bar.green_dark .progress-bar-fill { background-color: var(--color_green_dark); } /* Colors . Blue */ .progress-bar.blue { background-color: rgba(var(--color_blue_r), var(--color_blue_g), var(--color_blue_b), 0.5); } .progress-bar.blue .progress-bar-fill { background-color: var(--color_blue); } .progress-bar.blue_ultra_light { background-color: rgba(var(--color_blue_ultra_light_r), var(--color_blue_ultra_light_g), var(--color_blue_ultra_light_b), 0.5); } .progress-bar.blue_ultra_light .progress-bar-fill { background-color: var(--color_blue_ultra_light); } .progress-bar.blue_light { background-color: rgba(var(--color_blue_light_r), var(--color_blue_light_g), var(--color_blue_light_b), 0.5); } .progress-bar.blue_light .progress-bar-fill { background-color: var(--color_blue_light); } .progress-bar.blue_medium { background-color: rgba(var(--color_blue_medium_r), var(--color_blue_medium_g), var(--color_blue_medium_b), 0.5); } .progress-bar.blue_medium .progress-bar-fill { background-color: var(--color_blue_medium); } .progress-bar.blue_dark { background-color: rgba(var(--color_blue_dark_r), var(--color_blue_dark_g), var(--color_blue_dark_b), 0.5); } .progress-bar.blue_dark .progress-bar-fill { background-color: var(--color_blue_dark); } /* Colors . Orange */ .progress-bar.orange { background-color: rgba(var(--color_orange_r), var(--color_orange_g), var(--color_orange_b), 0.5); } .progress-bar.orange .progress-bar-fill { background-color: var(--color_orange); } .progress-bar.orange_ultra_light { background-color: rgba(var(--color_orange_ultra_light_r), var(--color_orange_ultra_light_g), var(--color_orange_ultra_light_b), 0.5); } .progress-bar.orange_ultra_light .progress-bar-fill { background-color: var(--color_orange_ultra_light); } .progress-bar.orange_light { background-color: rgba(var(--color_orange_light_r), var(--color_orange_light_g), var(--color_orange_light_b), 0.5); } .progress-bar.orange_light .progress-bar-fill { background-color: var(--color_orange_light); } .progress-bar.orange_medium { background-color: rgba(var(--color_orange_medium_r), var(--color_orange_medium_g), var(--color_orange_medium_b), 0.5); } .progress-bar.orange_medium .progress-bar-fill { background-color: var(--color_orange_medium); } .progress-bar.orange_dark { background-color: rgba(var(--color_orange_dark_r), var(--color_orange_dark_g), var(--color_orange_dark_b), 0.5); } .progress-bar.orange_dark .progress-bar-fill { background-color: var(--color_orange_dark); } /* Colors . Yellow */ .progress-bar.yellow { background-color: rgba(var(--color_yellow_r), var(--color_yellow_g), var(--color_yellow_b), 0.5); } .progress-bar.yellow .progress-bar-fill { background-color: var(--color_yellow); } .progress-bar.yellow_ultra_light { background-color: rgba(var(--color_yellow_ultra_light_r), var(--color_yellow_ultra_light_g), var(--color_yellow_ultra_light_b), 0.5); } .progress-bar.yellow_ultra_light .progress-bar-fill { background-color: var(--color_yellow_ultra_light); } .progress-bar.yellow_light { background-color: rgba(var(--color_yellow_light_r), var(--color_yellow_light_g), var(--color_yellow_light_b), 0.5); } .progress-bar.yellow_light .progress-bar-fill { background-color: var(--color_yellow_light); } .progress-bar.yellow_medium { background-color: rgba(var(--color_yellow_medium_r), var(--color_yellow_medium_g), var(--color_yellow_medium_b), 0.5); } .progress-bar.yellow_medium .progress-bar-fill { background-color: var(--color_yellow_medium); } .progress-bar.yellow_dark { background-color: rgba(var(--color_yellow_dark_r), var(--color_yellow_dark_g), var(--color_yellow_dark_b), 0.5); } .progress-bar.yellow_dark .progress-bar-fill { background-color: var(--color_yellow_dark); } /* Colors . Grey */ .progress-bar.grey { background-color: rgba(var(--color_grey_r), var(--color_grey_g), var(--color_grey_b), 0.5); } .progress-bar.grey .progress-bar-fill { background-color: var(--color_grey); } .progress-bar.grey_ultra_light { background-color: rgba(var(--color_grey_ultra_light_r), var(--color_grey_ultra_light_g), var(--color_grey_ultra_light_b), 0.5); } .progress-bar.grey_ultra_light .progress-bar-fill { background-color: var(--color_grey_ultra_light); } .progress-bar.grey_light { background-color: rgba(var(--color_grey_light_r), var(--color_grey_light_g), var(--color_grey_light_b), 0.5); } .progress-bar.grey_light .progress-bar-fill { background-color: var(--color_grey_light); } .progress-bar.grey_medium { background-color: rgba(var(--color_grey_medium_r), var(--color_grey_medium_g), var(--color_grey_medium_b), 0.5); } .progress-bar.grey_medium .progress-bar-fill { background-color: var(--color_grey_medium); } .progress-bar.grey_dark { background-color: rgba(var(--color_grey_dark_r), var(--color_grey_dark_g), var(--color_grey_dark_b), 0.5); } .progress-bar.grey_dark .progress-bar-fill { background-color: var(--color_grey_dark); } /* Colors . Black */ .progress-bar.black { background-color: rgba(0, 0, 0, 0.5); } .progress-bar.black .progress-bar-fill { background-color: var(--color_black); } .progress-bar.black_ultra_light { background-color: rgba(0, 0, 0, 0.125); } .progress-bar.black_ultra_light .progress-bar-fill { background-color: var(--color_black_ultra_light); } .progress-bar.black_light { background-color: rgba(0, 0, 0, 0.25); } .progress-bar.black_light .progress-bar-fill { background-color: var(--color_black_light); } .progress-bar.black_medium { background-color: rgba(0, 0, 0, 0.5); } .progress-bar.black_medium .progress-bar-fill { background-color: var(--color_black_medium); } .progress-bar.black_dark { background-color: rgba(0, 0, 0, 0.75); } .progress-bar.black_dark .progress-bar-fill { background-color: var(--color_black_dark); } /* Colors . White */ .progress-bar.white { background-color: rgba(255, 255, 255, 0.5); } .progress-bar.white .progress-bar-fill { background-color: var(--color_white); } .progress-bar.white_ultra_light { background-color: rgba(255, 255, 255, 0.125); } .progress-bar.white_ultra_light .progress-bar-fill { background-color: var(--color_white_ultra_light); } .progress-bar.white_light { background-color: rgba(255, 255, 255, 0.25); } .progress-bar.white_light .progress-bar-fill { background-color: var(--color_white_light); } .progress-bar.white_medium { background-color: rgba(255, 255, 255, 0.5); } .progress-bar.white_medium .progress-bar-fill { background-color: var(--color_white_medium); } .progress-bar.white_dark { background-color: rgba(255, 255, 255, 0.75); } .progress-bar.white_dark .progress-bar-fill { background-color: var(--color_white_dark); } /* Components . Progress bars . Sizes */ .progress-bar, .progress-bar .progress-bar-fill{ height: calc(1px * (var(--progress_bar_height) / 2)); } .progress-bar.hairline, .progress-bar.hairline .progress-bar-fill { height: 1px; } .progress-bar.tiny, .progress-bar.tiny .progress-bar-fill { height: calc(1px * (var(--progress_bar_height) / 3)); } .progress-bar.small, .progress-bar.small .progress-bar-fill { height: calc(1px * (var(--progress_bar_height) / 2)); } .progress-bar.medium, .progress-bar.medium .progress-bar-fill { height: calc(1px * (var(--progress_bar_height) / 1.5)); } .progress-bar.large, .progress-bar.large .progress-bar-fill { height: calc(1px * (var(--progress_bar_height) / 1.2)); } .progress-bar.huge, .progress-bar.huge .progress-bar-fill { height: calc(1px * (var(--progress_bar_height) / 1)); } /* Components . Progress bars . Styles */ /* Striped */ .progress-bar.striped .progress-bar-fill{ display: block; background-image: linear-gradient(45deg, var(--color_white_ultra_light) 25%, transparent 25%, transparent 50%, var(--color_white_ultra_light) 50%, var(--color_white_ultra_light) 75%, transparent 75%, transparent); background-size: 8px 8px; } /* Rounded */ .progress-bar.rounded, .progress-bar.rounded .progress-bar-fill{ border-radius: calc(1px * (var(--progress_bar_height))); }