User:PSaxena (WMF)/ipinfo-uxtest.css

.ipinfo { border-radius: 2px; border: 1px solid #a2a9b1; /*height: 120px;*/ }

.ipinfo h2 { font-size: 1.15em; font-weight: bold; font-family: sans-serif; border: none; margin: 16px; }

.ipinfo p { margin-bottom: 4px; }

.ipinfo-info dt { margin: 0; font-size: 0.875em; color: #72777d; }

.ipinfo-info dd { margin-left: 0; margin-bottom: 16px; }

.ipinfo-container { display: flex; }

.ipinfo-container > div { width: 100%; margin-left: 16px; }

.ipinfo code { font-family: monospace; font-size: 11px; background: none; border: none; color: #36c; padding: 0; }

.ipinfo-credits { font-style: italic; color: #b32424; margin: 16px; text-align: right; }

.dot { display: inline-block; height: 8px; width: 8px; border-radius: 8px; background: white; margin-right: 4px; }

.green-dot { background: #00af89; }

.red-dot { background: #d33; }

.yellow-dot { background: #fc3; }

.ipinfo-map { margin: 0; width: 120px; border-right: 1px solid #a2a9b1; margin-right: 16px; float: left; }

.INFObox { position: absolute; z-index: 5; background: #FFFFFF; border: 1px solid #AAA; box-shadow: rgba(0, 0, 0, 0.15) 3px 3px 3px; padding: 0; font-size: 14px; display: none; min-width: 300px; width: 300px; }

.INFObox.is-tall { width: 450px; }

.INFObox span.shift { display: block; margin-left: 24px; }

.INFObox a.hostname { font-family: monospace; font-size: 11px; display: block; margin-top: 24px; }

.INFObox img.flag { float:left; }

.INFObox:before { content: ''; position: absolute; border: 8px solid transparent; border-top: 0; border-bottom: 8px solid #AAA; top: -8px; left: 10px; }

.INFObox:after { content: ''; position: absolute; border: 7px solid transparent; border-top: 0; border-bottom: 7px solid #FFF; top: -7px; left: 11px; }

.INFObox.flipped:before { left: initial; right: 10px; }

.INFObox.flipped:after { left: initial; right: 11px; }

.INFObox > div { margin-top: -9px; padding-top: 9px; }

.INFObox > div > div { padding: 1.6em; }

.INFObox > div > div + div { padding: 0.8em; margin: 0.8em; }

.INFOwatchicon { float: right; font-size: 20px; cursor: pointer; margin-top: -5px; }

.INFObox > div > img.is-tall { float: right; margin-left: 1em; object-fit: cover; }

.INFObox > div > img.is-not-tall { margin-left: 0; }

.INFOredirect { color: #AAAAAA; font-style: italic; }