/* start by rolling a jQuery-Mobile theme with all the necessary swatches. you'll probably end up duplicating several swatches as you'll want certain parts of the interface to match. when you download, just always name the theme "jqmobile", then place the images folder, the jqmobile.css, and the jqmobile.min.css files into your theme folder jQuery Mobile theme roller: http://jquerymobile.com/themeroller/ below are the swatches we use, which area of the interface uses them, and which parts of that swatch are actually used: a: page (content body) b: header/banner area (content body) c: views menu (content body, button) d: settings menu (button) e: settings drop-down (button) f: stage (content body) g: status bar (content body) h: toolbar (content body, button) i: preview image area (content body) j: options tabs (button) k: options/components/etc list area (content body, button) l: dialog box header & buttons (header/footer bar, button) m: dialog box inside content (content-body, button) DO NOT edit the jqmobile.css file (we use the min version anyway), however we keep it in the theme folder because it can be imported back into theme roller to make changes, DO NOT edit the layout.css file either, do all overrides and extensions in the ext.css file within your theme folder also DO NOT modify or add to the images folder, again this is a pure folder as it comes from the theme roller, copy or add new images to the images-ext folder ---------------------------------------------------------------------------- note that in each functional section below, the #layoutXYZ are the outermost containers for each functional area, the #divXYZ are interior containers use .ui-layout in global to set a universal margin and padding for all #layoutXYZ containers, then override those settings for each #layoutXYZ as needed note that #layoutPreview, #layoutOptionsMenu, and #layoutOptions all need to be the same width if you override the width from layout.css also note that jquery mobile creates a fair bit of markup on the fly, sometimes even destroying the original markup, so be sure to use an inspector like Firebug to find out what classes to style (versus looking at the actual index.php source) */ /* ---------------------------------------------------------------------------- JAVASCRIPT REFERENCED GLOBALS ---------------------------------------------------------------------------- not directly applied to any elements, these are here to allow per-theme defining of items handled by js (mostly SVG stuff) */ /* #d5452a Color from wright website */ .option_color { color: #000000; } /* must be the color of the options. only change if the plan svg uses a non-standard color for options. */ .option_color_highlight_1 { color: #d5452a; } /* desired options rollover color */ .option_color_highlight_2 { color: #d5452a; } /* desired options selected color */ .comp_color { color: #000000; } /* must be the color of the components. only change this if the components library uses a non-standard color. */ .comp_color_highlight { color: #CC0000; } /* desired component selected color */ .comp_halo_color { color: #d5452a; } /* desired halo color */ .comp_halo_color_highlight { color: #CC0000; } /* desired halo button rollover color */ /* ---------------------------------------------------------------------------- GLOBAL ---------------------------------------------------------------------------- tag selectors & globally used classes */ html, body { background: #000; } /* Page Background color */ .ui-body-a, .ui-overlay-a { background: #000000; /* Old browsers */ background: -moz-linear-gradient(top, #000000 0%, #000000 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#000000)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #000000 0%,#000000 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #000000 0%,#000000 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #000000 0%,#000000 100%); /* IE10+ */ background: linear-gradient(to bottom, #000000 0%,#000000 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */} a, a:link, a:visited, a:active, a:hover { text-decoration: none; } hr { size: 1px; line-height: 1px; height: 1px; border: none; background-color: #999; } .ui-layout { margin: 7px; padding: 0; } .ui-content { } .ui-btn { border-radius: 2px; } /* custom font-awesome + jqmobile icon stuff begins here, see: http://fontawesome.github.com/Font-Awesome/ this is here in global because we can re-use these icons anywhere, not just in toolbar (like in a help manual dialog later) we are using the data-icon method of defining a space for an icon on buttons and setting a class name, however, we then use the font-awesome way of doing icons so that we can leverage their large library of icons that scale nice for retina display if we end up making all our own icons, then we ditch font-awesome and then just note how the Options Tabs area uses the regular jQuery-Mobile way of doing custom icons */ .ui-faicon .ui-icon { font-family: FontAwesome; font-weight: normal; font-style: normal; font-size: 1em; background: none; } .ui-icon-help:before { content: "\f059"; } .ui-icon-save:before { content: "\f0c7"; } .ui-icon-print:before { content: "\f02f"; } .ui-icon-reset:before { content: "\f021"; } .ui-icon-fliph:before { content: "\f07e"; } .ui-icon-flipv:before { content: "\f07d"; } .ui-icon-flipv:before { content: "\f07d"; } .ui-icon-flipv:before { content: "\f07d"; } .ui-icon-zoomall:before { content: "\f0b2"; } .ui-icon-zoomin:before { content: "\f00e"; } .ui-icon-zoomout:before { content: "\f010"; } /* ---------------------------------------------------------------------------- HEADER AREA ---------------------------------------------------------------------------- most of the divs inside the header have floats from the layout css #divHeaderBuilder is the builder name text #divHeaderInfo wraps the #divPlanName & #divProjectName */ #layoutHeader { color:#fff; } #divHeader { background: none; } #divHeaderLogo { margin: 10px 10px 0 3px; } #divHeaderClientName { font-size: 1.5em; margin: 30px 0 0 4px; } #divHeaderInfo { margin: 10px 5px; } #divPlanName { font-size:1.8em; color:#1ea9ff; text-transform: uppercase; font-weight: 100; margin-top: 5px; /*1.1em; color: #fff; */ } #divProjectName { font-size: 1.3em; margin-top: 5px; text-transform: uppercase; font-weight: 100; /* color: black; */ } /* ---------------------------------------------------------------------------- POI - Re-recolor CSS magic ---------------------------------------------------------------------------- */ g[id*='poi.'] {fill: #d5452a;} /* ---------------------------------------------------------------------------- VIEWS & SETTINGS MENU ---------------------------------------------------------------------------- */ .ui-dropdown-ctl { } .ui-dropdown-menu { } #layoutMenu { } #divMenu { } #divMenu fieldset, #divMenu .ui-btn { margin: 0; } #divMenu .ui-btn, #divMenu .ui-btn-inner { border-radius: 2px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } #divMenuViews { background: none; } #divMenuSettings { background: none;} #mnuSettings .ui-btn, #mnuSettings .ui-btn-inner { border-radius: 0; } /* ---------------------------------------------------------------------------- STAGE & VIEWS (INCLUDING PLAN) ---------------------------------------------------------------------------- */ #layoutStage { margin-top: 0; margin-right: 0; border-left: 1px solid #000; border-bottom: 1px solid #000; background: #fff url(../../../../../clients/wright-home/_client-skins/flw-01/images-ext/ui-bg-stage.png); } #divStage { background: #fff; } #divStatus { padding: 0.8em; background: #d5452a; } #divPlan { background: #fff; border: 1px dashed #ccc; margin-top: -1px; margin-left: -1px; } #iframeExternalViewer { } #divImgs { } #divImgsWrapper { } #imgImgs { } #divImgsText { margin: 10px; } /* ---------------------------------------------------------------------------- TOOLBAR ---------------------------------------------------------------------------- currently the slider control that is being used for zoom isn't working that great on the ipad, suggest just using the in/out buttons & pinch-zoom note that the icons are defined up in global, if we ditch font-awesome for custom icons, then we'll put the definition for them in here */ #layoutTools { margin-top: 0; border-right: 1px solid #000; border-bottom: 1px solid #000; } #divTools { } #divTools { border-left: 1px solid rgba(255, 255, 255, 0.1); text-align: center; padding-top: 5px; width: 46px; } #divTools > hr { background: none; height: 0; border: none; margin: 1em 0; } #divTools .ui-btn { margin: 5px 0; width: 28px; height: 28px; } #divTools .ui-icon { font-size: 18px; display: block; width: 18px; margin: 5px 7px; } /* style the zoom slider */ #divZoomSlider { margin: 28px 0 34px 0; } #divZoomSlider .ui-slider-input { display: none; } #divZoomSlider .ui-slider-verticalInverted { width: 4px; margin: -10px 20px; height: 100px; border-radius: 3px; } #divZoomSlider .ui-slider-handle-verticalInverted { width: 28px; height: 28px; margin-left: -13px; margin-top: -13px; } #divZoomSlider .ui-btn-inner { padding: 4px; } #divZoomSlider .ui-btn-text { font-family: FontAwesome; font-weight: normal; font-style: normal; font-size: 1em; background: none; } #divZoomSlider .ui-btn-text:before { content: "\f002"; } /* MODBYCH Removed for this specific skin to limit the number of items on the toolbar. */ #btnFlipH, #btnFlipV, #btnNoteTool, #btnLineTool { display: none; } /* ---------------------------------------------------------------------------- PREVIEW IMAGE AREA ---------------------------------------------------------------------------- only margin/padding/border/corners/shadow is really useful here (and background while img loads) */ #layoutPreview { border: 1px solid #000; border-radius: 0.3em; } #divPreview { border-top: 1px solid rgba(255, 255, 255, 0.5); border-radius: 0.3em; } /* ---------------------------------------------------------------------------- OPTIONS TABS ---------------------------------------------------------------------------- note there are 2 sizes of icons used for jQuery-Mobile due to retina display, see "Custom Icons" here: http://jquerymobile.com/demos/1.1.1/docs/buttons/buttons-icons.html */ #layoutOptionsMenu { width: 236px; } /* added 2 pixels to width so matches preview area that has border on it */ #divOptionsMenu { background: none; } #divOptionsMenu fieldset { margin: 0; } #divOptionsMenu .ui-radio { } #divOptionsMenu .ui-controlgroup .ui-radio label { width: 100%; } #divOptionsMenu .ui-btn-text { display: none; } #divOptionsMenu .ui-btn-inner { height: 26px; } #divOptionsMenu .ui-icon { display: block; height: 36px; width: 36px; margin: -19px 5px; background: url(https://contradovip.com/clients/wright-home/_client-skins/flw-01/images-ext/ui-icons-light-36.png); background-size: 108px 36px; border-radius: 0; } @media only screen and (-webkit-min-device-pixel-ratio: 2) { #divOptionsMenu .ui-icon { background: url(../../../../../clients/wright-home/_client-skins/flw-01/images-ext/ui-icons-light-72.png); background-size: 108px 36px; } } #divOptionsMenu .ui-icon-options { background-position: 0 0; } #divOptionsMenu .ui-icon-components { background-position: -36px 0; } #divOptionsMenu .ui-icon-furniture { background-position: -72px 0; } #divOptionsMenu .ui-btn, #divOptionsMenu .ui-btn-inner { border-radius: 2px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } /* #divOptionsMenu { background-position: 0 0; } */ #divOptionsMenu > fieldset:nth-child(1) > div:nth-child(1) > div:nth-child(1), #divOptionsMenu > fieldset:nth-child(1) > div:nth-child(1) > div:nth-child(2)/* , */ /* #ulOpts_Options, #ulOpts_Components*/ { display: none; } /* ---------------------------------------------------------------------------- OPTIONS AREA ---------------------------------------------------------------------------- */ #layoutOptions { width: 236px; margin-top: 0; border-bottom: 1px solid #000; } /* added 2 pixels to width so matches preview area that has border on it */ #divOptions { border: 1px solid #000; border-top: none; border-bottom: none; } #divOptions ul { margin: 0; } #divOptions li.ui-li-static { border: none; padding: 0; } #divOptions li.ui-li-divider { padding: 0.5em 0.8em 0.3em 0.8em; line-height: 1.45em; border-top: none; } #divOptions fieldset { margin: 0; } #divOptions .ui-controlgroup-controls { width: 100%; } #divOptions .ui-btn { background: #444; border-radius: 0; border-left: none; border-right: none; } .no-touch #divOptions .ui-btn:hover { background: #666; } #divOptions .ui-btn .ui-btn-inner { border-top: 1px solid rgba(255, 255, 255, 0.3); } #divOptions .ui-btn .ui-btn-inner .ui-icon { top: 0; margin-top: 10px; margin-left: 4px; } #divOptions .ui-btn .ui-btn-inner .ui-btn-text { min-height: 34px; line-height: 1.45em; margin-top: 1px; margin-left: 6px; display: block; font-weight: normal; } #divOpts_Options { } #divOpts_Components { } #divOpts_Furniture { } #ulOpts_Components .ui-btn .ui-btn-inner .ui-btn-text { margin: 0; } /* --- layoutImageViewerOptions is the options panel for the "exteriors" feature (the thumbnail drawer) --- */ #layoutOptionsImgs { border: 1px solid #000; border-radius: 0.3em; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } #divOptionsImgs { border-top: 1px solid rgba(255, 255, 255, 0.3); border-radius: 0.3em; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } #divOptionsImgs ul { margin: 0; } #divOptionsImgs li.ui-li-static { border: none; padding: 0; background: #444; } #divOptionsImgs li.ui-li-divider { padding: 0.5em 0.8em 0.3em 0.8em; line-height: 1.45em; border-top: none; } #divOptionsImgs fieldset { margin: 0; } #divOptionsImgs .ui-controlgroup-controls { width: 100%; } #divOptionsImgs .ui-btn { background: #444; border-radius: 0; border-left: none; border-right: none; } .no-touch #divOptionsImgs .ui-btn:hover { background: #666; } #divOptionsImgs .ui-btn .ui-btn-inner { border-top: 1px solid rgba(255, 255, 255, 0.3); padding: 0; } #divOptionsImgs .ui-btn .ui-btn-inner .ui-icon { bottom: 8px; left: 0; top: auto; margin: 0 0 6px 10px; } #divOptionsImgs .ui-btn .ui-btn-inner .ui-btn-text { display: block; min-height: 34px; margin: 0 0 16px 35px; font-weight: normal; } #divOptionsImgs .ui-btn .ui-btn-inner .ui-btn-text img { margin: 0 0 8px -35px; padding: 0 0 6px 0; max-width: 234px; } /* ---------------------------------------------------------------------------- DIALOGS ---------------------------------------------------------------------------- actually using the "popup" feature of jQuery-Mobile 1.2 for the "dialogs" */ .ui-popup { border-radius: 3px; border: 3px solid #000; width: 400px; } .ui-popup .ui-header { } .ui-popup .ui-content { padding: 16px; background: none; } .ui-popup .ui-popup-btns { } .ui-popup .ui-grid-a.ui-popup-btns { margin-top: 20px } .ui-popup .ui-grid-solo.ui-popup-btns { margin-top: 20px } .ui-popup .ui-content p { margin-bottom: 15px; } #layoutDialogSave { } #divDialogSave { } #layoutDialogReset { } #divDialogReset { } #layoutDialogPrint { width: 500px; } #divDialogPrint { } #divPrintPreview { } #divPrintPreview > div { } /* this is the actual preview "page" */ #layoutDialogHelp { } #divDialogHelp { } /* ---------------------------------------------------------------------------- SMALL SCREEN VERSION ---------------------------------------------------------------------------- */ @media only screen and (max-device-width: 600px) { .ui-layout { margin: 3px; } #layoutHeader { margin: 0; border: none; border-radius: 0; } #divHeader { border: none; border-top: 1px solid #000; border-radius: 0.3em 0.3em 0 0; background: #000; } #divHeaderLogo { margin: 13px 7px; } #imgHeaderLogo { max-width: 150px; } #divHeaderInfo { margin: 10px 9px; font-size: 0.8em; } #btnHeaderSSHandle { border-top: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; width: 29px; padding-left: 5px; margin-top: 8px; } /* margin-top is to give room for shadow to not be cut off */ #btnHeaderSSHandle .ui-btn-inner { border: none; } #layoutMenu { } #layoutMenu .ui-btn-inner { padding: 4px 0.8em 10px 0.8em; } #layoutMenu .ui-btn-text { font-size: 12px; } #layoutStage { margin: 0; border: 1px solid #000; } #layoutOptions { width: 160px; margin: 0; border: none; border-radius: 0; } #divOptions { border: none; border-left: 1px solid #000; border-radius: 0.3em 0 0 0.3em; } #btnOptionsSSHandle { border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; height: 29px; padding-top: 5px; margin-top: 0; margin-left: 8px; } /* margin-left is to give room for shadow to not be cut off */ #btnOptionsSSHandle .ui-btn-inner { border: none; } #divOptions .ui-li-divider { font-size: 12px; } #divOptions .ui-btn .ui-btn-inner .ui-btn-text { min-height: 24px; font-size: 12px; } #divHeader, #btnHeaderSSHandle, #divOptions, #btnOptionsSSHandle { -moz-box-shadow: 0 0 8px rgba(0,0,0,0.6); -webkit-box-shadow: 0 0 8px rgba(0,0,0,0.6); box-shadow: 0 0 8px rgba(0,0,0,0.6); } #divHeaderSSHandle, #divOptionsSSHandle { position: relative; z-index: -1; } #v.1.poi.interior, #v.1.poi.kitchen-upgrades, #v.1.poi.bathroom-test, #v.1.poi.exterior{ display:none; } } /* MODBYCH */ #layoutPreview, #layoutOptionsMenu, #divOptionsMenu, #layoutOptions, #btnSave, #btnPrint, #btnReset, #btnZoomAll, #layoutHeader { display: none; width: 0px; height: 0px; } #divMenuSettings{ visibility: hidden; } #divTools{ -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } #divZoomSlider /* #btnZoomOut, #btnZoomin */ { position: relative; top: 50%; transform: translateY(-50%); } #btnHelp{ display: block; position: absolute; vertical-align: bottom; bottom: 5px; left: 10px; } #divPlan { border: none; } @media only screen and (max-device-width: 600px) #layoutLegendSS, #btnLegendSSHandle, #divLegendSSHandle{ display: none !important; visibility: hidden !important; } .ui-btn-active, .ui-focus, .ui-btn:focus { background-image: linear-gradient( #d5452a /*{global-active-background-start}*/, #d5452a /*{global-active-background-end}*/) !important; } .ui-btn-down-a { background: #d5452a /*{a-bdown-background-color}*/; background-image: -webkit-gradient(linear, left top, left bottom, from( #d5452a /*{a-bdown-background-start}*/), to( #d5452a /*{a-bdown-background-end}*/)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient( #d5452a /*{a-bdown-background-start}*/, #d5452a /*{a-bdown-background-end}*/); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient( #d5452a /*{a-bdown-background-start}*/, #d5452a /*{a-bdown-background-end}*/); /* FF3.6 */ background-image: -ms-linear-gradient( #d5452a /*{a-bdown-background-start}*/, #d5452a /*{a-bdown-background-end}*/); /* IE10 */ background-image: -o-linear-gradient( #d5452a /*{a-bdown-background-start}*/, #d5452a /*{a-bdown-background-end}*/); /* Opera 11.10+ */ background-image: linear-gradient( #d5452a /*{a-bdown-background-start}*/, #d5452a /*{a-bdown-background-end}*/); } .ui-btn-active, .ui-focus, .ui-btn:focus { background-image: linear-gradient( #d5452a /*{global-active-background-start}*/, #d5452a /*{global-active-background-end}*/) !important; } .ui-btn-down-a { background: #d5452a /*{a-bdown-background-color}*/; background-image: -webkit-gradient(linear, left top, left bottom, from( #d5452a /*{a-bdown-background-start}*/), to( #d5452a /*{a-bdown-background-end}*/)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient( #d5452a /*{a-bdown-background-start}*/, #d5452a /*{a-bdown-background-end}*/); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient( #d5452a /*{a-bdown-background-start}*/, #d5452a /*{a-bdown-background-end}*/); /* FF3.6 */ background-image: -ms-linear-gradient( #d5452a /*{a-bdown-background-start}*/, #d5452a /*{a-bdown-background-end}*/); /* IE10 */ background-image: -o-linear-gradient( #d5452a /*{a-bdown-background-start}*/, #d5452a /*{a-bdown-background-end}*/); /* Opera 11.10+ */ background-image: linear-gradient( #d5452a /*{a-bdown-background-start}*/, #d5452a /*{a-bdown-background-end}*/); } /* ***************************************************************** */ /* RECOLOR AND DROP SHADOW ADDED TO THE CLOSE X FOR HOTSPOTS */ /* ***************************************************************** */ #svgDialogPOICancel { -webkit-filter: drop-shadow( 1px 1px 2px #222 ); filter: drop-shadow( 1px 1px 2px #222 ); /* Same syntax as box-shadow */ } #svgDialogPOICancel > line { stroke: #d5452a;}