How To Theme The Cinnamon Taskbar Panel and Window List Tabs

Forum rules
Before you post please read this

How To Theme The Cinnamon Taskbar Panel and Window List Tabs

Postby austin.texas on Tue Jan 07, 2014 7:54 am

This thread is for the exchange of ideas and tips on how to customize the elements of a Cinnamon theme.

Here is an introduction to the installation and basic use of Cinnamon and gtk themes -
http://shyloh.com/themes.html

Here is the beginners tutorial for changing the colors of a Cinnamon theme, created by caribriz.
http://www.mediafire.com/view/i934f6tm60yxdjb/HOW-TO-CHANGE-THE-COLORS-OF-A-CINNAMON-THEME.pdf

Forum discussions for Cinnamon themes:

How To Install a New Theme
viewtopic.php?f=42&t=155399

How To Theme The Cinnamon Main Menu Colors
viewtopic.php?f=42&t=155400

How To Theme The Cinnamon Main Menu Borders and Boxes
viewtopic.php?f=42&t=155401

How To Theme The Cinnamon Taskbar Panel Icons and Applets
viewtopic.php?f=42&t=155404

How To Theme The Cinnamon Popup Menu
viewtopic.php?f=42&t=155405

How To Theme The Cinnamon Notifications
viewtopic.php?f=211&t=155411

How to create/edit a Cinnamon theme, by Brahim
viewtopic.php?f=42&t=155698

You can use the Subscribe topic link at the bottom of the page to get updates.
Last edited by austin.texas on Thu Jan 23, 2014 10:40 am, edited 3 times in total.
Mint 17 Cinnamon (64 bit), Quad core AMD A8-3870 with Radeon HD Graphics 6550D, 8GB DDR3, Ralink RT2561/RT61 802.11g PCI
Microsoft-free environment since 1996

To help Linux Mint with a donation, please visit http://www.linuxmint.com/donors.php
User avatar
austin.texas
Level 9
Level 9
 
Posts: 2629
Joined: Tue Nov 17, 2009 3:57 pm
Location: at /home

Linux Mint is funded by ads and donations.
 

Re: How To Theme The Cinnamon Taskbar Panel and Window List

Postby austin.texas on Tue Jan 07, 2014 12:41 pm

You can apply a different color to the panel easily.
Open the theme's cinnamon.css file in /home/user/.themes/MyTheme/cinnamon/ with a text editor - Leafpad and gedit are good, Bluefish is the best, IMHO.
Search for a section in cinnamon.css beginning with #panel
You should see a line in the #panel section like this:
background-color: #555555;
If it is not there, add it.
delete the color (in this example #555555) and enter your new color

Some good sites for choosing colors are:
http://www.color-hex.com/216-web-safe-colors/
http://www.color-hex.com/color/acefff
http://www.computerhope.com/htmcolor.htm

If your new color is #acefff, your new line will be:
background-color: #acefff;

Save and exit, then switch to another theme and back to the theme you edited to see the result. If your window list tabs are transparent, they will show this color, as well.
Mint 17 Cinnamon (64 bit), Quad core AMD A8-3870 with Radeon HD Graphics 6550D, 8GB DDR3, Ralink RT2561/RT61 802.11g PCI
Microsoft-free environment since 1996

To help Linux Mint with a donation, please visit http://www.linuxmint.com/donors.php
User avatar
austin.texas
Level 9
Level 9
 
Posts: 2629
Joined: Tue Nov 17, 2009 3:57 pm
Location: at /home

Re: How To Theme The Cinnamon Taskbar Panel and Window List

Postby Zorba on Wed Jan 08, 2014 8:14 pm

1- You can use gcolor2 for colour codes which is in your software repostory if you are runnig Linux Mint or UBuntu. Simply run :
Code: Select all
sudo apt-get install gcolor2


Image

2- You can use any backgroud image for the panel by simply adding the below code to
Code: Select all
#panel {
in the
Code: Select all
Panel (panel.js)

Code: Select all
background-image: url('panel.png');
then define your
Code: Select all
panelLeft,#panelRight


and a sample
Code: Select all
* Panel (panel.js)
would look like this:
Code: Select all
#panel {
    color: #ffffff;
   background-image: url('panel.png');   
    font-size: 9pt;
    font-weight: normal;
    height: 30px;
   border-top: 1px;
        box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.86);
}
#panelLeft,#panelRight  {
    background-gradient-start: rgba(199,253,122,1);
    background-gradient-end: rgba(122,154,76,1);
    background-gradient-direction: vertical;
    box-shadow: 0px 0px 5px 5px #09B591;
}
#panelLeft   {
   border-radius: 0px 30px 0px 0px;
/*   border-right: 10px;*/
}
#panelRight   {
   border-radius: 30px 0px 0px 0px;
/*   border-left: 10px;*/
}
#panelCenter {
   border: 2px transparent;
   padding-left: 1px;
   padding-right: 1px;
}


#panelLeft, #panelCenter, #panelRight {
    spacing: 3px;
}

#panelLeft:dnd {
    background-gradient-direction: vertical;
   background-gradient-start: rgba(255,0,0,0.5);
   background-gradient-end: rgba(255,0,0,0.2);       
}

#panelCenter:dnd {
    background-gradient-direction: vertical;
   background-gradient-start: rgba(0,255,0,0.5);
   background-gradient-end: rgba(0,255,0,0.2);       
}

#panelRight:dnd {
    background-gradient-direction: vertical;
   background-gradient-start: rgba(0,0,255,0.5);
   background-gradient-end: rgba(0,0,255,0.2);       
}

#panelLeft:ltr {
    padding-right: 5px;
}

#panelLeft:rtl {
    padding-left: 5px;
}

#panelRight:ltr {
    padding-left: 5px;
    spacing: 0px;
}

#panelRight:rtl {
    padding-right: 5px;
    spacing: 0px;
}

.panel-top {
}

.panel-bottom {
}

.panel-status-button {
    border: 0px solid rgba(0,0,0,0);
    -natural-hpadding: 3px;
    -minimum-hpadding: 3px;
    font-weight: bold;
    color: rgba(200,200,200,1);   
    height: 22px;   
}

.panel-status-button:hover {
    color: white;
   background-gradient-direction: vertical;
   background-gradient-start: rgba(0,0,0,0);
   background-gradient-end: rgba(9,181,145,0.5);
}

.panel-status-button:active {
    color: white;
    background-gradient-direction: vertical;
    background-gradient-start: rgba(30,30,30,1);
    background-gradient-end: rgba(50,50,50,1);
}

.system-status-icon {
   padding-left: 0px;
   padding-right: 0px;   
   spacing: 0px;
   margin: 0px;
}

#appMenu {
    spacing: 4px;
}

.panel-button #appMenuIcon {
    app-icon-bottom-clip: 1px;
}

.panel-button:active #appMenuIcon,
.panel-button:checked #appMenuIcon,
.panel-button:focus #appMenuIcon {
    app-icon-bottom-clip: 2px;
}

.panel-button {
    -natural-hpadding: 6px;
    -minimum-hpadding: 2px;
    font-weight: bold;
    color: rgba(200,200,200,1);
    transition-duration: 100;
}

.panel-button:hover {
    color: white;
}

.panel-button:active,
.panel-button:overview,
.panel-button:focus {
    color: white;
    background-gradient-direction: vertical;
    background-gradient-start: rgba(30,30,30,1);
    background-gradient-end: rgba(50,50,50,1);
}

.panel-button:active > .system-status-icon,
.panel-button:checked > .system-status-icon,
.panel-button:focus > .system-status-icon {
    icon-shadow: black 0px 2px 2px;
}

.panel-menu {
}

.popup-menu-item-dot {

}

.system-status-icon {
    icon-size: 1.14em;
}


Image



or

Code: Select all
border-image: url('panel.svg') 5 5 5 5 stretch;


if you want the panel to scale and take all the panel.

and a sample
Code: Select all
Panel (panel.js)
would look like this:

Code: Select all
#panel {
        border-image: url('panel.png') 5 5 5 5 stretch;
   box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.86);
    color: #000;
    font-size: 9pt;
    height: 26px;
    padding: 0px;
}

#panelLeft, #panelCenter {
    spacing: 4px;
}

#panelLeft:dnd {
    background-gradient-direction: vertical;
   background-gradient-start: rgba(255,0,0,0.05);
   background-gradient-end: rgba(255,0,0,0.2);       
}

#panelCenter:dnd {
    background-gradient-direction: vertical;
   background-gradient-start: rgba(0,255,0,0.05);
   background-gradient-end: rgba(0,255,0,0.2);       
}

#panelRight:dnd {
    background-gradient-direction: vertical;
   background-gradient-start: rgba(0,0,255,0.05);
   background-gradient-end: rgba(0,0,255,0.2);       
}

#panelLeft:ltr {
    padding-right: 4px;
}

#panelLeft:rtl {
    padding-left: 4px;
}

#panelRight:ltr {
    padding-left: 0px;
    spacing: 0px;
}

#panelRight:rtl {
    padding-right: 0px;
    spacing: 0px;
}

.panel-top {
}

.panel-bottom {
}

.panel-status-button {
    border: 0px solid rgba(0,0,0,0);
    -natural-hpadding: 3px;
    -minimum-hpadding: 3px;
    font-weight: bold;
    color: rgba(200,200,200,1);   
    height: 22px;   
}

.panel-status-button:hover {
    color: white;
    border-radius: 2px;
}

.panel-status-button:active {
    color: white;
    background-gradient-direction: vertical;
    background-gradient-start: rgba(30,30,30,1);
    background-gradient-end: rgba(50,50,50,1);
}

.system-status-icon {
   padding-left: 0px;
   padding-right: 0px;   
   spacing: 0px;
   margin: 0px;
}

