Ладно, я сделал кое-что, но понятия не имею, что именно делаю… Я использую этот плагин с 2018 года.
@merefield, пожалуйста, подскажите, как указать авторство в моём GIT, я вообще не понимаю, как всё это работает.
Ссылка на Git: https://github.com/GrubbyVc/Retort-Reloaded
Я клонировал плагин Retort и отредактировал его, чтобы retort-container снова отображался над элементами управления. Это позволяет использовать несколько ретортов на мобильных устройствах. Я хотел изменить это только для мобильных устройств, но не знал как.
Примечание: Это единственное изменение, которое я внес
Изменение
Изменена эта строка в retort-init.js.es6
api.decorateWidget("post-menu:before-extra-controls", (helper) => {
На эту
api.decorateWidget("post-contents:after-cooked", (helper) => {
Десктоп
Мобильные
CSS
Общие
.topic-post.retort, button.post-retort {
padding: 8px !important;
}
.post-retort {
border: none;
padding: 2px !important;
background: rgb(0, 0, 0, 0);
&:hover .post-retort__tooltip {
opacity: 1;
}
&__tooltip {
opacity: 0;
transition: .5s opacity;
position: absolute;
bottom: 65px;
font-size: 12px;
text-align: center;
min-width: 125px;
max-width: 150px;
background: var(--primary);
color: var(--secondary);
font-weight: bold;
padding: 5px;
border-radius: 5px;
word-wrap: normal;
left: auto;
transform: translate(-50%, 0);
z-index: 1;
pointer-events: none;
word-break: break-word;
&:after {
content: " ";
width: 7px;
height: 7px;
bottom: -5px;
left: 44%;
transform: rotate(45deg) translate(-50%, 0);
position: absolute;
background: var(--primary);
}
}
&__count {
font-size: 12px;
padding: 1px;
position: relative;
bottom: 1px;
left: 1px;
font-weight: bold;
color: var(--primary-medium);
}
}
.post-retort-container {
background: rgb(0, 0, 0, 0);
}
.emoji-picker.opened.has-limited-set {
height: 159px;
background-color: #333 !important;
}
Мобильные
.emoji-picker.opened.has-limited-set {
top: 400px;
}