www/css/index.css

   1 * {
   2     -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
   3 }
   4
   5 body {
   6     -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
   7     -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
   8     -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
   9 }
  10
  11
  12 body > section {
  13         height: 100%;
  14 }
  15 [data-position="right"] {
  16         position: absolute;
  17         top: 0;
  18         left: 0;
  19         right: 0;
  20         bottom: 0;
  21         transform: translateX(100%);
  22         -webkit-transform: translateX(100%);
  23         z-index: 15;
  24         z-index: 100; /* -> drawer */
  25 }
  26 section[role="region"][data-position="right"] {
  27         position: absolute;
  28 }
  29 [data-position="right"].current {
  30         animation: rightToCurrent 0.4s forwards;
  31         -webkit-animation: rightToCurrent 0.4s forwards;
  32 }
  33 [data-position="right"].right {
  34         animation: currentToRight 0.4s forwards;
  35         -webkit-animation: currentToRight 0.4s forwards;
  36 }
  37 [data-position="current"].left {
  38         animation: currentToLeft 0.4s forwards;
  39         -webkit-animation: currentToLeft 0.4s forwards;
  40 }
  41 [data-position="current"].current {
  42         animation: leftToCurrent 0.4s forwards;
  43         -webkit-animation: leftToCurrent 0.4s forwards;
  44 }
  45 [data-position="back"] {
  46         position: absolute;
  47         top: 0;
  48         left: 0;
  49         right: 0;
  50         bottom: 0;
  51         z-index: -1;
  52         opacity: 0;
  53         /* z-index: 100; -> drawer */
  54 }
  55 [data-position="back"].fade-in {
  56         z-index: 120;
  57         animation: fadeIn 0.2s forwards;
  58         -webkit-animation: fadeIn 0.2s forwards;
  59 }
  60 [data-position="back"].fade-out {
  61         animation: fadeOut 0.2s forwards;
  62         -webkit-animation: fadeOut 0.2s forwards;
  63 }
  64
  65 [data-position="edit-mode"] {
  66         position: absolute;
  67         top: -5rem;
  68         left: 0;
  69         right: 0;
  70         bottom: -7rem;
  71         z-index: -1;
  72         opacity: 0;
  73         transition: all 0.3s ease;
  74 }
  75 [data-position="edit-mode"].edit {
  76         position: absolute;
  77         top: 0;
  78         left: 0;
  79         right: 0;
  80         bottom: 0;
  81         z-index: 120;
  82         opacity: 1;
  83 }
  84
  85
  86 /* lista messaggi */
  87 [data-type="list"].fullmessage li {
  88         min-height: 60px;
  89         height: auto;
  90         clear: both;
  91 }
  92 [data-type="list"].fullmessage li p {
  93         text-overflow: auto;
  94         white-space: normal;
  95         overflow: auto;
  96 }
  97
  98 /* lista con footer */
  99 .scrollable.header.footer {
 100         height: calc(100% - 9.6rem);
 101     overflow-x:hidden;
 102 }
 103
 104 /* barra rispondi */
 105 .bb-tablist li { background-color: #969696; }
 106 .bb-tablist .inputbox { flex-grow: 4; }
 107 .bb-tablist .inputbox input  { margin-top: 2px; }
 108 /*.bb-tablist > li > a { padding-top: 6px; }
 109 .bb-tablist .action-icon:before { left: 40%; }*/
 110
 111 /* input con immagine */
 112 form p > .pack {
 113         float: left;
 114         margin: 0px 0.5rem 0px 0px;
 115         height: 100%;
 116         position: relative;
 117         z-index: 2;
 118     display: block;
 119     overflow: hidden;
 120     width: 4rem;
 121     height: 4rem;
 122     border-radius: 2.5rem;
 123     box-sizing: border-box;
 124     box-shadow: 0px 0px 0px 0.1rem #DEDEDE;
 125     background: none repeat scroll center center / cover transparent;
 126     position: relative;
 127     z-index: 1;
 128     image-rendering: -moz-crisp-edges;
 129 }
 130
 131 form p > .pack ~ input {
 132         width : calc(100% - 4.5rem);
 133 }
 134
 135
 136 /* immagine in dialogo */
 137 [role="dialog"] button img {
 138         vertical-align: middle;
 139         margin-right: 1rem;
 140 }
 141
 142
 143 /* switch nella form. sicuramente sbaglio qualcosa io... intanto questo lo sistema */
 144 form > p > label.pack-switch {  width: 100%; }
 145 form > p >  label.pack-switch input ~ span { padding-top: 1rem; display: inline-block; }