#appMenu {
    spacing: 4px;
}

.panel-button #appMenuIcon {
    app-icon-bottom-clip: 1px;
}

.panel-button:active #appMenuIcon,
.panel-button:checked #appMenuIcon,
.panel-button:focus #appMenuIcon {
    app-icon-bottom-clip: 2px;
}

.panel-button {
    -natural-hpadding: 6px;
    -minimum-hpadding: 2px;
    font-weight: bold;
    color: rgba(200,200,200,1);
    transition-duration: 100;
}

.panel-button:hover {
    color: white;
}

.panel-button:active,
.panel-button:overview,
.panel-button:focus {
    color: white;
    background-gradient-direction: vertical;
    background-gradient-start: rgba(30,30,30,1);
    background-gradient-end: rgba(50,50,50,1);
}

.panel-button:active > .system-status-icon,
.panel-button:checked > .system-status-icon,
.panel-button:focus > .system-status-icon {
    icon-shadow: black 0px 2px 2px;
}

.panel-menu {
}

.popup-menu-item-dot {

}

.system-status-icon {
    icon-size: 1.14em;
}


Image
Last edited by Zorba on Wed Jan 08, 2014 9:12 pm, edited 3 times in total.
Image
User avatar
Zorba
Level 8
Level 8
 
Posts: 2268
Joined: Tue May 29, 2012 10:12 pm
Location: Tunisia

Re: How To Theme The Cinnamon Taskbar Panel and Window List

Postby Zorba on Wed Jan 08, 2014 8:31 pm

to edit the effect you see when you move your mouse on the menu list (hover effect) just edit this:
Code: Select all
.window-list-item-box:hover
and you can use a PNG for that too like this:

Code: Select all
.window-list-item-box:hover  {     
     border-image: url("hover-1.png") 6;
     transition-duration: 150;
}


Image
Image
User avatar
Zorba
Level 8
Level 8
 
Posts: 2268
Joined: Tue May 29, 2012 10:12 pm
Location: Tunisia

Re: How To Theme The Cinnamon Taskbar Panel and Window List

Postby austin.texas on Thu Jan 09, 2014 8:02 am

Very nice! Brahim. Thanks!
One thing to mention is, as hexdef101 noted, "you can use background-image instead of border-image in most versions of cinnamon, but it doesn't work right in LM14.
Border-image always works - up to LM16. That may change in later versions."
Mint 17 Cinnamon (64 bit), Quad core AMD A8-3870 with Radeon HD Graphics 6550D, 8GB DDR3, Ralink RT2561/RT61 802.11g PCI
Microsoft-free environment since 1996

To help Linux Mint with a donation, please visit http://www.linuxmint.com/donors.php
User avatar
austin.texas
Level 9
Level 9
 
Posts: 2629
Joined: Tue Nov 17, 2009 3:57 pm
Location: at /home

Re: How To Theme The Cinnamon Taskbar Panel and Window List

Postby Zorba on Fri Jan 10, 2014 11:49 am

Does anyone know how to create the below panel with css codes :D That's our next challenge :D


Image

Image

Image
Image
User avatar
Zorba
Level 8
Level 8
 
Posts: 2268
Joined: Tue May 29, 2012 10:12 pm
Location: Tunisia

Re: How To Theme The Cinnamon Taskbar Panel and Window List

Postby Zorba on Fri Jan 10, 2014 3:03 pm

I'm almost there. I have downloaded Zorin OS 8 RC and installed it and I got their gnome-shell.css and below it is:
Code: Select all
/* Copyright 2009, Red Hat, Inc.
 *
 * Portions adapted from Mx's data/style/default.css
 *   Copyright 2009 Intel Corporation
 *
 * This program is free software; you can redistribute it and/or modify it
 * under the terms and conditions of the GNU Lesser General Public License,
 * version 2.1, as published by the Free Software Foundation.
 *
 * This program is distributed in the hope it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE.  See the GNU Lesser General Public License for
 * more details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with this program; if not, write to the Free Software Foundation,
 * Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA.
 */

/* Text Styles */

/* default text style */
stage {
    font-family: cantarell, sans-serif;
    font-size: 11pt;
    color: white;
}

/* links */
.shell-link {
    color: #0000ff;
    text-decoration: underline;
}

.shell-link:hover {
    color: #0000e0;
}

/* small */
.app-well-menu,
.run-dialog-error-label {
    font-size: 9pt;
}

/* small bold */
.dash-label,
.window-caption,
.switcher-list,
.app-well-app > .overview-icon,
.show-apps > .overview-icon,
.grid-search-result .overview-icon {
    font-size: 9pt;
    font-weight: bold;
}

/* Scroll Bars */

StScrollBar {
    padding: 0px;
}

StScrollView.vfade {
    -st-vfade-offset: 68px;
}

StScrollView.hfade {
    -st-hfade-offset: 68px;
}

StScrollView StScrollBar {
    min-width: 14px;
    min-height: 14px;
}

StScrollBar StBin#trough {
    background-color: rgba(0,0,0,0.3);
    border-radius: 8px;
}

StScrollBar StButton#vhandle {
    background-color: #5d6464;
    border: 2px solid #242424;
    border-radius: 8px;
}

StScrollBar StButton#hhandle {
    background-color: #5d6464;
    border: 2px solid #242424;
    border-radius: 8px;
}

StScrollBar StButton#hhandle:hover,
StScrollBar StButton#vhandle:hover {
    background-color: #777d7c;
}

StScrollBar StButton#hhandle:active,
StScrollBar StButton#vhandle:active {
    background-color: #3465a4;
}

/* Check Boxes */

.check-box ShellGenericContainer {
    spacing: .8em;
}

.check-box StBin {
    width: 24px;
    height: 22px;
    background-image: url("checkbox-off.svg");
}

.check-box:focus StBin {
    background-image: url("checkbox-off-focused.svg");
}

.check-box:checked StBin {
    background-image: url("checkbox.svg");
}

.check-box:focus:checked StBin {
    background-image: url("checkbox-focused.svg");
}

/* PopupMenu */

.popup-menu-boxpointer,
.candidate-popup-boxpointer {
    -arrow-border-radius: 8px;
    -arrow-background-color: rgba(0,0,0,0.9);
    -arrow-border-width: 2px;
    -arrow-border-color: #a5a5a5;
    -arrow-base: 24px;
    -arrow-rise: 11px;
}

.popup-menu {
    min-width: 200px;
}

.popup-submenu-menu-item:open {
    background-color: #4c4c4c;
}

.popup-sub-menu {
    background-gradient-start: rgba(80,80,80,0.3);
    background-gradient-end: rgba(80,80,80,0.7);
    background-gradient-direction: vertical;
    box-shadow: inset 0px 2px 4px rgba(0,0,0,0.9);
}

.popup-sub-menu:scrolled .popup-menu-item:ltr {
    padding-right: 0em;
}

.popup-sub-menu:scrolled .popup-menu-item:rtl {
    padding-left: 0em;
}

.popup-sub-menu StScrollBar {
    padding: 4px;
}

.popup-sub-menu StScrollBar StBin#trough {
    border-width: 0px;
}

.popup-sub-menu StScrollBar StBin#vhandle {
    background-color: #4c4c4c;
    border-width: 0px;
}

.popup-combo-menu {
    background-color: rgba(0,0,0,0.9);
    padding: 1em 0em;
    border: 1px solid #5f5f5f;
    border-radius: 9px;
}

/* The remaining popup-menu sizing is all done in ems, so that if you
 * override .popup-menu.font-size, everything else will scale with it.
 */
.popup-menu-content {
    padding: 1em 0em;
}

.popup-menu-item {
    padding: .4em 1.75em;
    spacing: 1em;
}

.popup-menu-item:active {
    background-color: #4c4c4c;
}

.popup-menu-item:insensitive {
    color: #9f9f9f;
}

.popup-image-menu-item {
}

.popup-combobox-item {
    spacing: 1em;
}

.popup-separator-menu-item {
    -gradient-height: 1px;
    -gradient-start: rgba(255,255,255,0.0);
    -gradient-end: rgba(255,255,255,0.3);
    -margin-horizontal: 24px;
    height: 1px;
    padding: 8px 0px;
}

.popup-alternating-menu-item:alternate {
    font-weight: bold;
}

.popup-slider-menu-item {
    height: 1em;
    min-width: 15em;
    -slider-height: 0.3em;
    -slider-background-color: #333333;
    -slider-border-color: #5f5f5f;
    -slider-active-background-color: #76b0ec;
    -slider-active-border-color: #1f6dbc;
    -slider-border-width: 1px;
    -slider-handle-radius: 0.5em;
}

.popup-device-menu-item {
    spacing: .5em;
}

.popup-status-menu-item {
    font-weight: normal;
    color: #999;
}

.popup-inactive-menu-item, .popup-inactive-menu-item:insensitive {
    color: white;
}

.popup-subtitle-menu-item, .popup-subtitle-menu-item:insensitive {
    font-weight: bold;
    color: white;
}

.popup-menu-icon {
    icon-size: 1.09em;
}

.popup-battery-percentage {
    padding-left: 24px;
}

/* Switches */
.toggle-switch {
    width: 65px;
    height: 22px;
}

.toggle-switch-us {
    background-image: url("toggle-off-us.svg");
    background-size: contain;
}
.toggle-switch-us:checked {
    background-image: url("toggle-on-us.svg");
    background-size: contain;
}

.toggle-switch-intl {
    background-image: url("toggle-off-intl.svg");
    background-size: contain;
}
.toggle-switch-intl:checked {
    background-image: url("toggle-on-intl.svg");
    background-size: contain;
}

.nm-menu-item-icons {
    spacing: .5em;
}

/* Buttons */

