Nautilus Theme

_variables.scss

/*
 * Default variable values
 * Create separate themes/theme/_variables.scss to override these variables
 */

/*
 * General
 */

$background-color: #ecf2f6 !default;
$text-color: #6f7e95 !default;
$dim-text-color: #d0dbe6 !default;
$error-text-color: #c14747 !default;

$link-color: #47bac1 !default;
$hover-link-color: #639af5 !default;

$font: Arial, sans-serif !default;
$font-size: 14px !default;

$transitions-duration: 0.3s !default;
$fast-transitions-duration: 0.1s !default;

$mobile-max-width: 960px;
$phone-max-width: 480px;

/*
 * Sidebar
 */

$sidebar-width: 250px !default;
$sidebar-header-height: 44px !default;

$sidebar-background-color: #354052 !default;
$sidebar-contrast-background-color: #2b3647 !default;
$sidebar-contrast-text-color: #6f7e95 !default;

$sidebar-arrow-color: #639af5 !default;
$sidebar-hover-arrow-color: #639af5 !default;

$sidebar-action-color: #47bac1 !default;
$sidebar-hover-action-color: #639af5 !default;

$sidebar-title-action-color: #47bac1 !default;
$sidebar-hover-title-action-item-color: #639af5 !default;

$sidebar-text-color: #6f7e95 !default;
$sidebar-icon-color: #6f7e95 !default;
$sidebar-link-color: #c0cad8 !default;
$sidebar-hover-link-color: #fff !default;
$sidebar-hover-background-color: #2b3647 !default;

$sidebar-popup-search-input-background-color: #d0dbe6 !default;
$sidebar-popup-search-input-text-color: #6f7e95 !default;
$sidebar-popup-search-input-placeholder-color: transparentize(#6f7e95, 0.5) !default;

$sidebar-popup-background-color: #ecf2f6 !default;
$sidebar-popup-text-color: #6f7e95 !default;
$sidebar-popup-overlay-color: #000 !default;

$sidebar-popup-link-text-color: #6f7e95 !default;
$sidebar-popup-hover-link-color: #fff !default;
$sidebar-popup-hover-link-background-color: #639af5 !default;

/*
 * Top
 */

$top-height: 32px !default;

$top-text-color: #6f7e95 !default;
$top-separator-color: #c0d4e8 !default;
$top-link-color: #c0d4e8 !default;
$top-hover-link-color: #639af5 !default;
$top-border-color: #c0d4e8 !default;
$top-icon-color: #47bac1 !default;

$top-dropdown-background-color: #6f7e95 !default;
$top-dropdown-text-color: #ecf2f6 !default;
$top-dropdown-contrast-background-color: #59677e !default;
$top-dropdown-contrast-text-color: #c0cad8 !default;
$top-dropdown-border-color: #76849a !default;
$top-dropdown-link-color: #ecf2f6 !default;
$top-dropdown-hover-link-color: #ecf2f6 !default;
$top-dropdown-icon-color: #ecf2f6 !default;
$top-dropdown-selected-color: #e5e2a5 !default;

/*
 * Content
 */

$content-background-color: #fff !default;
$content-contrast-background-color: #f6fafc !default; //inline list bg
$content-contrast2-background-color: #59677e !default; //table header
$content-contrast3-background-color: #d0dbe6 !default; //delete collapsable
$content-selected-background-color: #fffcc0 !default;
$content-contrast2-text-color: #fff !default;
$content-border-color: #f4f4f4 !default; //row bottom
$content-border2-color: #d0dbe6 !default; //table bottom
$content-selected-border-color: #e5e2a5 !default;

$tab-selected-border-color: #639af5 !default;
$tab-error-border-color: #c14747 !default;

/*
 * Buttons
 */

$button-background-color: #d0dbe6 !default;
$button-hover-background-color: #639af5 !default;
$button-active-background-color: #6f7e95 !default;
$button-text-color: #6f7e95 !default;
$button-hover-text-color: #fff !default;
$button-active-text-color: #fff !default;

$primary-button-background-color: #47bac1 !default;
$primary-button-text-color: #fff !default;

$danger-button-background-color: #c14747 !default;
$danger-button-text-color: #fff !default;

$background-button-background-color: #fff !default;
$background-button-text-color: #6f7e95 !default;

/*
 * Inputs
 */

$input-height: 32px !default;
$input-background-color: #fff !default;
$input-contrast-background-color: #d0dbe6 !default;
$input-border-color: #ecf2f6 !default;
$input-hover-background-color: #639af5 !default;
$input-icon-color: #47bac1 !default;
$input-text-color: #6f7e95 !default;
$input-contrast-text-color: #6f7e95 !default;
$input-hover-text-color: #fff !default;
$input-selected-text-color: #47bac1 !default;
$input-disabled-text-color: #d0dbe6 !default;
$input-placeholder-color: #d0dbe6 !default;
$input-shadow-color: transparentize(#47bac1, 0.25) !default;

$background-input-background-color: #fff !default;
$background-input-border-color: #fff !default;
$background-input-text-color: #6f7e95 !default;

/*
 * Messages
 */

$warning-color: #f0dada !default;
$warning-text-color: #d49d9d !default;
$info-color: #e8e8bd !default;
$info-text-color: #b9b97f !default;
$success-color: #c4ecc5 !default;
$success-text-color: #82b982 !default;

/*
 * Login
 */

$login-background-color: #354052 !default;
$login-title-text-color: #6f7e95 !default;
$login-title-contrast-text-color: #fff !default;
$login-header-background-color: #59677e !default;
$login-header-text-color: #fff !default;
$login-content-background-color: #fff !default;

/*
 * jQuery UI
 */

$jquery-ui-buttonpane-background: #ecf2f6 !default;

$jquery-ui-state-default-background-color: #fff !default;
$jquery-ui-state-default-border-color: #ecf2f6 !default;
$jquery-ui-state-default-text-color: #6f7e95 !default;

$jquery-ui-state-hover-background-color: #639af5 !default;
$jquery-ui-state-hover-border-color: #639af5 !default;
$jquery-ui-state-hover-text-color: #fff !default;

$jquery-ui-state-active-background-color: #47bac1 !default;
$jquery-ui-state-active-border-color: #47bac1 !default;
$jquery-ui-state-active-text-color: #fff !default;

$jquery-ui-state-highlight-background-color: #fff !default;
$jquery-ui-state-highlight-border-color: #639af5 !default;
$jquery-ui-state-highlight-text-color: #639af5 !default;

$jquery-ui-overlay-color: #000 !default;

$jquery-ui-tooltip-background-color: #000 !default;
$jquery-ui-tooltip-text-color: #fff !default;

/*
 * Charts
 */

$chart-fillColor: transparentize($hover-link-color, 0.75) !default;
$chart-strokeColor: $hover-link-color !default;
$chart-pointColor: $content-contrast2-text-color !default;
$chart-pointHighlightFill: $hover-link-color !default;
$chart-scaleGridLineColor: transparentize(#000, 0.9) !default;
$chart-scaleLineColor: transparentize(#000, 0.9) !default;
$chart-scaleFontColor: $content-contrast2-text-color !default;

_varnautilus.scss

/*
 * Customizable variables
 * Update these variable to create theme
 */

/*
 * General
 */

$background-color: #f8fafc;
$text-color: #8B9AA7;
$dim-text-color: #c0c6cc;
$error-text-color: #c7254e;

$link-color: #79A7D8;
$hover-link-color: #1cacfc;

$contrast-color: #A464C4;

$font: Arial, sans-serif !default;
$font-size: 14px;

/*
 * Sidebar
 */

$sidebar-width: 250px;

$sidebar-background-color: #554488;
$sidebar-contrast-background-color: #4d3b73;
$sidebar-contrast-text-color: #9988cc;

$sidebar-arrow-color: #40305F;
$sidebar-hover-arrow-color: #FDBB5E;

$sidebar-action-color: #9988cc;
$sidebar-hover-action-color: #FDBB5E;

$sidebar-title-action-color: #fff;
$sidebar-hover-title-action-item-color: #FDBB5E;

$sidebar-text-color: #9988cc;
$sidebar-icon-color: #9988cc;
$sidebar-link-color: #C2B8E0;
$sidebar-hover-link-color: #fff;
$sidebar-hover-background-color: #443366;

$sidebar-popup-search-input-background-color: #E3ECF2;
$sidebar-popup-search-input-text-color: #7f8fa4;
$sidebar-popup-search-input-placeholder-color: #bdcbde;

$sidebar-popup-background-color: #f7f8fa;
$sidebar-popup-text-color: #7f8fa4;
$sidebar-popup-overlay-color: #000;

$sidebar-popup-link-text-color: #7f8fa4;
$sidebar-popup-hover-link-color: #fff;
$sidebar-popup-hover-link-background-color: #1cacfc;

/*
 * Top
 */

$top-height: 32px;

$top-text-color: #8B9EAB;
$top-separator-color: #C6D8E4;
$top-link-color: #C6D8E4;
$top-hover-link-color: #1cacfc;
$top-border-color: #dce0e6;
$top-icon-color: $link-color;

$top-dropdown-background-color: #5e4d99;
$top-dropdown-text-color: #fff;
$top-dropdown-contrast-background-color: #4d3b73;
$top-dropdown-contrast-text-color: #c8beeb;
$top-dropdown-border-color: #594585;
$top-dropdown-link-color: #fff;
$top-dropdown-hover-link-color: #fff;
$top-dropdown-icon-color: #c8beeb;
$top-dropdown-selected-color: #EFEDC8;

/*
 * Content
 */

$content-background-color: #fff;
$content-contrast-background-color: #F8FAFC; //inline list bg
$content-contrast2-background-color: #E3ECF2; //table header
$content-contrast3-background-color: #EEF3F7; //dashboard, delete collapsable
$content-selected-background-color: #FFFDDB;
$content-contrast2-text-color: $text-color;
$content-border-color: #f1f2f4; //row bottom
$content-border2-color: #D5E3EC; //table bottom
$content-selected-border-color: #EFEDC8;

$tab-selected-border-color: #1cacfc;
$tab-error-border-color: #c7254e;

/*
 * Buttons
 */

$button-background-color: #E3ECF2;
$button-hover-background-color: #1cacfc;
$button-active-background-color: $contrast-color;
$button-text-color: #7f8fa4;
$button-hover-text-color: #fff;
$button-active-text-color: #fff;

$primary-button-background-color: $contrast-color;
$primary-button-text-color: #fff;

$danger-button-background-color: #c7254e;
$danger-button-text-color: #fff;

$background-button-background-color: #fff;
$background-button-text-color: #7f8fa4;

/*
 * Inputs
 */

$input-background-color: #fff;
$input-contrast-background-color: #E3ECF2;
$input-border-color: #EDEDED;
$input-hover-background-color: #1cacfc;
$input-icon-color: $link-color;
$input-text-color: $text-color;
$input-contrast-text-color: #7f8fa4;
$input-hover-text-color: #fff;
$input-selected-text-color: $contrast-color;
$input-disabled-text-color: $dim-text-color;
$input-placeholder-color: #999;
$input-shadow-color: transparentize($contrast-color, 0.25);

$background-input-background-color: #fff;
$background-input-border-color: #fff;
$background-input-text-color: $text-color;

/*
 * Messages
 */

$warning-color: #e75e40;
$warning-text-color: #fff;
$info-color: #FCA326;
$info-text-color: #fff;
$success-color: #2d9fd8;
$success-text-color: #fff;

/*
 * Login
 */

$login-background-color: $sidebar-background-color;
$login-title-text-color: #aaddcc;
$login-title-contrast-text-color: #fff;
$login-header-background-color: $content-contrast2-background-color;
$login-header-text-color: $content-contrast2-text-color;
$login-content-background-color: #fff;

/*
 * jQuery UI
 */

$jquery-ui-buttonpane-background: $content-contrast2-background-color;

$jquery-ui-state-default-background-color: $input-background-color;
$jquery-ui-state-default-border-color: $input-border-color;
$jquery-ui-state-default-text-color: $input-text-color;

$jquery-ui-state-hover-background-color: $button-hover-background-color;
$jquery-ui-state-hover-border-color: $button-hover-background-color;
$jquery-ui-state-hover-text-color: $button-hover-text-color;

$jquery-ui-state-active-background-color: $button-active-background-color;
$jquery-ui-state-active-border-color: $button-active-background-color;
$jquery-ui-state-active-text-color: $button-active-text-color;

$jquery-ui-state-highlight-background-color: $input-background-color;
$jquery-ui-state-highlight-border-color: $hover-link-color;
$jquery-ui-state-highlight-text-color: $hover-link-color;

$jquery-ui-overlay-color: #000;

$jquery-ui-tooltip-background-color: #000;
$jquery-ui-tooltip-text-color: #fff;

/*
 * Charts
 */

$chart-fillColor: transparentize($hover-link-color, 0.75);
$chart-strokeColor: $hover-link-color;
$chart-pointColor: #fff;
$chart-pointHighlightFill: $hover-link-color;
$chart-scaleGridLineColor: transparentize(#000, 0.9);
$chart-scaleLineColor: transparentize(#000, 0.9);
$chart-scaleFontColor: $content-contrast2-text-color;