mirror of
https://github.com/phpbb/phpbb.git
synced 2025-07-09 19:26:53 +02:00
[ticket/13713] Fix styles for mentions
PHPBB3-13713
This commit is contained in:
lavigor
Marc Alexander
@ -1676,76 +1676,99 @@ fieldset.submit-buttons legend {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.atwho-view {
|
||||
background: #ffffff;
|
||||
border: 1px solid #dddddd;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
||||
color: #000000;
|
||||
.atwho-view { /* mention-container */
|
||||
text-align: left;
|
||||
background-color: #ffffff;
|
||||
border-radius: 2px;
|
||||
box-shadow:
|
||||
0 3px 1px -2px rgba(0, 0, 0, 0.2),
|
||||
0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
position: absolute;
|
||||
z-index: 11110 !important;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: none;
|
||||
min-width: 260px;
|
||||
margin-top: 18px;
|
||||
z-index: 999;
|
||||
top: 20px;
|
||||
overflow: auto;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.atwho-view-ul {
|
||||
overflow-y: auto;
|
||||
max-height: 200px;
|
||||
margin: auto;
|
||||
.rtl .atwho-view { /* mention-container */
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.atwho-view-ul { /* mention-list */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.mention-name {
|
||||
font-size: 12px;
|
||||
.mention-media {
|
||||
color: #757575;
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.rtl .mention-media {
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.mention-media-avatar {
|
||||
font-size: 32px;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
vertical-align: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.mention-item {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
letter-spacing: 0.04em;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
color: #212121;
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 15px 5px 15px 45px;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
max-width: 300px;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.rtl .mention-name {
|
||||
padding-right: 45px;
|
||||
padding-left: 15px;
|
||||
.mention-item:hover,
|
||||
.mention-item.cur {
|
||||
text-decoration: none;
|
||||
background-color: #eeeeee;
|
||||
color: #2d80d2;
|
||||
}
|
||||
|
||||
.mention-name:hover,
|
||||
.mention-name.cur {
|
||||
background-color: #0077b3;
|
||||
color: #ffffff;
|
||||
.mention-item:hover .mention-media-avatar,
|
||||
.mention-item.cur .mention-media-avatar {
|
||||
color: #2d80d2;
|
||||
}
|
||||
|
||||
.mention-avatar {
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
background-color: #0077b3;
|
||||
border: 1px solid #ffffff;
|
||||
border-radius: 100%;
|
||||
color: #ffffff;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 7px;
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-top: -16px;
|
||||
.mention-name,
|
||||
.mention-rank {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.rtl .mention-avatar {
|
||||
right: 7px;
|
||||
left: auto;
|
||||
.mention-name {
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.mention-rank {
|
||||
font-size: 10px;
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 1.2871;
|
||||
letter-spacing: 0.04em;
|
||||
color: #757575;
|
||||
}
|
||||
|
||||
/* Input field styles
|
||||
|
||||
@ -386,17 +386,17 @@ function getCaretPosition(txtarea) {
|
||||
|
||||
(function($) {
|
||||
function handle_mentions(txtarea) {
|
||||
var $mentionDataContainer = $('#format-buttons'),
|
||||
var $mentionDataContainer = $('[data-mention-url]'),
|
||||
mentionURL = $mentionDataContainer.data('mentionUrl'),
|
||||
mentionNamesLimit = $mentionDataContainer.data('mentionNamesLimit'),
|
||||
mentionTopicId = $mentionDataContainer.data('topicId');
|
||||
$(txtarea).atwho({
|
||||
at: "@",
|
||||
displayTpl: function(data) {
|
||||
var avatar = (data.avatar.src) ? "<img src='" + data.avatar.src + "'>" :
|
||||
"<span class='mention-avatar'><i class='fa fa-" + data.avatar.type + "'></i></span>",
|
||||
var avatar = (data.avatar.src) ? "<img src='" + data.avatar.src + "' class='mention-media-avatar'>" :
|
||||
"<i class='mention-media-avatar fa fa-" + data.avatar.type + "'></i>",
|
||||
rank = (data.rank) ? "<span class='mention-rank'>" + data.rank + "</span>" : '';
|
||||
return "<li class='mention-name'>" + avatar + "<span>" + data.name + "</span>" + rank + "</li>";
|
||||
return "<li class='mention-item'><span class='mention-media'>" + avatar + "</span><span class='mention-name'>" + data.name + rank + "</span></li>";
|
||||
},
|
||||
insertTpl: "[mention ${param}=${id}]${name}[/mention]",
|
||||
limit: mentionNamesLimit,
|
||||
@ -436,7 +436,7 @@ function getCaretPosition(txtarea) {
|
||||
phpbb.showDragNDrop(textarea);
|
||||
}
|
||||
|
||||
if ($('#mention_params').length) {
|
||||
if ($('[data-mention-url]').length) {
|
||||
handle_mentions(textarea);
|
||||
}
|
||||
|
||||
|
||||
@ -365,6 +365,24 @@
|
||||
float: left;
|
||||
}
|
||||
|
||||
/**
|
||||
* mentions.css
|
||||
*/
|
||||
|
||||
/* Mention block
|
||||
---------------------------------------- */
|
||||
|
||||
/* Mention dropdown
|
||||
---------------------------------------- */
|
||||
.rtl .atwho-view { /* mention-container */
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.rtl .mention-media {
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
/**
|
||||
* content.css
|
||||
*/
|
||||
@ -930,17 +948,6 @@
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* Mention dropdown */
|
||||
.rtl .mention-name {
|
||||
padding-right: 45px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.rtl .mention-avatar {
|
||||
right: 7px;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
/* Search box
|
||||
---------------------------------------- */
|
||||
|
||||
|
||||
@ -369,6 +369,41 @@ p.post-notice {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
/* colours and backgrounds for mentions.css */
|
||||
|
||||
/* mention dropdown */
|
||||
.atwho-view { /* mention-container */
|
||||
background-color: #ffffff;
|
||||
box-shadow:
|
||||
0 3px 1px -2px rgba(0, 0, 0, 0.2),
|
||||
0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.mention-media {
|
||||
color: #757575;
|
||||
}
|
||||
|
||||
.mention-item {
|
||||
border-bottom-color: #dddddd;
|
||||
color: #212121;
|
||||
}
|
||||
|
||||
.mention-item:hover,
|
||||
.mention-item.cur {
|
||||
background-color: #eeeeee;
|
||||
color: #2d80d2;
|
||||
}
|
||||
|
||||
.mention-item:hover .mention-media-avatar,
|
||||
.mention-item.cur .mention-media-avatar {
|
||||
color: #2d80d2;
|
||||
}
|
||||
|
||||
.mention-rank {
|
||||
color: #757575;
|
||||
}
|
||||
|
||||
/* colours and backgrounds for content.css */
|
||||
ul.forums {
|
||||
background-color: #edf4f7;
|
||||
@ -983,29 +1018,6 @@ fieldset.fields2 dl:hover dt label {
|
||||
outline-color: rgba(19, 164, 236, 0.5);
|
||||
}
|
||||
|
||||
.atwho-view {
|
||||
background: #ffffff;
|
||||
border-color: #dddddd;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.mention-name {
|
||||
border-bottom-color: #dddddd;
|
||||
}
|
||||
|
||||
.mention-name:hover,
|
||||
.mention-name.cur {
|
||||
background-color: #0077b3;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.mention-avatar {
|
||||
background-color: #0077b3;
|
||||
border-color: #ffffff;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* input field styles */
|
||||
.inputbox {
|
||||
background-color: #ffffff;
|
||||
|
||||
@ -576,11 +576,6 @@ blockquote .codebox {
|
||||
padding: 5px 3px;
|
||||
}
|
||||
|
||||
/* Mention block */
|
||||
.mention {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Attachments
|
||||
---------------------------------------- */
|
||||
.attachbox {
|
||||
|
||||
@ -284,58 +284,6 @@ fieldset.submit-buttons input {
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
/* Mention dropdown */
|
||||
.atwho-view {
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
z-index: 11110 !important;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: none;
|
||||
min-width: 260px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.atwho-view-ul {
|
||||
overflow-y: auto;
|
||||
max-height: 200px;
|
||||
margin: auto;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.mention-name {
|
||||
font-size: 12px;
|
||||
border-bottom: 1px solid transparent;
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 15px 5px 15px 45px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mention-avatar {
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 7px;
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-top: -16px;
|
||||
}
|
||||
|
||||
.mention-rank {
|
||||
font-size: 10px;
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* Input field styles
|
||||
---------------------------------------- */
|
||||
.inputbox {
|
||||
|
||||
87
phpBB/styles/prosilver/theme/mentions.css
Normal file
87
phpBB/styles/prosilver/theme/mentions.css
Normal file
@ -0,0 +1,87 @@
|
||||
/* -------------------------------------------------------------- /*
|
||||
$Mentions
|
||||
/* -------------------------------------------------------------- */
|
||||
|
||||
/* stylelint-disable selector-max-compound-selectors */
|
||||
/* stylelint-disable selector-no-qualifying-type */
|
||||
|
||||
/* Mention block
|
||||
---------------------------------------- */
|
||||
.mention {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Mention dropdown
|
||||
---------------------------------------- */
|
||||
.atwho-view { /* mention-container */
|
||||
text-align: left;
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
top: 20px;
|
||||
overflow: auto;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.atwho-view-ul { /* mention-list */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.mention-media {
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.mention-media-avatar {
|
||||
font-size: 32px;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
vertical-align: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.mention-item {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
letter-spacing: 0.04em;
|
||||
border-bottom: 1px solid transparent;
|
||||
position: relative;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
max-width: 300px;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mention-item:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.mention-name,
|
||||
.mention-rank {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mention-name {
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.mention-rank {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 1.2871;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
/* stylelint-enable selector-max-compound-selectors */
|
||||
/* stylelint-enable selector-no-qualifying-type */
|
||||
@ -14,6 +14,7 @@
|
||||
@import url("common.css?hash=658f990b");
|
||||
@import url("buttons.css?hash=eb16911f");
|
||||
@import url("links.css?hash=5fec3654");
|
||||
@import url("mentions.css?hash=a67fa183");
|
||||
@import url("content.css?hash=f7bdea58");
|
||||
@import url("buttons.css?hash=eb16911f");
|
||||
@import url("cp.css?hash=73c6f37d");
|
||||
|
||||
Reference in New Issue
Block a user