.candidate-page-button,
.notification-button,
.notification-icon-button,
.hotplug-notification-item,
.hotplug-resident-eject-button,
.modal-dialog-button,
.app-view-control {
    border: 1px solid #8b8b8b;
    background-gradient-direction: vertical;
    background-gradient-start: rgba(255, 255, 255, 0.2);
    background-gradient-end: rgba(255, 255, 255, 0);
}

.modal-dialog-button {
    font-weight: bold;
}

.candidate-page-button:hover,
.notification-button:hover,
.notification-icon-button:hover,
.hotplug-notification-item:hover,
.hotplug-resident-eject-button:hover,
.modal-dialog-button:hover {
    background-gradient-start: rgba(255, 255, 255, 0.3);
    background-gradient-end: rgba(255, 255, 255, 0.1);
}

.notification-button:focus,
.notification-icon-button:focus,
.hotplug-notification-item:focus,
.modal-dialog-button:focus,
.app-view-control:focus {
    border-width: 2px;
}

.app-view-control:focus {
    padding: 3px;
}

.app-view-control:first-child:ltr:focus,
.app-view-control:last-child:rtl:focus {
    border-right-width: 1px;
}

.candidate-page-button:active,
.candidate-page-button:pressed,
.notification-button:active,
.notification-icon-button:active,
.hotplug-notification-item:active,
.hotplug-resident-eject-button:active,
.modal-dialog-button:active,
.modal-dialog-button:pressed,
.app-view-control:checked {
    background-gradient-start: rgba(255, 255, 255, 0);
    background-gradient-end: rgba(255, 255, 255, 0.2);
}

.candidate-page-button:insensitive,
.notification-button:insensitive,
.notification-icon-button:insensitive,
.modal-dialog-button:insensitive {
    border-color: #666666;
    color: #9f9f9f;
    background-gradient-direction: none;
    background-color: rgba(102, 102, 102, 0.15);
}

/* Common radii */

#searchEntry,
.modal-dialog-button,
.notification-button,
.hotplug-notification-item,
.app-view-controls {
    border-radius: 18px;
}

.app-view-control:first-child:ltr,
.app-view-control:last-child:rtl {
    border-radius: 18px 0px 0px 18px;
    border-right-width: 0px;
}

.app-view-control:last-child:ltr,
.app-view-control:first-child:rtl {
    border-radius: 0px 18px 18px 0px;
}

/* Entries */

#searchEntry,
.notification StEntry,
.modal-dialog StEntry {
    color: rgb(64, 64, 64);
    caret-color: rgb(64, 64, 64);
    font-size: 12pt;
    caret-size: 1px;
    selected-color: white;
    padding: 4px 12px;
}

#searchEntry,
.run-dialog-entry,
.notification StEntry {
    border: 2px solid rgba(245,245,245,0.2);
    background-gradient-start: rgba(5,5,6,0.1);
    background-gradient-end: rgba(254,254,254,0.1);
    background-gradient-direction: vertical;
    transition-duration: 300ms;
    box-shadow: inset 0px 2px 4px rgba(0,0,0,0.6);
}

#searchEntry:focus,
#searchEntry:hover,
.notification StEntry:focus,
.modal-dialog StEntry {
    border: 2px solid rgb(136,138,133);
    background-gradient-start: rgb(200,200,200);
    background-gradient-end: white;
    background-gradient-direction: vertical;
    box-shadow: inset 0px 2px 4px rgba(0,0,0,0.6);
}

.notification StEntry:focus,
.modal-dialog StEntry:focus {
    border: 2px solid #3465a4;
}

#searchEntry {
    border-color: rgba(245,245,245,0.3);
    color: rgb(192, 192, 192);
    caret-color: rgb(192, 192, 192);
}

#searchEntry:hover {
    color: rgb(128, 128, 128);
    caret-color: rgb(128, 128, 128);
}

#searchEntry:focus {
    color: rgb(64, 64, 64);
    caret-color: rgb(64, 64, 64);
    font-weight: bold;
    transition-duration: 0ms;
}

.notification StEntry,
.modal-dialog StEntry {
    border-radius: 5px;
    padding: 4px 4px;
}

.prompt-dialog-password-entry .capslock-warning,
.login-dialog-prompt-entry .capslock-warning {
    icon-size: 16px;
    warning-color: #999;
    padding: 0 4px;
}

.modal-dialog StEntry:insensitive {
    border-color: #666666;
    color: #9f9f9f;
    border: 2px solid #9f9f9f;
    background-gradient-direction: none;
    background-color: rgba(102, 102, 102, 0.15);
    box-shadow: inset 0 0 rgba(0,0,0,1.0);
}

/* Panel */

#panel {
    background-color: black;
    font-weight: bold;
    height: 1.86em;
}

#panel.lock-screen {
    background-color: rgba(0,0,0,0.3);
}

#panel.unlock-screen,
#panel.login-screen {
    background-color: transparent;
}

#panelLeft, #panelCenter {
    spacing: 4px;
}

#panelLeft:ltr {
    padding-right: 4px;
}

#panelLeft:rtl {
    padding-left: 4px;
}

#panelRight:ltr {
    padding-left: 4px;
}

#panelRight:rtl {
    padding-right: 4px;
}

.panel-corner {
    -panel-corner-radius: 6px;
    -panel-corner-background-color: black;
    -panel-corner-border-width: 2px;
    -panel-corner-border-color: transparent;
}

.panel-corner:active,
.panel-corner:overview,
.panel-corner:focus {
    -panel-corner-border-color: rgba(255,255,255,0.8);
}

.panel-corner.lock-screen,
.panel-corner.unlock-screen,
.panel-corner.login-screen {
    -panel-corner-background-color: transparent;
    -panel-corner-border-color: transparent;
}

#appMenu {
    spinner-image: url("process-working.svg");
    spacing: 4px;
}

/* used for the app menu header only */
.label-shadow {
    color: rgba(0,0,0,0.5);
}

.panel-button #appMenuIcon {
    app-icon-bottom-clip: 1px;
}

.panel-button:active #appMenuIcon,
.panel-button:checked #appMenuIcon,
.panel-button:focus #appMenuIcon {
    app-icon-bottom-clip: 2px;
}

.app-menu-icon {
    width: 24px;
    height: 24px;
}

.panel-button {
    -natural-hpadding: 12px;
    -minimum-hpadding: 6px;
    font-weight: bold;
    color: #ccc;
    transition-duration: 100ms;
}

#panel.unlock-screen .panel-button,
#panel.lock-screen .panel-button,
#panel.login-screen .panel-button {
    color: #e6e6e6;
}

#panel.unlock-screen .panel-button:hover,
#panel.lock-screen .panel-button:hover,
#panel.login-screen .panel-button:hover,
#panel.unlock-screen .panel-button:active,
#panel.lock-screen .panel-button:active,
#panel.login-screen .panel-button:active,
#panel.unlock-screen .panel-button:focus,
#panel.lock-screen .panel-button:focus,
#panel.login-screen .panel-button:focus {
    color: white;
}

.panel-button:hover {
    color: white;
    text-shadow: black 0px 2px 2px;
}

.panel-button:active,
.panel-button:overview,
.panel-button:focus {
    border-image: url("panel-button-border.svg") 6 10 0 2;
    background-image: url("panel-button-highlight-wide.svg");
    color: white;
    text-shadow: black 0px 2px 2px;
}

.panel-status-button:active,
.panel-status-button:checked,
.panel-status-button:focus {
    background-image: url("panel-button-highlight-narrow.svg");
}

.panel-button:active > .system-status-icon,
.panel-button:checked > .system-status-icon,
.panel-button:focus > .system-status-icon {
    icon-shadow: black 0px 2px 2px;
}

.panel-menu {
    -boxpointer-gap: 4px;
}

.panel-status-button-box {
    spacing: 4px;
}

.lock-screen-status-button-box {
    spacing: 8px;
}

/* User Menu */

#panelUserMenu {
    spacing: 4px;
}

.status-chooser {
    spacing: .4em;
}

.status-chooser .popup-menu-item,
.status-chooser-combo .popup-menu-item {
    padding: .4em;
}

.status-chooser-user-icon {
    border: 2px solid #8b8b8b;
    border-radius: 5px;
    width: 48pt;
    height: 48pt;
    background-size: contain;
}

.status-chooser-user-icon:hover {
    border: 2px solid #bbbbbb;
}

.status-chooser-user-name {
    font-weight: bold;
    font-size: 1.3em;
    min-width: 120pt;
}

.status-chooser-combo {
    border: 1px solid transparent;
}

.status-chooser-combo.popup-combo-menu {
    padding: .4em 0em;
    border-radius: 4px;
    border: 1px solid #5f5f5f;
}

.status-chooser-status-item,
.status-chooser-combo .popup-combobox-item {
    spacing: .4em;
}

.system-status-icon {
    icon-size: 1.09em;
}

/* Overview */

#overview {
    spacing: 24px;
}

.overview-controls {
    padding-bottom: 32px;
}

.workspace-thumbnails-background {
    border: 1px solid rgba(128, 128, 128, 0.4);
    border-right: 0px;
    border-radius: 9px 0px 0px 9px;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 11px 7px 11px 11px;
}

.workspace-thumbnails-background:rtl {
    border-right: 1px;
    border-left: 0px;
    border-radius: 0px 9px 9px 0px;
    padding: 11px 11px 11px 7px;
}

.workspace-thumbnails {
    spacing: 11px;
    visible-width: 32px; /* Amount visible before hovering */
}

.workspace-thumbnail-indicator {
    border: 4px solid rgba(255,255,255,0.7);
    border-radius: 4px;
    padding: 1px;
}

.window-caption {
    spacing: 25px;
    background: rgba(0,0,0,0.5);
    border-radius: 8px;
    padding: 4px 12px;
    -shell-caption-spacing: 12px;
    border: 2px solid rgba(0, 0, 0, 0);
}

