FEATURES

GROUPS

- Background Header: black transparent

- Width size greater more more items

- More Groups: Transparent Menu

SEARCH

- Width size reduced and like Icon

- On Click, the width size will be increased and the search field will be moved down. A click on a empty part of page will be move the search field back.

SETTING

- Gear Icon with zooming and rotation on mouse hover

DIALS

- Thumbernails width scale, shadow and glass effect on mouse hover

- Text shaodw effect

GOOGLE APPS

- "dock style " with scale. reflection and shadow

HOW TO INSTALL

Install is just a Copy and Paste:
- Open the Options page
- Click on "Customize dial style"
- Paste the CSS on "Custom CSS" field
- ATM speeddial2 has a bug and to see my custom CSS at work you have to switch off the Dark Theme. I already sent a support request to speeddial2, maybe one day they will reply.

SPEEDDIAL2 - CSS

/* *****************************************
SpeedDial2
==========================================
Custom css - byman.it
2017-06-17 Shadow on Groups Header
2017-06-16 search and setting icon hover
2017-06-15 some little details (search field, icon settings, background groups label)
2017-06-12 adapted css for the new version of SpeedDial2
2015-08-16 created 1st Custom CSS

background-image: http://www.byman.it/common/images/SpeedDial2/SpeedDial2.BG01.png
************************************** */

/* ------------------------------------
    GROUPS - GENERAL
------------------------------------ */
.is-with-groups .new-tab-header {
	box-shadow: 0px 5px 15px black;
	background: rgba(0, 0, 0, 0.8);
}
.new-tab-header .groups-container {
	left: 10px;
	right: 30px;
}
#groups > li > a {
	color: #999;
	border-radius: 4px !important;  
	padding: 20px 6px;
	margin: 0 8px;
}
#groups > li > a:hover {
    color: #222;
    background: #fff;
}
#groups > li > a.hovered, #groups > li > a.selected {   
    color: #222;
    background: #fff;
    
}
#groups > li > a.hovered::after, #groups > li > a.selected::after {
    height: 0px !important; 
}

/* ------------------------------------
   GROUPS: SHADOW BOX 
------------------------------------ */
.is-with-groups .new-tab-header {
	box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.is-with-groups .new-tab-header:before, .is-with-groups .new-tab-header:after {
    content:"";
    position:absolute;
    z-index:-1;
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    border-radius:100px / 10px;
}
.is-with-groups .new-tab-header:after {
    right:10px;
    left:auto;
    transform:skew(8deg) rotate(3deg);
}

/* ------------------------------------
    GROUPS - LABELS
------------------------------------ */
/* this one will create the "labels" */
#groups > li > a {
    color: #111;    
    background: rgb(178, 180, 183);
    margin: 6px 2px;
    height: 4px;
    width: 60px;
    text-align: center;
}
/* More label small (3 dots) */
.new-tab-header .groups-container .groups-more > a { 
    width: auto !important;
}


/* ------------------------------------
    Groups hidden - Menu style
------------------------------------ */

  /* submenu */
.new-tab-header .groups-container .groups-more ul {
	background-color: rgba(0, 0, 0, 0.8);
	border-radius: 6px;
	border: 10px solid rgba(221, 221, 221, 0.6);
	left: -110px;
	-webkit-transition: all 0.7s ease !important;
}
 .new-tab-header .groups-container .groups-more:hover ul {    
    top: 56px;
}

.new-tab-header .groups-container .groups-more ul li {
    border-bottom: 1px dotted gray;
}
.new-tab-header .groups-container .groups-more ul li:last-child{
    border-bottom:0px dotted gray;
}
#groups  .groups-more ul > li > a, .groups-more ul > li > a:visited {
    opacity: 0.9;
    color: white;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.8), 1px -1px 0 rgba(0, 0, 0, 0.8), -1px 1px 0 rgba(0, 0, 0, 0.8), 1px 1px 0 #000, 2px 2px 2px rgba(0, 0, 0, 0.8) !important;
}

#groups  .groups-more ul > li > a:hover {
    opacity: 0.9;
    color: white !important;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.8), 1px -1px 0 rgba(0, 0, 0, 0.8), -1px 1px 0 rgba(0, 0, 0, 0.8), 1px 1px 0 #000, 2px 2px 2px      rgba(0, 0, 0, 0.8) !important;
	background: rgba(255, 255, 255, 1);
}

