You are here

l10n_client_ui.css in Localization client 8

/* Tab appearance. */
.toolbar .toolbar-bar .l10n_client_ui-toolbar-tab.toolbar-tab {
  float: right; /* LTR */
}
[dir="rtl"] .toolbar .toolbar-bar .l10n_client_ui-toolbar-tab.toolbar-tab {
  float: left;
}
.toolbar .toolbar-bar .l10n_client_ui-toolbar-tab .toolbar-item {
  margin: 0;
}
[dir="rtl"] .toolbar .toolbar-bar .l10n_client_ui-toolbar-tab .toolbar-item {
  padding-right: 1.3333em;
}
.toolbar .l10n_client_ui-toolbar-tab button.active {
  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%);
  background-image: linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%);
}
.l10n_client_ui-toolbar-tab button:focus {
  outline: thin dotted;
}
.toolbar-bar .toolbar-icon-l10n_client_ui:before {
  background-image: url(../images/translate_icon_bebebe.svg);
}
.toolbar-bar .toolbar-icon-l10n_client_ui:active:before,
.toolbar-bar .toolbar-icon-l10n_client_ui:before {
  background-image: url(../images/translate_icon_ffffff.svg);
}

/* @todo Remove once https://drupal.org/node/1916690 is resolved. */
.toolbar .l10n_client_ui-toolbar-tab.toolbar-tab.hidden {
  display: none;
}

.l10n_client_ui--container {
  display: none;
}
.l10n_client_ui--container .ui-dialog {
  display: block;
}
.l10n_client_ui--container #edit-list {
  overflow-y: scroll;
  height: 180px;
  clear: both;
}
.l10n_client_ui--source-string,
.l10n_client_ui--translation-string {
  width: 40%;
}
.l10n_client_ui--skip,
.l10n_client_ui--save {
  width: 40px;
  text-indent: -200px;
  overflow: hidden;
  background-image: url(../images/remove_595959.svg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.l10n_client_ui--save {
  background-image: url(../images/check_bebebe.svg);
}
.l10n_client_ui--save.activated {
  background-image: url(../images/check_0074bd.svg);
}
.l10n_client_ui--save.saving {
  background-image: url(../images/check_77b259.svg);
}

.l10n_client_ui--container .form-item-type,
.l10n_client_ui--container .form-item-search,
.l10n_client_ui--container .form-item-language,
.l10n_client_ui--container .form-item-stats {
  float: left;
  margin-top: 0;
}
.l10n_client_ui--container .form-item-type {
  clear: left;
}
.l10n_client_ui--container .form-item-search,
.l10n_client_ui--container .form-item-stats {
  padding-left: 15px;
}
.l10n_client_ui--container .form-item-search label {
  visibility: hidden;
}
.l10n_client_ui--container .form-item-search input {
  width: 300px;
}

.l10n_client_ui--stats {
  width: 200px;
  height: 1.5em;
  background-color: #ededed;
}
.l10n_client_ui--stats-done {
  height: 1.5em;
  background-color: darkseagreen;
}

#l10n_client_ui-ride {
  display: none;
}
.l10n_client_ui-tip-source {
  margin-bottom: 1em;
}
.l10n_client_ui-tip-target {
  color: #333;
}

/* Override placement of the tour progress indicator. */
.tour-progress {
  position: absolute;
  /* Equals paddings from .joyride-content-wrapper */
  bottom: 0;
  right: 0; /* LTR */
}
[dir="rtl"] .tour-progress {
  right: auto;
  left: 0;
}

/* @todo Remove once https://drupal.org/node/1916690 is resolved. */
.toolbar .tour-toolbar-tab.toolbar-tab.hidden {
  display: none;
}

/* JoyRide Styles. */
#joyRideTipContent {
  display: none;
}

/* Default styles for the container */
.joyride-tip-guide {
  position: absolute;
  display: none;
  width: 300px;
  z-index: 101;
  top: 0; /* keeps the page from scrolling when calculating position. */
  left: 0;
  padding: 1em 1em 1.5em 1.5em; /* LTR */
  font-size: 0.9em;
}
[dir="rtl"] .joyride-tip-guide {
  padding: 1em 1.5em 1.5em 1em;
}

.joyride-content-wrapper {
  /* Apply padding from parent .joyride-tip-guide to absolutely positioned children. */
  position: relative;
  padding-right: 1em; /* LTR */
}
[dir="rtl"] .joyride-content-wrapper {
  padding-right: 0;
  padding-left: 1em;
}

/* Mobile */
@media only screen and (max-width: 767px) {
  .joyride-tip-guide {
    width: 85%;
    left: 2.5%;
  }
}

