Samuele E. Locatelli
464 lines
13 KiB
CSS
464 lines
13 KiB
CSS
/* Gestione blocchi base */
|
|
body {
|
|
font-family: 'Open Sans', sans-serif;
|
|
}
|
|
body .ui-body-a,
|
|
body .ui-body-c,
|
|
body .ui-overlay-c {
|
|
text-shadow: 0 0 0;
|
|
}
|
|
/* END: gestione blocchi base */
|
|
/* zona blocchi Sx/DX */
|
|
.divSx {
|
|
float: left;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.divDx {
|
|
float: right;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.divCenter {
|
|
float: none;
|
|
text-align: center;
|
|
padding: 0;
|
|
margin: 0 auto 0 auto;
|
|
}
|
|
.clearDiv {
|
|
clear: both;
|
|
}
|
|
.stdFont {
|
|
color: Black;
|
|
text-shadow: 0 0px 0 #111;
|
|
-webkit-box-shadow: none;
|
|
-moz-box-shadow: none;
|
|
box-shadow: none;
|
|
}
|
|
/* @end */
|
|
/* classi x controlli tabellari */
|
|
.rowStyle {
|
|
/*background-color: #DEE2EA;*/
|
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f1f1f1));
|
|
background-image: -webkit-linear-gradient(#ffffff, #f1f1f1);
|
|
background-image: -moz-linear-gradient(#ffffff, #f1f1f1);
|
|
background-image: -ms-linear-gradient(#ffffff, #f1f1f1);
|
|
background-image: -o-linear-gradient(#ffffff, #f1f1f1);
|
|
background-image: linear-gradient(#ffffff, #f1f1f1);
|
|
border: 1px solid #CDCDCD;
|
|
}
|
|
.alternatingRowStyle {
|
|
/*background-color: White;*/
|
|
border: 1px solid #CDCDCD;
|
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#ddddff), to(#e1f1ff));
|
|
background-image: -webkit-linear-gradient(#ddddff, #e1f1ff);
|
|
background-image: -moz-linear-gradient(#ddddff, #e1f1ff);
|
|
background-image: -ms-linear-gradient(#ddddff, #e1f1ff);
|
|
background-image: -o-linear-gradient(#ddddff, #e1f1ff);
|
|
background-image: linear-gradient(#ddddff, #e1f1ff);
|
|
/*
|
|
background-image: -webkit-gradient(linear,left top,left bottom,from( #fff ),to( #f1f1f1 ));
|
|
background-image: -webkit-linear-gradient( #fff,#f1f1f1 );
|
|
background-image: -moz-linear-gradient( #fff,#f1f1f1 );
|
|
background-image: -ms-linear-gradient( #fff,#f1f1f1 );
|
|
background-image: -o-linear-gradient( #fff,#f1f1f1 );
|
|
background-image: linear-gradient( #fff,#f1f1f1 );
|
|
*/
|
|
}
|
|
/* END classi x controlli tabellari*/
|
|
/* MAIN: gestione layout dinamico mappa... */
|
|
/* A bit custom styling */
|
|
.my-page {
|
|
background: #222;
|
|
}
|
|
/* Link to the Google webfont is in the head */
|
|
.my-page .ui-title,
|
|
.my-page .ui-li-aside {
|
|
font-family: 'Open Sans', sans-serif;
|
|
font-weight: 400;
|
|
}
|
|
.my-page .ui-header {
|
|
color: #990099;
|
|
}
|
|
.my-page .ui-footer {
|
|
color: #666;
|
|
}
|
|
.my-page .ui-li-desc {
|
|
color: #c0c0c0;
|
|
}
|
|
.my-page .ui-li-aside {
|
|
color: #990099;
|
|
}
|
|
.my-page .ui-listview .ui-li.ui-btn {
|
|
background-image: none;
|
|
border-color: #222;
|
|
}
|
|
/* First breakpoint is 768px. 3 column layout. Tiles 250x250 pixels at the breakpoint. */
|
|
@media all and (min-width: 768px) {
|
|
.my-page .ui-content {
|
|
padding: 9px;
|
|
}
|
|
.my-page .ui-listview .ui-li.ui-btn {
|
|
float: left;
|
|
width: 30.9333%;
|
|
/* 33.3333% incl. 2 x 1.2% margin */
|
|
height: 232px;
|
|
margin: 9px 1.2%;
|
|
border-width: 0;
|
|
/* The 1px border would break the layout so we set it on .ui-btn-inner instead. */
|
|
}
|
|
/* If you don't want a border at all, just set "border: none;" here to negate the semi white top border */
|
|
.my-page .ui-listview .ui-li.ui-btn-inner {
|
|
border: inherit;
|
|
border-width: 1px;
|
|
margin: -1px;
|
|
}
|
|
.my-page .ui-listview .ui-btn-inner,
|
|
.my-page .ui-listview .ui-btn-text,
|
|
.my-page .ui-listview .ui-link-inherit,
|
|
.my-page .ui-listview .ui-li-thumb {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
overflow: hidden;
|
|
}
|
|
.my-page .ui-listview .ui-link-inherit {
|
|
padding: 0 !important;
|
|
position: relative;
|
|
}
|
|
/* Inherit the border-radius from the UL that has class .ui-corner-all in case of an inset listview. */
|
|
.my-page .ui-listview .ui-li,
|
|
.my-page .ui-listview .ui-btn-text,
|
|
.my-page .ui-listview .ui-link-inherit,
|
|
.my-page .ui-listview .ui-li-thumb {
|
|
-webkit-border-radius: inherit;
|
|
border-radius: inherit;
|
|
}
|
|
.my-page .ui-listview .ui-li-thumb {
|
|
height: auto;
|
|
/* To keep aspect ratio. */
|
|
max-width: 100%;
|
|
max-height: none;
|
|
margin: 0;
|
|
left: 0;
|
|
z-index: -1;
|
|
}
|
|
/* Hide the icon */
|
|
.my-page .ui-listview .ui-icon {
|
|
display: none;
|
|
}
|
|
/* Make text wrap. */
|
|
.my-page .ui-listview .ui-li-heading,
|
|
.my-page .ui-listview .ui-li-desc {
|
|
font-family: 'Open Sans Condensed', sans-serif;
|
|
white-space: normal;
|
|
overflow: visible;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
/* Text position */
|
|
.my-page .ui-listview .ui-li-heading {
|
|
margin: 0;
|
|
padding: 20px;
|
|
bottom: 50%;
|
|
}
|
|
.my-page .ui-listview .ui-li-desc {
|
|
font-family: 'Open Sans', sans-serif;
|
|
margin: 0;
|
|
padding: 0 20px;
|
|
min-height: 50%;
|
|
bottom: 0;
|
|
line-height: 1.5;
|
|
}
|
|
/* Semi transparent background and different position if there is a thumb */
|
|
.ui-listview .ui-li-has-thumb .ui-li-heading,
|
|
.ui-listview .ui-li-has-thumb .ui-li-desc {
|
|
background: #111;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
-webkit-background-clip: padding;
|
|
background-clip: padding-box;
|
|
}
|
|
.ui-listview .ui-li-has-thumb .ui-li-heading {
|
|
padding: 10px;
|
|
bottom: 20%;
|
|
}
|
|
.ui-listview .ui-li-has-thumb .ui-li-desc {
|
|
padding: 0 10px;
|
|
min-height: 20%;
|
|
-webkit-border-bottom-left-radius: inherit;
|
|
border-bottom-left-radius: inherit;
|
|
-webkit-border-bottom-right-radius: inherit;
|
|
border-bottom-right-radius: inherit;
|
|
}
|
|
/* ui-li-aside has class .ui-li-desc as well so we have to override some things. */
|
|
.my-page .ui-listview .ui-li-desc.ui-li-aside {
|
|
padding: 2px 10px;
|
|
width: auto;
|
|
min-height: 0;
|
|
top: 0;
|
|
left: auto;
|
|
bottom: auto;
|
|
/* Custom styling. */
|
|
color: #c0c0c0;
|
|
background: #990099;
|
|
background: rgba(153, 0, 153, 0.85);
|
|
-webkit-border-top-right-radius: inherit;
|
|
border-top-right-radius: inherit;
|
|
-webkit-border-bottom-left-radius: inherit;
|
|
border-bottom-left-radius: inherit;
|
|
-webkit-border-bottom-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
/* If you want to add shadow, don't kill the focus style. */
|
|
.my-page .ui-listview .ui-btn:not(.ui-focus) {
|
|
-moz-box-shadow: 0px 0px 9px #111;
|
|
-webkit-box-shadow: 0px 0px 9px #111;
|
|
box-shadow: 0px 0px 9px #111;
|
|
}
|
|
/* Images mask the hover bg color so we give desktop users feedback by applying the focus style on hover as well. */
|
|
.my-page .ui-listview .ui-btn:hover {
|
|
-moz-box-shadow: 0px 0px 12px #387bbe;
|
|
-webkit-box-shadow: 0px 0px 12px #387bbe;
|
|
box-shadow: 0px 0px 12px #387bbe;
|
|
}
|
|
/* Animate focus and hover style, and resizing. */
|
|
.my-page .ui-listview .ui-btn {
|
|
-webkit-transition: all 500ms ease;
|
|
-moz-transition: all 500ms ease;
|
|
-o-transition: all 500ms ease;
|
|
-ms-transition: all 500ms ease;
|
|
transition: all 500ms ease;
|
|
}
|
|
}
|
|
/* Second breakpoint. 4 column layout. Tiles will be 250x250 pixels again at the breakpoint. */
|
|
@media all and (min-width: 1020px) {
|
|
.my-page .ui-content {
|
|
padding: 10px;
|
|
}
|
|
/* Set a max-width for the last breakpoint to prevent too much stretching on large screens.
|
|
By setting the max-width equal to the breakpoint width minus padding we keep square tiles. */
|
|
.my-page .ui-listview {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
}
|
|
/* Because of the 1000px max-width the width will always be 230px (and margin left/right 10px),
|
|
but we stick to percentage values for demo purposes. */
|
|
.my-page .ui-listview .ui-li.ui-btn {
|
|
width: 23%;
|
|
height: 230px;
|
|
margin: 10px 1%;
|
|
}
|
|
}
|
|
/* For this demo we used images with a size of 310x310 pixels. Just before the second breakpoint the images reach their max width: 1019px - 2 x 9px padding = 1001px x 30.9333% = ~310px */
|
|
/* terzo breakpoint. 5 column layout. Tiles will be 250x250 pixels again at the breakpoint. */
|
|
@media all and (min-width: 1270px) {
|
|
.my-page .ui-content {
|
|
padding: 10px;
|
|
}
|
|
.my-page .ui-listview {
|
|
max-width: 1250px;
|
|
margin: 0 auto;
|
|
}
|
|
.my-page .ui-listview .ui-li.ui-btn {
|
|
width: 18%;
|
|
height: 230px;
|
|
margin: 10px 1%;
|
|
}
|
|
}
|
|
/* quarto breakpoint. 6 column layout. Tiles will be 250x250 pixels again at the breakpoint. */
|
|
@media all and (min-width: 1520px) {
|
|
.my-page .ui-content {
|
|
padding: 10px;
|
|
}
|
|
.my-page .ui-listview {
|
|
max-width: 1500px;
|
|
margin: 0 auto;
|
|
}
|
|
.my-page .ui-listview .ui-li.ui-btn {
|
|
width: 14%;
|
|
height: 230px;
|
|
margin: 10px 1%;
|
|
}
|
|
}
|
|
/* quinto breakpoint. 7 column layout. Tiles will be 250x250 pixels again at the breakpoint. */
|
|
@media all and (min-width: 1770px) {
|
|
.my-page .ui-content {
|
|
padding: 10px;
|
|
}
|
|
.my-page .ui-listview {
|
|
max-width: 1750px;
|
|
margin: 0 auto;
|
|
}
|
|
.my-page .ui-listview .ui-li.ui-btn {
|
|
width: 12%;
|
|
height: 230px;
|
|
margin: 10px 1%;
|
|
}
|
|
}
|
|
/* sesto breakpoint. 8 column layout. Tiles will be 250x250 pixels again at the breakpoint. */
|
|
@media all and (min-width: 1900px) {
|
|
.my-page .ui-content {
|
|
padding: 10px;
|
|
}
|
|
.my-page .ui-listview {
|
|
max-width: 1900px;
|
|
margin: 0 auto;
|
|
}
|
|
.my-page .ui-listview .ui-li.ui-btn {
|
|
width: 10%;
|
|
height: 230px;
|
|
margin: 10px 1%;
|
|
}
|
|
}
|
|
/* END: gestione layout dinamico mappa... */
|
|
/* area semafori*/
|
|
.semaforoVerde {
|
|
text-align: left;
|
|
background: #009036;
|
|
background: rgba(0, 255, 80, 0.6);
|
|
padding: 0px 4px 0px 4px;
|
|
color: Yellow;
|
|
}
|
|
.semaforoGiallo {
|
|
text-align: left;
|
|
background: #ffec00;
|
|
background: rgba(255, 220, 0, 0.6);
|
|
padding: 0px 4px 0px 4px;
|
|
}
|
|
.semaforoRosso {
|
|
text-align: left;
|
|
background-color: #e2001a;
|
|
background: rgba(240, 0, 10, 0.6);
|
|
padding: 0px 4px 0px 4px;
|
|
}
|
|
.semaforoSpento {
|
|
text-align: left;
|
|
background-color: #bcbcbc;
|
|
background: rgba(180, 180, 180, 0.6);
|
|
padding: 0px 4px 0px 4px;
|
|
}
|
|
/*end semafori */
|
|
/* Gestione panel */
|
|
/* Adjust the width of the left reveal menu.
|
|
Copy all CSS from jquery.mobile.panel.css and delete the properties other than width, left, right and transform.
|
|
Then delete the selectors/rules for display modes (reveal/push/overlay) and the position (left/right) that you don't use.
|
|
If you don't use fixed toolbars on your page you can delete those selectors as well.
|
|
Narrow the scope of the selectors to prevent other panels being affected by the overrides. */
|
|
#demo-page #left-panel.ui-panel {
|
|
width: 15em;
|
|
}
|
|
#demo-page #left-panel.ui-panel-closed {
|
|
width: 0;
|
|
}
|
|
#demo-page .ui-panel-position-left.ui-panel-display-reveal {
|
|
left: 0;
|
|
}
|
|
#demo-page .ui-panel-content-wrap-position-left.ui-panel-content-wrap-open,
|
|
.ui-panel-dismiss-position-left.ui-panel-dismiss-open {
|
|
left: 15em;
|
|
right: -15em;
|
|
}
|
|
#demo-page .ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal {
|
|
left: 0;
|
|
right: 0;
|
|
-webkit-transform: translate3d(15em, 0, 0);
|
|
-moz-transform: translate3d(15em, 0, 0);
|
|
transform: translate3d(15em, 0, 0);
|
|
}
|
|
/* Combined listview collapsible menu. */
|
|
/* Unset negative margin bottom on the listviews. */
|
|
#left-panel .ui-panel-inner > .ui-listview {
|
|
margin-bottom: 0;
|
|
}
|
|
/* Unset top and bottom margin on collapsible set. */
|
|
#left-panel .ui-collapsible-set {
|
|
margin: 0;
|
|
}
|
|
/* The first collapsible contains the collapsible set. Make it fit exactly in the collapsible content. */
|
|
#left-panel .ui-panel-inner > .ui-collapsible > .ui-collapsible-content {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
border-bottom: none;
|
|
}
|
|
/* Remove border top if a collapsible comes after a listview. */
|
|
#left-panel .ui-panel-inner > .ui-collapsible > .ui-collapsible-heading .ui-btn,
|
|
#left-panel .ui-collapsible.ui-first-child .ui-collapsible-heading .ui-btn {
|
|
border-top: none;
|
|
}
|
|
/* Give the first collapsible heading the same padding, i.e. same height, as the list items. */
|
|
#left-panel .ui-collapsible-heading .ui-btn-inner {
|
|
padding: .7em 40px .7em 15px;
|
|
}
|
|
/* Give the other collapsible headings the same padding and font-size as the list divider. */
|
|
#left-panel .ui-collapsible-set .ui-collapsible-heading .ui-btn-inner {
|
|
padding: .5em 40px .5em 15px;
|
|
font-size: 14px;
|
|
}
|
|
/* Styling of the close button in both panels. */
|
|
#demo-page .ui-panel-inner > .ui-listview .ui-first-child {
|
|
background: #eee;
|
|
}
|
|
/* Reveal menu shadow on top of the list items */
|
|
#demo-page .ui-panel-display-reveal {
|
|
-webkit-box-shadow: none;
|
|
-moz-box-shadow: none;
|
|
box-shadow: none;
|
|
}
|
|
#demo-page .ui-panel-content-wrap-position-left {
|
|
-webkit-box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.15);
|
|
-moz-box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.15);
|
|
box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.15);
|
|
}
|
|
/* Use the ui-body class of your page theme to set a background image.
|
|
The page theme will be set for the content wrapper,
|
|
while the page get the panel them before opening the panel. */
|
|
#demo-page .ui-body-d {
|
|
background-image: url(../../_assets/img/bg-pattern.png);
|
|
background-repeat: repeat-x;
|
|
background-position: left bottom;
|
|
}
|
|
/* Styling of the page contents */
|
|
.article p {
|
|
margin: 0 0 1em;
|
|
line-height: 1.5;
|
|
}
|
|
.article p img {
|
|
max-width: 100%;
|
|
}
|
|
.article p:first-child {
|
|
text-align: center;
|
|
}
|
|
.article small {
|
|
display: block;
|
|
font-size: 75%;
|
|
color: #c0c0c0;
|
|
}
|
|
.article p:last-child {
|
|
text-align: right;
|
|
}
|
|
.article a.ui-btn {
|
|
margin-right: 2em;
|
|
-webkit-border-radius: .4em;
|
|
border-radius: .4em;
|
|
}
|
|
@media all and (min-width: 769px) {
|
|
.article {
|
|
max-width: 994px;
|
|
margin: 0 auto;
|
|
padding-top: 4em;
|
|
-webkit-column-count: 2;
|
|
-moz-column-count: 2;
|
|
column-count: 2;
|
|
-webkit-column-gap: 2em;
|
|
-moz-column-gap: 2em;
|
|
column-gap: 2em;
|
|
}
|
|
/* Fix for issue with buttons and form elements
|
|
if CSS columns are used on a page with a panel. */
|
|
.article a.ui-btn {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
/* END Gestione panel */
|