Touchgui/plugins/org.apache.cordova.dialogs/www/firefoxos/notification.css

Thu, 04 Jun 2015 14:50:33 +0200

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Thu, 04 Jun 2015 14:50:33 +0200
changeset 0
e8ccd40d0ef6
permissions
-rw-r--r--

Genesis of lecture sources for Droidcon Berlin 2015 in Postbahnhof.

     1 /*
     2  *
     3  * Licensed to the Apache Software Foundation (ASF) under one
     4  * or more contributor license agreements.  See the NOTICE file
     5  * distributed with this work for additional information
     6  * regarding copyright ownership.  The ASF licenses this file
     7  * to you under the Apache License, Version 2.0 (the
     8  * "License"); you may not use this file except in compliance
     9  * with the License.  You may obtain a copy of the License at
    10  *
    11  *   http://www.apache.org/licenses/LICENSE-2.0
    12  *
    13  * Unless required by applicable law or agreed to in writing,
    14  * software distributed under the License is distributed on an
    15  * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    16  * KIND, either express or implied.  See the License for the
    17  * specific language governing permissions and limitations
    18  * under the License.
    19  *
    20 */
    22 /* Main dialog setup */
    23 form[role="dialog"] {
    24   background:
    25     url(../img/pattern.png) repeat left top,
    26     url(../img/gradient.png) no-repeat left top / 100% 100%;
    27   overflow: hidden;
    28   position: absolute;
    29   z-index: 100;
    30   top: 0;
    31   left: 0;
    32   right: 0;
    33   bottom: 0;
    34   padding: 1.5rem 0 7rem;
    35   font-family: "MozTT", Sans-serif;
    36   font-size: 0;
    37   /* Using font-size: 0; we avoid the unwanted visual space (about 3px)
    38   created by white-spaces and break lines in the code betewen inline-block elements */
    39   color: #fff;
    40   text-align: left;
    41 }
    43 form[role="dialog"]:before {
    44   content: "";
    45   display: inline-block;
    46   vertical-align: middle;
    47   width: 0.1rem;
    48   height: 100%;
    49   margin-left: -0.1rem;
    50 }
    52 form[role="dialog"] > section {
    53   font-weight: lighter;
    54   font-size: 1.8rem;
    55   color: #FAFAFA;
    56   padding: 0 1.5rem;
    57   -moz-box-sizing: padding-box;
    58   width: 100%;
    59   display: inline-block;
    60   overflow-y: scroll;
    61   max-height: 100%;
    62   vertical-align: middle;
    63   white-space: normal;
    64 }
    66 form[role="dialog"] h1 {
    67   font-weight: normal;
    68   font-size: 1.6rem;
    69   line-height: 1.5em;
    70   color: #fff;
    71   margin: 0;
    72   padding: 0 1.5rem 1rem;
    73   border-bottom: 0.1rem solid #686868;
    74 }
    76 /* Menu & buttons setup */
    77 form[role="dialog"] menu {
    78   margin: 0;
    79   padding: 1.5rem;
    80   padding-bottom: 0.5rem;
    81   border-top: solid 0.1rem rgba(255, 255, 255, 0.1);
    82   background: #2d2d2d url(../img/pattern.png) repeat left top;
    83   display: block;
    84   overflow: hidden;
    85   position: absolute;
    86   left: 0;
    87   right: 0;
    88   bottom: 0;
    89   text-align: center;
    90 }
    92 form[role="dialog"] menu button::-moz-focus-inner {
    93   border: none;
    94   outline: none;
    95 }
    96 form[role="dialog"] menu button {
    97   width: 100%;
    98   height: 2.4rem;
    99   margin: 0 0 1rem;
   100   padding: 0 1.5rem;
   101   -moz-box-sizing: border-box;
   102   display: inline-block;
   103   vertical-align: middle;
   104   text-overflow: ellipsis;
   105   white-space: nowrap;
   106   overflow: hidden;
   107   background: #fafafa url(../img/default.png) repeat-x left bottom/ auto 100%;
   108   border: 0.1rem solid #a6a6a6;
   109   border-radius: 0.3rem;
   110   font: 500 1.2rem/2.4rem 'MozTT', Sans-serif;
   111   color: #333;
   112   text-align: center;
   113   text-shadow: 0.1rem 0.1rem 0 rgba(255,255,255,0.3);
   114   text-decoration: none;
   115   outline: none;
   116 }
   118 /* Press (default & recommend) */
   119 form[role="dialog"] menu button:active,
   120 form[role="dialog"] menu button.recommend:active,
   121 a.recommend[role="button"]:active  {
   122   border-color: #008aaa;
   123   color: #333;
   124 }
   126 /* Recommend */
   127 form[role="dialog"] menu button.recommend {
   128   background-image: url(../img/recommend.png);
   129   background-color: #00caf2;
   130   border-color: #008eab;
   131 }
   133 /* Danger */
   134 form[role="dialog"] menu button.danger,
   135 a.danger[role="button"] {
   136   background-image: url(../img/danger.png);
   137   background-color: #b70404;
   138   color: #fff;
   139   text-shadow: none;
   140   border-color: #820000;
   141 }
   143 /* Danger Press */
   144 form[role="dialog"] menu button.danger:active {
   145   background-image: url(../img/danger-press.png);
   146   background-color: #890707;
   147 }
   149 /* Disabled */
   150 form[role="dialog"] > menu > button[disabled] {
   151   background: #5f5f5f;
   152   color: #4d4d4d;
   153   text-shadow: none;
   154   border-color: #4d4d4d;
   155   pointer-events: none;
   156 }
   159 form[role="dialog"] menu button:nth-child(even) {
   160   margin-left: 1rem;
   161 }
   163 form[role="dialog"] menu button,
   164 form[role="dialog"] menu button:nth-child(odd) {
   165   margin: 0 0 1rem 0;
   166 }
   168 form[role="dialog"] menu button {
   169   width: calc((100% - 1rem) / 2);
   170 }
   172 form[role="dialog"] menu button.full {
   173   width: 100%;
   174 }
   176 /* Specific component code */
   177 form[role="dialog"] p {
   178   word-wrap: break-word;
   179   margin: 1rem 0 0;
   180   padding: 0 1.5rem 1rem;
   181   line-height: 3rem;
   182 }
   184 form[role="dialog"] p img {
   185   float: left;
   186   margin-right: 2rem;
   187 }
   189 form[role="dialog"] p strong {
   190   font-weight: lighter;
   191 }
   193 form[role="dialog"] p small {
   194   font-size: 1.4rem;
   195   font-weight: normal;
   196   color: #cbcbcb;
   197   display: block;
   198 }
   200 form[role="dialog"] dl {
   201   border-top: 0.1rem solid #686868;
   202   margin: 1rem 0 0;
   203   overflow: hidden;
   204   padding-top: 1rem;
   205   font-size: 1.6rem;
   206   line-height: 2.2rem;
   207 }
   209 form[role="dialog"] dl > dt {
   210   clear: both;
   211   float: left;
   212   width: 7rem;
   213   padding-left: 1.5rem;
   214   font-weight: 500;
   215   text-align: left;
   216 }
   218 form[role="dialog"] dl > dd {
   219   padding-right: 1.5rem;
   220   font-weight: 300;
   221   text-overflow: ellipsis;
   222   vertical-align: top;
   223   overflow: hidden;
   224 }
   226 /* input areas */
   227 input[type="text"],
   228 input[type="password"],
   229 input[type="email"],
   230 input[type="tel"],
   231 input[type="search"],
   232 input[type="url"],
   233 input[type="number"],
   234 textarea {
   235   -moz-box-sizing: border-box;
   236   display: block;
   237   overflow: hidden;
   238   width: 100%;
   239   height: 3rem;
   240   resize: none;
   241   padding: 0 1rem;
   242   font-size: 1.6rem;
   243   line-height: 3rem;
   244   border: 0.1rem solid #ccc;
   245   border-radius: 0.3rem;
   246   box-shadow: none; /* override the box-shadow from the system (performance issue) */
   247   background: #fff url(input_areas/images/ui/shadow.png) repeat-x;
   248 }

mercurial