/* Add a little css triangle pip, older browser just miss out on the fanciness of it. */
.joyride-tip-guide .joyride-nub {
  display: block;
  position: absolute;
  left: 22px;
  width: 0;
  height: 0;
}

.joyride-tip-guide .joyride-nub.top {
  top: -28px;
  bottom: auto;
}

.joyride-tip-guide .joyride-nub.bottom {
  bottom: -28px;
}

.joyride-tip-guide .joyride-nub.right {
  top: 22px;
  bottom: auto;
  left: auto;
  right: -28px;
}

.joyride-tip-guide .joyride-nub.left {
  top: 22px;
  left: -28px;
  right: auto;
  bottom: auto;
}

.joyride-tip-guide .joyride-nub.top-right {
  top: -28px;
  bottom: auto;
  left: auto;
  right: 28px;
}

.joyride-tip-guide p {
  margin: 0 0 1.4em;
}

.joyride-timer-indicator-wrap {
  width: 50px;
  height: 3px;
  position: absolute;
  right: 17px;
  bottom: 16px;
}
.joyride-timer-indicator {
  display: block;
  width: 0;
  height: inherit;
}

.joyride-close-tip {
  position: absolute;
  right: 0; /* LTR */
  top: 0;
}
[dir="rtl"] .joyride-close-tip {
  left: 0;
  right: auto;
}

.joyride-modal-bg {
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 100;
  display: none;
  top: 0;
  left: 0;
  cursor: pointer;
}

.joyride-expose-wrapper {
  position: absolute;
  z-index: 102;
}

.joyride-expose-cover {
  position: absolute;
  z-index: 10000;
  top: 0;
  left: 0;
}

/* Default styles for the container */
body .joyride-tip-guide {
  background: #000;
  background: rgba(0,0,0, 0.8);
  color: #fff;
  border-radius: 5px;
}

/* Mobile */
@media only screen and (max-width: 767px) {
  .joyride-tip-guide {
    border-radius: 0;
  }
}

/* Add a little css triangle pip, older browser just miss out on the fanciness of it. */
.joyride-tip-guide .joyride-nub {
  border: solid 14px rgba(0,0,0, 0.8);
}
.joyride-tip-guide .joyride-nub.top {
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
}
.joyride-tip-guide .joyride-nub.bottom {
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
}
.joyride-tip-guide .joyride-nub.right {
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
}
.joyride-tip-guide .joyride-nub.left {
  border-top-color: transparent;
  border-left-color: transparent;
  border-bottom-color: transparent;
}
.joyride-tip-guide .joyride-nub.top-right {
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
}

/* Typography */
.joyride-tip-guide h2 {
  color: #fff;
}
.joyride-tip-guide p {
  line-height: 1.385em;
}

/* Button Style */
.joyride-tip-guide .joyride-next-tip {
  margin: 0;
}
.joyride-timer-indicator-wrap {
  border: solid 1px rgba(255,255,255, 0.1);
}
.joyride-timer-indicator {
  background: rgba(255,255,255, 0.25);
}

.joyride-close-tip {
  color: rgba(255,255,255, 0.4);
  text-decoration: none;
  font-size: 1.4em;
  font-weight: bold;
}
.joyride-close-tip:hover,
.joyride-close-tip:focus {
  color: rgba(255,255,255, 0.9);
  text-decoration: none;
}

.joyride-modal-bg {
  background: rgba(0,0,0, 0.5);
}

.joyride-expose-wrapper {
  background-color: #ffffff;
}

.joyride-expose-cover {
  background: transparent;
}

.joyride-tip-guide textarea {
  width: 100%;
}

File

l10n_client_ui/css/l10n_client_ui.css
View source
  1. /* Tab appearance. */
  2. .toolbar .toolbar-bar .l10n_client_ui-toolbar-tab.toolbar-tab {
  3. float: right; /* LTR */
  4. }
  5. [dir="rtl"] .toolbar .toolbar-bar .l10n_client_ui-toolbar-tab.toolbar-tab {
  6. float: left;
  7. }
  8. .toolbar .toolbar-bar .l10n_client_ui-toolbar-tab .toolbar-item {
  9. margin: 0;
  10. }
  11. [dir="rtl"] .toolbar .toolbar-bar .l10n_client_ui-toolbar-tab .toolbar-item {
  12. padding-right: 1.3333em;
  13. }
  14. .toolbar .l10n_client_ui-toolbar-tab button.active {
  15. background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%);
  16. background-image: linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%);
  17. }
  18. .l10n_client_ui-toolbar-tab button:focus {
  19. outline: thin dotted;
  20. }
  21. .toolbar-bar .toolbar-icon-l10n_client_ui:before {
  22. background-image: url(../images/translate_icon_bebebe.svg);
  23. }
  24. .toolbar-bar .toolbar-icon-l10n_client_ui:active:before,
  25. .toolbar-bar .toolbar-icon-l10n_client_ui:before {
  26. background-image: url(../images/translate_icon_ffffff.svg);
  27. }
  28. /* @todo Remove once https://drupal.org/node/1916690 is resolved. */
  29. .toolbar .l10n_client_ui-toolbar-tab.toolbar-tab.hidden {
  30. display: none;
  31. }
  32. .l10n_client_ui--container {
  33. display: none;
  34. }
  35. .l10n_client_ui--container .ui-dialog {
  36. display: block;
  37. }
  38. .l10n_client_ui--container #edit-list {
  39. overflow-y: scroll;
  40. height: 180px;
  41. clear: both;
  42. }
  43. .l10n_client_ui--source-string,
  44. .l10n_client_ui--translation-string {
  45. width: 40%;
  46. }
  47. .l10n_client_ui--skip,
  48. .l10n_client_ui--save {
  49. width: 40px;
  50. text-indent: -200px;
  51. overflow: hidden;
  52. background-image: url(../images/remove_595959.svg);
  53. background-repeat: no-repeat;
  54. background-position: 50% 50%;
  55. }
  56. .l10n_client_ui--save {
  57. background-image: url(../images/check_bebebe.svg);
  58. }
  59. .l10n_client_ui--save.activated {
  60. background-image: url(../images/check_0074bd.svg);
  61. }
  62. .l10n_client_ui--save.saving {
  63. background-image: url(../images/check_77b259.svg);
  64. }
  65. .l10n_client_ui--container .form-item-type,
  66. .l10n_client_ui--container .form-item-search,
  67. .l10n_client_ui--container .form-item-language,
  68. .l10n_client_ui--container .form-item-stats {
  69. float: left;
  70. margin-top: 0;
  71. }
  72. .l10n_client_ui--container .form-item-type {
  73. clear: left;
  74. }
  75. .l10n_client_ui--container .form-item-search,
  76. .l10n_client_ui--container .form-item-stats {
  77. padding-left: 15px;
  78. }
  79. .l10n_client_ui--container .form-item-search label {
  80. visibility: hidden;
  81. }
  82. .l10n_client_ui--container .form-item-search input {
  83. width: 300px;
  84. }
  85. .l10n_client_ui--stats {
  86. width: 200px;
  87. height: 1.5em;
  88. background-color: #ededed;
  89. }
  90. .l10n_client_ui--stats-done {
  91. height: 1.5em;
  92. background-color: darkseagreen;
  93. }
  94. #l10n_client_ui-ride {
  95. display: none;
  96. }
  97. .l10n_client_ui-tip-source {
  98. margin-bottom: 1em;
  99. }
  100. .l10n_client_ui-tip-target {
  101. color: #333;
  102. }
  103. /* Override placement of the tour progress indicator. */
  104. .tour-progress {
  105. position: absolute;
  106. /* Equals paddings from .joyride-content-wrapper */
  107. bottom: 0;
  108. right: 0; /* LTR */
  109. }
  110. [dir="rtl"] .tour-progress {
  111. right: auto;
  112. left: 0;
  113. }
  114. /* @todo Remove once https://drupal.org/node/1916690 is resolved. */
  115. .toolbar .tour-toolbar-tab.toolbar-tab.hidden {
  116. display: none;
  117. }
  118. /* JoyRide Styles. */
  119. #joyRideTipContent {
  120. display: none;
  121. }
  122. /* Default styles for the container */
  123. .joyride-tip-guide {
  124. position: absolute;
  125. display: none;
  126. width: 300px;
  127. z-index: 101;
  128. top: 0; /* keeps the page from scrolling when calculating position. */
  129. left: 0;
  130. padding: 1em 1em 1.5em 1.5em; /* LTR */
  131. font-size: 0.9em;
  132. }
  133. [dir="rtl"] .joyride-tip-guide {
  134. padding: 1em 1.5em 1.5em 1em;
  135. }
  136. .joyride-content-wrapper {
  137. /* Apply padding from parent .joyride-tip-guide to absolutely positioned children. */
  138. position: relative;
  139. padding-right: 1em; /* LTR */
  140. }
  141. [dir="rtl"] .joyride-content-wrapper {
  142. padding-right: 0;
  143. padding-left: 1em;
  144. }
  145. /* Mobile */
  146. @media only screen and (max-width: 767px) {
  147. .joyride-tip-guide {
  148. width: 85%;
  149. left: 2.5%;
  150. }
  151. }
  152. /* Add a little css triangle pip, older browser just miss out on the fanciness of it. */
  153. .joyride-tip-guide .joyride-nub {
  154. display: block;
  155. position: absolute;
  156. left: 22px;
  157. width: 0;
  158. height: 0;
  159. }
  160. .joyride-tip-guide .joyride-nub.top {
  161. top: -28px;
  162. bottom: auto;
  163. }
  164. .joyride-tip-guide .joyride-nub.bottom {
  165. bottom: -28px;
  166. }
  167. .joyride-tip-guide .joyride-nub.right {
  168. top: 22px;
  169. bottom: auto;
  170. left: auto;
  171. right: -28px;
  172. }
  173. .joyride-tip-guide .joyride-nub.left {
  174. top: 22px;
  175. left: -28px;
  176. right: auto;
  177. bottom: auto;
  178. }
  179. .joyride-tip-guide .joyride-nub.top-right {
  180. top: -28px;
  181. bottom: auto;
  182. left: auto;
  183. right: 28px;
  184. }
  185. .joyride-tip-guide p {
  186. margin: 0 0 1.4em;
  187. }
  188. .joyride-timer-indicator-wrap {
  189. width: 50px;
  190. height: 3px;
  191. position: absolute;
  192. right: 17px;
  193. bottom: 16px;
  194. }
  195. .joyride-timer-indicator {
  196. display: block;
  197. width: 0;
  198. height: inherit;
  199. }
  200. .joyride-close-tip {
  201. position: absolute;
  202. right: 0; /* LTR */
  203. top: 0;
  204. }
  205. [dir="rtl"] .joyride-close-tip {
  206. left: 0;
  207. right: auto;
  208. }
  209. .joyride-modal-bg {
  210. position: fixed;
  211. height: 100%;
  212. width: 100%;
  213. z-index: 100;
  214. display: none;
  215. top: 0;
  216. left: 0;
  217. cursor: pointer;
  218. }
  219. .joyride-expose-wrapper {
  220. position: absolute;
  221. z-index: 102;
  222. }
  223. .joyride-expose-cover {
  224. position: absolute;
  225. z-index: 10000;
  226. top: 0;
  227. left: 0;
  228. }
  229. /* Default styles for the container */
  230. body .joyride-tip-guide {
  231. background: #000;
  232. background: rgba(0,0,0, 0.8);
  233. color: #fff;
  234. border-radius: 5px;
  235. }
  236. /* Mobile */
  237. @media only screen and (max-width: 767px) {
  238. .joyride-tip-guide {
  239. border-radius: 0;
  240. }
  241. }
  242. /* Add a little css triangle pip, older browser just miss out on the fanciness of it. */
  243. .joyride-tip-guide .joyride-nub {
  244. border: solid 14px rgba(0,0,0, 0.8);
  245. }
  246. .joyride-tip-guide .joyride-nub.top {
  247. border-top-color: transparent;
  248. border-left-color: transparent;
  249. border-right-color: transparent;
  250. }
  251. .joyride-tip-guide .joyride-nub.bottom {
  252. border-bottom-color: transparent;
  253. border-left-color: transparent;
  254. border-right-color: transparent;
  255. }
  256. .joyride-tip-guide .joyride-nub.right {
  257. border-top-color: transparent;
  258. border-right-color: transparent;
  259. border-bottom-color: transparent;
  260. }
  261. .joyride-tip-guide .joyride-nub.left {
  262. border-top-color: transparent;
  263. border-left-color: transparent;
  264. border-bottom-color: transparent;
  265. }
  266. .joyride-tip-guide .joyride-nub.top-right {
  267. border-top-color: transparent;
  268. border-left-color: transparent;
  269. border-right-color: transparent;
  270. }
  271. /* Typography */
  272. .joyride-tip-guide h2 {
  273. color: #fff;
  274. }
  275. .joyride-tip-guide p {
  276. line-height: 1.385em;
  277. }
  278. /* Button Style */
  279. .joyride-tip-guide .joyride-next-tip {
  280. margin: 0;
  281. }
  282. .joyride-timer-indicator-wrap {
  283. border: solid 1px rgba(255,255,255, 0.1);
  284. }
  285. .joyride-timer-indicator {
  286. background: rgba(255,255,255, 0.25);
  287. }
  288. .joyride-close-tip {
  289. color: rgba(255,255,255, 0.4);
  290. text-decoration: none;
  291. font-size: 1.4em;
  292. font-weight: bold;
  293. }
  294. .joyride-close-tip:hover,
  295. .joyride-close-tip:focus {
  296. color: rgba(255,255,255, 0.9);
  297. text-decoration: none;
  298. }
  299. .joyride-modal-bg {
  300. background: rgba(0,0,0, 0.5);
  301. }
  302. .joyride-expose-wrapper {
  303. background-color: #ffffff;
  304. }
  305. .joyride-expose-cover {
  306. background: transparent;
  307. }
  308. .joyride-tip-guide textarea {
  309. width: 100%;
  310. }