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
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue