Skip to content
This repository
Browse code

[feature] stdlib/bootstrap: more compatibility with various versions

  • Loading branch information...
commit ee9289166e6900cd9f36ae2fec36776e1baf47d3 1 parent 5630897
François-Régis Sinot authored
557 stdlib/themes/bootstrap/core/core.opa
... ... @@ -0,0 +1,557 @@
  1 +/*
  2 + Copyright © 2011 MLstate
  3 +
  4 + This file is part of OPA.
  5 +
  6 + OPA is free software: you can redistribute it and/or modify it under the
  7 + terms of the GNU Affero General Public License, version 3, as published by
  8 + the Free Software Foundation.
  9 +
  10 + OPA is distributed in the hope that it will be useful, but WITHOUT ANY
  11 + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
  12 + FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for
  13 + more details.
  14 +
  15 + You should have received a copy of the GNU Affero General Public License
  16 + along with OPA. If not, see <http://www.gnu.org/licenses/>.
  17 +*/
  18 +
  19 +/*Author: Ida Swarczewskaja, MLstate */
  20 +
  21 +/**
  22 + * {1 About this module}
  23 + * This module allows you to use Twitter's bootstrap style (http://twitter.github.com/bootstrap/) directly in your application.
  24 + * It also includes several sets of icons.
  25 + *
  26 + * {2 Where should I start}
  27 + * If you want to use the legacy version (1.1.1), just import this package.
  28 + * Otherwise, call : Bootstrap.import(A_CERTAIN_VERSION) before launching your server.
  29 + * /!\ We do not check if the version you gave is correct or not /!\
  30 + *
  31 + * {3 How to use icons}
  32 + * There are different sizes:
  33 + * - to use 16x16 pixels icon, set class "icon"
  34 + * - to use 32x32 pixels icon, set class "icon32"
  35 + * There are different colors:
  36 + * - gray is the default
  37 + * - to use black color, set class "icon-white"
  38 + * - to use white color, set class "icon-black"
  39 + * There are different icons:
  40 + * - triangle (icon-triangle-n,icon-triangle-e, ...)
  41 + * - arrow (icon-arrow-n, icon-arrowthick-n, icon-arrowreturn-se, ...)
  42 + * - icon-plus, icon-minus, icon-close, icon-check, icon-help, icon-notice ...
  43 + */
  44 +
  45 +/* Publish resources */
  46 +
  47 +@private
  48 +option : DynamicResource.config = {
  49 +sufix=some("icon.png")
  50 +prefix=none
  51 +onaccess=none
  52 +}
  53 +
  54 +@private
  55 +param = {
  56 + expiration={none}
  57 + consumption={unlimited}
  58 + visibility={shared}
  59 +}
  60 +
  61 +@private
  62 +publish_img(name) = DynamicResource.publish_extend(name,param,option)
  63 +
  64 +
  65 +/* resources */
  66 +@private
  67 +files_img = @static_include_directory("stdlib/themes/bootstrap/images")
  68 +
  69 +@private
  70 +uri_img = Map.map(publish_img,files_img)
  71 +
  72 +@private
  73 +get_img(name) =
  74 + x = Map.get("stdlib/themes/bootstrap/images/{name}",uri_img) ? ""
  75 + {url=Url.make(x)}
  76 +
  77 +
  78 +/* css */
  79 +
  80 +@private
  81 +icon16 = css
  82 +/* Icons 16px */
  83 +/*Default 16px gray icon for light backgrounds*/
  84 +.icon {
  85 + width: 16px;
  86 + height: 16px;
  87 + background: {get_img("icons16-gray.png")} no-repeat;
  88 + display: inline-block;
  89 + vertical-align: top;
  90 +}
  91 +.icon:hover {background: {get_img("icons16-darkGray.png")} no-repeat;}
  92 +
  93 +/*Color icon for active, selected for light backgrounds*/
  94 +.selected .icon {background: {get_img("icons16-color.png")} no-repeat;}
  95 +
  96 +/*White icons for vivid and dark backgrounds*/
  97 +.icon.icon-white {background: {get_img("icons16-white.png")} no-repeat;}
  98 +
  99 +/*Black icons for gray backgrounds*/
  100 +.icon.icon-black {background: {get_img("icons16-black.png")} no-repeat;}
  101 +
  102 +/* positioning */
  103 +/* triangle */
  104 +.selected .icon.icon-triangle-n, .icon.icon-triangle-n, .icon.icon-triangle-n:hover { background-position: 0 0; }
  105 +.selected .icon.icon-triangle-ne, .icon.icon-triangle-ne, .icon.icon-triangle-ne:hover { background-position: -16px 0; }
  106 +.selected .icon.icon-triangle-e, .icon.icon-triangle-e, .icon.icon-triangle-e:hover { background-position: -32px 0; }
  107 +.selected .icon.icon-triangle-se, .icon.icon-triangle-se, .icon.icon-triangle-se:hover { background-position: -48px 0; }
  108 +.selected .icon.icon-triangle-s, .icon.icon-triangle-s, .icon.icon-triangle-s:hover { background-position: -64px 0; }
  109 +.selected .icon.icon-triangle-sw, .icon.icon-triangle-sw, .icon.icon-triangle-sw:hover { background-position: -80px 0; }
  110 +.selected .icon.icon-triangle-w, .icon.icon-triangle-w, .icon.icon-triangle-w:hover { background-position: -96px 0; }
  111 +.selected .icon.icon-triangle-nw, .icon.icon-triangle-nw, .icon.icon-triangle-nw:hover { background-position: -112px 0; }
  112 +.selected .icon.icon-triangle-ns, .icon.icon-triangle-ns, .icon.icon-triangle-ns:hover { background-position: -128px 0; }
  113 +.selected .icon.icon-triangle-ew, .icon.icon-triangle-ew, .icon.icon-triangle-ew:hover { background-position: -144px 0; }
  114 +
  115 +/* arrow stop */
  116 +.selected .icon.icon-arrowstop-n, .icon.icon-arrowstop-n, .icon.icon-arrowstop-n:hover { background-position: -160px 0; }
  117 +.selected .icon.icon-arrowstop-e, .icon.icon-arrowstop-e, .icon.icon-arrowstop-e:hover { background-position: -176px 0; }
  118 +.selected .icon.icon-arrowstop-s, .icon.icon-arrowstop-s, .icon.icon-arrowstop-s:hover { background-position: -192px 0; }
  119 +.selected .icon.icon-arrowstop-w, .icon.icon-arrowstop-w, .icon.icon-arrowstop-w:hover { background-position: -208px 0; }
  120 +
  121 +/* arrow transfert, shuffle */
  122 +.selected .icon.icon-transefr-ew, .icon.icon-transefr-ew, .icon.icon-transefr-ew:hover { background-position: -224px 0; }
  123 +.selected .icon.icon-shuffle, .icon.icon-shuffle, .icon.icon-shuffle:hover { background-position: -240px 0; }
  124 +
  125 +/* carat */
  126 +.selected .icon.icon-carat-1-n, .icon.icon-carat-1-n, .icon.icon-carat-1-n:hover { background-position: 0 -16px; }
  127 +.selected .icon.icon-carat-1-ne, .icon.icon-carat-1-ne, .icon.icon-carat-1-ne:hover { background-position: -16px -16px; }
  128 +.selected .icon.icon-carat-1-e, .icon.icon-carat-1-e, .icon.icon-carat-1-e:hover { background-position: -32px -16px; }
  129 +.selected .icon.icon-carat-1-se, .icon.icon-carat-1-se, .icon.icon-carat-1-se:hover { background-position: -48px -16px; }
  130 +.selected .icon.icon-carat-1-s, .icon.icon-carat-1-s, .icon.icon-carat-1-s:hover { background-position: -64px -16px; }
  131 +.selected .icon.icon-carat-1-sw, .icon.icon-carat-1-sw, .icon.icon-carat-1-sw:hover { background-position: -80px -16px; }
  132 +.selected .icon.icon-carat-1-w, .icon.icon-carat-1-w, .icon.icon-carat-1-w:hover { background-position: -96px -16px; }
  133 +.selected .icon.icon-carat-1-nw, .icon.icon-carat-1-nw, .icon.icon-carat-1-nw:hover { background-position: -112px -16px; }
  134 +.selected .icon.icon-carat-2-ns, .icon.icon-carat-2-ns, .icon.icon-carat-2-ns:hover { background-position: -128px -16px; }
  135 +.selected .icon.icon-carat-2-ew , .icon.icon-carat-2-ew , .icon.icon-carat-2-ew :hover { background-position: -144px -16px; }
  136 +
  137 +/* symbols */
  138 +.selected .icon.icon-plus, .icon.icon-plus, .icon.icon-plus:hover { background-position: -160px -16px; }
  139 +.selected .icon.icon-minus, .icon.icon-minus, .icon.icon-minus:hover { background-position: -176px -16px; }
  140 +.selected .icon.icon-close, .icon.icon-close, .icon.icon-close:hover { background-position: -192px -16px; }
  141 +.selected .icon.icon-check, .icon.icon-check, .icon.icon-check:hover { background-position: -208px -16px; }
  142 +.selected .icon.icon-help, .icon.icon-help, .icon.icon-help:hover { background-position: -224px -16px; }
  143 +.selected .icon.icon-notice, .icon.icon-notice, .icon.icon-notice:hover { background-position: -240px -16px; }
  144 +
  145 +/* arrow */
  146 +.selected .icon.icon-arrow-n, .icon.icon-arrow-n, .icon.icon-arrow-n:hover { background-position: 0 -32px; }
  147 +.selected .icon.icon-arrow-ne, .icon.icon-arrow-ne, .icon.icon-arrow-ne:hover { background-position: 16px -32px; }
  148 +.selected .icon.icon-arrow-e, .icon.icon-arrow-e, .icon.icon-arrow-e:hover { background-position: -32px -32px; }
  149 +.selected .icon.icon-arrow-se, .icon.icon-arrow-se, .icon.icon-arrow-se:hover { background-position: -48px -32px; }
  150 +.selected .icon.icon-arrow-s, .icon.icon-arrow-s, .icon.icon-arrow-s:hover { background-position: -64px -32px; }
  151 +.selected .icon.icon-arrow-sw, .icon.icon-arrow-sw, .icon.icon-arrow-sw:hover { background-position: -80px -32px; }
  152 +.selected .icon.icon-arrow-w, .icon.icon-arrow-w, .icon.icon-arrow-w:hover { background-position: -96px -32px; }
  153 +.selected .icon.icon-arrow-nw, .icon.icon-arrow-nw, .icon.icon-arrow-nw:hover { background-position: -112px -32px; }
  154 +.selected .icon.icon-arrow-n-s, .icon.icon-arrow-n-s, .icon.icon-arrow-n-s:hover { background-position: -128px -32px; }
  155 +.selected .icon.icon-arrow-ne-sw, .icon.icon-arrow-ne-sw, .icon.icon-arrow-ne-sw:hover { background-position: -144px -32px; }
  156 +.selected .icon.icon-arrow-e-w, .icon.icon-arrow-e-w, .icon.icon-arrow-e-w:hover { background-position: -160px -32px; }
  157 +.selected .icon.icon-arrow-se-nw, .icon.icon-arrow-se-nw, .icon.icon-arrow-se-nw:hover { background-position: -176px -32px; }
  158 +
  159 +/* arrow dialog */
  160 +.selected .icon.icon-arrow-nesw, .icon.icon-arrow-nesw, .icon.icon-arrow-nesw:hover { background-position: -192px -32px; }
  161 +.selected .icon.icon-arrow-4diag, .icon.icon-arrow-4diag, .icon.icon-arrow-4diag:hover { background-position: -208px -32px; }
  162 +.selected .icon.icon-newwin, .icon.icon-newwin, .icon.icon-newwin:hover { background-position: -224px -32px; }
  163 +.selected .icon.icon-extlink, .icon.icon-extlink, .icon.icon-extlink:hover { background-position: -240px -32px; }
  164 +
  165 +/* arrow thick */
  166 +.selected .icon.icon-arrowthick-n, .icon.icon-arrowthick-n, .icon.icon-arrowthick-n:hover { background-position: 0 -48px; }
  167 +.selected .icon.icon-arrowthick-ne, .icon.icon-arrowthick-ne, .icon.icon-arrowthick-ne:hover { background-position: -16px -48px; }
  168 +.selected .icon.icon-arrowthick-e, .icon.icon-arrowthick-e, .icon.icon-arrowthick-e:hover { background-position: -32px -48px; }
  169 +.selected .icon.icon-arrowthick-se, .icon.icon-arrowthick-se, .icon.icon-arrowthick-se:hover { background-position: -48px -48px; }
  170 +.selected .icon.icon-arrowthick-s, .icon.icon-arrowthick-s, .icon.icon-arrowthick-s:hover { background-position: -64px -48px; }
  171 +.selected .icon.icon-arrowthick-sw, .icon.icon-arrowthick-sw, .icon.icon-arrowthick-sw:hover { background-position: -80px -48px; }
  172 +.selected .icon.icon-arrowthick-w, .icon.icon-arrowthick-w, .icon.icon-arrowthick-w:hover { background-position: -96px -48px; }
  173 +.selected .icon.icon-arrowthick-nw, .icon.icon-arrowthick-nw, .icon.icon-arrowthick-nw:hover { background-position: -112px -48px; }
  174 +
  175 +/* arrow return thick */
  176 +.selected .icon.icon-undo, .icon.icon-undo, .icon.icon-undo:hover { background-position: -128px -48px; }
  177 +.selected .icon.icon-redo, .icon.icon-redo, .icon.icon-redo:hover { background-position: -144px -48px; }
  178 +.selected .icon.icon-replyall, .icon.icon-replyall, .icon.icon-replyall:hover { background-position: -160px -48px; }
  179 +.selected .icon.icon-refresh, .icon.icon-refresh, .icon.icon-refresh:hover { background-position: -176px -48px; }
  180 +
  181 +/* bullets */
  182 +.selected .icon.icon-bullet-on, .icon.icon-bullet-on, .icon.icon-bullet-on:hover { background-position: -192px -48px; }
  183 +.selected .icon.icon-bullet-off, .icon.icon-bullet-off, .icon.icon-bullet-off:hover { background-position: -208px -48px; }
  184 +.selected .icon.icon-star-on, .icon.icon-star-on, .icon.icon-star-on:hover { background-position: -224px -48px; }
  185 +.selected .icon.icon-star-off, .icon.icon-star-off, .icon.icon-star-off:hover { background-position: -240px -48px; }
  186 +
  187 +/* arrow return */
  188 +.selected .icon.icon-arrowreturn-se, .icon.icon-arrowreturn-se, .icon.icon-arrowreturn-se:hover { background-position: 0 -64px; }
  189 +.selected .icon.icon-arrowreturn-sw, .icon.icon-arrowreturn-sw, .icon.icon-arrowreturn-sw:hover { background-position: -16px -64px; }
  190 +.selected .icon.icon-arrowreturn-ne, .icon.icon-arrowreturn-ne, .icon.icon-arrowreturn-ne:hover { background-position: -32px -64px; }
  191 +.selected .icon.icon-arrowreturn-nw, .icon.icon-arrowreturn-nw, .icon.icon-arrowreturn-nw:hover { background-position: -48px -64px; }
  192 +.selected .icon.icon-arrowreturn-ws, .icon.icon-arrowreturn-ws, .icon.icon-arrowreturn-ws:hover { background-position: -64px -64px; }
  193 +.selected .icon.icon-arrowreturn-es, .icon.icon-arrowreturn-es, .icon.icon-arrowreturn-es:hover { background-position: -80px -64px; }
  194 +.selected .icon.icon-arrowreturn-wn, .icon.icon-arrowreturn-wn, .icon.icon-arrowreturn-wn:hover { background-position: -96px -64px; }
  195 +.selected .icon.icon-arrowreturn-en, .icon.icon-arrowreturn-en, .icon.icon-arrowreturn-en:hover { background-position: -112px -64px; }
  196 +
  197 +/* arrow refresh */
  198 +.selected .icon.icon-arrowrefresh-w, .icon.icon-arrowrefresh-w, .icon.icon-arrowrefresh-w:hover { background-position: -128px -64px; }
  199 +.selected .icon.icon-arrowrefresh-n, .icon.icon-arrowrefresh-n, .icon.icon-arrowrefresh-n:hover { background-position: -144px -64px; }
  200 +.selected .icon.icon-arrowrefresh-e, .icon.icon-arrowrefresh-e, .icon.icon-arrowrefresh-e:hover { background-position: -160px -64px; }
  201 +.selected .icon.icon-arrowrefresh-s, .icon.icon-arrowrefresh-s, .icon.icon-arrowrefresh-s:hover { background-position: -176px -64px; }
  202 +
  203 +/* search, zoom */
  204 +.selected .icon.icon-search, .icon.icon-search, .icon.icon-search:hover { background-position: -192px -64px; }
  205 +.selected .icon.icon-zoomin, .icon.icon-zoomin, .icon.icon-zoomin:hover { background-position: -208px -64px; }
  206 +.selected .icon.icon-zoomout, .icon.icon-zoomout, .icon.icon-zoomout:hover { background-position: -224px -64px; }
  207 +
  208 +/* rss */
  209 +.selected .icon.icon-rssfeed, .icon.icon-rssfeed, .icon.icon-rssfeed:hover { background-position: -240px -64px; }
  210 +
  211 +/* user */
  212 +.selected .icon.icon-home, .icon.icon-home, .icon.icon-home:hover { background-position: 0 -80px; }
  213 +.selected .icon.icon-user, .icon.icon-user, .icon.icon-user:hover { background-position: -16px -80px; }
  214 +.selected .icon.icon-print, .icon.icon-print, .icon.icon-print:hover { background-position: -32px -80px; }
  215 +.selected .icon.icon-save, .icon.icon-save, .icon.icon-save:hover { background-position: -48px -80px; }
  216 +.selected .icon.icon-book, .icon.icon-book, .icon.icon-book:hover { background-position: -64px -80px; }
  217 +.selected .icon.icon-book2, .icon.icon-book2, .icon.icon-book2:hover { background-position: -80px -80px; }
  218 +.selected .icon.icon-folder-collapsed, .icon.icon-folder-collapsed, .icon.icon-folder-collapsed:hover { background-position: -96px -80px; }
  219 +.selected .icon.icon-folder-open, .icon.icon-folder-open, .icon.icon-folder-open:hover { background-position: -112px -80px; }
  220 +
  221 +/* bookmark */
  222 +.selected .icon.icon-flag, .icon.icon-flag, .icon.icon-flag:hover { background-position: -128px -80px; }
  223 +.selected .icon.icon-bookmark, .icon.icon-bookmark, .icon.icon-bookmark:hover { background-position: -144px -80px; }
  224 +.selected .icon.icon-heart, .icon.icon-heart, .icon.icon-heart:hover { background-position: -160px -80px; }
  225 +
  226 +/* cancel */
  227 +.selected .icon.icon-cancel, .icon.icon-cancel, .icon.icon-cancel:hover { background-position: -176px -80px; }
  228 +.selected .icon.icon-trash, .icon.icon-trash, .icon.icon-trash:hover { background-position: -192px -80px; }
  229 +
  230 +/* tag */
  231 +.selected .icon.icon-pin, .icon.icon-pin, .icon.icon-pin:hover { background-position: -208px -80px; }
  232 +.selected .icon.icon-tag, .icon.icon-tag, .icon.icon-tag:hover { background-position: -224px -80px; }
  233 +.selected .icon.icon-lightbulb, .icon.icon-lightbulb, .icon.icon-lightbulb:hover { background-position: -240px -80px; }
  234 +
  235 +/* settings */
  236 +.selected .icon.icon-gear, .icon.icon-gear, .icon.icon-gear:hover { background-position: 0 -96px; }
  237 +.selected .icon.icon-wrench, .icon.icon-wrench, .icon.icon-wrench:hover { background-position: -16px -96px; }
  238 +.selected .icon.icon-locked, .icon.icon-locked, .icon.icon-locked:hover { background-position: -32px -96px; }
  239 +.selected .icon.icon-unlocked, .icon.icon-unlocked, .icon.icon-unlocked:hover { background-position: -48px -96px; }
  240 +.selected .icon.icon-key, .icon.icon-key, .icon.icon-key:hover { background-position: -64px -96px; }
  241 +
  242 +/* office */
  243 +.selected .icon.icon-clipboard, .icon.icon-clipboard, .icon.icon-clipboard:hover { background-position: -80px -96px; }
  244 +.selected .icon.icon-scissors, .icon.icon-scissors, .icon.icon-scissors:hover { background-position: -96px -96px; }
  245 +.selected .icon.icon-edit, .icon.icon-edit, .icon.icon-edit:hover { background-position: -112px -96px; }
  246 +.selected .icon.icon-page, .icon.icon-page, .icon.icon-page:hover { background-position: -128px -96px; }
  247 +.selected .icon.icon-copy, .icon.icon-copy, .icon.icon-copy:hover { background-position: -144px -96px; }
  248 +.selected .icon.icon-note, .icon.icon-note, .icon.icon-note:hover { background-position: -160px -96px; }
  249 +.selected .icon.icon-pdf, .icon.icon-pdf, .icon.icon-pdf:hover { background-position: -176px -96px; }
  250 +.selected .icon.icon-doc, .icon.icon-doc, .icon.icon-doc:hover { background-position: -192px -96px; }
  251 +.selected .icon.icon-xls, .icon.icon-xls, .icon.icon-xls:hover { background-position: -208px -96px; }
  252 +.selected .icon.icon-document, .icon.icon-document, .icon.icon-document:hover { background-position: -224px -96px; }
  253 +.selected .icon.icon-script, .icon.icon-script, .icon.icon-script:hover { background-position: -240px -96px; }
  254 +
  255 +.selected .icon.icon-calendar, .icon.icon-calendar, .icon.icon-calendar:hover { background-position: 0 -112px; }
  256 +.selected .icon.icon-calendar2, .icon.icon-calendar2, .icon.icon-calendar2:hover { background-position: -16px -112px; }
  257 +.selected .icon.icon-clock, .icon.icon-clock, .icon.icon-clock:hover { background-position: -32px -112px; }
  258 +.selected .icon.icon-mail-closed, .icon.icon-mail-closed, .icon.icon-mail-closed:hover { background-position: -48px -112px; }
  259 +.selected .icon.icon-mail-open, .icon.icon-mail-open, .icon.icon-mail-open:hover { background-position: -64px -112px; }
  260 +.selected .icon.icon-mail2-closed, .icon.icon-mail2-closed, .icon.icon-mail2-closed:hover { background-position: -80px -112px; }
  261 +.selected .icon.icon-mail2-open, .icon.icon-mail2-open, .icon.icon-mail2-open:hover { background-position: -96px -112px; }
  262 +.selected .icon.icon-link, .icon.icon-link, .icon.icon-link:hover { background-position: -112px -112px; }
  263 +.selected .icon.icon-unlink, .icon.icon-unlink, .icon.icon-unlink:hover { background-position: -128px -112px; }
  264 +.selected .icon.icon-web, .icon.icon-web, .icon.icon-web:hover { background-position: -144px -112px; }
  265 +.selected .icon.icon-web2, .icon.icon-web2, .icon.icon-web2:hover { background-position: -160px -112px; }
  266 +.selected .icon.icon-contacts, .icon.icon-contacts, .icon.icon-contacts:hover { background-position: -176px -112px; }
  267 +.selected .icon.icon-profile, .icon.icon-profile, .icon.icon-profile:hover { background-position: -192px -112px; }
  268 +.selected .icon.icon-image, .icon.icon-image, .icon.icon-image:hover { background-position: -208px -112px; }
  269 +.selected .icon.icon-suitcase, .icon.icon-suitcase, .icon.icon-suitcase:hover { background-position: -224px -112px; }
  270 +.selected .icon.icon-suitcase2, .icon.icon-suitcase2, .icon.icon-suitcase2:hover { background-position: -240px -112px; }
  271 +
  272 +/* circle symbols */
  273 +.selected .icon.icon-close, .icon.icon-close, .icon.icon-close:hover { background-position: 0 -128px; }
  274 +.selected .icon.icon-add, .icon.icon-add, .icon.icon-add:hover { background-position: -16px -128px; }
  275 +.selected .icon.icon-remove, .icon.icon-remove, .icon.icon-remove:hover { background-position: -32px -128px; }
  276 +.selected .icon.icon-info, .icon.icon-info, .icon.icon-info:hover { background-position: -48px -128px; }
  277 +
  278 +/* alert */
  279 +.selected .icon.icon-alert, .icon.icon-alert, .icon.icon-alert:hover { background-position: -64px -128px; }
  280 +
  281 +/* comments */
  282 +.selected .icon.icon-comment-text, .icon.icon-comment-text, .icon.icon-comment-text:hover { background-position: -80px -128px; }
  283 +.selected .icon.icon-comment-video, .icon.icon-comment-video, .icon.icon-comment-video:hover { background-position: -96px -128px; }
  284 +.selected .icon.icon-comment, .icon.icon-comment, .icon.icon-comment:hover { background-position: -112px -128px; }
  285 +
  286 +/* shopping */
  287 +.selected .icon.icon-cart, .icon.icon-cart, .icon.icon-cart:hover { background-position: -128px -128px; }
  288 +.selected .icon.icon-basket, .icon.icon-basket, .icon.icon-basket:hover { background-position: -144px -128px; }
  289 +
  290 +/* media */
  291 +.selected .icon.icon-messages, .icon.icon-messages, .icon.icon-messages:hover { background-position: -160px -128px; }
  292 +.selected .icon.icon-users, .icon.icon-users, .icon.icon-users:hover { background-position: -176px -128px; }
  293 +.selected .icon.icon-video, .icon.icon-video, .icon.icon-video:hover { background-position: -192px -128px; }
  294 +.selected .icon.icon-audio, .icon.icon-audio, .icon.icon-audio:hover { background-position: -208px -128px; }
  295 +.selected .icon.icon-volume-off, .icon.icon-volume-off, .icon.icon-volume-off:hover { background-position: -224px -128px; }
  296 +.selected .icon.icon-volume-on, .icon.icon-volume-on, .icon.icon-volume-on:hover { background-position: -240px -128px; }
  297 +
  298 +/* mail */
  299 +.selected .icon.icon-compose, .icon.icon-compose, .icon.icon-compose:hover { background-position: 0 -144px; }
  300 +.selected .icon.icon-inbox, .icon.icon-inbox, .icon.icon-inbox:hover { background-position: -16px -144px; }
  301 +.selected .icon.icon-archive, .icon.icon-archive, .icon.icon-archive:hover { background-position: -32px -144px; }
  302 +.selected .icon.icon-reply, .icon.icon-reply, .icon.icon-reply:hover { background-position: -48px -144px; }
  303 +.selected .icon.icon-sent, .icon.icon-sent, .icon.icon-sent:hover { background-position: -64px -144px; }
  304 +.selected .icon.icon-attachement, .icon.icon-attachement, .icon.icon-attachement:hover { background-position: -80px -144px; }
  305 +
  306 +@private
  307 +icon32 = css
  308 +
  309 +/* ---------------- Icons 32px ---------------- */
  310 +/* Default 32px gray icon for light backgrounds */
  311 +.icon32 {
  312 + width: 32px;
  313 + height: 32px;
  314 + background: {get_img("icons32-gray.png")} no-repeat;
  315 + background-repeat: no-repeat;
  316 + display: inline-block;
  317 + vertical-align: top;
  318 +}
  319 +.icon32:hover {background: {get_img("icons32-darkGray.png")} no-repeat;}
  320 +
  321 +/* Color icon for active, selected for light backgrounds */
  322 +.selected .icon32 {background: {get_img("icons32-color.png")} no-repeat;}
  323 +
  324 +/* White icons for vivid and dark backgrounds */
  325 +.icon32.icon-white {background: {get_img("icons32-white.png")} no-repeat;}
  326 +
  327 +/* Black icons for gray backgrounds */
  328 +.icon32.icon-black {background: {get_img("icons32-black.png")} no-repeat;}
  329 +
  330 +/* positioning */
  331 +/* triangle */
  332 +.selected .icon32.icon-triangle-n, .icon32.icon-triangle-n, .icon32.icon-triangle-n:hover { background-position: 0 0; }
  333 +.selected .icon32.icon-triangle-ne, .icon32.icon-triangle-ne, .icon32.icon-triangle-ne:hover { background-position: -32px 0; }
  334 +.selected .icon32.icon-triangle-e, .icon32.icon-triangle-e, .icon32.icon-triangle-e:hover { background-position: -64px 0; }
  335 +.selected .icon32.icon-triangle-se, .icon32.icon-triangle-se, .icon32.icon-triangle-se:hover { background-position: -96px 0; }
  336 +.selected .icon32.icon-triangle-s, .icon32.icon-triangle-s, .icon32.icon-triangle-s:hover { background-position: -128px 0; }
  337 +.selected .icon32.icon-triangle-sw, .icon32.icon-triangle-sw, .icon32.icon-triangle-sw:hover { background-position: -160px 0; }
  338 +.selected .icon32.icon-triangle-w, .icon32.icon-triangle-w, .icon32.icon-triangle-w:hover { background-position: -192px 0; }
  339 +.selected .icon32.icon-triangle-nw, .icon32.icon-triangle-nw, .icon32.icon-triangle-nw:hover { background-position: -224px 0; }
  340 +.selected .icon32.icon-triangle-ns, .icon32.icon-triangle-ns, .icon32.icon-triangle-ns:hover { background-position: -256px 0; }
  341 +.selected .icon32.icon-triangle-ew, .icon32.icon-triangle-ew, .icon32.icon-triangle-ew:hover { background-position: -288px 0; }
  342 +
  343 +/* arrow stop */
  344 +.selected .icon32.icon-arrowstop-n, .icon32.icon-arrowstop-n, .icon32.icon-arrowstop-n:hover { background-position: -320px 0; }
  345 +.selected .icon32.icon-arrowstop-e, .icon32.icon-arrowstop-e, .icon32.icon-arrowstop-e:hover { background-position: -352px 0; }
  346 +.selected .icon32.icon-arrowstop-s, .icon32.icon-arrowstop-s, .icon32.icon-arrowstop-s:hover { background-position: -384px 0; }
  347 +.selected .icon32.icon-arrowstop-w, .icon32.icon-arrowstop-w, .icon32.icon-arrowstop-w:hover { background-position: -416px 0; }
  348 +
  349 +/* arrow transfert, shuffle */
  350 +.selected .icon32.icon-transefr-ew, .icon32.icon-transefr-ew, .icon32.icon-transefr-ew:hover { background-position: -448px 0; }
  351 +.selected .icon32.icon-shuffle, .icon32.icon-shuffle, .icon32.icon-shuffle:hover { background-position: -480px 0; }
  352 +
  353 +/* carat */
  354 +.selected .icon32.icon-carat-n, .icon32.icon-carat-n, .icon32.icon-carat-n:hover { background-position: 0 -32px; }
  355 +.selected .icon32.icon-carat-ne, .icon32.icon-carat-ne, .icon32.icon-carat-ne:hover { background-position: -32px -32px; }
  356 +.selected .icon32.icon-carat-e, .icon32.icon-carat-e, .icon32.icon-carat-e:hover { background-position: -64px -32px; }
  357 +.selected .icon32.icon-carat-se, .icon32.icon-carat-se, .icon32.icon-carat-se:hover { background-position: -96px -32px; }
  358 +.selected .icon32.icon-carat-s, .icon32.icon-carat-s, .icon32.icon-carat-s:hover { background-position: -128px -32px; }
  359 +.selected .icon32.icon-carat-sw, .icon32.icon-carat-sw, .icon32.icon-carat-sw:hover { background-position: -160px -32px; }
  360 +.selected .icon32.icon-carat-w, .icon32.icon-carat-w, .icon32.icon-carat-w:hover { background-position: -192px -32px; }
  361 +.selected .icon32.icon-carat-nw, .icon32.icon-carat-nw, .icon32.icon-carat-nw:hover { background-position: -224px -32px; }
  362 +.selected .icon32.icon-carat-ns, .icon32.icon-carat-ns, .icon32.icon-carat-ns:hover { background-position: -256px -32px; }
  363 +.selected .icon32.icon-carat-ew , .icon32.icon-carat-ew , .icon32.icon-carat-ew :hover { background-position: -288px -32px; }
  364 +
  365 +/* symbols */
  366 +.selected .icon32.icon-plus, .icon32.icon-plus, .icon32.icon-plus:hover { background-position: -320px -32px; }
  367 +.selected .icon32.icon-minus, .icon32.icon-minus, .icon32.icon-minus:hover { background-position: -352px -32px; }
  368 +.selected .icon32.icon-close, .icon32.icon-close, .icon32.icon-close:hover { background-position: -384px -32px; }
  369 +.selected .icon32.icon-check, .icon32.icon-check, .icon32.icon-check:hover { background-position: -416px -32px; }
  370 +.selected .icon32.icon-help, .icon32.icon-help, .icon32.icon-help:hover { background-position: -448px -32px; }
  371 +.selected .icon32.icon-notice, .icon32.icon-notice, .icon32.icon-notice:hover { background-position: -480px -32px; }
  372 +
  373 +/* arrow */
  374 +.selected .icon32.icon-arrow-n, .icon32.icon-arrow-n, .icon32.icon-arrow-n:hover { background-position: 0 -64px; }
  375 +.selected .icon32.icon-arrow-ne, .icon32.icon-arrow-ne, .icon32.icon-arrow-ne:hover { background-position: 16px -64px; }
  376 +.selected .icon32.icon-arrow-e, .icon32.icon-arrow-e, .icon32.icon-arrow-e:hover { background-position: -64px -64px; }
  377 +.selected .icon32.icon-arrow-se, .icon32.icon-arrow-se, .icon32.icon-arrow-se:hover { background-position: -96px -64px; }
  378 +.selected .icon32.icon-arrow-s, .icon32.icon-arrow-s, .icon32.icon-arrow-s:hover { background-position: -128px -64px; }
  379 +.selected .icon32.icon-arrow-sw, .icon32.icon-arrow-sw, .icon32.icon-arrow-sw:hover { background-position: -160px -64px; }
  380 +.selected .icon32.icon-arrow-w, .icon32.icon-arrow-w, .icon32.icon-arrow-w:hover { background-position: -192px -64px; }
  381 +.selected .icon32.icon-arrow-nw, .icon32.icon-arrow-nw, .icon32.icon-arrow-nw:hover { background-position: -224px -64px; }
  382 +.selected .icon32.icon-arrow-n-s, .icon32.icon-arrow-n-s, .icon32.icon-arrow-n-s:hover { background-position: -256px -64px; }
  383 +.selected .icon32.icon-arrow-ne-sw, .icon32.icon-arrow-ne-sw, .icon32.icon-arrow-ne-sw:hover { background-position: -288px -64px; }
  384 +.selected .icon32.icon-arrow-e-w, .icon32.icon-arrow-e-w, .icon32.icon-arrow-e-w:hover { background-position: -320px -64px; }
  385 +.selected .icon32.icon-arrow-se-nw, .icon32.icon-arrow-se-nw, .icon32.icon-arrow-se-nw:hover { background-position: -352px -64px; }
  386 +
  387 +/* arrow dialog */
  388 +.selected .icon32.icon-arrow-nesw, .icon32.icon-arrow-nesw, .icon32.icon-arrow-nesw:hover { background-position: -384px -64px; }
  389 +.selected .icon32.icon-arrow-4diag, .icon32.icon-arrow-4diag, .icon32.icon-arrow-4diag:hover { background-position: -416px -64px; }
  390 +.selected .icon32.icon-newwin, .icon32.icon-newwin, .icon32.icon-newwin:hover { background-position: -448px -64px; }
  391 +.selected .icon32.icon-extlink, .icon32.icon-extlink, .icon32.icon-extlink:hover { background-position: -480px -64px; }
  392 +
  393 +/* arrow thick */
  394 +.selected .icon32.icon-arrowthick-n, .icon32.icon-arrowthick-n, .icon32.icon-arrowthick-n:hover { background-position: 0 -96px; }
  395 +.selected .icon32.icon-arrowthick-ne, .icon32.icon-arrowthick-ne, .icon32.icon-arrowthick-ne:hover { background-position: -32px -96px; }
  396 +.selected .icon32.icon-arrowthick-e, .icon32.icon-arrowthick-e, .icon32.icon-arrowthick-e:hover { background-position: -64px -96px; }
  397 +.selected .icon32.icon-arrowthick-se, .icon32.icon-arrowthick-se, .icon32.icon-arrowthick-se:hover { background-position: -96px -96px; }
  398 +.selected .icon32.icon-arrowthick-s, .icon32.icon-arrowthick-s, .icon32.icon-arrowthick-s:hover { background-position: -128px -96px; }
  399 +.selected .icon32.icon-arrowthick-sw, .icon32.icon-arrowthick-sw, .icon32.icon-arrowthick-sw:hover { background-position: -160px -96px; }
  400 +.selected .icon32.icon-arrowthick-w, .icon32.icon-arrowthick-w, .icon32.icon-arrowthick-w:hover { background-position: -192px -96px; }
  401 +.selected .icon32.icon-arrowthick-nw, .icon32.icon-arrowthick-nw, .icon32.icon-arrowthick-nw:hover { background-position: -224px -96px; }
  402 +
  403 +/* arrow return thick */
  404 +.selected .icon32.icon-undo, .icon32.icon-undo, .icon32.icon-undo:hover { background-position: -256px -96px; }
  405 +.selected .icon32.icon-redo, .icon32.icon-redo, .icon32.icon-redo:hover { background-position: -288px -96px; }
  406 +.selected .icon32.icon-replyall, .icon32.icon-replyall, .icon32.icon-replyall:hover { background-position: -320px -96px; }
  407 +.selected .icon32.icon-refresh, .icon32.icon-refresh, .icon32.icon-refresh:hover { background-position: -352px -96px; }
  408 +
  409 +/* bullets */
  410 +.selected .icon32.icon-bullet-on, .icon32.icon-bullet-on, .icon32.icon-bullet-on:hover { background-position: -384px -96px; }
  411 +.selected .icon32.icon-bullet-off, .icon32.icon-bullet-off, .icon32.icon-bullet-off:hover { background-position: -416px -96px; }
  412 +.selected .icon32.icon-star-on, .icon32.icon-star-on, .icon32.icon-star-on:hover { background-position: -448px -96px; }
  413 +.selected .icon32.icon-star-off, .icon32.icon-star-off, .icon32.icon-star-off:hover { background-position: -480px -96px; }
  414 +
  415 +/* arrow return */
  416 +.selected .icon32.icon-arrowreturn-se, .icon32.icon-arrowreturn-se, .icon32.icon-arrowreturn-se:hover { background-position: 0 -128px; }
  417 +.selected .icon32.icon-arrowreturn-sw, .icon32.icon-arrowreturn-sw, .icon32.icon-arrowreturn-sw:hover { background-position: -32px -128px; }
  418 +.selected .icon32.icon-arrowreturn-ne, .icon32.icon-arrowreturn-ne, .icon32.icon-arrowreturn-ne:hover { background-position: -64px -128px; }
  419 +.selected .icon32.icon-arrowreturn-nw, .icon32.icon-arrowreturn-nw, .icon32.icon-arrowreturn-nw:hover { background-position: -96px -128px; }
  420 +.selected .icon32.icon-arrowreturn-ws, .icon32.icon-arrowreturn-ws, .icon32.icon-arrowreturn-ws:hover { background-position: -128px -128px; }
  421 +.selected .icon32.icon-arrowreturn-es, .icon32.icon-arrowreturn-es, .icon32.icon-arrowreturn-es:hover { background-position: -160px -128px; }
  422 +.selected .icon32.icon-arrowreturn-wn, .icon32.icon-arrowreturn-wn, .icon32.icon-arrowreturn-wn:hover { background-position: -192px -128px; }
  423 +.selected .icon32.icon-arrowreturn-en, .icon32.icon-arrowreturn-en, .icon32.icon-arrowreturn-en:hover { background-position: -224px -128px; }
  424 +
  425 +/* arrow refresh */
  426 +.selected .icon32.icon-arrowrefresh-w, .icon32.icon-arrowrefresh-w, .icon32.icon-arrowrefresh-w:hover { background-position: -256px -128px; }
  427 +.selected .icon32.icon-arrowrefresh-n, .icon32.icon-arrowrefresh-n, .icon32.icon-arrowrefresh-n:hover { background-position: -288px -128px; }
  428 +.selected .icon32.icon-arrowrefresh-e, .icon32.icon-arrowrefresh-e, .icon32.icon-arrowrefresh-e:hover { background-position: -320px -128px; }
  429 +.selected .icon32.icon-arrowrefresh-s, .icon32.icon-arrowrefresh-s, .icon32.icon-arrowrefresh-s:hover { background-position: -352px -128px; }
  430 +
  431 +/* search, zoom */
  432 +.selected .icon32.icon-search, .icon32.icon-search, .icon32.icon-search:hover { background-position: -384px -128px; }
  433 +.selected .icon32.icon-zoomin, .icon32.icon-zoomin, .icon32.icon-zoomin:hover { background-position: -416px -128px; }
  434 +.selected .icon32.icon-zoomout, .icon32.icon-zoomout, .icon32.icon-zoomout:hover { background-position: -448px -128px; }
  435 +
  436 +/* rss */
  437 +.selected .icon32.icon-rssfeed, .icon32.icon-rssfeed, .icon32.icon-rssfeed:hover { background-position: -480px -128px; }
  438 +
  439 +/* user */
  440 +.selected .icon32.icon-home, .icon32.icon-home, .icon32.icon-home:hover { background-position: 0 -160px; }
  441 +.selected .icon32.icon-user, .icon32.icon-user, .icon32.icon-user:hover { background-position: -32px -160px; }
  442 +.selected .icon32.icon-print, .icon32.icon-print, .icon32.icon-print:hover { background-position: -64px -160px; }
  443 +.selected .icon32.icon-save, .icon32.icon-save, .icon32.icon-save:hover { background-position: -96px -160px; }
  444 +.selected .icon32.icon-book, .icon32.icon-book, .icon32.icon-book:hover { background-position: -128px -160px; }
  445 +.selected .icon32.icon-book2, .icon32.icon-book2, .icon32.icon-book2:hover { background-position: -160px -160px; }
  446 +.selected .icon32.icon-folder-collapsed, .icon32.icon-folder-collapsed, .icon32.icon-folder-collapsed:hover { background-position: -192px -160px; }
  447 +.selected .icon32.icon-folder-open, .icon32.icon-folder-open, .icon32.icon-folder-open:hover { background-position: -224px -160px; }
  448 +
  449 +/* bookmark */
  450 +.selected .icon32.icon-flag, .icon32.icon-flag, .icon32.icon-flag:hover { background-position: -256px -160px; }
  451 +.selected .icon32.icon-bookmark, .icon32.icon-bookmark, .icon32.icon-bookmark:hover { background-position: -288px -160px; }
  452 +.selected .icon32.icon-heart, .icon32.icon-heart, .icon32.icon-heart:hover { background-position: -320px -160px; }
  453 +
  454 +/* cancel */
  455 +.selected .icon32.icon-cancel, .icon32.icon-cancel, .icon32.icon-cancel:hover { background-position: -352px -160px; }
  456 +.selected .icon32.icon-trash, .icon32.icon-trash, .icon32.icon-trash:hover { background-position: -384px -160px; }
  457 +
  458 +/* tag */
  459 +.selected .icon32.icon-pin, .icon32.icon-pin, .icon32.icon-pin:hover { background-position: -416px -160px; }
  460 +.selected .icon32.icon-tag, .icon32.icon-tag, .icon32.icon-tag:hover { background-position: -448px -160px; }
  461 +.selected .icon32.icon-lightbulb, .icon32.icon-lightbulb, .icon32.icon-lightbulb:hover { background-position: -480px -160px; }
  462 +
  463 +/* settings */
  464 +.selected .icon32.icon-gear, .icon32.icon-gear, .icon32.icon-gear:hover { background-position: 0 -192px; }
  465 +.selected .icon32.icon-wrench, .icon32.icon-wrench, .icon32.icon-wrench:hover { background-position: -32px -192px; }
  466 +.selected .icon32.icon-locked, .icon32.icon-locked, .icon32.icon-locked:hover { background-position: -64px -192px; }
  467 +.selected .icon32.icon-unlocked, .icon32.icon-unlocked, .icon32.icon-unlocked:hover { background-position: -96px -192px; }
  468 +.selected .icon32.icon-key, .icon32.icon-key, .icon32.icon-key:hover { background-position: -128px -192px; }
  469 +
  470 +/* office */
  471 +.selected .icon32.icon-clipboard, .icon32.icon-clipboard, .icon32.icon-clipboard:hover { background-position: -160px -192px; }
  472 +.selected .icon32.icon-scissors, .icon32.icon-scissors, .icon32.icon-scissors:hover { background-position: -192px -192px; }
  473 +.selected .icon32.icon-edit, .icon32.icon-edit, .icon32.icon-edit:hover { background-position: -224px -192px; }
  474 +.selected .icon32.icon-page, .icon32.icon-page, .icon32.icon-page:hover { background-position: -256px -192px; }
  475 +.selected .icon32.icon-copy, .icon32.icon-copy, .icon32.icon-copy:hover { background-position: -288px -192px; }
  476 +.selected .icon32.icon-note, .icon32.icon-note, .icon32.icon-note:hover { background-position: -320px -192px; }
  477 +.selected .icon32.icon-pdf, .icon32.icon-pdf, .icon32.icon-pdf:hover { background-position: -352px -192px; }
  478 +.selected .icon32.icon-doc, .icon32.icon-doc, .icon32.icon-doc:hover { background-position: -384px -192px; }
  479 +.selected .icon32.icon-xls, .icon32.icon-xls, .icon32.icon-xls:hover { background-position: -416px -192px; }
  480 +.selected .icon32.icon-document, .icon32.icon-document, .icon32.icon-document:hover { background-position: -448px -192px; }
  481 +.selected .icon32.icon-script, .icon32.icon-script, .icon32.icon-script:hover { background-position: -480px -192px; }
  482 +
  483 +.selected .icon32.icon-calendar, .icon32.icon-calendar, .icon32.icon-calendar:hover { background-position: 0 -224px; }
  484 +.selected .icon32.icon-calendar2, .icon32.icon-calendar2, .icon32.icon-calendar2:hover { background-position: -32px -224px; }
  485 +.selected .icon32.icon-clock, .icon32.icon-clock, .icon32.icon-clock:hover { background-position: -64px -224px; }
  486 +.selected .icon32.icon-mail-closed, .icon32.icon-mail-closed, .icon32.icon-mail-closed:hover { background-position: -96px -224px; }
  487 +.selected .icon32.icon-mail-open, .icon32.icon-mail-open, .icon32.icon-mail-open:hover { background-position: -128px -224px; }
  488 +.selected .icon32.icon-mail2-closed, .icon32.icon-mail2-closed, .icon32.icon-mail2-closed:hover { background-position: -160px -224px; }
  489 +.selected .icon32.icon-mail2-open, .icon32.icon-mail2-open, .icon32.icon-mail2-open:hover { background-position: -192px -224px; }
  490 +.selected .icon32.icon-link, .icon32.icon-link, .icon32.icon-link:hover { background-position: -224px -224px; }
  491 +.selected .icon32.icon-unlink, .icon32.icon-unlink, .icon32.icon-unlink:hover { background-position: -256px -224px; }
  492 +.selected .icon32.icon-web, .icon32.icon-web, .icon32.icon-web:hover { background-position: -288px -224px; }
  493 +.selected .icon32.icon-web2, .icon32.icon-web2, .icon32.icon-web2:hover { background-position: -320px -224px; }
  494 +.selected .icon32.icon-contacts, .icon32.icon-contacts, .icon32.icon-contacts:hover { background-position: -352px -224px; }
  495 +.selected .icon32.icon-profile, .icon32.icon-profile, .icon32.icon-profile:hover { background-position: -384px -224px; }
  496 +.selected .icon32.icon-image, .icon32.icon-image, .icon32.icon-image:hover { background-position: -416px -224px; }
  497 +.selected .icon32.icon-suitcase, .icon32.icon-suitcase, .icon32.icon-suitcase:hover { background-position: -448px -224px; }
  498 +.selected .icon32.icon-suitcase2, .icon32.icon-suitcase2, .icon32.icon-suitcase2:hover { background-position: -480px -224px; }
  499 +
  500 +/* circle symbols */
  501 +.selected .icon32.icon-close, .icon32.icon-close, .icon32.icon-close:hover { background-position: 0 -256px; }
  502 +.selected .icon32.icon-add, .icon32.icon-add, .icon32.icon-add:hover { background-position: -32px -256px; }
  503 +.selected .icon32.icon-remove, .icon32.icon-remove, .icon32.icon-remove:hover { background-position: -64px -256px; }
  504 +.selected .icon32.icon-info, .icon32.icon-info, .icon32.icon-info:hover { background-position: -96px -256px; }
  505 +
  506 +/* alert */
  507 +.selected .icon32.icon-alert, .icon32.icon-alert, .icon32.icon-alert:hover { background-position: -128px -256px; }
  508 +
  509 +/* comments */
  510 +.selected .icon32.icon-comment-text, .icon32.icon-comment-text, .icon32.icon-comment-text:hover { background-position: -160px -256px; }
  511 +.selected .icon32.icon-comment-video, .icon32.icon-comment-video, .icon32.icon-comment-video:hover { background-position: -192px -256px; }
  512 +.selected .icon32.icon-comment, .icon32.icon-comment, .icon32.icon-comment:hover { background-position: -224px -256px; }
  513 +
  514 +/* shopping */
  515 +.selected .icon32.icon-cart, .icon32.icon-cart, .icon32.icon-cart:hover { background-position: -256px -256px; }
  516 +.selected .icon32.icon-basket, .icon32.icon-basket, .icon32.icon-basket:hover { background-position: -288px -256px; }
  517 +
  518 +/* media */
  519 +.selected .icon32.icon-messages, .icon32.icon-messages, .icon32.icon-messages:hover { background-position: -320px -256px; }
  520 +.selected .icon32.icon-users, .icon32.icon-users, .icon32.icon-users:hover { background-position: -352px -256px; }
  521 +.selected .icon32.icon-video, .icon32.icon-video, .icon32.icon-video:hover { background-position: -384px -256px; }
  522 +.selected .icon32.icon-audio, .icon32.icon-audio, .icon32.icon-audio:hover { background-position: -416px -256px; }
  523 +.selected .icon32.icon-volume-off, .icon32.icon-volume-off, .icon32.icon-volume-off:hover { background-position: -448px -256px; }
  524 +.selected .icon32.icon-volume-on, .icon32.icon-volume-on, .icon32.icon-volume-on:hover { background-position: -480px -256px; }
  525 +
  526 +/* mail */
  527 +.selected .icon32.icon-compose, .icon32.icon-compose, .icon32.icon-compose:hover { background-position: 0 -288px; }
  528 +.selected .icon32.icon-inbox, .icon32.icon-inbox, .icon32.icon-inbox:hover { background-position: -32px -288px; }
  529 +.selected .icon32.icon-archive, .icon32.icon-archive, .icon32.icon-archive:hover { background-position: -64px -288px; }
  530 +.selected .icon32.icon-reply, .icon32.icon-reply, .icon32.icon-reply:hover { background-position: -96px -288px; }
  531 +.selected .icon32.icon-sent, .icon32.icon-sent, .icon32.icon-sent:hover { background-position: -128px -288px; }
  532 +.selected .icon32.icon-attachement, .icon32.icon-attachement, .icon32.icon-attachement:hover { background-position: -160px -288px; }
  533 +
  534 +/* register resources */
  535 +
  536 +_ = Client_code.register_css_declaration([icon16,icon32])
  537 +
  538 +@private
  539 +compute_version_url(v:string) =
  540 + // Old URL
  541 + if String.le(v, "1.2.0") then "http://twitter.github.com/bootstrap/assets/css/bootstrap-{v}.min.css"
  542 + // New URL
  543 + else "http://twitter.github.com/bootstrap/{v}/bootstrap.min.css"
  544 +
  545 +@private
  546 +version = ServerReference.create("1.1.1") : reference(string)
  547 +
  548 +Bootstrap = {{
  549 + unimport() =
  550 + Resource.unregister_external_css(compute_version_url(Reference.get(version)))
  551 + import(v:string) =
  552 + // unregister the previous registered version
  553 + do unimport()
  554 + // set and register the new version to import
  555 + do Reference.set(version, v)
  556 + Resource.register_external_css(compute_version_url(v))
  557 +}}
522 stdlib/themes/bootstrap/style.opa
@@ -24,9 +24,9 @@
24 24 * It also includes several sets of icons.
25 25 *
26 26 * {2 Where should I start}
27   - * If you want to use the legacy version (1.1.1), just import this package.
28   - * Otherwise, call : Bootstrap.import(A_CERTAIN_VERSION) before launching your server.
29   - * /!\ We do not check if the version you gave is correct or not /!\
  27 + * If you want to use the current version (1.3.0), just import this package.
  28 + * Otherwise, import stdlib.themes.bootstrap.core and call: Bootstrap.import(VERSION)
  29 + * before launching your server (note: no check is performed), or import stdlib.themes.bootstrap-VERSION.
30 30 *
31 31 * {3 How to use icons}
32 32 * There are different sizes:
@@ -42,517 +42,9 @@
42 42 * - icon-plus, icon-minus, icon-close, icon-check, icon-help, icon-notice ...
43 43 */
44 44
45   -/* Publish resources */
  45 +import stdlib.themes.bootstrap.core
46 46
47   -@private
48   -option : DynamicResource.config = {
49   -sufix=some("icon.png")
50   -prefix=none
51   -onaccess=none
52   -}
  47 +current_bootstrap_version = "1.3.0"
  48 +current_bootstrap_url = "http://twitter.github.com/bootstrap/{current_bootstrap_version}/bootstrap.min.css"
