Sindbad~EG File Manager
// Variables
//
// Variables should follow the `@component-state-property-size` formula for
// consistent naming. Ex: @nav-link-disabled-color and @modal-content-box-shadow-xs.
//
// Color system
//
@white: #fff;
@gray-100: #f8f9fa;
@gray-200: #e9ecef;
@gray-300: #dee2e6;
@gray-400: #ced4da;
@gray-500: #adb5bd;
@gray-600: #6c757d;
@gray-700: #495057;
@gray-800: #343a40;
@gray-900: #212529;
@black: #000;
@blue: #007bff;
@indigo: #6610f2;
@purple: #6f42c1;
@pink: #e83e8c;
@red: #dc3545;
@orange: #fd7e14;
@yellow: #ffc107;
@green: #28a745;
@teal: #20c997;
@cyan: #17a2b8;
@primary: @blue;
@secondary: @gray-600;
@success: @green;
@info: @cyan;
@warning: @yellow;
@danger: @red;
@light: @gray-100;
@dark: @gray-800;
// Set a specific jump point for requesting color jumps
@theme-color-interval: 8%;
// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
@yiq-contrasted-threshold: 150;
// Customize the light and dark text colors for use in our YIQ color contrast function.
@yiq-text-dark: @gray-900;
@yiq-text-light: @white;
// Spacing
//
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
// You can add more entries to the @spacers map, should you need more variation.
@spacer: 1rem;
@spacer-1: @spacer * 0.25;
@spacer-2: @spacer * 0.5;
@spacer-3: @spacer * 1.5;
@spacer-4: @spacer * 3;
// This variable affects the `.h-*` and `.w-*` classes.
@sizes:
25 25%,
50 50%,
75 75%,
100 100%,
auto auto;
// Body
//
// Settings for the `<body>` element. Defined in Elements > Body.
// @body-background: @white;
// @body-color: @gray-900;
// Links
//
// Style anchor elements. Defined in Elements > Links.
// @link-color: @primary;
// @link-decoration: none;
// @link-hover-color: darken(@link-color, 15%);
// @link-hover-decoration: underline;
// Paragraphs
//
// Style p element.
@paragraph-margin-bottom: 1rem;
// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.
@breakpoint-xs: 0;
@breakpoint-sm: 576px;
@breakpoint-md: 768px;
@breakpoint-lg: 992px;
@breakpoint-xl: 1200px;
@sm-up: ~'(min-width: 576px)';
@md-up: ~'(min-width: 768px)';
@lg-up: ~'(min-width: 992px)';
@xl-up: ~'(min-width: 1200px)';
@sm-down: ~'(max-width: 575.98px)';
@md-down: ~'(max-width: 767.98px)';
@lg-down: ~'(max-width: 991.98px)';
@xl-down: ~'(max-width: 1199.98px)';
// @tablet-up: ~'(min-width: 1025px)';
// @tablet-down: ~'(max-width: 1024px)';
// @mobile-down: ~'(max-width: 767px)';
// @mobile-up: ~'(min-width: 768px)';
// Grid columns
//
// Set the number of columns and specify the width of the gutters.
@grid-columns: 12;
@grid-gutter-width: 30px;
// Components
//
// Define common padding and border radius sizes and more.
@line-height-lg: 1.5;
@line-height-sm: 1.5;
@border-width: 1px;
@border-color: @gray-300;
@border-radius: 0.25rem;
@border-radius-lg: 0.3rem;
@border-radius-sm: 0.2rem;
@box-shadow-sm: 0 0.125rem 0.25rem fade(@black, 7.5%);
@box-shadow: 0 0.5rem 1rem fade(@black, 15%);
@box-shadow-lg: 0 1rem 3rem fade(@black, 17.5%);
@component-active-color: @white;
@component-active-bg: @primary;
@caret-width: 0.3em;
@transition-base: all 0.2s ease-in-out;
@transition-fade: opacity 0.15s linear;
@transition-collapse: height 0.35s ease;
@transition-duration: 0.15s;
// Fonts
//
// Font, line-height, and color for body text, headings, and more.
@font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
// @body-font-size: 1rem; // Assumes the browser default, typically `16px`
@font-size-lg: (@body-font-size * 1.25);
@font-size-sm: (@body-font-size * 0.875);
@font-weight-light: 300;
@font-weight-normal: 400;
@font-weight-bold: 700;
// @body-font-weight: @font-weight-normal;
@line-height-base: 1.5;
// @h1-font-size: (@body-font-size * 2.5);
// @h2-font-size: (@body-font-size * 2);
// @h3-font-size: (@body-font-size * 1.75);
// @h4-font-size: (@body-font-size * 1.5);
// @h5-font-size: (@body-font-size * 1.25);
// @h6-font-size: @body-font-size;
@headings-margin-bottom: (@spacer / 2);
@headings-font-family: inherit;
@headings-font-weight: 500;
@headings-line-height: 1.2;
@headings-color: inherit;
@display1-size: 6rem;
@display2-size: 5.5rem;
@display3-size: 4.5rem;
@display4-size: 3.5rem;
@display1-weight: 300;
@display2-weight: 300;
@display3-weight: 300;
@display4-weight: 300;
@display-line-height: @headings-line-height;
@lead-font-size: (@body-font-size * 1.25);
@lead-font-weight: 300;
@small-font-size: 80%;
@text-muted: @gray-600;
@blockquote-small-color: @gray-600;
@blockquote-font-size: @font-size-lg;
@hr-border-color: fade(@black, 10%);
@hr-border-width: @border-width;
@mark-padding: 0.2em;
@dt-font-weight: @font-weight-bold;
@kbd-box-shadow: inset 0 -0.1rem 0 fade(@black, 25%);
@nested-kbd-font-weight: @font-weight-bold;
@list-inline-padding: 0.5rem;
@mark-bg: #fcf8e3;
@hr-margin-y: @spacer;
// Tables
//
// Customizes the `.table` component with basic values, each used across all table variations.
@table-cell-padding: 0.75rem;
@table-cell-padding-sm: 0.3rem;
@table-bg: transparent;
@table-accent-bg: fade(@black, 5%);
@table-hover-bg: fade(@black, 7.5%);
@table-active-bg: @table-hover-bg;
@table-border-width: @border-width;
@table-border-color: @gray-300;
@table-head-bg: @gray-200;
@table-head-color: @gray-700;
@table-dark-bg: @gray-900;
@table-dark-accent-bg: fade(@white, 5%);
@table-dark-hover-bg: fade(@white, 7.5%);
@table-dark-border-color: lighten(@gray-900, 7.5%);
@table-dark-color: @body-background;
@table-striped-order: odd;
@table-caption-color: @text-muted;
// Buttons + Forms
//
// Shared variables that are reassigned to `@input-` and `@btn-` specific variables.
@input-btn-padding-y: 0.375rem;
@input-btn-padding-x: 0.75rem;
@input-btn-line-height: @line-height-base;
@input-btn-focus-width: 0.2rem;
@input-btn-focus-color: fade(@component-active-bg, 25%);
@input-btn-focus-box-shadow: 0 0 0 @input-btn-focus-width @input-btn-focus-color;
@input-btn-padding-y-sm: 0.25rem;
@input-btn-padding-x-sm: 0.5rem;
@input-btn-line-height-sm: @line-height-sm;
@input-btn-padding-y-lg: 0.5rem;
@input-btn-padding-x-lg: 1rem;
@input-btn-line-height-lg: @line-height-lg;
@input-btn-border-width: @border-width;
// Buttons
//
// For each of Bootstrap's buttons, define text, background, and border color.
@btn-padding-y: @input-btn-padding-y;
@btn-padding-x: @input-btn-padding-x;
@btn-line-height: @input-btn-line-height;
@btn-padding-y-sm: @input-btn-padding-y-sm;
@btn-padding-x-sm: @input-btn-padding-x-sm;
@btn-line-height-sm: @input-btn-line-height-sm;
@btn-padding-y-lg: @input-btn-padding-y-lg;
@btn-padding-x-lg: @input-btn-padding-x-lg;
@btn-line-height-lg: @input-btn-line-height-lg;
@btn-border-width: @input-btn-border-width;
@btn-font-weight: @font-weight-normal;
@btn-box-shadow: inset 0 1px 0 fade(@white, 15%), 0 1px 1px fade(@black, 7.5%);
@btn-focus-width: @input-btn-focus-width;
@btn-focus-box-shadow: @input-btn-focus-box-shadow;
@btn-disabled-opacity: 0.65;
@btn-active-box-shadow: inset 0 3px 5px fade(@black, 12.5%);
@btn-link-disabled-color: @gray-600;
@btn-block-spacing-y: 0.5rem;
// Allows for customizing button radius independently from global border radius
@btn-border-radius: @border-radius;
@btn-border-radius-lg: @border-radius-lg;
@btn-border-radius-sm: @border-radius-sm;
@btn-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
// Forms
@label-margin-bottom: 0.5rem;
@input-padding-y: @input-btn-padding-y;
@input-padding-x: @input-btn-padding-x;
@input-line-height: @input-btn-line-height;
@input-padding-y-sm: @input-btn-padding-y-sm;
@input-padding-x-sm: @input-btn-padding-x-sm;
@input-line-height-sm: @input-btn-line-height-sm;
@input-padding-y-lg: @input-btn-padding-y-lg;
@input-padding-x-lg: @input-btn-padding-x-lg;
@input-line-height-lg: @input-btn-line-height-lg;
@input-bg: @white;
@input-disabled-bg: @gray-200;
@input-color: @gray-700;
@input-border-color: @gray-400;
@input-border-width: @input-btn-border-width;
@input-box-shadow: inset 0 1px 1px fade(@black, 7.5%);
@input-border-radius: @border-radius;
@input-border-radius-lg: @border-radius-lg;
@input-border-radius-sm: @border-radius-sm;
@input-focus-bg: @input-bg;
@input-focus-border-color: lighten(@component-active-bg, 25%);
@input-focus-color: @input-color;
@input-focus-width: @input-btn-focus-width;
@input-focus-box-shadow: @input-btn-focus-box-shadow;
@input-placeholder-color: @gray-600;
@input-plaintext-color: @body-color;
@input-height-border: (@input-border-width * 2);
@input-height-inner: (@body-font-size * @input-btn-line-height + @input-btn-padding-y * 2);
@input-height: ~"calc(@{input-height-inner} + @{input-height-border})";
@input-height-inner-sm: (@font-size-sm * @input-btn-line-height-sm + @input-btn-padding-y-sm * 2);
@input-height-sm: ~"calc(@{input-height-inner-sm} + @{input-height-border})";
@input-height-inner-lg: (@font-size-lg * @input-btn-line-height-lg + @input-btn-padding-y-lg * 2);
@input-height-lg: ~"calc(@{input-height-inner-lg} + @{input-height-border})";
@input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
@form-text-margin-top: 0.25rem;
@form-check-input-gutter: 1.25rem;
@form-check-input-margin-y: 0.3rem;
@form-check-input-margin-x: 0.25rem;
@form-check-inline-margin-x: 0.75rem;
@form-check-inline-input-margin-x: 0.3125rem;
@form-group-margin-bottom: 1rem;
@input-group-addon-color: @input-color;
@input-group-addon-bg: @gray-200;
@input-group-addon-border-color: @input-border-color;
@custom-control-gutter: 1.5rem;
@custom-control-spacer-x: 1rem;
@custom-control-indicator-size: 1rem;
@custom-control-indicator-bg: @gray-300;
@custom-control-indicator-bg-size: 50% 50%;
@custom-control-indicator-box-shadow: inset 0 0.25rem 0.25rem fade(@black, 10%);
@custom-control-indicator-disabled-bg: @gray-200;
@custom-control-label-disabled-color: @gray-600;
@custom-control-indicator-checked-color: @component-active-color;
@custom-control-indicator-checked-bg: @component-active-bg;
@custom-control-indicator-checked-disabled-bg: fade(@primary, 50%);
@custom-control-indicator-checked-box-shadow: none;
@custom-control-indicator-focus-box-shadow: 0 0 0 1px @body-background, @input-btn-focus-box-shadow;
@custom-control-indicator-active-color: @component-active-color;
@custom-control-indicator-active-bg: lighten(@component-active-bg, 35%);
@custom-control-indicator-active-box-shadow: none;
@custom-checkbox-indicator-border-radius: @border-radius;
@custom-checkbox-indicator-icon-checked: %(~'url("data:image/svg+xml;charset=utf8,%s%s%s")', "%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='", jupiterx_replace("@{custom-control-indicator-checked-color}", "#", "%23"), "' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
@custom-checkbox-indicator-indeterminate-bg: @component-active-bg;
@custom-checkbox-indicator-indeterminate-color: @custom-control-indicator-checked-color;
@custom-checkbox-indicator-icon-indeterminate: %(~'url("data:image/svg+xml;charset=utf8,%s%s%s")', "%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='", jupiterx_replace("@{custom-checkbox-indicator-indeterminate-color}", "#", "%23"), "' d='M0 2h4'/%3E%3C/svg%3E");
@custom-checkbox-indicator-indeterminate-box-shadow: none;
@custom-radio-indicator-border-radius: 50%;
@custom-radio-indicator-icon-checked: %(~'url("data:image/svg+xml;charset=utf8,%s%s%s")', "%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='", jupiterx_replace("@{custom-control-indicator-checked-color}", "#", "%23"), "'/%3E%3C/svg%3E");
@custom-select-padding-y: 0.375rem;
@custom-select-padding-x: 0.75rem;
@custom-select-height: @input-height;
@custom-select-indicator-padding: 1rem; // Extra padding to account for the presence of the background-image based indicator
@custom-select-line-height: @input-btn-line-height;
@custom-select-color: @input-color;
@custom-select-disabled-color: @gray-600;
@custom-select-bg: @input-bg;
@custom-select-disabled-bg: @gray-200;
@custom-select-bg-size: 8px 10px; // In pixels because image dimensions
@custom-select-indicator-color: @gray-800;
@custom-select-indicator: %(~'url("data:image/svg+xml;charset=utf8,%s%s%s")', "%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='", jupiterx_replace("@{custom-select-indicator-color}", "#", "%23"), "' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");
@custom-select-border-width: @input-btn-border-width;
@custom-select-border-color: @input-border-color;
@custom-select-border-radius: @border-radius;
@custom-select-focus-border-color: @input-focus-border-color;
@custom-select-focus-box-shadow: inset 0 1px 2px fade(@black, 7.5%), 0 0 5px fade(@custom-select-focus-border-color, 50%);
@custom-select-font-size-sm: 75%;
@custom-select-height-sm: @input-height-sm;
@custom-select-font-size-lg: 125%;
@custom-select-height-lg: @input-height-lg;
@custom-range-track-width: 100%;
@custom-range-track-height: 0.5rem;
@custom-range-track-cursor: pointer;
@custom-range-track-bg: @gray-300;
@custom-range-track-border-radius: 1rem;
@custom-range-track-box-shadow: inset 0 0.25rem 0.25rem fade(@black, 10%);
@custom-range-thumb-width: 1rem;
@custom-range-thumb-height: @custom-range-thumb-width;
@custom-range-thumb-bg: @component-active-bg;
@custom-range-thumb-border: 0;
@custom-range-thumb-border-radius: 1rem;
@custom-range-thumb-box-shadow: 0 0.1rem 0.25rem fade(@black, 10%);
@custom-range-thumb-focus-box-shadow: 0 0 0 1px @body-background, @input-btn-focus-box-shadow;
@custom-range-thumb-active-bg: lighten(@component-active-bg, 35%);
@custom-file-height: @input-height;
@custom-file-height-inner: @input-height-inner;
@custom-file-focus-border-color: @input-focus-border-color;
@custom-file-focus-box-shadow: @input-btn-focus-box-shadow;
@custom-file-padding-y: @input-btn-padding-y;
@custom-file-padding-x: @input-btn-padding-x;
@custom-file-line-height: @input-btn-line-height;
@custom-file-color: @input-color;
@custom-file-bg: @input-bg;
@custom-file-border-width: @input-btn-border-width;
@custom-file-border-color: @input-border-color;
@custom-file-border-radius: @input-border-radius;
@custom-file-box-shadow: @input-box-shadow;
@custom-file-button-color: @custom-file-color;
@custom-file-button-bg: @input-group-addon-bg;
@custom-file-text:
en "Browse";
// Form validation
@form-feedback-margin-top: @form-text-margin-top;
@form-feedback-font-size: @small-font-size;
@form-feedback-valid-color: @success;
@form-feedback-invalid-color: @danger;
// Dropdowns
//
// Dropdown menu container and contents.
@dropdown-min-width: 10rem;
@dropdown-padding-y: 0.5rem;
@dropdown-spacer: 0.125rem;
@dropdown-bg: @white;
@dropdown-border-color: fade(@black, 15%);
@dropdown-border-radius: @border-radius;
@dropdown-border-width: @border-width;
@dropdown-divider-bg: @gray-200;
@dropdown-box-shadow: 0 0.5rem 1rem fade(@black, 17.5%);
@dropdown-link-color: @gray-900;
// @dropdown-link-hover-color: darken(@gray-900, 5%);
@dropdown-link-hover-bg: @gray-100;
@dropdown-link-active-color: @component-active-color;
@dropdown-link-active-bg: @component-active-bg;
@dropdown-link-disabled-color: @gray-600;
@dropdown-item-padding-y: 0.25rem;
@dropdown-item-padding-x: 1.5rem;
@dropdown-header-color: @gray-600;
// Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.
@zindex-dropdown: 1000;
@zindex-sticky: 1020;
@zindex-fixed: 1030;
@zindex-modal-backdrop: 1040;
@zindex-modal: 1050;
@zindex-popover: 1060;
@zindex-tooltip: 1070;
// Navs
@nav-link-padding-y: 0.5rem;
@nav-link-padding-x: 1rem;
@nav-link-disabled-color: @gray-600;
@nav-tabs-border-color: @gray-300;
@nav-tabs-border-width: @border-width;
@nav-tabs-border-radius: @border-radius;
@nav-tabs-link-hover-border-color: @gray-200 @gray-200 @nav-tabs-border-color;
@nav-tabs-link-active-color: @gray-700;
@nav-tabs-link-active-bg: @body-background;
@nav-tabs-link-active-border-color: @gray-300 @gray-300 @nav-tabs-link-active-bg;
@nav-pills-border-radius: @border-radius;
@nav-pills-link-active-color: @component-active-color;
@nav-pills-link-active-bg: @component-active-bg;
@nav-divider-color: @gray-200;
@nav-divider-margin-y: (@spacer / 2);
// Navbar
@navbar-padding-y: (@spacer / 2);
@navbar-padding-x: @spacer;
@navbar-nav-link-padding-x: 0.5rem;
@navbar-brand-font-size: @font-size-lg;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
@nav-link-height: (@body-font-size * @line-height-base + @nav-link-padding-y * 2);
@navbar-brand-height: (@navbar-brand-font-size * @line-height-base);
@navbar-brand-padding-y: ((@nav-link-height - @navbar-brand-height) / 2);
@navbar-toggler-padding-y: 0.25rem;
@navbar-toggler-padding-x: 0.75rem;
@navbar-toggler-font-size: @font-size-lg;
@navbar-toggler-border-radius: @btn-border-radius;
@navbar-dark-color: fade(@white, 50%);
@navbar-dark-hover-color: fade(@white, 75%);
@navbar-dark-active-color: @white;
@navbar-dark-disabled-color: fade(@white, 25%);
@navbar-dark-toggler-icon-bg: %(~'url("data:image/svg+xml;charset=utf8,%s%s%s")', "%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='", jupiterx_replace("@{navbar-dark-color}", "#", "%23"), "' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
@navbar-dark-toggler-border-color: fade(@white, 10%);
@navbar-light-color: fade(@black, 50%);
@navbar-light-hover-color: fade(@black, 70%);
@navbar-light-active-color: fade(@black, 90%);
@navbar-light-disabled-color: fade(@black, 30%);
@navbar-light-toggler-icon-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
@navbar-light-toggler-border-color: fade(@black, 10%);
// Pagination
@pagination-padding-y: 0.5rem;
@pagination-padding-x: 0.75rem;
@pagination-padding-y-sm: 0.25rem;
@pagination-padding-x-sm: 0.5rem;
@pagination-padding-y-lg: 0.75rem;
@pagination-padding-x-lg: 1.5rem;
@pagination-line-height: 1.25;
@pagination-color: @link-color;
@pagination-bg: @white;
@pagination-border-width: @border-width;
@pagination-border-color: @gray-300;
@pagination-focus-box-shadow: @input-btn-focus-box-shadow;
@pagination-focus-outline: 0;
@pagination-hover-color: @link-hover-color;
@pagination-hover-bg: @gray-200;
@pagination-hover-border-color: @gray-300;
@pagination-active-color: @component-active-color;
@pagination-active-bg: @component-active-bg;
@pagination-active-border-color: @pagination-active-bg;
@pagination-disabled-color: @gray-600;
@pagination-disabled-bg: @white;
@pagination-disabled-border-color: @gray-300;
// Jumbotron
@jumbotron-padding: 2rem;
@jumbotron-bg: @gray-200;
// Cards
@card-spacer-y: 0.75rem;
@card-spacer-x: 1.25rem;
@card-border-width: @border-width;
@card-border-radius: @border-radius;
@card-border-color: fade(@black, 12.5%);
@card-inner-border-radius: ~"calc(@{card-border-radius} - @{card-border-width})";
@card-cap-bg: fade(@black, 3%);
@card-bg: @white;
@card-img-overlay-padding: 1.25rem;
@card-group-margin: (@grid-gutter-width / 2);
@card-deck-margin: @card-group-margin;
@card-columns-count: 3;
@card-columns-gap: 1.25rem;
@card-columns-margin: @card-spacer-y;
// Tooltips
@tooltip-font-size: @font-size-sm;
@tooltip-max-width: 200px;
@tooltip-color: @white;
@tooltip-bg: @black;
@tooltip-border-radius: @border-radius;
@tooltip-opacity: 0.9;
@tooltip-padding-y: 0.25rem;
@tooltip-padding-x: 0.5rem;
@tooltip-margin: 0;
@tooltip-arrow-width: 0.8rem;
@tooltip-arrow-height: 0.4rem;
@tooltip-arrow-color: @tooltip-bg;
// Popovers
@popover-font-size: @font-size-sm;
@popover-bg: @white;
@popover-max-width: 276px;
@popover-border-width: @border-width;
@popover-border-color: fade(@black, 20%);
@popover-border-radius: @border-radius-lg;
@popover-box-shadow: 0 0.25rem 0.5rem fade(@black, 20%);
// @popover-header-bg: darken(@popover-bg, 3%);
@popover-header-color: @headings-color;
@popover-header-padding-y: 0.5rem;
@popover-header-padding-x: 0.75rem;
@popover-body-color: @body-color;
@popover-body-padding-y: @popover-header-padding-y;
@popover-body-padding-x: @popover-header-padding-x;
@popover-arrow-width: 1rem;
@popover-arrow-height: 0.5rem;
@popover-arrow-color: @popover-bg;
@popover-arrow-outer-color: fadein(@popover-border-color, 5%);
// Badges
@badge-font-size: 75%;
@badge-font-weight: @font-weight-bold;
@badge-padding-y: 0.25em;
@badge-padding-x: 0.4em;
@badge-border-radius: @border-radius;
@badge-pill-padding-x: 0.6em;
// Use a higher than normal value to ensure completely rounded edges when
// customizing padding or font-size on labels.
@badge-pill-border-radius: 10rem;
// Modals
// Padding applied to the modal body
@modal-inner-padding: 1rem;
@modal-dialog-margin: 0.5rem;
@modal-dialog-margin-y-sm-up: 1.75rem;
@modal-title-line-height: @line-height-base;
@modal-content-bg: @white;
@modal-content-border-color: fade(@black, 20%);
@modal-content-border-width: @border-width;
@modal-content-border-radius: @border-radius-lg;
@modal-content-box-shadow-xs: 0 0.25rem 0.5rem fade(@black, 50%);
@modal-content-box-shadow-sm-up: 0 0.5rem 1rem fade(@black, 50%);
@modal-backdrop-bg: @black;
@modal-backdrop-opacity: 0.5;
@modal-header-border-color: @gray-200;
@modal-footer-border-color: @modal-header-border-color;
@modal-header-border-width: @modal-content-border-width;
@modal-footer-border-width: @modal-header-border-width;
@modal-header-padding: 1rem;
@modal-lg: 800px;
@modal-md: 500px;
@modal-sm: 300px;
@modal-transition: transform 0.3s ease-out;
// Alerts
//
// Define alert colors, border radius, and padding.
@alert-padding-y: 0.75rem;
@alert-padding-x: 1.25rem;
@alert-margin-bottom: 1rem;
@alert-border-radius: @border-radius;
@alert-link-font-weight: @font-weight-bold;
@alert-border-width: @border-width;
@alert-bg-level: 10;
@alert-border-level: 9;
@alert-color-level: 6;
// Progress bars
@progress-height: 1rem;
@progress-font-size: (@body-font-size * 0.75);
@progress-bg: @gray-200;
@progress-border-radius: @border-radius;
@progress-box-shadow: inset 0 0.1rem 0.1rem fade(@black, 10%);
@progress-bar-color: @white;
@progress-bar-bg: @primary;
@progress-bar-animation-timing: 1s linear infinite;
@progress-bar-transition: width 0.6s ease;
// List group
@list-group-bg: @white;
@list-group-border-color: fade(@black, 12.5%);
@list-group-border-width: @border-width;
@list-group-border-radius: @border-radius;
@list-group-item-padding-y: 0.75rem;
@list-group-item-padding-x: 1.25rem;
@list-group-hover-bg: @gray-100;
@list-group-active-color: @component-active-color;
@list-group-active-bg: @component-active-bg;
@list-group-active-border-color: @list-group-active-bg;
@list-group-disabled-color: @gray-600;
@list-group-disabled-bg: @list-group-bg;
@list-group-action-color: @gray-700;
@list-group-action-hover-color: @list-group-action-color;
@list-group-action-active-color: @body-color;
@list-group-action-active-bg: @gray-200;
// Image thumbnails
@thumbnail-padding: 0.25rem;
@thumbnail-bg: @body-background;
@thumbnail-border-width: @border-width;
@thumbnail-border-color: @gray-300;
@thumbnail-border-radius: @border-radius;
@thumbnail-box-shadow: 0 1px 2px fade(@black, 7.5%);
// Figures
@figure-caption-font-size: 90%;
@figure-caption-color: @gray-600;
// Breadcrumbs
@breadcrumb-padding-y: 0.75rem;
@breadcrumb-padding-x: 1rem;
@breadcrumb-item-padding: 0.5rem;
@breadcrumb-margin-bottom: 1rem;
@breadcrumb-bg: @gray-200;
@breadcrumb-divider-color: @gray-600;
@breadcrumb-active-color: @gray-600;
@breadcrumb-divider: "/";
@breadcrumb-border-radius: @border-radius;
// Carousel
@carousel-control-color: @white;
@carousel-control-width: 15%;
@carousel-control-opacity: 0.5;
@carousel-indicator-width: 30px;
@carousel-indicator-height: 3px;
@carousel-indicator-spacer: 3px;
@carousel-indicator-active-bg: @white;
@carousel-caption-width: 70%;
@carousel-caption-color: @white;
@carousel-control-icon-width: 20px;
@carousel-control-prev-icon-bg: %(~'url("data:image/svg+xml;charset=utf8,%s%s%s")', "%3Csvg xmlns='http://www.w3.org/2000/svg' fill='", jupiterx_replace("@{carousel-control-color}", "#", "%23"), "' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
@carousel-control-next-icon-bg: %(~'url("data:image/svg+xml;charset=utf8,%s%s%s")', "%3Csvg xmlns='http://www.w3.org/2000/svg' fill='", jupiterx_replace("@{carousel-control-color}", "#", "%23"), "' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
@carousel-transition: transform 0.6s ease; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity 0.5s ease-out`)
// Close
@close-font-size: (@body-font-size * 1.5);
@close-font-weight: @font-weight-bold;
@close-color: @black;
@close-text-shadow: 0 1px 0 @white;
// Code
@code-font-size: 87.5%;
@code-color: @pink;
@kbd-padding-y: 0.2rem;
@kbd-padding-x: 0.4rem;
@kbd-font-size: @code-font-size;
@kbd-color: @white;
@kbd-bg: @gray-900;
@pre-color: @gray-900;
@pre-scrollable-max-height: 340px;
// Printing
@print-page-size: a3;
@print-body-min-width: @breakpoint-lg;
// Enabling features
@enable-rounded: true;
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists