├── screenshot-1.png ├── README.md ├── index.html ├── LICENSE └── css ├── normalize.css └── kaiui.css /screenshot-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nadim1992/KaiUI/HEAD/screenshot-1.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # KaiUI (v1.0.1) 2 | Useful native UI components for KaiOS 3 | 4 | ![Screenshot](https://raw.githubusercontent.com/nadim1992/KaiUI/develop/screenshot-1.png) 5 | 6 | ## Getting Started 7 | 8 | Visit [KaiOS](https://developer.kaiostech.com) 9 | 10 | ### Installing 11 | 12 | ``` 13 | Include the css directory into your project. 14 | ``` 15 | 16 | ### Usage 17 | 18 | ``` 19 | See index.html file's content for usage. 20 | ``` 21 | 22 | What about a silly [Demo App](https://github.com/nadim1992/legal-terms-kaios) 23 | 24 | ## Built With 25 | 26 | * HTML 27 | * CSS 28 | * JavaScript 29 | * :heart: 30 | 31 | ## Author 32 | 33 | * **Jahidur Rahman Nadim** [GitHub](https://github.com/nadim1992) 34 | 35 | ## License 36 | 37 | [CC0-1.0](./LICENSE) 38 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | KaiUI: KaiOS 7 | 8 | 9 | 10 | 11 | 12 | 32 | 33 | 34 | 35 |
36 | 37 | 38 | 39 |

Header

40 |

Header of body text

41 |

Tab text

42 |

Separator text

43 |
Software Key text
44 | 45 |

Primary text

46 |

Secondary text

47 |

Tertiary text

48 |

Body text

49 |

Hyperlink text

50 |

Button text

51 | 52 |
53 | 54 | 55 | 56 |
57 |

Header

58 |
59 | 60 |
61 | 62 | 63 | 64 |
65 |

Separator Text

66 |
67 | 68 |
69 | 70 | 71 | 72 |
73 |
Left Key
74 |
Select
75 |
Right Key
76 |
77 | 78 |
79 | 80 | 81 | 82 |
83 |

This is a toast message.

84 |
85 |
86 | 87 |
88 | 89 | 90 | 91 | 121 | 122 | 123 | 124 |
125 |

Option Menu

