Icontem

File: css/LESS/_spt-settings.less

Recommend this page to a friend!
  Classes of David Whitworth  >  Advanced jQuery Scroll Progress Tracker  >  css/LESS/_spt-settings.less  >  Download  
File: css/LESS/_spt-settings.less
Role: Auxiliary data
Content type: text/plain
Description: LESS stylesheet with additional configuration
Class: Advanced jQuery Scroll Progress Tracker
Show side bar with the page scroll progress
Author: By
Last change: Version 1.2.1
Date: 2 years ago
Size: 5,412 bytes
 

Contents

Class file image Download
//-------------------------------------------------------------------------------------
// LESS settings
//-------------------------------------------------------------------------------------
// Created          2016-08-10
// Changed          2016-08-16
// Authors          David Whitworth | David@Whitworth.de
//-------------------------------------------------------------------------------------
// Version 1.0
//-------------------------------------------------------------------------------------
// 2016-08-10       Created
// 2016-08-15 DW    added the colors for the sourcecode blocks of the ReadMe;
// 2016-08-16 DW    added the sourcecode color for comments;
//                  removed a theme and adjusted the remaining three a bit
//-------------------------------------------------------------------------------------
// Version 1.1
//-------------------------------------------------------------------------------------
// 2016-08-19 DW    adjusted the DARK theme
// 2016-08-22 DW    changed the names of all classes and ids to prevent possible
//                  conflicts with other plugins
//-------------------------------------------------------------------------------------
// Version 1.2
//-------------------------------------------------------------------------------------
// 2016-08-23 DW    adjusted some color values
// 2016-09-02 DW    removed the sourcecode colors (moved to individual stylesheet)
//-------------------------------------------------------------------------------------
// Copyright  2016
//-------------------------------------------------------------------------------------

// COLORS -->
    // general
    @color-black: #000000;
    @color-white: #ffffff;
    @color-anthracite: lighten(@color-black, 15%);
    @color-lightgray: darken(@color-white, 10%);
    @color-red: #e70000;
    @color-green: #99cc33;
    @color-blue: #3399cc;
    @color-orange: #fc8b00;
    @color-magenta: #e50051;
    @color-silver: darken(@color-lightgray, 10%);
    
    // Dynamic text color (based on background color)
    .dynText (@a) when (lightness(@a) >= 50%) {
        color: @color-anthracite;
    }
    .dynText (@a) when (lightness(@a) < 50%) {
        color: @color-lightgray;
    }
    .dynText (@a) {
        background-color: @a;
    }
    
    // Dynamic background color (based on text color)
    .dynBack (@a) when (lightness(@a) >= 50%) {
        background-color: lighten(@color-anthracite, 15%);
    }
    .dynBack (@a) when (lightness(@a) < 50%) {
        background-color: @color-lightgray;
    }
    .dynBack (@a) {
        color: @a;
    }
    
    // Theme colors (configuration)
//  Theme:          DEFAULT
//  Main color:     orange
    @color-main-DEFAULT: @color-orange;
    @color-foreground-DEFAULT: @color-black;
    @color-background-DEFAULT: @color-white;
    @color-highlight-DEFAULT: @color-red;
    
//  Theme:          DARK
//  Main color:     black
    @color-main-DARK: @color-anthracite;
    @color-foreground-DARK: darken(@color-lightgray, 10%);
    @color-background-DARK: @color-black;
    @color-highlight-DARK: @color-orange;

//  Theme:          BLUE
//  Main color:     blue
    @color-main-BLUE: @color-blue;
    @color-foreground-BLUE: darken(@color-blue, 30%);
    @color-background-BLUE: lighten(@color-blue, 42%);
    @color-highlight-BLUE: @color-green;

    // Theme colors (selection)
    //  INSERT THEME NAME HERE!!
    @color-main:
        @color-main-DEFAULT;           // < Change this!
    @color-foreground:
        @color-foreground-DEFAULT;     // < Change this!
    @color-background:
        @color-background-DEFAULT;     // < Change this!
    @color-highlight:
        @color-highlight-DEFAULT;      // < Change this!
// <-- COLORS
//
// PARAMETERS -->
    // Gradients
    .spt-gradient2Stops (@origin: top, @direction: to bottom, @type: 0, @1stStop: 0%, @2ndStop: 100%, @color1: @color-main, @color2: darken(@color1, 12%)) {
        background: @color1; /* Old browsers */
        background: -moz-linear-gradient(@origin, @color1 @1stStop, @color2 @2ndStop); /* FF3.6-15 */
        background: -webkit-linear-gradient(@origin, @color1 @1stStop, @color2 @2ndStop); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(@direction, @color1 @1stStop, @color2 @2ndStop); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@color1', endColorstr='@color2',GradientType=@type ); /* IE6-8 */
    }
    .spt-gradient3Stops (@origin: top, @direction: to bottom, @type: 0, @1stStop: 0%, @2ndStop: 50%, @3rdStop: 100%, @color2: lighten(@color1, 30%), @color1: @color-main, @color3: darken(@color1, 20%)) {
        background: @color1; /* Old browsers */
        background: -moz-linear-gradient(@origin, @color2 @1stStop, @color1 @2ndStop, @color3 @3rdStop); /* FF3.6-15 */
        background: -webkit-linear-gradient(@origin, @color2 @1stStop, @color1 @2ndStop, @color3 @3rdStop); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(@direction, @color2 @1stStop, @color1 @2ndStop, @color3 @3rdStop); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@color2', endColorstr='@color3',GradientType=@type ); /* IE6-8 */
    }
    
// <-- PARAMETERS