MediaWiki:DiscordSmooth.css

/*Автор дизайна: Сибирский Смотритель*/ .discord-list { list-style-type: none; display: flex; flex-direction: column; margin-left: 15px; } .discord-member { vertical-align: middle; width: 100%; line-height: 23px; display: flex; align-items: center; white-space: nowrap; text-overflow: ellipsis; } .discord-avatar {display: inline-flex;} .discord-avatar:after { display: block; background-color: #43b581; width: 6px; height: 6px; content: " "; border-radius: 100%; position: relative; top: 14px; right: 7px; } .discord-avatar.discord-idle:after {background-color: rgb(250, 166, 26);} .discord-avatar.discord-dnd:after {background-color: rgb(240, 71, 71);} .discord-avatar img { border-radius: 100%; margin-right: 4px; width: 20px; height: 20px; } .discord-chevron { border-color: transparent; border-top-color: black; border-style: solid; border-width: 7px; width: 0; vertical-align: middle; margin-top: 2px; cursor: pointer; } .discord-chevron.opened { border-top-color: transparent; border-bottom-color: black; } .discord-joined { border-color: rgb(114, 137, 218); background: rgb(114, 137, 218); color: white; border-radius: 4px; font-size: 12px; margin-top: 5px; } display: inline; background-color: rgb(114, 137, 218); border-radius: 15px; color: white; padding: 1px 4px; font-size: 12px; line-height: 14px; } .discord-icon { width: 40px; height: 40px; display: block; border-radius: 40px; } .discord-joined:hover { border-color: rgb(84, 107, 188); background: rgb(84, 107, 188); } /* 14/ Календарь */ .calend { display: inline-block; width: 40px; height: 30px; padding: 10px; background-color: white; border:1px solid #555; font-size:24px; } .calweekend { color: red; } .calothermonth { color: #aaa; } .calothermonthwe { color: #FFA6A6; } .calothermonthwe { color: #FFA6A6; } .calend:hover { background-color: #C9FFA9 !important; } .caltooltip { display: inline-block; position: relative; cursor: help; } .cltporange { background: #FFEBC6; } .cltpblue { background: #CBFFFE; } .cltpmixed { background: #ACFFCE; } /* стиль появляющейся подсказки */ .caltooltip > span { color:black; position: absolute; bottom: 100%; left: -20em; right: -20em; width: -moz-max-content; width: -webkit-max-content; width: max-content; max-width: 20em; overflow: auto; visibility: hidden; margin: 0 auto .4em; padding: .3em; border: solid rgb(200,200,200); font-size: 16px; background: #fff; line-height: normal; cursor: auto; color: black; } /* треугольник под подсказкой */ .caltooltip:after { content: ""; position: absolute; top: -.6em; left: 50%; visibility: hidden; margin: 0 0 0 -.4em; border: .4em solid; font-size:14px; border-color: rgb(200,200,200) transparent transparent transparent; cursor: auto; } /* поле между текстом и подсказкой */ .caltooltip:before { content: ""; position: absolute; top: -.4em; left: 0; right: 0; height: .4em; visibility: hidden; } /* появление не сразу */ .caltooltip:hover > span, .caltooltip:hover:before, .caltooltip:hover:after, .caltooltip:focus > span, .caltooltip:focus:before, .caltooltip:focus:after { visibility: visible; transition: 0s .1s; } /* Убрать рамку в Хроме */ .caltooltip:focus { outline: none; } /* ширина подсказки может быть не более ширины окна браузера */ @media (max-width: 20em) { .caltooltip > span { box-sizing: border-box; } }
 * 1) discord-counter {