.window-caption:hover {
    border: 2px solid rgba(255, 255, 255, 0);
}

.window-close, .notification-close {
    background-image: url("close-window.svg");
    background-size: 32px;
    height: 32px;
    width: 32px;
}

.window-close {
    -shell-close-overlap: 16px;
}

.window-clone-border {
    border: 4px solid rgba(255, 255, 255, 0.5);
    border-radius: 4px;
}

.notification-close {
    /* we start out in the top right of the
     * notification, inset.
     *
     * center is 32px/2 = 16px
     *
     * adjust left 2px
     * adjust down 8px */

    -shell-close-overlap-x: 14px;
    -shell-close-overlap-y: -12px;
}

.notification-close:rtl {
    /* as above, but starting out in the top left of the
     * notification. */

    -shell-close-overlap-x: -14px;
}

.window-close:rtl {
    -st-background-image-shadow: 2px 2px 6px rgba(0,0,0,0.5);
}

.window-picker {
    -horizontal-spacing: 32px;
    -vertical-spacing: 32px;
    padding-left: 32px;
    padding-right: 32px;
    padding-bottom: 48px;
}

.window-picker.external-monitor {
    padding: 32px;
}

.messages-indicator {
    color: #999999;
    height: 32px;
}

.messages-indicator-contents {
    spacing: 12px;
    padding-bottom: 12px;
}

.messages-indicator-contents:hover {
    color: white;
    text-shadow: black 0px 2px 2px;
}

.messages-indicator-highlight {
    background-gradient-start: transparent;
    background-gradient-end: #999999;
    background-gradient-direction: vertical;

    height: 6px;
}

/* Dash */

#dash {
    color: #5f5f5f;
    font-size: 9pt;
    padding: 4px 0px;
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(128, 128, 128, 0.4);
    border-left: 0px;
    border-radius: 0px 9px 9px 0px;
}

#dash:rtl {
    border-left: 1px;
    border-right: 0px;
    border-radius: 9px 0px 0px 9px;
}

.placeholder {
    background-image: url("dash-placeholder.svg");
    background-size: contain;
    height: 24px;
}

.empty-dash-drop-target {
    width: 24px;
    height: 24px;
}

/* Search Box */

#searchEntry {
    width: 320px;
}

.search-entry-icon {
    icon-size: 1em;
    color: #c0c0c0;
}

#searchEntry:hover .search-entry-icon,
#searchEntry:focus .search-entry-icon {
    color: #8d8f8a;
}

/* Search Results */

#searchResults {
    padding: 20px 10px 0px 10px;
    spacing: 18px;
}

#searchResultsBin {
    max-width: 1000px;
}

#searchResultsContent {
    padding-left: 20px;
    padding-right: 20px;
    spacing: 16px;
}

.search-section {
    /* This should be equal to #searchResultsContent spacing */
    spacing: 16px;
}

.search-section-separator {
    -gradient-height: 1px;
    -gradient-start: rgba(255,255,255,0);
    -gradient-end: rgba(255,255,255,0.5);
    -margin-horizontal: 1.5em;
    height: 1px;
}

.search-section-content {
    /* This is the space between the provider icon and the results container */
    spacing: 32px;
}

.search-statustext {
    color: #efefef;
    font-size: 2em;
    font-weight: bold;
}

.list-search-results {
    spacing: 3px;
}

.dash-label {
    border-radius: 7px;
    padding: 4px 12px;
    background-color: rgba(0,0,0,0.5);
    text-align: center;
    -x-offset: 8px;
}

/* Application Launchers, Grid and List results */

.icon-grid {
    spacing: 36px;
    -shell-grid-horizontal-item-size: 118px;
    -shell-grid-vertical-item-size: 118px;
}

.icon-grid .overview-icon {
    icon-size: 96px;
}

.app-display {
    padding: 8px;
    spacing: 20px;
}

.app-view-controls {
    padding-bottom: 32px;
}

.app-view-control {
    padding: 4px 32px;
}

.search-display > StBoxLayout,
.all-apps > StBoxLayout,
.frequent-apps > StBoxLayout {
    /* horizontal padding to make sure scrollbars or dash don't overlap content */
    padding: 0px 88px;
}

.app-folder-icon {
    padding: 5px;
}

.dash-item-container > StButton {
    padding: 4px 8px;
}

.list-search-result-content {
    spacing: 12px;
    padding: 12px;
}

.list-search-result-title {
    font-weight: bold;
    font-size: 14pt;
    color: white;
}

.list-search-result-description {
    color: #eeeeec;
}

.search-provider-icon-more {
    width: 16px;
    height: 16px;
    background-image: url("more-results.svg");
}

.app-well-app > .overview-icon,
.show-apps > .overview-icon,
.search-provider-icon,
.list-search-result,
.grid-search-result .overview-icon {
    border-radius: 4px;
    padding: 3px;
    border: 1px rgba(0,0,0,0);
    transition-duration: 100ms;
    text-align: center;
}

.app-folder-popup {
    -arrow-border-radius: 8px;
    -arrow-background-color: black;
    -arrow-base: 24px;
    -arrow-rise: 11px;
}

.app-folder-popup-bin {
    padding: 15px;
}

.app-well-app.running > .overview-icon {
    text-shadow: black 0px 2px 2px;
    background-image: url("running-indicator.svg");
    background-size: contain;
}

.app-well-app.app-folder > .overview-icon {
    background-color: rgba(0,0,0,0.5);
}

.app-well-app:hover > .overview-icon,
.show-apps:hover > .overview-icon,
.search-provider-icon:hover,
.list-search-result:hover,
.grid-search-result:hover .overview-icon {
    background-color: rgba(255,255,255,0.1);
    text-shadow: black 0px 2px 2px;
    transition-duration: 100ms;
    color:white;
}

.app-display .app-well-app > .overview-icon {
    border-radius: 10px;
}

.list-search-result:hover .list-search-result-description {
    text-shadow: rgba(0,0,0,0.8) 0px 1px 2px;
}

.show-apps {
    padding: 4px 0;
}

.show-apps-icon {
    color: #a0a0a0;
}

.show-apps:hover .show-apps-icon {
    color: white;
}

.app-well-app:checked > .overview-icon,
.app-well-app:active > .overview-icon,
.show-apps:checked > .overview-icon,
.show-apps:active > .overview-icon {
    background-gradient-start: rgba(255, 255, 255, .05);
    background-gradient-end: rgba(255, 255, 255, .15);
    background-gradient-direction: vertical;
    border-radius: 4px;
    box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 1);
    transition-duration: 100ms;
}

.show-apps:checked .show-apps-icon,
.show-apps:focus .show-apps-icon {
    color: white;
    transition-duration: 100ms;
}

.app-well-app:focus > .overview-icon,
.grid-search-result:focus .overview-icon,
.show-apps:focus > .overview-icon,
.search-provider-icon:focus,
.list-search-result:focus,
.app-well-app:selected > .overview-icon,
.grid-search-result:selected .overview-icon,
.search-provider-icon:selected,
.list-search-result:selected {
    background-color: rgba(255,255,255,0.33);
}

/* LookingGlass */

#LookingGlassDialog {
    background-color: rgba(0,0,0,0.80);
    spacing: 4px;
    padding: 4px;
    border: 2px solid grey;
    border-radius: 4px;
}

#LookingGlassDialog > #Toolbar {
    border: 1px solid grey;
    border-radius: 4px;
}

#LookingGlassDialog .labels {
    spacing: 4px;
}

#LookingGlassDialog .notebook-tab {
    -natural-hpadding: 12px;
    -minimum-hpadding: 6px;
    font-weight: bold;
    color: #ccc;
    transition-duration: 100ms;
    padding-left: .3em;
    padding-right: .3em;
}

#LookingGlassDialog .notebook-tab:hover {
    color: white;
    text-shadow: black 0px 2px 2px;
}

#LookingGlassDialog .notebook-tab:selected {
    border-image: url("panel-button-border.svg") 10 10 0 2;
    background-image: url("panel-button-highlight-wide.svg");
    color: white;
    text-shadow: black 0px 2px 2px;
}

#LookingGlassDialog .lg-inspector-title {
    font-weight: bold;
    padding-bottom: 8px;
}

.lg-dialog StEntry {
    selection-background-color: #bbbbbb;
    selected-color: #333333;
}

.lg-completions-text {
    font-size: .9em;
    font-style: italic;
}

.lg-obj-inspector-title {
    spacing: 4px;
}

.lg-obj-inspector-button {
    border: 1px solid gray;
    padding: 4px;
    border-radius: 4px;
}

.lg-obj-inspector-button:hover {
    border: 1px solid #ffffff;
}

.lg-dialog .shell-link {
    color: #999999;
}

.lg-dialog .shell-link:hover {
    color: #dddddd;
}

#LookingGlassDialog StBoxLayout#EvalBox {
    padding: 4px;
    spacing: 4px;
}

#LookingGlassDialog StBoxLayout#ResultsArea {
    spacing: 4px;
}

#lookingGlassExtensions {
    padding: 4px;
}

.lg-extension-list {
    padding: 4px;
    spacing: 6px;
}

.lg-extension {
    border: 1px solid #6f6f6f;
    border-radius: 4px;
    padding: 4px;
}

.lg-extension-name {
    font-weight: bold;
}

.lg-extension-meta {
    spacing: 6px;
}

#LookingGlassPropertyInspector {
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid grey;
    border-radius: 4px;
    padding: 6px;
}

/* Calendar popup */

#calendarEventsArea {
    /* this is the width of the second column of the popup */
    min-width: 320px;
}

#calendarArea {
    /* this is the total width of the popup */
    max-width: 720px;
}

.calendar-vertical-separator {
    -stipple-width: 1px;
    -stipple-color: #505050;
    width: 0.3em;
}

#calendarPopup .calendar {
    padding: 10px;
}

.calendar {
    padding: .4em 1.75em .8em 1.75em;
    spacing-rows: 0px;
    spacing-columns: 0px;
}

.calendar-month-label {
    color: #888a85;
    font-size: 9.5pt;
    font-weight: bold;
    padding-bottom: 8px;
    padding-top: 8px;
}

.calendar-change-month-back {
    width: 18px;
    height: 12px;
    background-image: url("calendar-arrow-left.svg");
    border-radius: 4px;
}

.calendar-change-month-back:rtl {
    background-image: url("calendar-arrow-right.svg");
}

.calendar-change-month-back:hover {
    background-color: #999999;
}
.calendar-change-month-back:active {
    background-color: #aaaaaa;
}

.calendar-change-month-forward {
    width: 18px;
    height: 12px;
    background-image: url("calendar-arrow-right.svg");
    border-radius: 4px;
}

.calendar-change-month-forward:rtl {
    background-image: url("calendar-arrow-left.svg");
}

.calendar-change-month-forward:hover {
    background-color: #999999;
}
.calendar-change-month-forward:active {
    background-color: #aaaaaa;
}

.datemenu-date-label {
    padding: .4em 1.7em;
    font-weight: bold;
    text-align: center;
    color: #eeeeec;
}

.calendar-day-base {
    font-size: 9pt;
    text-align: center;
    width: 2.4em;
    height: 2.4em;
}

.calendar-day-base:hover {
    background-color: #777777;
}

.calendar-day-base:active {
    font-size: 9pt;
    background-color: #555555;
    color: white;
}

.calendar-day-heading {
    color: #888a85;
    padding-top: .2em;
    height: 1.7em;
}

.calendar-week-number {
    color: #babdb6;
    font-weight: bold;
}

/* Hack used in lieu of border-collapse - see calendar.js */
.calendar-day {
    border: 1px solid #505050;
    color: #babdb6;
    border-top-width: 0;
    border-left-width: 0;
}

.calendar-day-top {
    border-top-width: 1px;
}

.calendar-day-left {
    border-left-width: 1px;
}

.calendar-work-day {
}

.calendar-nonwork-day {
    background-color: rgba(128, 128, 128, .1);
}

.calendar-today {
    background-image: url("calendar-today.svg");
    text-shadow: black 0px 2px 2px;
    font-weight: bold;
}

.calendar-day-with-events {
    font-weight: bold;
    color: white;
}

.calendar-other-month-day {
    color: #333333;
}

.events-header-vbox {
    spacing: 6pt;
    padding-right: .5em;
}

.events-header-vbox:rtl {
    padding-left: .5em;
}

.events-header-hbox {
    padding: 0.3em 1.4em;
}

.events-day-header {
    font-weight: bold;
    color: #999999;
    padding: 0.4em 1.4em 0em 1.4em;
}

.events-day-header:rtl {
    padding: 0em 1.4em 0.4em 1.4em;
}

.events-day-dayname {
    color: rgba(153, 153, 153, 1.0);
    text-align: left;
}

.events-day-dayname:rtl {
    text-align: right;
}

.events-day-time {
    color: #fff;
    text-align: right;
}

.events-day-time:rtl {
    text-align: left;
}

.events-day-task {
    color: rgba(153, 153, 153, 1.0);
}

.events-day-name-box {
    min-width: 15pt;
}

.events-time-box {
    min-width: 48pt;
    padding-right: 12pt;
}

.events-time-box:rtl {
    padding-right: 0px;
    padding-left: 12pt;
}

.events-event-box {
}

.url-highlighter {
    link-color: #ccccff;
}

/* Message Tray */
#message-tray {
    background: #2e3436 url(message-tray-background.png);
    background-repeat: repeat;
    height: 72px;
}

.message-tray-summary {
    height: 72px;
}

.no-messages-label {
    font-family: cantarell, sans-serif;
    font-size: 11pt;
    color: #999999;
}

.notification {
    border-radius: 10px 10px 0px 0px;
    background: rgba(0,0,0,0.9);
    padding: 8px 8px 4px 8px;
    spacing-rows: 4px;
    spacing-columns: 10px;
}

.notification, #notification-container {
    font-size: 11pt;
    width: 34em;
}

.notification.multi-line-notification {
    padding-bottom: 8px;
}

.notification-unexpanded {
    /* We want to force the actor at a specific size, irrespective
       of its minimum and preferred size, so we override both */
    min-height: 36px;
    height: 36px;
}

/* We use row-span = 2 for the image cell, which prevents its height preferences to be
   taken into account during allocation, so its height ends up being limited by the height
   of the content in the other rows. To avoid showing a stretched image, we set the minimum
   height of the table to be ICON_SIZE + IMAGE_SIZE + spacing-rows = 24 + 125 + 10 = 159 */
.notification-with-image {
    min-height: 159px;
}

.summary-boxpointer {
    -arrow-border-radius: 15px;
    -arrow-background-color: rgba(0,0,0,0.9);
    -arrow-base: 36px;
    -arrow-rise: 18px;
    color: white;
    -boxpointer-gap: 4px;
}

.summary-boxpointer .notification {
    border-radius: 9px;
    background: rgba(0,0,0,0) !important;
    padding-bottom: 12px;
}

.summary-boxpointer #summary-right-click-menu {
    padding-top: 12px;
    padding-bottom: 12px;
}

.summary-notification-stack-scrollview {
    max-height: 18em;
    padding-top: 8px;
    padding-bottom: 8px;
}

.summary-notification-stack-scrollview:ltr {
    padding-right: 8px;
}

.summary-notification-stack-scrollview:rtl {
    padding-left: 8px;
}

.notification-scrollview {
    max-height: 10em;
    -st-vfade-offset: 24px;
}

.notification-scrollview:ltr > StScrollBar {
    padding-left: 6px;
}

.notification-scrollview:rtl > StScrollBar {
    padding-right: 6px;
}

.notification-body {
    spacing: 5px;
}

.notification-actions {
    padding-top: 18px;
    spacing: 10px;
}

.notification-button {
    -st-natural-width: 140px;
    padding: 4px 4px 5px;
}

.notification-button:focus {
    -st-natural-width: 138px;
    padding: 3px 4px 4px;
}

.notification-icon-button {
    border-radius: 5px;
    padding: 5px;
}

.notification-icon-button:focus {
    padding: 4px;
}

.notification-icon-button > StIcon {
    icon-size: 16px;
    padding: 8px;
}

.secondary-icon {
    icon-size: 1.09em;
}

.hotplug-transient-box {
    spacing: 6px;
    padding: 2px 72px 2px 12px;
}

.hotplug-notification-item {
    padding: 2px 10px;
}

.hotplug-notification-item:focus {
    padding: 1px 71px 1px 11px;
}

.hotplug-notification-item-icon {
    icon-size: 24px;
    padding: 2px 5px;
}

.hotplug-resident-box {
    spacing: 8px;
}

.hotplug-resident-mount {
    spacing: 8px;
    border-radius: 4px;

    color: #ccc;
}

.hotplug-resident-mount:hover {
    background-gradient-direction: horizontal;
    background-gradient-start: rgba(255, 255, 255, 0.1);
    background-gradient-end: rgba(255, 255, 255, 0);

    color: #fff;
}

.hotplug-resident-mount-label {
    color: inherit;
    padding-left: 6px;
}

.hotplug-resident-mount-icon {
    icon-size: 24px;
    padding-left: 6px;
}

.hotplug-resident-eject-icon {
    icon-size: 16px;
}

.hotplug-resident-eject-button {
    padding: 7px;
    border-radius: 5px;
    color: #ccc;
}

.chat-log-message {
    color: #888888;
}

.chat-group-sent, .chat-group-meta {
    padding: 8px 0;
}

.chat-received {
    padding-left: 4px;
}

.chat-received:rtl {
    padding-left: 0px;
    padding-right: 4px;
}

.chat-sent {
    padding-left: 18pt;
    color: #959595;
}

.chat-sent:rtl {
    padding-left: 0px;
    padding-right: 18pt;
}

.chat-meta-message {
    padding-left: 4px;
    font-size: 9pt;
    color: #bbbbbb;
}

.chat-meta-message:rtl {
    padding-left: 0px;
    padding-right: 4px;
}

.chat-notification-scrollview{
   max-height: 22em;
}

.subscription-message {
    font-style: italic;
}

.notification StEntry {
    border-radius: 4px;
}

.summary-source-button {
    padding: 6px 3px 6px 3px;
}

.summary-source-button:last-child:ltr {
    padding-right: 6px;
}

.summary-source-button:last-child:rtl {
    padding-left: 6px;
}

.summary-source-button:hover .summary-source {
    background-color: rgba(255,255,255,0.1);
}

.summary-source-button:focus .summary-source,
.summary-source-button:selected .summary-source {
    background-color: rgba(255,255,255,0.33);
}

.summary-source {
    border-radius: 4px;
    padding: 0 6px 0 6px;
    transition-duration: 100ms;
}

.summary-source-counter {
    background-image: url("summary-counter.svg");
    background-size: 2.4em;
    font-size: 10pt;
    font-weight: bold;
    height: 2.4em;
    width: 2.4em;
    -shell-counter-overlap-x: 13px;
    -shell-counter-overlap-y: 13px;
}

/* OSD */
.osd-window {
    text-align: center;
    font-weight: bold;
    spacing: 1em;
}

.osd-window .level {
    height: 0.6em;
    border-radius: 0.3em;
    background-color: rgba(190,190,190,0.2);
}

/* App Switcher */
.switcher-popup {
    padding: 8px;
    spacing: 16px;
}

.osd-window,
.switcher-list {
    background: rgba(0,0,0,0.8);
    border: 1px solid rgba(128,128,128,0.40);
    border-radius: 24px;
    padding: 20px;
}

