widgets.css

/*
    MolSync

    (c) 2010-2016 Molecular Materials Informatics, Inc.

    All rights reserved
    
    http://molmatinf.com

	[PKG=molsync]
*/

.wmk-dialog
{
	font-family: 'Open Sans', sans-serif;
}

/* standard buttons */

.button
{
	display: inline-block;
	padding: 6px 12px;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	    touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
}
.button:focus,
.button:active:focus,
.button.active:focus,
.button.focus,
.button:active.focus,
.button.active.focus 
{
	outline: thin dotted;
	outline: 5px auto -webkit-focus-ring-color;
	outline-offset: -2px;
}
.button:hover,
.button:focus,
.button.focus 
{
  color: #333;
  text-decoration: none;
}
.button:active,
.button.active 
{
	background-image: none;
	outline: 0;
	-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
	        box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.button.disabled,
.button[disabled],
fieldset[disabled] .button 
{
	cursor: not-allowed;
	filter: alpha(opacity=65);
	-webkit-box-shadow: none;
	        box-shadow: none;
	opacity: .65;
}
a.button.disabled,
fieldset[disabled] a.button 
{
	pointer-events: none;
}
.button-default 
{
	color: #333;
	background-color: #fff;
	background-image: linear-gradient(to right bottom, #FFFFFF, #E0E0E0);
	border-color: #ccc;
}
.button-default:focus,
.button-default.focus 
{
	color: #333;
	background-color: #e6e6e6;
	border-color: #8c8c8c;
}
.button-default:hover 
{
	color: #333;
	background-color: #e6e6e6;
	border-color: #adadad;
}
.button-default:active,
.button-default.active,
.open > .dropdown-toggle.button-default 
{
	color: #333;
	background-color: #e6e6e6;
	border-color: #adadad;
}
.button-default:active:hover,
.button-default.active:hover,
.open > .dropdown-toggle.button-default:hover,
.button-default:active:focus,
.button-default.active:focus,
.open > .dropdown-toggle.button-default:focus,
.button-default:active.focus,
.button-default.active.focus,
.open > .dropdown-toggle.button-default.focus 
{
	color: #333;
	background-color: #d4d4d4;
	border-color: #8c8c8c;
}
.button-default:active,
.button-default.active,
.open > .dropdown-toggle.button-default 
{
	background-image: none;
}
.button-default.disabled:hover,
.button-default[disabled]:hover,
fieldset[disabled] .button-default:hover,
.button-default.disabled:focus,
.button-default[disabled]:focus,
fieldset[disabled] .button-default:focus,
.button-default.disabled.focus,
.button-default[disabled].focus,
fieldset[disabled] .button-default.focus 
{
	background-color: #fff;
	border-color: #ccc;
}
.button-default .badge 
{
	  color: #fff;
	  background-color: #333;
}

.button-primary 
{
	color: #fff;
	/*background-color: #337ab7;
	border-color: #2e6da4;*/
	background-color: #008FD2;
	background-image: linear-gradient(to right bottom, #47D5D2, #008FD2);
	border-color: #00C0C0;
}
.button-primary:focus,
.button-primary.focus 
{
	color: #fff;
	background-color: #47D5D2;
	border-color: #122b40;
}
.button-primary:hover 
{
	color: #fff;
	background-color: #286090;
	border-color: #204d74;
}
.button-primary:active,
.button-primary.active,
.open > .dropdown-toggle.button-primary 
{
	color: #fff;
	background-color: #286090;
	border-color: #20744d;
}
.button-primary:active:hover,
.button-primary.active:hover,
.open > .dropdown-toggle.button-primary:hover,
.button-primary:active:focus,
.button-primary.active:focus,
.open > .dropdown-toggle.button-primary:focus,
.button-primary:active.focus,
.button-primary.active.focus,
.open > .dropdown-toggle.button-primary.focus 
{
	color: #fff;
	background-color: #00C000;
	background-image: linear-gradient(to right bottom, #00CA59, #008650);
	border-color: #12802b;
}
.button-primary:active,
.button-primary.active,
.open > .dropdown-toggle.button-primary 
{
	background-image: none;
}
.button-primary.disabled:hover,
.button-primary[disabled]:hover,
fieldset[disabled] .button-primary:hover,
.button-primary.disabled:focus,
.button-primary[disabled]:focus,
fieldset[disabled] .button-primary:focus,
.button-primary.disabled.focus,
.button-primary[disabled].focus,
fieldset[disabled] .button-primary.focus 
{
	background-color: #337ab7;
	border-color: #2ea46d;
}
.button-primary .badge 
{
	color: #337ab7;
  	background-color: #fff;
}

/* for molsync.ui.OptionList: provide a look similar to the custom buttons defined earlier */

.option
{
	padding: 6px 12px;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	    touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}
.option-unselected
{
	color: white;
	background-color: #008FD2;
	background-image: linear-gradient(to right bottom, #47D5D2, #008FD2);
}
.option-selected
{
	color: #333;
	background-color: white;
	background-image: linear-gradient(to right bottom, #FFFFFF, #E0E0E0);
}
.option-table
{
	margin: 1px;
	padding: 0;
	border-width: 0;
	border-collapse: collapse;
}
.option-cell
{
	margin: 0;
	padding: 0;
	border-width: 0;
	border-width: 1px;
	border-style: solid;
	border-color: #808080;
}
.option-hover
{
	background-color: #009FE2;
	background-image: linear-gradient(to right bottom, #57E5E2, #009FE2);
}
.option-active
{
	background-color: #00C000;
	background-image: linear-gradient(to right bottom, #00CA59, #008650);
}

/* selecting parts of widgets is really annoying */
.no_selection 
{
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
}