material.css 29 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091
  1. /* Import the Open Sans webfont from Google CDN */
  2. @font-face {
  3. font-family: 'Roboto';
  4. font-style: normal;
  5. font-weight: 300;
  6. src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v15/El-bgsteBznJNL5pgUfFLA.woff2) format('woff2'), url(https://fonts.gstatic.com/s/roboto/v15/d-QWLnp4didxos_6urzFtg.woff) format('woff');
  7. }
  8. @font-face {
  9. font-family: 'Roboto';
  10. font-style: normal;
  11. font-weight: 400;
  12. src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/N5Lbe1fynPA1KT8BFvAiGw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/roboto/v15/grlryt2bdKIyfMSOhzd1eA.woff) format('woff');
  13. }
  14. @font-face {
  15. font-family: 'Roboto';
  16. font-style: normal;
  17. font-weight: 600;
  18. src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v15/tZdhd9Zzj0I2MwoD56osIw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/roboto/v15/vxNK-E6B13CyehuDCmvQvw.woff) format('woff');
  19. }
  20. html,
  21. body.adminimal-skin-material {
  22. height: 100%;
  23. background: #f9f9f9;
  24. }
  25. body.adminimal-skin-material {
  26. font-family: Roboto, sans-serif;
  27. }
  28. body.adminimal-skin-material #page {
  29. background: #f9f9f9;
  30. }
  31. body.adminimal-skin-material a {
  32. color: #2196F3;
  33. -o-transition:.3s;
  34. -ms-transition:.3s;
  35. -moz-transition:.3s;
  36. -webkit-transition:.3s;
  37. transition:.3s;
  38. }
  39. h1, h2, h3, h4, h5, h6 {
  40. font-family: Roboto, sans-serif;
  41. }
  42. body.adminimal-skin-material table th.active {
  43. background: #607D8B;
  44. color: #fff;
  45. }
  46. body.adminimal-skin-material table tr.selected td.active,
  47. body.adminimal-skin-material table tr.selected td {
  48. background: #ECEFF1;
  49. }
  50. body.adminimal-skin-material table th {
  51. background: #E0E0E0;
  52. }
  53. body.adminimal-skin-material tr.even:hover, .adminimal-theme tr.odd:hover {
  54. background: #FFF9C4;
  55. }
  56. body.adminimal-skin-material .marker,
  57. body.adminimal-skin-material .form-required {
  58. color: #FF9800;
  59. }
  60. body.adminimal-skin-material td .marker {
  61. position: relative;
  62. top: 0.5em;
  63. vertical-align: top;
  64. }
  65. body.adminimal-skin-material table.tableheader-processed {
  66. border: 1px solid #E0E0E0;
  67. }
  68. body.adminimal-skin-material tr.even,
  69. body.adminimal-skin-material tr.odd {
  70. background: #FFF;
  71. }
  72. body.adminimal-skin-material .messages ul {
  73. list-style-type: none;
  74. }
  75. body.adminimal-skin-material div.messages ul li {
  76. font-size: 14px;
  77. padding-bottom: 0.5em;
  78. }
  79. body.adminimal-skin-material div.messages ul li:last-of-type {
  80. padding-bottom: 0;
  81. }
  82. body.adminimal-skin-material #help p {
  83. font-size: 13px;
  84. }
  85. body.adminimal-skin-material div.messages ul.krumo-node {
  86. margin : 0;
  87. }
  88. body.adminimal-skin-material div.messages ul.krumo-node li.krumo-child {
  89. font-size: 12px;
  90. padding-bottom: 0;
  91. }
  92. body.adminimal-skin-material div.warning {
  93. background-color: #fff3e0;
  94. border: none;
  95. border-radius: 3px;
  96. background-position: 14px 50%;
  97. }
  98. body.adminimal-skin-material div.status {
  99. background-color: #E8F5E9;
  100. border: none;
  101. border-radius: 3px;
  102. background-position: 14px 50%;
  103. }
  104. body.adminimal-menu.adminimal-skin-material div#admin-menu {
  105. background: #1b2327;
  106. border-color: #1b2327;
  107. }
  108. body.adminimal-skin-material #branding {
  109. background-color: #263238;
  110. box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.26);
  111. }
  112. body.adminimal-skin-material.adminimal-menu div#admin-menu a,
  113. body.adminimal-skin-material.adminimal-menu div#admin-menu span {
  114. font-family: Roboto;
  115. font-size: 13px;
  116. text-transform: capitalize;
  117. }
  118. body.adminimal-menu #admin-menu .dropdown li.admin-menu-action:first-child a {
  119. background: #1B2327;
  120. }
  121. body.adminimal-menu #admin-menu .admin-menu-search input {
  122. background: #1B2327;
  123. box-shadow: inset 0px -2px 0px #64696C;
  124. transition: all, 0.3s;
  125. }
  126. body.adminimal-menu #admin-menu .admin-menu-search input:focus {
  127. box-shadow: inset 0px -2px 0px #FFFFFF;
  128. background: #1B2327;
  129. color: #FFF;
  130. }
  131. body.adminimal-menu #admin-menu .dropdown li.admin-menu-action.admin-menu-account a {
  132. background: #1B2327 !important;
  133. }
  134. body.adminimal-skin-material ul.primary li.active a,
  135. body.adminimal-skin-material ul.primary li.active a.active,
  136. body.adminimal-skin-material ul.primary li.active a:active,
  137. body.adminimal-skin-material ul.primary li.active a:visited {
  138. margin-top: 0px;
  139. border-top: none;
  140. }
  141. body.adminimal-skin-material ul.primary li {
  142. text-transform: uppercase;
  143. }
  144. body.adminimal-skin-material #navigation ul.primary li:first-of-type.active {
  145. margin-left: 10px;
  146. }
  147. body.adminimal-skin-material div.breadcrumb a {
  148. color: #A3A3A3;
  149. }
  150. body.adminimal-skin-material div.breadcrumb a:hover {
  151. color: #fff;
  152. }
  153. body.adminimal-skin-material ul.primary li.active a,
  154. body.adminimal-skin-material ul.primary li.active a.active,
  155. body.adminimal-skin-material ul.primary li.active a:active,
  156. body.adminimal-skin-material ul.primary li.active a:visited {
  157. box-shadow: none;
  158. background-color: transparent;
  159. color: #000;
  160. }
  161. body.adminimal-skin-material ul.primary {
  162. background-color: #EEEEEE;
  163. }
  164. body.adminimal-skin-material #branding h1.page-title {
  165. font-family: Roboto, sans-serif;
  166. font-size: 28px;
  167. font-weight: 400;
  168. line-height: 1.5em;
  169. padding: 0px 0px 8px;
  170. }
  171. body.adminimal-skin-material div.add-or-remove-shortcuts {
  172. padding-left: 2px;
  173. padding-top: 16px;
  174. }
  175. body.adminimal-skin-material ul.action-links a {
  176. text-transform: uppercase;
  177. font-weight: 500;
  178. font-size: 15px;
  179. background: #2196f3;
  180. color: #FFFFFF;
  181. padding: 3px 20px 2px;
  182. border-radius: 3px;
  183. display: inline-block;
  184. font-family: Roboto, sans-serif;
  185. }
  186. body.adminimal-skin-material ul.action-links a:hover {
  187. background: #29B6F6;
  188. text-decoration: none;
  189. box-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
  190. }
  191. body.adminimal-skin-material .theme-selector {
  192. padding-bottom: 40px;
  193. background: #FFFFFF;
  194. border-radius: 4px;
  195. border: 1px solid #ECECEC;
  196. margin: 26px 0;
  197. padding: 40px 25px;
  198. box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  199. }
  200. body.adminimal-skin-material #system-themes-page h2 {
  201. color: #455a64;
  202. font-size: 26px;
  203. font-weight: 500;
  204. text-transform: none;
  205. }
  206. body.adminimal-skin-material #page .operations a {
  207. text-transform: uppercase;
  208. }
  209. body.adminimal-skin-material.page-admin-appearance fieldset legend {
  210. font-family: Roboto, sans-serif !important;
  211. font-weight: 400 !important;
  212. font-size: 20px !important;
  213. }
  214. body.adminimal-skin-material fieldset {
  215. border: none;
  216. box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  217. background: #fff;
  218. border-radius: 3px;
  219. padding-top: 42px;
  220. position: relative;
  221. margin-bottom: 20px;
  222. }
  223. body.adminimal-skin-material .fieldset-description {
  224. padding-top: 28px;
  225. padding-bottom: 20px;
  226. color: #909090;
  227. }
  228. body.adminimal-skin-material .text-format-wrapper fieldset.filter-wrapper {
  229. box-shadow: none;
  230. border: 1px solid #DDD;
  231. border-radius: 0;
  232. }
  233. body.adminimal-skin-material .vertical-tabs-panes fieldset.vertical-tabs-pane {
  234. box-shadow: none;
  235. }
  236. body.adminimal-skin-material .form-item label,
  237. body.adminimal-skin-material .exposed-filters .form-item label {
  238. font-family: Roboto, sans-serif;
  239. }
  240. body.adminimal-skin-material fieldset legend {
  241. font-family: Roboto, sans-serif;
  242. font-size: 20px;
  243. font-weight: 500;
  244. position: absolute;
  245. top: 14px;
  246. }
  247. body.adminimal-skin-material .features-export-parent fieldset legend {
  248. top: 0;
  249. }
  250. /* Omega Fieldset fix */
  251. body.page-admin-appearance-settings-omega.adminimal-skin-material fieldset {
  252. border: solid 1px #ddd !important;
  253. border-top: 1px #ddd !important;
  254. box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18) !important;
  255. padding: 12px !important;
  256. padding-top: 42px !important;
  257. margin: 18px 0 !important;
  258. }
  259. /* Apperance page */
  260. body.page-admin-appearance.adminimal-skin-material fieldset legend {
  261. font-family: Roboto, sans-serif !important;
  262. font-size: 20px !important;
  263. font-weight: 500 !important;
  264. top: 16px;
  265. }
  266. body.page-admin-appearance.adminimal-skin-material fieldset#edit-admin-theme {
  267. padding-top: 13px;
  268. }
  269. body.page-admin-appearance.adminimal-skin-material .theme-selector {
  270. padding-bottom: 40px;
  271. background: #FFFFFF;
  272. border-radius: 4px;
  273. border: none;
  274. margin: 26px 0;
  275. padding: 32px 25px;
  276. box-shadow: 0 1px 5px rgba(0, 0, 0, 0.17);
  277. width: 306px;
  278. float: left;
  279. margin-right: 20px;
  280. height: 410px;
  281. position: relative;
  282. -o-transition:.3s;
  283. -ms-transition:.3s;
  284. -moz-transition:.3s;
  285. -webkit-transition:.3s;
  286. transition:.3s;
  287. }
  288. body.page-admin-appearance.adminimal-skin-material .system-themes-list-disabled .theme-selector .screenshot,
  289. body.page-admin-appearance.adminimal-skin-material .system-themes-list-disabled .theme-selector .no-screenshot {
  290. border: 1px solid #e0e0d8;
  291. padding: 2px;
  292. vertical-align: bottom;
  293. width: 294px;
  294. height: 219px;
  295. line-height: 219px;
  296. text-align: center;
  297. }
  298. body.page-admin-appearance.adminimal-skin-material .system-themes-list-enabled .theme-info h3{
  299. font-size: 20px;
  300. font-weight: 600;
  301. line-height: 1.5rem;
  302. float: left;
  303. width: 100%;
  304. margin-top: 15px;
  305. }
  306. body.page-admin-appearance.adminimal-skin-material .theme-selector .theme-description {
  307. overflow: auto;
  308. float: left;
  309. margin-top: 2px;
  310. max-height: 100px;
  311. }
  312. body.page-admin-appearance.adminimal-skin-material .theme-selector .operations {
  313. padding: 0;
  314. position: absolute;
  315. bottom: 0px;
  316. font-size: 14px;
  317. width: 100%;
  318. font-weight: bold;
  319. margin: 0;
  320. left: 0px;
  321. padding-top: 5px;
  322. border-top: 1px solid #eee;
  323. }
  324. body.page-admin-appearance.adminimal-skin-material .theme-selector .operations li {
  325. float: right;
  326. border: none;
  327. padding: 0;
  328. }
  329. body.page-admin-appearance.adminimal-skin-material .theme-selector .operations li a {
  330. padding: 10px;
  331. }
  332. body.page-admin-appearance.adminimal-skin-material .theme-selector .operations li.first a{
  333. padding: 10px;
  334. margin-right: 10px;
  335. }
  336. body.page-admin-appearance.adminimal-skin-material .theme-selector .operations li a:hover{
  337. color: #FF9800;
  338. text-decoration: none;
  339. }
  340. /* Custom Checkbox styling */
  341. /* Chrome + Safari + Opera */
  342. @supports (-webkit-appearance:none) {
  343. body.adminimal-skin-material.style-checkboxes input[type=checkbox],
  344. body.adminimal-skin-material.style-checkboxes input[type=radio] {
  345. -webkit-appearance:none; /* Safari and Chrome */
  346. display: inline-block;
  347. position: relative;
  348. top: 3px;
  349. margin-right: 0.25em;
  350. padding: 0;
  351. background: #fff;
  352. border: 2px solid #757575;
  353. border-radius: 2px;
  354. width: 14px !important;
  355. height: 14px !important;
  356. -webkit-transition: all 0.5s ease;
  357. -o-transition: all 0.5s ease;
  358. transition: background 0.5s ease;
  359. outline: none;
  360. }
  361. body.adminimal-skin-material.style-checkboxes input[type=radio] {
  362. border-radius: 50%;
  363. box-shadow: inset 0px 0px 0px 0px #fff;
  364. transition: box-shadow .1s cubic-bezier(0.28,0.63,0.77,0.17);
  365. }
  366. body.adminimal-skin-material.style-checkboxes input[type=checkbox]:hover,
  367. body.adminimal-skin-material.style-checkboxes input[type=checkbox]:focus,
  368. body.adminimal-skin-material.style-checkboxes input[type=radio]:hover,
  369. body.adminimal-skin-material.style-checkboxes input[type=radio]:focus {
  370. border-color: #757575;
  371. cursor: pointer;
  372. }
  373. body.adminimal-skin-material.style-checkboxes input[type=checkbox]:checked,
  374. body.adminimal-skin-material.style-checkboxes input[type=checkbox]:disabled:checked,
  375. body.adminimal-skin-material.style-checkboxes input[type=radio]:checked,
  376. body.adminimal-skin-material.style-checkboxes input[type=radio]:disabled:checked{
  377. border-color: #0E9C57;
  378. }
  379. body.adminimal-skin-material.style-checkboxes input[type=checkbox]:checked,
  380. body.adminimal-skin-material.style-checkboxes input[type=checkbox]:disabled:checked {
  381. background: url('images/check.svg') scroll no-repeat 0 0 #0E9C57;
  382. }
  383. body.adminimal-skin-material.style-checkboxes input[type=radio]:checked,
  384. body.adminimal-skin-material.style-checkboxes input[type=radio]:disabled:checked {
  385. background: #0E9C57;
  386. box-shadow: inset 0px 0px 0px 3px #fff;
  387. }
  388. body.adminimal-skin-material.style-checkboxes input[type=checkbox]:disabled,
  389. body.adminimal-skin-material.style-checkboxes input[type=radio]:disabled {
  390. opacity: .5;
  391. background: #E2E2E2;
  392. }
  393. body.adminimal-skin-material.style-checkboxes input[type=checkbox]:disabled:hover,
  394. body.adminimal-skin-material.style-checkboxes input[type=radio]:disabled:hover {
  395. border-color: #0E9C57;
  396. cursor: default;
  397. /*cursor: not-allowed;*/
  398. }
  399. }
  400. /* Waves plugin (Ripple effect) */
  401. /*!
  402. * Waves v0.6.6
  403. * http://fian.my.id/Waves
  404. *
  405. * Copyright 2014 Alfiana E. Sibuea and other contributors
  406. * Released under the MIT license
  407. * https://github.com/fians/Waves/blob/master/LICENSE
  408. */
  409. .waves-effect {
  410. position: relative;
  411. cursor: pointer;
  412. display: inline-block;
  413. overflow: hidden;
  414. -webkit-user-select: none;
  415. -moz-user-select: none;
  416. -ms-user-select: none;
  417. user-select: none;
  418. -webkit-tap-highlight-color: transparent;
  419. }
  420. .waves-effect .waves-ripple {
  421. position: absolute;
  422. border-radius: 50%;
  423. width: 100px;
  424. height: 100px;
  425. margin-top: -50px;
  426. margin-left: -50px;
  427. opacity: 0;
  428. background: rgba(0, 0, 0, 0.2);
  429. background: -webkit-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  430. background: -o-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  431. background: -moz-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  432. background: radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  433. -webkit-transition: all 0.5s ease-out;
  434. -moz-transition: all 0.5s ease-out;
  435. -o-transition: all 0.5s ease-out;
  436. transition: all 0.5s ease-out;
  437. -webkit-transition-property: -webkit-transform, opacity;
  438. -moz-transition-property: -moz-transform, opacity;
  439. -o-transition-property: -o-transform, opacity;
  440. transition-property: transform, opacity;
  441. -webkit-transform: scale(0);
  442. -moz-transform: scale(0);
  443. -ms-transform: scale(0);
  444. -o-transform: scale(0);
  445. transform: scale(0);
  446. pointer-events: none;
  447. }
  448. .waves-effect.waves-light .waves-ripple {
  449. background: rgba(255, 255, 255, 0.4);
  450. background: -webkit-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  451. background: -o-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  452. background: -moz-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  453. background: radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  454. }
  455. .waves-effect.waves-classic .waves-ripple {
  456. background: rgba(0, 0, 0, 0.2);
  457. }
  458. .waves-effect.waves-classic.waves-light .waves-ripple {
  459. background: rgba(255, 255, 255, 0.4);
  460. }
  461. .waves-notransition {
  462. -webkit-transition: none !important;
  463. -moz-transition: none !important;
  464. -o-transition: none !important;
  465. transition: none !important;
  466. }
  467. .waves-button,
  468. .waves-circle {
  469. -webkit-transform: translateZ(0);
  470. -moz-transform: translateZ(0);
  471. -ms-transform: translateZ(0);
  472. -o-transform: translateZ(0);
  473. transform: translateZ(0);
  474. -webkit-mask-image: -webkit-radial-gradient(circle, #ffffff 100%, #000000 100%);
  475. }
  476. .waves-button,
  477. .waves-button:hover,
  478. .waves-button:visited,
  479. .waves-button-input {
  480. white-space: nowrap;
  481. outline: none;
  482. text-decoration: none;
  483. z-index: 1;
  484. }
  485. .waves-button {
  486. border-radius: 0.2em;
  487. }
  488. .waves-button-input {
  489. margin: 0;
  490. padding: 0.85em 1.1em;
  491. }
  492. .waves-input-wrapper {
  493. border-radius: 0.2em;
  494. vertical-align: middle;
  495. z-index: 999;
  496. margin-right: 1em;
  497. }
  498. .waves-input-wrapper.waves-button {
  499. padding: 0;
  500. }
  501. .waves-input-wrapper .waves-button-input {
  502. position: relative;
  503. top: 0;
  504. left: 0;
  505. z-index: 0;
  506. }
  507. .waves-circle {
  508. text-align: center;
  509. width: 2.5em;
  510. height: 2.5em;
  511. line-height: 2.5em;
  512. border-radius: 50%;
  513. }
  514. .waves-float {
  515. -webkit-mask-image: none;
  516. -webkit-box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.12);
  517. box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.12);
  518. }
  519. .waves-float:active {
  520. -webkit-box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3);
  521. box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3);
  522. }
  523. .waves-block {
  524. display: block;
  525. }
  526. /* Firefox Bug: link not triggered */
  527. a.waves-effect .waves-ripple {
  528. z-index: -1;
  529. }
  530. body.adminimal-skin-material #navigation ul.secondary {
  531. overflow: hidden;
  532. }
  533. body.adminimal-skin-material #navigation ul.secondary li {
  534. height: 39px;
  535. }
  536. body.adminimal-skin-material #navigation ul.secondary li a {
  537. color: #777 !important;
  538. background: #fff;
  539. }
  540. body.adminimal-skin-material #navigation ul.secondary li a:hover {
  541. color: #2196F3 !important;
  542. border-color: #2196F3 !important;
  543. background: #fff;
  544. }
  545. body.adminimal-skin-material #navigation ul.secondary li a.active {
  546. color: #000 !important;
  547. background: #fff;
  548. }
  549. body.adminimal-skin-material #navigation ul.secondary li a.active:hover {
  550. border-color: #000 !important;
  551. }
  552. body.adminimal-skin-material table th {
  553. font-family: Roboto;
  554. font-size: 16px;
  555. font-weight: 400;
  556. }
  557. body.adminimal-skin-material #webform-components tr.webform-add-form {
  558. background-color: #E8F5E9;
  559. }
  560. body.adminimal-skin-material table tr.add-new,
  561. body.adminimal-skin-material table tr.add-new:hover {
  562. background-color: #E8F5E9;
  563. }
  564. body.adminimal-skin-material table tbody td a {
  565. padding: .5em .75em;
  566. border-radius: 3px;
  567. vertical-align: middle;
  568. }
  569. body.adminimal-skin-material table tbody td a.module-link {
  570. padding: .5em 10px .5em 30px;
  571. }
  572. body.adminimal-skin-material table tbody td a.module-link {
  573. background-position-x: 10px;
  574. }
  575. body.adminimal-skin-material table tbody td a:hover {
  576. text-decoration: underline;
  577. }
  578. /* Buttons */
  579. /* Gray Button */
  580. input[type="submit"],
  581. input.form-submit,
  582. a.button,
  583. div.exposed-filters input#edit-submit {
  584. cursor: pointer;
  585. background: #BBBBBB;
  586. border: none;
  587. padding: 6px 18px;
  588. color: #fff;
  589. text-align: center;
  590. font-size: 1.077em;
  591. font-family: Roboto, sans-serif;
  592. font-weight: 500;
  593. text-transform: uppercase;
  594. border-radius: 0.2rem;
  595. transition: all, 0.3s;
  596. }
  597. input[type="submit"]:hover,
  598. input.form-submit:hover,
  599. a.button:hover,
  600. div.exposed-filters input#edit-submit:hover {
  601. box-shadow: 0 2px 6px rgba(0,0,0,.2);
  602. }
  603. input[type="submit"]:active,
  604. input.form-submit:active,
  605. a.button:active,
  606. div.exposed-filters input#edit-submit:active {
  607. outline: none;
  608. box-shadow: inset 0 0px 8px rgba(0,0,0,0.4);
  609. }
  610. input[type="submit"]:focus,
  611. input.form-submit:focus,
  612. a.button:focus,
  613. div.exposed-filters input#edit-submit:focus {
  614. outline: none;
  615. box-shadow: inset 0 0px 8px rgba(0,0,0,0.4);
  616. }
  617. /* Green Button */
  618. input[type="submit"][id^="edit-submit"],
  619. input#edit-actions-submit,
  620. input[id^="save-continue"],
  621. input[type="submit"][id^="edit-save"],
  622. input#edit-save,
  623. input#edit-submit,
  624. input#edit-actions-save,
  625. #media-browser-page a.button-yes,
  626. input.add-new-condition,
  627. #edit-field-product-und-form-actions input.ief-entity-submit {
  628. cursor: pointer;
  629. border: none;
  630. padding: 6px 18px;
  631. text-align: center;
  632. font-weight: normal;
  633. font-size: 1.077em;
  634. background: #0E9C57;
  635. color: #fff;
  636. font-family: Roboto, sans-serif;
  637. font-weight: 500;
  638. text-transform: uppercase;
  639. border-radius: 0.2rem;
  640. }
  641. input[type="submit"][id^="edit-submit"]:hover,
  642. input#edit-actions-submit:hover,
  643. input[id^="save-continue"]:hover,
  644. input[type="submit"][id^="edit-save"]:hover,
  645. input#edit-save:hover,
  646. input#edit-submit:hover,
  647. input#edit-actions-save:hover,
  648. #media-browser-page a.button-yes:hover,
  649. input.add-new-condition:hover,
  650. #edit-field-product-und-form-actions input.ief-entity-submit:hover {
  651. box-shadow: 0 2px 6px rgba(0,0,0,.3);
  652. }
  653. input[type="submit"][id^="edit-submit"]:active,
  654. input#edit-actions-submit:active,
  655. input[id^="save-continue"]:active,
  656. input[type="submit"][id^="edit-save"]:active,
  657. input#edit-save:active,
  658. input#edit-submit:active,
  659. input#edit-actions-save:active,
  660. #media-browser-page a.button-yes:active,
  661. input.add-new-condition:active,
  662. #edit-field-product-und-form-actions input.ief-entity-submit:active {
  663. outline: none;
  664. box-shadow: inset 0 0px 8px rgba(0,0,0,0.4);
  665. }
  666. input[type="submit"][id^="edit-submit"]:focus,
  667. input#edit-actions-submit:focus,
  668. input[id^="save-continue"]:focus,
  669. input[type="submit"][id^="edit-save"]:focus,
  670. input#edit-save:focus,
  671. input#edit-submit:focus,
  672. input#edit-actions-save:focus,
  673. #media-browser-page a.button-yes:focus,
  674. input.add-new-condition:focus,
  675. #edit-field-product-und-form-actions input.ief-entity-submit:focus {
  676. outline: none;
  677. box-shadow: inset 0 0px 8px rgba(0,0,0,0.4);
  678. }
  679. /* Red Button */
  680. input#edit-delete,
  681. input#remove-button,
  682. input#edit-remove,
  683. input#edit-clear,
  684. a.button.remove,
  685. input[id*="remove-button"],
  686. .page-node-delete input#edit-submit,
  687. .page-admin-modules-uninstall input#edit-submit,
  688. .remove-condition input,
  689. .field-widget-inline-entity-form .ief-entity-operations input[id*="remove"].form-submit {
  690. cursor: pointer;
  691. padding: 6px 18px;
  692. border: none;
  693. color: #fff;
  694. text-align: center;
  695. font-weight: normal;
  696. font-size: 1.077em;
  697. background: #D32F2F;
  698. font-family: Roboto, sans-serif;
  699. font-weight: 500;
  700. text-transform: uppercase;
  701. border-radius: 0.2rem;
  702. transition: all, 0.3s;
  703. }
  704. input#edit-delete:hover,
  705. input#remove-button:hover,
  706. input#edit-remove:hover,
  707. input#edit-clear:hover,
  708. a.button.remove:hover,
  709. input[id*="remove-button"]:hover,
  710. .page-node-delete input#edit-submit:hover,
  711. body.page-admin-modules-uninstall input#edit-submit:hover,
  712. .remove-condition input:hover,
  713. .field-widget-inline-entity-form .ief-entity-operations input[id*="remove"].form-submit:hover {
  714. box-shadow: 0 2px 6px rgba(0,0,0,.3);
  715. }
  716. input#edit-delete:active,
  717. input#remove-button:active,
  718. input#edit-remove:active,
  719. input#edit-clear:active,
  720. input[id*="remove-button"]:active,
  721. .page-node-delete input#edit-submit:active,
  722. body.page-admin-modules-uninstall input#edit-submit:active,
  723. .remove-condition input:active,
  724. .field-widget-inline-entity-form .ief-entity-operations input[id*="remove"].form-submit:active {
  725. outline: none;
  726. box-shadow: inset 0 0px 8px rgba(0,0,0,0.4);
  727. }
  728. input#edit-delete:focus,
  729. input#remove-button:focus,
  730. input#edit-remove:focus,
  731. input#edit-clear:focus,
  732. input[id*="remove-button"]:focus,
  733. .page-node-delete input#edit-submit:focus,
  734. body.page-admin-modules-uninstall input#edit-submit:focus,
  735. .remove-condition input:focus,
  736. .field-widget-inline-entity-form .ief-entity-operations input[id*="remove"].form-submit:focus {
  737. outline: none;
  738. box-shadow: inset 0 0px 8px rgba(0,0,0,0.4);
  739. }
  740. /* Blue Button */
  741. input#edit-preview,
  742. input#edit-next,
  743. input#preview-submit,
  744. input.ief-entity-submit,
  745. input[type="submit"][id^="edit-return"],
  746. .field-widget-inline-entity-form .ief-entity-operations input[id*="edit"] {
  747. cursor: pointer;
  748. border: none;
  749. padding: 6px 18px;
  750. color: #fff;
  751. text-align: center;
  752. font-weight: normal;
  753. font-size: 1.077em;
  754. background: #0074BD;
  755. font-family: Roboto, sans-serif;
  756. font-weight: 500;
  757. text-transform: uppercase;
  758. border-radius: 0.2rem;
  759. transition: all, 0.3s;
  760. }
  761. input#edit-preview:hover,
  762. input#edit-next:hover,
  763. input#preview-submit:hover,
  764. input.ief-entity-submit:hover,
  765. input[type="submit"][id^="edit-return"]:hover,
  766. .field-widget-inline-entity-form .ief-entity-operations input[id*="edit"]:hover {
  767. box-shadow: 0 2px 6px rgba(0,0,0,.3);
  768. }
  769. input#edit-preview:active,
  770. input#edit-next:active,
  771. input#preview-submit:active,
  772. input.ief-entity-submit:active,
  773. input[type="submit"][id^="edit-return"]:active,
  774. .field-widget-inline-entity-form .ief-entity-operations input[id*="edit"]:active {
  775. border: none;
  776. color: #fff;
  777. outline: none;
  778. box-shadow: inset 0 0px 8px rgba(0,0,0,0.4);
  779. }
  780. input#edit-preview:focus,
  781. input#edit-next:focus,
  782. input#preview-submit:focus,
  783. input.ief-entity-submit:focus,
  784. input[type="submit"][id^="edit-return"]:focus,
  785. .field-widget-inline-entity-form .ief-entity-operations input[id*="edit"]:focus {
  786. border: none;
  787. color: #fff;
  788. outline: none;
  789. box-shadow: inset 0 0px 8px rgba(0,0,0,0.4);
  790. }
  791. /* Orange Button */
  792. #edit-cancel,
  793. #edit-actions-cancel,
  794. input#edit-buttons-revert,
  795. #media-browser-page a.button-no,
  796. .field-widget-inline-entity-form input[id*="cancel"] {
  797. cursor: pointer;
  798. border: none;
  799. padding: 6px 18px;
  800. color: #fff;
  801. text-align: center;
  802. font-weight: normal;
  803. font-size: 1.077em;
  804. font-family: "Lucida Grande",Verdana,sans-serif;
  805. background: #f69231;
  806. transition: all, 0.3s;
  807. }
  808. a#edit-cancel,a#edit-actions-cancel {
  809. padding: 6px 10px;
  810. text-decoration: none;
  811. border: none;
  812. }
  813. #edit-cancel:hover,
  814. #edit-actions-cancel:hover,
  815. input#edit-buttons-revert:hover,
  816. #media-browser-page a.button-no:hover,
  817. .field-widget-inline-entity-form input[id*="cancel"]:hover {
  818. box-shadow: 0 2px 6px rgba(0,0,0,.3);
  819. }
  820. #edit-cancel:active,
  821. #edit-actions-cancel:active,
  822. input#edit-buttons-revert:active,
  823. .field-widget-inline-entity-form input[id*="cancel"]:active {
  824. background: #333;
  825. border: none;
  826. color: #fff;
  827. outline: none;
  828. box-shadow: inset 0 0px 8px rgba(0,0,0,0.4);
  829. }
  830. #edit-cancel:focus,
  831. #edit-actions-cancel:focus,
  832. input#edit-buttons-revert:focus,
  833. .field-widget-inline-entity-form input[id*="cancel"]:focus {
  834. background: #333;
  835. border: none;
  836. color: #fff;
  837. outline: none;
  838. box-shadow: inset 0 0px 8px rgba(0,0,0,0.4);
  839. }
  840. .waves-input-wrapper input {
  841. -o-transition:.5s;
  842. -ms-transition:.5s;
  843. -moz-transition:.5s;
  844. -webkit-transition:.5s;
  845. transition:.5s;
  846. }
  847. .waves-input-wrapper:hover input {
  848. box-shadow: inset 0 -2px 0px rgba(0, 0, 0, 0.18);
  849. }
  850. body.adminimal-skin-material div.vertical-tabs ul li.vertical-tab-button strong {
  851. font-size: 13px;
  852. }
  853. /*body.adminimal-skin-material input.form-autocomplete,
  854. body.adminimal-skin-material input.form-text,
  855. body.adminimal-skin-material input.form-file,
  856. body.adminimal-skin-material textarea.form-textarea,
  857. body.adminimal-skin-material select.form-select {
  858. border: none;
  859. border-bottom: 2px solid #FF9800;
  860. -o-transition:.3s;
  861. -ms-transition:.3s;
  862. -moz-transition:.3s;
  863. -webkit-transition:.3s;
  864. transition:.3s;
  865. }
  866. body.adminimal-skin-material textarea.form-textarea {
  867. border: 1px solid #ddd;
  868. }
  869. body.adminimal-skin-material input.form-text:hover,
  870. body.adminimal-skin-material input.form-file:hover,
  871. body.adminimal-skin-material select.form-select:hover {
  872. border-bottom: 2px solid #F57C00;
  873. }
  874. body.adminimal-skin-material input.form-text:focus,
  875. body.adminimal-skin-material input.form-file:focus,
  876. body.adminimal-skin-material select.form-select:focus {
  877. color: #000;
  878. border-bottom: 2px solid #9C27B0;
  879. outline: none;
  880. outline-offset: 0px;
  881. }*/
  882. body.adminimal-skin-material #main-content div.admin-panel {
  883. background-color: #fff;
  884. box-shadow: 0 1px 5px rgba(0, 0, 0, 0.17);
  885. border-radius: 3px;
  886. padding: 15px 100px 20px 15px;
  887. }
  888. html.js body.adminimal-skin-material #module-filter-submit input {
  889. margin: 0;
  890. }
  891. html.js body.adminimal-skin-material #module-filter-submit .form-actions {
  892. padding: 20px 0;
  893. }
  894. body.adminimal-skin-material .form-actions input {
  895. height: 24px;
  896. margin-right: 1rem;
  897. }
  898. body.adminimal-skin-material .block-search .form-actions input,
  899. body.adminimal-skin-material .exposed-filters input{
  900. height: initial;
  901. }
  902. body.adminimal-skin-material.overlay #branding {
  903. background-color: #FFFFFF;
  904. border-bottom: 1px solid #ddd;
  905. padding-bottom: 5px;
  906. box-shadow: none;
  907. }
  908. body.adminimal-skin-material.overlay div.breadcrumb a:hover {
  909. color: #0074bd;
  910. }
  911. body.adminimal-skin-material.overlay #overlay-close,
  912. body.adminimal-skin-material.overlay #overlay-close:hover {
  913. height: 44px;
  914. background-position-y: 10px;
  915. left: -36px;
  916. }
  917. body.adminimal-skin-material.overlay #overlay-tabs {
  918. right: 2px;
  919. }
  920. body.adminimal-skin-material.overlay #overlay-tabs li:first-of-type a {
  921. border-radius: 0.2em 0 0 0;
  922. }
  923. body.adminimal-skin-material.overlay #overlay-tabs li:last-of-type a {
  924. border-radius: 0 0.2em 0 0;
  925. }
  926. body.adminimal-skin-material.overlay ul.secondary {
  927. background: #F9F9F9;
  928. }
  929. body.adminimal-skin-material .rules-elements-add ul.action-links a,
  930. body.adminimal-skin-material ul.rules-operations a,
  931. body.adminimal-skin-material .rules-elements-add ul.action-links a {
  932. background: transparent;
  933. color: #2196F3;
  934. box-shadow: none;
  935. padding: 8px 18px;
  936. margin: 5px 0 0 0;
  937. }
  938. body.adminimal-skin-material .rules-elements-add ul.action-links a:hover,
  939. body.adminimal-skin-material ul.rules-operations a:hover,
  940. body.adminimal-skin-material .rules-elements-add ul.action-links a:hover {
  941. background: transparent;
  942. color: #2196F3;
  943. box-shadow: none;
  944. }
  945. body.adminimal-skin-material .rules-elements-add ul.action-links a:focus,
  946. body.adminimal-skin-material ul.rules-operations a:focus,
  947. body.adminimal-skin-material .rules-elements-add ul.action-links a:focus {
  948. text-decoration: none;
  949. }
  950. body.sticky-actions.adminimal-skin-material .form-actions.form-wrapper {
  951. padding: 20px 40px 20px;
  952. box-shadow: -20px 2px 40px rgba(0,0,0,0.2);
  953. border-bottom: none;
  954. }
  955. body.sticky-actions.adminimal-skin-material #page {
  956. margin-bottom: 80px;
  957. }