126 | 132 |
133 | 134 |
135 | 136 | 137 | 138 | 139 | 140 |
141 | 142 | 143 | 144 |
145 | 146 | 147 | 148 |
149 | 150 | 151 |
152 |
153 | 154 | 155 |
156 | 157 |
158 | 159 | 160 | 161 |
162 | 166 | 167 |
168 | 169 |
170 | 171 | 172 | 176 | 177 | 178 | 179 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Creative Commons Legal Code 2 | 3 | CC0 1.0 Universal 4 | 5 | CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE 6 | LEGAL SERVICES. DISTRIBUTION OF THIS DOCUMENT DOES NOT CREATE AN 7 | ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS 8 | INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES 9 | REGARDING THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS 10 | PROVIDED HEREUNDER, AND DISCLAIMS LIABILITY FOR DAMAGES RESULTING FROM 11 | THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS PROVIDED 12 | HEREUNDER. 13 | 14 | Statement of Purpose 15 | 16 | The laws of most jurisdictions throughout the world automatically confer 17 | exclusive Copyright and Related Rights (defined below) upon the creator 18 | and subsequent owner(s) (each and all, an "owner") of an original work of 19 | authorship and/or a database (each, a "Work"). 20 | 21 | Certain owners wish to permanently relinquish those rights to a Work for 22 | the purpose of contributing to a commons of creative, cultural and 23 | scientific works ("Commons") that the public can reliably and without fear 24 | of later claims of infringement build upon, modify, incorporate in other 25 | works, reuse and redistribute as freely as possible in any form whatsoever 26 | and for any purposes, including without limitation commercial purposes. 27 | These owners may contribute to the Commons to promote the ideal of a free 28 | culture and the further production of creative, cultural and scientific 29 | works, or to gain reputation or greater distribution for their Work in 30 | part through the use and efforts of others. 31 | 32 | For these and/or other purposes and motivations, and without any 33 | expectation of additional consideration or compensation, the person 34 | associating CC0 with a Work (the "Affirmer"), to the extent that he or she 35 | is an owner of Copyright and Related Rights in the Work, voluntarily 36 | elects to apply CC0 to the Work and publicly distribute the Work under its 37 | terms, with knowledge of his or her Copyright and Related Rights in the 38 | Work and the meaning and intended legal effect of CC0 on those rights. 39 | 40 | 1. Copyright and Related Rights. A Work made available under CC0 may be 41 | protected by copyright and related or neighboring rights ("Copyright and 42 | Related Rights"). Copyright and Related Rights include, but are not 43 | limited to, the following: 44 | 45 | i. the right to reproduce, adapt, distribute, perform, display, 46 | communicate, and translate a Work; 47 | ii. moral rights retained by the original author(s) and/or performer(s); 48 | iii. publicity and privacy rights pertaining to a person's image or 49 | likeness depicted in a Work; 50 | iv. rights protecting against unfair competition in regards to a Work, 51 | subject to the limitations in paragraph 4(a), below; 52 | v. rights protecting the extraction, dissemination, use and reuse of data 53 | in a Work; 54 | vi. database rights (such as those arising under Directive 96/9/EC of the 55 | European Parliament and of the Council of 11 March 1996 on the legal 56 | protection of databases, and under any national implementation 57 | thereof, including any amended or successor version of such 58 | directive); and 59 | vii. other similar, equivalent or corresponding rights throughout the 60 | world based on applicable law or treaty, and any national 61 | implementations thereof. 62 | 63 | 2. Waiver. To the greatest extent permitted by, but not in contravention 64 | of, applicable law, Affirmer hereby overtly, fully, permanently, 65 | irrevocably and unconditionally waives, abandons, and surrenders all of 66 | Affirmer's Copyright and Related Rights and associated claims and causes 67 | of action, whether now known or unknown (including existing as well as 68 | future claims and causes of action), in the Work (i) in all territories 69 | worldwide, (ii) for the maximum duration provided by applicable law or 70 | treaty (including future time extensions), (iii) in any current or future 71 | medium and for any number of copies, and (iv) for any purpose whatsoever, 72 | including without limitation commercial, advertising or promotional 73 | purposes (the "Waiver"). Affirmer makes the Waiver for the benefit of each 74 | member of the public at large and to the detriment of Affirmer's heirs and 75 | successors, fully intending that such Waiver shall not be subject to 76 | revocation, rescission, cancellation, termination, or any other legal or 77 | equitable action to disrupt the quiet enjoyment of the Work by the public 78 | as contemplated by Affirmer's express Statement of Purpose. 79 | 80 | 3. Public License Fallback. Should any part of the Waiver for any reason 81 | be judged legally invalid or ineffective under applicable law, then the 82 | Waiver shall be preserved to the maximum extent permitted taking into 83 | account Affirmer's express Statement of Purpose. In addition, to the 84 | extent the Waiver is so judged Affirmer hereby grants to each affected 85 | person a royalty-free, non transferable, non sublicensable, non exclusive, 86 | irrevocable and unconditional license to exercise Affirmer's Copyright and 87 | Related Rights in the Work (i) in all territories worldwide, (ii) for the 88 | maximum duration provided by applicable law or treaty (including future 89 | time extensions), (iii) in any current or future medium and for any number 90 | of copies, and (iv) for any purpose whatsoever, including without 91 | limitation commercial, advertising or promotional purposes (the 92 | "License"). The License shall be deemed effective as of the date CC0 was 93 | applied by Affirmer to the Work. Should any part of the License for any 94 | reason be judged legally invalid or ineffective under applicable law, such 95 | partial invalidity or ineffectiveness shall not invalidate the remainder 96 | of the License, and in such case Affirmer hereby affirms that he or she 97 | will not (i) exercise any of his or her remaining Copyright and Related 98 | Rights in the Work or (ii) assert any associated claims and causes of 99 | action with respect to the Work, in either case contrary to Affirmer's 100 | express Statement of Purpose. 101 | 102 | 4. Limitations and Disclaimers. 103 | 104 | a. No trademark or patent rights held by Affirmer are waived, abandoned, 105 | surrendered, licensed or otherwise affected by this document. 106 | b. Affirmer offers the Work as-is and makes no representations or 107 | warranties of any kind concerning the Work, express, implied, 108 | statutory or otherwise, including without limitation warranties of 109 | title, merchantability, fitness for a particular purpose, non 110 | infringement, or the absence of latent or other defects, accuracy, or 111 | the present or absence of errors, whether or not discoverable, all to 112 | the greatest extent permissible under applicable law. 113 | c. Affirmer disclaims responsibility for clearing rights of other persons 114 | that may apply to the Work or any use thereof, including without 115 | limitation any person's Copyright and Related Rights in the Work. 116 | Further, Affirmer disclaims responsibility for obtaining any necessary 117 | consents, permissions or other rights required for any use of the 118 | Work. 119 | d. Affirmer understands and acknowledges that Creative Commons is not a 120 | party to this document and has no duty or obligation with respect to 121 | this CC0 or use of the Work. 122 | -------------------------------------------------------------------------------- /css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | ========================================================================== */ 18 | 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | * Render the `main` element consistently in IE. 29 | */ 30 | 31 | main { 32 | display: block; 33 | } 34 | 35 | /** 36 | * Correct the font size and margin on `h1` elements within `section` and 37 | * `article` contexts in Chrome, Firefox, and Safari. 38 | */ 39 | 40 | h1 { 41 | font-size: 2em; 42 | margin: 0.67em 0; 43 | } 44 | 45 | /* Grouping content 46 | ========================================================================== */ 47 | 48 | /** 49 | * 1. Add the correct box sizing in Firefox. 50 | * 2. Show the overflow in Edge and IE. 51 | */ 52 | 53 | hr { 54 | box-sizing: content-box; /* 1 */ 55 | height: 0; /* 1 */ 56 | overflow: visible; /* 2 */ 57 | } 58 | 59 | /** 60 | * 1. Correct the inheritance and scaling of font size in all browsers. 61 | * 2. Correct the odd `em` font sizing in all browsers. 62 | */ 63 | 64 | pre { 65 | font-family: monospace, monospace; /* 1 */ 66 | font-size: 1em; /* 2 */ 67 | } 68 | 69 | /* Text-level semantics 70 | ========================================================================== */ 71 | 72 | /** 73 | * Remove the gray background on active links in IE 10. 74 | */ 75 | 76 | a { 77 | background-color: transparent; 78 | } 79 | 80 | /** 81 | * 1. Remove the bottom border in Chrome 57- 82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 83 | */ 84 | 85 | abbr[title] { 86 | border-bottom: none; /* 1 */ 87 | text-decoration: underline; /* 2 */ 88 | text-decoration: underline dotted; /* 2 */ 89 | } 90 | 91 | /** 92 | * Add the correct font weight in Chrome, Edge, and Safari. 93 | */ 94 | 95 | b, 96 | strong { 97 | font-weight: bolder; 98 | } 99 | 100 | /** 101 | * 1. Correct the inheritance and scaling of font size in all browsers. 102 | * 2. Correct the odd `em` font sizing in all browsers. 103 | */ 104 | 105 | code, 106 | kbd, 107 | samp { 108 | font-family: monospace, monospace; /* 1 */ 109 | font-size: 1em; /* 2 */ 110 | } 111 | 112 | /** 113 | * Add the correct font size in all browsers. 114 | */ 115 | 116 | small { 117 | font-size: 80%; 118 | } 119 | 120 | /** 121 | * Prevent `sub` and `sup` elements from affecting the line height in 122 | * all browsers. 123 | */ 124 | 125 | sub, 126 | sup { 127 | font-size: 75%; 128 | line-height: 0; 129 | position: relative; 130 | vertical-align: baseline; 131 | } 132 | 133 | sub { 134 | bottom: -0.25em; 135 | } 136 | 137 | sup { 138 | top: -0.5em; 139 | } 140 | 141 | /* Embedded content 142 | ========================================================================== */ 143 | 144 | /** 145 | * Remove the border on images inside links in IE 10. 146 | */ 147 | 148 | img { 149 | border-style: none; 150 | } 151 | 152 | /* Forms 153 | ========================================================================== */ 154 | 155 | /** 156 | * 1. Change the font styles in all browsers. 157 | * 2. Remove the margin in Firefox and Safari. 158 | */ 159 | 160 | button, 161 | input, 162 | optgroup, 163 | select, 164 | textarea { 165 | font-family: inherit; /* 1 */ 166 | font-size: 100%; /* 1 */ 167 | line-height: 1.15; /* 1 */ 168 | margin: 0; /* 2 */ 169 | } 170 | 171 | /** 172 | * Show the overflow in IE. 173 | * 1. Show the overflow in Edge. 174 | */ 175 | 176 | button, 177 | input { /* 1 */ 178 | overflow: visible; 179 | } 180 | 181 | /** 182 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 183 | * 1. Remove the inheritance of text transform in Firefox. 184 | */ 185 | 186 | button, 187 | select { /* 1 */ 188 | text-transform: none; 189 | } 190 | 191 | /** 192 | * Correct the inability to style clickable types in iOS and Safari. 193 | */ 194 | 195 | button, 196 | [type="button"], 197 | [type="reset"], 198 | [type="submit"] { 199 | -webkit-appearance: button; 200 | } 201 | 202 | /** 203 | * Remove the inner border and padding in Firefox. 204 | */ 205 | 206 | button::-moz-focus-inner, 207 | [type="button"]::-moz-focus-inner, 208 | [type="reset"]::-moz-focus-inner, 209 | [type="submit"]::-moz-focus-inner { 210 | border-style: none; 211 | padding: 0; 212 | } 213 | 214 | /** 215 | * Restore the focus styles unset by the previous rule. 216 | */ 217 | 218 | button:-moz-focusring, 219 | [type="button"]:-moz-focusring, 220 | [type="reset"]:-moz-focusring, 221 | [type="submit"]:-moz-focusring { 222 | outline: 1px dotted ButtonText; 223 | } 224 | 225 | /** 226 | * Correct the padding in Firefox. 227 | */ 228 | 229 | fieldset { 230 | padding: 0.35em 0.75em 0.625em; 231 | } 232 | 233 | /** 234 | * 1. Correct the text wrapping in Edge and IE. 235 | * 2. Correct the color inheritance from `fieldset` elements in IE. 236 | * 3. Remove the padding so developers are not caught out when they zero out 237 | * `fieldset` elements in all browsers. 238 | */ 239 | 240 | legend { 241 | box-sizing: border-box; /* 1 */ 242 | color: inherit; /* 2 */ 243 | display: table; /* 1 */ 244 | max-width: 100%; /* 1 */ 245 | padding: 0; /* 3 */ 246 | white-space: normal; /* 1 */ 247 | } 248 | 249 | /** 250 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 251 | */ 252 | 253 | progress { 254 | vertical-align: baseline; 255 | } 256 | 257 | /** 258 | * Remove the default vertical scrollbar in IE 10+. 259 | */ 260 | 261 | textarea { 262 | overflow: auto; 263 | } 264 | 265 | /** 266 | * 1. Add the correct box sizing in IE 10. 267 | * 2. Remove the padding in IE 10. 268 | */ 269 | 270 | [type="checkbox"], 271 | [type="radio"] { 272 | box-sizing: border-box; /* 1 */ 273 | padding: 0; /* 2 */ 274 | } 275 | 276 | /** 277 | * Correct the cursor style of increment and decrement buttons in Chrome. 278 | */ 279 | 280 | [type="number"]::-webkit-inner-spin-button, 281 | [type="number"]::-webkit-outer-spin-button { 282 | height: auto; 283 | } 284 | 285 | /** 286 | * 1. Correct the odd appearance in Chrome and Safari. 287 | * 2. Correct the outline style in Safari. 288 | */ 289 | 290 | [type="search"] { 291 | -webkit-appearance: textfield; /* 1 */ 292 | outline-offset: -2px; /* 2 */ 293 | } 294 | 295 | /** 296 | * Remove the inner padding in Chrome and Safari on macOS. 297 | */ 298 | 299 | [type="search"]::-webkit-search-decoration { 300 | -webkit-appearance: none; 301 | } 302 | 303 | /** 304 | * 1. Correct the inability to style clickable types in iOS and Safari. 305 | * 2. Change font properties to `inherit` in Safari. 306 | */ 307 | 308 | ::-webkit-file-upload-button { 309 | -webkit-appearance: button; /* 1 */ 310 | font: inherit; /* 2 */ 311 | } 312 | 313 | /* Interactive 314 | ========================================================================== */ 315 | 316 | /* 317 | * Add the correct display in Edge, IE 10+, and Firefox. 318 | */ 319 | 320 | details { 321 | display: block; 322 | } 323 | 324 | /* 325 | * Add the correct display in all browsers. 326 | */ 327 | 328 | summary { 329 | display: list-item; 330 | } 331 | 332 | /* Misc 333 | ========================================================================== */ 334 | 335 | /** 336 | * Add the correct display in IE 10+. 337 | */ 338 | 339 | template { 340 | display: none; 341 | } 342 | 343 | /** 344 | * Add the correct display in IE 10. 345 | */ 346 | 347 | [hidden] { 348 | display: none; 349 | } 350 | -------------------------------------------------------------------------------- /css/kaiui.css: -------------------------------------------------------------------------------- 1 | /** 2 | * =========================== 3 | * **************** Agenda *** 4 | * 5 | * 01. Basic 6 | * 02. Alignment 7 | * 03. Color 8 | * 04. Font 9 | * 05. Header 10 | * 06. Separator 11 | * 07. Software key 12 | * 08. Toast 13 | * 09. List 14 | * 10. Options menu 15 | * 11. Button 16 | * 12. Input 17 | * 13. Table 18 | * 14. Progress 19 | * =========================== 20 | */ 21 | 22 | /* ============== Basic ============== */ 23 | h1, h2, h3, h4, h5, ul, p { 24 | margin: 0; 25 | padding: 0; 26 | } 27 | 28 | .statusbar-placeholder { 29 | background-color: #320374; 30 | height: 26px; 31 | } 32 | 33 | #kui-app { 34 | font-family: 'Open Sans'; 35 | height: 100%; 36 | width: 100%; 37 | } 38 | 39 | .kui-content-area { 40 | overflow: hidden; 41 | position: relative; 42 | } 43 | 44 | .kui-overlay { 45 | background: rgba(0,0,0, .7); 46 | display: none; 47 | height: 100%; 48 | position: absolute; 49 | width: 100%; 50 | } 51 | 52 | .kui-text-upcase { 53 | text-transform: uppercase; 54 | } 55 | 56 | /* ============== Alignment ============== */ 57 | .kui-text-left { 58 | text-align: left; 59 | } 60 | 61 | .kui-text-center { 62 | text-align: center; 63 | } 64 | 65 | .kui-text-right { 66 | text-align: right; 67 | } 68 | 69 | /* ============== Color ============== */ 70 | .kui-color-purple { 71 | color: #8500dc; 72 | } 73 | 74 | .kui-color-rose { 75 | color: #cd006f; 76 | } 77 | 78 | .kui-color-red { 79 | color: #ff0e0e; 80 | } 81 | 82 | .kui-color-lime { 83 | color: #6b9a23; 84 | } 85 | 86 | .kui-color-cyan { 87 | color: #00b1b4; 88 | } 89 | 90 | .kui-color-blue { 91 | color: #0071dd; 92 | } 93 | 94 | .kui-color-orange { 95 | color: #ff4b00; 96 | } 97 | 98 | .kui-color-dark-gray { 99 | color: #323232; 100 | } 101 | 102 | /* ============== Font ============== */ 103 | .kui-h1 { 104 | font-size: 17px; 105 | font-weight: 400; 106 | } 107 | 108 | .kui-h2 { 109 | font-size: 17px; 110 | font-style: italic; 111 | font-weight: 400; 112 | } 113 | 114 | .kui-h3, 115 | .kui-h4, 116 | .kui-sec { 117 | font-size: 14px; 118 | font-weight: 400; 119 | } 120 | 121 | .kui-h5 { 122 | font-size: 14px; 123 | font-weight: 300; 124 | } 125 | 126 | .kui-pri, 127 | .kui-text, 128 | .kui-btn { 129 | font-size: 17px; 130 | font-weight: 400; 131 | } 132 | 133 | .kui-thi { 134 | font-size: 12px; 135 | font-weight: 400; 136 | } 137 | 138 | .kui-link { 139 | font-size: 17px; 140 | font-weight: 700; 141 | } 142 | 143 | /* ============== Header ============== */ 144 | .kui-header { 145 | background-color: #320374; 146 | color: #fff; 147 | height: 28px; 148 | line-height: 28px; 149 | text-align: center; 150 | } 151 | 152 | /* ============== Separator ============== */ 153 | .kui-separator { 154 | background-color: #e6e6e6; 155 | color: #6a6a6a; 156 | height: 28px; 157 | line-height: 28px; 158 | padding-left: 10px; 159 | } 160 | 161 | /* ============== Software key ============== */ 162 | .kui-software-key { 163 | align-items: center; 164 | background-color: #cccccc; 165 | color: #323232; 166 | display: flex; 167 | height: 30px; 168 | padding: 0 5px; 169 | } 170 | 171 | .kui-software-key h5 { 172 | font-style: italic; 173 | width: 33.3333333333%; 174 | } 175 | 176 | /* ============== Toast ============== */ 177 | .kui-toast { 178 | background-color: #323232; 179 | color: #fff; 180 | height: 42px; 181 | line-height: 42px; 182 | text-align: center; 183 | } 184 | 185 | .kui-toast .kui-pri { 186 | margin: 0; 187 | } 188 | 189 | .kui-toast-shadow { 190 | background-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%); 191 | height: 6px; 192 | } 193 | 194 | /* ============== List ============== */ 195 | .kui-list { 196 | list-style: none; 197 | } 198 | 199 | .kui-list li { 200 | align-items: center; 201 | background-color: #fff; 202 | display: flex; 203 | height: 60px; 204 | padding: 0 10px; 205 | } 206 | 207 | .kui-list li .kui-list-img { 208 | background-color: #2f3235; 209 | border-radius: 10px; 210 | height: 32px; 211 | margin-right: 10px; 212 | width: 32px; 213 | } 214 | 215 | .kui-list-cont p { 216 | margin: 4px 0; 217 | } 218 | 219 | .kui-list-cont .kui-pri { 220 | color: #323232; 221 | } 222 | 223 | .kui-list-cont .kui-sec { 224 | color: #6a6a6a; 225 | } 226 | 227 | .kui-list li:focus { 228 | background-color: #873eff; 229 | outline: 0; 230 | } 231 | 232 | .kui-list li:focus .kui-pri, 233 | .kui-list li:focus .kui-sec { 234 | color: #fff; 235 | } 236 | 237 | /* ============== Options Menu ============== */ 238 | .kui-option-menu { 239 | bottom: 0; 240 | display: none; 241 | overflow: hidden; 242 | position: absolute; 243 | width: 100%; 244 | } 245 | 246 | .kui-option-menu .kui-option-title { 247 | background-color: #d8d8d8; 248 | color: #323232; 249 | height: 28px; 250 | line-height: 28px; 251 | margin: 0; 252 | text-align: center; 253 | } 254 | 255 | .kui-options { 256 | list-style: none; 257 | margin: 0; 258 | overflow: hidden; 259 | padding: 0; 260 | } 261 | 262 | .kui-options li { 263 | background-color: #fff; 264 | height: 50px; 265 | line-height: 50px; 266 | padding-left: 10px; 267 | } 268 | 269 | .kui-options li:focus { 270 | background-color: #873eff; 271 | color: #fff; 272 | outline: 0; 273 | } 274 | 275 | /* ============== Button ============== */ 276 | button.kui-btn { 277 | background: #fff; 278 | border: 0; 279 | border: 2px solid #8c8c8c; 280 | border-radius: 18px; 281 | color: #323232; 282 | display: block; 283 | height: 36px; 284 | margin: auto; 285 | text-align: center; 286 | width: 220px; 287 | } 288 | 289 | button.kui-btn:focus { 290 | background-color: #873eff; 291 | border-color: #873eff; 292 | color: #fff; 293 | outline: 0; 294 | } 295 | 296 | /* ============== Input ============== */ 297 | .kui-input-holder { 298 | background-color: #fff; 299 | -moz-box-sizing: border-box; 300 | box-sizing: border-box; 301 | height: 76px; 302 | padding: 7px 10px; 303 | } 304 | 305 | .kui-input-holder.kui-focus-within { 306 | background-color: #873eff; 307 | outline: 0; 308 | } 309 | 310 | .kui-input-label { 311 | color: #323232; 312 | display: block; 313 | padding-bottom: 8px; 314 | } 315 | 316 | .kui-input-holder.kui-focus-within .kui-input-label { 317 | color: #fff; 318 | } 319 | 320 | .kui-input { 321 | border: 1px solid #aaaaaa; 322 | border-radius: 2px; 323 | -moz-box-sizing: border-box; 324 | box-sizing: border-box; 325 | height: 36px; 326 | padding-left: 10px; 327 | width: 100%; 328 | } 329 | 330 | .kui-input ::-moz-placeholder, 331 | .kui-input :-moz-placeholder { 332 | color: #323232; 333 | } 334 | 335 | .kui-input:focus { 336 | outline: 0; 337 | } 338 | 339 | /* ============== Table ============== */ 340 | .kui-table, 341 | .kui-table th, 342 | .kui-table td { 343 | border: 1px solid #320374; 344 | border-collapse: collapse; 345 | } 346 | 347 | .kui-table { 348 | width: 100%; 349 | } 350 | 351 | .kui-table thead { 352 | background-color: #320374; 353 | color: #fff; 354 | } 355 | 356 | .kui-table tr:focus { 357 | background-color: #873eff; 358 | color: #fff; 359 | outline: 0; 360 | } 361 | 362 | .kui-table td { 363 | padding: 4px 5px; 364 | width: 50%; 365 | } 366 | 367 | .kui-table td:last-child { 368 | text-align: right; 369 | } 370 | 371 | /* ============== Progress ============== */ 372 | .progress { 373 | background: #fff; 374 | box-sizing: border-box; 375 | height: 60px; 376 | padding: 10px 10px; 377 | } 378 | 379 | .progress:focus .progress-label { 380 | color: #fff; 381 | } 382 | 383 | .progress label { 384 | color: #332233; 385 | display: inline-block; 386 | width: 100%; 387 | } 388 | 389 | .progress-label { 390 | float: left; 391 | } 392 | 393 | .progress-value { 394 | float: right; 395 | padding-top: 3px; 396 | } 397 | 398 | .progress input { 399 | border-radius: 3px; 400 | height: 5px; 401 | outline: none; 402 | width: 100%; 403 | } 404 | 405 | .progress input::-moz-range-thumb { 406 | border: 3px solid #fff; 407 | border-radius: 50%; 408 | cursor: pointer; 409 | height: 13px; 410 | width: 13px; 411 | } 412 | 413 | .progress input, 414 | .progress input::-moz-range-thumb, 415 | .progress input::-moz-range-progress, 416 | .progress input::-moz-range-track { 417 | -moz-appearance: none; 418 | appearance: none; 419 | background: #873eff; 420 | } 421 | 422 | /* KaiOS portrait devices (240x320) */ 423 | @media only screen and (orientation : portrait) { 424 | .fullscreen-app .kui-content-area { 425 | height: 262px; 426 | } 427 | 428 | .kui-content-area { 429 | height: 236px; 430 | } 431 | 432 | .kui-option-menu { 433 | height: 178px; 434 | } 435 | 436 | .kui-options { 437 | height: 150px; 438 | } 439 | } 440 | 441 | /* KaiOS landscape devices (320x240) */ 442 | @media screen and (orientation: landscape) { 443 | .fullscreen-app .kui-content-area { 444 | height: 182px; 445 | } 446 | 447 | .kui-content-area { 448 | height: 156px; 449 | } 450 | 451 | .kui-option-menu { 452 | height: 128px; 453 | } 454 | 455 | .kui-options { 456 | height: 100px; 457 | } 458 | } 459 | 460 | /*** The End ******/ 461 | --------------------------------------------------------------------------------