diff options
| author | ivar <i@oiee.no> | 2025-10-19 23:41:23 +0200 |
|---|---|---|
| committer | ivar <i@oiee.no> | 2025-10-19 23:41:23 +0200 |
| commit | 3f4c0720e1e3421431e7baa20882a4a4512a7fab (patch) | |
| tree | 734ca81d7d0841d8863e3f523ebba14c282dc681 /src/wwwroot/libraries/fomantic/dist/components/popup.css | |
| download | fagprove-3f4c0720e1e3421431e7baa20882a4a4512a7fab.tar.xz fagprove-3f4c0720e1e3421431e7baa20882a4a4512a7fab.zip | |
Diffstat (limited to 'src/wwwroot/libraries/fomantic/dist/components/popup.css')
| -rw-r--r-- | src/wwwroot/libraries/fomantic/dist/components/popup.css | 815 |
1 files changed, 815 insertions, 0 deletions
diff --git a/src/wwwroot/libraries/fomantic/dist/components/popup.css b/src/wwwroot/libraries/fomantic/dist/components/popup.css new file mode 100644 index 0000000..0ca5567 --- /dev/null +++ b/src/wwwroot/libraries/fomantic/dist/components/popup.css @@ -0,0 +1,815 @@ +/*! + * # Fomantic-UI - Popup + * http://github.com/fomantic/Fomantic-UI/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Popup +*******************************/ + +.ui.popup { + display: none; + position: absolute; + top: 0; + right: 0; + +/* Fixes content being squished when inline (moz only) */ + min-width: -webkit-min-content; + min-width: -moz-min-content; + min-width: min-content; + z-index: 1900; + border: 1px solid #D4D4D5; + line-height: 1.4285em; + max-width: 250px; + background: #FFFFFF; + padding: 0.833em 1em; + font-weight: normal; + font-style: normal; + color: rgba(0, 0, 0, 0.87); + border-radius: 0.28571429rem; + -webkit-box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); + box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); +} +.ui.popup > .header { + padding: 0; + font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-size: 1.14285714em; + line-height: 1.2; + font-weight: bold; +} +.ui.popup > .header + .content { + padding-top: 0.5em; +} +.ui.popup:before { + position: absolute; + content: ''; + width: 0.71428571em; + height: 0.71428571em; + background: #FFFFFF; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + z-index: 1901; + -webkit-box-shadow: 1px 1px 0 0 #bababc; + box-shadow: 1px 1px 0 0 #bababc; +} + + +/******************************* + Types +*******************************/ + + +/*-------------- + Tooltip + ---------------*/ + + +/* Content */ +[data-tooltip] { + position: relative; +} + +/* Arrow */ +[data-tooltip]:before { + pointer-events: none; + position: absolute; + content: ''; + font-size: 1rem; + width: 0.71428571em; + height: 0.71428571em; + background: #FFFFFF; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + z-index: 1901; + -webkit-box-shadow: 1px 1px 0 0 #bababc; + box-shadow: 1px 1px 0 0 #bababc; +} + +/* Popup */ +[data-tooltip]:after { + pointer-events: none; + content: attr(data-tooltip); + position: absolute; + text-transform: none; + text-align: left; + white-space: nowrap; + font-size: 1rem; + border: 1px solid #D4D4D5; + line-height: 1.4285em; + max-width: none; + background: #FFFFFF; + padding: 0.833em 1em; + font-weight: normal; + font-style: normal; + color: rgba(0, 0, 0, 0.87); + border-radius: 0.28571429rem; + -webkit-box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); + box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); + z-index: 1900; +} + +/* Default Position (Top Center) */ +[data-tooltip]:not([data-position]):before { + top: auto; + right: auto; + bottom: 100%; + left: 50%; + background: #FFFFFF; + margin-left: -0.07142857rem; + margin-bottom: 0.14285714rem; +} +[data-tooltip]:not([data-position]):after { + left: 50%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + bottom: 100%; + margin-bottom: 0.5em; +} + +/* Animation */ +[data-tooltip]:before, +[data-tooltip]:after { + pointer-events: none; + visibility: hidden; + opacity: 0; + -webkit-transition: opacity 0.1s ease, -webkit-transform 0.1s ease; + transition: opacity 0.1s ease, -webkit-transform 0.1s ease; + transition: transform 0.1s ease, opacity 0.1s ease; + transition: transform 0.1s ease, opacity 0.1s ease, -webkit-transform 0.1s ease; +} +[data-tooltip]:before { + -webkit-transform: rotate(45deg) scale(0) !important; + transform: rotate(45deg) scale(0) !important; + -webkit-transform-origin: center top; + transform-origin: center top; +} +[data-tooltip]:after { + -webkit-transform-origin: center bottom; + transform-origin: center bottom; +} +[data-tooltip]:hover:before, +[data-tooltip]:hover:after { + visibility: visible; + pointer-events: auto; + opacity: 1; +} +[data-tooltip]:hover:before { + -webkit-transform: rotate(45deg) scale(1) !important; + transform: rotate(45deg) scale(1) !important; +} + +/* Animation Position */ +[data-tooltip]:after, +[data-tooltip][data-position="top center"]:after, +[data-tooltip][data-position="bottom center"]:after { + -webkit-transform: translateX(-50%) scale(0) !important; + transform: translateX(-50%) scale(0) !important; +} +[data-tooltip]:hover:after, +[data-tooltip][data-position="bottom center"]:hover:after { + -webkit-transform: translateX(-50%) scale(1) !important; + transform: translateX(-50%) scale(1) !important; +} +[data-tooltip][data-position="left center"]:after, +[data-tooltip][data-position="right center"]:after { + -webkit-transform: translateY(-50%) scale(0) !important; + transform: translateY(-50%) scale(0) !important; +} +[data-tooltip][data-position="left center"]:hover:after, +[data-tooltip][data-position="right center"]:hover:after { + -webkit-transform: translateY(-50%) scale(1) !important; + transform: translateY(-50%) scale(1) !important; +} +[data-tooltip][data-position="top left"]:after, +[data-tooltip][data-position="top right"]:after, +[data-tooltip][data-position="bottom left"]:after, +[data-tooltip][data-position="bottom right"]:after { + -webkit-transform: scale(0) !important; + transform: scale(0) !important; +} +[data-tooltip][data-position="top left"]:hover:after, +[data-tooltip][data-position="top right"]:hover:after, +[data-tooltip][data-position="bottom left"]:hover:after, +[data-tooltip][data-position="bottom right"]:hover:after { + -webkit-transform: scale(1) !important; + transform: scale(1) !important; +} +[data-tooltip][data-variation~="fixed"]:after { + white-space: normal; + width: 250px; +} +[data-tooltip][data-variation*="wide fixed"]:after { + width: 350px; +} +[data-tooltip][data-variation*="very wide fixed"]:after { + width: 550px; +} +@media only screen and (max-width: 767.98px) { + [data-tooltip][data-variation~="fixed"]:after { + width: 250px; + } +} + +/*-------------- + Inverted + ---------------*/ + + +/* Arrow */ +[data-tooltip][data-inverted]:before { + -webkit-box-shadow: none !important; + box-shadow: none !important; +} + +/* Arrow Position */ +[data-tooltip][data-inverted]:before { + background: #1B1C1D; +} + +/* Popup */ +[data-tooltip][data-inverted]:after { + background: #1B1C1D; + color: #FFFFFF; + border: none; + -webkit-box-shadow: none; + box-shadow: none; +} +[data-tooltip][data-inverted]:after .header { + background: none; + color: #FFFFFF; +} + +/*-------------- + Position + ---------------*/ + +[data-position~="top"][data-tooltip]:before { + background: #FFFFFF; +} + +/* Top Center */ +[data-position="top center"][data-tooltip]:after { + top: auto; + right: auto; + left: 50%; + bottom: 100%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + margin-bottom: 0.5em; +} +[data-position="top center"][data-tooltip]:before { + top: auto; + right: auto; + bottom: 100%; + left: 50%; + background: #FFFFFF; + margin-left: -0.07142857rem; + margin-bottom: 0.14285714rem; +} + +/* Top Left */ +[data-position="top left"][data-tooltip]:after { + top: auto; + right: auto; + left: 0; + bottom: 100%; + margin-bottom: 0.5em; +} +[data-position="top left"][data-tooltip]:before { + top: auto; + right: auto; + bottom: 100%; + left: 1em; + margin-left: -0.07142857rem; + margin-bottom: 0.14285714rem; +} + +/* Top Right */ +[data-position="top right"][data-tooltip]:after { + top: auto; + left: auto; + right: 0; + bottom: 100%; + margin-bottom: 0.5em; +} +[data-position="top right"][data-tooltip]:before { + top: auto; + left: auto; + bottom: 100%; + right: 1em; + margin-left: -0.07142857rem; + margin-bottom: 0.14285714rem; +} +[data-position~="bottom"][data-tooltip]:before { + background: #FFFFFF; + -webkit-box-shadow: -1px -1px 0 0 #bababc; + box-shadow: -1px -1px 0 0 #bababc; +} + +/* Bottom Center */ +[data-position="bottom center"][data-tooltip]:after { + bottom: auto; + right: auto; + left: 50%; + top: 100%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + margin-top: 0.5em; +} +[data-position="bottom center"][data-tooltip]:before { + bottom: auto; + right: auto; + top: 100%; + left: 50%; + margin-left: -0.07142857rem; + margin-top: 0.14285714rem; +} + +/* Bottom Left */ +[data-position="bottom left"][data-tooltip]:after { + left: 0; + top: 100%; + margin-top: 0.5em; +} +[data-position="bottom left"][data-tooltip]:before { + bottom: auto; + right: auto; + top: 100%; + left: 1em; + margin-left: -0.07142857rem; + margin-top: 0.14285714rem; +} + +/* Bottom Right */ +[data-position="bottom right"][data-tooltip]:after { + right: 0; + top: 100%; + margin-top: 0.5em; +} +[data-position="bottom right"][data-tooltip]:before { + bottom: auto; + left: auto; + top: 100%; + right: 1em; + margin-left: -0.14285714rem; + margin-top: 0.07142857rem; +} + +/* Left Center */ +[data-position="left center"][data-tooltip]:after { + right: 100%; + top: 50%; + margin-right: 0.5em; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); +} +[data-position="left center"][data-tooltip]:before { + right: 100%; + top: 50%; + margin-top: -0.14285714rem; + margin-right: -0.07142857rem; + background: #FFFFFF; + -webkit-box-shadow: 1px -1px 0 0 #bababc; + box-shadow: 1px -1px 0 0 #bababc; +} + +/* Right Center */ +[data-position="right center"][data-tooltip]:after { + left: 100%; + top: 50%; + margin-left: 0.5em; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); +} +[data-position="right center"][data-tooltip]:before { + left: 100%; + top: 50%; + margin-top: -0.07142857rem; + margin-left: 0.14285714rem; + background: #FFFFFF; + -webkit-box-shadow: -1px 1px 0 0 #bababc; + box-shadow: -1px 1px 0 0 #bababc; +} + +/* Inverted Arrow Color */ +[data-inverted][data-position~="bottom"][data-tooltip]:before { + background: #1B1C1D; + -webkit-box-shadow: -1px -1px 0 0 #bababc; + box-shadow: -1px -1px 0 0 #bababc; +} +[data-inverted][data-position="left center"][data-tooltip]:before { + background: #1B1C1D; + -webkit-box-shadow: 1px -1px 0 0 #bababc; + box-shadow: 1px -1px 0 0 #bababc; +} +[data-inverted][data-position="right center"][data-tooltip]:before { + background: #1B1C1D; + -webkit-box-shadow: -1px 1px 0 0 #bababc; + box-shadow: -1px 1px 0 0 #bababc; +} +[data-inverted][data-position~="top"][data-tooltip]:before { + background: #1B1C1D; +} +[data-position~="bottom"][data-tooltip]:before { + -webkit-transform-origin: center bottom; + transform-origin: center bottom; +} +[data-position~="bottom"][data-tooltip]:after { + -webkit-transform-origin: center top; + transform-origin: center top; +} +[data-position="left center"][data-tooltip]:before { + -webkit-transform-origin: top center; + transform-origin: top center; +} +[data-position="left center"][data-tooltip]:after { + -webkit-transform-origin: right center; + transform-origin: right center; +} +[data-position="right center"][data-tooltip]:before { + -webkit-transform-origin: right center; + transform-origin: right center; +} +[data-position="right center"][data-tooltip]:after { + -webkit-transform-origin: left center; + transform-origin: left center; +} + +/*-------------- + Basic + ---------------*/ + +[data-tooltip][data-variation~="basic"]:before { + display: none; +} + +/*-------------- + Spacing +---------------*/ + +.ui.popup { + margin: 0; +} + +/* Extending from Top */ +.ui.top.popup { + margin: 0 0 0.71428571em; +} +.ui.top.left.popup { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; +} +.ui.top.center.popup { + -webkit-transform-origin: center bottom; + transform-origin: center bottom; +} +.ui.top.right.popup { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; +} + +/* Extending from Vertical Center */ +.ui.left.center.popup { + margin: 0 0.71428571em 0 0; + -webkit-transform-origin: right 50%; + transform-origin: right 50%; +} +.ui.right.center.popup { + margin: 0 0 0 0.71428571em; + -webkit-transform-origin: left 50%; + transform-origin: left 50%; +} + +/* Extending from Bottom */ +.ui.bottom.popup { + margin: 0.71428571em 0 0; +} +.ui.bottom.left.popup { + -webkit-transform-origin: left top; + transform-origin: left top; +} +.ui.bottom.center.popup { + -webkit-transform-origin: center top; + transform-origin: center top; +} +.ui.bottom.right.popup { + -webkit-transform-origin: right top; + transform-origin: right top; +} + +/*-------------- + Pointer + ---------------*/ + + +/*--- Below ---*/ + +.ui.bottom.center.popup:before { + margin-left: -0.30714286em; + top: -0.30714286em; + left: 50%; + right: auto; + bottom: auto; + -webkit-box-shadow: -1px -1px 0 0 #bababc; + box-shadow: -1px -1px 0 0 #bababc; +} +.ui.bottom.left.popup { + margin-left: 0; +} +/*rtl:rename*/ +.ui.bottom.left.popup:before { + top: -0.30714286em; + left: 1em; + right: auto; + bottom: auto; + margin-left: 0; + -webkit-box-shadow: -1px -1px 0 0 #bababc; + box-shadow: -1px -1px 0 0 #bababc; +} +.ui.bottom.right.popup { + margin-right: 0; +} +/*rtl:rename*/ +.ui.bottom.right.popup:before { + top: -0.30714286em; + right: 1em; + bottom: auto; + left: auto; + margin-left: 0; + -webkit-box-shadow: -1px -1px 0 0 #bababc; + box-shadow: -1px -1px 0 0 #bababc; +} + +/*--- Above ---*/ + +.ui.top.center.popup:before { + top: auto; + right: auto; + bottom: -0.30714286em; + left: 50%; + margin-left: -0.30714286em; +} +.ui.top.left.popup { + margin-left: 0; +} +/*rtl:rename*/ +.ui.top.left.popup:before { + bottom: -0.30714286em; + left: 1em; + top: auto; + right: auto; + margin-left: 0; +} +.ui.top.right.popup { + margin-right: 0; +} +/*rtl:rename*/ +.ui.top.right.popup:before { + bottom: -0.30714286em; + right: 1em; + top: auto; + left: auto; + margin-left: 0; +} + +/*--- Left Center ---*/ + +/*rtl:rename*/ +.ui.left.center.popup:before { + top: 50%; + right: -0.30714286em; + bottom: auto; + left: auto; + margin-top: -0.30714286em; + -webkit-box-shadow: 1px -1px 0 0 #bababc; + box-shadow: 1px -1px 0 0 #bababc; +} + +/*--- Right Center ---*/ + +/*rtl:rename*/ +.ui.right.center.popup:before { + top: 50%; + left: -0.30714286em; + bottom: auto; + right: auto; + margin-top: -0.30714286em; + -webkit-box-shadow: -1px 1px 0 0 #bababc; + box-shadow: -1px 1px 0 0 #bababc; +} +.ui.right.center.popup:before, +.ui.left.center.popup:before { + background: #FFFFFF; +} + +/* Arrow Color By Location */ +.ui.bottom.popup:before { + background: #FFFFFF; +} +.ui.top.popup:before { + background: #FFFFFF; +} + +/* Inverted Arrow Color */ +.ui.inverted.bottom.popup:before { + background: #1B1C1D; +} +.ui.inverted.right.center.popup:before, +.ui.inverted.left.center.popup:before { + background: #1B1C1D; +} +.ui.inverted.top.popup:before { + background: #1B1C1D; +} + + +/******************************* + Coupling +*******************************/ + + +/* Immediate Nested Grid */ +.ui.popup > .ui.grid:not(.padded) { + width: calc(100% + 1.75rem); + margin: -0.7rem -0.875rem; +} + + +/******************************* + States +*******************************/ + +.ui.loading.popup { + display: block; + visibility: hidden; + z-index: -1; +} +.ui.animating.popup, +.ui.visible.popup { + display: block; +} +.ui.visible.popup { + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------- + Basic + ---------------*/ + +.ui.basic.popup:before { + display: none; +} +.ui.fixed.popup { + width: 250px; +} + +/*-------------- + Wide + ---------------*/ + +.ui.wide.popup { + max-width: 350px; +} +.ui.wide.popup.fixed { + width: 350px; +} +.ui[class*="very wide"].popup { + max-width: 550px; +} +.ui[class*="very wide"].popup.fixed { + width: 550px; +} +@media only screen and (max-width: 767.98px) { + .ui.wide.popup, + .ui[class*="very wide"].popup { + max-width: 250px; + } + .ui.wide.popup.fixed, + .ui[class*="very wide"].popup.fixed { + width: 250px; + } +} + +/*-------------- + Fluid + ---------------*/ + +.ui.fluid.popup { + width: 100%; + max-width: none; +} + +/*-------------- + Colors + ---------------*/ + + +/* Inverted colors */ +.ui.inverted.popup { + background: #1B1C1D; + color: #FFFFFF; + border: none; + -webkit-box-shadow: none; + box-shadow: none; +} +.ui.inverted.popup .header { + background-color: none; + color: #FFFFFF; +} +.ui.inverted.popup:before { + background-color: #1B1C1D; + -webkit-box-shadow: none !important; + box-shadow: none !important; +} + +/*-------------- + Flowing + ---------------*/ + +.ui.flowing.popup { + max-width: none; +} + +/*-------------- + Sizes +---------------*/ + +.ui.popup { + font-size: 1rem; +} +.ui.mini.popup { + font-size: 0.78571429rem; +} +[data-tooltip][data-variation~="mini"]:before, +[data-tooltip][data-variation~="mini"]:after { + font-size: 0.78571429rem; +} +.ui.tiny.popup { + font-size: 0.85714286rem; +} +[data-tooltip][data-variation~="tiny"]:before, +[data-tooltip][data-variation~="tiny"]:after { + font-size: 0.85714286rem; +} +.ui.small.popup { + font-size: 0.92857143rem; +} +[data-tooltip][data-variation~="small"]:before, +[data-tooltip][data-variation~="small"]:after { + font-size: 0.92857143rem; +} +.ui.large.popup { + font-size: 1.14285714rem; +} +[data-tooltip][data-variation~="large"]:before, +[data-tooltip][data-variation~="large"]:after { + font-size: 1.14285714rem; +} +.ui.big.popup { + font-size: 1.28571429rem; +} +[data-tooltip][data-variation~="big"]:before, +[data-tooltip][data-variation~="big"]:after { + font-size: 1.28571429rem; +} +.ui.huge.popup { + font-size: 1.42857143rem; +} +[data-tooltip][data-variation~="huge"]:before, +[data-tooltip][data-variation~="huge"]:after { + font-size: 1.42857143rem; +} +.ui.massive.popup { + font-size: 1.71428571rem; +} +[data-tooltip][data-variation~="massive"]:before, +[data-tooltip][data-variation~="massive"]:after { + font-size: 1.71428571rem; +} + + +/******************************* + Theme Overrides +*******************************/ + + + +/******************************* + User Overrides +*******************************/ + |
