Update visual theme to be cleaner and less cluttered.
This commit is contained in:
Ben Rog-Wilhelm
GitHub
parent
1b9f7860c5
commit
74cfce4c2e
3 changed files with 163 additions and 139 deletions
|
|
@ -3,6 +3,7 @@
|
|||
|
||||
:root {
|
||||
--primary: #1a6187;
|
||||
--primary-overlay: #1a618720;
|
||||
|
||||
--primary-dark1: #165476;
|
||||
--primary-dark2: #134662;
|
||||
|
|
@ -169,9 +170,6 @@ div.deleted {
|
|||
div.deleted.banned {
|
||||
background-color: var(--gray) !important;
|
||||
}
|
||||
.comment-body > .comment-anchor {
|
||||
padding: 5px;
|
||||
}
|
||||
.comment-anchor:target, .unread {
|
||||
background: #2280B310 !important;
|
||||
}
|
||||
|
|
@ -195,11 +193,14 @@ a.visited,
|
|||
#search .post-title a:visited {
|
||||
color: var(--primary-dark1);
|
||||
}
|
||||
.comment .comment-collapse-desktop {
|
||||
border-left: 2px solid var(--primary-dark1) !important;
|
||||
.comment .comment-collapse-bar {
|
||||
border-right: 2px solid var(--primary-overlay);
|
||||
}
|
||||
.comment .comment-collapse-desktop:hover {
|
||||
border-left: 2px solid var(--primary-light2) !important;
|
||||
.comment .comment-collapse-bar-click:hover .comment-collapse-bar {
|
||||
border-right: 2px solid var(--primary-light2);
|
||||
}
|
||||
.comment.collapsed .comment-collapse-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.usernote-link {
|
||||
|
|
|
|||
|
|
@ -2505,9 +2505,6 @@ a.text-primary:hover, a.text-primary:focus {
|
|||
a.text-success:hover, a.text-success:focus {
|
||||
color: #19692c !important;
|
||||
}
|
||||
.text-info {
|
||||
color: #17a2b8 !important;
|
||||
}
|
||||
a.text-info:hover, a.text-info:focus {
|
||||
color: #0f6674 !important;
|
||||
}
|
||||
|
|
@ -2685,6 +2682,9 @@ a.dropdown-toggle:hover {
|
|||
.comment-text ul li ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
.comment-text a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
ul.no-bullets {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
|
@ -3171,9 +3171,6 @@ small, .small {
|
|||
#frontpage .pseudo-submit-form.card .card-body .form-control:hover, #frontpage .pseudo-submit-form.card .card-body .form-control:active, #frontpage .pseudo-submit-form.card .card-body .form-control:focus {
|
||||
background-color: var(--light);
|
||||
}
|
||||
.user-name {
|
||||
color: inherit;
|
||||
}
|
||||
.banner-pic-135 {
|
||||
object-fit: cover;
|
||||
height: 135px;
|
||||
|
|
@ -3564,7 +3561,7 @@ small, .small {
|
|||
.post-img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.post-actions .comments, .post-actions .share, .post-actions .flag {
|
||||
margin-right: 0.5rem;
|
||||
|
|
@ -3582,11 +3579,29 @@ small, .small {
|
|||
color: var(--muted);
|
||||
}
|
||||
.comment {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"comment-collapse-icon comment-user-info"
|
||||
"comment-collapse-bar-click comment-body";
|
||||
column-gap: 5px;
|
||||
position: relative;
|
||||
margin-top: 0.25rem;
|
||||
margin-top: 1rem;
|
||||
padding-left: 12px;
|
||||
}
|
||||
.comment-collapse-icon {
|
||||
grid-area: comment-collapse-icon;
|
||||
}
|
||||
.comment-user-info {
|
||||
grid-area: comment-user-info;
|
||||
}
|
||||
.comment-collapse-bar-click {
|
||||
grid-area: comment-collapse-bar-click;
|
||||
}
|
||||
.comment-body {
|
||||
grid-area: comment-body;
|
||||
}
|
||||
#notifications .comment, #userpage .comment {
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 1rem;
|
||||
|
|
@ -3594,17 +3609,26 @@ small, .small {
|
|||
#notifications .comment:last-child, #userpage .comment:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.comment-section > .comment {
|
||||
padding-top: 1rem;
|
||||
margin-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
.comment-section > .comment ~ .comment {
|
||||
border-top: 1px solid var(--tertiary);
|
||||
}
|
||||
.comment .comment-body {
|
||||
width: 100%;
|
||||
}
|
||||
.comment .comment-body .user-info {
|
||||
.comment-user-info {
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
margin-bottom: 0.25rem;
|
||||
margin-top: -0.25rem;
|
||||
}
|
||||
.comment .comment-body .user-name {
|
||||
color: var(--black);
|
||||
.comment .comment-user-info .user-name {
|
||||
color: var(--primary);
|
||||
}
|
||||
.comment.collapsed .comment-user-info .user-name {
|
||||
color: var(--muted);
|
||||
}
|
||||
.comment .comment-body .comment-text {
|
||||
margin-bottom: 1rem;
|
||||
|
|
@ -3649,7 +3673,7 @@ small, .small {
|
|||
font-size: 10px;
|
||||
margin-right: 0.25rem;
|
||||
margin-left: 0.25rem;
|
||||
color: var(--gray-100);
|
||||
color: var(--muted);
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.comment-actions .fa, .comment-actions .fas, .comment-actions .fa {
|
||||
|
|
@ -3724,7 +3748,6 @@ ul.comment-section {
|
|||
z-index: 1;
|
||||
}
|
||||
.comment-write .comment-format .format {
|
||||
padding: 0 0.5rem;
|
||||
font-size: 1rem;
|
||||
color: var(--gray-200);
|
||||
}
|
||||
|
|
@ -3734,24 +3757,9 @@ ul.comment-section {
|
|||
.comment .comment-collapse-icon:hover::before {
|
||||
border-left-color: var(--primary);
|
||||
}
|
||||
.comment.collapsed .comment-collapse-icon::before {
|
||||
content: "\f055";
|
||||
font-family: "font awesome 5 pro" !important;
|
||||
font-weight: 900;
|
||||
border-left: none;
|
||||
top: -0.1px;
|
||||
left: -3px;
|
||||
font-size: 10px;
|
||||
}
|
||||
.comment.collapsed .comment-collapse-icon:hover::before {
|
||||
color: var(--primary);
|
||||
}
|
||||
.comment.collapsed .comment-body p.text, .comment.collapsed div.comment-text, .comment.collapsed .comment-actions, .comment.collapsed .comment-write, .comment.collapsed .comment {
|
||||
display: none;
|
||||
}
|
||||
.comment.collapsed .user-info {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.comment.collapsed .profile-pic-25 {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
|
@ -4211,12 +4219,6 @@ pre .com, code .com {
|
|||
.post-actions .voting .fa, .post-actions .voting .fas, .post-actions .voting .far {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.comment-actions .score {
|
||||
color: var(--gray-200);
|
||||
}
|
||||
.score {
|
||||
color: var(--gray-200);
|
||||
}
|
||||
.active.arrow-up::before, .active.arrow-up:hover::before {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
|
@ -4233,20 +4235,15 @@ pre .com, code .com {
|
|||
background-color: var(--gray-600);
|
||||
}
|
||||
.comment-section > .comment {
|
||||
padding-left: 12px;
|
||||
padding-left: 0px;
|
||||
}
|
||||
.comment {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
.comment.collapsed .user-info {
|
||||
padding-top: 0.5rem;
|
||||
padding-left: 0px;
|
||||
}
|
||||
.comment.collapsed .comment-body:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.comment-actions .fa, .comment-actions .fas, .comment-actions .far {
|
||||
color: var(--gray-100);
|
||||
}
|
||||
.banner-pic-135 {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
|
@ -4359,13 +4356,23 @@ div.deleted.banned {
|
|||
}
|
||||
}
|
||||
.comment .comment-collapse-desktop {
|
||||
padding-right: 20px;
|
||||
width: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.comment .comment-collapse-desktop:hover {
|
||||
border-left-color: var(--white) !important;
|
||||
.comment-collapse-bar-click {
|
||||
width: 100%;
|
||||
}
|
||||
.comment.collapsed .comment-collapse-desktop:hover {
|
||||
.comment-collapse-bar {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
.comment-section > .comment > .comment-collapse-bar-click > .comment-collapse-bar {
|
||||
border-right-color: var(--background);
|
||||
}
|
||||
.comment .comment-collapse-bar-click:hover .comment-collapse-bar {
|
||||
border-right-color: var(--white) !important;
|
||||
}
|
||||
.comment.collapsed .comment-collapse-bar-click:hover .comment-collapse-bar {
|
||||
color: var(--white) !important;
|
||||
}
|
||||
@media (max-width: 767.98px) {
|
||||
|
|
@ -4426,7 +4433,10 @@ div.deleted.banned {
|
|||
background-color: var(--background) !important;
|
||||
}
|
||||
.text-info {
|
||||
color: var(--primary) !important;
|
||||
color: var(--primary);
|
||||
}
|
||||
.collapsed .text-info {
|
||||
color: var(--muted);
|
||||
}
|
||||
* {
|
||||
-webkit-animation: None !important;
|
||||
|
|
@ -4574,7 +4584,9 @@ video {
|
|||
overflow-y: scroll !important;
|
||||
}
|
||||
.comment .comment-collapse-icon {
|
||||
padding-right: 10px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
align-self: center;
|
||||
}
|
||||
.comment .comment-collapse-icon::before {
|
||||
font-family: "font awesome 5 pro" !important;
|
||||
|
|
@ -4582,14 +4594,19 @@ video {
|
|||
display: inline-block;
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
width: 10px;
|
||||
content: "\f056";
|
||||
position: static;
|
||||
font-size: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
border: none;
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
.comment.collapsed .comment-collapse-icon::before {
|
||||
content: "\f055";
|
||||
color: var(--muted);
|
||||
}
|
||||
.comment.collapsed .comment-collapse-icon:hover::before {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.text-removed {
|
||||
color: #ffabab !important;
|
||||
}
|
||||
|
|
@ -4601,7 +4618,11 @@ video {
|
|||
@media (max-width: 768px) {
|
||||
.popover-bio * {
|
||||
font-size: 0.8rem !important;
|
||||
}
|
||||
}
|
||||
.comment .comment-collapse-icon {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.popover-bio * {
|
||||
|
|
@ -4888,12 +4909,6 @@ toast {
|
|||
html {
|
||||
scroll-padding-top: 100px;
|
||||
}
|
||||
.comment .comment-body {
|
||||
padding: 3px 0 0 0;
|
||||
}
|
||||
.comment-anchor {
|
||||
padding: 1px;
|
||||
}
|
||||
.comment-anchor::before {
|
||||
content: '';
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -57,17 +57,21 @@
|
|||
{% if (c.is_banned or c.deleted_utc or c.is_blocking) and not (v and v.admin_level > 1) and not (v and v.id==c.author_id) %}
|
||||
|
||||
<div id="comment-{{c.id}}" class="comment">
|
||||
<span class="comment-collapse-desktop d-none d-md-block" onclick="collapse_comment('{{c.id}}', this.parentElement)"></span>
|
||||
<div class="comment-collapse-icon" onclick="collapse_comment('{{c.id}}', this.parentElement)"></div>
|
||||
<div class="comment-collapse-bar-click" onclick="collapse_comment('{{c.id}}', this.parentElement)">
|
||||
<div class="comment-collapse-bar"></div>
|
||||
</div>
|
||||
|
||||
<div class="comment-user-info">
|
||||
{% if standalone and c.over_18 %}<span class="badge badge-danger">+18</span> {% endif %}
|
||||
{% if c.is_banned %}removed by @{{c.ban_reason}}{% elif c.deleted_utc %}Deleted by author{% elif c.is_blocking %}You are blocking @{{c.author_name}}{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="comment-body">
|
||||
|
||||
<div id="comment-{{c.id}}-only" class="{% if c.award_count('glowie') %}glow{% endif %} comment-{{c.id}}-only">
|
||||
|
||||
<div class="user-info">
|
||||
<span class="comment-collapse-icon" onclick="collapse_comment('{{c.id}}', this.parentElement.parentElement.parentElement)"></span>
|
||||
{% if standalone and c.over_18 %}<span class="badge badge-danger">+18</span> {% endif %}
|
||||
{% if c.is_banned %}removed by @{{c.ban_reason}}{% elif c.deleted_utc %}Deleted by author{% elif c.is_blocking %}You are blocking @{{c.author_name}}{% endif %}
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -152,16 +156,33 @@
|
|||
{% set isreply = False %}
|
||||
{% endif %}
|
||||
|
||||
<div id="comment-{{c.id}}" class="anchor comment {% if standalone and level==1 %} mt-0{% endif %} {% if c.collapse_for_user(v,request.path) %}collapsed{% endif %}" style="{% if isreply %}padding-left:0!important;{% else %}border-left: 2px solid var(--primary){% endif %}">
|
||||
<div id="comment-{{c.id}}" class="anchor comment {% if standalone and level==1 %} mt-0{% endif %} {% if c.collapse_for_user(v,request.path) %}collapsed{% endif %}">
|
||||
{% if not isreply %}
|
||||
<span class="comment-collapse-desktop d-none d-md-block" onclick="collapse_comment('{{c.id}}', this.parentElement)"></span>
|
||||
<div class="comment-collapse-icon" onclick="collapse_comment('{{c.id}}', this.parentElement)"></div>
|
||||
<div class="comment-collapse-bar-click" onclick="collapse_comment('{{c.id}}', this.parentElement)">
|
||||
<div class="comment-collapse-bar"></div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="comment-body">
|
||||
<div class="comment-user-info">
|
||||
|
||||
<div id="{% if comment_info and comment_info.id == c.id %}context{%else%}comment-{{c.id}}-only{% endif %}" class="{% if c.unread %}unread{% endif %} {% if c.award_count('glowie') %}glow{% endif %} comment-{{c.id}}-only comment-anchor {% if comment_info and comment_info.id == c.id %}context{%endif%}{% if c.is_banned %} banned{% endif %}{% if c.deleted_utc %} deleted{% endif %}">
|
||||
{% if c.ghost %}
|
||||
👻
|
||||
{% else %}
|
||||
|
||||
<div class="user-info">
|
||||
<span class="comment-collapse-icon" onclick="collapse_comment('{{c.id}}', this.parentElement.parentElement.parentElement.parentElement)"></span>
|
||||
{% if c.author.verified %}<i class="fas fa-badge-check align-middle ml-1 {% if c.author.verified=='Glowiefied' %}glow{% endif %}" style="color:{% if c.author.verifiedcolor %}#{{c.author.verifiedcolor}}{% else %}#1DA1F2{% endif %}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{c.author.verified}}"></i>
|
||||
{% endif %}
|
||||
{% if not c.author %}
|
||||
{{c.print()}}
|
||||
{% endif %}
|
||||
<a href="/@{{c.author_name}}" class="user-name" onclick='popclick({{c.author.json_popover(v) | tojson}})' data-bs-placement="bottom" data-bs-toggle="popover" data-bs-trigger="click" data-content-id="popover" role="button" tabindex="0" style="font-size:12px; font-weight:bold;"><img loading="lazy" src="{{c.author.profile_url}}" class="profile-pic-20 mr-2"><span {% if c.author.patron and not c.distinguish_level %}class="patron" style="background-color:#{{c.author.namecolor}};"{% elif c.distinguish_level %}class="mod"{% endif %}>{{c.author_name}}</span></a>
|
||||
{% if v and v.admin_level > 1 %}
|
||||
<span
|
||||
class="usernote-link"
|
||||
data-micromodal-trigger="modal-1"
|
||||
onclick='fillnote( {{c.author.json_popover(v) | tojson}}, null, {{c.id}} )'>_U_</span>
|
||||
{% endif %}
|
||||
{% if c.author.customtitle %} <bdi style="color: #{{c.author.titlecolor}}"> {{c.author.customtitle | safe}}</bdi>{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% for a in c.awards|reverse %}
|
||||
<i class="{{a.class_list}} px-1" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{a.title}} Award given by @{{a.user.username}}"></i>
|
||||
|
|
@ -189,25 +210,6 @@
|
|||
{% if c.is_blocking %}<i class="fas fa-user-minus text-warning" data-bs-toggle="tooltip" data-bs-placement="bottom" title="You're blocking this user, but you can see this comment because you're an admin"></i>{% endif %}
|
||||
{% if c.is_blocked %}<i class="fas fa-user-minus text-danger" data-bs-toggle="tooltip" data-bs-placement="bottom" title="This user is blocking you."></i>{% endif %}
|
||||
|
||||
{% if c.ghost %}
|
||||
👻
|
||||
{% else %}
|
||||
|
||||
{% if c.author.verified %}<i class="fas fa-badge-check align-middle ml-1 {% if c.author.verified=='Glowiefied' %}glow{% endif %}" style="color:{% if c.author.verifiedcolor %}#{{c.author.verifiedcolor}}{% else %}#1DA1F2{% endif %}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{c.author.verified}}"></i>
|
||||
{% endif %}
|
||||
{% if not c.author %}
|
||||
{{c.print()}}
|
||||
{% endif %}
|
||||
<a href="/@{{c.author_name}}" class="user-name" onclick='popclick({{c.author.json_popover(v) | tojson}})' data-bs-placement="bottom" data-bs-toggle="popover" data-bs-trigger="click" data-content-id="popover" role="button" tabindex="0" style="font-size:12px; font-weight:bold;"><img loading="lazy" src="{{c.author.profile_url}}" class="profile-pic-20 mr-2"><span {% if c.author.patron and not c.distinguish_level %}class="patron" style="background-color:#{{c.author.namecolor}};"{% elif c.distinguish_level %}class="mod"{% endif %}>{{c.author_name}}</span></a>
|
||||
{% if v and v.admin_level > 1 %}
|
||||
<span
|
||||
class="usernote-link"
|
||||
data-micromodal-trigger="modal-1"
|
||||
onclick='fillnote( {{c.author.json_popover(v) | tojson}}, null, {{c.id}} )'>_U_</span>
|
||||
{% endif %}
|
||||
{% if c.author.customtitle %} <bdi style="color: #{{c.author.titlecolor}}"> {{c.author.customtitle | safe}}</bdi>{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% if c.parent_comment_id and not standalone and level != 1 %}<a href="#comment-{{c.parent_comment_id}}-only" class="text-muted ml-2"><i class="fas fa-reply fa-sm fa-fw fa-flip-horizontal mr-1"></i>{{c.parent_comment.author_name}}</a>{% endif %}
|
||||
|
||||
{% if c.notif_utc %}
|
||||
|
|
@ -220,6 +222,12 @@
|
|||
<span class="time-edited" id="time-edit-{{c.id}}" onmouseover="timestamp('time-edit-{{c.id}}','{{c.edited_utc}}')"><span>·</span> <span class="font-italic">Edited {{c.edited_string}}</span></span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="comment-body">
|
||||
|
||||
<div id="{% if comment_info and comment_info.id == c.id %}context{%else%}comment-{{c.id}}-only{% endif %}" class="{% if c.unread %}unread{% endif %} {% if c.award_count('glowie') %}glow{% endif %} comment-{{c.id}}-only comment-anchor {% if comment_info and comment_info.id == c.id %}context{%endif%}{% if c.is_banned %} banned{% endif %}{% if c.deleted_utc %} deleted{% endif %}">
|
||||
|
||||
|
||||
{% if v and c.filter_state == 'reported' and v.can_manage_reports() %}
|
||||
<div id="flaggers-{{c.id}}" class="flaggers d-none">
|
||||
<strong><i class="far fa-fw fa-flag"></i> Reports:</strong>
|
||||
|
|
@ -379,14 +387,14 @@
|
|||
<ul class="d-none d-md-flex list-inline text-right text-md-left"><li>
|
||||
{% if v and request.path.startswith('/@') and v.admin_level < 2%}
|
||||
{% if voted==1 %}
|
||||
<button class="btn caction py-0 m-0 px-3 nobackground arrow-up mx-0 comment-{{c.id}}-up active"></button>
|
||||
<button class="btn caction p-0 m-0 pr-3 nobackground arrow-up mx-0 comment-{{c.id}}-up active"></button>
|
||||
{% endif %}
|
||||
{% elif v %}
|
||||
|
||||
<button tabindex="0" role="button" onclick="vote('comment', '{{c.id}}', '1')" class="comment-{{c.id}}-up btn caction py-0 m-0 px-3 nobackground arrow-up upvote-button mx-0 comment-{{c.id}}-up {% if voted==1 %}active{% endif %}"></button>
|
||||
<button tabindex="0" role="button" onclick="vote('comment', '{{c.id}}', '1')" class="comment-{{c.id}}-up btn caction p-0 m-0 pr-3 nobackground arrow-up upvote-button comment-{{c.id}}-up {% if voted==1 %}active{% endif %}"></button>
|
||||
|
||||
{% else %}
|
||||
<button tabindex="0" class="comment-{{c.id}}-up btn caction nobackground py-0 m-0 px-3 arrow-up" onclick="location.href='/login';"></button>
|
||||
<button tabindex="0" class="comment-{{c.id}}-up btn caction nobackground p-0 m-0 pr-3 arrow-up" onclick="location.href='/login';"></button>
|
||||
|
||||
{% endif %}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue