Berdasarkan evaluasi terhadap sistem konsultasi agribisnis cabai yang sudah dikembangkan pada platform web sebelumnya, penelitian ini telah berhasil mengembangkan aplikasi mobile cross-platform untuk budidaya cabai merah (Capsicum annuum L.). Kebutuhan fungsional dan non-fungsional sistem yang ditransfer kedalam aplikasi cross-platform berbasis web juga telah dapat berfungsi dengan baik di setiap platform web browser yang telah ditargetkan (Android, iOS dan Windows phone). Kemampuan menampilkan informasi pada aplikasi terlihat baik pada resolusi desktop, dan cukup baik pada ukuran layar perangkat diatas 5 inchi, tetapi kemampuan menampilkan berkurang pada ukuran-ukuran layar perangkat di bawah 5 inchi (resolusi layar 480 × 854 pixel). Desain web pada aplikasi ini juga belum menampilkan kaidah-kaidah perancangan web interface, seperti ditujukan untuk pengguna, utilitas dan kemudahan dipelajari, sesuai dengan spesifikasi kebutuhan, mengetahui dan mematuhi batasan media website dan internet, website harus mematuhi prinsip GUI, navigasi sebagai sarana untuk mendapatkan informasi, dan tampilan yang baik. Aplikasi mobile cross-platform yang telah dibangun juga mampu beradaptasi dengan baik pada ukuran layar browser yang berbeda-beda (cross-platform), sehingga aplikasi ini menjadi suatu integrasi platform dari sistem yang telah dikembangkan sebelumnya (berbasis Android dan web).
Saran
Penelitian yang telah dilakukan difokuskan kepada pengembangan cross-platform browser-centric dengan teknik dasar desain web responsif, dengan teknik yang sama aplikasi ini dapat dikembangkan menjadi aplikasi hybrid atau disebut cross-platform native centric dengan menggunakan framework tambahan agar aplikasi menjadi sebuah aplikasi native yang dapat mengakses fitur asli dari ponsel. Sistem yang dibangun belum mengakomodasi pengetahuan-pengetahuan budidaya cabai secara keseluruhan, oleh karena itu perlu melengkapi pengetahuan budidaya cabai sesuai dengan perkembangan iptek pada budidaya cabai. Desain web aplikasi ini dapat dikembangkan lagi untuk mengikuti kaidah perancangan website interface, seperti dengan menambahkan fitur help, mendesain ulang website template agar tema lebih mencerminkan kesan yang ingin disampaikan, seperti pemilihan warna yang sesuai dengan representasi dari tanaman cabai.
29
DAFTAR PUSTAKA
Darmawan E. 2011. Sistem konsultasi online agribisnis cabai (Capsicum annuum L.) berbasis mobile [tesis]. Bogor (ID): Institut Pertanian Bogor.
Direktorat Jenderal Perbenihan Hortikultura Kementerian Pertanian Republik Indonesia. 2014. Deskripsi Kultivar Varietas Cabai [Internet]. [diunduh 2014 Sept 18]. Tersedia pada: http://ditbenih.hortikultura.deptan.go.id.
Direktorat Jenderal Pengolahan dan Pemasaran Hasil Pertanian Kementerian Pertanian Republik Indonesia. 2015. Informasi Harga dan Statistik Komoditi [Internet]. [diunduh 2015 Jan 18]. Tersedia pada: http://pip.kementan.org. Gardner BS. 2011. Inside The Digital Ecosystem. Miller GH, editor.Virginia
(US): Noblis.
Gebauer J, Shaw MJ. 2004. Success factors and impacts of mobile business applications: result from a mobile e-procurement study. International Journal of Electronic Commerce. 8(3):19-41.
Maulana A. 2014. Pengembangan pengetahuan sistem manajemen pemupukan organic pada cabai merah (Capsicum annuum L.) berbasis android [skripsi]. Bogor (ID): Institut Pertanian Bogor.
Mikkonen T, Taivalsaari A, Terho M. 2009. Creating a mobile web application platform: The lively kernel experiences. Association for Computing Machinery. 3(1):177-184.doi:10.1145/1529282.1329321.
Nah F, Siau K, and Sheng H. 2005. The value of mobile applications: A utility company study. Association for Computing Machinery. 48(2):85-90.
Pastore S. 2013. Mobile platform and applications cross-platforms development tools. J Engineer Res App. 3(6):521-531.
Putra BC. 2013. Implementasi framework multi-platform pada game edukasi [skripsi]. Yogyakarta (ID): Sekolah Tinggi Manajemen Informatika dan Komputer Yogyakarta.
Safaruddin HAI. 2012. Pengembangan sistem pakar agribisnis cabai (Capsicum Annuum L.) berbasis android [tesis]. Bogor (ID): Institut Pertanian Bogor. Smutny P. 2012. Mobile development tools and cross-platform solutions. Di
dalam: Petras I, Nemcovej B, editor. 2012 13th International carpathian control conference (ICCC); 2012 May 28-31; High Tatras, Slovakia. Ostrava (CZ): IEEE. hlm 653-656.
Supriyanto. 2011. Konsultasi online agribisnis cabai (Capsicum annuum L.) [tesis]. Bogor (ID): Institut Pertanian Bogor.
Wolf F, Huffstadt K. 2013. Mobile enterprise application development – a cross-platform framework. FHWS Science Journal. 1(1):33-40.
Yan B, Chen G. 2011. Appjoy: Personalized mobile application discovery. Di dalam: Ashok Agrawala, editor. Proceedings of The 9th International Conference on Mobile Systems, Applications, and Services; 2011 Jun 28-Jul 01; Bathesda, United States America. New York (USA) : MobySis’11. hlm 113-126.
Redda YA. 2012. Cross-platform mobile applications development [tesis]. Trondheim (NOR): Norwegian University of Science and Technology.
30
Lampiran 1 Contoh sintaksis kontrol flexibel media <!-- header -->
<div data-role="header" data-theme="c" style="margin-bottom:0px"> <center>
<img src="images/mumu.jpg" style="width:100%;height:auto;"> </center>
</div>
<div class="shadowbox"><img src="images/shadow.png" class="shadow" alt="shadow"></div>
<!--/header -->
Lampiran 2 Media queries pada aplikasi
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-resolution: 240dpi) { @media only screen and (max-width: 1024px) { /* Desktop, Tablet & Mobile. */
}
@media only screen and (min-width: 768px) and (max-width: 1024px) { /* Desktop & Tablet */
}
@media only screen and (max-width: 767px) { /* Tablet (Portrait) */
}
@media only screen and (min-wdth: 480px) and (max-width: 767px) { /* Tablet (Portrait) & Mobile (Landscape) */
}
@media only screen and (max-width: 479px) { /* Mobile */
}
Lampiran 3 Sintaksis CSS yang digunakan pada aplikasi cross-platform /*
* jQuery Mobile Framework 1.1.1
1981b3f5ec22675ae47df8f0bdf9622e7780e90e * http://jquerymobile.com
*
* Copyright 2012 jQuery Foundation and other contributors * Dual licensed under the MIT or GPL Version 2 licenses. * http://jquery.org/license
31 */ /* Swatches */ /* ========================================================== =================== Call to Action ========================================================== ================ */ .calltoaction { text-align:center; } /* ========================================================== =================== Social Icon ========================================================== ================ */ .social { border-top:1px dotted #999; border-bottom:1px dotted #999; text-align:center; font-weight:bold; padding:10px 0; margin:25px 0 15px 0; color:#111; font-size:12px } /* ========================================================== =================== Shadow ========================================================== ================ */ .shadow { width:100%; position:relative; top:-1px; z-index:5 } .shadowBox { margin-bottom:1px !important } /* ========================================================== =================== Footer
32 ========================================================== ================ */ .address { text-align:center; font-size:12px; padding-left:2px; padding-right: 2px } .copyright { text-align:center; font-size:12px; padding-left:2px; padding-right: 2px } /* C ---*/ .ui-bar-c {
border: 1px solid #2ba6e8 /*{c-bar-border}*/; background: #2ba6e8 /*{c-bar-background-color}*/; color: #ffffff /*{c-bar-color}*/;
font-weight: bold;
text-shadow: 0 bar-shadow-x}*/ 1px bar-shadow-y}*/ 1px /*{c-bar-shadow-radius}*/ #444444 /*{c-bar-shadow-color}*/;
background-image: -webkit-gradient(linear, left top, left bottom, from( #2fb6FF start}*/), to( #2695d0 /*{c-bar-background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient( #2fb6FF /*{c-bar-background-start}*/, #2695d0 /*{c-bar-background-end}*/); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient( #2fb6FF /*{c-bar-background-start}*/, #2695d0 /*{c-bar-background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient( #2fb6FF /*{c-bar-background-start}*/, #2695d0 /*{c-bar-background-end}*/); /* IE10 */
background-image: -o-linear-gradient( #2fb6FF /*{c-bar-background-start}*/, #2695d0 /*{c-bar-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #2fb6FF /*{c-bar-background-start}*/, #2695d0 /*{c-bar-background-end}*/); } .ui-bar-c .ui-link-inherit { color: #ffffff /*{c-bar-color}*/; } .ui-bar-c a.ui-link {
color: #7cc4e7 /*{c-bar-link-color}*/; font-weight: bold;
}
33 color: #2489CE /*{c-bar-link-visited}*/;
}
.ui-bar-c a.ui-link:hover {
color: #2489CE /*{c-bar-link-hover}*/; }
.ui-bar-c a.ui-link:active {
color: #2489CE /*{c-bar-link-active}*/; } .ui-bar-c, .ui-bar-c input, .ui-bar-c select, .ui-bar-c textarea, .ui-bar-c button {
font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/; }
.ui-body-c, .ui-overlay-c {
border: 1px solid #aaaaaa /*{c-body-border}*/; color: #333333 /*{c-body-color}*/;
text-shadow: 0 /*{c-body-shadow-x}*/ 1px /*{c-body-shadow-y}*/ 0 /*{c-body-shadow-radius}*/ #ffffff /*{c-body-shadow-color}*/;
background: #f9f9f9 /*{c-body-background-color}*/;
background-image: -webkit-gradient(linear, left top, left bottom, from( #f9f9f9 /*{c-body-background-start}*/), to( #eeeeee /*{c-body-background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient( #f9f9f9 /*{c-body-background-start}*/, #eeeeee /*{c-body-background-end}*/); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient( #f9f9f9 /*{c-body-background-start}*/, #eeeeee /*{c-body-background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient( #f9f9f9 /*{c-body-background-start}*/, #eeeeee /*{c-body-background-end}*/); /* IE10 */
background-image: -o-linear-gradient( #f9f9f9 /*{c-body-background-start}*/, #eeeeee /*{c-body-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #f9f9f9 /*{c-body-background-start}*/, #eeeeee /*{c-body-background-end}*/);
} .ui-overlay-c { background-image: none; border-width: 0; } .ui-body-c, .ui-body-c input, .ui-body-c select, .ui-body-c textarea, .ui-body-c button {
font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/; }
34
.ui-body-c .ui-link-inherit {
color: #333333 /*{c-body-color}*/; }
.ui-body-c .ui-link {
color: #2489CE /*{c-body-link-color}*/; font-weight: bold;
}
.ui-body-c .ui-link:visited {
color: #2489CE /*{c-body-link-visited}*/; }
.ui-body-c .ui-link:hover {
color: #2489CE /*{c-body-link-hover}*/; }
.ui-body-c .ui-link:active {
color: #2489CE /*{c-body-link-active}*/; }
.ui-btn-up-c {
border: 1px solid #2ba6e8 /*{c-bup-border}*/; background: #2ba6e8 /*{c-bup-background-color}*/; font-weight: bold;
color: #ffffff /*{c-bup-color}*/;
text-shadow: 0 bup-shadow-x}*/ 1px bup-shadow-y}*/ 0 /*{c-bup-shadow-radius}*/ #444444 /*{c-bup-shadow-color}*/;
background-image: -webkit-gradient(linear, left top, left bottom, from( #2fb6FF start}*/), to( #2695d0 /*{c-bup-background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient( #2fb6FF /*{c-bup-background-start}*/, #2695d0 /*{c-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient( #2fb6FF /*{c-bup-background-start}*/, #2695d0 /*{c-bup-background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient( #2fb6FF /*{c-bup-background-start}*/, #2695d0 /*{c-bup-background-end}*/); /* IE10 */
background-image: -o-linear-gradient( #2fb6FF /*{c-bup-background-start}*/, #2695d0 /*{c-bup-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #2fb6FF /*{c-bup-background-start}*/, #2695d0 /*{c-bup-background-end}*/); } .ui-btn-up-c:visited, .ui-btn-up-c a.ui-link-inherit { color: #ffffff /*{c-bup-color}*/; } .ui-btn-hover-c {
border: 1px solid #31beFF /*{c-bhover-border}*/; background: #31beFF /*{c-bhover-background-color}*/; font-weight: bold;
35 text-shadow: 0 /*{c-bhover-shadow-x}*/ 1px /*{c-bhover-shadow-y}*/ 0 /*{c-bhover-shadow-radius}*/ #444444 /*{c-bhover-shadow-color}*/;
background-image: -webkit-gradient(linear, left top, left bottom, from( #35d1FF background-start}*/), to( #2cabe5 /*{c-bhover-background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient( #35d1FF /*{c-bhover-background-start}*/, #2cabe5 /*{c-bhover-background-end}*/); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient( #35d1FF /*{c-bhover-background-start}*/, #2cabe5 /*{c-bhover-background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient( #35d1FF /*{c-bhover-background-start}*/, #2cabe5 /*{c-bhover-background-end}*/); /* IE10 */
background-image: -o-linear-gradient( #35d1FF /*{c-bhover-background-start}*/, #2cabe5 /*{c-bhover-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #35d1FF /*{c-bhover-background-start}*/, #2cabe5 /*{c-bhover-background-end}*/);
} .ui-btn-hover-c:visited, .ui-btn-hover-c:hover, .ui-btn-hover-c a.ui-link-inherit { color: #ffffff /*{c-bhover-color}*/; } .ui-btn-down-c {
border: 1px solid #31beFF /*{c-bdown-border}*/; background: #31beFF /*{c-bdown-background-color}*/; font-weight: bold;
color: #000000 /*{c-bdown-color}*/;
text-shadow: 0 /*{c-bdown-shadow-x}*/ 1px /*{c-bdown-shadow-y}*/ 0 /*{c-bdown-shadow-radius}*/ #eeeeee /*{c-bdown-shadow-color}*/;
background-image: -webkit-gradient(linear, left top, left bottom, from( #2cabe5 background-start}*/), to( #35d1FF /*{c-bdown-background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient( #2cabe5 /*{c-bdown-background-start}*/, #35d1FF /*{c-bdown-background-end}*/); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient( #2cabe5 /*{c-bdown-background-start}*/, #35d1FF /*{c-bdown-background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient( #2cabe5 /*{c-bdown-background-start}*/, #35d1FF /*{c-bdown-background-end}*/); /* IE10 */
background-image: -o-linear-gradient( #2cabe5 /*{c-bdown-background-start}*/, #35d1FF /*{c-bdown-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #2cabe5 /*{c-bdown-background-start}*/, #35d1FF /*{c-bdown-background-end}*/);
}
.ui-btn-down-c:visited, .ui-btn-down-c:hover,
36 .ui-btn-down-c a.ui-link-inherit { color: #000000 /*{c-bdown-color}*/; } .ui-btn-up-c, .ui-btn-hover-c, .ui-btn-down-c {
font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/; text-decoration: none;
}
/* Structure */
/* links within "buttons"
---*/
a.ui-link-inherit {
text-decoration: none !important; }
/* Active class used as the "on" state across all themes
---*/
.ui-btn-active {
border: 1px solid #20272a /*{global-active-border}*/; background: #20272a /*{global-active-background-color}*/; font-weight: bold;
color: #ffffff /*{global-active-color}*/; cursor: pointer;
text-shadow: 0 shadow-x}*/ 1px shadow-y}*/ 1px shadow-radius}*/ #444444 /*{global-active-shadow-color}*/;
text-decoration: none;
background-image: -webkit-gradient(linear, left top, left bottom, from( #232a2e active-background-start}*/), to( #1c2325 /*{global-active-background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient( #232a2e /*{global-active-background-start}*/, #1c2325 /*{global-active-background-end}*/); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient( #232a2e /*{global-active-background-start}*/, #1c2325 /*{global-active-background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient( #232a2e /*{global-active-background-start}*/, #1c2325 /*{global-active-background-end}*/); /* IE10 */
background-image: -o-linear-gradient( #232a2e /*{global-active-background-start}*/, #1c2325 /*{global-active-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #232a2e /*{global-active-background-start}*/, #1c2325 /*{global-active-background-end}*/);
37 font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
} .ui-btn-active:visited, .ui-btn-active:hover, .ui-btn-active a.ui-link-inherit { color: #ffffff /*{global-active-color}*/; }
/* button inner top highlight
---*/ .ui-btn-inner { border-top: 1px solid #fff; border-color: rgba(255,255,255,.3); }
/* corner rounding classes
---*/
.ui-corner-tl {
-moz-border-radius-topleft: .6em /*{global-radii-blocks}*/; -webkit-border-top-left-radius: .6em /*{global-radii-blocks}*/; border-top-left-radius: .6em /*{global-radii-blocks}*/;
}
.ui-corner-tr {
-moz-border-radius-topright: .6em /*{global-radii-blocks}*/; -webkit-border-top-right-radius: .6em /*{global-radii-blocks}*/; border-top-right-radius: .6em /*{global-radii-blocks}*/;
}
.ui-corner-bl {
-moz-border-radius-bottomleft: .6em /*{global-radii-blocks}*/; -webkit-border-bottom-left-radius: .6em /*{global-radii-blocks}*/; border-bottom-left-radius: .6em /*{global-radii-blocks}*/;
}
.ui-corner-br {
-moz-border-radius-bottomright: .6em /*{global-radii-blocks}*/; -webkit-border-bottom-right-radius: .6em /*{global-radii-blocks}*/; border-bottom-right-radius: .6em /*{global-radii-blocks}*/;
}
.ui-corner-top {
-moz-border-radius-topleft: .6em /*{global-radii-blocks}*/; -webkit-border-top-left-radius: .6em /*{global-radii-blocks}*/; border-top-left-radius: .6em /*{global-radii-blocks}*/;
-moz-border-radius-topright: .6em /*{global-radii-blocks}*/; -webkit-border-top-right-radius: .6em /*{global-radii-blocks}*/;
38
border-top-right-radius: .6em /*{global-radii-blocks}*/; }
.ui-corner-bottom {
-moz-border-radius-bottomleft: .6em /*{global-radii-blocks}*/; -webkit-border-bottom-left-radius: .6em /*{global-radii-blocks}*/; border-bottom-left-radius: .6em /*{global-radii-blocks}*/;
-moz-border-radius-bottomright: .6em /*{global-radii-blocks}*/; -webkit-border-bottom-right-radius: .6em /*{global-radii-blocks}*/; border-bottom-right-radius: .6em /*{global-radii-blocks}*/;
}
.ui-corner-right {
-moz-border-radius-topright: .6em /*{global-radii-blocks}*/; -webkit-border-top-right-radius: .6em /*{global-radii-blocks}*/; border-top-right-radius: .6em /*{global-radii-blocks}*/;
-moz-border-radius-bottomright: .6em /*{global-radii-blocks}*/; -webkit-border-bottom-right-radius: .6em /*{global-radii-blocks}*/; border-bottom-right-radius: .6em /*{global-radii-blocks}*/;
}
.ui-corner-left {
-moz-border-radius-topleft: .6em /*{global-radii-blocks}*/; -webkit-border-top-left-radius: .6em /*{global-radii-blocks}*/; border-top-left-radius: .6em /*{global-radii-blocks}*/;
-moz-border-radius-bottomleft: .6em /*{global-radii-blocks}*/; -webkit-border-bottom-left-radius: .6em /*{global-radii-blocks}*/; border-bottom-left-radius: .6em /*{global-radii-blocks}*/;
}
.ui-corner-all {
-moz-border-radius: .6em /*{global-radii-blocks}*/; -webkit-border-radius: .6em /*{global-radii-blocks}*/; border-radius: .6em /*{global-radii-blocks}*/;
} .ui-corner-none { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; }
/* Form field separator
---*/ .ui-br { border-bottom: rgb(130,130,130); border-bottom: rgba(130,130,130,.3); border-bottom-width: 1px; border-bottom-style: solid; } /* Interaction cues
39 ---*/ .ui-disabled { opacity: .3; } .ui-disabled, .ui-disabled a {
cursor: default !important; pointer-events: none; } .ui-disabled .ui-btn-text { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=30)"; filter: alpha(opacity=30); zoom: 1; } /* Icons ---*/ .ui-icon, .ui-icon-searchfield:after { background: #666666 /*{global-icon-color}*/; background: rgba(0,0,0,.4) /*{global-icon-disc}*/;
background-image: url(images/icons-18-white.png) /*{global-icon-set}*/; background-repeat: no-repeat;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
}
/* Alt icon color
---*/ .ui-icon-alt { background: #fff; background: rgba(255,255,255,.3); background-image: url(images/icons-18-black.png); background-repeat: no-repeat; } /* HD/"retina" sprite ---*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-resolution: 240dpi) {
40
.ui-icon-plus, .ui-icon-minus, .ui-icon-delete, .ui-icon-arrow-r, .ui-icon-arrow-l, .ui-icon-arrow-u, .ui-icon-arrow-d, .ui-icon-check, .ui-icon-gear, .ui-icon-refresh, .ui-icon-forward, .ui-icon-back,
icon-grid, icon-star, icon-alert, icon-info, icon-home, .ui-icon-search, .ui-icon-searchfield:after,
checkbox-off, checkbox-on, radio-off, .ui-icon-radio-on { background-image: url(images/icons-36-white.png); -moz-background-size: 776px 18px; -o-background-size: 776px 18px; -webkit-background-size: 776px 18px; background-size: 776px 18px; } .ui-icon-alt { background-image: url(images/icons-36-black.png); } } /* plus minus */ .ui-icon-plus { background-position: -0 50%; } .ui-icon-minus { background-position: -36px 50%; } /* delete/close */ .ui-icon-delete { background-position: -72px 50%; } /* arrows */ .ui-icon-arrow-r { background-position: -108px 50%; } .ui-icon-arrow-l { background-position: -144px 50%; } .ui-icon-arrow-u { background-position: -180px 50%; } .ui-icon-arrow-d { background-position: -216px 50%; } /* misc */ .ui-icon-check { background-position: -252px 50%;
41 } .ui-icon-gear { background-position: -288px 50%; } .ui-icon-refresh { background-position: -324px 50%; } .ui-icon-forward { background-position: -360px 50%; } .ui-icon-back { background-position: -396px 50%; } .ui-icon-grid { background-position: -432px 50%; } .ui-icon-star { background-position: -468px 50%; } .ui-icon-alert { background-position: -504px 50%; } .ui-icon-info { background-position: -540px 50%; } .ui-icon-home { background-position: -576px 50%; } .ui-icon-search, .ui-icon-searchfield:after { background-position: -612px 50%; } .ui-icon-checkbox-off { background-position: -684px 50%; } .ui-icon-checkbox-on { background-position: -648px 50%; } .ui-icon-radio-off { background-position: -756px 50%; } .ui-icon-radio-on { background-position: -720px 50%; } /* checks,radios */ .ui-checkbox .ui-icon { -moz-border-radius: 3px; -webkit-border-radius: 3px;
42 border-radius: 3px; } .ui-icon-checkbox-off, .ui-icon-radio-off { background-color: transparent; } .ui-checkbox-on .ui-icon, .ui-radio-on .ui-icon {
background-color: #20272a /*{global-active-background-color}*/; /* NOTE: this hex should match the active state color. It's repeated here for cascade */ } /* loading icon */ .ui-icon-loading { background: url(images/ajax-loader.gif); background-size: 46px 46px; }
/* Button corner classes
---*/
.ui-btn-corner-tl {
-moz-border-radius-topleft: 1em /*{global-radii-buttons}*/; -webkit-border-top-left-radius: 1em /*{global-radii-buttons}*/; border-top-left-radius: 1em /*{global-radii-buttons}*/;
}
.ui-btn-corner-tr {
-moz-border-radius-topright: 1em /*{global-radii-buttons}*/; -webkit-border-top-right-radius: 1em /*{global-radii-buttons}*/; border-top-right-radius: 1em /*{global-radii-buttons}*/;
}
.ui-btn-corner-bl {
-moz-border-radius-bottomleft: 1em /*{global-radii-buttons}*/; -webkit-border-bottom-left-radius: 1em /*{global-radii-buttons}*/; border-bottom-left-radius: 1em /*{global-radii-buttons}*/;
}
.ui-btn-corner-br {
-moz-border-radius-bottomright: 1em /*{global-radii-buttons}*/; -webkit-border-bottom-right-radius: 1em /*{global-radii-buttons}*/; border-bottom-right-radius: 1em /*{global-radii-buttons}*/;
}
.ui-btn-corner-top {
-moz-border-radius-topleft: 1em /*{global-radii-buttons}*/; -webkit-border-top-left-radius: 1em /*{global-radii-buttons}*/; border-top-left-radius: 1em /*{global-radii-buttons}*/;
-moz-border-radius-topright: 1em /*{global-radii-buttons}*/; -webkit-border-top-right-radius: 1em /*{global-radii-buttons}*/; border-top-right-radius: 1em /*{global-radii-buttons}*/;
43 .ui-btn-corner-bottom {
-moz-border-radius-bottomleft: 1em /*{global-radii-buttons}*/; -webkit-border-bottom-left-radius: 1em /*{global-radii-buttons}*/; border-bottom-left-radius: 1em /*{global-radii-buttons}*/;
-moz-border-radius-bottomright: 1em /*{global-radii-buttons}*/; -webkit-border-bottom-right-radius: 1em /*{global-radii-buttons}*/; border-bottom-right-radius: 1em /*{global-radii-buttons}*/;
}
.ui-btn-corner-right {
-moz-border-radius-topright: 1em /*{global-radii-buttons}*/; -webkit-border-top-right-radius: 1em /*{global-radii-buttons}*/; border-top-right-radius: 1em /*{global-radii-buttons}*/;
-moz-border-radius-bottomright: 1em /*{global-radii-buttons}*/; -webkit-border-bottom-right-radius: 1em /*{global-radii-buttons}*/; border-bottom-right-radius: 1em /*{global-radii-buttons}*/;
}
.ui-btn-corner-left {
-moz-border-radius-topleft: 1em /*{global-radii-buttons}*/; -webkit-border-top-left-radius: 1em /*{global-radii-buttons}*/; border-top-left-radius: 1em /*{global-radii-buttons}*/;
-moz-border-radius-bottomleft: 1em /*{global-radii-buttons}*/; -webkit-border-bottom-left-radius: 1em /*{global-radii-buttons}*/; border-bottom-left-radius: 1em /*{global-radii-buttons}*/;
}
.ui-btn-corner-all {
-moz-border-radius: 1em /*{global-radii-buttons}*/; -webkit-border-radius: 1em /*{global-radii-buttons}*/; border-radius: 1em /*{global-radii-buttons}*/;
}
/* radius clip workaround for cleaning up corner trapping */ .ui-corner-tl, .ui-corner-tr, .ui-corner-bl, .ui-corner-br, .ui-corner-top, .ui-corner-bottom, .ui-corner-right, .ui-corner-left, .ui-corner-all, .ui-btn-corner-tl, .ui-btn-corner-tr, .ui-btn-corner-bl, .ui-btn-corner-br, .ui-btn-corner-top, .ui-btn-corner-bottom, .ui-btn-corner-right,