/* ------------------------------------
    SEARCH FIELD
------------------------------------ */

.new-tab-header .search-form {
    top:13px; 
    right: 56px; 
}

.new-tab-header .search-form .icon-search {
    visibility: hidden;
}
::-webkit-input-placeholder {
	color: transparent;
	visibility:hidden;
}

.search-form input {
	opacity:1;
}

.search-form input[type="text"] {
    width: 32px;
    height: 32px;
	background: url(https://lh3.googleusercontent.com/-f-DipOamkfo/VbyWu2-Mp-I/AAAAAAAALqs/UqBG8d2sbmo/s16-Ic42/SpeedDial2.SearchBlack.png) 98% 50% no-repeat;
	background-color:rgb(178, 180, 183);	
    border-radius: 20px;
    border: 0px solid #2c2c2c; 
    padding: 0px;
    color: silver;
    font: bold 12px Arial,Helvetica,Sans-serif;   
    transition: all 0.7s ease 0s;
}
.search-form input:hover{
	-webkit-transition: all 0.5s ease !important;
	-webkit-transform: rotate(90deg) scale(1.25,1.25) !important;
    background-color: #fff;
	opacity:1;

}
/* Allow to increase the search field */
.search-form input[type="text"]:focus {
	width: 200px;
	margin-top: 44;
	color:white;
	text-align: center;   
	text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
	background: rgba(0, 0, 0, 0.8) url(https://lh3.googleusercontent.com/-Hl6U-V3mgKg/VbyWu0uqw3I/AAAAAAAALqs/TDBQy2BpLSA/s16-Ic42/SpeedDial2.SearchGray.png) 98% 50% no-repeat;
	-webkit-transform: rotate(0deg) scale(1,1) !important;
	-webkit-transition: all 0.5s linear !important;
}

/* ------------------------------------
    SETTINGS - ICON
------------------------------------ */
#quick-settings-icon {   
    height: 32px;
    width: 32px;
	top: 13px; 
    right: 12px;
    background-color: rgb(178, 180, 183);
	transition: all 0.7s ease 0s;
}

#quick-settings-icon:hover{
	-webkit-transition: all 0.5s ease !important;
	-webkit-transform: rotate(90deg) scale(1.25,1.25) !important;
	background-color: #fff;
}


.new-tab-header .search-form {
    right: 56px; 
}
.settings-icon{   
    width: 32px;
    height: 32px;
    background-image: url(https://lh3.googleusercontent.com/-lgMY5nbO4SA/VbyTv5I7ISI/AAAAAAAALpM/_CzwG9paIjc/s33-Ic42/SpeedDial2.Settings.png); 
    background-repeat: no-repeat;
    background-position: center;
   -webkit-transition: all 0.3s linear !important;
}
.settings-icon:hover{   
	-webkit-transition: all 0.5s ease !important;
	-webkit-transform: rotate(90deg) scale(1.25,1.25) !important;
}
.settings-icon > img {
    visibility: hidden;
}
.tooltip{
	visibility:hidden;
}

/* ------------------------------------
    PAGES 
------------------------------------ */
/* Fix the shadow of dial2 */
div.shadow {
	background-size: 100% 10px !important;
}
#pages{
	text-align:center
}
#pages li.link {
	z-index:2 !important;
	border-radius: 6px;
    -webkit-transition: -webkit-transform .2s ease !important; 
	-webkit-transform: scale(1,1) !important;
	box-sizing: border-box important!;
}
#pages li.link:hover {
	z-index:20 !important;
	-webkit-transition: -webkit-transform .5s ease !important;    
    box-shadow: 0 0 14px #000;
	-webkit-transform: scale(1.25,1.25)  !important; 
	
}

#pages li .thumbnail_container {
	box-shadow: inset 0px 0px 40px 20px rgba(0,0,0,0.30);
}

#pages li a, .thumbnail_container {
	background-color: rgba(221, 221, 221, 0.5) !important;
	border: 2px rgba(255, 255, 255, 0.46) groove;
	box-sizing: border-box !important;
}
#pages li .thumbnail_container:hover {
	-webkit-box-shadow:inset 0px 0px 30px 5px rgba(0,0,0,0.30);
	border: 1px rgba(255, 255, 255, 0.90) solid;
	box-sizing: border-box !important;
}

.title {
	opacity: 0.9;	
	/* font size and color => you can set it from speeddial2   */
	font-size: 11px !important;
	color: #000000 !important;
	text-shadow: 0px 1px 0px #FFFFFF;
	padding: 0;
}

/* ------------------------------------
   GOOGLE APPS
------------------------------------ */
/* white */
#appspanel_wrapper{	
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(212, 212, 212, 0)), color-stop(50%,rgba(208, 208, 208, 0.1)), color-stop(51%,rgba(228, 228, 228, 0.9)), color-stop(100%,rgba(255, 255, 255, 0.9)));
    border-top: none;
}
/* black */
#appspanel_wrapper.apps_dark {	
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(39,42,43,0)), color-stop(50%,rgba(37,40,39,0.2)), color-stop(51%,rgba(10,14,10,0.9)), color-stop(100%,rgba(10,8,9,0.9)));
    border-top: none;
}
/* common */
#appspanel_wrapper #appspanel li {
	-webkit-box-shadow: none;
	-webkit-transition: all 0.3s linear !important;
	-webkit-transform: scale(1,1) !important;
}
#appspanel_wrapper #appspanel li:hover {
	-webkit-box-shadow: none !important;
	-webkit-transform: scale(1.4,1.4) !important;
	-webkit-transition: all 0.5s ease !important;
}
#appspanel_wrapper a {
	/*-webkit-box-reflect: below -1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, transparent) , to(rgba(250, 250, 250, 0.2)));*/
}
#appspanel li img {
	-webkit-box-reflect: below -1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, transparent) , to(rgba(250, 250, 250, 0.4)));
	-webkit-filter: drop-shadow(12px 12px 5px rgba(0,0,0,0.5));
    filter: url("data:image/svg+xml;utf8,<svg height='0' xmlns='http://www.w3.org/2000/svg'><filter id='drop-shadow'><feGaussianBlur in='SourceAlpha' stdDeviation='4'/><feOffset dx='0' dy='12' result='offsetblur'/><feFlood flood-color='rgba(0,0,0,0.5)'/><feComposite in2='offsetblur' operator='in'/><feMerge><feMergeNode/><feMergeNode in='SourceGraphic'/></feMerge></filter></svg>#drop-shadow");
}

/* ------------------------------------
   SCREEN RESOLUTION
------------------------------------ */
@media (max-width: 1440px) {
    .title {font-size: 10px !important;}
}

CSS Extra for Groups Label Colored

This is just an example to how colored the first 22 labels, you can adapt to your needs.
You can change the color and apply the color for more lables just increase the child number.
You can also use a gradient like the first one. Search on internet for CSS Gradient Generator.

How to use: just add the following CSS at the end of your Custom CSS 

/* GROUPS - LABELS COLORED 
https://www.w3schools.com/colors/colors_names.asp

*/
#groups > li:nth-child(1)  > a {background: linear-gradient(to bottom, rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%);}
#groups > li:nth-child(2)  > a { background-color:cyan;color:black;}
#groups > li:nth-child(3)  > a { background-color:green;color:white;}
#groups > li:nth-child(4)  > a { background-color:pink;color:black;}
#groups > li:nth-child(5)  > a { background-color:red;color:white;}
#groups > li:nth-child(6)  > a { background-color:orange;color:white;}
#groups > li:nth-child(7)  > a { background-color:blue;color:white;}
#groups > li:nth-child(8)  > a { background-color:yellow;color:black;}
#groups > li:nth-child(9)  > a { background-color:SaddleBrown;color:white;}
#groups > li:nth-child(10) > a { background-color:RebeccaPurple;color:white;}
#groups > li:nth-child(11) > a { background-color:SteelBlue ;color:white;}
#groups > li:nth-child(12) > a { background-color:Wheat;color:black;}
#groups > li:nth-child(13) > a { background-color:Navy;color:white;}
#groups > li:nth-child(14) > a { background-color:Maroon;color:white;}
#groups > li:nth-child(15) > a { background-color:MediumAquaMarine;color:white;}
#groups > li:nth-child(16) > a { background-color:Olive;color:white;}
#groups > li:nth-child(17) > a { background-color:Tomato;color:white;}
#groups > li:nth-child(18) > a { background-color:Thistle;color:white;}
#groups > li:nth-child(19) > a { background-color:Teal;color:white;}
#groups > li:nth-child(20) > a { background-color:Purple;color:white;}
#groups > li:nth-child(21) > a { background-color:Khaki ;color:black;}
#groups > li:nth-child(22) > a { background-color:GreenYellow;color:black;}


