popup.css 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815
  1. /*!
  2. * # Fomantic-UI - Popup
  3. * http://github.com/fomantic/Fomantic-UI/
  4. *
  5. *
  6. * Released under the MIT license
  7. * http://opensource.org/licenses/MIT
  8. *
  9. */
  10. /*******************************
  11. Popup
  12. *******************************/
  13. .ui.popup {
  14. display: none;
  15. position: absolute;
  16. top: 0;
  17. right: 0;
  18. /* Fixes content being squished when inline (moz only) */
  19. min-width: -webkit-min-content;
  20. min-width: -moz-min-content;
  21. min-width: min-content;
  22. z-index: 1900;
  23. border: 1px solid #D4D4D5;
  24. line-height: 1.4285em;
  25. max-width: 250px;
  26. background: #FFFFFF;
  27. padding: 0.833em 1em;
  28. font-weight: normal;
  29. font-style: normal;
  30. color: rgba(0, 0, 0, 0.87);
  31. border-radius: 0.28571429rem;
  32. -webkit-box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  33. box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  34. }
  35. .ui.popup > .header {
  36. padding: 0;
  37. font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  38. font-size: 1.14285714em;
  39. line-height: 1.2;
  40. font-weight: bold;
  41. }
  42. .ui.popup > .header + .content {
  43. padding-top: 0.5em;
  44. }
  45. .ui.popup:before {
  46. position: absolute;
  47. content: '';
  48. width: 0.71428571em;
  49. height: 0.71428571em;
  50. background: #FFFFFF;
  51. -webkit-transform: rotate(45deg);
  52. transform: rotate(45deg);
  53. z-index: 1901;
  54. -webkit-box-shadow: 1px 1px 0 0 #bababc;
  55. box-shadow: 1px 1px 0 0 #bababc;
  56. }
  57. /*******************************
  58. Types
  59. *******************************/
  60. /*--------------
  61. Tooltip
  62. ---------------*/
  63. /* Content */
  64. [data-tooltip] {
  65. position: relative;
  66. }
  67. /* Arrow */
  68. [data-tooltip]:before {
  69. pointer-events: none;
  70. position: absolute;
  71. content: '';
  72. font-size: 1rem;
  73. width: 0.71428571em;
  74. height: 0.71428571em;
  75. background: #FFFFFF;
  76. -webkit-transform: rotate(45deg);
  77. transform: rotate(45deg);
  78. z-index: 1901;
  79. -webkit-box-shadow: 1px 1px 0 0 #bababc;
  80. box-shadow: 1px 1px 0 0 #bababc;
  81. }
  82. /* Popup */
  83. [data-tooltip]:after {
  84. pointer-events: none;
  85. content: attr(data-tooltip);
  86. position: absolute;
  87. text-transform: none;
  88. text-align: left;
  89. white-space: nowrap;
  90. font-size: 1rem;
  91. border: 1px solid #D4D4D5;
  92. line-height: 1.4285em;
  93. max-width: none;
  94. background: #FFFFFF;
  95. padding: 0.833em 1em;
  96. font-weight: normal;
  97. font-style: normal;
  98. color: rgba(0, 0, 0, 0.87);
  99. border-radius: 0.28571429rem;
  100. -webkit-box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  101. box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  102. z-index: 1900;
  103. }
  104. /* Default Position (Top Center) */
  105. [data-tooltip]:not([data-position]):before {
  106. top: auto;
  107. right: auto;
  108. bottom: 100%;
  109. left: 50%;
  110. background: #FFFFFF;
  111. margin-left: -0.07142857rem;
  112. margin-bottom: 0.14285714rem;
  113. }
  114. [data-tooltip]:not([data-position]):after {
  115. left: 50%;
  116. -webkit-transform: translateX(-50%);
  117. transform: translateX(-50%);
  118. bottom: 100%;
  119. margin-bottom: 0.5em;
  120. }
  121. /* Animation */
  122. [data-tooltip]:before,
  123. [data-tooltip]:after {
  124. pointer-events: none;
  125. visibility: hidden;
  126. opacity: 0;
  127. -webkit-transition: opacity 0.1s ease, -webkit-transform 0.1s ease;
  128. transition: opacity 0.1s ease, -webkit-transform 0.1s ease;
  129. transition: transform 0.1s ease, opacity 0.1s ease;
  130. transition: transform 0.1s ease, opacity 0.1s ease, -webkit-transform 0.1s ease;
  131. }
  132. [data-tooltip]:before {
  133. -webkit-transform: rotate(45deg) scale(0) !important;
  134. transform: rotate(45deg) scale(0) !important;
  135. -webkit-transform-origin: center top;
  136. transform-origin: center top;
  137. }
  138. [data-tooltip]:after {
  139. -webkit-transform-origin: center bottom;
  140. transform-origin: center bottom;
  141. }
  142. [data-tooltip]:hover:before,
  143. [data-tooltip]:hover:after {
  144. visibility: visible;
  145. pointer-events: auto;
  146. opacity: 1;
  147. }
  148. [data-tooltip]:hover:before {
  149. -webkit-transform: rotate(45deg) scale(1) !important;
  150. transform: rotate(45deg) scale(1) !important;
  151. }
  152. /* Animation Position */
  153. [data-tooltip]:after,
  154. [data-tooltip][data-position="top center"]:after,
  155. [data-tooltip][data-position="bottom center"]:after {
  156. -webkit-transform: translateX(-50%) scale(0) !important;
  157. transform: translateX(-50%) scale(0) !important;
  158. }
  159. [data-tooltip]:hover:after,
  160. [data-tooltip][data-position="bottom center"]:hover:after {
  161. -webkit-transform: translateX(-50%) scale(1) !important;
  162. transform: translateX(-50%) scale(1) !important;
  163. }
  164. [data-tooltip][data-position="left center"]:after,
  165. [data-tooltip][data-position="right center"]:after {
  166. -webkit-transform: translateY(-50%) scale(0) !important;
  167. transform: translateY(-50%) scale(0) !important;
  168. }
  169. [data-tooltip][data-position="left center"]:hover:after,
  170. [data-tooltip][data-position="right center"]:hover:after {
  171. -webkit-transform: translateY(-50%) scale(1) !important;
  172. transform: translateY(-50%) scale(1) !important;
  173. }
  174. [data-tooltip][data-position="top left"]:after,
  175. [data-tooltip][data-position="top right"]:after,
  176. [data-tooltip][data-position="bottom left"]:after,
  177. [data-tooltip][data-position="bottom right"]:after {
  178. -webkit-transform: scale(0) !important;
  179. transform: scale(0) !important;
  180. }
  181. [data-tooltip][data-position="top left"]:hover:after,
  182. [data-tooltip][data-position="top right"]:hover:after,
  183. [data-tooltip][data-position="bottom left"]:hover:after,
  184. [data-tooltip][data-position="bottom right"]:hover:after {
  185. -webkit-transform: scale(1) !important;
  186. transform: scale(1) !important;
  187. }
  188. [data-tooltip][data-variation~="fixed"]:after {
  189. white-space: normal;
  190. width: 250px;
  191. }
  192. [data-tooltip][data-variation*="wide fixed"]:after {
  193. width: 350px;
  194. }
  195. [data-tooltip][data-variation*="very wide fixed"]:after {
  196. width: 550px;
  197. }
  198. @media only screen and (max-width: 767.98px) {
  199. [data-tooltip][data-variation~="fixed"]:after {
  200. width: 250px;
  201. }
  202. }
  203. /*--------------
  204. Inverted
  205. ---------------*/
  206. /* Arrow */
  207. [data-tooltip][data-inverted]:before {
  208. -webkit-box-shadow: none !important;
  209. box-shadow: none !important;
  210. }
  211. /* Arrow Position */
  212. [data-tooltip][data-inverted]:before {
  213. background: #1B1C1D;
  214. }
  215. /* Popup */
  216. [data-tooltip][data-inverted]:after {
  217. background: #1B1C1D;
  218. color: #FFFFFF;
  219. border: none;
  220. -webkit-box-shadow: none;
  221. box-shadow: none;
  222. }
  223. [data-tooltip][data-inverted]:after .header {
  224. background: none;
  225. color: #FFFFFF;
  226. }
  227. /*--------------
  228. Position
  229. ---------------*/
  230. [data-position~="top"][data-tooltip]:before {
  231. background: #FFFFFF;
  232. }
  233. /* Top Center */
  234. [data-position="top center"][data-tooltip]:after {
  235. top: auto;
  236. right: auto;
  237. left: 50%;
  238. bottom: 100%;
  239. -webkit-transform: translateX(-50%);
  240. transform: translateX(-50%);
  241. margin-bottom: 0.5em;
  242. }
  243. [data-position="top center"][data-tooltip]:before {
  244. top: auto;
  245. right: auto;
  246. bottom: 100%;
  247. left: 50%;
  248. background: #FFFFFF;
  249. margin-left: -0.07142857rem;
  250. margin-bottom: 0.14285714rem;
  251. }
  252. /* Top Left */
  253. [data-position="top left"][data-tooltip]:after {
  254. top: auto;
  255. right: auto;
  256. left: 0;
  257. bottom: 100%;
  258. margin-bottom: 0.5em;
  259. }
  260. [data-position="top left"][data-tooltip]:before {
  261. top: auto;
  262. right: auto;
  263. bottom: 100%;
  264. left: 1em;
  265. margin-left: -0.07142857rem;
  266. margin-bottom: 0.14285714rem;
  267. }
  268. /* Top Right */
  269. [data-position="top right"][data-tooltip]:after {
  270. top: auto;
  271. left: auto;
  272. right: 0;
  273. bottom: 100%;
  274. margin-bottom: 0.5em;
  275. }
  276. [data-position="top right"][data-tooltip]:before {
  277. top: auto;
  278. left: auto;
  279. bottom: 100%;
  280. right: 1em;
  281. margin-left: -0.07142857rem;
  282. margin-bottom: 0.14285714rem;
  283. }
  284. [data-position~="bottom"][data-tooltip]:before {
  285. background: #FFFFFF;
  286. -webkit-box-shadow: -1px -1px 0 0 #bababc;
  287. box-shadow: -1px -1px 0 0 #bababc;
  288. }
  289. /* Bottom Center */
  290. [data-position="bottom center"][data-tooltip]:after {
  291. bottom: auto;
  292. right: auto;
  293. left: 50%;
  294. top: 100%;
  295. -webkit-transform: translateX(-50%);
  296. transform: translateX(-50%);
  297. margin-top: 0.5em;
  298. }
  299. [data-position="bottom center"][data-tooltip]:before {
  300. bottom: auto;
  301. right: auto;
  302. top: 100%;
  303. left: 50%;
  304. margin-left: -0.07142857rem;
  305. margin-top: 0.14285714rem;
  306. }
  307. /* Bottom Left */
  308. [data-position="bottom left"][data-tooltip]:after {
  309. left: 0;
  310. top: 100%;
  311. margin-top: 0.5em;
  312. }
  313. [data-position="bottom left"][data-tooltip]:before {
  314. bottom: auto;
  315. right: auto;
  316. top: 100%;
  317. left: 1em;
  318. margin-left: -0.07142857rem;
  319. margin-top: 0.14285714rem;
  320. }
  321. /* Bottom Right */
  322. [data-position="bottom right"][data-tooltip]:after {
  323. right: 0;
  324. top: 100%;
  325. margin-top: 0.5em;
  326. }
  327. [data-position="bottom right"][data-tooltip]:before {
  328. bottom: auto;
  329. left: auto;
  330. top: 100%;
  331. right: 1em;
  332. margin-left: -0.14285714rem;
  333. margin-top: 0.07142857rem;
  334. }
  335. /* Left Center */
  336. [data-position="left center"][data-tooltip]:after {
  337. right: 100%;
  338. top: 50%;
  339. margin-right: 0.5em;
  340. -webkit-transform: translateY(-50%);
  341. transform: translateY(-50%);
  342. }
  343. [data-position="left center"][data-tooltip]:before {
  344. right: 100%;
  345. top: 50%;
  346. margin-top: -0.14285714rem;
  347. margin-right: -0.07142857rem;
  348. background: #FFFFFF;
  349. -webkit-box-shadow: 1px -1px 0 0 #bababc;
  350. box-shadow: 1px -1px 0 0 #bababc;
  351. }
  352. /* Right Center */
  353. [data-position="right center"][data-tooltip]:after {
  354. left: 100%;
  355. top: 50%;
  356. margin-left: 0.5em;
  357. -webkit-transform: translateY(-50%);
  358. transform: translateY(-50%);
  359. }
  360. [data-position="right center"][data-tooltip]:before {
  361. left: 100%;
  362. top: 50%;
  363. margin-top: -0.07142857rem;
  364. margin-left: 0.14285714rem;
  365. background: #FFFFFF;
  366. -webkit-box-shadow: -1px 1px 0 0 #bababc;
  367. box-shadow: -1px 1px 0 0 #bababc;
  368. }
  369. /* Inverted Arrow Color */
  370. [data-inverted][data-position~="bottom"][data-tooltip]:before {
  371. background: #1B1C1D;
  372. -webkit-box-shadow: -1px -1px 0 0 #bababc;
  373. box-shadow: -1px -1px 0 0 #bababc;
  374. }
  375. [data-inverted][data-position="left center"][data-tooltip]:before {
  376. background: #1B1C1D;
  377. -webkit-box-shadow: 1px -1px 0 0 #bababc;
  378. box-shadow: 1px -1px 0 0 #bababc;
  379. }
  380. [data-inverted][data-position="right center"][data-tooltip]:before {
  381. background: #1B1C1D;
  382. -webkit-box-shadow: -1px 1px 0 0 #bababc;
  383. box-shadow: -1px 1px 0 0 #bababc;
  384. }
  385. [data-inverted][data-position~="top"][data-tooltip]:before {
  386. background: #1B1C1D;
  387. }
  388. [data-position~="bottom"][data-tooltip]:before {
  389. -webkit-transform-origin: center bottom;
  390. transform-origin: center bottom;
  391. }
  392. [data-position~="bottom"][data-tooltip]:after {
  393. -webkit-transform-origin: center top;
  394. transform-origin: center top;
  395. }
  396. [data-position="left center"][data-tooltip]:before {
  397. -webkit-transform-origin: top center;
  398. transform-origin: top center;
  399. }
  400. [data-position="left center"][data-tooltip]:after {
  401. -webkit-transform-origin: right center;
  402. transform-origin: right center;
  403. }
  404. [data-position="right center"][data-tooltip]:before {
  405. -webkit-transform-origin: right center;
  406. transform-origin: right center;
  407. }
  408. [data-position="right center"][data-tooltip]:after {
  409. -webkit-transform-origin: left center;
  410. transform-origin: left center;
  411. }
  412. /*--------------
  413. Basic
  414. ---------------*/
  415. [data-tooltip][data-variation~="basic"]:before {
  416. display: none;
  417. }
  418. /*--------------
  419. Spacing
  420. ---------------*/
  421. .ui.popup {
  422. margin: 0;
  423. }
  424. /* Extending from Top */
  425. .ui.top.popup {
  426. margin: 0 0 0.71428571em;
  427. }
  428. .ui.top.left.popup {
  429. -webkit-transform-origin: left bottom;
  430. transform-origin: left bottom;
  431. }
  432. .ui.top.center.popup {
  433. -webkit-transform-origin: center bottom;
  434. transform-origin: center bottom;
  435. }
  436. .ui.top.right.popup {
  437. -webkit-transform-origin: right bottom;
  438. transform-origin: right bottom;
  439. }
  440. /* Extending from Vertical Center */
  441. .ui.left.center.popup {
  442. margin: 0 0.71428571em 0 0;
  443. -webkit-transform-origin: right 50%;
  444. transform-origin: right 50%;
  445. }
  446. .ui.right.center.popup {
  447. margin: 0 0 0 0.71428571em;
  448. -webkit-transform-origin: left 50%;
  449. transform-origin: left 50%;
  450. }
  451. /* Extending from Bottom */
  452. .ui.bottom.popup {
  453. margin: 0.71428571em 0 0;
  454. }
  455. .ui.bottom.left.popup {
  456. -webkit-transform-origin: left top;
  457. transform-origin: left top;
  458. }
  459. .ui.bottom.center.popup {
  460. -webkit-transform-origin: center top;
  461. transform-origin: center top;
  462. }
  463. .ui.bottom.right.popup {
  464. -webkit-transform-origin: right top;
  465. transform-origin: right top;
  466. }
  467. /*--------------
  468. Pointer
  469. ---------------*/
  470. /*--- Below ---*/
  471. .ui.bottom.center.popup:before {
  472. margin-left: -0.30714286em;
  473. top: -0.30714286em;
  474. left: 50%;
  475. right: auto;
  476. bottom: auto;
  477. -webkit-box-shadow: -1px -1px 0 0 #bababc;
  478. box-shadow: -1px -1px 0 0 #bababc;
  479. }
  480. .ui.bottom.left.popup {
  481. margin-left: 0;
  482. }
  483. /*rtl:rename*/
  484. .ui.bottom.left.popup:before {
  485. top: -0.30714286em;
  486. left: 1em;
  487. right: auto;
  488. bottom: auto;
  489. margin-left: 0;
  490. -webkit-box-shadow: -1px -1px 0 0 #bababc;
  491. box-shadow: -1px -1px 0 0 #bababc;
  492. }
  493. .ui.bottom.right.popup {
  494. margin-right: 0;
  495. }
  496. /*rtl:rename*/
  497. .ui.bottom.right.popup:before {
  498. top: -0.30714286em;
  499. right: 1em;
  500. bottom: auto;
  501. left: auto;
  502. margin-left: 0;
  503. -webkit-box-shadow: -1px -1px 0 0 #bababc;
  504. box-shadow: -1px -1px 0 0 #bababc;
  505. }
  506. /*--- Above ---*/
  507. .ui.top.center.popup:before {
  508. top: auto;
  509. right: auto;
  510. bottom: -0.30714286em;
  511. left: 50%;
  512. margin-left: -0.30714286em;
  513. }
  514. .ui.top.left.popup {
  515. margin-left: 0;
  516. }
  517. /*rtl:rename*/
  518. .ui.top.left.popup:before {
  519. bottom: -0.30714286em;
  520. left: 1em;
  521. top: auto;
  522. right: auto;
  523. margin-left: 0;
  524. }
  525. .ui.top.right.popup {
  526. margin-right: 0;
  527. }
  528. /*rtl:rename*/
  529. .ui.top.right.popup:before {
  530. bottom: -0.30714286em;
  531. right: 1em;
  532. top: auto;
  533. left: auto;
  534. margin-left: 0;
  535. }
  536. /*--- Left Center ---*/
  537. /*rtl:rename*/
  538. .ui.left.center.popup:before {
  539. top: 50%;
  540. right: -0.30714286em;
  541. bottom: auto;
  542. left: auto;
  543. margin-top: -0.30714286em;
  544. -webkit-box-shadow: 1px -1px 0 0 #bababc;
  545. box-shadow: 1px -1px 0 0 #bababc;
  546. }
  547. /*--- Right Center ---*/
  548. /*rtl:rename*/
  549. .ui.right.center.popup:before {
  550. top: 50%;
  551. left: -0.30714286em;
  552. bottom: auto;
  553. right: auto;
  554. margin-top: -0.30714286em;
  555. -webkit-box-shadow: -1px 1px 0 0 #bababc;
  556. box-shadow: -1px 1px 0 0 #bababc;
  557. }
  558. .ui.right.center.popup:before,
  559. .ui.left.center.popup:before {
  560. background: #FFFFFF;
  561. }
  562. /* Arrow Color By Location */
  563. .ui.bottom.popup:before {
  564. background: #FFFFFF;
  565. }
  566. .ui.top.popup:before {
  567. background: #FFFFFF;
  568. }
  569. /* Inverted Arrow Color */
  570. .ui.inverted.bottom.popup:before {
  571. background: #1B1C1D;
  572. }
  573. .ui.inverted.right.center.popup:before,
  574. .ui.inverted.left.center.popup:before {
  575. background: #1B1C1D;
  576. }
  577. .ui.inverted.top.popup:before {
  578. background: #1B1C1D;
  579. }
  580. /*******************************
  581. Coupling
  582. *******************************/
  583. /* Immediate Nested Grid */
  584. .ui.popup > .ui.grid:not(.padded) {
  585. width: calc(100% + 1.75rem);
  586. margin: -0.7rem -0.875rem;
  587. }
  588. /*******************************
  589. States
  590. *******************************/
  591. .ui.loading.popup {
  592. display: block;
  593. visibility: hidden;
  594. z-index: -1;
  595. }
  596. .ui.animating.popup,
  597. .ui.visible.popup {
  598. display: block;
  599. }
  600. .ui.visible.popup {
  601. -webkit-transform: translateZ(0);
  602. transform: translateZ(0);
  603. -webkit-backface-visibility: hidden;
  604. backface-visibility: hidden;
  605. }
  606. /*******************************
  607. Variations
  608. *******************************/
  609. /*--------------
  610. Basic
  611. ---------------*/
  612. .ui.basic.popup:before {
  613. display: none;
  614. }
  615. .ui.fixed.popup {
  616. width: 250px;
  617. }
  618. /*--------------
  619. Wide
  620. ---------------*/
  621. .ui.wide.popup {
  622. max-width: 350px;
  623. }
  624. .ui.wide.popup.fixed {
  625. width: 350px;
  626. }
  627. .ui[class*="very wide"].popup {
  628. max-width: 550px;
  629. }
  630. .ui[class*="very wide"].popup.fixed {
  631. width: 550px;
  632. }
  633. @media only screen and (max-width: 767.98px) {
  634. .ui.wide.popup,
  635. .ui[class*="very wide"].popup {
  636. max-width: 250px;
  637. }
  638. .ui.wide.popup.fixed,
  639. .ui[class*="very wide"].popup.fixed {
  640. width: 250px;
  641. }
  642. }
  643. /*--------------
  644. Fluid
  645. ---------------*/
  646. .ui.fluid.popup {
  647. width: 100%;
  648. max-width: none;
  649. }
  650. /*--------------
  651. Colors
  652. ---------------*/
  653. /* Inverted colors */
  654. .ui.inverted.popup {
  655. background: #1B1C1D;
  656. color: #FFFFFF;
  657. border: none;
  658. -webkit-box-shadow: none;
  659. box-shadow: none;
  660. }
  661. .ui.inverted.popup .header {
  662. background-color: none;
  663. color: #FFFFFF;
  664. }
  665. .ui.inverted.popup:before {
  666. background-color: #1B1C1D;
  667. -webkit-box-shadow: none !important;
  668. box-shadow: none !important;
  669. }
  670. /*--------------
  671. Flowing
  672. ---------------*/
  673. .ui.flowing.popup {
  674. max-width: none;
  675. }
  676. /*--------------
  677. Sizes
  678. ---------------*/
  679. .ui.popup {
  680. font-size: 1rem;
  681. }
  682. .ui.mini.popup {
  683. font-size: 0.78571429rem;
  684. }
  685. [data-tooltip][data-variation~="mini"]:before,
  686. [data-tooltip][data-variation~="mini"]:after {
  687. font-size: 0.78571429rem;
  688. }
  689. .ui.tiny.popup {
  690. font-size: 0.85714286rem;
  691. }
  692. [data-tooltip][data-variation~="tiny"]:before,
  693. [data-tooltip][data-variation~="tiny"]:after {
  694. font-size: 0.85714286rem;
  695. }
  696. .ui.small.popup {
  697. font-size: 0.92857143rem;
  698. }
  699. [data-tooltip][data-variation~="small"]:before,
  700. [data-tooltip][data-variation~="small"]:after {
  701. font-size: 0.92857143rem;
  702. }
  703. .ui.large.popup {
  704. font-size: 1.14285714rem;
  705. }
  706. [data-tooltip][data-variation~="large"]:before,
  707. [data-tooltip][data-variation~="large"]:after {
  708. font-size: 1.14285714rem;
  709. }
  710. .ui.big.popup {
  711. font-size: 1.28571429rem;
  712. }
  713. [data-tooltip][data-variation~="big"]:before,
  714. [data-tooltip][data-variation~="big"]:after {
  715. font-size: 1.28571429rem;
  716. }
  717. .ui.huge.popup {
  718. font-size: 1.42857143rem;
  719. }
  720. [data-tooltip][data-variation~="huge"]:before,
  721. [data-tooltip][data-variation~="huge"]:after {
  722. font-size: 1.42857143rem;
  723. }
  724. .ui.massive.popup {
  725. font-size: 1.71428571rem;
  726. }
  727. [data-tooltip][data-variation~="massive"]:before,
  728. [data-tooltip][data-variation~="massive"]:after {
  729. font-size: 1.71428571rem;
  730. }
  731. /*******************************
  732. Theme Overrides
  733. *******************************/
  734. /*******************************
  735. User Overrides
  736. *******************************/