Sindbad~EG File Manager
//
// DEFAULT VARIABLES
//
// A configuration base where you can edit most important
// things and create a completely different style.
//
// OPTIONS
// Usefull options to easy change design style.
// Avatar
$scss-avatar-shape: square !default; // [ square | circle ]
$scss-avatar-style: bordered !default; // [ plain | bordered ]
// LTR / RLT Support
$scss-direction: ltr !default;
// Stream position
$scss-stream-position: left !default; // [ left | right ]
// Main Layout
$primary-width: 61.8034% !default;
$secondary-width: 38.1966% !default;
// Other
$scss-rounded: false;
//
// PADDING
//
$padd: 10px;
$padd--med: $padd + ($padd / 2);
$padding-sm: 8.5px;
$padding-base: 14px;
$padding-lg: 24px;
//
// TYPOGRAPHY
//
$font-family: "Helvetica",Arial,sans-serif;
// Font-size
$font-size-xs: 10px;
$font-size-sm: 12px;
$font-size-base: 18px;
$font-size-md: 18px;
$font-size-lg: 24px;
// Size used for elements where base font-size is too high, and
// small font-size is too low.
$font-size-alt: 13px;
$font-size: $font-size-base;
// Line-height
$line-height-sm: 16px;
$line-height-base: 18px;
$line-height-md: 24px;
//
// MAIN WRAPPER
//
$main-wrap-bg: #ECF0F1;
$main-wrap-padding: $padding-base;
//
// COLORS
// Set of colors used in whole design.
$color-gray-light: #7E7E7E;
$color-gray: #565656;
$color-gray-dark: #333;
$color-light: rgba(0,0,0,.1);
$color-neutral: $color-gray;
$color-primary: #00b0ff;
$color-success: #2FBA34;
$color-warning: #ffa726;
$color-danger: #e53935;
$color-brand: #d0423c;
$color-text: $color-gray-dark;
$color-text-light: $color-gray-light;
$color-text-dark: $color-gray;
$color-icon: $color-neutral;
$color-link: #2196f3;
$color-link-hover: darken($color-link, 20%);
$color-muted: #B1B1B1;
$woo-stars: #ddd;
$woo-stars-active: $color-warning;
//
// FOCUS AREA
//
$focus-bg: #f5f5f5;
$focus-color: $color-gray-light;
$focus-separator: 1px solid #e4e4e4;
$focus-border: 1px solid #ededed;
$focus-link-bg--current: rgba(0,0,0,.03);
$focus-interactions-bg: white;
$focus-opt-icon-color: #F9F9F9;
//
// MODULE COMPONENT
//
$module-bg: white;
$module-border: 1px solid rgba(0,0,0,.08);
$module-separator: 1px solid rgba(0,0,0,.08);
//
// PAGINATION COMPONENT
//
$pagination-bg: #F5F7F7;
$pagination-item-bg-hover: rgba(0,0,0,.05);
//
// POPOVER COMPONENT
//
$popover-bg: white;
//
// ALERT COMPONENT
//
$alert: #b3e5fc;
$alert-color: #2196f3;
$alert-padding: $padding-sm $padding-base;
$alert-font-size: $font-size-sm;
$alert-line-height: $line-height-base;
// Alert variations
$alert-success: #66bb6a;
$alert-success-color: #e8f5e9;
$alert-warning: #f9b836;
$alert-warning-color: #fff;
$alert-danger: #ef5350;
$alert-danger-color: #ffebee;
//
// BORDER RADIUS
//
$border-radius-sm: 4px;
$border-radius: 6px;
//
// MEDIA QUERIES
//
$xsmall: 360px;
$small: 480px;
$medium: 481px;
$large: 992px;
//
// Z-INDEX MAP
//
$zindex: (
normal: 5,
base: 10,
dropdown: 20,
popover: 30,
chat: 1000,
dialog: 200000
);
//
// BUTTONS
// Here you can edit colors of button variables.
// Base button
$btn-bg: #EFEFEF;
$btn-bg-hover: darken($btn-bg, 5%);
$btn-color: #424242;
$btn-color-hover: black;
$btn-border: none;
$btn-font-size: $font-size-base;
$btn-line-height: $line-height-base;
$btn-padding: 7.2px $padding-sm;
// Button variations
$btn-primary: $color-primary;
$btn-success: $color-success;
$btn-warning: $color-warning;
$btn-danger: $color-danger;
$btn-sm-font-size: $font-size-sm;
$btn-sm-line-height: $line-height-sm;
$btn-sm-padding: 5px $padding-sm;
$btn-md-font-size: $font-size-md;
$btn-md-line-height: $line-height-md;
$btn-md-padding: $padding-sm;
$scss-hashtag-color: $btn-color;
$scss-hashtag-color-hover: $btn-color-hover;
$scss-hashtag-bg: $btn-bg;
$scss-hashtag-bg-hover: $btn-bg-hover;
//
// TOOLBAR COMPONENT
//
$toolbar-bg: #f3f3f3;
$toolbar-color: #666;
$toolbar-color--hover: #333;
$toolbar-separator: 1px solid rgba(0,0,0,.05);
$toolbar-item-bg--hover: rgba(0,0,0, .025);
$toolbar-submenu-bg: #fff;
$toolbar-submenu-shadow: #e9e9e9;
//
// SUBMENU COMPONENT
//
$submenu-bg: #f5f5f5;
$submenu-separator: 1px solid #e4e4e4;
$submenu-link-bg--current: rgba(0,0,0,.03);
//
// STREAM
//
$stream-post-color: $color-text;
$stream-post-bg: white;
$stream-post-border: 1px solid rgba(0,0,0,.08);
$stream-post-meta-color: $color-text-dark;
$stream-post-time-color: $color-text-light;
$stream-post-status-bg: rgba(0,0,0,.02);
$stream-quote-color: $color-text;
$stream-quote-border: 3px solid #E3E5E7;
$stream-post-pin-bg: $color-primary;
$stream-post-pin-color: #fff;
$stream-placeholder-bg: #EEEEEE;
$stream-placeholder-bg-2: #DDDDDD;
//
// TAB COMPONENT
//
$tab-item-bg: #E0E7E8;
$tab-item-bg-active: white;
$tab-item-color: $color-text;
$tab-content-bg: white;
$tab-content-color: $color-gray-dark;
$tabs-item-bg: #F5F5F5;
$tabs-item-active-bg: #FFF;
$tabs-item-border: 1px solid rgba(0,0,0, .05);
$tabs-arrows-color: rgba(0,0,0,.15);
//
// COMMENTS
//
$comment-bg: rgba(0,0,0,.02);
$comment-item-color: $color-text;
$comment-item-separator: 1px solid rgba(0,0,0,.1);
$comment-reply-bg: rgba(0,0,0,.02);
$comment-reply-separator: 1px solid rgba(0,0,0,.04);
$comment-more-separator: 1px solid rgba(0,0,0,.1);
//
// POSTBOX COMPONENT
//
$postbox-bg: white;
$postbox-color: $color-text;
$postbox-status-bg: transparent;
$postbox-textarea-color: $color-text;
$postbox-tab-color: $color-gray-dark;
$postbox-tab-color-hover: black;
$postbox-tab-bg: #EFEFEF;
$postbox-tab-bg-hover: rgba(0,0,0,.05);
$postbox-tab-bg-active: rgba(0,0,0,.05);
$postbox-tabs-border: 1px solid rgba(0,0,0,.05);
$postbox-charcount-bg: #f1f1f1;
$postbox-charcount-color: $color-gray-dark;
$postbox-img-bg: $main-wrap-bg;
$postbox-img-border: 1px solid #EAEAEA;
$postbox-img-action-bg: white;
$postbox-img-action-color: $color-icon;
//
// DROPDOWN COMPONENT
//
$dropdown-bg: white;
$dropdown-border: 1px solid #E3E5E7;
$dropdown-separator: $dropdown-border;
$dropdown-item-bg-hover: rgba(0,0,0,.05);
//
// TAGGING COMPONENT
//
$tagging-bg: #b3e5fc;
$tagging-wrapper-bg: white;
//
// DIALOG COMPONENT
//
$dialog-bg: white;
$dialog-border: 1px solid #C0C0C0;
$dialog-header-bg: #111;
$dialog-header-color: white;
$dialog-close: #888;
$dialog-close-hover: white;
$dialog-footer-bg: #F6F6F6;
//
// FORMS
//
$input-color: $color-text;
$input-bg: white;
$input-border: 1px solid $color-light;
$input-border-focus: $color-primary;
$form-error-color: $color-danger;
$required-sign-color: $color-danger;
//
// LANDING / LOGIN AREA
//
$landing-content-color: white;
$landing-content-bg: rgba(0,0,0,.4);
$landing-action-bg: white;
$landing-action-border: 1px solid rgba(0,0,0,.08);
//
// PHOTOS / ALBUMS
//
$photo-item-overlay: rgba(0,0,0,.4);
$photo-item-bg: rgba(0,0,0,.05);
$photo-item-border: rgba(0,0,0,.025);
//
// MEMBERS
//
$member-item-bg: #f9f9f9;
$member-item-border: 1px solid rgba(0,0,0,.05);
$member-online-color: $color-success;
//
// GROUPS
//
$group-item-bg: #f9f9f9;
//
// MESSAGES
//
$message-item-bg: rgba(0,0,0,.01);
$message-unread-color: inherit;
$message-unread-bg: lighten($color-primary, 45%);
$typing-indicator-color: $color-link;
$typing-indicator-bg: #ECF0F1;
//
// CHAT PLUGIN
//
$chat-window-bg: rgb(236, 240, 241);
$chat-window-border: 1px solid #ddd;
$chat-window-header-color: white;
$chat-window-header-bg: #A8AAB1;
$chat-window-header-bg-hover: #93949B;
$chat-window-header-bg-active: #5E6271;
$chat-window-header-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
$chat-sidebar-item-color: black;
$chat-input-color: $color-text;
$chat-input-bg: white;
$chat-input-border: #ddd;
// Conversation
$conversation-name-color: black;
$conversation-link-color: $color-link;
$conversation-link-hover: $color-link-hover;
$conversation-msg-color: $color-text;
$conversation-msg-bg: white;
$conversation-my-msg-color: #3F4248;
$conversation-my-msg-bg: #D7DBE4;
//
// PAGE
//
$page-bg: white;
$page-border: 1px solid rgba(0,0,0,.1);
$page-title-color: $color-text;
$page-title-font-size: $font-size-md;
$page-title-line-height: $line-height-md;
$page-half-bg: #F6F6F6;
$page-legend-bg: rgba(0,0,0,.03);
$page-legend-border: #eee;
//
// MEDIA
//
$media-bg: rgba(0, 0, 0,.04);
$media-body-color: $color-text;
$media-body-bg: rgba(0, 0, 0,.04);
$media-counter-color: white;
$media-counter-bg: rgba(0,0,0,.4);
$media-counter-bg-hover: rgba(0,0,0,.5);
$media-counter-border: 3px solid rgba(255,255,255,.4);
$media-counter-border-hover: 3px solid rgba(255,255,255,.6);
$media-photo-border: white;
//
// UTILITY
//
// Avatar
$avatar-border-color: white;
// Divider
$divider: 1px solid rgba(0,0,0,.08);
$divider-dashed: 1px dashed rgba(0,0,0,.1);
$divider-dashed-md: 2px dashed rgba(0,0,0,.1);
// Content wrapper
$content-wrap-bg: white;
// Notification counter
$notif-counter-color: white;
$notif-counter-bg: $color-danger;
$notif-counter-border: ($border-radius / 1.5);
// Lightbox
$lightbox-bg: white;
$lightbox-icon-color: rgba(0,0,0,.6);
// Column list
$column-list-color-hover: rgba(0,0,0,.05);
// Progress bar
$progress-bg: #fff;
$progress-bar-bg: rgba(0,0,0,.15);
$progress-bar-bg-fill: $color-success;
// Accordion
$accordion-bg: #F5F7F7;
$accordion-bg-active: lighten($accordion-bg, 2%);
//
// OVERRIDES
//
// All the important colors of the PeepSo layout
// overrided & prepared for Theme Designer
//
// Buttons
$scss-btn-color: $btn-color;
$scss-btn-color-hover: $btn-color-hover;
$scss-btn-bg: $btn-bg;
$scss-btn-bg-hover: $btn-bg-hover;
$scss-btn-primary-color: #FFF;
$scss-btn-primary-color-hover: #FFF;
$scss-btn-primary-bg: $btn-primary;
$scss-btn-primary-bg-hover: darken($btn-primary, 10%);
$scss-btn-success-color: #FFF;
$scss-btn-success-color-hover: #FFF;
$scss-btn-success-bg: $btn-success;
$scss-btn-success-bg-hover: darken($btn-success, 10%);
$scss-btn-warning-color: #FFF;
$scss-btn-warning-color-hover: #FFF;
$scss-btn-warning-bg: $btn-warning;
$scss-btn-warning-bg-hover: darken($btn-warning, 10%);
$scss-btn-danger-color: #FFF;
$scss-btn-danger-color-hover: #FFF;
$scss-btn-danger-bg: $btn-danger;
$scss-btn-danger-bg-hover: darken($btn-danger, 10%);
// Loader
$scss-loader-color: #ddd;
// Toolbar
$scss-toolbar-color: $toolbar-color;
$scss-toolbar-color-hover: $toolbar-color--hover;
$scss-toolbar-bg: $toolbar-bg;
$scss-toolbar-bg-hover: $toolbar-item-bg--hover;
$scss-toolbar-separator: $toolbar-separator;
// Toolbar Submenu
$scss-submenu-bg: $toolbar-submenu-bg;
$scss-submenu-shadow: $toolbar-submenu-shadow;
$scss-submenu-dropdown-bg: transparent;
// Postbox
$scss-postbox-bg: $postbox-bg;
$scss-postbox-color: $postbox-color;
$scss-postbox-tab-color: $postbox-tab-color;
$scss-postbox-tab-color-hover: $postbox-tab-color-hover;
$scss-postbox-tab-bg: $postbox-tab-bg;
$scss-postbox-tab-bg-hover: $postbox-tab-bg-hover;
// Focus
$scss-focus-color: $focus-color;
$scss-focus-bg: $focus-bg;
$scss-focus-border: $focus-border;
$scss-focus-separator: $focus-separator;
$scss-focus-interactions-bg: $focus-interactions-bg;
$scss-focus-interactions-border: $scss-focus-border;
$scss-focus-item-bg-current: $focus-link-bg--current;
$scss-focus-link-color: none;
$scss-focus-link-color-hover: none;
// Members
$scss-member-item-bg: $member-item-bg;
$scss-member-item-border: $member-item-border;
// Groups
$scss-group-item-bg: $group-item-bg;
$scss-group-item-border: rgba(0,0,0,.05);
$scss-group-item-actions-bg: rgba(0,0,0,.025);
// Accordion
$scss-accordion-item-color: $color-text-light;
$scss-accordion-item-bg: $accordion-bg;
$scss-accordion-item-bg-active: $accordion-bg-active;
$scss-accordion-item-border: $divider;
$scss-accordion-item-action-color: $color-text-light;
$scss-accordion-item-action-color-hover: $color-text;
// Popover
$scss-popover-bg: $popover-bg;
$scss-popover-btn-color: $scss-btn-color;
$scss-popover-btn-bg: $scss-btn-bg;
$scss-popover-btn-color-hover: $scss-btn-color-hover;
$scss-popover-btn-bg-hover: $scss-btn-bg-hover;
// Stream
$scss-stream-post-bg: $stream-post-bg;
$scss-stream-post-border: $stream-post-border;
$scss-stream-post-status-bg: $stream-post-status-bg;
// todo
$stream-placeholder-bg: $stream-placeholder-bg;
$stream-placeholder-bg-2: $stream-placeholder-bg-2;
// Comments
$scss-comments-bg: $comment-bg;
$scss-comments-border: $comment-item-separator;
$scss-comments-reply-bg: $comment-reply-bg;
// Form
$scss-input-color: $input-color;
$scss-input-bg: $input-bg;
$scss-input-border: $input-border;
$scss-input-border-focus: $input-border-focus;
$scss-form-sprites-position: top;
// Checkbox
$scss-checkbox__border-color: #ddd;
$scss-checkbox__bg: transparent;
$scss-checkbox__bg--checked: $color-primary;
// Tabs
$scss-tab-item-bg: $tabs-item-bg;
$scss-tab-item-bg-active: $tabs-item-active-bg;
$scss-tab-item-border: $tabs-item-border;
$scss-tab-item-arrows-color: $tabs-arrows-color;
// Dialog window
$scss-dialog-bg: $dialog-bg;
$scss-dialog-border: $dialog-border;
$scss-dialog-header-color: $dialog-header-color;
$scss-dialog-header-bg: $dialog-header-bg;
$scss-dialog-close-color: $dialog-close;
$scss-dialog-close-color-hover: $dialog-close-hover;
$scss-dialog-footer-bg: $dialog-footer-bg;
// Chat
$scss-chat-window-bg: $chat-window-bg;
$scss-chat-window-border: $chat-window-border;
$scss-chat-window-header-color: $chat-window-header-color;
$scss-chat-window-header-bg: $chat-window-header-bg;
$scss-chat-window-header-bg-hover: $chat-window-header-bg-hover;
$scss-chat-window-header-bg-active: $chat-window-header-bg-active;
$scss-chat-window-header-border: $chat-window-header-shadow;
$scss-chat-window-input-border: $chat-input-border;
// Widget
$scss-widget-bg: $module-bg;
$scss-widget-border: $module-border;
$scss-widget-header-color: $color-text;
$scss-widget-header-bg: #f5f5f5;
// Bubble
$scss-bubble-color: #fff;
$scss-bubble-bg: $color-danger;
// Dropdown
$scss-dropdown-bg: $dropdown-bg;
$scss-dropdown-border: none;
$scss-dropdown-item-bg: none;
$scss-dropdown-item-bg-hover: rgba(0,0,0, .025);
$scss-dropdown-item-separator: $toolbar-separator;
// Notifications
$scss-notification-item-separator: $divider;
$scss-notification-item-bg-unread: $message-unread-bg;
// Avatar
$scss-avatar-bg: $avatar-border-color;
$scss-avatar-border: rgba(0,0,0,0.1);
// Reactions
$scss-reactions-separator: rgba(0,0,0, .05);
$scss-reactions-dropdown-bg: #fff;
$scss-reactions-dropdown-border: #eee;
$scss-reactions-dropdown-separator: #eee;
$scss-reactions-emote-shadow: #fff;
// BadgeOS
$scss-badgeos-item-bg: #f9f9f9;
$scss-badgeos-item-border: rgba(0,0,0,.05);
$scss-badgeos-item-image-bg: #fff;
// BlogPosts
$scss-blogposts-post-bg: #fff;
$scss-blogposts-post-border: rgba(0,0,0, .05);
$scss-blogposts-post-image-bg: rgba(0,0,0, .05);
$scss-blogposts-authorbox-border: #eee;
// WPAdverts
$scss-classifieds-item-bg: #fff;
$scss-classifieds-item-border: #eee;
$scss-classifieds-item-featured-bg: #ecf9ff;
$scss-classifieds-item-featured-border: #d2e7f2;
// Messages
$scss-messages-item-bg: $message-item-bg;
$scss-messages-item-bg-unread: $scss-notification-item-bg-unread;
$scss-messages-header-border: #eee;
$scss-typing-indicator-color: $typing-indicator-color;
$scss-typing-indicator-bg: $typing-indicator-bg;
// Pagination
$scss-pagination-bg: $pagination-bg;
$scss-pagination-bg-hover: $pagination-item-bg-hover;
// Redirect box
$scss-redirectbox-border: #eee;
$scss-redirectbox-bg: #f7f7f7;
// Utility
$scss-hr-bg: #eee;
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists