smartthings-plugin/plugin/css/helper.css

   1 .margin-left-s      {margin-left: 10px !important;}
   2 .margin-left-m      {margin-left: 20px !important;}
   3 .margin-left-l      {margin-left: 30px !important;}
   4 .margin-left-xl     {margin-left: 40px !important;}
   5 .margin-left-xxl    {margin-left: 50px !important;}
   6
   7 .margin-top-s      {margin-top: 10px !important;}
   8
   9 .margin-top-m      {margin-top: 20px !important;}
  10 .margin-top-l      {margin-top: 30px !important;}
  11 .margin-top-xl     {margin-top: 40px !important;}
  12 .margin-top-xxl    {margin-top: 50px !important;}
  13
  14 .margin-bottom-s      {margin-bottom: 10px !important;}
  15 .margin-bottom-m      {margin-bottom: 20px !important;}
  16 .margin-bottom-l      {margin-bottom: 30px !important;}
  17 .margin-bottom-xl     {margin-bottom: 40px !important;}
  18 .margin-bottom-xxl    {margin-bottom: 50px !important;}
  19
  20 .margin-right-s      {margin-right: 10px !important;}
  21 .margin-right-m      {margin-right: 20px !important;}
  22 .margin-right-l      {margin-right: 30px !important;}
  23 .margin-right-xl     {margin-right: 40px !important;}
  24 .margin-right-xxl    {margin-right: 50px !important;}
  25
  26 .padding-left-s      {padding-left: 10px !important;}
  27 .padding-left-m      {padding-left: 20px !important;}
  28 .padding-left-l      {padding-left: 30px !important;}
  29 .padding-left-xl     {padding-left: 40px !important;}
  30 .padding-left-xxl    {padding-left: 50px !important;}
  31
  32 .padding-top-s      {padding-top: 10px !important;}
  33 .padding-top-m      {padding-top: 20px !important;}
  34 .padding-top-l      {padding-top: 30px !important;}
  35 .padding-top-xl     {padding-top: 40px !important;}
  36 .padding-top-xxl    {padding-top: 50px !important;}
  37
  38 .padding-bottom-s      {padding-bottom: 10px !important;}
  39 .padding-bottom-m      {padding-bottom: 20px !important;}
  40 .padding-bottom-l      {padding-bottom: 30px !important;}
  41 .padding-bottom-xl     {padding-bottom: 40px !important;}
  42 .padding-bottom-xxl    {padding-bottom: 50px !important;}
  43
  44 .padding-right-s      {padding-right: 10px !important;}
  45 .padding-right-m      {padding-right: 20px !important;}
  46 .padding-right-l      {padding-right: 30px !important;}
  47 .padding-right-xl     {padding-right: 40px !important;}
  48 .padding-right-xxl    {padding-right: 50px !important;}
  49
  50 .round-border       {border-radius: 50% !important;}
  51
  52 hr {
  53     display: block;
  54     height: 1px;
  55     margin: 0 0;
  56 }
  57
  58 html {
  59     min-height: 100%;
  60     height: 100%;
  61     -webkit-tap-highlight-color:transparent;
  62 }
  63
  64 body {
  65     height: inherit;
  66     overflow-y: auto;
  67         overflow-x: hidden;
  68 }
  69
  70 .is-vertical-center {
  71     display: flex;
  72     align-items: center;
  73 }
  74
  75 #app-title {
  76     text-transform: uppercase;
  77 }
  78
  79 #camera_controller {
  80   width: 270px;
  81   height: 270px;
  82   background-image: url("../res/controller_bg.png");
  83   background-size: 100% 100%;
  84 }
  85
  86 .mid-div {
  87     margin: 20px 0 20px 0;
  88 }
  89
  90 #motion_area {
  91     border-radius: 50%;
  92     background-color: #ffffff;
  93     background-size: contain;
  94     width: 100px;
  95     height: 100px;
  96     display: inline-block;
  97     box-shadow: 0 0 5px grey;
  98     /* margin-top: 85px; */
  99 }
 100
 101 #camera_controller[data-state='auto_mode_on'] > #motion_area[data-state='motion_detected'] {
 102     background-color: #209cee !important;
 103 }
 104
 105 #camera_controller[data-state='auto_mode_on'] > #motion_area[data-state='motion_detected'] p{
 106     color: #ffffff !important;
 107 }
 108
 109 #camera_controller[data-state='auto_mode_on'] > #motion_area[data-state='motion_detected'] p:after{
 110     content: 'Motion Detected';
 111 }
 112
 113 #camera_controller[data-state='auto_mode_on'] > #motion_area[data-state='no_motion'] {
 114     background-color: #ffffff !important;
 115 }
 116
 117 #camera_controller[data-state='auto_mode_on'] > #motion_area[data-state='no_motion'] p{
 118     color: #777 !important;
 119 }
 120
 121 #camera_controller[data-state='auto_mode_on'] > #motion_area[data-state='no_motion'] p:after{
 122     content: 'No\aMotion';
 123     white-space: pre;
 124 }
 125
 126 #camera_controller[data-state='auto_mode_off'] #motion_area {
 127     background-color: #ffffff !important;
 128 }
 129
 130 #camera_controller[data-state='auto_mode_off'] p{
 131     color: #ccc !important;
 132 }
 133
 134 #camera_controller[data-state='auto_mode_off'] p:after{
 135     content: '';
 136 }
 137
 138 #motion_area > p {
 139     transform: translateY(50%);
 140 }
 141
 142 .icon-move {
 143     height: 85px;
 144     width: 85px;
 145 }
 146
 147 #camera_controller[data-state='auto_mode_on'] > .icon-move {
 148     background-color: #ccc;
 149 }
 150
 151 #camera_controller[data-state='auto_mode_off'] > .icon-move {
 152     background-color: #209cee;
 153 }
 154
 155 #move-left, #move-right {
 156     margin-top: 10px;
 157 }
 158
 159 #move-left {
 160     float: left;
 161     mask: url("../res/arrow_left.png") no-repeat center;
 162     mask-size: 18px 30px;
 163     -webkit-mask: url("../res/arrow_left.png") no-repeat center;
 164     -webkit-mask-size: 18px 30px;
 165 }
 166
 167 #move-right {
 168     float: right;
 169     mask: url("../res/arrow_right.png") no-repeat center;
 170     mask-size: 18px 30px;
 171     -webkit-mask: url("../res/arrow_right.png") no-repeat center;
 172     -webkit-mask-size: 18px 30px;
 173 }
 174
 175 #move-up {
 176     mask: url("../res/arrow_up.png") no-repeat center;
 177     mask-size: 30px 18px;
 178     -webkit-mask: url("../res/arrow_up.png") no-repeat center;
 179     -webkit-mask-size: 30px 18px;
 180 }
 181
 182 #move-down {
 183     mask: url("../res/arrow_down.png") no-repeat center;
 184     mask-size: 30px 18px;
 185     -webkit-mask: url("../res/arrow_down.png") no-repeat center;
 186     -webkit-mask-size: 30px 18px;
 187 }
 188
 189 #auto_mode[data-state='on'] > #auto_mode_on_text {
 190     display: block;
 191 }
 192
 193 #auto_mode[data-state='on'] > #auto_mode_off_text {
 194     display: none;
 195 }
 196
 197 #auto_mode[data-state='off'] > #auto_mode_on_text {
 198     display: none;
 199 }
 200
 201 #auto_mode[data-state='off'] > #auto_mode_off_text {
 202     display: block;
 203 }
 204
 205 #mode_name {
 206     width: 200px;
 207 }
 208
 209 /* slider for IE */
 210 input[type=range].slider.is-info::-ms-track{
 211     background:#209cee!important;
 212     height: 2px;
 213     border-color: transparent;
 214     color: transparent;
 215     background-color: transparent;
 216 }
 217
 218 /* slider for mozilla */
 219 input[type=range].slider.is-info::-moz-range-track {
 220   position:relative;
 221   width: 100%;
 222   height: 6px;
 223   background: #ccc;
 224 }
 225
 226 input[type=range].slider.is-info::-moz-range-progress {
 227   position:relative;
 228   width: 100%;
 229   height: 6px;
 230   background: #209cee;
 231 }
 232
 233 /* slider for chrome */
 234 @media screen and (-webkit-min-device-pixel-ratio:0) {
 235     input[type='range'].slider.is-info {
 236       overflow: hidden;
 237       width: 100%;
 238       -webkit-appearance: none;
 239     }
 240
 241     input[type='range'].slider.is-info::-webkit-slider-runnable-track {
 242       height: 10px;
 243       -webkit-appearance: none;
 244       color: #13bba4;
 245       margin-top: -1px;
 246     }
 247
 248     input[type='range'].slider.is-info::-webkit-slider-thumb {
 249       box-shadow: 1080px 0 0 1080px #ccc;
 250     }
 251 }
 252
 253 @media only screen and (min-height: 600px) {
 254         html {
 255           min-width: 100%;
 256           min-height: 100%;
 257           width: 100%;
 258           height: 100%;
 259         }
 260 }
 261
 262 .leftSide {
 263     float: left;
 264     width: 100%;
 265     background-color: #fafafa;
 266 }
 267
 268 .rightSide {
 269     float: left;
 270     width: 100%;
 271 }
 272
 273 @media only screen and (orientation: landscape) and (min-height: 360px){
 274     .leftSide {
 275         width: 50%;
 276         height: inherit;
 277     }
 278     .rightSide {
 279         width: 50%;
 280     }
 281 }
 282
 283 @media only screen and (min-width: 768px) {
 284     .leftSide {
 285         height: auto;
 286     }
 287 }
 288
 289 .loader {
 290     border: 3px solid #f3f3f3;
 291     border-radius: 100%;
 292     border-top: 3px solid #3498db;
 293     width: 40px;
 294     height: 40px;
 295     -webkit-animation: spin 2s linear infinite; /* Safari */
 296     animation: spin 2s linear infinite;
 297 }
 298
 299 /* Safari */
 300 @-webkit-keyframes spin {
 301     0% { -webkit-transform: rotate(0deg); }
 302     100% { -webkit-transform: rotate(360deg); }
 303 }
 304
 305 @keyframes spin {
 306     0% { transform: rotate(0deg); }
 307     100% { transform: rotate(360deg); }
 308 }
 309
 310 .shadow-up {
 311     filter: drop-shadow(0px -10px 5px #cccccc);
 312  }
 313
 314  .shadow-down {
 315     filter: drop-shadow(0px 10px 5px #cccccc);
 316  }
 317
 318  .shadow-right {
 319     filter: drop-shadow(10px 0px 5px #cccccc);
 320  }
 321
 322  .shadow-left {
 323     filter: drop-shadow(-10px 0px 5px #cccccc);
 324  }