[ Mini Kiebo ]
Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586
Path:
D:
/
Backup
/
14082024
/
Data
/
htdocs
/
htdocs
/
siakad
/
perpustakaan2
/
assets
/
less
/
shared
/
[
Home
]
File: variables.less
// // Shared Variables // -------------------------------------------------- @import "../bootstrap/variables.less"; // GLOBAL VALUES // -------------------------------------------------- @color-threshold: 72%; // Grays // ------------------------- @black: #0c0c0c; @gray-darkest: hsl(hue(@brand-primary), 3%, 10%); @gray-darker: hsl(hue(@brand-primary), 3%, 13.5%); @gray-dark: hsl(hue(@brand-primary), 3%, 20%); @gray: hsl(hue(@brand-primary), 3%, 33.5%); @gray-light: hsl(hue(@brand-primary), 3%, 60%); @gray-light2: hsl(hue(@brand-primary), 3%, 75%); @gray-lighter: hsl(hue(@brand-primary), 3%, 90%); @gray-lightest: hsl(hue(@brand-primary), 3%, 95%); @white: #fff; // Brand colors // ------------------------- @brand-default: @gray-lighter; @brand-inverse: #20252b; @brand-primary: #0aa89e; @brand-accent: #9C27B0; @brand-success: #4CAF50; @brand-warning: #FF9800; @brand-danger: #F44336; @brand-info: #2196F3; // Formulas are being used to calculate the dark and light color. // If you want you can change these to hex color values @brand-default-dark: @brand-inverse; @brand-default-light: @gray-lightest; @brand-default-bright: @white; @primary-l: hsvvalue(@brand-primary); @primary-s: hsvsaturation(@brand-primary); @brand-primary-dark: darken(rgb(red(@brand-primary), green(@brand-primary), blue(@brand-primary) + 15), 15); @brand-primary-light: hsv(hue(@brand-primary), 42%, (100% - (100% - @primary-l) * (42% / @primary-s)) ); @brand-primary-bright: hsv(hue(@brand-primary), 16%, (100% - (100% - @primary-l) * (16% / @primary-s)) ); @accent-l: hsvvalue(@brand-accent); @accent-s: hsvsaturation(@brand-accent); @brand-accent-dark: darken(rgb(red(@brand-accent), green(@brand-accent), blue(@brand-accent) + 15), 15); @brand-accent-light: hsv(hue(@brand-accent), 42%, (100% - (100% - @accent-l) * (42% / @accent-s)) ); @brand-accent-bright: hsv(hue(@brand-accent), 16%, (100% - (100% - @accent-l) * (16% / @accent-s)) ); // Body // ------------------------- @body-background: @brand-default; @body-background-size: 100% 100%; @body-color: @text-color; // Buttons colors // ------------------------- @btn-default-color: @gray-light; @btn-default-bg: @gray-lighter; @btn-default-border: @gray-lighter; @btn-primary-color: @brand-primary; @btn-primary-bg: @brand-primary; @btn-primary-border: @brand-primary; @btn-success-color: @brand-success; @btn-success-bg: @brand-success; @btn-success-border: @brand-success; @btn-info-color: @brand-info; @btn-info-bg: @brand-info; @btn-info-border: @brand-info; @btn-warning-color: @brand-warning; @btn-warning-bg: @brand-warning; @btn-warning-border: @brand-warning; @btn-danger-color: @brand-danger; @btn-danger-bg: @brand-danger; @btn-danger-border: @brand-danger; // Typography // ------------------------- @font-family-sans-serif: "Roboto", sans-serif, Helvetica, Arial, sans-serif; @display4-size: 112px; @display3-size: 56px; @display2-size: 45px; @display1-size: 34px; @headline-size: 24px; @title-size: 20px; @subhead-size: 15px; @font-size-base: 13px; @button-size: 14px; @caption-size: 12px; @weight-light: 300; @weight-normal: 400; @weight-medium: 500; @weight-bold: 700; @weight-ultra-bold: 900; @headings-font-weight: @weight-normal; @blockquote-border-color: @brand-primary-bright; @font-size-h1: @display1-size; @font-size-h2: @headline-size; @font-size-h3: @title-size; @font-size-h4: @subhead-size; @font-size-h5: @font-size-base; @font-size-h6: @caption-size; @line-height-base: 1.846153846; // 24/13 @line-height-computed: round((@font-size-base * @line-height-base)); // ~24px // Base variables // ------------------------- @padding-base-vertical: 4.5px; @padding-base-horizontal: 14px; // Shadow heights // ------------------------- @z-height-0: none; @z-height-1: 0 1px 3px 0 rgba(0,0,0,.33); @z-height-2: 0 3px 8px 0 rgba(0,0,0,.38); @z-height-3: 0 8px 14px 0 rgba(0,0,0,.38); @z-height-4: 0 14px 19px 0 rgba(0,0,0,.38); @z-height-5: 0 20px 24px 0 rgba(0,0,0,.38); @z-height-1-inverse: 0 -1px 3px 0 rgba(0,0,0,.33); @z-height-2-inverse: 0 -3px 8px 0 rgba(0,0,0,.38); @z-height-3-inverse: 0 -8px 14px 0 rgba(0,0,0,.38); @z-height-4-inverse: 0 -14px 19px 0 rgba(0,0,0,.38); @z-height-5-inverse: 0 -20px 24px 0 rgba(0,0,0,.38); // COMPONENT VARIABLES // -------------------------------------------------- // Border radius // ------------------------- @border-radius-base: 2px; @border-radius-large: 2px; @border-radius-small: 0px; // Z-index // ------------------------- @zindex-navbar: 1000; // Bootstrap index @zindex-dropdown: 1000; // Bootstrap index @zindex-section-action: 1001; @zindex-menubar: 1004; @zindex-header: 1005; @zindex-menubar-first: 1006; @zindex-header-mobile: 1011; @zindex-header-offcanvas: 1012; @zindex-menubar-mobile: 1013; @zindex-navbar-fixed: 1030; // Bootstrap index @zindex-offcanvas-backdrop: 1031; @zindex-offcanvas: 1032; @zindex-modal-background: 1040; // Bootstrap index @zindex-modal: 1050; // Bootstrap index @zindex-popover: 1060; // Bootstrap index @zindex-tooltip: 1070; // Bootstrap index @zindex-toast: 2000; // Media queries breakpoints // ------------------------- @screen-xs: 480px; @screen-sm: 769px; // COMPONENTS // -------------------------------------------------- // Gutters // ------------------------- @gutter-size: 4px; @grid-gutter-width: (@gutter-size * 6); @section-gutter-width: (@gutter-size * 6); @section-gutter-width-sm: (@gutter-size * 3); @header-gutter-width: (@gutter-size * 6); @header-gutter-width-sm: (@gutter-size * 3); // Dimensions // ------------------------- @dimensions-steps: 40px; // List group // ------------------------- @list-group-done-color: desaturate(@brand-success, 50%); @list-group-done-bg: lighten(@brand-success, 50%); // Headerbar // ------------------------- @headerbar-height: 64px; @headerbar-bg: @white; @headerbar-color: fade(@text-color, 60%); @headerbar-link-hover: fade(@black, 7%); // Headerbar inverse // ------------------------- @headerbar-inverse-bg: lighten(@brand-inverse, 2%); @headerbar-inverse-color: fade(@white, 60%); @headerbar-inverse-link-hover: fade(@white, 15%); // Menubar // ------------------------- @menubar-bg: @gray-lightest; @menubar-color: fade(@black, 85%); @menubar-folder-color: fade(@menubar-color, 75%); @menubar-font-size: 12px; @menubar-gap: (@gutter-size * 3); @menubar-link-hover: fade(@black, 7%); @menubar-link-hover-color: @black; @menubar-link-active: @white; @menubar-link-active-color: @brand-primary; @menubar-icon-width: 40px; @menubar-icon-bg: @white; @menubar-icon-bg-active: @white; @menubar-icon-bg-hover: fade(@black, 7%); @menubar-icon-color: @gray; @menubar-icon-color-active: @brand-primary; @menubar-icon-color-hover: @text-color; @menubar-icon-border: @menubar-icon-bg; @menubar-width: 240px; @menubar-width-collapsed: @menubar-icon-width + (@menubar-gap * 2); @menubar-collapse-speed: .5s; @menubar-collapse-ease: cubic-bezier(.15,.99,.18,1.01);//ease-out; // Menubar tree variables @menubar-tree-border-color: fade(contrast(@menubar-bg, @black, @white, @color-threshold), 30%); @menubar-tree-width: 21px; @menubar-tree-indent: 57px; @menubar-tree-indent-level1: 30px; @menubar-tree-indent-level2: @menubar-tree-indent-level1 + @menubar-tree-width; @menubar-tree-indent-level3: @menubar-tree-indent-level2 + @menubar-tree-width; @menubar-tree-indent-level4: @menubar-tree-indent-level3 + @menubar-tree-width; @menubar-tree-indent-level5: @menubar-tree-indent-level4 + @menubar-tree-width; // Menubar inverse // ------------------------- @menubar-inverse-bg: lighten(@brand-inverse, 5%); @menubar-inverse-color: fade(@white, 55%); @menubar-inverse-folder-color: fade(@white, 50%); @menubar-inverse-link-hover: lighten(@brand-inverse, 8%); @menubar-inverse-link-hover-color: @white; @menubar-inverse-link-active: @brand-inverse; @menubar-inverse-link-active-color: @white; @menubar-inverse-icon-bg: lighten(@brand-inverse, 2%); @menubar-inverse-icon-bg-active: @brand-primary; @menubar-inverse-icon-bg-hover: fade(@white, 12%); @menubar-inverse-icon-color: fade(@white, 65%); @menubar-inverse-icon-color-active: contrast(@menubar-inverse-icon-bg-active, @text-color, @white, @color-threshold); @menubar-inverse-icon-color-hover: @white; @menubar-inverse-icon-border: @menubar-inverse-icon-bg; @menubar-inverse-tree-border-color: fade(contrast(@menubar-inverse-bg, @black, @white, @color-threshold), 30%); // Offcanvas // ------------------------- @offcanvas-bg: @brand-default-bright; @offcanvas-ease-in: cubic-bezier(.22,.99,.68,.98); @offcanvas-speed-in: .5s; @offcanvas-ease-out: ease-in; @offcanvas-speed-out: .33s; // Card // ------------------------- @card-header-lg: 80px; @card-header: 56px; @card-header-sm: 48px; @card-header-xs: 36px; @card-gutter-width: (@gutter-size * 6); @card-gutter-width-sm: (@gutter-size * 4); @card-radius: 2px; @card-header-color: @gray; @card-default-border: @gray-light; @card-back-color: #fff; // Pager // ------------------------- @pager-border-radius: 0px; // Pagination // ------------------------- @pagination-active-bg: @brand-primary; @pagination-active-color: contrast(@pagination-active-bg, @text-color, @white, @color-threshold); @pagination-disabled-color: @gray-light; // Tables // ------------------------- @table-cell-padding: 10px 8px; @table-condensed-cell-padding: 5px; @table-bg: transparent; // overall background-color @table-bg-accent: fade(@gray-lightest, 35); // for striping @table-bg-hover: fade(@gray-lighter, 25); @table-bg-hover-color: @text-color; @table-bg-active: @table-bg-hover; @table-border-color: fade(@gray-light2, 20); // table and cell border @table-theme-head: darken(desaturate(@brand-primary, 10%), 5%); @table-theme-head-border: lighten(@table-theme-head, 30); // DataTables // ------------------------- @table-body-border: 1px solid @gray-lighter; // Border of rows / cells @table-row-background: transparent; // Row background colour @table-row-selected: @brand-primary; // Row colour, when selected (tr.selected) @table-paging-button-active: @btn-default-bg; @table-paging-button-hover: darken(@btn-default-bg, 5%); // Forms // ------------------------- @input-color: @black; @input-border: fade(@black, 12); @input-border-focus: @brand-primary; @input-border-disabled: fade(@black, 20); @input-color-placeholder: @gray-light; @form-label-focus: @brand-primary; @form-label-opacity: 0.5; @form-label-focus-opacity: 1; @input-border-success-focus: @brand-success; @input-border-warning-focus: @brand-warning; @input-border-danger-focus: @brand-danger; @inverse-input-color: @gray-lightest; @inverse-input-border: fade(@white, 25); @inverse-input-border-focus: hsv(hue(@brand-primary), 30%, 93%); @inverse-input-border-disabled: fade(@white, 40%); @inverse-input-color-placeholder: fade(@white, 50%); @inverse-form-label-focus: hsv(hue(@brand-primary), 30%, 93%); @inverse-input-border-success-focus: hsv(hue(@brand-success), 70%, 90%); @inverse-input-border-warning-focus: hsv(hue(@brand-warning), 80%, 90%); @inverse-input-border-danger-focus: hsv(hue(@brand-danger), 70%, 90%); // Form states and alerts // ------------------------- @state-success-text: #3c763d; @state-success-bg: hsv(hue(@brand-success), 15%, 98%);//#dff0d8; @state-info-text: #31708f; @state-info-bg: hsv(hue(@brand-info), 15%, 98%);//#d9edf7; @state-warning-text: #8a6d3b; @state-warning-bg: hsv(hue(@brand-warning), 15%, 98%);//#fcf8e3; @state-danger-text: #a94442; @state-danger-bg: hsv(hue(@brand-danger), 15%, 98%); // Lock screen // ------------------------- @lock-header-height: 100px; @lock-body-height: 330px; @lock-body-width: 500px; @lock-body-spacer: 25px; // Login screen // ------------------------- @login-header-height: 100px; @login-body-height: 275px; @login-body-width: 500px; @login-body-spacer: 25px; // Carousel // ------------------------ @carousel-text-shadow: 0 1px 5px rgba(0,0,0,.4); @carousel-control-width: 5%; // Breadcrumbs // ------------------------- @breadcrumb-bg: transparent; @breadcrumb-color: @text-color; @breadcrumb-active-color: @text-color; // Nav tabs // ------------------------ @nav-tabs-active-color: @brand-primary; // Container sizes // ------------------------ @container-sm: @container-tablet - (@menubar-icon-width * 2) - (@menubar-gap * 3); @container-md: @container-desktop - (@menubar-icon-width * 2) - (@menubar-gap * 3); @container-lg: @container-large-desktop - (@menubar-icon-width * 2) - (@menubar-gap * 2); // Knob legend // ------------------------ @knob-legend-diagonal-side: 125px; @knob-legend-diagonal: sqrt((@knob-legend-diagonal-side * @knob-legend-diagonal-side) + (@knob-legend-diagonal-side * @knob-legend-diagonal-side)); @knob-legend-diagonal-x: (sqrt((@knob-legend-diagonal * @knob-legend-diagonal) + (@knob-legend-diagonal * @knob-legend-diagonal)) / 2 )- @knob-legend-diagonal; // // Timeline // -------------------------------------------------- @timeline-arrow-size: 10px; @timeline-arrow-top: 15px; @timeline-circle-size: 20px; @timeline-circle-top: 15px; // // THEME VARIABLES // -------------------------------------------------- @import "themes/theme-default.less";