/* ######################################################################## CSS styles for gpEasy Simple Button Author: J. Krausz Date: 2016-02-18 Version 1.0.1 ######################################################################## */ /* ##### SECTION/CONTAINER (UNIVERSAL) ##### */ .filetype-simple_button { position:relative; } .filetype-simple_button .sb-wrapper { position:relative; height:100%; } .filetype-simple_button .sb-wrapper:before { content:""; width:0; display:inline-block; height:100%; } /* ##### UNIVERSAL BUTTON ATTRIBUTES ##### */ /* .btn is same as bootstrap .btn to avoid conflicts of default preset with Bootswatch themes */ .btn { display:inline-block; margin-bottom:0; font-weight:normal; text-align:center; vertical-align:middle; cursor:pointer; background-image:none; border:1px solid transparent; white-space:nowrap; padding:10px 15px; font-size:14pt; line-height:1.42857143; border-radius:4px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -o-user-select:none; user-select:none; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .btn:hover, .btn:focus { text-decoration:none; } .filetype-simple_button .btn { position:relative; display:inline-block!important; border:none; overflow:hidden; text-overflow:ellipsis; max-width:100%; } /* the gpclear div interferes with some alignement rules, so we hide it */ .filetype-simple_button .gpclear { display:none!important; } /* BUTTON TEXT (UNIVERSAL) */ .btn span.sb-buttontext {} /* ICONS (UNIVERSAL, FONT AWESOME PLUGIN REQUIRED) */ .btn i.fa-spin {} /* Firefox hack to prevent overflow-ellipsis-bug triggered by rotated(ing) elements requiring extra space */ @-moz-document url-prefix() { .btn span.sb-buttontext+i.fa-spin { margin-right:0.3em; } } .btn i.fa+span.sb-buttontext, .btn span.sb-buttontext+i.fa { margin-left:0.5em; } .btn i.fa+span.sb-buttontext:empty, .btn span.sb-buttontext:empty+i.fa { margin-left:0; } /* HORIZONTAL ALIGNMENT (UNIVERSAL) */ .sb-wrapper.sb-left { text-align:left; margin:0 auto 0 0!important;; } .sb-wrapper.sb-left .btn { margin:0 auto 0 0; } .sb-wrapper.sb-center { text-align:center; margin:0 auto!important;; } .sb-wrapper.sb-center .btn { margin:0 auto; } .sb-wrapper.sb-right { text-align:right; margin:0 0 0 auto!important; } .sb-wrapper.sb-right .btn { margin:0 0 0 auto; } .sb-wrapper.sb-fullwidth { width:100%; } .sb-wrapper.sb-fullwidth .btn { width:100%; } /* VERTICAL ALIGNMENT (UNIVERSAL) */ .sb-wrapper.sb-top, .sb-wrapper.sb-top:before, .sb-wrapper.sb-top .btn { vertical-align:top; } .sb-wrapper.sb-middle, .sb-wrapper.sb-middle:before, .sb-wrapper.sb-middle .btn { vertical-align:middle; } .sb-wrapper.sb-bottom, .sb-wrapper.sb-bottom:before, .sb-wrapper.sb-bottom .btn { vertical-align:bottom; } .sb-wrapper.sb-fullheight { display:table; margin:0 auto; table-layout:fixed; } /* table-layout:fixed is needed for proper overflow handling */ .sb-wrapper.sb-fullheight:before { display:none; } .sb-wrapper.sb-fullheight .btn { display:table-cell!important; vertical-align:middle; } /* ###### DEFAULT PRESET RULES ###### */ /* COLORS (DEFAULT PRESET) */ .btn.sb-red, .btn.sb-cyan, .btn.sb-teal, .btn.sb-blue, .btn.sb-purple, .sb-magenta, .btn.sb-dark, .btn.sb-gray { color:#eee; color:rgba(255,255,255,0.85); } .btn.sb-red:hover, .btn.sb-cyan:hover, .btn.sb-teal:hover, .btn.sb-blue:hover, .btn.sb-purple:hover, .btn.sb-magenta:hover, .btn.sb-dark:hover, .btn.sb-gray:hover { color:#fff; color:rgba(255,255,255,1); } .btn.sb-yellow { color:#A18630; color:rgba(0,0,0,0.55); } .btn.sb-yellow:hover{ color:#937A24; color:rgba(0,0,0,0.72); } .btn.sb-green { color:#305E25; color:rgba(0,0,0,0.55); } .btn.sb-green:hover{ color:#294922; color:rgba(0,0,0,0.72); } .btn.sb-light { color:#222; color:rgba(0,0,0,0.4); } .btn.sb-light:hover { color:#000; color:rgba(0,0,0,0.6); } .btn.sb-dark { color:#222; color:rgba(255,255,255,0.55); } .btn.sb-dark:hover { color:#444; color:rgba(255,255,255,0.72); } .btn.sb-red { background-color:#E03838; } .btn.sb-red:hover { background-color:#D1282F; } .btn.sb-yellow { background-color:#FFD52D; } .btn.sb-yellow:hover { background-color:#F1C81C; } .btn.sb-green { background-color:#8DC90C; } .btn.sb-green:hover { background-color:#7DBA00; } .btn.sb-teal { background-color:#078C87; } .btn.sb-teal:hover { background-color:#007E7A; } .btn.sb-cyan { background-color:#1CB5ED; } .btn.sb-cyan:hover { background-color:#00A7E0; } .btn.sb-blue { background-color:#4871E2; } .btn.sb-blue:hover { background-color:#2E64D4; } .btn.sb-purple { background-color:#A03CC1; } .btn.sb-purple:hover { background-color:#912EB4; } .btn.sb-magenta { background-color:#C92471; } .btn.sb-magenta:hover { background-color:#B80565; } .btn.sb-dark { background-color:#384044; } .btn.sb-dark:hover { background-color:#2E363B; } .btn.sb-gray { background-color:#778483; } .btn.sb-gray:hover { background-color:#6A7778; } .btn.sb-light { background-color:#E0DFD9; } .btn.sb-light:hover { background-color:#D2D2CD; } /* SIZES (DEFAULT PRESET) */ .btn.sb-small { font-size:11pt; padding:5px 7px; } .btn.sb-medium { /* no changes to .btn */ } .btn.sb-large { font-size:17pt; padding:14px 22px; } /* BASIC STYLE (DEFAULT PRESET) */ .btn.sb-solid { /* no changes to .btn */ } .btn.sb-ghost { border-width:2px; border-style:solid; border-radius:0; padding:8px 13px; background-color:none; } .btn.sb-ghost.sb-small { padding:3px 5px; } .btn.sb-ghost.sb-large { padding:12px 20px; } .btn.sb-ghost.sb-red { border-color:#E03838; color:#E03838; background-color:transparent; } /* background-color:rgba(224,56,56,0.125); */ .btn.sb-ghost.sb-red:hover { background-color:rgba(224,56,56,0.25) } .btn.sb-ghost.sb-yellow { border-color:#FFD52D; color:#FFD52D; background-color:transparent; } /* background-color:rgba(255,213,45,0.125); */ .btn.sb-ghost.sb-yellow:hover { background-color:rgba(255,213,45,0.25); } .btn.sb-ghost.sb-green { border-color:#8BC81A; color:#8BC81A; background-color:transparent; } /* background-color:rgba(139,200,26,0.125); */ .btn.sb-ghost.sb-green:hover { background-color:rgba(139,200,26,0.25); } .btn.sb-ghost.sb-teal { border-color:#078C87; color:#078C87; background-color:transparent; } /* background-color:rgba(7,140,135,0.125) */ .btn.sb-ghost.sb-teal:hover { background-color:rgba(7,140,135,0.25); } .btn.sb-ghost.sb-cyan { border-color:#1CB5ED; color:#1CB5ED; background-color:transparent; } /* background-color:rgba(28,181,237,0.125) */ .btn.sb-ghost.sb-cyan:hover { background-color:rgba(28,181,237,0.25); } .btn.sb-ghost.sb-blue { border-color:#4871E2; color:#4871E2; background-color:transparent; } /* background-color:rgba(72,113,226,0.125) */ .btn.sb-ghost.sb-blue:hover { background-color:rgba(72,113,226,0.25); } .btn.sb-ghost.sb-purple { border-color:#A03CC1; color:#A03CC1; background-color:transparent; } /* background-color:rgba(160,60,193,0.125) */ .btn.sb-ghost.sb-purple:hover { background-color:rgba(160,60,193,0.25); } .btn.sb-ghost.sb-magenta { border-color:#C92471; color:#C92471; background-color:transparent; } /* background-color:rgba(201,36,113,0.125) */ .btn.sb-ghost.sb-magenta:hover { background-color:rgba(201,36,113,0.25); } .btn.sb-ghost.sb-dark { border-color:#384044; color:#384044; background-color:transparent; } /* background-color:rgba(56,64,68,0.125) */ .btn.sb-ghost.sb-dark:hover { background-color:rgba(56,64,68,0.25); } .btn.sb-ghost.sb-gray { border-color:#778483; color:#778483; background-color:transparent; } /* background-color:rgba(119,132,131,0.125) */ .btn.sb-ghost.sb-gray:hover { background-color:rgba(119,132,131,0.25); } .btn.sb-ghost.sb-light { border-color:#E0DFD9; color:#E0DFD9; background-color:transparent; } /* background-color:rgba(224,223,217,0.125) */ .btn.sb-ghost.sb-light:hover { background-color:rgba(224,223,217,0.25); } /* 3D (DEFAULT PRESET) */ .btn.sb-3d { box-shadow:inset 0 1px 1px rgba(255,255,255,0.72), inset 0 -1px 1px rgba(0,0,0,0.32); } .btn.sb-3d:after { content:""; position:absolute; left:0; bottom:0; height:100%; width:100%; z-index:2; background:-moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.2))); background:-webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.2) 100%); background:-o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.2) 100%); background:-ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.2) 100%); background:linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.2) 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#33000000',GradientType=0); } /* SHADOW (DEFAULT PRESET) */ .btn.sb-shadow { box-shadow:0 1px 3px rgba(0,0,0,0.5), 0 0 8px rgba(0,0,0,0.2); } /* countersunk (DEFAULT PRESET) */ .btn.sb-countersunk { box-shadow: 0 2px 18px rgba(33,33,33,0.6), /* dark glow */ 0 -1px 1px rgba(0,0,0,0.5), 0 1px 2px #fff, 0 2px 1px #fff, 0 -1px 0 rgba(255,255,255,1), 0 1px 0 rgba(0,0,0,0.5); border:1px solid rgba(0,0,0,0.4)!important; padding:9px 14px; } .btn.sb-countersunk.sb-small { padding:4px 6px; } .btn.sb-countersunk.sb-large { padding:13px 19px; } /* 3D + SHADOW (COMBINED BOX SHADOWS) (DEFAULT PRESET) */ .btn.sb-3d.sb-shadow { box-shadow: inset 0 1px 1px rgba(255,255,255,0.44), inset 0 -1px 1px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.5), 0 0 8px rgba(0,0,0,0.2); } /* 3D + COUNTERSUNK (COMBINED BOX SHADOWS) (DEFAULT PRESET) */ .btn.sb-3d.sb-countersunk { box-shadow: inset 0 1px 1px rgba(255,255,255,0.44), inset 0 -1px 1px rgba(0,0,0,0.25), 0 2px 18px rgba(33,33,33,0.6), /* dark glow */ 0 -1px 1px rgba(0,0,0,0.5), 0 1px 2px #fff, 0 2px 1px #fff, 0 -1px 0 rgba(255,255,255,1), 0 1px 0 rgba(0,0,0,0.5); } /* EMBOSS TEXT (DEFAULT PRESET) */ .btn.sb-emboss { text-shadow:0 -1px 0 rgba(0,0,0,0.52); } .btn.sb-emboss.sb-dark, .sb-emboss.sb-blue { text-shadow:0 -1px 0 rgba(0,0,0,0.82); } .btn.sb-yellow.sb-emboss { text-shadow:0 0 0 #FFD52D, 0 1px 0 #fff; } .btn.sb-green.sb-emboss { text-shadow:0 0 0 #8BC81A, 0 1px 0 rgba(255,255,255,0.72); } .btn.sb-light.sb-emboss { text-shadow:0 1px 0 #fff; } .btn.sb-ghost.sb-emboss { text-shadow:0 1px 0 rgba(0,0,0,0.32); } /* GLOSSY (DEFAULT PRESET) */ .btn.sb-glossy, .btn.sb-glossy2 { position:relative; } .btn.sb-glossy:before, .btn.sb-glossy2:before { content:""; position:absolute; z-index:3; top:2px; left:2px; right:2px; bottom:50%; /* IE will have moderate issues @fullheight here */ border-radius:2px; background:-moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.16) 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0.16))); background:-webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.16) 100%); background:-o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.16) 100%); background:-ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.16) 100%); background:linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0.16) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#1affffff',GradientType=0 ); } .btn.sb-glossy2:before { border-radius:2px 2px 50% 50%; background: -moz-radial-gradient(center, top, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0.24) 31%, rgba(255,255,255,0) 100%); background: -webkit-gradient(radial, center top, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.24)), color-stop(31%,rgba(255,255,255,0.24)), color-stop(100%,rgba(255,255,255,0))); background: -webkit-radial-gradient(center, top, rgba(255,255,255,0.24) 0%,rgba(255,255,255,0.24) 31%,rgba(255,255,255,0) 100%); background: -o-radial-gradient(center, top, rgba(255,255,255,0.24) 0%,rgba(255,255,255,0.24) 31%,rgba(255,255,255,0) 100%); background: -ms-radial-gradient(center, top, rgba(255,255,255,0.24) 0%,rgba(255,255,255,0.24) 31%,rgba(255,255,255,0) 100%); background: radial-gradient(ellipse at top, rgba(255,255,255,0.24) 0%,rgba(255,255,255,0.24) 31%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3dffffff', endColorstr='#00ffffff',GradientType=1 ); }