.switcher-list-item-container {
    spacing: 8px;
}

.thumbnail-scroll-gradient-left {
    background-gradient-direction: horizontal;
    background-gradient-start: rgba(51, 51, 51, 1.0);
    background-gradient-end: rgba(51, 51, 51, 0);
    border-radius: 24px;
    border-radius-topright: 0px;
    border-radius-bottomright: 0px;
    width: 60px;
}

.thumbnail-scroll-gradient-right {
    background-gradient-direction: horizontal;
    background-gradient-start: rgba(51, 51, 51, 0);
    background-gradient-end: rgba(51, 51, 51, 1.0);
    border-radius: 24px;
    border-radius-topleft: 0px;
    border-radius-bottomleft: 0px;
    width: 60px;
}

.switcher-list .item-box {
    padding: 8px;
    border-radius: 8px;
}

.switcher-list .item-box:outlined {
    padding: 6px;
    border: 2px solid rgba(85,85,85,1.0);
}

.switcher-list .item-box:selected {
    background: rgba(255,255,255,0.33);
}

.switcher-list .thumbnail-box {
    padding: 2px;
    spacing: 4px;
}

.switcher-list .thumbnail {
    width:  256px;
}

.switcher-list .separator {
    width: 1px;
    background: rgba(255,255,255,0.33);
}

.ripple-box {
    width: 52px;
    height: 52px;
    background-image: url("corner-ripple-ltr.png");
    background-size: contain;
}

.ripple-box:rtl {
    background-image: url("corner-ripple-rtl.png");
}

.switcher-arrow {
    border-color: rgba(0,0,0,0);
    color: #808080;
}

.switcher-arrow:highlighted {
    border-color: rgba(0,0,0,0);
    color: white;
}

/* Workspace Switcher */
.workspace-switcher-group {
    padding: 12px;
}

.workspace-switcher-container {
    background: rgba(0,0,0,0.8);
    border: 1px solid rgba(128,128,128,0.40);
    border-radius: 24px;
    padding: 20px;
}

.workspace-switcher {
    background: transparent;
    border: 0px;
    border-radius: 0px;
    padding: 0px;
    spacing: 8px;
}

.ws-switcher-active-up {
    height: 100px;
    border: 0px;
    background: rgba(255,255,255,0.5);
    background-image: url("ws-switch-arrow-up.png");
    border-radius: 8px;
}

.ws-switcher-active-down {
    height: 100px;
    border: 0px;
    background: rgba(255,255,255,0.5);
    background-image: url("ws-switch-arrow-down.png");
    border-radius: 8px;
}

.ws-switcher-box {
    height: 96px;
    border: 2px solid rgba(85,85,85,0.5);
    background: transparent;
    border-radius: 8px;
}

/* Modal Dialogs */

/* Dialog Subject Text Style */
.show-processes-dialog-subject,
.mount-question-dialog-subject,
.end-session-dialog-subject {
    font-size: 14pt;
    font-weight: bold;
    color: #999999;
}

.modal-dialog {
    border-radius: 24px;
    background-color: rgba(0.0, 0.0, 0.0, 0.9);
    border: 2px solid #868686;

    padding-right: 42px;
    padding-left: 42px;
    padding-bottom: 30px;
    padding-top: 30px;
}

.modal-dialog-button-box {
    spacing: 21px;
    padding-top: 50px;
}

.modal-dialog-button {
    margin-left: 10px;
    margin-right: 10px;
    padding: 4px 32px 5px;
}

.modal-dialog-button:focus {
    padding: 3px 31px 4px;
}

/* Run Dialog */

.run-dialog-label {
    font-size: 12pt;
    font-weight: bold;
    color: #999999;
    padding-bottom: .4em;
}

.run-dialog-error-box {
    padding-top: 15px;
    spacing: 5px;
}

.modal-dialog .run-dialog-entry {
    width: 20em;
}

.lightbox {
    background-color: black;
}

.flashspot {
    background-color: white;
}

/* End Session Dialog */
.end-session-dialog {
    spacing: 42px;
}

.end-session-dialog-subject {
    padding-left: 17px;
    padding-bottom: 20px;
}

.end-session-dialog-subject:rtl {
    padding-left: 0px;
    padding-right: 17px;
}

.end-session-dialog-description {
    padding-left: 17px;
    width: 28em;
}

.end-session-dialog-description:rtl {
    padding-right: 17px;
}

.end-session-dialog-logout-icon {
    border: 2px solid #8b8b8b;
    border-radius: 5px;
    width: 32px;
    height: 32px;
    background-size: contain;
}

.end-session-dialog-shutdown-icon {
    color: #bebebe;
    width: 32px;
    height: 32px;
}

.end-session-dialog-app-list {
    font-size: 10pt;
    max-height: 200px;
    padding-top: 42px;
    padding-left: 49px;
    padding-right: 32px;
}

.end-session-dialog-app-list:rtl {
    padding-right: 49px;
    padding-left: 32px;
}

.end-session-dialog-app-list-item {
    color: #ccc;
}

.end-session-dialog-app-list-item:hover {
    color: white;
}

.end-session-dialog-app-list-item:ltr {
    padding-right: 1em;
}

.end-session-dialog-app-list-item:rtl {
    padding-left: 1em;
}

.end-session-dialog-app-list-item-icon:ltr {
    padding-right: 17px;
}

.end-session-dialog-app-list-item-icon:rtl {
    padding-left: 17px;
}

.end-session-dialog-app-list-item-name {
    font-size: 10pt;
}

.end-session-dialog-app-list-item-description {
    font-size: 8pt;
    color: #444444;
}

/* ShellMountOperation Dialogs */
.shell-mount-operation-icon {
    icon-size: 48px;
}

.mount-password-reask {
    color: red;
}

.show-processes-dialog,
.mount-question-dialog {
    spacing: 24px;
}

.show-processes-dialog-subject,
.mount-question-dialog-subject {
    padding-top: 10px;
    padding-left: 17px;
    padding-bottom: 6px;
}

.mount-question-dialog-subject {
    max-width: 500px;
}

.show-processes-dialog-subject:rtl,
.mount-question-dialog-subject:rtl {
    padding-left: 0px;
    padding-right: 17px;
}

.show-processes-dialog-description,
.mount-question-dialog-description {
    padding-left: 17px;
    width: 28em;
}

.show-processes-dialog-description:rtl,
.mount-question-dialog-description:rtl {
    padding-right: 17px;
}

.show-processes-dialog-app-list {
    font-size: 10pt;
    max-height: 200px;
    padding-top: 24px;
    padding-left: 49px;
    padding-right: 32px;
}

.show-processes-dialog-app-list:rtl {
    padding-right: 49px;
    padding-left: 32px;
}

.show-processes-dialog-app-list-item {
    color: #ccc;
}

.show-processes-dialog-app-list-item:hover {
    color: white;
}

.show-processes-dialog-app-list-item:ltr {
    padding-right: 1em;
}

.show-processes-dialog-app-list-item:rtl {
    padding-left: 1em;
}

.show-processes-dialog-app-list-item-icon:ltr {
    padding-right: 17px;
}

.show-processes-dialog-app-list-item-icon:rtl {
    padding-left: 17px;
}

.show-processes-dialog-app-list-item-name {
    font-size: 10pt;
}

/* Password or Authentication Dialog */
.prompt-dialog {
    /* this is the width of the entire modal popup */
    width: 500px;
}

.prompt-dialog-main-layout {
    spacing: 24px;
    padding: 10px;
}

.prompt-dialog-message-layout {
    spacing: 16px;
}

.prompt-dialog-headline {
    font-size: 12pt;
    font-weight: bold;
    color: #666666;
}

.prompt-dialog-password-box {
    spacing: 1em;
    padding-bottom: 1em;
}

.prompt-dialog-error-label {
    font-size: 10pt;
    color: #ffff00;
    padding-bottom: 8px;
}

.prompt-dialog-info-label {
    font-size: 10pt;
    padding-bottom: 8px;
}

.hidden {
    color: rgba(0,0,0,0);
}

.prompt-dialog-null-label {
    font-size: 10pt;
    padding-bottom: 8px;
}

/* Polkit Dialog */

.polkit-dialog-user-layout {
    padding-left: 10px;
    spacing: 10px;
}

.polkit-dialog-user-layout:rtl {
    padding-left: 0px;
    padding-right: 10px;
}

.polkit-dialog-user-root-label {
    color: #ff0000;
}

.polkit-dialog-user-icon {
    border: 2px solid #8b8b8b;
    border-radius: 5px;
    background-size: contain;
    width: 48px;
    height: 48px;
}

/* Network Agent Dialog */

.network-dialog-secret-table {
    spacing-rows: 15px;
    spacing-columns: 1em;
}

.keyring-dialog-control-table {
    spacing-rows: 15px;
    spacing-columns: 1em;
}

/* Magnifier */

.magnifier-zoom-region {
    border: 2px solid rgba(128, 0, 0, 255);
}

.magnifier-zoom-region.full-screen {
    border-width: 0px;
}

/* On-screen Keyboard */

#keyboard {
    background: rgba(0,0,0,0.8);
}

.keyboard-layout {
    spacing: 10px;
    padding: 10px;
}

.keyboard-row {
    spacing: 15px;
}

.keyboard-key {
    min-height: 30px;
    min-width: 30px;
    background-gradient-start: rgba(255,245,245,0.4);
    background-gradient-end: rgba(105,105,105,0.1);
    background-gradient-direction: vertical;
    font-size: 14pt;
    font-weight: bold;
    border-radius: 10px;
    border: 2px solid #a0a0a0;
    color: white;
}

.keyboard-key:grayed {
   color: #808080;
   border-color: #808080;
}

