integrate third party themes to elementary

elementary.css

/* Elementary */


/*********
 * Panel *
 ********/

.panel {
    color:#FAFAFA;
   background-color: alpha(#000, 0.3);
    transition: all 100ms ease-in-out;
}

.panel.maximized {
    background-color: alpha(#000, 1);
}

.panel.translucent {
    background-color: alpha(#000, 0.5);
}

.menubar.panel,
menubar.panel,
.panel menubar,
.panel .menubar {
    box-shadow: none;
    border: none;
}


popover  #today {
	background:@theme_primary_color;
        box-shadow:
        	inset 0 0 0 1px alpha (#fff, 0.05),
	        inset 0 1px 0 0 alpha (#fff, 0.45),
	        inset 0 -1px 0 0 alpha (#fff, 0.15),
	        0 0px 1px alpha (#000, 0.12),
	        0 0px 1px alpha (#000, 0.24);

}
popover #today label {

	color:#F7f7f7;
}
.composited-indicator revealer .today {
	background:@theme_primary_color;
}
.composited-indicator > GtkRevealer {
    color: #fff;
    font-weight: bold;
    text-shadow:
        0 0 2px alpha (#000, 0.3),
        0 1px 2px alpha (#000, 0.6);
    -gtk-icon-shadow:
        0 0 2px alpha (#000, 0.3),
        0 1px 2px alpha (#000, 0.6);
    transition: all 200ms ease-in-out;
}

.composited-indicator .keyboard {
    background-color: #fff;
    border-radius: 2px;
    box-shadow:
        0 0 2px alpha (#000, 0.3),
        0 1px 2px alpha (#000, 0.6);
    color: #333;
    font-weight: 600;
    padding: 0 3px;
    text-shadow: none;
}
.composited-indicator > revealer label,
.composited-indicator > revealer image,
.composited-indicator > GtkRevealer {
    color: #fff;
    font-weight: bold;
    text-shadow:
        0 0 2px alpha (#000, 0.3),
        0 1px 2px alpha (#000, 0.6);
    -gtk-icon-shadow:
        0 0 2px alpha (#000, 0.3),
        0 1px 2px alpha (#000, 0.6);
    transition: all 200ms ease-in-out;
}

.panel popover .menuitem {
	border:0;
	padding-top:6px;
        border-radius: 0;

}

.panel popover .menuitem:hover {
	background:@selected_bg_color;
	color:@selected_fg_color;

}

.panel.color-light .composited-indicator > GtkRevealer {
    color: alpha (#000, 0.65);
    text-shadow:
        0 0 2px alpha (#fff, 0.3),
        0 1px 0 alpha (#fff, 0.25);
    -gtk-icon-shadow:
        0 0 2px alpha (#fff, 0.3),
        0 1px 0 alpha (#fff, 0.25);
}

.panel.color-light .composited-indicator .keyboard {
    background-color: alpha (#000, 0.65);
    box-shadow:
        0 0 2px alpha (#fff, 0.3),
        0 1px 0 alpha (#fff, 0.25);
    color: #fff;
    text-shadow: none;
}

.panel .popover {
    box-shadow:
        inset 0 -1px 0 0 alpha (@bg_highlight_color, 0.5),
        0 3px 4px alpha (#000, 0.15),
        0 3px 3px -3px alpha (#000, 0.35);
}
.panel popover .menuitem {
	border:0;
	background:transparent;
}

/*********
* Avatar *
*********/

.avatar {
    border: 1px solid alpha (#000, 0.35);
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 1px alpha (#fff, 0.05),
        inset 0 1px 0 0 alpha (#fff, 0.45),
        inset 0 -1px 0 0 alpha (#fff, 0.15),
        0 1px 3px alpha (#000, 0.12),
        0 1px 2px alpha (#000, 0.24);
}

/********
* Cards *
********/

.deck {
    background-color: shade (@bg_color, 0.92);
}

.card {
    background-color: @base_color;
    border: none;
    border-color: transparent;
    box-shadow:
        0 0 0 1px alpha (#000, 0.05),
        0 3px 3px alpha (#000, 0.22);
    transition: all 150ms ease-in-out;
}

.card:checked {
    border: 3px solid @selected_bg_color;
    border-radius: 3px;
}

.card.collapsed {
    background-color: @bg_color;
    box-shadow:
        0 0 0 1px alpha (#000, 0.05),
        0 1px 2px alpha (#000, 0.22);
}

/*************
 * Seek bars *
 ************/

.seek-bar .scale.slider {
    background-color: transparent;
    background-image: none;
    border: none;
    box-shadow: none;
}

/**************
* Source List *
**************/

.sidebar .badge,
.source-list.badge,
.source-list.badge:hover,
.source-list.badge:selected,
.source-list.badge:selected:focus,
.source-list.badge:hover:selected {
    background-image: none;
    background-color: alpha (#000, 0.4);
    color: @titlebar_color;
    border-radius: 10px;
    padding: 0 6px;
    margin: 0 3px;
    text-shadow: 0 1px alpha (#000, 0.1);
    -gtk-icon-shadow: 0 1px alpha (#000, 0.1);
    border-width: 0;
}

.sidebar .badge:selected,
.source-list.badge:selected,
.source-list.badge:hover:selected {
    color: @titlebar_color;
}

.sidebar .badge:selected:backdrop,
.source-list.badge:selected:backdrop,
.source-list.badge:selected:hover:backdrop {
    background-image: none;
    background-color: alpha (#000, 0.2);
    color: shade (@titlebar_color, 0.95);
    text-shadow: 0 1px alpha (#000, 0.1);
    -gtk-icon-shadow: 0 1px alpha (#000, 0.1);
}

.source-list.level-bar,
.source-list.level-bar:selected,
.source-list.level-bar:selected:focus {
    background-color: @base_color;
    border: 1px solid alpha (#000, 0.15);
    box-shadow: 0 1px 0 alpha (#fff, 0.25);
    border-radius: 2px;
}

.source-list.fill-block,
.source-list.fill-block:hover,
.source-list.fill-block:selected,
.source-list.fill-block:selected:focus {
    background-image: none;
    background-color: mix (@colorAccent, @base_color, 0.25);
}

.source-list.level-bar.fill-block {
    border: none;
}

/**************
* Storage Bar *
**************/

.storage-bar .trough {
    box-shadow: 0 2px 3px -1px alpha (#000, 0.15);
    border: none;
    background-image: none;
    padding: 8px 6px;
}

.storage-bar .fill-block {
    background-image:
        linear-gradient(
            to bottom,
            shade (
                @bg_color,
                0.85
            ),
            shade (
                @bg_color,
                0.75
            )
        );
    border: 1px solid alpha (#000, 0.35);
    border-left-width: 0;
    box-shadow:
        inset 0 0 0 1px alpha (#fff, 0.05),
        inset 0 1px 0 0 alpha (#fff, 0.45),
        inset 0 -1px 0 0 alpha (#fff, 0.15);
    transition: all 200ms ease-in-out;
    padding: 8px 6px;
}

.storage-bar .fill-block:first-child {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-left-width: 1px;
}

.storage-bar .fill-block:last-child {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.storage-bar .fill-block.empty-block {
    background-image:
        linear-gradient(
            to bottom,
            shade (
                @bg_color,
                0.95
            ),
            shade (
                @bg_color,
                0.85
            )
        );
    border-color: alpha (#000, 0.25);
}

.storage-bar .fill-block.app {
    background-image:
        linear-gradient(
            to bottom,
            shade (
                @purple,
                1.3
            ),
            @purple
        );
    box-shadow:
        inset 0 0 0 1px alpha (#fff, 0.05),
        inset 0 1px 0 0 alpha (#fff, 0.25),
        inset 0 -1px 0 0 alpha (#fff, 0.15),
        0 1px 0 0 alpha (@bg_highlight_color, 0.15);
    border-color: shade (@purple, 0.9);
}

.storage-bar .fill-block.audio {
    background-image:
        linear-gradient(
            to bottom,
            shade (
                @orange,
                1.3
            ),
            @orange
        );
    border-color: shade (@orange, 0.9);
}

.storage-bar .fill-block.files {
    background-image:
        linear-gradient(
            to bottom,
            shade (
                @selected_bg_color,
                1.3
            ),
            @selected_bg_color
        );
    border-color: shade (@selected_bg_color, 0.9);
}

.storage-bar .fill-block.photo {
    background-image:
        linear-gradient(
            to bottom,
            shade (
                @warning_color,
                1.3
            ),
            @warning_color
        );
    border-color: shade (@warning_color, 0.87);
}

.storage-bar .fill-block.video {
    background-image:
        linear-gradient(
            to bottom,
            shade (
                @error_color,
                1.3
            ),
            @error_color
        );
    box-shadow:
        inset 0 0 0 1px alpha (#fff, 0.05),
        inset 0 1px 0 0 alpha (#fff, 0.25),
        inset 0 -1px 0 0 alpha (#fff, 0.1),
        0 1px 0 0 alpha (@bg_highlight_color, 0.15);
    border-color: shade (@error_color, 0.9);
}

.storage-bar .fill-block.legend {
    padding: 7px;
    border-radius: 50%;
}

/***********
 * Welcome *
 **********/

.welcome {
    font-size: 10px;
    text-shadow: none;
}

.welcome .dim-label {
    color: @placeholder_text_color;
}

.welcome .h1,
.welcome .h3 {
    color: alpha(@text_color, 0.8);
}

/*************
* Round Apps *
*************/

GtkWindow.rounded,
GtkWindow.rounded .action-bar {
    border-radius: 0 0 4px 4px;
}

GtkWindow.rounded.window-frame {
    border-radius: 3px;
}

/**************
* Text Styles *
**************/

.h1 {
    font-size: 24px;
}

.h2 {
    font-weight: 300;
    font-size: 18px;
}

.h3 {
    font-size: 11px;
}

.h4,
.category-label {
    color: alpha (@theme_text_color, 0.7);
    font-weight: bold;
    text-shadow: 0 1px @text_shadow_color;
}

.h4 {
    padding-bottom: 6px;
    padding-top: 6px;
}

list .h4,
GtkListBox .h4 {
    padding-left: 6px;
}

/****************
* Fake Terminal *
****************/

.terminal {
    background-color: #252e32;
    color: #94a3a5;
    font-family: monospace;
}

GtkLabel.terminal {
    padding: 12px;
}

.terminal:selected {
    background-color: #93a1a1;
    color: #252e32;
}
.horizontal.linked.raised button.toggle {
border-right-style:solid;
border-right-width:1px;

} 


/**************
* Back Button *
**************/

.back-button,
.titlebar .back-button {
    border-image: -gtk-scaled(url("assets/button-back.svg"), url("assets/button-back@2.svg")) 2 3 3 11 / 2px 3px 3px 11px stretch;
    border-width: 1px 3px 3px 11px;
    border-radius: 0 2.5px 2.5px 0;
    box-shadow: none;
    padding: 2px 4px;
}

.titlebar .back-button {
    color: @theme_fg_color;
    text-shadow: 0 1px @textColorPrimaryShadow;
    -gtk-icon-shadow: 0 1px @textColorPrimaryShadow;
}

.back-button:focus,
.titlebar .back-button:focus {
    border-image: -gtk-scaled(url("assets/button-back-focus.svg"), url("assets/button-back-focus@2.svg")) 2 3 3 11 / 2px 3px 3px 11px stretch;
    border-width: 1px 3px 3px 11px;
    border-radius: 0 2.5px 2.5px 0;
    box-shadow: none;
}

.back-button:dir(rtl) {
    border-image: -gtk-scaled(url("assets/button-back-rtl.svg"), url("assets/button-back-rtl@2.svg")) 2 11 3 3 / 2px 11px 3px 3px stretch;
    border-width: 1px 11px 3px 3px;
    border-radius: 2.5px 0 0 2.5px;
}

.back-button:focus:dir(rtl) {
    border-image: -gtk-scaled(url("assets/button-back-focus-rtl.svg"), url("assets/button-back-focus-rtl@2.svg")) 2 11 3 3 / 2px 11px 3px 3px stretch;
    border-width: 1px 11px 3px 3px;
    border-radius: 2.5px 0 0 2.5px;
}

.back-button:backdrop {
    border-image: -gtk-scaled(url("assets/button-back-backdrop.svg"), url("assets/button-back-backdrop@2.svg")) 2 3 3 11 / 2px 3px 3px 11px stretch;
    border-width: 1px 3px 3px 11px;
    border-radius: 0 2.5px 2.5px 0;
    box-shadow: none;
}

.back-button:backdrop:dir(rtl) {
    border-image: -gtk-scaled(url("assets/button-back-backdrop-rtl.svg"), url("assets/button-back-rtl@2.svg")) 2 11 3 3 / 2px 11px 3px 3px stretch;
    border-width: 1px 11px 3px 3px;
    border-radius: 2.5px 0 0 2.5px;
    box-shadow: none;
}

.back-button:active,
.back-button:hover:active,
.back-button:focus:active {
    border-image: -gtk-scaled(url("assets/button-back-active.svg"), url("assets/button-back-active@2.svg")) 2 3 3 11 / 2px 3px 3px 11px stretch;
    border-width: 1px 3px 3px 11px;
    border-radius: 0 2.5px 2.5px 0;
    box-shadow: none;
}

.back-button:active:dir(rtl),
.back-button:hover:active:dir(rtl),
.back-button:focus:active:dir(rtl) {
    border-image: -gtk-scaled(url("assets/button-back-active-rtl.svg"), url("assets/button-back-active-rtl@2.svg")) 2 11 3 3 / 2px 11px 3px 3px stretch;
    border-width: 1px 11px 3px 3px;
    border-radius: 2.5px 0 0 2.5px;
    box-shadow: none;
}


/*******
* Gala *
*******/

.gala-notification {
    border: none;
    border-radius: 4px;
    background-color: transparent;
    background-image:
        linear-gradient(
            to bottom,
            @theme_bg_color,
            @theme_bg_color 80%,
            shade (
                @theme_bg_color,
                0.94
            )
        );
    box-shadow:
        inset 0 0 0 1px alpha (#5c5c5c, 0.1),
        inset 0 1px 0 0 alpha (#5c5c5c, 0.9),
        inset 0 -1px 0 0 alpha (#5c5c5c, 0.3),
        0 0 0 1px alpha (#000, 0.2),
        0 3px 6px alpha (#000, 0.16),
        0 5px 5px -3px alpha (#000, 0.4);
}

.gala-notification .title,
.gala-notification .label {
    color: @theme_text_color;
}

.gala-notification GtkImage {
    color: alpha (@theme_text_color, 0.8);
}

.gala-button {
    padding: 3px;
    color: #fff;
    border: none;
    border-radius: 100px;
    background-image:
        linear-gradient(
            to bottom,
            #7e7e7e,
            #3e3e3e
        );
    box-shadow:
        inset 0 0 0 1px alpha (#fff, 0.02),
        inset 0 1px 0 0 alpha (#fff, 0.07),
        inset 0 -1px 0 0 alpha (#fff, 0.01),
        0 0 0 1px alpha (#000, 0.4),
        0 3px 6px alpha (#000, 0.16),
        0 3px 6px alpha (#000, 0.23);
    text-shadow: 0 1px 1px alpha (#000, 0.6);
}


/***************
 * Switchboard *
 **************/

.hotcorner-display {
    border-radius: 2px;
    -gtk-icon-shadow:
        0 3px 4px alpha (#000, 0.2),
        0 2px 2px alpha (#000, 0.3);
}

.login .entry {
    border-radius: 3.5px;
    padding: 6px;
    background-image:
        linear-gradient(
            to bottom,
            shade (
                @base_color,
                0.93
            ),
            @base_color
        );
}

.login .entry *:selected {
    background-color: shade (@base_color, 0.8);
    color: @text_color;
}

.login .entry *:selected:focus {
    background-color: alpha (@colorAccent, 0.9);
    color: @selected_fg_color;
    text-shadow: none;
}