/* GROUPS - LABELS COLORED : HOVER */
#groups > li:nth-child(1)  > a:hover { background-color:white;color:black}
#groups > li:nth-child(2)  > a:hover { background-color:white;color:black}
#groups > li:nth-child(3)  > a:hover { background-color:white;color:black}
#groups > li:nth-child(4)  > a:hover { background-color:white;color:black}
#groups > li:nth-child(5)  > a:hover { background-color:white;color:black}
#groups > li:nth-child(6)  > a:hover { background-color:white;color:black}
#groups > li:nth-child(7)  > a:hover { background-color:white;color:black}
#groups > li:nth-child(8)  > a:hover { background-color:white;color:black}
#groups > li:nth-child(9)  > a:hover { background-color:white;color:black}
#groups > li:nth-child(10) > a:hover { background-color:white;color:black}
#groups > li:nth-child(11) > a:hover { background-color:white;color:black}
#groups > li:nth-child(12) > a:hover { background-color:white;color:black}
#groups > li:nth-child(13) > a:hover { background-color:white;color:black}
#groups > li:nth-child(14) > a:hover { background-color:white;color:black}
#groups > li:nth-child(15) > a:hover { background-color:white;color:black}
#groups > li:nth-child(16) > a:hover { background-color:white;color:black}
#groups > li:nth-child(17) > a:hover { background-color:white;color:black}
#groups > li:nth-child(18) > a:hover { background-color:white;color:black}
#groups > li:nth-child(19) > a:hover { background-color:white;color:black}
#groups > li:nth-child(20) > a:hover { background-color:white;color:black}
#groups > li:nth-child(21) > a:hover { background-color:white;color:black}
#groups > li:nth-child(22) > a:hover { background-color:white;color:black}

/* GROUPS - LABELS COLORED : SELECTED */
#groups > li:nth-child(1)  > a:selected { background-color:white;color:black}
#groups > li:nth-child(2)  > a:selected { background-color:white;color:black}
#groups > li:nth-child(3)  > a:selected { background-color:white;color:black}
#groups > li:nth-child(4)  > a:selected { background-color:white;color:black}
#groups > li:nth-child(5)  > a:selected { background-color:white;color:black}
#groups > li:nth-child(6)  > a:selected { background-color:white;color:black}
#groups > li:nth-child(7)  > a:selected { background-color:white;color:black}
#groups > li:nth-child(8)  > a:selected { background-color:white;color:black}
#groups > li:nth-child(9)  > a:selected { background-color:white;color:black}
#groups > li:nth-child(10) > a:selected { background-color:white;color:black}
#groups > li:nth-child(11) > a:selected { background-color:white;color:black}
#groups > li:nth-child(12) > a:selected { background-color:white;color:black}
#groups > li:nth-child(13) > a:selected { background-color:white;color:black}
#groups > li:nth-child(14) > a:selected { background-color:white;color:black}
#groups > li:nth-child(15) > a:selected { background-color:white;color:black}
#groups > li:nth-child(16) > a:selected { background-color:white;color:black}
#groups > li:nth-child(17) > a:selected { background-color:white;color:black}
#groups > li:nth-child(18) > a:selected { background-color:white;color:black}
#groups > li:nth-child(19) > a:selected { background-color:white;color:black}
#groups > li:nth-child(20) > a:selected { background-color:white;color:black}
#groups > li:nth-child(21) > a:selected { background-color:white;color:black}
#groups > li:nth-child(22) > a:selected { background-color:white;color:black}

SCREENSHOTS 2017

Back to Style Menu

 - have fun - 

REFERENCES

• Speed Dial 2
• Speed Dial 2 Support - Forum