53 49
54   -@private
55   -param = {
56   - expiration={none}
57   - consumption={unlimited}
58   - visibility={shared}
59   -}
60   -
61   -@private
62   -publish_img(name) = DynamicResource.publish_extend(name,param,option)
63   -
64   -
65   -/* resources */
66   -@private
67   -files_img = @static_include_directory("stdlib/themes/bootstrap/images")
68   -
69   -@private
70   -uri_img = Map.map(publish_img,files_img)
71   -
72   -@private
73   -get_img(name) =
74   - x = Map.get("stdlib/themes/bootstrap/images/{name}",uri_img) ? ""
75   - {url=Url.make(x)}
76   -
77   -
78   -/* css */
79   -
80   -@private
81   -icon16 = css
82   -/* Icons 16px */
83   -/*Default 16px gray icon for light backgrounds*/
84   -.icon {
85   - width: 16px;
86   - height: 16px;
87   - background: {get_img("icons16-gray.png")} no-repeat;
88   - display: inline-block;
89   - vertical-align: top;
90   -}
91   -.icon:hover {background: {get_img("icons16-darkGray.png")} no-repeat;}
92   -
93   -/*Color icon for active, selected for light backgrounds*/
94   -.selected .icon {background: {get_img("icons16-color.png")} no-repeat;}
95   -
96   -/*White icons for vivid and dark backgrounds*/
97   -.icon.icon-white {background: {get_img("icons16-white.png")} no-repeat;}
98   -
99   -/*Black icons for gray backgrounds*/
100   -.icon.icon-black {background: {get_img("icons16-black.png")} no-repeat;}
101   -
102   -/* positioning */
103   -/* triangle */
104   -.selected .icon.icon-triangle-n, .icon.icon-triangle-n, .icon.icon-triangle-n:hover { background-position: 0 0; }
105   -.selected .icon.icon-triangle-ne, .icon.icon-triangle-ne, .icon.icon-triangle-ne:hover { background-position: -16px 0; }
106   -.selected .icon.icon-triangle-e, .icon.icon-triangle-e, .icon.icon-triangle-e:hover { background-position: -32px 0; }
107   -.selected .icon.icon-triangle-se, .icon.icon-triangle-se, .icon.icon-triangle-se:hover { background-position: -48px 0; }
108   -.selected .icon.icon-triangle-s, .icon.icon-triangle-s, .icon.icon-triangle-s:hover { background-position: -64px 0; }
109   -.selected .icon.icon-triangle-sw, .icon.icon-triangle-sw, .icon.icon-triangle-sw:hover { background-position: -80px 0; }
110   -.selected .icon.icon-triangle-w, .icon.icon-triangle-w, .icon.icon-triangle-w:hover { background-position: -96px 0; }
111   -.selected .icon.icon-triangle-nw, .icon.icon-triangle-nw, .icon.icon-triangle-nw:hover { background-position: -112px 0; }
112   -.selected .icon.icon-triangle-ns, .icon.icon-triangle-ns, .icon.icon-triangle-ns:hover { background-position: -128px 0; }
113   -.selected .icon.icon-triangle-ew, .icon.icon-triangle-ew, .icon.icon-triangle-ew:hover { background-position: -144px 0; }
114   -
115   -/* arrow stop */
116   -.selected .icon.icon-arrowstop-n, .icon.icon-arrowstop-n, .icon.icon-arrowstop-n:hover { background-position: -160px 0; }
117   -.selected .icon.icon-arrowstop-e, .icon.icon-arrowstop-e, .icon.icon-arrowstop-e:hover { background-position: -176px 0; }
118   -.selected .icon.icon-arrowstop-s, .icon.icon-arrowstop-s, .icon.icon-arrowstop-s:hover { background-position: -192px 0; }
119   -.selected .icon.icon-arrowstop-w, .icon.icon-arrowstop-w, .icon.icon-arrowstop-w:hover { background-position: -208px 0; }
120   -
121   -/* arrow transfert, shuffle */
122   -.selected .icon.icon-transefr-ew, .icon.icon-transefr-ew, .icon.icon-transefr-ew:hover { background-position: -224px 0; }
123   -.selected .icon.icon-shuffle, .icon.icon-shuffle, .icon.icon-shuffle:hover { background-position: -240px 0; }
124   -
125   -/* carat */
126   -.selected .icon.icon-carat-1-n, .icon.icon-carat-1-n, .icon.icon-carat-1-n:hover { background-position: 0 -16px; }
127   -.selected .icon.icon-carat-1-ne, .icon.icon-carat-1-ne, .icon.icon-carat-1-ne:hover { background-position: -16px -16px; }
128   -.selected .icon.icon-carat-1-e, .icon.icon-carat-1-e, .icon.icon-carat-1-e:hover { background-position: -32px -16px; }
129   -.selected .icon.icon-carat-1-se, .icon.icon-carat-1-se, .icon.icon-carat-1-se:hover { background-position: -48px -16px; }
130   -.selected .icon.icon-carat-1-s, .icon.icon-carat-1-s, .icon.icon-carat-1-s:hover { background-position: -64px -16px; }
131   -.selected .icon.icon-carat-1-sw, .icon.icon-carat-1-sw, .icon.icon-carat-1-sw:hover { background-position: -80px -16px; }
132   -.selected .icon.icon-carat-1-w, .icon.icon-carat-1-w, .icon.icon-carat-1-w:hover { background-position: -96px -16px; }
133   -.selected .icon.icon-carat-1-nw, .icon.icon-carat-1-nw, .icon.icon-carat-1-nw:hover { background-position: -112px -16px; }
134   -.selected .icon.icon-carat-2-ns, .icon.icon-carat-2-ns, .icon.icon-carat-2-ns:hover { background-position: -128px -16px; }
135   -.selected .icon.icon-carat-2-ew , .icon.icon-carat-2-ew , .icon.icon-carat-2-ew :hover { background-position: -144px -16px; }
136   -
137   -/* symbols */
138   -.selected .icon.icon-plus, .icon.icon-plus, .icon.icon-plus:hover { background-position: -160px -16px; }
139   -.selected .icon.icon-minus, .icon.icon-minus, .icon.icon-minus:hover { background-position: -176px -16px; }
140   -.selected .icon.icon-close, .icon.icon-close, .icon.icon-close:hover { background-position: -192px -16px; }
141   -.selected .icon.icon-check, .icon.icon-check, .icon.icon-check:hover { background-position: -208px -16px; }
142   -.selected .icon.icon-help, .icon.icon-help, .icon.icon-help:hover { background-position: -224px -16px; }
143   -.selected .icon.icon-notice, .icon.icon-notice, .icon.icon-notice:hover { background-position: -240px -16px; }
144   -
145   -/* arrow */
146   -.selected .icon.icon-arrow-n, .icon.icon-arrow-n, .icon.icon-arrow-n:hover { background-position: 0 -32px; }
147   -.selected .icon.icon-arrow-ne, .icon.icon-arrow-ne, .icon.icon-arrow-ne:hover { background-position: 16px -32px; }
148   -.selected .icon.icon-arrow-e, .icon.icon-arrow-e, .icon.icon-arrow-e:hover { background-position: -32px -32px; }
149   -.selected .icon.icon-arrow-se, .icon.icon-arrow-se, .icon.icon-arrow-se:hover { background-position: -48px -32px; }
150   -.selected .icon.icon-arrow-s, .icon.icon-arrow-s, .icon.icon-arrow-s:hover { background-position: -64px -32px; }
151   -.selected .icon.icon-arrow-sw, .icon.icon-arrow-sw, .icon.icon-arrow-sw:hover { background-position: -80px -32px; }
152   -.selected .icon.icon-arrow-w, .icon.icon-arrow-w, .icon.icon-arrow-w:hover { background-position: -96px -32px; }
153   -.selected .icon.icon-arrow-nw, .icon.icon-arrow-nw, .icon.icon-arrow-nw:hover { background-position: -112px -32px; }
154   -.selected .icon.icon-arrow-n-s, .icon.icon-arrow-n-s, .icon.icon-arrow-n-s:hover { background-position: -128px -32px; }
155   -.selected .icon.icon-arrow-ne-sw, .icon.icon-arrow-ne-sw, .icon.icon-arrow-ne-sw:hover { background-position: -144px -32px; }
156   -.selected .icon.icon-arrow-e-w, .icon.icon-arrow-e-w, .icon.icon-arrow-e-w:hover { background-position: -160px -32px; }
157   -.selected .icon.icon-arrow-se-nw, .icon.icon-arrow-se-nw, .icon.icon-arrow-se-nw:hover { background-position: -176px -32px; }
158   -
159   -/* arrow dialog */
160   -.selected .icon.icon-arrow-nesw, .icon.icon-arrow-nesw, .icon.icon-arrow-nesw:hover { background-position: -192px -32px; }
161   -.selected .icon.icon-arrow-4diag, .icon.icon-arrow-4diag, .icon.icon-arrow-4diag:hover { background-position: -208px -32px; }
162   -.selected .icon.icon-newwin, .icon.icon-newwin, .icon.icon-newwin:hover { background-position: -224px -32px; }
163   -.selected .icon.icon-extlink, .icon.icon-extlink, .icon.icon-extlink:hover { background-position: -240px -32px; }
164   -
165   -/* arrow thick */
166   -.selected .icon.icon-arrowthick-n, .icon.icon-arrowthick-n, .icon.icon-arrowthick-n:hover { background-position: 0 -48px; }
167   -.selected .icon.icon-arrowthick-ne, .icon.icon-arrowthick-ne, .icon.icon-arrowthick-ne:hover { background-position: -16px -48px; }
168   -.selected .icon.icon-arrowthick-e, .icon.icon-arrowthick-e, .icon.icon-arrowthick-e:hover { background-position: -32px -48px; }
169   -.selected .icon.icon-arrowthick-se, .icon.icon-arrowthick-se, .icon.icon-arrowthick-se:hover { background-position: -48px -48px; }
170   -.selected .icon.icon-arrowthick-s, .icon.icon-arrowthick-s, .icon.icon-arrowthick-s:hover { background-position: -64px -48px; }
171   -.selected .icon.icon-arrowthick-sw, .icon.icon-arrowthick-sw, .icon.icon-arrowthick-sw:hover { background-position: -80px -48px; }
172   -.selected .icon.icon-arrowthick-w, .icon.icon-arrowthick-w, .icon.icon-arrowthick-w:hover { background-position: -96px -48px; }
173   -.selected .icon.icon-arrowthick-nw, .icon.icon-arrowthick-nw, .icon.icon-arrowthick-nw:hover { background-position: -112px -48px; }
174   -
175   -/* arrow return thick */
176   -.selected .icon.icon-undo, .icon.icon-undo, .icon.icon-undo:hover { background-position: -128px -48px; }
177   -.selected .icon.icon-redo, .icon.icon-redo, .icon.icon-redo:hover { background-position: -144px -48px; }
178   -.selected .icon.icon-replyall, .icon.icon-replyall, .icon.icon-replyall:hover { background-position: -160px -48px; }
179   -.selected .icon.icon-refresh, .icon.icon-refresh, .icon.icon-refresh:hover { background-position: -176px -48px; }
180   -
181   -/* bullets */
182   -.selected .icon.icon-bullet-on, .icon.icon-bullet-on, .icon.icon-bullet-on:hover { background-position: -192px -48px; }
183   -.selected .icon.icon-bullet-off, .icon.icon-bullet-off, .icon.icon-bullet-off:hover { background-position: -208px -48px; }
184   -.selected .icon.icon-star-on, .icon.icon-star-on, .icon.icon-star-on:hover { background-position: -224px -48px; }
185   -.selected .icon.icon-star-off, .icon.icon-star-off, .icon.icon-star-off:hover { background-position: -240px -48px; }
186   -
187   -/* arrow return */
188   -.selected .icon.icon-arrowreturn-se, .icon.icon-arrowreturn-se, .icon.icon-arrowreturn-se:hover { background-position: 0 -64px; }
189   -.selected .icon.icon-arrowreturn-sw, .icon.icon-arrowreturn-sw, .icon.icon-arrowreturn-sw:hover { background-position: -16px -64px; }
190   -.selected .icon.icon-arrowreturn-ne, .icon.icon-arrowreturn-ne, .icon.icon-arrowreturn-ne:hover { background-position: -32px -64px; }
191   -.selected .icon.icon-arrowreturn-nw, .icon.icon-arrowreturn-nw, .icon.icon-arrowreturn-nw:hover { background-position: -48px -64px; }
192   -.selected .icon.icon-arrowreturn-ws, .icon.icon-arrowreturn-ws, .icon.icon-arrowreturn-ws:hover { background-position: -64px -64px; }
193   -.selected .icon.icon-arrowreturn-es, .icon.icon-arrowreturn-es, .icon.icon-arrowreturn-es:hover { background-position: -80px -64px; }
194   -.selected .icon.icon-arrowreturn-wn, .icon.icon-arrowreturn-wn, .icon.icon-arrowreturn-wn:hover { background-position: -96px -64px; }
195   -.selected .icon.icon-arrowreturn-en, .icon.icon-arrowreturn-en, .icon.icon-arrowreturn-en:hover { background-position: -112px -64px; }
196   -
197   -/* arrow refresh */
198   -.selected .icon.icon-arrowrefresh-w, .icon.icon-arrowrefresh-w, .icon.icon-arrowrefresh-w:hover { background-position: -128px -64px; }
199   -.selected .icon.icon-arrowrefresh-n, .icon.icon-arrowrefresh-n, .icon.icon-arrowrefresh-n:hover { background-position: -144px -64px; }
200   -.selected .icon.icon-arrowrefresh-e, .icon.icon-arrowrefresh-e, .icon.icon-arrowrefresh-e:hover { background-position: -160px -64px; }
201   -.selected .icon.icon-arrowrefresh-s, .icon.icon-arrowrefresh-s, .icon.icon-arrowrefresh-s:hover { background-position: -176px -64px; }
202   -
203   -/* search, zoom */
204   -.selected .icon.icon-search, .icon.icon-search, .icon.icon-search:hover { background-position: -192px -64px; }
205   -.selected .icon.icon-zoomin, .icon.icon-zoomin, .icon.icon-zoomin:hover { background-position: -208px -64px; }
206   -.selected .icon.icon-zoomout, .icon.icon-zoomout, .icon.icon-zoomout:hover { background-position: -224px -64px; }
207   -
208   -/* rss */
209   -.selected .icon.icon-rssfeed, .icon.icon-rssfeed, .icon.icon-rssfeed:hover { background-position: -240px -64px; }
210   -
211   -/* user */
212   -.selected .icon.icon-home, .icon.icon-home, .icon.icon-home:hover { background-position: 0 -80px; }
213   -.selected .icon.icon-user, .icon.icon-user, .icon.icon-user:hover { background-position: -16px -80px; }
214   -.selected .icon.icon-print, .icon.icon-print, .icon.icon-print:hover { background-position: -32px -80px; }
215   -.selected .icon.icon-save, .icon.icon-save, .icon.icon-save:hover { background-position: -48px -80px; }
216   -.selected .icon.icon-book, .icon.icon-book, .icon.icon-book:hover { background-position: -64px -80px; }
217   -.selected .icon.icon-book2, .icon.icon-book2, .icon.icon-book2:hover { background-position: -80px -80px; }
218   -.selected .icon.icon-folder-collapsed, .icon.icon-folder-collapsed, .icon.icon-folder-collapsed:hover { background-position: -96px -80px; }
219   -.selected .icon.icon-folder-open, .icon.icon-folder-open, .icon.icon-folder-open:hover { background-position: -112px -80px; }
220   -
221   -/* bookmark */
222   -.selected .icon.icon-flag, .icon.icon-flag, .icon.icon-flag:hover { background-position: -128px -80px; }
223   -.selected .icon.icon-bookmark, .icon.icon-bookmark, .icon.icon-bookmark:hover { background-position: -144px -80px; }
224   -.selected .icon.icon-heart, .icon.icon-heart, .icon.icon-heart:hover { background-position: -160px -80px; }
225   -
226   -/* cancel */
227   -.selected .icon.icon-cancel, .icon.icon-cancel, .icon.icon-cancel:hover { background-position: -176px -80px; }
228   -.selected .icon.icon-trash, .icon.icon-trash, .icon.icon-trash:hover { background-position: -192px -80px; }
229   -
230   -/* tag */
231   -.selected .icon.icon-pin, .icon.icon-pin, .icon.icon-pin:hover { background-position: -208px -80px; }
232   -.selected .icon.icon-tag, .icon.icon-tag, .icon.icon-tag:hover { background-position: -224px -80px; }
233   -.selected .icon.icon-lightbulb, .icon.icon-lightbulb, .icon.icon-lightbulb:hover { background-position: -240px -80px; }
234   -
235   -/* settings */
236   -.selected .icon.icon-gear, .icon.icon-gear, .icon.icon-gear:hover { background-position: 0 -96px; }
237   -.selected .icon.icon-wrench, .icon.icon-wrench, .icon.icon-wrench:hover { background-position: -16px -96px; }
238   -.selected .icon.icon-locked, .icon.icon-locked, .icon.icon-locked:hover { background-position: -32px -96px; }
239   -.selected .icon.icon-unlocked, .icon.icon-unlocked, .icon.icon-unlocked:hover { background-position: -48px -96px; }
240   -.selected .icon.icon-key, .icon.icon-key, .icon.icon-key:hover { background-position: -64px -96px; }
241   -
242   -/* office */
243   -.selected .icon.icon-clipboard, .icon.icon-clipboard, .icon.icon-clipboard:hover { background-position: -80px -96px; }
244   -.selected .icon.icon-scissors, .icon.icon-scissors, .icon.icon-scissors:hover { background-position: -96px -96px; }
245   -.selected .icon.icon-edit, .icon.icon-edit, .icon.icon-edit:hover { background-position: -112px -96px; }
246   -.selected .icon.icon-page, .icon.icon-page, .icon.icon-page:hover { background-position: -128px -96px; }
247   -.selected .icon.icon-copy, .icon.icon-copy, .icon.icon-copy:hover { background-position: -144px -96px; }
248   -.selected .icon.icon-note, .icon.icon-note, .icon.icon-note:hover { background-position: -160px -96px; }
249   -.selected .icon.icon-pdf, .icon.icon-pdf, .icon.icon-pdf:hover { background-position: -176px -96px; }
250   -.selected .icon.icon-doc, .icon.icon-doc, .icon.icon-doc:hover { background-position: -192px -96px; }
251   -.selected .icon.icon-xls, .icon.icon-xls, .icon.icon-xls:hover { background-position: -208px -96px; }
252   -.selected .icon.icon-document, .icon.icon-document, .icon.icon-document:hover { background-position: -224px -96px; }
253   -.selected .icon.icon-script, .icon.icon-script, .icon.icon-script:hover { background-position: -240px -96px; }
254   -
255   -.selected .icon.icon-calendar, .icon.icon-calendar, .icon.icon-calendar:hover { background-position: 0 -112px; }
256   -.selected .icon.icon-calendar2, .icon.icon-calendar2, .icon.icon-calendar2:hover { background-position: -16px -112px; }
257   -.selected .icon.icon-clock, .icon.icon-clock, .icon.icon-clock:hover { background-position: -32px -112px; }
258   -.selected .icon.icon-mail-closed, .icon.icon-mail-closed, .icon.icon-mail-closed:hover { background-position: -48px -112px; }
259   -.selected .icon.icon-mail-open, .icon.icon-mail-open, .icon.icon-mail-open:hover { background-position: -64px -112px; }
260   -.selected .icon.icon-mail2-closed, .icon.icon-mail2-closed, .icon.icon-mail2-closed:hover { background-position: -80px -112px; }
261   -.selected .icon.icon-mail2-open, .icon.icon-mail2-open, .icon.icon-mail2-open:hover { background-position: -96px -112px; }
262   -.selected .icon.icon-link, .icon.icon-link, .icon.icon-link:hover { background-position: -112px -112px; }
263   -.selected .icon.icon-unlink, .icon.icon-unlink, .icon.icon-unlink:hover { background-position: -128px -112px; }
264   -.selected .icon.icon-web, .icon.icon-web, .icon.icon-web:hover { background-position: -144px -112px; }
265   -.selected .icon.icon-web2, .icon.icon-web2, .icon.icon-web2:hover { background-position: -160px -112px; }
266   -.selected .icon.icon-contacts, .icon.icon-contacts, .icon.icon-contacts:hover { background-position: -176px -112px; }
267   -.selected .icon.icon-profile, .icon.icon-profile, .icon.icon-profile:hover { background-position: -192px -112px; }
268   -.selected .icon.icon-image, .icon.icon-image, .icon.icon-image:hover { background-position: -208px -112px; }
269   -.selected .icon.icon-suitcase, .icon.icon-suitcase, .icon.icon-suitcase:hover { background-position: -224px -112px; }
270   -.selected .icon.icon-suitcase2, .icon.icon-suitcase2, .icon.icon-suitcase2:hover { background-position: -240px -112px; }
271   -
272   -/* circle symbols */
273   -.selected .icon.icon-close, .icon.icon-close, .icon.icon-close:hover { background-position: 0 -128px; }
274   -.selected .icon.icon-add, .icon.icon-add, .icon.icon-add:hover { background-position: -16px -128px; }
275   -.selected .icon.icon-remove, .icon.icon-remove, .icon.icon-remove:hover { background-position: -32px -128px; }
276   -.selected .icon.icon-info, .icon.icon-info, .icon.icon-info:hover { background-position: -48px -128px; }
277   -
278   -/* alert */
279   -.selected .icon.icon-alert, .icon.icon-alert, .icon.icon-alert:hover { background-position: -64px -128px; }
280   -
281   -/* comments */
282   -.selected .icon.icon-comment-text, .icon.icon-comment-text, .icon.icon-comment-text:hover { background-position: -80px -128px; }
283   -.selected .icon.icon-comment-video, .icon.icon-comment-video, .icon.icon-comment-video:hover { background-position: -96px -128px; }
284   -.selected .icon.icon-comment, .icon.icon-comment, .icon.icon-comment:hover { background-position: -112px -128px; }
285   -
286   -/* shopping */
287   -.selected .icon.icon-cart, .icon.icon-cart, .icon.icon-cart:hover { background-position: -128px -128px; }
288   -.selected .icon.icon-basket, .icon.icon-basket, .icon.icon-basket:hover { background-position: -144px -128px; }
289   -
290   -/* media */
291   -.selected .icon.icon-messages, .icon.icon-messages, .icon.icon-messages:hover { background-position: -160px -128px; }
292   -.selected .icon.icon-users, .icon.icon-users, .icon.icon-users:hover { background-position: -176px -128px; }
293   -.selected .icon.icon-video, .icon.icon-video, .icon.icon-video:hover { background-position: -192px -128px; }
294   -.selected .icon.icon-audio, .icon.icon-audio, .icon.icon-audio:hover { background-position: -208px -128px; }
295   -.selected .icon.icon-volume-off, .icon.icon-volume-off, .icon.icon-volume-off:hover { background-position: -224px -128px; }
296   -.selected .icon.icon-volume-on, .icon.icon-volume-on, .icon.icon-volume-on:hover { background-position: -240px -128px; }
297   -
298   -/* mail */
299   -.selected .icon.icon-compose, .icon.icon-compose, .icon.icon-compose:hover { background-position: 0 -144px; }
300   -.selected .icon.icon-inbox, .icon.icon-inbox, .icon.icon-inbox:hover { background-position: -16px -144px; }
301   -.selected .icon.icon-archive, .icon.icon-archive, .icon.icon-archive:hover { background-position: -32px -144px; }
302   -.selected .icon.icon-reply, .icon.icon-reply, .icon.icon-reply:hover { background-position: -48px -144px; }
303   -.selected .icon.icon-sent, .icon.icon-sent, .icon.icon-sent:hover { background-position: -64px -144px; }
304   -.selected .icon.icon-attachement, .icon.icon-attachement, .icon.icon-attachement:hover { background-position: -80px -144px; }
305   -
306   -@private
307   -icon32 = css
308   -
309   -/* ---------------- Icons 32px ---------------- */
310   -/* Default 32px gray icon for light backgrounds */
311   -.icon32 {
312   - width: 32px;
313   - height: 32px;
314   - background: {get_img("icons32-gray.png")} no-repeat;
315   - background-repeat: no-repeat;
316   - display: inline-block;
317   - vertical-align: top;
318   -}
319   -.icon32:hover {background: {get_img("icons32-darkGray.png")} no-repeat;}
320   -
321   -/* Color icon for active, selected for light backgrounds */
322   -.selected .icon32 {background: {get_img("icons32-color.png")} no-repeat;}
323   -
324   -/* White icons for vivid and dark backgrounds */
325   -.icon32.icon-white {background: {get_img("icons32-white.png")} no-repeat;}
326   -
327   -/* Black icons for gray backgrounds */
328   -.icon32.icon-black {background: {get_img("icons32-black.png")} no-repeat;}
329   -
330   -/* positioning */
331   -/* triangle */
332   -.selected .icon32.icon-triangle-n, .icon32.icon-triangle-n, .icon32.icon-triangle-n:hover { background-position: 0 0; }
333   -.selected .icon32.icon-triangle-ne, .icon32.icon-triangle-ne, .icon32.icon-triangle-ne:hover { background-position: -32px 0; }
334   -.selected .icon32.icon-triangle-e, .icon32.icon-triangle-e, .icon32.icon-triangle-e:hover { background-position: -64px 0; }
335   -.selected .icon32.icon-triangle-se, .icon32.icon-triangle-se, .icon32.icon-triangle-se:hover { background-position: -96px 0; }
336   -.selected .icon32.icon-triangle-s, .icon32.icon-triangle-s, .icon32.icon-triangle-s:hover { background-position: -128px 0; }
337   -.selected .icon32.icon-triangle-sw, .icon32.icon-triangle-sw, .icon32.icon-triangle-sw:hover { background-position: -160px 0; }
338   -.selected .icon32.icon-triangle-w, .icon32.icon-triangle-w, .icon32.icon-triangle-w:hover { background-position: -192px 0; }
339   -.selected .icon32.icon-triangle-nw, .icon32.icon-triangle-nw, .icon32.icon-triangle-nw:hover { background-position: -224px 0; }
340   -.selected .icon32.icon-triangle-ns, .icon32.icon-triangle-ns, .icon32.icon-triangle-ns:hover { background-position: -256px 0; }
341   -.selected .icon32.icon-triangle-ew, .icon32.icon-triangle-ew, .icon32.icon-triangle-ew:hover { background-position: -288px 0; }
342   -
343   -/* arrow stop */
344   -.selected .icon32.icon-arrowstop-n, .icon32.icon-arrowstop-n, .icon32.icon-arrowstop-n:hover { background-position: -320px 0; }
345   -.selected .icon32.icon-arrowstop-e, .icon32.icon-arrowstop-e, .icon32.icon-arrowstop-e:hover { background-position: -352px 0; }
346   -.selected .icon32.icon-arrowstop-s, .icon32.icon-arrowstop-s, .icon32.icon-arrowstop-s:hover { background-position: -384px 0; }
347   -.selected .icon32.icon-arrowstop-w, .icon32.icon-arrowstop-w, .icon32.icon-arrowstop-w:hover { background-position: -416px 0; }
348   -
349   -/* arrow transfert, shuffle */
350   -.selected .icon32.icon-transefr-ew, .icon32.icon-transefr-ew, .icon32.icon-transefr-ew:hover { background-position: -448px 0; }
351   -.selected .icon32.icon-shuffle, .icon32.icon-shuffle, .icon32.icon-shuffle:hover { background-position: -480px 0; }
352   -
353   -/* carat */
354   -.selected .icon32.icon-carat-n, .icon32.icon-carat-n, .icon32.icon-carat-n:hover { background-position: 0 -32px; }
355   -.selected .icon32.icon-carat-ne, .icon32.icon-carat-ne, .icon32.icon-carat-ne:hover { background-position: -32px -32px; }
356   -.selected .icon32.icon-carat-e, .icon32.icon-carat-e, .icon32.icon-carat-e:hover { background-position: -64px -32px; }
357   -.selected .icon32.icon-carat-se, .icon32.icon-carat-se, .icon32.icon-carat-se:hover { background-position: -96px -32px; }
358   -.selected .icon32.icon-carat-s, .icon32.icon-carat-s, .icon32.icon-carat-s:hover { background-position: -128px -32px; }
359   -.selected .icon32.icon-carat-sw, .icon32.icon-carat-sw, .icon32.icon-carat-sw:hover { background-position: -160px -32px; }
360   -.selected .icon32.icon-carat-w, .icon32.icon-carat-w, .icon32.icon-carat-w:hover { background-position: -192px -32px; }
361   -.selected .icon32.icon-carat-nw, .icon32.icon-carat-nw, .icon32.icon-carat-nw:hover { background-position: -224px -32px; }
362   -.selected .icon32.icon-carat-ns, .icon32.icon-carat-ns, .icon32.icon-carat-ns:hover { background-position: -256px -32px; }
363   -.selected .icon32.icon-carat-ew , .icon32.icon-carat-ew , .icon32.icon-carat-ew :hover { background-position: -288px -32px; }
364   -
365   -/* symbols */
366   -.selected .icon32.icon-plus, .icon32.icon-plus, .icon32.icon-plus:hover { background-position: -320px -32px; }
367   -.selected .icon32.icon-minus, .icon32.icon-minus, .icon32.icon-minus:hover { background-position: -352px -32px; }
368   -.selected .icon32.icon-close, .icon32.icon-close, .icon32.icon-close:hover { background-position: -384px -32px; }
369   -.selected .icon32.icon-check, .icon32.icon-check, .icon32.icon-check:hover { background-position: -416px -32px; }
370   -.selected .icon32.icon-help, .icon32.icon-help, .icon32.icon-help:hover { background-position: -448px -32px; }
371   -.selected .icon32.icon-notice, .icon32.icon-notice, .icon32.icon-notice:hover { background-position: -480px -32px; }
372   -
373   -/* arrow */
374   -.selected .icon32.icon-arrow-n, .icon32.icon-arrow-n, .icon32.icon-arrow-n:hover { background-position: 0 -64px; }
375   -.selected .icon32.icon-arrow-ne, .icon32.icon-arrow-ne, .icon32.icon-arrow-ne:hover { background-position: 16px -64px; }
376   -.selected .icon32.icon-arrow-e, .icon32.icon-arrow-e, .icon32.icon-arrow-e:hover { background-position: -64px -64px; }
377   -.selected .icon32.icon-arrow-se, .icon32.icon-arrow-se, .icon32.icon-arrow-se:hover { background-position: -96px -64px; }
378   -.selected .icon32.icon-arrow-s, .icon32.icon-arrow-s, .icon32.icon-arrow-s:hover { background-position: -128px -64px; }
379   -.selected .icon32.icon-arrow-sw, .icon32.icon-arrow-sw, .icon32.icon-arrow-sw:hover { background-position: -160px -64px; }
380   -.selected .icon32.icon-arrow-w, .icon32.icon-arrow-w, .icon32.icon-arrow-w:hover { background-position: -192px -64px; }
381   -.selected .icon32.icon-arrow-nw, .icon32.icon-arrow-nw, .icon32.icon-arrow-nw:hover { background-position: -224px -64px; }
382   -.selected .icon32.icon-arrow-n-s, .icon32.icon-arrow-n-s, .icon32.icon-arrow-n-s:hover { background-position: -256px -64px; }
383   -.selected .icon32.icon-arrow-ne-sw, .icon32.icon-arrow-ne-sw, .icon32.icon-arrow-ne-sw:hover { background-position: -288px -64px; }
384   -.selected .icon32.icon-arrow-e-w, .icon32.icon-arrow-e-w, .icon32.icon-arrow-e-w:hover { background-position: -320px -64px; }
385   -.selected .icon32.icon-arrow-se-nw, .icon32.icon-arrow-se-nw, .icon32.icon-arrow-se-nw:hover { background-position: -352px -64px; }
386   -
387   -/* arrow dialog */
388   -.selected .icon32.icon-arrow-nesw, .icon32.icon-arrow-nesw, .icon32.icon-arrow-nesw:hover { background-position: -384px -64px; }
389   -.selected .icon32.icon-arrow-4diag, .icon32.icon-arrow-4diag, .icon32.icon-arrow-4diag:hover { background-position: -416px -64px; }
390   -.selected .icon32.icon-newwin, .icon32.icon-newwin, .icon32.icon-newwin:hover { background-position: -448px -64px; }
391   -.selected .icon32.icon-extlink, .icon32.icon-extlink, .icon32.icon-extlink:hover { background-position: -480px -64px; }
392   -
393   -/* arrow thick */
394   -.selected .icon32.icon-arrowthick-n, .icon32.icon-arrowthick-n, .icon32.icon-arrowthick-n:hover { background-position: 0 -96px; }
395   -.selected .icon32.icon-arrowthick-ne, .icon32.icon-arrowthick-ne, .icon32.icon-arrowthick-ne:hover { background-position: -32px -96px; }
396   -.selected .icon32.icon-arrowthick-e, .icon32.icon-arrowthick-e, .icon32.icon-arrowthick-e:hover { background-position: -64px -96px; }
397   -.selected .icon32.icon-arrowthick-se, .icon32.icon-arrowthick-se, .icon32.icon-arrowthick-se:hover { background-position: -96px -96px; }
398   -.selected .icon32.icon-arrowthick-s, .icon32.icon-arrowthick-s, .icon32.icon-arrowthick-s:hover { background-position: -128px -96px; }
399   -.selected .icon32.icon-arrowthick-sw, .icon32.icon-arrowthick-sw, .icon32.icon-arrowthick-sw:hover { background-position: -160px -96px; }
400   -.selected .icon32.icon-arrowthick-w, .icon32.icon-arrowthick-w, .icon32.icon-arrowthick-w:hover { background-position: -192px -96px; }
401   -.selected .icon32.icon-arrowthick-nw, .icon32.icon-arrowthick-nw, .icon32.icon-arrowthick-nw:hover { background-position: -224px -96px; }
402   -
403   -/* arrow return thick */
404   -.selected .icon32.icon-undo, .icon32.icon-undo, .icon32.icon-undo:hover { background-position: -256px -96px; }
405   -.selected .icon32.icon-redo, .icon32.icon-redo, .icon32.icon-redo:hover { background-position: -288px -96px; }
406   -.selected .icon32.icon-replyall, .icon32.icon-replyall, .icon32.icon-replyall:hover { background-position: -320px -96px; }
407   -.selected .icon32.icon-refresh, .icon32.icon-refresh, .icon32.icon-refresh:hover { background-position: -352px -96px; }
408   -
409   -/* bullets */
410   -.selected .icon32.icon-bullet-on, .icon32.icon-bullet-on, .icon32.icon-bullet-on:hover { background-position: -384px -96px; }
411   -.selected .icon32.icon-bullet-off, .icon32.icon-bullet-off, .icon32.icon-bullet-off:hover { background-position: -416px -96px; }
412   -.selected .icon32.icon-star-on, .icon32.icon-star-on, .icon32.icon-star-on:hover { background-position: -448px -96px; }
413   -.selected .icon32.icon-star-off, .icon32.icon-star-off, .icon32.icon-star-off:hover { background-position: -480px -96px; }
414   -
415   -/* arrow return */
416   -.selected .icon32.icon-arrowreturn-se, .icon32.icon-arrowreturn-se, .icon32.icon-arrowreturn-se:hover { background-position: 0 -128px; }
417   -.selected .icon32.icon-arrowreturn-sw, .icon32.icon-arrowreturn-sw, .icon32.icon-arrowreturn-sw:hover { background-position: -32px -128px; }
418   -.selected .icon32.icon-arrowreturn-ne, .icon32.icon-arrowreturn-ne, .icon32.icon-arrowreturn-ne:hover { background-position: -64px -128px; }
419   -.selected .icon32.icon-arrowreturn-nw, .icon32.icon-arrowreturn-nw, .icon32.icon-arrowreturn-nw:hover { background-position: -96px -128px; }
420   -.selected .icon32.icon-arrowreturn-ws, .icon32.icon-arrowreturn-ws, .icon32.icon-arrowreturn-ws:hover { background-position: -128px -128px; }
421   -.selected .icon32.icon-arrowreturn-es, .icon32.icon-arrowreturn-es, .icon32.icon-arrowreturn-es:hover { background-position: -160px -128px; }
422   -.selected .icon32.icon-arrowreturn-wn, .icon32.icon-arrowreturn-wn, .icon32.icon-arrowreturn-wn:hover { background-position: -192px -128px; }
423   -.selected .icon32.icon-arrowreturn-en, .icon32.icon-arrowreturn-en, .icon32.icon-arrowreturn-en:hover { background-position: -224px -128px; }
424   -
425   -/* arrow refresh */
426   -.selected .icon32.icon-arrowrefresh-w, .icon32.icon-arrowrefresh-w, .icon32.icon-arrowrefresh-w:hover { background-position: -256px -128px; }
427   -.selected .icon32.icon-arrowrefresh-n, .icon32.icon-arrowrefresh-n, .icon32.icon-arrowrefresh-n:hover { background-position: -288px -128px; }
428   -.selected .icon32.icon-arrowrefresh-e, .icon32.icon-arrowrefresh-e, .icon32.icon-arrowrefresh-e:hover { background-position: -320px -128px; }
429   -.selected .icon32.icon-arrowrefresh-s, .icon32.icon-arrowrefresh-s, .icon32.icon-arrowrefresh-s:hover { background-position: -352px -128px; }
430   -
431   -/* search, zoom */
432   -.selected .icon32.icon-search, .icon32.icon-search, .icon32.icon-search:hover { background-position: -384px -128px; }
433   -.selected .icon32.icon-zoomin, .icon32.icon-zoomin, .icon32.icon-zoomin:hover { background-position: -416px -128px; }
434   -.selected .icon32.icon-zoomout, .icon32.icon-zoomout, .icon32.icon-zoomout:hover { background-position: -448px -128px; }
435   -
436   -/* rss */
437   -.selected .icon32.icon-rssfeed, .icon32.icon-rssfeed, .icon32.icon-rssfeed:hover { background-position: -480px -128px; }
438   -
439   -/* user */
440   -.selected .icon32.icon-home, .icon32.icon-home, .icon32.icon-home:hover { background-position: 0 -160px; }
441   -.selected .icon32.icon-user, .icon32.icon-user, .icon32.icon-user:hover { background-position: -32px -160px; }
442   -.selected .icon32.icon-print, .icon32.icon-print, .icon32.icon-print:hover { background-position: -64px -160px; }
443   -.selected .icon32.icon-save, .icon32.icon-save, .icon32.icon-save:hover { background-position: -96px -160px; }
444   -.selected .icon32.icon-book, .icon32.icon-book, .icon32.icon-book:hover { background-position: -128px -160px; }
445   -.selected .icon32.icon-book2, .icon32.icon-book2, .icon32.icon-book2:hover { background-position: -160px -160px; }
446   -.selected .icon32.icon-folder-collapsed, .icon32.icon-folder-collapsed, .icon32.icon-folder-collapsed:hover { background-position: -192px -160px; }
447   -.selected .icon32.icon-folder-open, .icon32.icon-folder-open, .icon32.icon-folder-open:hover { background-position: -224px -160px; }
448   -
449   -/* bookmark */
450   -.selected .icon32.icon-flag, .icon32.icon-flag, .icon32.icon-flag:hover { background-position: -256px -160px; }
451   -.selected .icon32.icon-bookmark, .icon32.icon-bookmark, .icon32.icon-bookmark:hover { background-position: -288px -160px; }
452   -.selected .icon32.icon-heart, .icon32.icon-heart, .icon32.icon-heart:hover { background-position: -320px -160px; }
453   -
454   -/* cancel */
455   -.selected .icon32.icon-cancel, .icon32.icon-cancel, .icon32.icon-cancel:hover { background-position: -352px -160px; }
456   -.selected .icon32.icon-trash, .icon32.icon-trash, .icon32.icon-trash:hover { background-position: -384px -160px; }
457   -
458   -/* tag */
459   -.selected .icon32.icon-pin, .icon32.icon-pin, .icon32.icon-pin:hover { background-position: -416px -160px; }
460   -.selected .icon32.icon-tag, .icon32.icon-tag, .icon32.icon-tag:hover { background-position: -448px -160px; }
461   -.selected .icon32.icon-lightbulb, .icon32.icon-lightbulb, .icon32.icon-lightbulb:hover { background-position: -480px -160px; }
462   -
463   -/* settings */
464   -.selected .icon32.icon-gear, .icon32.icon-gear, .icon32.icon-gear:hover { background-position: 0 -192px; }
465   -.selected .icon32.icon-wrench, .icon32.icon-wrench, .icon32.icon-wrench:hover { background-position: -32px -192px; }
466   -.selected .icon32.icon-locked, .icon32.icon-locked, .icon32.icon-locked:hover { background-position: -64px -192px; }
467   -.selected .icon32.icon-unlocked, .icon32.icon-unlocked, .icon32.icon-unlocked:hover { background-position: -96px -192px; }
468   -.selected .icon32.icon-key, .icon32.icon-key, .icon32.icon-key:hover { background-position: -128px -192px; }
469   -
470   -/* office */
471   -.selected .icon32.icon-clipboard, .icon32.icon-clipboard, .icon32.icon-clipboard:hover { background-position: -160px -192px; }
472   -.selected .icon32.icon-scissors, .icon32.icon-scissors, .icon32.icon-scissors:hover { background-position: -192px -192px; }
473   -.selected .icon32.icon-edit, .icon32.icon-edit, .icon32.icon-edit:hover { background-position: -224px -192px; }
474   -.selected .icon32.icon-page, .icon32.icon-page, .icon32.icon-page:hover { background-position: -256px -192px; }
475   -.selected .icon32.icon-copy, .icon32.icon-copy, .icon32.icon-copy:hover { background-position: -288px -192px; }
476   -.selected .icon32.icon-note, .icon32.icon-note, .icon32.icon-note:hover { background-position: -320px -192px; }
477   -.selected .icon32.icon-pdf, .icon32.icon-pdf, .icon32.icon-pdf:hover { background-position: -352px -192px; }
478   -.selected .icon32.icon-doc, .icon32.icon-doc, .icon32.icon-doc:hover { background-position: -384px -192px; }
479   -.selected .icon32.icon-xls, .icon32.icon-xls, .icon32.icon-xls:hover { background-position: -416px -192px; }
480   -.selected .icon32.icon-document, .icon32.icon-document, .icon32.icon-document:hover { background-position: -448px -192px; }
481   -.selected .icon32.icon-script, .icon32.icon-script, .icon32.icon-script:hover { background-position: -480px -192px; }
482   -
483   -.selected .icon32.icon-calendar, .icon32.icon-calendar, .icon32.icon-calendar:hover { background-position: 0 -224px; }
484   -.selected .icon32.icon-calendar2, .icon32.icon-calendar2, .icon32.icon-calendar2:hover { background-position: -32px -224px; }
485   -.selected .icon32.icon-clock, .icon32.icon-clock, .icon32.icon-clock:hover { background-position: -64px -224px; }
486   -.selected .icon32.icon-mail-closed, .icon32.icon-mail-closed, .icon32.icon-mail-closed:hover { background-position: -96px -224px; }
487   -.selected .icon32.icon-mail-open, .icon32.icon-mail-open, .icon32.icon-mail-open:hover { background-position: -128px -224px; }
488   -.selected .icon32.icon-mail2-closed, .icon32.icon-mail2-closed, .icon32.icon-mail2-closed:hover { background-position: -160px -224px; }
489   -.selected .icon32.icon-mail2-open, .icon32.icon-mail2-open, .icon32.icon-mail2-open:hover { background-position: -192px -224px; }
490   -.selected .icon32.icon-link, .icon32.icon-link, .icon32.icon-link:hover { background-position: -224px -224px; }
491   -.selected .icon32.icon-unlink, .icon32.icon-unlink, .icon32.icon-unlink:hover { background-position: -256px -224px; }
492   -.selected .icon32.icon-web, .icon32.icon-web, .icon32.icon-web:hover { background-position: -288px -224px; }
493   -.selected .icon32.icon-web2, .icon32.icon-web2, .icon32.icon-web2:hover { background-position: -320px -224px; }
494   -.selected .icon32.icon-contacts, .icon32.icon-contacts, .icon32.icon-contacts:hover { background-position: -352px -224px; }
495   -.selected .icon32.icon-profile, .icon32.icon-profile, .icon32.icon-profile:hover { background-position: -384px -224px; }
496   -.selected .icon32.icon-image, .icon32.icon-image, .icon32.icon-image:hover { background-position: -416px -224px; }
497   -.selected .icon32.icon-suitcase, .icon32.icon-suitcase, .icon32.icon-suitcase:hover { background-position: -448px -224px; }
498   -.selected .icon32.icon-suitcase2, .icon32.icon-suitcase2, .icon32.icon-suitcase2:hover { background-position: -480px -224px; }
499   -
500   -/* circle symbols */
501   -.selected .icon32.icon-close, .icon32.icon-close, .icon32.icon-close:hover { background-position: 0 -256px; }
502   -.selected .icon32.icon-add, .icon32.icon-add, .icon32.icon-add:hover { background-position: -32px -256px; }
503   -.selected .icon32.icon-remove, .icon32.icon-remove, .icon32.icon-remove:hover { background-position: -64px -256px; }
504   -.selected .icon32.icon-info, .icon32.icon-info, .icon32.icon-info:hover { background-position: -96px -256px; }
505   -
506   -/* alert */
507   -.selected .icon32.icon-alert, .icon32.icon-alert, .icon32.icon-alert:hover { background-position: -128px -256px; }
508   -
509   -/* comments */
510   -.selected .icon32.icon-comment-text, .icon32.icon-comment-text, .icon32.icon-comment-text:hover { background-position: -160px -256px; }
511   -.selected .icon32.icon-comment-video, .icon32.icon-comment-video, .icon32.icon-comment-video:hover { background-position: -192px -256px; }
512   -.selected .icon32.icon-comment, .icon32.icon-comment, .icon32.icon-comment:hover { background-position: -224px -256px; }
513   -
514   -/* shopping */
515   -.selected .icon32.icon-cart, .icon32.icon-cart, .icon32.icon-cart:hover { background-position: -256px -256px; }
516   -.selected .icon32.icon-basket, .icon32.icon-basket, .icon32.icon-basket:hover { background-position: -288px -256px; }
517   -
518   -/* media */
519   -.selected .icon32.icon-messages, .icon32.icon-messages, .icon32.icon-messages:hover { background-position: -320px -256px; }
520   -.selected .icon32.icon-users, .icon32.icon-users, .icon32.icon-users:hover { background-position: -352px -256px; }
521   -.selected .icon32.icon-video, .icon32.icon-video, .icon32.icon-video:hover { background-position: -384px -256px; }
522   -.selected .icon32.icon-audio, .icon32.icon-audio, .icon32.icon-audio:hover { background-position: -416px -256px; }
523   -.selected .icon32.icon-volume-off, .icon32.icon-volume-off, .icon32.icon-volume-off:hover { background-position: -448px -256px; }
524   -.selected .icon32.icon-volume-on, .icon32.icon-volume-on, .icon32.icon-volume-on:hover { background-position: -480px -256px; }
525   -
526   -/* mail */
527   -.selected .icon32.icon-compose, .icon32.icon-compose, .icon32.icon-compose:hover { background-position: 0 -288px; }
528   -.selected .icon32.icon-inbox, .icon32.icon-inbox, .icon32.icon-inbox:hover { background-position: -32px -288px; }
529   -.selected .icon32.icon-archive, .icon32.icon-archive, .icon32.icon-archive:hover { background-position: -64px -288px; }
530   -.selected .icon32.icon-reply, .icon32.icon-reply, .icon32.icon-reply:hover { background-position: -96px -288px; }
531   -.selected .icon32.icon-sent, .icon32.icon-sent, .icon32.icon-sent:hover { background-position: -128px -288px; }
532   -.selected .icon32.icon-attachement, .icon32.icon-attachement, .icon32.icon-attachement:hover { background-position: -160px -288px; }
533   -
534   -/* register resources */
535   -
536   -_ = Client_code.register_css_declaration([icon16,icon32])
537   -
538   -@private
539   -compute_version_url(v:string) =
540   - // Old URL
541   - if String.le(v, "1.2.0") then "http://twitter.github.com/bootstrap/assets/css/bootstrap-{v}.min.css"
542   - // New URL
543   - else "http://twitter.github.com/bootstrap/{v}/bootstrap.min.css"
544   -
545   -@private
546   -version = ServerReference.create("1.1.1") : reference(string)
547   -_ = Resource.register_external_css(compute_version_url(Reference.get(version)))
548   -
549   -Bootstrap = {{
550   - unimport() =
551   - Resource.unregister_external_css(compute_version_url(Reference.get(version)))
552   - import(v:string) =
553   - // unregister the previous registered version
554   - do unimport()
555   - // set and register the new version to import
556   - do Reference.set(version, v)
557   - Resource.register_external_css(compute_version_url(v))
558   -}}
  50 +do Resource.register_external_css(current_bootstrap_url)
31 stdlib/themes/bootstrap/v1_1_1/style.opa
... ... @@ -0,0 +1,31 @@
  1 +/*
  2 + Copyright © 2011 MLstate
  3 +
  4 + This file is part of OPA.
  5 +
  6 + OPA is free software: you can redistribute it and/or modify it under the
  7 + terms of the GNU Affero General Public License, version 3, as published by
  8 + the Free Software Foundation.
  9 +
  10 + OPA is distributed in the hope that it will be useful, but WITHOUT ANY
  11 + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
  12 + FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for
  13 + more details.
  14 +
  15 + You should have received a copy of the GNU Affero General Public License
  16 + along with OPA. If not, see <http://www.gnu.org/licenses/>.