/*********************************************************************************************************************************************************************************************** * * [wppizza add ingredients css - source] * * the plugin uses a minified version of this file called wppizza-addingredients.min.css (minified via http://cssminifier.com/ ) * if you want to customise the css you should - preferably - create a file called wppizza-addingredients-custom.css in your theme directory and overwrite only what you need to overwrite. * as it will be read AFTER the main css. * However, if you really want to, you can also create a file called wppizza-addingredients.css in your theme directory which will then be loaded INSTEAD OF wppizza-addingredients.min.css * * ***********************************************************************************************************************************************************************************************/ /* block page scroll on popup */ body.modal-open {position: absolute; width: 100%;height: 100%; overflow: hidden} /**thickbox ADDED IN VERSION 3.2*/ #TB_overlay{position:fixed;z-index:2100 !important;top:0;right:0;left:0;bottom:0;background:#FFFFFF;overflow:auto;height:auto;width:auto;}/**thickbox overwrite-> ADDED/AMENDED IN VERSION 4.2*/ #TB_window.wppizza-add-ingredients-tbw{z-index:2100 !important;padding:0 !important;overflow-y:auto !important} #TB_window.wppizza-add-ingredients-tbw >#TB_title{height:auto !important;overflow:auto}/*to account for possible additional info in title*/ #TB_window.wppizza-add-ingredients-tbw #TB_closeWindowButton > .screen-reader-text{clip: rect(1px, 1px, 1px, 1px);position: absolute !important;height: 1px;width: 1px;overflow: hidden;} #TB_ajaxWindowTitle.wppizza-add-ingredients-tbttl{white-space:nowrap;}/*ADDED IN VERSION 4.2 */ #TB_ajaxWindowTitle.wppizza-add-ingredients-tbttl>div.wppizza-ingredients-info-restrictions,.wppizza-ingredients-info-restrictions{font-weight:normal;font-size:90%;margin:0;padding:0 0 5px 0;line-height:90%;text-align:center} #TB_ajaxWindowTitle.wppizza-add-ingredients-tbttl>div.wppizza-ingredients-info-restrictions{text-align:left} #TB_ajaxContent.wppizza-add-ingredients-tbc{overflow:hidden;padding: 0 15px 0 15px;box-sizing:content-box !important;position:relative}/*ADDED IN VERSION 4.2 */ #TB_ajaxContent #wppizza-cart-cancel{display:none}/*no need for that in popup as theres a close in the title ADDED IN VERSION 4.2 */ #TB_ajaxContent .wppizza-ingredients{background-color:#FFFFFF;color:#000000;} #TB_ajaxContent .wppizza-ingredients-loading{position:absolute !important;}/*let loader cover whole thickbox and center gif/svg*/ #wppizza-ai-cover{margin:0px;padding:0;position: fixed;z-index: 1; background:inherit}/*a small div to make the bottom of the popup a bit nicer when scrolling (popup only). do not edit other than 'color/background' and/or 'display' properties ADDED IN VERSION 4.2 */ /***wrapper containers***/ #wppizza-ingr-form{margin:0} .wppizza-ingredients,.wppizza-ingredients-multi{overflow:auto;padding:15px 5px 0;position:relative;clear:both;}/*AMENDED 4.2*/ .wppizza-ingredients-multi{padding-top:0}/* otherwsie we will have double paddings */ /**loading ingredients icon**/ .wppizza-ingredients-loading{position:relative !important;top:0;bottom:0;left: 0;right: 0;min-height:150px;padding:0;margin:0;background-color:#FFFFFF;} /**cancel adding ingredients icon**/ #wppizza-cart-cancel{font-family: Verdana;margin:0 5px 0 0;cursor:pointer;} /***container that lists ingredients currently selected as well as subtotal price***/ #wppizza-ingredients-selected{overflow:auto;margin-top:0;margin-bottom:10px;background-color:#FCFCFC;border:1px dotted #CECECE;border-top:none;/*width:100%*/} /*currently selected ingredients*/ .wppizza-current-ingredients{margin:0;display:block;overflow:auto;line-height:normal;padding:2px;min-height:20px;box-sizing:content-box !important;}/*ADDED PADDING IN VERSION 2.0, ADDED MIN HEIGHT 4.2*/ .wppizza-current-ingredients>p{margin:0;padding:0} .wppizza-current-ingredients>ul{margin:0 !important;} .wppizza-current-ingredients>ul>li{float:left;padding:0 0 4px 0; /*margin:0 2px 2px 2px !important*/;border:none;overflow:auto;font-size:100%} /**sticky currently added ingredients in popup ADDED IN VERSION 4.0.1**/ .wppizza-current-ingredients-sticky-wrap{position:relative;} .wppizza-current-ingredients-sticky{background:inherit;padding:0; padding-top:5px;padding-bottom:5px;box-sizing:content-box !important;position:fixed;z-index:1}/*make right at least 15px to account for possible scrollbars. DO NOT SET top,left,right etc : AMENDED IN VERSION 4.2*/ .wppizza-current-ingredients-sticky legend{width:100%;overflow:auto;padding:5px 2px} .wppizza-current-ingredients-sticky #wppizza-ingredients-selected{padding:2px 0 0 0;margin-bottom:0;border-top:1px dotted #CECECE;}/*AMENDED IN VERSION 4.2 */ /*total of baseprice plus added ingredients*/ #wppizza-current-sum{font-weight:600;float:right;white-space:nowrap;}/*AMENDED IN VERSION 4.2 */ #wppizza-current-total{margin-left:3px}/*price*/ /* spinner */ /* spinner update quantity */ #wppizza-sub-info > span.ui-spinner{width:60px; float:right; margin:0 0 0 10px;} #wppizza-sub-info > span.ui-spinner > input{margin:0; padding: 3px 5px; padding-right: 0;border:none;font-size: 90%;} /**button to add to cart**/ .wppizza-diy-to-cart{float:right;width:auto;margin:0 0 0 10px;} /***container that lists all available ingredients for selection***/ .wppizza-list-ingredients{margin:25px 0 5px 0;padding:0;position:relative} .wppizza-list-ingredients>ul{margin:0 !important;} .wppizza-list-ingredients>ul>li:before{content:''} /**slow servers might not return stuff quickly enough for the js to be able to validate, so distinctly deselect groups by adding a covering div and removing it again when the server manages to finally respond**/ .wppizza-ingredients-disable-click{position:absolute;margin:0;padding:0;top:0;right:0;bottom:0;left:0;background:transparent} /**label for ingredients, set cursor*/ .wppizza-doingredient-lbl{cursor:pointer;display:inline} /*selecttable ingredients grouped by price**/ .wppizza-ingredients fieldset{display:block;overflow:visible;border:none}/*CHANGED formfield to fieldset and ADDED overflow:visible for IE7 IN VERSION 2.0*/ .wppizza-ingredients ul{list-style:none !important;margin:0;padding:0;} .wppizza-ingredients legend{width:100%;font-weight:600;display:block;line-height:200%;padding:0;overflow:auto;margin:0} .wppizza-ingredients #wppizza-ingr-form>legend:first-child {border-bottom:1px dotted #CECECE;}/* top legend only */ /* .wppizza-ingredients ul>li{margin:0 2px 2px 2px ;padding:3px 0 2px 0;width:32%;float:left;list-style-type:none !important;font-size:90%;list-style-image:none !important} */ .wppizza-ingredients ul>li{margin:0 2px 2px 2px ;padding:3px 0 ;background:none; width:32%;float:left;list-style-type:none !important;font-size:90%;list-style-image:none !important;} /***added in 4.2.3******/ .wppizza-ingredient-count{padding:0 3px;} /********************************************************************** * * [following declarations ADDED IN VERSION 2.0 * to allow for custom groups (and to make it prettier out of the box * ***********************************************************************/ /**additional info next to custom group label*/ .wppizza-list-ingredients>legend>span{font-size:80%;font-weight:normal} .wppizza-list-ingredients>legend>span:before{content:'('} .wppizza-list-ingredients>legend>span:after{content:')'} /**highlight on error when no ingredient of a required group has been selected*/ .wppizza-list-ingredients>ul{padding:2px;}/*might need to try overflow:auto; here*/ .wppizza-list-ingredients-hilight{background-color:#FFFCCF;border:1px dotted #CECECE;border-top:none;overflow:auto;color:#000000} .wppizza-multi-tab-hilight{} ul.wppizza-multiselect-tabs>li.wppizza-multi-tab-hilight:before{content:'*';color:#FF0000;padding:0 3px;} /**price next to any individual ingredient - only relevant in custom groups**/ .wppizza-doingredient-price{font-size:80%;line-height:80%} .wppizza-doingredient-price:before{content:'('} .wppizza-doingredient-price:after{content:')'} /************************************ * * edit ingredients button/text in cart / orderpage * ************************************/ td.wppizza-ingredients-edit{width:1%;vertical-align:middle} td.wppizza-ingredients-edit > a, td.wppizza-ingredients-edit > a:hover{-webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;} div.wppizza-ingredients-edit{padding:1px 2px; margin:0} div.wppizza-ingredients-edit-pre{float:left;padding-left:0} div.wppizza-ingredients-edit-post{float:right;padding-right:0} /*********************************************************************************************************************************** * * * individual ingredients selections * * ***********************************************************************************************************************************/ /************************ general paddings, fonts etc etc ************************/ .wppizza-current-ingredients .wppizza-remove-ingredient, .wppizza-ingredients ul>li>.wppizza-doingredient{ font-family: Verdana; cursor:pointer; padding:1px 4px; /*line-height:100%;*/ /*font-size:100%;*/ margin-right:3px; color:#000000 } /************************* colours - inactive *************************/ .wppizza-current-ingredients .wppizza-remove-ingredient, .wppizza-ingredients ul>li>.wppizza-ingr-0, .wppizza-ingredients ul>li>.wppizza-ingr-0-selected, .wppizza-ingredients ul>li>.wppizza-ingr-1>span, .wppizza-ingredients ul>li>.wppizza-ingr-2, .wppizza-ingredients ul>li>.wppizza-ingr-2-selected, .wppizza-ingredients ul>li>.wppizza-ingr-3, .wppizza-ingredients ul>li>.wppizza-ingr-4, .wppizza-ingredients ul>li>.wppizza-ingr-4-selected{ text-shadow: 0 1px 1px rgba(255,255,255,0.75); background-color: #f5f5f5; background-image: -moz-linear-gradient(top,#fff,#e6e6e6); background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6)); background-image: -webkit-linear-gradient(top,#fff,#e6e6e6); background-image: -o-linear-gradient(top,#fff,#e6e6e6); background-image: linear-gradient(to bottom,#fff,#e6e6e6); background-repeat: repeat-x; border: 1px solid #ccc; border-color: #e6e6e6 #e6e6e6 #bfbfbf; border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25); border-bottom-color: #b3b3b3; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05); -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05); } /************************* colours - inverted when active *************************/ .wppizza-ingredients ul>li>.wppizza-ingredient-selected, .wppizza-ingredients ul>li>.wppizza-ingr-0-selected, .wppizza-ingredients ul>li>.wppizza-ingr-1-selected>span, .wppizza-ingredients ul>li>.wppizza-ingr-2-selected, .wppizza-ingredients ul>li>.wppizza-ingr-3-selected, .wppizza-ingredients ul>li>.wppizza-ingr-4-selected{ background-image: none; outline: 0; -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05); -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05); box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05); background-color:#e0e0e0; } /**************************** fake radio overrides, make round and set size, padding etc ****************************/ .wppizza-ingredients ul>li>.wppizza-ingr-1, .wppizza-ingredients ul>li>.wppizza-ingr-1-selected{ position: relative; padding:2px 12px 2px 10px !important; } .wppizza-ingredients ul>li>.wppizza-ingr-1>span, .wppizza-ingredients ul>li>.wppizza-ingr-1-selected>span{ position: absolute; top: 0px; left: 0px; width: 20px; height: 20px; text-align: center; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 10px; border-radius: 10px; } /************************************ * * before / checked symbols * ************************************/ /*plus (+) symbol in square boxes when unselected (case 3 has tick symbol below when selected)*/ .wppizza-ingredients ul>li>.wppizza-ingr-0:before, .wppizza-ingredients ul>li>.wppizza-ingr-2:before, .wppizza-ingredients ul>li>.wppizza-ingr-3:before, .wppizza-ingredients ul>li>.wppizza-ingr-4:before, .wppizza-ingredients ul>li>.wppizza-ingr-0-selected:before, .wppizza-ingredients ul>li>.wppizza-ingr-2-selected:before, .wppizza-ingredients ul>li>.wppizza-ingr-4-selected:before{ content:'+'; } /*****remove ingredients (minus symbol)******/ .wppizza-current-ingredients .wppizza-remove-ingredient{padding:2px 6px;} .wppizza-current-ingredients .wppizza-remove-ingredient:before{content:'-';} /*****remove ingredients (tick symbol)******/ .wppizza-ingredients ul>li>.wppizza-ingr-3-selected{padding:2px 4px !important;} .wppizza-ingredients ul>li>.wppizza-ingr-3-selected:before{content:'\2713';} /*****radio selected (center dot)******/ .wppizza-ingredients ul>li>.wppizza-ingr-1-selected>span:before{ content: ""; display: block; width: 8px; height: 8px; margin: 6px auto 0; background-color: #000000; -webkit-border-radius: 4px; border-radius: 4px; } /******dropdowns**************/ .wppizza-ingr-select{} /**hide all hardcoded (+)symbols and inputs so we can use them as fallback for IE7**/ .wppizza-doingredient>b,.wppizza-remove-ingredient>b{display:none} /******************************************************************************************************/ .wppizza-article p{margin:0} /***********button styles when ingredients for halfs/quarters are available*******************************/ .wppizza-multiselect-main{padding-bottom:10px !important;text-align:center}/**amended IN VERSION 4.3.3*/ #TB_ajaxContent .wppizza-multiselect-main{float:none;margin:50px 2px;}/**using thickbox ADDED IN VERSION 4.2*/ #TB_ajaxContent .wppizza-multiselect-main-lbl,.wppizza-multiselect-main-lbl{display:block;margin:10px 0; text-align:center;font-weight:600}/**using thickbox ADDED IN VERSION 4.2*/ #TB_ajaxContent input.wppizza-multi-button-main{margin:4px;}/**using thickbox ADDED IN VERSION 4.2*/ span.wppizza-multi-button-main,.wppizza-multiselect-main input.wppizza-multi-button-main,.wppizza-multiselect-main input.wppizza-addasis{ font-size: 80%; display: inline-block; cursor:pointer; padding:4px 7px 3px 7px; margin:0 4px; min-width:75px; text-align: center; line-height:100%; width: auto; height: auto!important; padding: 4px 6px!important; float: none; /* uncomment below if you want the buttons grey color: #333; text-shadow: 0 1px 1px rgba(255,255,255,0.75); background-color: #f5f5f5; background-image: -moz-linear-gradient(top,#fff,#e6e6e6); background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6)); background-image: -webkit-linear-gradient(top,#fff,#e6e6e6); background-image: -o-linear-gradient(top,#fff,#e6e6e6); background-image: linear-gradient(to bottom,#fff,#e6e6e6); background-repeat: repeat-x; border: 1px solid #ccc; border-color: #e6e6e6 #e6e6e6 #bfbfbf; border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25); border-bottom-color: #b3b3b3; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05); -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05); */ } /**************************************************************************** not really in use a the moment as the buttons get hidden when selected *****************************************************************************/ /* .wppizza-multi-button-main-selected{ background-image: none; outline: 0; -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05); -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05); box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05); background-color:#e0e0e0; } */ /**container holding ingredients that are only selectable for whole item if halfs/quarters are offered**/ div.wppizza-iwhole{border:1px solid #e0e0e0;padding:5px} div.wppizza-iwhole>fieldset{margin:0;padding:0} div.wppizza-iwhole-pre{margin:5px 0 10px 0}/*before other groups*/ div.wppizza-iwhole-post{margin:10px 0 5px 0}/*after other groups*/ /**container holding ingredients for selected half.quarter**/ div.wppizza-imulti{border:1px solid #e0e0e0;border-top:none;padding:5px;margin-bottom:10px} /**first ingredient group in container**/ div.wppizza-imulti>fieldset:first-child{margin-top:0} /**************************************************************************************************** tr - row that shows ingredients in pages etc ****************************************************************************************************/ table.wppizza-order-itemised tr.wppizza-item-row-ingredients > td{padding:0; padding-left:10px; margin 0; font-size:100%;} .wppizza-order-wrap-thankyoupage table.wppizza-order-itemised tr.wppizza-item-row-ingredients > td{padding-left:40px;}/* thank you page */ /* plus sign before ingredients */ /* table.wppizza-order-itemised tr.wppizza-item-row-ingredients > td.wppizza-ingr-added{padding: 0 7px 0 0 ; float: left; display: table-row-group; height: 100%; overflow: auto; -moz-box-sizing: border-box;} */ /**************************************************************************************************** ingredients (cart , pages etc ) ****************************************************************************************************/ .wppizza-item-row-ingredients .wppizza-ingrinfo{text-align:left} .wppizza-item-row-ingredients .wppizza-ingr-comments-toggle, .wppizza-item-row-ingredients .wppizza-ingr-comments{text-align:left} /**************************************************************************************************** grouped ingredients (cart , pages etc ) ****************************************************************************************************/ .wppizza-item-row-ingredients .wppizza-ingrgrp > label, .wppizza-grouped-ingredients .wppizza-ingrgrp > label {font-weight:bold; padding-right:3px; font-size:85%}/* group labels */ .wppizza-item-row-ingredients .wppizza-ingrgrp > label:after, .wppizza-grouped-ingredients .wppizza-ingrgrp > label:after{content:':'} /* group labels */ .wppizza-item-row-ingredients .wppizza-ingrgrp > .wppizza-ingr-item, .wppizza-grouped-ingredients .wppizza-ingrgrp > .wppizza-ingr-item {font-size:85%}/* ingredients*/ /* pages only (cart will never show groups anyway, it's just too small for that */ .wppizza-item-row-ingredients .wppizza-ingrinfo > div:nth-child(2), .wppizza-grouped-ingredients .wppizza-ingrinfo > div:nth-child(2){display:inline} .wppizza-item-row-ingredients .wppizza-ingrinfo > div:nth-child(n+3), .wppizza-grouped-ingredients .wppizza-ingrinfo > div:nth-child(n+3){margin-left:22px} .wppizza-item-row-ingredients .wppizza-ingrinfo > div > span, .wppizza-grouped-ingredients .wppizza-ingrinfo > div > span{font-style:italic} /**************************************************************************************************** additives/allergens (keeping it somewhat separate from main wppizza aadditives css) ****************************************************************************************************/ .wppizza-list-ingredients .wppizza-article-additives{padding: 0 2px;font-size: unset !important; top: -.2em} .wppizza-list-ingredients .wppizza-article-additives > span {padding:0 1px; font-size:90%} /* inline only , not used in popup */ .wppizza-list-ingredients .wppizza-article-additives > span.wppizza-allergen-icon, .wppizza-list-ingredients .wppizza-article-additives > span.wppizza-additive-icon{line-height:22px !important; font-size:0 !important; padding-right:5px !important} /* popup double add missing before/after */ #TB_ajaxContent .wppizza-list-ingredients .wppizza-article-additives:before{content: '*';} #TB_ajaxContent .wppizza-list-ingredients .wppizza-article-additives > span:before{content: '(';} #TB_ajaxContent .wppizza-list-ingredients .wppizza-article-additives > span:after{content: ')';} /**************************************************************************************************** comment/textboxes pre/post ingredients ****************************************************************************************************/ .wppizza-ingredients .wppizza-ingr-comments{margin:3px 0;width:100%;padding-left:0;padding-right:0}/**comment boxes pre/post ingredients*/ .wppizza-ingredients .wppizza-ingr-comments>legend{border: none;width: 100%;font-weight: 600;display: block;line-height: 200%;padding: 0;} .wppizza-ingredients .wppizza-ingr-comments>legend>span{font-size: 80%;font-weight: normal;} .wppizza-ingredients .wppizza-ingr-comments>div{border:1px solid #E0E0E0;margin:0;padding:0;position:relative;left:1px;right:1px;top:1px;bottom:1px;} .wppizza-ingredients .wppizza-ingr-comments>div>textarea{border:none;margin:0;width:100%;height:100px;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;} .wppizza-ingredients .wppizza-ingr-comments>div>input[type="text"]{margin:0;width:100%;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;} /* comments in cart and pages */ .wppizza-ingr-comments{padding:0;margin:0;font-style:italic;font-size: 90%;} .wppizza-ingr-comments .wppizza-ingrcomment-lbl{font-weight:600} .wppizza-ingr-comments .wppizza-ingrcomment-lbl:after{content:':';} .wppizza-item-row-ingredients .wppizza-ingr-comments > div:before{content:'"';} .wppizza-item-row-ingredients .wppizza-ingr-comments > div:after{content:'"';} /*comments toggle in cart**/ .wppizza-ingr-comments-toggle{cursor:pointer;clear:both;margin:0; font-size: 90%;} .wppizza-ingr-comments-toggle:before{padding-right:2px;font-style:normal;} .wppizza-ingr-comments-toggle:before{content:'\25B6';} .wppizza-ingr-comments-toggle-sel:before{content:'\25BC';} .wppizza-cart .wppizza-ingr-comments{display:none;} .wppizza-cart .wppizza-ingr-comments > div:before{content:'';} .wppizza-cart .wppizza-ingr-comments > div:after{content:'';} /* comments input field */ #wppizza-ingr-comments-pre.wppizza-ingr-comments,#wppizza-ingr-comments-post.wppizza-ingr-comments{font-style:normal;} /* #wppizza-send-order .wppizza-ingredients-comments{font-style:italic;font-size: 90%;} #wppizza-send-order .wppizza-ingredients-comment:before{content:'"';} #wppizza-send-order .wppizza-ingredients-comment:after{content:'"';} */ /*make first line inline to line up with + icon .wppizza-ingrinfo-0{display:inline} */ /**************************************************************************************************** tabs ****************************************************************************************************/ ul.wppizza-multiselect-tabs{list-style: none;margin:0;padding:0;border-bottom:1px solid #e0e0e0;} ul.wppizza-multiselect-tabs>li:before{content:''} ul>li.wppizza-multi-tab{cursor:pointer;position:relative;top:1px;border-top:1px solid #e0e0e0;border-left:1px solid #e0e0e0;display:inline;float:none;width:auto;font-size: 90%;padding:2px 5px;min-width:75px;display:inline-block;text-align:center;margin:0;} ul>li.wppizza-multi-tab:last-child{border-right:1px solid #e0e0e0} ul>li.wppizza-multi-tab-selected{background-color:#e0e0e0;} /**************************************************************************************************** icons ****************************************************************************************************/ /**icons before selected ingredients list**/ .wppizza-current-ingredients>ul{overflow:auto;} .wppizza-current-ingredients>ul>li:before{content:''} .wppizza-multi-icon{font-family:Verdana;} /**icons for half/quarter in ingredients selected**/ .wppizza-current-ingredients .wppizza-multi-icon{font-size:100%;padding:2px 5px 0 0;float:left;} /**icons for half/quarter in cart**/ .wppizza-cart-contents .wppizza-multi-icon{font-size:120%;} /**icons for half/quarter on order page**/ #wppizza-send-order .wppizza-multi-icon{font-size:110%;} /************************************************************************* * * if you want to replace the icons with images try the below adding the * images as required (or use :before, or whatever) * * (1-2,2_1) //left half * (2-2,2_2) //right half * (1-4,4_1) //1st quarter * (2-4,4_2) //2nd quarter * (3-4,4_3) //3rd quarter * (4-4,4_4) //4th quarter *************************************************************************/ /* all whole/half/quarter icons */ /* .wppizza-multi-icon{text-indent:-999px;float:left} */ /*cart and orderpage*/ /* .wppizza_multi_icon_2_1{url(path/to/image)} .wppizza_multi_icon_2_2{url(path/to/image)} .wppizza_multi_icon_4_1{url(path/to/image)} .wppizza_multi_icon_4_2{url(path/to/image)} .wppizza_multi_icon_4_3{url(path/to/image)} .wppizza_multi_icon_4_4{url(path/to/image)} */ /*selected ingredients when adding*/ /* .wppizza-multi-icon-1-2{url(path/to/image)} .wppizza-multi-icon-2-2{url(path/to/image)} .wppizza-multi-icon-1-4{url(path/to/image)} .wppizza-multi-icon-2-4{url(path/to/image)} .wppizza-multi-icon-3-4{url(path/to/image)} .wppizza-multi-icon-4-4{url(path/to/image)} */ /***example with 16x16 img first of half and half icons on item .wppizza-multi-icon-1-2{ text-indent:-20px; background:url('http://www.domain.com/image.png') 2px 2px no-repeat; width:16px; height:16px; } ***/ /********************************************************************************************************* * [uncomment the following declarations if you ALWAYS want to show browser native * radio/checkboxes (where they make sense) * [you might have to adjust them a bit here and there to work in your theme] * [as IE 7 does not understand pseudo before/after, they will always be used there (with conditional css] **********************************************************************************************************/ /* .wppizza-ingredients ul>li>.wppizza-input-native>span{display:none} .wppizza-ingredients ul>li>.wppizza-input-native{width:18px;margin:-2px 0 0 0;padding:0;background-color:transparent;background-image:none;border:none;-webkit-box-shadow:none;-moz-box-shadow: none;box-shadow:none} .wppizza-ingredients ul>li>.wppizza-input-native:before{content:''} .wppizza-ingredients ul>li>.wppizza-input-native>b{display:block;text-align:left;text-shadow:none;text-indent:0} .wppizza-ingredients ul>li>.wppizza-input-native>b>input{margin:0;} .wppizza-ingredients ul>li>.wppizza-input-native>b>input[type=checkbox]{margin-left:2px} */ /********************************************************************************************************** * * * handheld/small screen devices * * *************************************************************************************************************/ @media screen and (min-resolution: 160dpi) { #TB_ajaxContent .wppizza-multiselect-main-lbl{/**full, half quarter button label*/ font-size:150%; } #TB_ajaxContent .wppizza-multi-button-main{/**full, half quarter buttons*/ padding:7px 7px !important; font-size:120%; } } @media screen and (max-width: 600px){ /************* * * generally make buttons bigger * *************/ /**add to cart button*/ .wppizza-diy-to-cart{ padding: 8px 8px !important; margin-bottom:4px } /* selection whole/ha;fs/quarters buttons*/ .wppizza-cart-button input.wppizza-multi-button-main{ padding: 6px 8px !important; margin-bottom:4px; } /*multitabs*/ .wppizza-ingredients ul>li.wppizza-multi-tab{ margin-bottom:0px; } /*padding currently selected*/ .wppizza-current-ingredients .wppizza-remove-ingredient, .wppizza-ingredients ul>li>.wppizza-ingr-0, .wppizza-ingredients ul>li>.wppizza-ingr-0-selected, .wppizza-ingredients ul>li>.wppizza-ingr-2, .wppizza-ingredients ul>li>.wppizza-ingr-3, .wppizza-ingredients ul>li>.wppizza-ingr-4 { padding: 4px 8px; } /**checked**/ .wppizza-ingredients ul>li>.wppizza-ingr-3-selected{ padding: 5px 7px 6px !important; } /**radio label**/ .wppizza-ingredients ul>li>.wppizza-ingr-1, .wppizza-ingredients ul>li>.wppizza-ingr-1-selected { padding:4px 15px 2px 10px !important; } /**radio**/ .wppizza-ingredients ul>li>.wppizza-ingr-1>span, .wppizza-ingredients ul>li>.wppizza-ingr-1-selected>span{ width:25px; height:25px; -webkit-border-radius: 25px; border-radius: 25px; } /*selected radio dot*/ .wppizza-ingredients ul>li>.wppizza-ingr-1-selected>span:before{ width: 10px; height: 10px; margin: 8px auto 0; -webkit-border-radius: 10px; border-radius: 10px; } /*li margins*/ .wppizza-ingredients ul>li{ margin-bottom:6px } /*radio as dropdowns */ .wppizza-ingr-select{width:100%} } @media screen and (max-width: 450px){ /*left, right | first second,third fourth tabs*/ .wppizza-ingredients ul>li.wppizza-multi-tab{ width:46% !important; border:none; border-top:1px solid #e0e0e0; } .wppizza-ingredients ul>li.wppizza-multi-tab:nth-child(odd){ border-left:1px solid #e0e0e0; border-right:1px solid #e0e0e0; } .wppizza-ingredients ul>li.wppizza-multi-tab:nth-child(even){ border-right:1px solid #e0e0e0; } } /**really small device**/ @media screen and (max-width: 400px){ /**only 2 ingredients per row - line height is important for mobiles ! make sure to wordwrap*/ .wppizza-ingredients ul>li{width:49% !important; margin:2px 0;line-height:30px;word-wrap:break-word} /*left, right | first second,third fourth tabs*/ .wppizza-ingredients ul>li.wppizza-multi-tab{ width:99% !important; padding:0 1px 0 0; margin:0; border-top:1px solid #e0e0e0; border-left:1px solid #e0e0e0; border-right:1px solid #e0e0e0; border-bottom:1px solid #e0e0e0; } }