mirror of
https://github.com/Oreolek/ifhub.club.git
synced 2024-07-08 09:24:25 +03:00
60 lines
3.6 KiB
CSS
60 lines
3.6 KiB
CSS
/* --------------------------------------------
|
|
ВСПЛЫВАЮЩИЕ ПОДСКАЗКИ
|
|
-------------------------------------------- */
|
|
|
|
.infobox {
|
|
visibility: hidden;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 9999;
|
|
text-align: left;
|
|
padding: 15px;
|
|
min-width: 50px;
|
|
max-width: 300px;
|
|
color: #fff;
|
|
background: rgba(0,0,0,.8);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.infobox .tip-arrow { position: absolute; width: 0; height: 0; border-width: 6px; border-style: solid; border-color: rgba(0,0,0,.8); }
|
|
.infobox .tip-arrow.tip-arrow-top { top: -12px; left: 15px; border-top-color: transparent !important; border-left-color: transparent !important; border-right-color: transparent !important; }
|
|
.infobox .tip-arrow.tip-arrow-bottom { bottom: -12px; left: 15px; border-bottom-color: transparent !important; border-left-color: transparent !important; border-right-color: transparent !important; }
|
|
.infobox .tip-arrow.tip-arrow-right { top: 50%; margin-top: -6px; right: -12px; border-bottom-color: transparent !important; border-top-color: transparent !important; border-right-color: transparent !important; }
|
|
.infobox .tip-arrow.tip-arrow-left { top: 50%; margin-top: -6px; left: -12px; border-bottom-color: transparent !important; border-top-color: transparent !important; border-left-color: transparent !important; }
|
|
|
|
.infobox a { color: #B4B8ED; }
|
|
.infobox a:hover { color: #999DDB; }
|
|
|
|
|
|
/* Default Tip */
|
|
.infobox.infobox-standart { background: rgba(0,0,0,.8); }
|
|
.infobox.infobox-standart .tip-arrow { border-color: rgba(0,0,0,.8); }
|
|
|
|
/* Yellow */
|
|
.infobox.infobox-yellow { background: #fffea8; color: #3e3e16; border-radius: 10px; padding: 15px 20px; font-size: 11px; line-height: 16px; box-shadow: 0 0 15px rgba(0,0,0,.3); }
|
|
.infobox.infobox-yellow .tip-arrow { border-color: #fffea8; }
|
|
|
|
/* Topic */
|
|
.infobox.infobox-topic { font-size: 11px; box-shadow: 0 0 10px rgba(0,0,0,.5); background: #1d1d1d; border-radius: 10px; }
|
|
.infobox.infobox-topic i { margin-right: 5px; }
|
|
.infobox.infobox-topic .tip-arrow { left: 34px; border-color: #1d1d1d; }
|
|
|
|
/* Help */
|
|
.infobox.infobox-help { background: #fff; width: 300px; border: 3px solid #edf8fd; color: #000; border-radius: 10px; padding: 25px 30px; font-size: 12px; line-height: 18px; box-shadow: 0 0 15px rgba(0,0,0,.3); }
|
|
.infobox.infobox-help .tip-arrow { border: none; width: 15px; height: 11px; background: url(../images/icons-synio.png) no-repeat; }
|
|
.infobox.infobox-help .tip-arrow.tip-arrow-top { background-position: -38px -107px; top: -11px; }
|
|
.infobox.infobox-help .tip-arrow.tip-arrow-bottom { background-position: -53px -107px; bottom: -11px; }
|
|
.infobox.infobox-help a { color: #3f8ad7; }
|
|
.infobox.infobox-help .blog-info { margin-bottom: 30px; }
|
|
.infobox.infobox-help .blog-info li span { background: #fff; }
|
|
.infobox.infobox-help .blog-info li strong { background: #fff; }
|
|
.infobox.infobox-help .infobox-topic { color: #727a90; font-size: 11px; }
|
|
.infobox.infobox-help .infobox-actions { font-size: 11px; }
|
|
|
|
/* Share */
|
|
.infobox.infobox-share { background: #fff; width: 300px; border: 3px solid #edf8fd; color: #000; border-radius: 10px; padding: 10px 15px; font-size: 12px; line-height: 18px; box-shadow: 0 0 15px rgba(0,0,0,.3); }
|
|
.infobox.infobox-share .tip-arrow { border: none; width: 15px; height: 11px; background: url(../images/icons-synio.png) no-repeat; }
|
|
.infobox.infobox-share .tip-arrow.tip-arrow-top { background-position: -38px -107px; top: -11px; left: 50%; margin-left: -7px; }
|
|
.infobox.infobox-share .tip-arrow.tip-arrow-bottom { background-position: -53px -107px; bottom: -11px; left: 50%; margin-left: -7px; }
|