eliminati i componenti css in content (inutilizzati) x semplificare/razionalizzare...
This commit is contained in:
Samuele E. Locatelli
Binary file not shown.
@@ -1,544 +0,0 @@
|
||||
/* 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;
|
||||
}
|
||||
.GridPager a,
|
||||
.GridPager span {
|
||||
display: block;
|
||||
height: 1.6em;
|
||||
width: 2em;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
.GridPager a {
|
||||
background-color: #f5f5f5;
|
||||
color: #969696;
|
||||
/*border-top: 1px solid #969696;
|
||||
border-bottom: 1px solid #969696;*/
|
||||
}
|
||||
.GridPager span {
|
||||
background-color: #A1DCF2;
|
||||
color: #000;
|
||||
/*border-top: 1px solid #3AC0F2;
|
||||
border-bottom: 1px solid #3AC0F2;*/
|
||||
font-weight: bold;
|
||||
}
|
||||
/* @end */
|
||||
/* classi x controlli tabellari */
|
||||
.rowStyle {
|
||||
/*background-color: #DEE2EA;*/
|
||||
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);
|
||||
border: 1px solid #CDCDCD;
|
||||
}
|
||||
.alternatingRowStyle {
|
||||
/*background-color: White;*/
|
||||
border: 1px solid #CDCDCD;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#ddf), to(#e1f1ff));
|
||||
background-image: -webkit-linear-gradient(#ddf, #e1f1ff);
|
||||
background-image: -moz-linear-gradient(#ddf, #e1f1ff);
|
||||
background-image: -ms-linear-gradient(#ddf, #e1f1ff);
|
||||
background-image: -o-linear-gradient(#ddf, #e1f1ff);
|
||||
background-image: linear-gradient(#ddf, #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... */
|
||||
/*------------------------------------------------------------------
|
||||
[ Shortcuts / .shortcuts ]
|
||||
*/
|
||||
.shortcuts {
|
||||
text-align: center;
|
||||
}
|
||||
.shortcuts .shortcut {
|
||||
display: inline-block;
|
||||
padding: 15px 0;
|
||||
max-width: 400px;
|
||||
vertical-align: top;
|
||||
text-decoration: none;
|
||||
background: #000;
|
||||
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#000), to(#222));
|
||||
background-image: -webkit-linear-gradient(top, #000, 0%, #222, 100%);
|
||||
background-image: -moz-linear-gradient(top, #000 0%, #222 100%);
|
||||
background-image: linear-gradient(to bottom, #000 0%, #222 100%);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000ff', endColorstr='#ff222', GradientType=0);
|
||||
border: 1px solid #333;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.shortcuts .shortcut .shortcut-icon {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: auto;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: 40px;
|
||||
color: #555;
|
||||
}
|
||||
.shortcuts .shortcut:hover {
|
||||
background: #333;
|
||||
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#222), to(#444));
|
||||
background-image: -webkit-linear-gradient(top, #222, 0%, #444, 100%);
|
||||
background-image: -moz-linear-gradient(top, #222 0%, #444 100%);
|
||||
background-image: linear-gradient(to bottom, #222 0%, #444 100%);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00222222', endColorstr='#00444444', GradientType=0);
|
||||
}
|
||||
.shortcuts .shortcut:active {
|
||||
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
.shortcuts .shortcut:hover .shortcut-icon {
|
||||
color: #666;
|
||||
}
|
||||
.shortcuts .shortcut-label {
|
||||
display: block;
|
||||
margin-top: .75em;
|
||||
font-weight: 400;
|
||||
color: #666;
|
||||
}
|
||||
/* 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;
|
||||
}
|
||||
.shortcuts .shortcut,
|
||||
.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 .ui-bar-inherit {
|
||||
background: #111;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
-webkit-background-clip: padding;
|
||||
-moz-background-clip: padding-box;
|
||||
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. */
|
||||
.shortcuts .shortcut,
|
||||
.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;
|
||||
}
|
||||
.shortcuts .shortcut,
|
||||
.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;
|
||||
}
|
||||
.shortcuts .shortcut,
|
||||
.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 */
|
||||
@@ -1,595 +0,0 @@
|
||||
/* 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;
|
||||
}
|
||||
|
||||
|
||||
.GridPager a, .GridPager span {
|
||||
display: block;
|
||||
height: 1.6em;
|
||||
width: 2em;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.GridPager a {
|
||||
background-color: #f5f5f5;
|
||||
color: #969696;
|
||||
/*border-top: 1px solid #969696;
|
||||
border-bottom: 1px solid #969696;*/
|
||||
}
|
||||
|
||||
.GridPager span {
|
||||
background-color: #A1DCF2;
|
||||
color: #000;
|
||||
/*border-top: 1px solid #3AC0F2;
|
||||
border-bottom: 1px solid #3AC0F2;*/
|
||||
font-weight: bold;
|
||||
}
|
||||
/* @end */
|
||||
|
||||
/* classi x controlli tabellari */
|
||||
|
||||
.rowStyle {
|
||||
/*background-color: #DEE2EA;*/
|
||||
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 );
|
||||
border: 1px solid #CDCDCD;
|
||||
}
|
||||
|
||||
.alternatingRowStyle {
|
||||
/*background-color: White;*/
|
||||
border: 1px solid #CDCDCD;
|
||||
background-image: -webkit-gradient(linear,left top,left bottom,from( #ddf ),to( #e1f1ff ));
|
||||
background-image: -webkit-linear-gradient( #ddf,#e1f1ff );
|
||||
background-image: -moz-linear-gradient( #ddf,#e1f1ff );
|
||||
background-image: -ms-linear-gradient( #ddf,#e1f1ff );
|
||||
background-image: -o-linear-gradient( #ddf,#e1f1ff );
|
||||
background-image: linear-gradient( #ddf,#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... */
|
||||
|
||||
|
||||
/*------------------------------------------------------------------
|
||||
[ Shortcuts / .shortcuts ]
|
||||
*/
|
||||
.shortcuts {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.shortcuts .shortcut {
|
||||
display: inline-block;
|
||||
padding: 15px 0;
|
||||
max-width: 400px;
|
||||
vertical-align: top;
|
||||
text-decoration: none;
|
||||
background: #000;
|
||||
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#000), to(#222));
|
||||
background-image: -webkit-linear-gradient(top, #000, 0%, #222, 100%);
|
||||
background-image: -moz-linear-gradient(top, #000 0%, #222 100%);
|
||||
background-image: linear-gradient(to bottom, #000 0%, #222 100%);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000ff', endColorstr='#ff222', GradientType=0);
|
||||
border: 1px solid #333;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.shortcuts .shortcut .shortcut-icon {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: auto;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: 40px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.shortcuts .shortcut:hover {
|
||||
background: #333;
|
||||
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#222), to(#444));
|
||||
background-image: -webkit-linear-gradient(top, #222, 0%, #444, 100%);
|
||||
background-image: -moz-linear-gradient(top, #222 0%, #444 100%);
|
||||
background-image: linear-gradient(to bottom, #222 0%, #444 100%);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00222222', endColorstr='#00444444', GradientType=0);
|
||||
}
|
||||
|
||||
.shortcuts .shortcut:active {
|
||||
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
|
||||
.shortcuts .shortcut:hover .shortcut-icon {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.shortcuts .shortcut-label {
|
||||
display: block;
|
||||
margin-top: .75em;
|
||||
font-weight: 400;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
.shortcuts .shortcut,
|
||||
.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 .ui-bar-inherit {
|
||||
background: #111;
|
||||
background: rgba(0,0,0,.8);
|
||||
-webkit-background-clip: padding;
|
||||
-moz-background-clip: padding-box;
|
||||
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,.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. */
|
||||
.shortcuts .shortcut,
|
||||
.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;
|
||||
}
|
||||
|
||||
.shortcuts .shortcut,
|
||||
.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;
|
||||
}
|
||||
|
||||
.shortcuts .shortcut,
|
||||
.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,.6);
|
||||
padding: 0px 4px 0px 4px;
|
||||
color: Yellow;
|
||||
}
|
||||
|
||||
.semaforoGiallo {
|
||||
text-align: left;
|
||||
background: #ffec00;
|
||||
background: rgba(255,220,0,.6);
|
||||
padding: 0px 4px 0px 4px;
|
||||
}
|
||||
|
||||
.semaforoRosso {
|
||||
text-align: left;
|
||||
background-color: #e2001a;
|
||||
background: rgba(240,0,10,.6);
|
||||
padding: 0px 4px 0px 4px;
|
||||
}
|
||||
|
||||
.semaforoSpento {
|
||||
text-align: left;
|
||||
background-color: #bcbcbc;
|
||||
background: rgba(180,180,180,.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,.15);
|
||||
-moz-box-shadow: -5px 0px 5px rgba(0,0,0,.15);
|
||||
box-shadow: -5px 0px 5px rgba(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 */
|
||||
Vendored
-1
File diff suppressed because one or more lines are too long
@@ -1,197 +0,0 @@
|
||||
/* First breakpoint is 460px. 3 column layout. Tiles 150x150 pixels at the breakpoint. */
|
||||
@media all and (min-width: 460px) {
|
||||
.elDich .ui-content {
|
||||
padding: 9px;
|
||||
}
|
||||
.elDich .ui-listview .ui-li.ui-btn {
|
||||
float: left;
|
||||
width: 30.9333%;
|
||||
/* 33.3333% incl. 2 x 1.2% margin */
|
||||
height: 132px;
|
||||
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 */
|
||||
.elDich .ui-listview .ui-li.ui-btn-inner {
|
||||
border: inherit;
|
||||
border-width: 1px;
|
||||
margin: -1px;
|
||||
}
|
||||
.elDich .ui-listview .ui-btn-inner,
|
||||
.elDich .ui-listview .ui-btn-text,
|
||||
.elDich .ui-listview .ui-link-inherit,
|
||||
.elDich .ui-listview .ui-li-thumb {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
.elDich .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. */
|
||||
.elDich .ui-listview .ui-li,
|
||||
.elDich .ui-listview .ui-btn-text,
|
||||
.elDich .ui-listview .ui-link-inherit,
|
||||
.elDich .ui-listview .ui-li-thumb {
|
||||
-webkit-border-radius: inherit;
|
||||
border-radius: inherit;
|
||||
}
|
||||
.elDich .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 */
|
||||
.elDich .ui-listview .ui-icon {
|
||||
display: none;
|
||||
}
|
||||
/* Make text wrap. */
|
||||
.elDich .ui-listview .ui-li-heading,
|
||||
.elDich .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 */
|
||||
.elDich .ui-listview .ui-li-heading {
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
bottom: 40%;
|
||||
}
|
||||
.elDich .ui-listview .ui-li-desc {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
margin: 0;
|
||||
padding: 0 20px;
|
||||
min-height: 40%;
|
||||
bottom: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
/* Semi transparent background and different position if there is a thumb */
|
||||
.ui-li-dich {
|
||||
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-li-dich {
|
||||
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. */
|
||||
.elDich .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. */
|
||||
.elDich .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. */
|
||||
.elDich .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. */
|
||||
.elDich .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 150x150 pixels again at the breakpoint. */
|
||||
@media all and (min-width: 600px) {
|
||||
.elDich .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. */
|
||||
.elDich .ui-listview {
|
||||
max-width: 800px;
|
||||
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. */
|
||||
.elDich .ui-listview .ui-li.ui-btn {
|
||||
width: 23%;
|
||||
height: 148px;
|
||||
margin: 10px 1%;
|
||||
}
|
||||
}
|
||||
/* Second breakpoint. 5 column layout. Tiles will be 156x156 pixels again at the breakpoint. */
|
||||
@media all and (min-width: 800px) {
|
||||
.elDich .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. */
|
||||
.elDich .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. */
|
||||
.elDich .ui-listview .ui-li.ui-btn {
|
||||
width: 18%;
|
||||
height: 156px;
|
||||
margin: 10px 1%;
|
||||
}
|
||||
}
|
||||
/* Second breakpoint. 6 column layout. Tiles will be 156x156 pixels again at the breakpoint. */
|
||||
@media all and (min-width: 1100px) {
|
||||
.elDich .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. */
|
||||
.elDich .ui-listview {
|
||||
max-width: 1200px;
|
||||
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. */
|
||||
.elDich .ui-listview .ui-li.ui-btn {
|
||||
width: 14.5%;
|
||||
height: 160px;
|
||||
margin: 10px 1%;
|
||||
}
|
||||
}
|
||||
@@ -1,217 +0,0 @@
|
||||
/* First breakpoint is 460px. 3 column layout. Tiles 150x150 pixels at the breakpoint. */
|
||||
@media all and (min-width: 460px)
|
||||
{
|
||||
.elDich .ui-content
|
||||
{
|
||||
padding: 9px;
|
||||
}
|
||||
.elDich .ui-listview .ui-li.ui-btn
|
||||
{
|
||||
float: left;
|
||||
width: 30.9333%; /* 33.3333% incl. 2 x 1.2% margin */
|
||||
height: 132px;
|
||||
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 */
|
||||
.elDich .ui-listview .ui-li.ui-btn-inner
|
||||
{
|
||||
border: inherit;
|
||||
border-width: 1px;
|
||||
margin: -1px;
|
||||
}
|
||||
.elDich .ui-listview .ui-btn-inner, .elDich .ui-listview .ui-btn-text, .elDich .ui-listview .ui-link-inherit, .elDich .ui-listview .ui-li-thumb
|
||||
{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
.elDich .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. */
|
||||
.elDich .ui-listview .ui-li, .elDich .ui-listview .ui-btn-text, .elDich .ui-listview .ui-link-inherit, .elDich .ui-listview .ui-li-thumb
|
||||
{
|
||||
-webkit-border-radius: inherit;
|
||||
border-radius: inherit;
|
||||
}
|
||||
.elDich .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 */
|
||||
.elDich .ui-listview .ui-icon
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
/* Make text wrap. */
|
||||
.elDich .ui-listview .ui-li-heading, .elDich .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 */
|
||||
.elDich .ui-listview .ui-li-heading
|
||||
{
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
bottom: 40%;
|
||||
}
|
||||
.elDich .ui-listview .ui-li-desc
|
||||
{
|
||||
font-family: 'Open Sans' , sans-serif;
|
||||
margin: 0;
|
||||
padding: 0 20px;
|
||||
min-height: 40%;
|
||||
bottom: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
/* Semi transparent background and different position if there is a thumb */
|
||||
.ui-li-dich
|
||||
{
|
||||
background: #111;
|
||||
background: rgba(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-li-dich
|
||||
{
|
||||
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. */
|
||||
.elDich .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,.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. */
|
||||
.elDich .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. */
|
||||
.elDich .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. */
|
||||
.elDich .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 150x150 pixels again at the breakpoint. */
|
||||
@media all and (min-width: 600px)
|
||||
{
|
||||
.elDich .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. */
|
||||
.elDich .ui-listview
|
||||
{
|
||||
max-width: 800px;
|
||||
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. */
|
||||
.elDich .ui-listview .ui-li.ui-btn
|
||||
{
|
||||
width: 23%;
|
||||
height: 148px;
|
||||
margin: 10px 1%;
|
||||
}
|
||||
}
|
||||
/* Second breakpoint. 5 column layout. Tiles will be 156x156 pixels again at the breakpoint. */
|
||||
@media all and (min-width: 800px)
|
||||
{
|
||||
.elDich .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. */
|
||||
.elDich .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. */
|
||||
.elDich .ui-listview .ui-li.ui-btn
|
||||
{
|
||||
width: 18%;
|
||||
height: 156px;
|
||||
margin: 10px 1%;
|
||||
}
|
||||
}
|
||||
/* Second breakpoint. 6 column layout. Tiles will be 156x156 pixels again at the breakpoint. */
|
||||
@media all and (min-width: 1100px)
|
||||
{
|
||||
.elDich .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. */
|
||||
.elDich .ui-listview
|
||||
{
|
||||
max-width: 1200px;
|
||||
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. */
|
||||
.elDich .ui-listview .ui-li.ui-btn
|
||||
{
|
||||
width: 14.5%;
|
||||
height: 160px;
|
||||
margin: 10px 1%;
|
||||
}
|
||||
}
|
||||
|
||||
Vendored
-1
@@ -1 +0,0 @@
|
||||
@media all and (min-width:460px){.elDich .ui-content{padding:9px;}.elDich .ui-listview .ui-li.ui-btn{float:left;width:30.9333%;height:132px;margin:9px 1.2%;border-width:0;}.elDich .ui-listview .ui-li.ui-btn-inner{border:inherit;border-width:1px;margin:-1px;}.elDich .ui-listview .ui-btn-inner,.elDich .ui-listview .ui-btn-text,.elDich .ui-listview .ui-link-inherit,.elDich .ui-listview .ui-li-thumb{width:100%;height:100%;display:block;overflow:hidden;}.elDich .ui-listview .ui-link-inherit{padding:0 !important;position:relative;}.elDich .ui-listview .ui-li,.elDich .ui-listview .ui-btn-text,.elDich .ui-listview .ui-link-inherit,.elDich .ui-listview .ui-li-thumb{-webkit-border-radius:inherit;border-radius:inherit;}.elDich .ui-listview .ui-li-thumb{height:auto;max-width:100%;max-height:none;margin:0;left:0;z-index:-1;}.elDich .ui-listview .ui-icon{display:none;}.elDich .ui-listview .ui-li-heading,.elDich .ui-listview .ui-li-desc{font-family:'Open Sans Condensed',sans-serif;white-space:normal;overflow:visible;position:absolute;left:0;right:0;}.elDich .ui-listview .ui-li-heading{margin:0;padding:20px;bottom:40%;}.elDich .ui-listview .ui-li-desc{font-family:'Open Sans',sans-serif;margin:0;padding:0 20px;min-height:40%;bottom:0;line-height:1.5;}.ui-li-dich{background:#111;background:rgba(0,0,0,.8);-webkit-background-clip:padding;background-clip:padding-box;}.ui-li-dich{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;}.elDich .ui-listview .ui-li-desc.ui-li-aside{padding:2px 10px;width:auto;min-height:0;top:0;left:auto;bottom:auto;color:#c0c0c0;background:#909;background:rgba(153,0,153,.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;}.elDich .ui-listview .ui-btn:not(.ui-focus){-moz-box-shadow:0 0 9px #111;-webkit-box-shadow:0 0 9px #111;box-shadow:0 0 9px #111;}.elDich .ui-listview .ui-btn:hover{-moz-box-shadow:0 0 12px #387bbe;-webkit-box-shadow:0 0 12px #387bbe;box-shadow:0 0 12px #387bbe;}.elDich .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;}}@media all and (min-width:600px){.elDich .ui-content{padding:10px;}.elDich .ui-listview{max-width:800px;margin:0 auto;}.elDich .ui-listview .ui-li.ui-btn{width:23%;height:148px;margin:10px 1%;}}@media all and (min-width:800px){.elDich .ui-content{padding:10px;}.elDich .ui-listview{max-width:1000px;margin:0 auto;}.elDich .ui-listview .ui-li.ui-btn{width:18%;height:156px;margin:10px 1%;}}@media all and (min-width:1100px){.elDich .ui-content{padding:10px;}.elDich .ui-listview{max-width:1200px;margin:0 auto;}.elDich .ui-listview .ui-li.ui-btn{width:14.5%;height:160px;margin:10px 1%;}}
|
||||
@@ -1,159 +0,0 @@
|
||||
/* First breakpoint is 460px. 2 column layout. Tiles 150x150 pixels at the breakpoint. */
|
||||
@media all and (min-width: 800px) {
|
||||
.elFerm .ui-content {
|
||||
padding: 9px;
|
||||
}
|
||||
.elFerm .ui-listview .ui-li.ui-btn {
|
||||
float: left;
|
||||
width: 47.6%;
|
||||
/* 50% incl. 2 x 1.2% margin */
|
||||
height: 40px;
|
||||
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 */
|
||||
.elFerm .ui-listview .ui-li.ui-btn-inner {
|
||||
border: inherit;
|
||||
border-width: 1px;
|
||||
margin: -1px;
|
||||
}
|
||||
.elFerm .ui-listview .ui-btn-inner,
|
||||
.elFerm .ui-listview .ui-btn-text,
|
||||
.elFerm .ui-listview .ui-link-inherit,
|
||||
.elFerm .ui-listview .ui-li-thumb {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
.elFerm .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. */
|
||||
.elFerm .ui-listview .ui-li,
|
||||
.elFerm .ui-listview .ui-btn-text,
|
||||
.elFerm .ui-listview .ui-link-inherit,
|
||||
.elFerm .ui-listview .ui-li-thumb {
|
||||
-webkit-border-radius: inherit;
|
||||
border-radius: inherit;
|
||||
}
|
||||
.elFerm .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 */
|
||||
.elFerm .ui-listview .ui-icon {
|
||||
display: none;
|
||||
}
|
||||
/* Make text wrap. */
|
||||
.elFerm .ui-listview .ui-li-heading,
|
||||
.elFerm .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 */
|
||||
.elFerm .ui-listview .ui-li-heading {
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
bottom: 40%;
|
||||
}
|
||||
.elFerm .ui-listview .ui-li-desc {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
margin: 0;
|
||||
padding: 0 20px;
|
||||
min-height: 40%;
|
||||
bottom: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
/* Semi transparent background and different position if there is a thumb */
|
||||
.ui-li-dich {
|
||||
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-li-dich {
|
||||
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. */
|
||||
.elFerm .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. */
|
||||
.elFerm .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. */
|
||||
.elFerm .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. */
|
||||
.elFerm .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. 3 column layout. Tiles will be 150x150 pixels again at the breakpoint. */
|
||||
@media all and (min-width: 1300px) {
|
||||
.elFerm .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. */
|
||||
.elFerm .ui-listview {
|
||||
max-width: 800px;
|
||||
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. */
|
||||
.elFerm .ui-listview .ui-li.ui-btn {
|
||||
width: 30%;
|
||||
height: 44px;
|
||||
margin: 10px 1%;
|
||||
}
|
||||
}
|
||||
@@ -1,170 +0,0 @@
|
||||
/* First breakpoint is 460px. 2 column layout. Tiles 150x150 pixels at the breakpoint. */
|
||||
@media all and (min-width: 800px)
|
||||
{
|
||||
.elFerm .ui-content
|
||||
{
|
||||
padding: 9px;
|
||||
}
|
||||
.elFerm .ui-listview .ui-li.ui-btn
|
||||
{
|
||||
float: left;
|
||||
width: 47.6%; /* 50% incl. 2 x 1.2% margin */
|
||||
height: 40px;
|
||||
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 */
|
||||
.elFerm .ui-listview .ui-li.ui-btn-inner
|
||||
{
|
||||
border: inherit;
|
||||
border-width: 1px;
|
||||
margin: -1px;
|
||||
}
|
||||
.elFerm .ui-listview .ui-btn-inner, .elFerm .ui-listview .ui-btn-text, .elFerm .ui-listview .ui-link-inherit, .elFerm .ui-listview .ui-li-thumb
|
||||
{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
.elFerm .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. */
|
||||
.elFerm .ui-listview .ui-li, .elFerm .ui-listview .ui-btn-text, .elFerm .ui-listview .ui-link-inherit, .elFerm .ui-listview .ui-li-thumb
|
||||
{
|
||||
-webkit-border-radius: inherit;
|
||||
border-radius: inherit;
|
||||
}
|
||||
.elFerm .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 */
|
||||
.elFerm .ui-listview .ui-icon
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
/* Make text wrap. */
|
||||
.elFerm .ui-listview .ui-li-heading, .elFerm .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 */
|
||||
.elFerm .ui-listview .ui-li-heading
|
||||
{
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
bottom: 40%;
|
||||
}
|
||||
.elFerm .ui-listview .ui-li-desc
|
||||
{
|
||||
font-family: 'Open Sans' , sans-serif;
|
||||
margin: 0;
|
||||
padding: 0 20px;
|
||||
min-height: 40%;
|
||||
bottom: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
/* Semi transparent background and different position if there is a thumb */
|
||||
.ui-li-dich
|
||||
{
|
||||
background: #111;
|
||||
background: rgba(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-li-dich
|
||||
{
|
||||
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. */
|
||||
.elFerm .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,.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. */
|
||||
.elFerm .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. */
|
||||
.elFerm .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. */
|
||||
.elFerm .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. 3 column layout. Tiles will be 150x150 pixels again at the breakpoint. */
|
||||
@media all and (min-width: 1300px)
|
||||
{
|
||||
.elFerm .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. */
|
||||
.elFerm .ui-listview
|
||||
{
|
||||
max-width: 800px;
|
||||
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. */
|
||||
.elFerm .ui-listview .ui-li.ui-btn
|
||||
{
|
||||
width: 30%;
|
||||
height: 44px;
|
||||
margin: 10px 1%;
|
||||
}
|
||||
}
|
||||
Vendored
-1
@@ -1 +0,0 @@
|
||||
@media all and (min-width:800px){.elFerm .ui-content{padding:9px;}.elFerm .ui-listview .ui-li.ui-btn{float:left;width:47.6%;height:40px;margin:9px 1.2%;border-width:0;}.elFerm .ui-listview .ui-li.ui-btn-inner{border:inherit;border-width:1px;margin:-1px;}.elFerm .ui-listview .ui-btn-inner,.elFerm .ui-listview .ui-btn-text,.elFerm .ui-listview .ui-link-inherit,.elFerm .ui-listview .ui-li-thumb{width:100%;height:100%;display:block;overflow:hidden;}.elFerm .ui-listview .ui-link-inherit{padding:0 !important;position:relative;}.elFerm .ui-listview .ui-li,.elFerm .ui-listview .ui-btn-text,.elFerm .ui-listview .ui-link-inherit,.elFerm .ui-listview .ui-li-thumb{-webkit-border-radius:inherit;border-radius:inherit;}.elFerm .ui-listview .ui-li-thumb{height:auto;max-width:100%;max-height:none;margin:0;left:0;z-index:-1;}.elFerm .ui-listview .ui-icon{display:none;}.elFerm .ui-listview .ui-li-heading,.elFerm .ui-listview .ui-li-desc{font-family:'Open Sans Condensed',sans-serif;white-space:normal;overflow:visible;position:absolute;left:0;right:0;}.elFerm .ui-listview .ui-li-heading{margin:0;padding:20px;bottom:40%;}.elFerm .ui-listview .ui-li-desc{font-family:'Open Sans',sans-serif;margin:0;padding:0 20px;min-height:40%;bottom:0;line-height:1.5;}.ui-li-dich{background:#111;background:rgba(0,0,0,.8);-webkit-background-clip:padding;background-clip:padding-box;}.ui-li-dich{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;}.elFerm .ui-listview .ui-li-desc.ui-li-aside{padding:2px 10px;width:auto;min-height:0;top:0;left:auto;bottom:auto;color:#c0c0c0;background:#909;background:rgba(153,0,153,.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;}.elFerm .ui-listview .ui-btn:not(.ui-focus){-moz-box-shadow:0 0 9px #111;-webkit-box-shadow:0 0 9px #111;box-shadow:0 0 9px #111;}.elFerm .ui-listview .ui-btn:hover{-moz-box-shadow:0 0 12px #387bbe;-webkit-box-shadow:0 0 12px #387bbe;box-shadow:0 0 12px #387bbe;}.elFerm .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;}}@media all and (min-width:1300px){.elFerm .ui-content{padding:10px;}.elFerm .ui-listview{max-width:800px;margin:0 auto;}.elFerm .ui-listview .ui-li.ui-btn{width:30%;height:44px;margin:10px 1%;}}
|
||||
@@ -1,12 +0,0 @@
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('OpenSans.woff') format('woff');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Open Sans Condensed';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: url('OpenSansCondensed.woff') format('woff');
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('OpenSans.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans Condensed';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: url('OpenSansCondensed.woff') format('woff');
|
||||
}
|
||||
Vendored
-1
@@ -1 +0,0 @@
|
||||
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:url('OpenSans.woff') format('woff')}@font-face{font-family:'Open Sans Condensed';font-style:normal;font-weight:300;src:url('OpenSansCondensed.woff') format('woff')}
|
||||
@@ -144,18 +144,10 @@
|
||||
<ItemGroup>
|
||||
<Content Include="App_Readme\Elmah.txt" />
|
||||
<Content Include="Commenti.aspx" />
|
||||
<Content Include="Content\baseStyle.css" />
|
||||
<Content Include="Content\baseStyle.min.css" />
|
||||
<Content Include="Content\bootstrap-theme.css" />
|
||||
<Content Include="Content\bootstrap-theme.min.css" />
|
||||
<Content Include="Content\bootstrap.css" />
|
||||
<Content Include="Content\bootstrap.min.css" />
|
||||
<Content Include="Content\dichMan.css" />
|
||||
<Content Include="Content\dichMan.min.css" />
|
||||
<Content Include="Content\fermate.css" />
|
||||
<Content Include="Content\fermate.min.css" />
|
||||
<Content Include="Content\fonts.css" />
|
||||
<Content Include="Content\fonts.min.css" />
|
||||
<Content Include="Content\images\ajax-loader.gif" />
|
||||
<Content Include="Content\images\icons-18-black.png" />
|
||||
<Content Include="Content\images\icons-18-white.png" />
|
||||
@@ -327,12 +319,8 @@
|
||||
<Content Include="css\dichMan.less" />
|
||||
<Content Include="compilerconfig.json" />
|
||||
<None Include="compilerconfig.json.defaults" />
|
||||
<Content Include="Content\baseStyle.less" />
|
||||
<Content Include="Content\bootstrap-theme.css.map" />
|
||||
<Content Include="Content\bootstrap.css.map" />
|
||||
<Content Include="Content\dichMan.less" />
|
||||
<Content Include="Content\fermate.less" />
|
||||
<Content Include="Content\fonts.less" />
|
||||
<Content Include="Content\OpenSans.woff" />
|
||||
<Content Include="Content\OpenSansCondensed.woff" />
|
||||
<None Include="Properties\PublishProfiles\IIS01.pubxml" />
|
||||
|
||||
Reference in New Issue
Block a user