Same filename and directory in other branches
  1. 8.9.x core/themes/claro/css/components/jquery.ui/theme.css
  2. 9 core/themes/claro/css/components/jquery.ui/theme.css

Claro styles for jQuery UI. Overrides /core/assets/vendor/jquery.ui/themes/base/theme.css.

File

core/themes/claro/css/components/jquery.ui/theme.css
View source
  1. /*
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/3084859
  5. * @preserve
  6. */
  7. /**
  8. * @file
  9. * Claro styles for jQuery UI.
  10. * Overrides /core/assets/vendor/jquery.ui/themes/base/theme.css.
  11. */
  12. /**
  13. * Component containers
  14. */
  15. .ui-widget {
  16. background: none;
  17. }
  18. .ui-widget-content {
  19. border: none;
  20. }
  21. .ui-dialog {
  22. z-index: var(--jui-dialog-z-index);
  23. }
  24. /**
  25. * Interaction states
  26. */
  27. .ui-state-default,
  28. .ui-state-hover,
  29. .ui-state-focus,
  30. .ui-state-active {
  31. outline: 0;
  32. }
  33. .ui-state-highlight {
  34. font-weight: bold;
  35. }
  36. /**
  37. * Interaction cues
  38. */
  39. .ui-state-active,
  40. .ui-widget-content .ui-state-active {
  41. color: #840;
  42. }
  43. .ui-state-error,
  44. .ui-widget-content .ui-state-error {
  45. color: #fff;
  46. border-color: #d52;
  47. background: #e63;
  48. }
  49. .ui-state-disabled,
  50. .ui-widget-content .ui-state-disabled {
  51. opacity: 0.35;
  52. }
  53. .ui-priority-secondary,
  54. .ui-widget-content .ui-priority-secondary {
  55. opacity: 0.7;
  56. }
  57. /**
  58. * Icons
  59. */
  60. /* states and images */
  61. .ui-icon {
  62. display: block;
  63. overflow: hidden;
  64. width: 1rem;
  65. height: 1rem;
  66. text-indent: -6249.9375rem;
  67. background-image: url(../../../images/ui-icons-222222-256x240.png);
  68. background-repeat: no-repeat;
  69. }
  70. .ui-widget-content .ui-icon,
  71. .ui-widget-header .ui-icon {
  72. background-image: url(../../../images/ui-icons-222222-256x240.png);
  73. }
  74. .ui-state-default .ui-icon {
  75. background-image: url(../../../images/ui-icons-888888-256x240.png);
  76. }
  77. .ui-state-hover .ui-icon,
  78. .ui-state-focus .ui-icon,
  79. .ui-state-highlight .ui-icon {
  80. background-image: url(../../../images/ui-icons-454545-256x240.png);
  81. }
  82. .ui-state-active .ui-icon {
  83. background-image: url(../../../images/ui-icons-800000-256x240.png);
  84. }
  85. .ui-state-error .ui-icon,
  86. .ui-state-error-text .ui-icon {
  87. background-image: url(../../../images/ui-icons-ffffff-256x240.png);
  88. }
  89. .ui-widget p .ui-icon {
  90. margin: 2px 0.1875rem 0 0; /* LTR */
  91. }
  92. [dir="rtl"] .ui-widget p .ui-icon {
  93. margin: 2px 0 0 0.1875rem;
  94. }
  95. /* positioning */
  96. .ui-icon-carat-1-ne {
  97. background-position: -16px 0;
  98. }
  99. .ui-icon-carat-1-e {
  100. background-position: -32px 0;
  101. }
  102. .ui-icon-carat-1-se {
  103. background-position: -48px 0;
  104. }
  105. .ui-icon-carat-1-s {
  106. background-position: -64px 0;
  107. }
  108. .ui-icon-carat-1-sw {
  109. background-position: -80px 0;
  110. }
  111. .ui-icon-carat-1-w {
  112. background-position: -96px 0;
  113. }
  114. .ui-icon-carat-1-nw {
  115. background-position: -112px 0;
  116. }
  117. .ui-icon-carat-2-n-s {
  118. background-position: -128px 0;
  119. }
  120. .ui-icon-carat-2-e-w {
  121. background-position: -144px 0;
  122. }
  123. .ui-icon-triangle-1-n {
  124. background-position: 0 -16px;
  125. }
  126. .ui-icon-triangle-1-ne {
  127. background-position: -16px -16px;
  128. }
  129. .ui-icon-triangle-1-e {
  130. background-position: -32px -16px;
  131. }
  132. .ui-icon-triangle-1-se {
  133. background-position: -48px -16px;
  134. }
  135. .ui-icon-triangle-1-s {
  136. background-position: -64px -16px;
  137. }
  138. .ui-icon-triangle-1-sw {
  139. background-position: -80px -16px;
  140. }
  141. .ui-icon-triangle-1-w {
  142. background-position: -96px -16px;
  143. }
  144. .ui-icon-triangle-1-nw {
  145. background-position: -112px -16px;
  146. }
  147. .ui-icon-triangle-2-n-s {
  148. background-position: -128px -16px;
  149. }
  150. .ui-icon-triangle-2-e-w {
  151. background-position: -144px -16px;
  152. }
  153. .ui-icon-arrow-1-n {
  154. background-position: 0 -32px;
  155. }
  156. .ui-icon-arrow-1-ne {
  157. background-position: -16px -32px;
  158. }
  159. .ui-icon-arrow-1-e {
  160. background-position: -32px -32px;
  161. }
  162. .ui-icon-arrow-1-se {
  163. background-position: -48px -32px;
  164. }
  165. .ui-icon-arrow-1-s {
  166. background-position: -64px -32px;
  167. }
  168. .ui-icon-arrow-1-sw {
  169. background-position: -80px -32px;
  170. }
  171. .ui-icon-arrow-1-w {
  172. background-position: -96px -32px;
  173. }
  174. .ui-icon-arrow-1-nw {
  175. background-position: -112px -32px;
  176. }
  177. .ui-icon-arrow-2-n-s {
  178. background-position: -128px -32px;
  179. }
  180. .ui-icon-arrow-2-ne-sw {
  181. background-position: -144px -32px;
  182. }
  183. .ui-icon-arrow-2-e-w {
  184. background-position: -160px -32px;
  185. }
  186. .ui-icon-arrow-2-se-nw {
  187. background-position: -176px -32px;
  188. }
  189. .ui-icon-arrowstop-1-n {
  190. background-position: -192px -32px;
  191. }
  192. .ui-icon-arrowstop-1-e {
  193. background-position: -208px -32px;
  194. }
  195. .ui-icon-arrowstop-1-s {
  196. background-position: -224px -32px;
  197. }
  198. .ui-icon-arrowstop-1-w {
  199. background-position: -240px -32px;
  200. }
  201. .ui-icon-arrowthick-1-n {
  202. background-position: 0 -48px;
  203. }
  204. .ui-icon-arrowthick-1-ne {
  205. background-position: -16px -48px;
  206. }
  207. .ui-icon-arrowthick-1-e {
  208. background-position: -32px -48px;
  209. }
  210. .ui-icon-arrowthick-1-se {
  211. background-position: -48px -48px;
  212. }
  213. .ui-icon-arrowthick-1-s {
  214. background-position: -64px -48px;
  215. }
  216. .ui-icon-arrowthick-1-sw {
  217. background-position: -80px -48px;
  218. }
  219. .ui-icon-arrowthick-1-w {
  220. background-position: -96px -48px;
  221. }
  222. .ui-icon-arrowthick-1-nw {
  223. background-position: -112px -48px;
  224. }
  225. .ui-icon-arrowthick-2-n-s {
  226. background-position: -128px -48px;
  227. }
  228. .ui-icon-arrowthick-2-ne-sw {
  229. background-position: -144px -48px;
  230. }
  231. .ui-icon-arrowthick-2-e-w {
  232. background-position: -160px -48px;
  233. }
  234. .ui-icon-arrowthick-2-se-nw {
  235. background-position: -176px -48px;
  236. }
  237. .ui-icon-arrowthickstop-1-n {
  238. background-position: -192px -48px;
  239. }
  240. .ui-icon-arrowthickstop-1-e {
  241. background-position: -208px -48px;
  242. }
  243. .ui-icon-arrowthickstop-1-s {
  244. background-position: -224px -48px;
  245. }
  246. .ui-icon-arrowthickstop-1-w {
  247. background-position: -240px -48px;
  248. }
  249. .ui-icon-arrowreturnthick-1-w {
  250. background-position: 0 -64px;
  251. }
  252. .ui-icon-arrowreturnthick-1-n {
  253. background-position: -16px -64px;
  254. }
  255. .ui-icon-arrowreturnthick-1-e {
  256. background-position: -32px -64px;
  257. }
  258. .ui-icon-arrowreturnthick-1-s {
  259. background-position: -48px -64px;
  260. }
  261. .ui-icon-arrowreturn-1-w {
  262. background-position: -64px -64px;
  263. }
  264. .ui-icon-arrowreturn-1-n {
  265. background-position: -80px -64px;
  266. }
  267. .ui-icon-arrowreturn-1-e {
  268. background-position: -96px -64px;
  269. }
  270. .ui-icon-arrowreturn-1-s {
  271. background-position: -112px -64px;
  272. }
  273. .ui-icon-arrowrefresh-1-w {
  274. background-position: -128px -64px;
  275. }
  276. .ui-icon-arrowrefresh-1-n {
  277. background-position: -144px -64px;
  278. }
  279. .ui-icon-arrowrefresh-1-e {
  280. background-position: -160px -64px;
  281. }
  282. .ui-icon-arrowrefresh-1-s {
  283. background-position: -176px -64px;
  284. }
  285. .ui-icon-arrow-4 {
  286. background-position: 0 -80px;
  287. }
  288. .ui-icon-arrow-4-diag {
  289. background-position: -16px -80px;
  290. }
  291. .ui-icon-extlink {
  292. background-position: -32px -80px;
  293. }
  294. .ui-icon-newwin {
  295. background-position: -48px -80px;
  296. }
  297. .ui-icon-refresh {
  298. background-position: -64px -80px;
  299. }
  300. .ui-icon-shuffle {
  301. background-position: -80px -80px;
  302. }
  303. .ui-icon-transfer-e-w {
  304. background-position: -96px -80px;
  305. }
  306. .ui-icon-transferthick-e-w {
  307. background-position: -112px -80px;
  308. }
  309. .ui-icon-folder-collapsed {
  310. background-position: 0 -96px;
  311. }
  312. .ui-icon-folder-open {
  313. background-position: -16px -96px;
  314. }
  315. .ui-icon-document {
  316. background-position: -32px -96px;
  317. }
  318. .ui-icon-document-b {
  319. background-position: -48px -96px;
  320. }
  321. .ui-icon-note {
  322. background-position: -64px -96px;
  323. }
  324. .ui-icon-mail-closed {
  325. background-position: -80px -96px;
  326. }
  327. .ui-icon-mail-open {
  328. background-position: -96px -96px;
  329. }
  330. .ui-icon-suitcase {
  331. background-position: -112px -96px;
  332. }
  333. .ui-icon-comment {
  334. background-position: -128px -96px;
  335. }
  336. .ui-icon-person {
  337. background-position: -144px -96px;
  338. }
  339. .ui-icon-print {
  340. background-position: -160px -96px;
  341. }
  342. .ui-icon-trash {
  343. background-position: -176px -96px;
  344. }
  345. .ui-icon-locked {
  346. background-position: -192px -96px;
  347. }
  348. .ui-icon-unlocked {
  349. background-position: -208px -96px;
  350. }
  351. .ui-icon-bookmark {
  352. background-position: -224px -96px;
  353. }
  354. .ui-icon-tag {
  355. background-position: -240px -96px;
  356. }
  357. .ui-icon-home {
  358. background-position: 0 -112px;
  359. }
  360. .ui-icon-flag {
  361. background-position: -16px -112px;
  362. }
  363. .ui-icon-calendar {
  364. background-position: -32px -112px;
  365. }
  366. .ui-icon-cart {
  367. background-position: -48px -112px;
  368. }
  369. .ui-icon-pencil {
  370. background-position: -64px -112px;
  371. }
  372. .ui-icon-clock {
  373. background-position: -80px -112px;
  374. }
  375. .ui-icon-disk {
  376. background-position: -96px -112px;
  377. }
  378. .ui-icon-calculator {
  379. background-position: -112px -112px;
  380. }
  381. .ui-icon-zoomin {
  382. background-position: -128px -112px;
  383. }
  384. .ui-icon-zoomout {
  385. background-position: -144px -112px;
  386. }
  387. .ui-icon-search {
  388. background-position: -160px -112px;
  389. }
  390. .ui-icon-wrench {
  391. background-position: -176px -112px;
  392. }
  393. .ui-icon-gear {
  394. background-position: -192px -112px;
  395. }
  396. .ui-icon-heart {
  397. background-position: -208px -112px;
  398. }
  399. .ui-icon-star {
  400. background-position: -224px -112px;
  401. }
  402. .ui-icon-link {
  403. background-position: -240px -112px;
  404. }
  405. .ui-icon-cancel {
  406. background-position: 0 -128px;
  407. }
  408. .ui-icon-plus {
  409. background-position: -16px -128px;
  410. }
  411. .ui-icon-plusthick {
  412. background-position: -32px -128px;
  413. }
  414. .ui-icon-minus {
  415. background-position: -48px -128px;
  416. }
  417. .ui-icon-minusthick {
  418. background-position: -64px -128px;
  419. }
  420. .ui-icon-close {
  421. background-position: -80px -128px;
  422. }
  423. .ui-icon-closethick {
  424. background-position: -96px -128px;
  425. }
  426. .ui-icon-key {
  427. background-position: -112px -128px;
  428. }
  429. .ui-icon-lightbulb {
  430. background-position: -128px -128px;
  431. }
  432. .ui-icon-scissors {
  433. background-position: -144px -128px;
  434. }
  435. .ui-icon-clipboard {
  436. background-position: -160px -128px;
  437. }
  438. .ui-icon-copy {
  439. background-position: -176px -128px;
  440. }
  441. .ui-icon-contact {
  442. background-position: -192px -128px;
  443. }
  444. .ui-icon-image {
  445. background-position: -208px -128px;
  446. }
  447. .ui-icon-video {
  448. background-position: -224px -128px;
  449. }
  450. .ui-icon-script {
  451. background-position: -240px -128px;
  452. }
  453. .ui-icon-alert {
  454. background-position: 0 -144px;
  455. }
  456. .ui-icon-info {
  457. background-position: -16px -144px;
  458. }
  459. .ui-icon-notice {
  460. background-position: -32px -144px;
  461. }
  462. .ui-icon-help {
  463. background-position: -48px -144px;
  464. }
  465. .ui-icon-check {
  466. background-position: -64px -144px;
  467. }
  468. .ui-icon-bullet {
  469. background-position: -80px -144px;
  470. }
  471. .ui-icon-radio-off {
  472. background-position: -96px -144px;
  473. }
  474. .ui-icon-radio-on {
  475. background-position: -112px -144px;
  476. }
  477. .ui-icon-pin-w {
  478. background-position: -128px -144px;
  479. }
  480. .ui-icon-pin-s {
  481. background-position: -144px -144px;
  482. }
  483. .ui-icon-play {
  484. background-position: 0 -160px;
  485. }
  486. .ui-icon-pause {
  487. background-position: -16px -160px;
  488. }
  489. .ui-icon-seek-next {
  490. background-position: -32px -160px;
  491. }
  492. .ui-icon-seek-prev {
  493. background-position: -48px -160px;
  494. }
  495. .ui-icon-seek-end {
  496. background-position: -64px -160px;
  497. }
  498. .ui-icon-seek-first {
  499. background-position: -80px -160px;
  500. }
  501. .ui-icon-stop {
  502. background-position: -96px -160px;
  503. }
  504. .ui-icon-eject {
  505. background-position: -112px -160px;
  506. }
  507. .ui-icon-volume-off {
  508. background-position: -128px -160px;
  509. }
  510. .ui-icon-volume-on {
  511. background-position: -144px -160px;
  512. }
  513. .ui-icon-power {
  514. background-position: 0 -176px;
  515. }
  516. .ui-icon-signal-diag {
  517. background-position: -16px -176px;
  518. }
  519. .ui-icon-signal {
  520. background-position: -32px -176px;
  521. }
  522. .ui-icon-battery-0 {
  523. background-position: -48px -176px;
  524. }
  525. .ui-icon-battery-1 {
  526. background-position: -64px -176px;
  527. }
  528. .ui-icon-battery-2 {
  529. background-position: -80px -176px;
  530. }
  531. .ui-icon-battery-3 {
  532. background-position: -96px -176px;
  533. }
  534. .ui-icon-circle-plus {
  535. background-position: 0 -192px;
  536. }
  537. .ui-icon-circle-minus {
  538. background-position: -16px -192px;
  539. }
  540. .ui-icon-circle-close {
  541. background-position: -32px -192px;
  542. }
  543. .ui-icon-circle-triangle-e {
  544. background-position: -48px -192px;
  545. }
  546. .ui-icon-circle-triangle-s {
  547. background-position: -64px -192px;
  548. }
  549. .ui-icon-circle-triangle-w {
  550. background-position: -80px -192px;
  551. }
  552. .ui-icon-circle-triangle-n {
  553. background-position: -96px -192px;
  554. }
  555. .ui-icon-circle-arrow-e {
  556. background-position: -112px -192px;
  557. }
  558. .ui-icon-circle-arrow-s {
  559. background-position: -128px -192px;
  560. }
  561. .ui-icon-circle-arrow-w {
  562. background-position: -144px -192px;
  563. }
  564. .ui-icon-circle-arrow-n {
  565. background-position: -160px -192px;
  566. }
  567. .ui-icon-circle-zoomin {
  568. background-position: -176px -192px;
  569. }
  570. .ui-icon-circle-zoomout {
  571. background-position: -192px -192px;
  572. }
  573. .ui-icon-circle-check {
  574. background-position: -208px -192px;
  575. }
  576. .ui-icon-circlesmall-plus {
  577. background-position: 0 -208px;
  578. }
  579. .ui-icon-circlesmall-minus {
  580. background-position: -16px -208px;
  581. }
  582. .ui-icon-circlesmall-close {
  583. background-position: -32px -208px;
  584. }
  585. .ui-icon-squaresmall-plus {
  586. background-position: -48px -208px;
  587. }
  588. .ui-icon-squaresmall-minus {
  589. background-position: -64px -208px;
  590. }
  591. .ui-icon-squaresmall-close {
  592. background-position: -80px -208px;
  593. }
  594. .ui-icon-grip-dotted-vertical {
  595. background-position: 0 -224px;
  596. }
  597. .ui-icon-grip-dotted-horizontal {
  598. background-position: -16px -224px;
  599. }
  600. .ui-icon-grip-solid-vertical {
  601. background-position: -32px -224px;
  602. }
  603. .ui-icon-grip-solid-horizontal {
  604. background-position: -48px -224px;
  605. }
  606. .ui-icon-gripsmall-diagonal-se {
  607. background-position: -64px -224px;
  608. }
  609. .ui-icon-grip-diagonal-se {
  610. background-position: -80px -224px;
  611. }
  612. .ui-icon-carat-1-n {
  613. background-position: 0 0;
  614. }
  615. /**
  616. * Accordion
  617. */
  618. .ui-accordion {
  619. border: none;
  620. }
  621. .ui-accordion .ui-accordion-header {
  622. text-transform: uppercase;
  623. border: solid 1px #ccc;
  624. }
  625. .ui-accordion h3.ui-accordion-header,
  626. #block-system-main h3.ui-accordion-header {
  627. margin: 0.625rem 0;
  628. font-size: 1.1em;
  629. }
  630. #block-system-main .ui-accordion h3.ui-state-active,
  631. .ui-accordion h3.ui-state-active {
  632. margin-bottom: 0;
  633. }
  634. .ui-accordion .ui-accordion-header a {
  635. display: block;
  636. }
  637. .ui-accordion .ui-accordion-content {
  638. padding: 1em 2.2em;
  639. border: solid 1px #ccc;
  640. border-top: 0;
  641. }
  642. /**
  643. * Tabs
  644. */
  645. .ui-tabs {
  646. padding: 0;
  647. }
  648. .ui-tabs .ui-tabs-nav {
  649. margin: 0;
  650. padding: 0.3125rem 0.625rem 0.25rem;
  651. border-bottom: solid 1px #ccc;
  652. border-bottom-right-radius: 0;
  653. border-bottom-left-radius: 0;
  654. line-height: 1.25rem;
  655. }
  656. .ui-tabs .ui-tabs-nav li {
  657. margin: 0;
  658. padding: 0 1em 0 0.625rem; /* LTR */
  659. list-style: none;
  660. }
  661. [dir="rtl"] .ui-tabs .ui-tabs-nav li {
  662. padding: 0 0.625rem 0 1em;
  663. }
  664. .ui-tabs .ui-tabs-nav li a {
  665. float: none;
  666. padding: 0 0.625rem;
  667. border-radius: 0.625rem;
  668. }
  669. .ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
  670. color: #fff;
  671. background: #666;
  672. font-weight: normal;
  673. }
  674. /**
  675. * Overlays
  676. */
  677. .ui-widget-overlay {
  678. z-index: calc(var(--jui-dialog-z-index) - 1);
  679. opacity: 0.7;
  680. background: var(--color-text);
  681. }
  682. /**
  683. * Slider
  684. */
  685. .ui-slider {
  686. border: solid 1px #ccc;
  687. }
  688. .ui-slider .ui-slider-range {
  689. background: #e4e4e4;
  690. }
  691. .ui-slider .ui-slider-handle {
  692. border: 1px solid #e4e4e4;
  693. border-right-color: #d2d2d2;
  694. border-bottom: 1px solid #b4b4b4;
  695. border-left-color: #d2d2d2;
  696. border-radius: 0.25rem;
  697. background-color: #e4e4e4;
  698. }
  699. .ui-slider a.ui-state-active,
  700. .ui-slider .ui-slider-handle:active {
  701. color: #fff;
  702. border: solid 1px #555;
  703. background: #666;
  704. }
  705. /**
  706. * Progress Bar
  707. */
  708. .ui-progressbar {
  709. height: 1.4em;
  710. background: #e4e4e4;
  711. }
  712. .ui-progressbar .ui-progressbar-value {
  713. height: 1.5em;
  714. background: var(--color-blue-600) url(../../../../misc/progress.gif);
  715. }
  716. /**
  717. * Autocomplete
  718. */
  719. .ui-autocomplete {
  720. color: var(--jui-dropdown-fg-color);
  721. border: var(--input-border-size) solid var(--jui-dropdown-border-color);
  722. border-top: 0;
  723. border-radius: 0 0 var(--input-border-radius-size) var(--input-border-radius-size);
  724. background: var(--jui-dropdown-bg-color);
  725. box-shadow: 0 0.125rem 0.25rem var(--jui-dropdown-shadow-color);
  726. }
  727. /* Suggestion list */
  728. .ui-autocomplete .ui-menu-item {
  729. list-style: none;
  730. }
  731. .ui-autocomplete .ui-menu-item-wrapper {
  732. display: block;
  733. padding: 0.75rem 0.9375rem;
  734. color: inherit;
  735. background: inherit;
  736. }
  737. .ui-autocomplete .ui-menu-item-wrapper:focus,
  738. .ui-autocomplete .ui-menu-item-wrapper:hover {
  739. -webkit-text-decoration: none;
  740. text-decoration: none;
  741. }
  742. .ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
  743. margin: 0;
  744. color: var(--jui-dropdown--active-fg-color);
  745. background: var(--jui-dropdown--active-bg-color);
  746. }
  747. .ui-autocomplete .ui-menu-item.ui-state-focus,
  748. .autocomplete .ui-menu-item.ui-state-hover {
  749. margin: 0;
  750. background: var(--color-blue-600);
  751. }
  752. .ui-autocomplete .ui-state-focus a,
  753. .autocomplete .ui-state-hover a {
  754. color: #fff;
  755. }