.keyboard-key:checked,
.keyboard-key:hover {
    background: #303030;
    border: 3px solid white;
}

.keyboard-key:active {
    background: #808080;
}

.keyboard-subkeys {
    color: white;
    padding: 5px;
    -arrow-border-radius: 10px;
    -arrow-background-color: #090909;
    -arrow-border-width: 2px;
    -arrow-border-color: white;
    -arrow-base: 20px;
    -arrow-rise: 10px;
    -boxpointer-gap: 5px;
}

/* IBus Candidate Popup */

.candidate-popup-content {
    padding: 0.5em;
    spacing: 0.3em;
}

.candidate-index {
    padding: 0 0.5em 0 0;
    color: #cccccc;
}

.candidate-box {
    padding: 0.3em 0.5em 0.3em 0.5em;
}

.candidate-box:selected {
    border-radius: 4px;
    background-color: rgba(255,255,255,0.2);
}

.candidate-box:hover {
    border-radius: 4px;
    background-color: rgba(255,255,255,0.1);
}
.candidate-page-button-box {
    height: 2em;
    width: 80px;
}

.vertical .candidate-page-button-box {
    padding-top: 0.5em;
}

.horizontal .candidate-page-button-box {
    padding-left: 0.5em;
}

.candidate-page-button-previous {
    border-radius: 4px 0px 0px 4px;
}

.candidate-page-button-next {
    border-radius: 0px 4px 4px 0px;
}

.candidate-page-button-icon {
    icon-size: 1em;
}

/* Login Dialog */

.login-dialog-banner {
    font-size: 10pt;
    font-weight: bold;
    text-align: center;
    color: #666666;
    padding-bottom: 1em;
}

.login-dialog-title {
    font-size: 14pt;
    font-weight: bold;
    color: #666666;
    padding-bottom: 2em;
}

.login-dialog {
    /* Reset border and background */
    border: none;
    background-color: transparent;

    padding-bottom: 80px;
    padding-top: 80px;

    border-radius: 16px;
    min-height: 150px;
    max-height: 700px;
    min-width: 350px;
}

.login-dialog-prompt-login-hint-message {
    font-size: 10.5pt;
}

.login-dialog-user-list-view {
    -st-vfade-offset: 1em;
}

.login-dialog-user-list {
    spacing: 12px;
    padding: .2em;
}

.login-dialog-user-list-item {
    border-radius: 10px;
    padding: .2em;
}

.login-dialog-user-list-item:ltr {
    padding-right: 1em;
}

.login-dialog-user-list-item:rtl {
    padding-left: 1em;
}

.login-dialog-user-list-item .login-dialog-user-list-item-name {
    font-size: 20pt;
    padding-left: 1em;
}

.login-dialog-user-list:expanded .login-dialog-user-list-item {
    color: #666666;
}

.login-dialog-user-list-item,
.login-dialog-user-list-item:hover .login-dialog-user-list-item-name,
.login-dialog-user-list:expanded .login-dialog-user-list-item:focus .login-dialog-user-list-item-name,
.login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in {
    color: white;
    text-shadow: black 0px 2px 2px;
}

.login-dialog-user-list-item:hover {
    background-color: rgba(255,255,255,0.1);
}

.login-dialog-user-list:expanded .login-dialog-user-list-item:focus {
    background-color: rgba(255,255,255,0.33);
}

.login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in {
    background-image: url("logged-in-indicator.svg");
    background-size: contain;
}

.login-dialog-user-list-item-text-box {
    padding: 0 0.5em;
}

.login-dialog-user-list-item .login-dialog-timed-login-indicator {
    background-color: rgba(0,0,0,0.0);
    height: 2px;
}

.login-dialog-user-list-item:focus .login-dialog-timed-login-indicator {
    background-color: #8b8b8b;
}

.login-dialog-user-list-item-icon {
    border: 2px solid #8b8b8b;
    border-radius: 8px;
    width: 64px;
    height: 64px;
}

.login-dialog-not-listed-label {
    font-size: 10.5pt;
    font-weight: bold;
    color: #666666;
    padding-top: 1em;
    padding-left: 2px;
}

.login-dialog-not-listed-button:focus .login-dialog-not-listed-label,
.login-dialog-not-listed-button:hover .login-dialog-not-listed-label {
    color: #E8E8E8;
}

.login-dialog-username {
    font-size: 16pt;
    font-weight: bold;
    text-align: left;
    padding-left: 15px;
    text-shadow: black 0px 4px 3px 0px;
}

.login-dialog-prompt-layout {
    padding-top: 24px;
    padding-bottom: 12px;
    spacing: 8px;
}

.login-dialog-prompt-label {
    color: #eeeeee;
    font-size: 14px;
}

.login-dialog-prompt-entry {
    width: 15em;
}

.login-dialog-session-list,
.login-dialog-session-list-item {
    color: #babdb6;
}

.login-dialog-session-list-button:focus,
.login-dialog-session-list-button:active,
.login-dialog-session-list-button:hover,
.login-dialog-session-list-item:focus,
.login-dialog-session-list-item:hover {
    color: white;
}

.login-dialog-session-list-button {
    padding: 4px;
}

.login-dialog-session-list-scroll-view {
    padding: 6px;
}

.login-dialog-session-list-item {
    padding-bottom: 6px;
}

.login-dialog-session-list-triangle {
    padding-right: 6px;
}

.login-dialog-session-list-item-box {
    padding-left: 6px;
    spacing: 6px;
}

.login-dialog-session-list-item-dot {
    width: 10px;
    height: 10px;
}

.login-dialog-logo-bin {
    padding: 24px 0px;
}

.login-dialog .modal-dialog-button-box {
    spacing: 3px;
}

.login-dialog .modal-dialog-button {
    border-radius: 5px;
    padding: 3px 18px;
}

.login-dialog .modal-dialog-button:focus {
    padding: 2px 17px;
}

.login-dialog .modal-dialog-button:default {
    background-gradient-start: #6793c4;
    background-gradient-end: #335d8f;
    background-gradient-direction: vertical;
    border-color: #16335d;
}

.login-dialog .modal-dialog-button:default:focus {
    border: 2px solid #377fe7;
}

.login-dialog .modal-dialog-button:default:hover {
    background-gradient-start: #74a0d0;
    background-gradient-end: #436d9f;
}

.login-dialog .modal-dialog-button:default:active,
.login-dialog .modal-dialog-button:default:pressed {
    background-gradient-start: #436d9f;
    background-gradient-end: #74a0d0;
}

.login-dialog .modal-dialog-button:default:insensitive {
    border-color: #666666;
    color: #9f9f9f;
    background-gradient-direction: none;
    background-color: rgba(102, 102, 102, 0.15);
}

.login-dialog-message-warning {
    color: orange;
}

.user-widget {
    spacing: .4em;
}

.user-widget-label {
    font-size: 16pt;
    font-weight: bold;
    text-align: left;
    padding-left: 15px;
    text-shadow: black 0px 4px 3px 0px;
}

/* Screen shield */

.screen-shield-background {
    background: black;
}

#lockDialogGroup {
    background: #2e3436 url(noise-texture.png);
    background-repeat: repeat;
}

.screen-shield-arrows {
    padding-bottom: 3em;
}

.screen-shield-arrows Gjs_Arrow {
    color: white;
    width: 80px;
    height: 48px;
    -arrow-thickness: 12px;
    -arrow-shadow: 0 1px 1px rgba(0,0,0,0.4);
}

.screen-shield-contents-box {
    spacing: 48px;
}

.screen-shield-clock {
    color: white;
    text-shadow: 0px 1px 2px rgba(0,0,0,0.6);
    font-weight: bold;
    text-align: center;
    padding-bottom: 1.5em;
}

.screen-shield-clock-time {
    font-size: 72pt;
    text-shadow: 0px 2px 2px rgba(0,0,0,0.4);
}

.screen-shield-clock-date {
    font-size: 28pt;
}

#screenShieldNotifications {
    border-radius: 8px;
    background-color: rgba(0.0, 0.0, 0.0, 0.9);
    border: 2px solid #868686;
    max-height: 500px;
    padding: 18px 0;
    box-shadow: .5em .5em 20px rgba(0, 0, 0, 0.5);
}

.screen-shield-notifications-box {
    spacing: 18px;
    max-width: 34em;
}

.screen-shield-notification-source {
    padding: 13px 24px;
    spacing: 5px;
}

.screen-shield-notification-label {
    font-size: 1.2em;
    font-weight: bold;
    padding: 0px 18px;
    color: #babdb6;
}

.screen-shield-notification-count-text {
    padding: 0px 18px;
}

/* Remove background from notifications, otherwise
   opacity is doubled and they look darker
*/
.screen-shield-notifications-box .notification {
    background-color: transparent;
}

/* Override padding on resident notifications, since
   the notifications box has its own spacing
*/
.screen-shield-notifications-box .summary-notification-stack-scrollview {
    padding-top: 0px;
    padding-bottom: 0px;
}

.input-source-switcher-symbol {
   font-size: 34pt;
   width: 96px;
   height: 96px;
}

/* Background menu */

.background-menu {
    -boxpointer-gap: 4px;
}
Last edited by Zorba on Sun Jan 12, 2014 6:48 am, edited 1 time in total.
Image
User avatar
Zorba
Level 8
Level 8
 
Posts: 2268
Joined: Tue May 29, 2012 10:12 pm
Location: Tunisia

Re: How To Theme The Cinnamon Taskbar Panel and Window List

Postby Zorba on Sat Jan 11, 2014 9:43 pm

here are the all screenshots you need for the theme gm85 :D :D

Image Image Image Image Image Image Image Image

GTK theme here http://gnome-look.org/content/show.php/ZorinDark+%28Zorin+OS+8+theme%29?content=162859

