587 lines
16 KiB
CSS
587 lines
16 KiB
CSS
/*
|
|
----------------------------------------------------------------
|
|
|
|
preview.css
|
|
Gravity Forms Form Preview Styles
|
|
http://www.gravityforms.com
|
|
updated: November 11, 2016 9:28 AM GMT-5
|
|
|
|
Gravity Forms is a Rocketgenius project
|
|
copyright 2008-2016 Rocketgenius Inc.
|
|
http: //www.rocketgenius.com
|
|
this may not be redistributed without the
|
|
express written permission of the author.
|
|
|
|
NOTE: DO NOT EDIT THIS FILE!
|
|
THIS FILE IS REPLACED DURING AUTO UPGRADE
|
|
AND ANY CHANGES MADE HERE WILL BE OVERWRITTTEN.
|
|
|
|
----------------------------------------------------------------
|
|
*/
|
|
|
|
html {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
*,
|
|
*:before,
|
|
*:after {
|
|
box-sizing: inherit;
|
|
}
|
|
|
|
body {
|
|
display: block !important;
|
|
font-family: "lucida sans", "lucida grande", lucida , arial, sans-serif;
|
|
font-size: 16px;
|
|
padding: 0 0 20px 0;
|
|
background-color: #F1F1F1;
|
|
}
|
|
|
|
div#preview_hdr {
|
|
margin: 0;
|
|
color: #FFF;
|
|
font-family: "Open Sans",sans-serif;
|
|
padding: 10px 20px 8px 0;
|
|
font-size: 16px;
|
|
background-color: #0074A2;
|
|
display:block !important;
|
|
}
|
|
|
|
div#preview_hdr h2 {
|
|
font-weight: normal;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
font-size: 18px;
|
|
white-space: nowrap !important;
|
|
}
|
|
|
|
div#preview_hdr div:first-child {
|
|
padding-left: 16px;
|
|
}
|
|
|
|
div#preview_hdr span.toggle_helpers {
|
|
width: auto !important;
|
|
display: block;
|
|
float: right;
|
|
text-align: right;
|
|
margin-top: 2px;
|
|
font-family: "lucida sans", "lucida grande", lucida , sans-serif;
|
|
color: #FFF;
|
|
font-weight: normal;
|
|
letter-spacing: normal;
|
|
font-size: 12px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
div#preview_hdr span.toggle_helpers label {
|
|
line-height: 1;
|
|
}
|
|
|
|
div#preview_hdr a {
|
|
color: #FFF;
|
|
text-decoration: none;
|
|
display: inline;
|
|
font-weight: normal;
|
|
letter-spacing: normal;
|
|
font-size: 12px;
|
|
}
|
|
|
|
div#preview_hdr a:hover {
|
|
color: #FFF;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
div#preview_note {
|
|
background-color: #fff;
|
|
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
|
|
display: inline-block;
|
|
font-family: "lucida sans", "lucida grande", lucida , sans-serif;
|
|
font-size: 12px;
|
|
line-height: 1.6;
|
|
margin: 12px 24px -6px 24px;
|
|
padding: 11px 30px 11px 15px;
|
|
position: relative;
|
|
text-align: left;
|
|
border-left: 4px solid #ffba00;
|
|
}
|
|
|
|
div#preview_note i.hidenotice {
|
|
margin-left: 6px;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
width: 10px;
|
|
height: 10px;
|
|
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9Ii0yODkgMzgxIDMyIDMyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IC0yODkgMzgxIDMyIDMyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6Izc5MDAwMDt9PC9zdHlsZT48cGF0aCBjbGFzcz0ic3QwIiBkPSJNLTI1OC4zLDM4Ny44bC05LjIsOS4zbDkuMiw5LjJjMC40LDAuNCwwLjQsMSwwLDEuNGwtNC4yLDQuMmMtMC40LDAuNC0xLDAuNC0xLjQsMGwtOS4yLTkuMmwtOS4xLDkuMmMtMC40LDAuNC0xLDAuNC0xLjQsMGwtNC4yLTQuMmMtMC40LTAuNC0wLjQtMSwwLTEuNGw5LjEtOS4ybC05LjEtOS4xYy0wLjQtMC40LTAuNC0xLDAtMS40bDQuMi00LjJjMC40LTAuNCwxLTAuNCwxLjQsMGw5LjEsOS4xbDkuMi05LjNjMC40LTAuNCwxLTAuNCwxLjQsMGw0LjIsNC4yQy0yNTcuOSwzODYuOC0yNTcuOSwzODcuNC0yNTguMywzODcuOHoiLz48L3N2Zz4=);
|
|
background-repeat: no-repeat;
|
|
background-size: 10px 10px;
|
|
position: absolute;
|
|
top: 15px;
|
|
right: 10px;
|
|
}
|
|
|
|
div#preview_form_container {
|
|
padding: 20px 20px 32px 20px;
|
|
background-color: #FFF;
|
|
border: 1px solid #FFF;
|
|
border-bottom: 4px solid #D3D3D3;
|
|
}
|
|
|
|
div#preview_form_container.showgrid {
|
|
border: 1px solid #E6E6E6;
|
|
border-bottom: 4px solid #D3D3D3;
|
|
background-image:url(../images/preview_grid.gif);
|
|
background-position: 20px 0;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
@media only screen and (min-width: 641px) {
|
|
|
|
div#preview_form_container.showgrid .gform_wrapper form {
|
|
z-index: 50 !important;
|
|
position: relative;
|
|
}
|
|
|
|
div#preview_form_container.showgrid span.rule25 {
|
|
padding-left: 4px;
|
|
display: inline-block;
|
|
height: 100% !important;
|
|
border-left: 1px solid rgba(116, 156, 40, .5);
|
|
position: absolute;
|
|
left: 25%;
|
|
top: 0;
|
|
vertical-align: top;
|
|
z-index: 1;
|
|
}
|
|
|
|
div#preview_form_container.showgrid span.rule25:before {
|
|
content:"25%";
|
|
font-size: .75rem;
|
|
color: rgba(116, 156, 40, .5);
|
|
background-color: rgba(255, 255, 255, .5);
|
|
margin-left: -.75rem;
|
|
font-weight: 700;
|
|
font-family: monospace;
|
|
}
|
|
|
|
div#preview_form_container.showgrid span.rule33 {
|
|
padding-left: 4px;
|
|
display: inline-block;
|
|
height: 100% !important;
|
|
border-left: 1px solid rgba(198, 7, 9, .25);
|
|
position: absolute;
|
|
left: 33.3%;
|
|
top: 0;
|
|
vertical-align: top;
|
|
z-index: 1;
|
|
}
|
|
|
|
div#preview_form_container.showgrid span.rule33:before {
|
|
content:"33%";
|
|
font-size: .75rem;
|
|
color: rgba(198, 7, 9, .5);
|
|
background-color: rgba(255, 255, 255, .5);
|
|
margin-left: -.75rem;
|
|
font-weight: 700;
|
|
font-family: monospace;
|
|
}
|
|
|
|
div#preview_form_container.showgrid span.rule50 {
|
|
padding-left: 4px;
|
|
display: inline-block;
|
|
height: 100% !important;
|
|
border-left: 1px solid rgba(116, 156, 40, .5);
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 0;
|
|
vertical-align: top;
|
|
z-index: 1;
|
|
}
|
|
|
|
div#preview_form_container.showgrid span.rule50:before {
|
|
content:"50%";
|
|
font-size: .75rem;
|
|
color: rgba(116, 156, 40, .5);
|
|
background-color: rgba(255, 255, 255, .5);
|
|
margin-left: -.75rem;
|
|
font-weight: 700;
|
|
font-family: monospace;
|
|
}
|
|
|
|
div#preview_form_container.showgrid span.rule66 {
|
|
padding-left: 4px;
|
|
display: inline-block;
|
|
height: 100% !important;
|
|
border-left: 1px solid rgba(198, 7, 9, .25);
|
|
position: absolute;
|
|
left: 66.6%;
|
|
top: 0;
|
|
vertical-align: top;
|
|
z-index: 1;
|
|
}
|
|
|
|
div#preview_form_container.showgrid span.rule66:before {
|
|
content:"66%";
|
|
font-size: .75rem;
|
|
color: rgba(198, 7, 9, .5);
|
|
background-color: rgba(255, 255, 255, .5);
|
|
margin-left: -.75rem;
|
|
font-weight: 700;
|
|
font-family: monospace;
|
|
}
|
|
|
|
div#preview_form_container.showgrid span.rule75 {
|
|
padding-left: 4px;
|
|
display: inline-block;
|
|
height: 100% !important;
|
|
border-left: 1px solid rgba(116, 156, 40, .5);
|
|
position: absolute;
|
|
left: 75%;
|
|
top: 0;
|
|
vertical-align: top;
|
|
z-index: 1;
|
|
}
|
|
|
|
div#preview_form_container.showgrid span.rule75:before {
|
|
content:"75%";
|
|
font-size: .75rem;
|
|
color: rgba(116, 156, 40, .5);
|
|
background-color: rgba(255, 255, 255, .5);
|
|
margin-left: -.75rem;
|
|
font-weight: 700;
|
|
font-family: monospace;
|
|
}
|
|
|
|
}
|
|
|
|
.gform_wrapper {
|
|
color: #000;
|
|
font-size: 1em;
|
|
margin: 16px auto;
|
|
}
|
|
|
|
.gform_footer input.button,
|
|
.gform_footer input[type=button],
|
|
.gform_page_footer input.button,
|
|
.gform_page_footer input[type=button] {
|
|
border: none;
|
|
font-size: 1em;
|
|
text-decoration: none;
|
|
color: #FFF;
|
|
background-color: #3498db;
|
|
box-shadow: inset 0px 1px 0px #73b0d8, 0px 4px 0px #2980b9;
|
|
text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
|
|
position: relative;
|
|
padding: 12px 24px;
|
|
border-radius: 4px;
|
|
-webkit-appearance: none !important;
|
|
}
|
|
|
|
.gform_wrapper.gf_browser_ie .gform_footer input.button,
|
|
.gform_wrapper.gf_browser_ie .gform_footer input[type=button],
|
|
.gform_wrapper.gf_browser_ie .gform_page_footer input.button,
|
|
.gform_wrapper.gf_browser_ie .gform_page_footer input[type=button] {
|
|
padding: 12px 24px 12px 24px !important;
|
|
}
|
|
|
|
.gform_footer input.button:hover,
|
|
.gform_footer input[type=button]:hover,
|
|
.gform_page_footer input.button:hover,
|
|
.gform_page_footer input[type=button]:hover {
|
|
color: #FFF;
|
|
background-color: #4ba7e5;
|
|
}
|
|
|
|
div#helper_legend_container,
|
|
div#helper_legend_container ul#helper_legend {
|
|
display: none;
|
|
}
|
|
|
|
div#browser_size_info {
|
|
position: fixed;
|
|
right: 5px;
|
|
bottom: 5px;
|
|
z-index: 9999;
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
width: auto;
|
|
display: -moz-inline-stack;
|
|
display: inline-block;
|
|
padding: 4px 8px;
|
|
background-color: #FFFBCC;
|
|
border: 1px solid #E6DB55;
|
|
}
|
|
|
|
@media only screen and (min-width: 320px) {
|
|
|
|
/* experimental styles to display field ids and class names in preview */
|
|
|
|
div#helper_legend_container {
|
|
background-color:#fff;
|
|
padding: 12px 20px 16px 20px;
|
|
margin: 16px 24px 0 24px;
|
|
width: auto;
|
|
border-bottom: 4px solid #D3D3D3;
|
|
}
|
|
|
|
div#helper_legend_container ul#helper_legend {
|
|
display: block;
|
|
}
|
|
|
|
ul#helper_legend li {
|
|
display: -moz-inline-stack;
|
|
display: inline-block;
|
|
width: auto;
|
|
vertical-align: middle;
|
|
font-size: 16px;
|
|
position: relative;
|
|
padding-left: 20px;
|
|
margin-right: 16px;
|
|
}
|
|
|
|
ul#helper_legend li.showclass:before {
|
|
content:"";
|
|
width: 16px;
|
|
height: 16px;
|
|
display: -moz-inline-stack;
|
|
display: inline-block;
|
|
position: absolute;
|
|
top: 4px;
|
|
left: 0;
|
|
background-color: #ff9;
|
|
border: 2px solid #FC6;
|
|
}
|
|
|
|
ul#helper_legend li.showid:before {
|
|
content:"";
|
|
width: 16px;
|
|
height: 16px;
|
|
display: -moz-inline-stack;
|
|
display: inline-block;
|
|
position: absolute;
|
|
top: 4px;
|
|
left: 0;
|
|
background-color: #CF9;
|
|
border: 2px solid #73e600;
|
|
}
|
|
|
|
.gform_wrapper .gf_showme ul.gform_fields li.gfield:before {
|
|
content:"\25bc " attr(id);
|
|
line-height: 2.5;
|
|
display: block;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
background-color: #CF9;
|
|
border-left: 4px solid #73e600;
|
|
color: #060;
|
|
padding: 2px 4px;
|
|
text-indent: 4px;
|
|
font-family: monospace;
|
|
}
|
|
|
|
.gform_wrapper .gf_showme ul.gfield_checkbox li label:before,
|
|
.gform_wrapper .gf_showme ul.gfield_radio li label:before {
|
|
content:"\25bc " attr(id);
|
|
line-height: 2.5;
|
|
display: block;
|
|
font-size: 11px;
|
|
font-weight: 400;
|
|
background-color: #CF9;
|
|
border-left: 4px solid #73e600;
|
|
color: #060;
|
|
padding: 2px 4px;
|
|
text-indent: 4px;
|
|
font-family: monospace;
|
|
}
|
|
|
|
.gform_wrapper .gf_showme .gform_heading,
|
|
.gform_wrapper .gf_showme .gform_body,
|
|
.gform_wrapper .gf_showme .gform_footer,
|
|
.gform_wrapper .gf_showme .gform_page_footer,
|
|
.gform_wrapper .gf_showme .gform_page {
|
|
border: 1px dashed #F60;
|
|
padding: 16px;
|
|
}
|
|
|
|
.gform_wrapper .gf_showme .gform_heading .gform_title,
|
|
.gform_wrapper .gf_showme .gform_heading .gform_description {
|
|
border: 1px dashed #060;
|
|
padding: 16px;
|
|
margin-top: 8px;
|
|
display: block;
|
|
}
|
|
|
|
.gform_wrapper .gf_showme ul.gform_fields li.gfield {
|
|
border: 1px dashed #060;
|
|
margin-top: 32px !important;
|
|
padding: 16px;
|
|
}
|
|
|
|
.gform_wrapper .gf_showme ul.gform_fields label.gfield_label {
|
|
border: 1px dashed #060;
|
|
padding: 16px;
|
|
}
|
|
|
|
.gform_wrapper .gf_showme ul.gform_fields label.gfield_label span.gfield_required {
|
|
border: 1px dashed #060;
|
|
padding: 8px;
|
|
display: -moz-inline-stack;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
.gform_wrapper .gf_showme ul.gform_fields,
|
|
.gform_wrapper .gf_showme ul.gform_fields .ginput_container,
|
|
.gform_wrapper .gf_showme ul.gform_fields li .gfield_description,
|
|
.gform_wrapper .gf_showme table.gfield_list,
|
|
.gform_wrapper .gf_showme table.gfield_list td.gfield_list_cell,
|
|
.gform_wrapper .gf_showme table.gfield_list td.gfield_list_icons,
|
|
.gform_wrapper .gf_showme .gform_card_icon_container,
|
|
.gform_wrapper .gf_showme ul.gfield_checkbox,
|
|
.gform_wrapper .gf_showme ul.gfield_checkbox li,
|
|
.gform_wrapper .gf_showme ul.gfield_radio,
|
|
.gform_wrapper .gf_showme ul.gfield_radio li,
|
|
.gform_wrapper .gf_showme .gform_footer a.gform_save_link,
|
|
.gform_wrapper .gf_showme .gform_page_footer a.gform_save_link,
|
|
.gform_wrapper .gf_showme .chosen-container,
|
|
.gform_wrapper .gf_showme .gsection_description,
|
|
.gform_wrapper .gf_showme .gsection_title {
|
|
border: 1px dashed #060;
|
|
padding: 16px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.gform_wrapper .gf_showme ul.gfield_checkbox li {
|
|
display: block;
|
|
margin-bottom: 8px !important;
|
|
}
|
|
.gform_wrapper .gf_showme li.gf_list_2col ul.gfield_checkbox li,
|
|
.gform_wrapper .gf_showme li.gf_list_3col ul.gfield_checkbox li,
|
|
.gform_wrapper .gf_showme li.gf_list_4col ul.gfield_checkbox li,
|
|
.gform_wrapper .gf_showme li.gf_list_5col ul.gfield_checkbox li {
|
|
margin-bottom: 8px !important;
|
|
}
|
|
.gform_wrapper .gf_showme li.gf_list_2col ul li {
|
|
width: 49% !important;
|
|
margin-right: 8px !important;
|
|
}
|
|
.gform_wrapper .gf_showme li.gf_list_3col ul li {
|
|
width: 32.3% !important;
|
|
margin-right: 8px !important;
|
|
}
|
|
.gform_wrapper .gf_showme li.gf_list_4col ul li {
|
|
width: 24% !important;
|
|
margin-right: 8px !important;
|
|
}
|
|
.gform_wrapper .gf_showme li.gf_list_5col ul li {
|
|
width: 19% !important;
|
|
margin-right: 8px !important;
|
|
}
|
|
.gform_wrapper .gf_showme li.gf_list_inline ul li {
|
|
margin-right: 8px !important;
|
|
}
|
|
|
|
.gform_wrapper .gf_showme table.gfield_list td.gfield_list_cell {
|
|
position: relative;
|
|
}
|
|
|
|
.gform_wrapper .gf_showme table.gfield_list {
|
|
display: -moz-inline-stack;
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
.gform_wrapper .gf_showme table.gfield_list thead,
|
|
.gform_wrapper .gf_showme table.gfield_list tbody,
|
|
.gform_wrapper .gf_showme table.gfield_list tfoot {
|
|
width: 100%;
|
|
}
|
|
|
|
.gform_wrapper .gf_showme ul.gform_fields li .ginput_container_name span,
|
|
.gform_wrapper .gf_showme ul.gform_fields li .ginput_container_address span {
|
|
border: 1px dashed #060;
|
|
padding: 16px;
|
|
margin-top: 8px;
|
|
margin-right: 8px;
|
|
}
|
|
.gform_wrapper .gf_showme ul.gform_fields li .ginput_container_address span.ginput_full {
|
|
width: 100%;
|
|
display: -moz-inline-stack;
|
|
display: inline-block;
|
|
}
|
|
.gform_wrapper .gf_showme ul.gform_fields li .ginput_container_address span.ginput_left,
|
|
.gform_wrapper .gf_showme ul.gform_fields li .ginput_container_address span.ginput_right {
|
|
width: 49%;
|
|
}
|
|
|
|
|
|
.gform_wrapper .gf_showme ul.gform_fields li .ginput_container_name span:last-child,
|
|
.gform_wrapper .gf_showme ul.gform_fields li .ginput_container_address span:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.gform_wrapper .gf_showme ul.gform_fields li.gfield.gf_left_half,
|
|
.gform_wrapper .gf_showme ul.gform_fields li.gfield.gf_right_half {
|
|
width: 49%;
|
|
}
|
|
|
|
.gform_wrapper .gf_showme ul.gform_fields li.gfield.gf_left_half,
|
|
.gform_wrapper .gf_showme ul.gform_fields li.gfield.gf_left_third,
|
|
.gform_wrapper .gf_showme ul.gform_fields li.gfield.gf_middle_third {
|
|
margin-right:16px;
|
|
}
|
|
.gform_wrapper .gf_showme *:not(label):after,
|
|
.gform_wrapper .gf_showme *:not(option):after,
|
|
.gform_wrapper .gf_showme label.gfield_label:after,
|
|
.gform_wrapper .gf_showme ul.gform_fields li.gfield:after,
|
|
.gform_wrapper .gf_showme ul.gfield_checkbox li label:after,
|
|
.gform_wrapper .gf_showme .gform_footer input[type='submit'].gform_button.button:after {
|
|
content: "\25b2 " attr(class);
|
|
line-height: 2.5;
|
|
display: block;
|
|
width: auto;
|
|
font-size: 11px;
|
|
font-weight: 400;
|
|
background-color: #FF9;
|
|
border-left: 4px solid #FC6;
|
|
margin-top: 8px;
|
|
padding: 2px 4px;
|
|
color: #963;
|
|
text-indent: 4px;
|
|
font-family: monospace;
|
|
}
|
|
|
|
.gform_wrapper .gf_showme .gform_footer input[type='submit'].gform_button.button {
|
|
display: -moz-inline-stack;
|
|
display: inline-block;
|
|
}
|
|
|
|
.gform_wrapper .gf_showme li.gfield_html *:after,
|
|
.gform_wrapper .gf_showme table thead:after,
|
|
.gform_wrapper .gf_showme table tbody:after,
|
|
.gform_wrapper .gf_showme table th:after,
|
|
.gform_wrapper .gf_showme table tr:after,
|
|
.gform_wrapper .gf_showme table tfoot:after,
|
|
.gform_wrapper .gf_showme .ginput_full label:after,
|
|
.gform_wrapper .gf_showme .ginput_left label:after,
|
|
.gform_wrapper .gf_showme .ginput_right label:after,
|
|
.gform_wrapper .gf_showme .gf_clear:after,
|
|
.gform_wrapper .gf_showme .ginput_container_multiselect option:after,
|
|
.gform_wrapper .gf_showme ul.gfield_checkbox li label:after,
|
|
.gform_wrapper .gf_showme ul.gfield_radio li label:after,
|
|
.gform_wrapper .gf_showme .ginput_container_name label:after,
|
|
.gform_wrapper .gf_showme .ginput_container_select option:after,
|
|
.gform_wrapper .gf_showme option:after {
|
|
content: none !important;
|
|
}
|
|
|
|
div#preview_form_container {
|
|
margin: 24px;
|
|
}
|
|
|
|
}
|
|
|
|
@media only screen and (max-width: 640px) {
|
|
span.toggle_helpers {
|
|
display: none !important;
|
|
}
|
|
|
|
} |