-
Notifications
You must be signed in to change notification settings - Fork 33
/
NewCommentsLayout.user.js
156 lines (147 loc) · 4.69 KB
/
NewCommentsLayout.user.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
// ==UserScript==
// @name New Comments Layout
// @description Better comments layout for easier readability and moderation
// @homepage https://github.com/samliew/SO-mod-userscripts
// @author Samuel Liew
// @version 3.3.13
//
// @match https://*.stackoverflow.com/*
// @match https://*.serverfault.com/*
// @match https://*.superuser.com/*
// @match https://*.askubuntu.com/*
// @match https://*.mathoverflow.net/*
// @match https://*.stackapps.com/*
// @match https://*.stackexchange.com/*
// @match https://stackoverflowteams.com/*
//
// @exclude https://api.stackexchange.com/*
// @exclude https://data.stackexchange.com/*
// @exclude https://contests.stackoverflow.com/*
// @exclude https://winterbash*.stackexchange.com/*
// @exclude *chat.*
// @exclude *blog.*
// @exclude */tour
//
// @require https://raw.githubusercontent.com/samliew/SO-mod-userscripts/master/lib/se-ajax-common.js
// @require https://raw.githubusercontent.com/samliew/SO-mod-userscripts/master/lib/common.js
//
// @run-at document-start
// ==/UserScript==
/* globals StackExchange */
/// <reference types="./globals" />
'use strict';
const commentsFontSize = '13px';
// Append styles to header
// .comment-body : comment text on post
// .comment-copy : comment text in mod dashboard
addStylesheet(`
/* Main comments UI changes */
.comment-body,
.comment-copy {
--comment-font-size: ${commentsFontSize};
}
.comment-copy {
font-size: var(--comment-font-size);
}
.comment-body {
font-size: 0; /* hides the whitespace so we can adjust individual margins on child elements */
}
.comment-body > * {
display: inline-block;
margin: 0 10px 0 0;
font-size: var(--comment-font-size);
}
.comment-body .comment-date,
.comment-body .comment-date > a,
.comment-copy .comment-date,
.comment-copy .comment-date > a {
color: var(--black-350);
}
.comment-body > button,
.comment-body > .s-btn,
.comment-body > .s-btn.s-btn__link,
.comment-copy > button,
.comment-copy > .s-btn,
.comment-copy > .s-btn.s-btn__link {
font-size: var(--comment-font-size);
}
.comment-body > button.js-comment-delete,
.comment-copy > button.js-comment-delete {
float: right;
margin-left: 10px;
}
ul.comments-list .comment-score span {
font-size: var(--comment-font-size);
}
.comment-form .comment-copy,
.comment-body .comment-copy {
display: block;
margin: 0 0 2px 0;
line-height: 1.2;
color: var(--black);
letter-spacing: 0.006em;
}
/* Minor comments UI changes */
.comments ul.comments-list .comment-text {
padding-right: 0;
}
.comment-copy + .comment-user {
margin-left: 5px;
margin-right: 5px;
}
.comment-user {
}
.deleted-comment-info {
float: right;
}
.deleted-comment-info .comment-user {
display: inline-block;
}
/* Hover only styles */
ul.comments-list:hover .js-comment-edit .hover-only-label,
ul.comments-list:hover .js-comment-delete .hover-only-label {
visibility: visible;
opacity: 0.25;
}
ul.comments-list .comment:hover .js-comment-edit .hover-only-label,
ul.comments-list .comment:hover .js-comment-delete .hover-only-label {
opacity: 1;
}
ul.comments-list .comment .comment-actions,
ul.comments-list .comment .comment-text {
transition: none;
}
ul.comments-list .comment:not(.deleted-comment):hover .comment-actions,
ul.comments-list .comment:not(.deleted-comment):hover .comment-text {
background-color: var(--yellow-050);
}
/* New mod/staff badges */
.s-badge__staff {
border-color: var(--orange-400) !important;
background-color: transparent !important;
color: var(--orange-400) !important;
}
.s-badge__moderator {
border-color: var(--theme-secondary-color) !important;
background-color: transparent !important;
color: var(--theme-secondary-color) !important;
}
.s-badge__moderator.s-badge__xs:before {
background-image: url("data:image/svg+xml,%3Csvg width='7' height='9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.798.246c.3-.329 1.1-.327 1.399 0l2.579 3.66c.3.329.298.864 0 1.192L4.196 8.75c-.299.329-1.1.327-1.398 0L.224 5.098a.904.904 0 010-1.192L2.798.246z' fill='%230077cc'/%3E%3C/svg%3E") !important;
}
.s-badge__moderator:before {
background-image: url("data:image/svg+xml,%3Csvg width='12' height='14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.528.746c.257-.329.675-.327.93 0l4.42 5.66c.258.329.257.864 0 1.192l-4.42 5.66c-.256.328-.674.327-.93 0l-4.42-5.66c-.257-.329-.256-.865 0-1.192l4.42-5.66z' fill='%230077cc'/%3E%3C/svg%3E") !important;
}
.comment-body > .s-badge {
position: relative;
display: inline-block;
white-space: nowrap;
margin: 0px 0px 5px;
}
.comment-body > .s-badge + .comment-date {
margin-left: 6px;
}
.s-badge__moderator:before {
display: inline-block !important;
}
`); // end stylesheet