Plymouth bootsplash here http://gnome-look.org/content/show.php/Zorin+OS+8?content=162872

System sounds here http://gnome-look.org/content/show.php/ZorinOS+8?content=162867

Icon theme here http://gnome-look.org/content/show.php?content=154620

This should be enough for a transformation pack :D

BTW Zorin OS 8 is still IN RC stage :D
Image
User avatar
Zorba
Level 8
Level 8
 
Posts: 2268
Joined: Tue May 29, 2012 10:12 pm
Location: Tunisia

Re: How To Theme The Cinnamon Taskbar Panel and Window List

Postby austin.texas on Sun Jan 12, 2014 12:36 am

How To Theme The Cinnamon Taskbar Panel and Window List

For people who need bolder fonts or different colors on fonts on the Window list tabs, those changes are made in the Window list section of cinnamon.css
/* ===================================================================
* Window list (windowList.js)
* ===================================================================*/
.window-list-item-box {
color: white;
font-size: 10pt;

For a hover effect, change the color, font size, or font weight
.window-list-item-box:hover {
color: #ffff7f;
font-size: 12pt.
font-weight: bold;

Another hover effect for text is to add a shadow to the text -
text-shadow: 3px 3px 2px #7f7f7f;
Syntax
text-shadow: h-shadow v-shadow blur color;
Last edited by austin.texas on Sun Jan 12, 2014 8:54 am, edited 1 time in total.
Mint 17 Cinnamon (64 bit), Quad core AMD A8-3870 with Radeon HD Graphics 6550D, 8GB DDR3, Ralink RT2561/RT61 802.11g PCI
Microsoft-free environment since 1996

To help Linux Mint with a donation, please visit http://www.linuxmint.com/donors.php
User avatar
austin.texas
Level 9
Level 9
 
Posts: 2629
Joined: Tue Nov 17, 2009 3:57 pm
Location: at /home

Re: How To Theme The Cinnamon Taskbar Panel and Window List

Postby Zorba on Sun Jan 12, 2014 6:49 am

Thanks austin for writing that, I need it myself :D
Image
User avatar
Zorba
Level 8
Level 8
 
Posts: 2268
Joined: Tue May 29, 2012 10:12 pm
Location: Tunisia

Re: How To Theme The Cinnamon Taskbar Panel and Window List

Postby Zorba on Sun Jan 12, 2014 8:46 am

I had a go at the Zorin OS theme and below is the what it looks like now in early development :D zip file attached below :D But I think gm85 can do it better because it should be based on the same priciple as Mint-XP. So this is just an attempt and we have to wait for gm85 to recreate it from the start :D The middle of the panel has to transparent as well and I'm not a Gimp expert :(

Image
Image
Image
Image
Attachments
ZorinOS-Core 8.zip
(170.67 KiB) Downloaded 20 times
Last edited by Zorba on Sun Jan 12, 2014 9:02 am, edited 1 time in total.
Image
User avatar
Zorba
Level 8
Level 8
 
Posts: 2268
Joined: Tue May 29, 2012 10:12 pm
Location: Tunisia

Re: How To Theme The Cinnamon Taskbar Panel and Window List

Postby austin.texas on Sun Jan 12, 2014 9:00 am

How To Theme The Cinnamon Taskbar Panel and Window List

A great resource for how to do text shadows is
http://www.color-hex.com/color/28a3df

At the bottom of the page you can see examples of different text shadow properties.
Mint 17 Cinnamon (64 bit), Quad core AMD A8-3870 with Radeon HD Graphics 6550D, 8GB DDR3, Ralink RT2561/RT61 802.11g PCI
Microsoft-free environment since 1996

To help Linux Mint with a donation, please visit http://www.linuxmint.com/donors.php
User avatar
austin.texas
Level 9
Level 9
 
Posts: 2629
Joined: Tue Nov 17, 2009 3:57 pm
Location: at /home

Re: How To Theme The Cinnamon Taskbar Panel and Window List

Postby gmc85 on Sun Jan 12, 2014 9:31 am

fixed up the ZorinOS-Core 8 panel. get the zip here: https://www.dropbox.com/sh/rf0uoetdmb8ycd5/EzErcPu-BV
User avatar
gmc85
Level 2
Level 2
 
Posts: 63
Joined: Fri Nov 29, 2013 7:27 am

Re: How To Theme The Cinnamon Taskbar Panel and Window List

Postby gmc85 on Sun Jan 12, 2014 9:36 am

austin.texas wrote:How To Theme The Cinnamon Taskbar Panel and Window List

A great resource for how to do text shadows is
http://www.color-hex.com/color/28a3df

At the bottom of the page you can see examples of different text shadow properties.


here is something usefull (maybe) http://border-image.com/
User avatar
gmc85
Level 2
Level 2
 
Posts: 63
Joined: Fri Nov 29, 2013 7:27 am

Re: How To Theme The Cinnamon Taskbar Panel and Window List

Postby austin.texas on Sun Jan 12, 2014 10:07 am

here is something usefull (maybe) http://border-image.com/


That looks like a great tool !
Mint 17 Cinnamon (64 bit), Quad core AMD A8-3870 with Radeon HD Graphics 6550D, 8GB DDR3, Ralink RT2561/RT61 802.11g PCI
Microsoft-free environment since 1996

To help Linux Mint with a donation, please visit http://www.linuxmint.com/donors.php
User avatar
austin.texas
Level 9
Level 9
 
Posts: 2629
Joined: Tue Nov 17, 2009 3:57 pm
Location: at /home

Re: How To Theme The Cinnamon Taskbar Panel and Window List

Postby Zorba on Sun Jan 12, 2014 12:23 pm

gmc85 wrote:fixed up the ZorinOS-Core 8 panel. get the zip here: https://www.dropbox.com/sh/rf0uoetdmb8ycd5/EzErcPu-BV



Genius man :shock: :shock: :shock: :shock: how did youi do that!!! It looks exactly as zorin os 8 theme :D :D But you have to finish it and upload it. Please Fix the hover effect and the menu hover like in the screenshots here http://forums.linuxmint.com/viewtopic.php?f=211&t=155402#p808592 and the desklets too . I can't upload it in my name because it is your theme gm85 :D Take your time with it you have finished the most difficult part which is the panel now :D maaaaaaaaaaaaaaaaaaaaaaaaaaaaaaany thanks for this great theme :D :D

add your magic to it: corner ripple and all :DMaybe you can use Mint-X for better control like on Mint-XP :D
Image
User avatar
Zorba
Level 8
Level 8
 
Posts: 2268
Joined: Tue May 29, 2012 10:12 pm
Location: Tunisia

Re: How To Theme The Cinnamon Taskbar Panel and Window List

Postby austin.texas on Sun Jan 12, 2014 12:56 pm

How To Theme The Cinnamon Taskbar Panel and Window List

Of course, hover effects on the Window list tabs can be done with background effects as well as the text effects listed above.
You can add a hover background color, different from the non-selected window list tab color, by adding a background-color line to .window-list-item-box:hover
like this:
/* ===================================================================
* Window list (windowList.js)
* ===================================================================*/

.window-list-item-box:hover {
color: #ffff7f;
font-size: 12pt.
font-weight: bold;
background-color: rgba(255,255,0,0.2);
}
That will add a slightly transparent yellow background.

A background graphic can be added, as well. If your graphic is named "tab.png"
use a border-image line:
.window-list-item-box:hover {
color: #ffff7f;
font-size: 12pt.
font-weight: bold;
border-image: url("tab.png") 6;
}
Mint 17 Cinnamon (64 bit), Quad core AMD A8-3870 with Radeon HD Graphics 6550D, 8GB DDR3, Ralink RT2561/RT61 802.11g PCI
Microsoft-free environment since 1996

To help Linux Mint with a donation, please visit http://www.linuxmint.com/donors.php
User avatar
austin.texas
Level 9
Level 9
 
Posts: 2629
Joined: Tue Nov 17, 2009 3:57 pm
Location: at /home

Re: How To Theme The Cinnamon Taskbar Panel and Window List

Postby Zorba on Sun Jan 12, 2014 1:21 pm

Many thanks austin for nice tutorials :D I'm stuck here with the hover PNGS they use on the launcher with borders as well :D

gmc85: why did you make the borders of the panel center green? they should be blue as in the screeenshot :D Ignore my clumsy panel it was just an attempt and redo the theme your way :D
Image
User avatar
Zorba
Level 8
Level 8
 
Posts: 2268
Joined: Tue May 29, 2012 10:12 pm
Location: Tunisia

Re: How To Theme The Cinnamon Taskbar Panel and Window List

Postby gmc85 on Sun Jan 12, 2014 1:49 pm

Brahim wrote:Many thanks austin for nice tutorials :D I'm stuck here with the hover PNGS they use on the launcher with borders as well :D

gmc85: why did you make the borders of the panel center green? they should be blue as in the screeenshot :D Ignore my clumsy panel it was just an attempt and redo the theme your way :D


allready updated. check my dropbox :)
User avatar
gmc85
Level 2
Level 2
 
Posts: 63
Joined: Fri Nov 29, 2013 7:27 am

Re: How To Theme The Cinnamon Taskbar Panel and Window List

Postby JosephM on Sun Jan 12, 2014 6:18 pm

Just a quick note. I just created a simple applet to make working on Cinnamon themes a bit easier. It adds a button to the panel to refresh the current Cinnamon theme so that you don't have to keep restarting Cinnamon after every change. It available here: http://cinnamon-spices.linuxmint.com/applets/view/172
JosephM
Level 3
Level 3
 
Posts: 186
Joined: Sun May 26, 2013 6:25 pm

Linux Mint is funded by ads and donations.
 
Next

Return to Themes, Icons, & Wallpaper

Who is online

Users browsing this forum: No registered users and 1 guest