forked from mandorinn/eSix-Cafe
eSixCafe.user.css generation for Stylus
This commit is contained in:
parent
bf4563ff60
commit
10574ac640
1
.gitignore
vendored
1
.gitignore
vendored
@ -1,5 +1,6 @@
|
||||
node_modules/
|
||||
release/
|
||||
src/eSixCafe.user.scss
|
||||
package.json
|
||||
yarn.lock
|
||||
|
||||
|
||||
94
Makefile
94
Makefile
@ -1,18 +1,108 @@
|
||||
S=./node_modules/.bin/sass
|
||||
SFLAGS=
|
||||
SFLAGS=--no-source-map
|
||||
|
||||
all: eSixCafe eSixCafeStylus
|
||||
|
||||
eSixCafe:
|
||||
mkdir -p release/
|
||||
${S} ${SFLAGS} src/eSixCafe.scss release/eSixCafe.css
|
||||
sed -i 's^\/\*@-moz-document domain.*^^g' release/eSixCafe.css
|
||||
|
||||
eSixCafeStylus:
|
||||
mkdir -p release/
|
||||
mkdir -p release/tmp/
|
||||
|
||||
cp -a src/eSixCafe.scss src/eSixCafe.user.scss
|
||||
cp -a src/common/_comment_container_*.scss \
|
||||
src/common/main_layout_theme_*.scss \
|
||||
release/tmp/
|
||||
cp -a src/specific/blips_buttons.scss \
|
||||
src/specific/comments_rank_border.scss \
|
||||
release/tmp/
|
||||
|
||||
sed -i 's^@import \"base\/themable.*^^g' src/eSixCafe.user.scss
|
||||
sed -i 's^@import \"common\/_comment_container_.*^^g' src/eSixCafe.user.scss
|
||||
sed -i 's^@import \"common\/main_layout_theme_.*^^g' src/eSixCafe.user.scss
|
||||
sed -i 's^@import \"specific\/blips_buttons.*^^g' src/eSixCafe.user.scss
|
||||
sed -i 's^@import \"specific\/comments_rank_border.*^^g' src/eSixCafe.user.scss
|
||||
|
||||
sed -i 's^@if.*^@if 1 == 1 {^g' release/tmp/*.scss
|
||||
cat src/base/_colors.scss release/tmp/comments_rank_border.scss >release/tmp/comments_rank_border.scss.new
|
||||
|
||||
${S} ${SFLAGS} release/tmp/_comment_container_buttons.scss release/tmp/_comment_container_buttons.css
|
||||
${S} ${SFLAGS} release/tmp/_comment_container_profile_picture_circle.scss release/tmp/_comment_container_profile_picture_circle.css
|
||||
${S} ${SFLAGS} release/tmp/_comment_container_profile_picture_square.scss release/tmp/_comment_container_profile_picture_square.css
|
||||
${S} ${SFLAGS} release/tmp/_comment_container_rank_border.scss release/tmp/_comment_container_rank_border.css
|
||||
${S} ${SFLAGS} release/tmp/main_layout_theme_classic.scss release/tmp/main_layout_theme_classic.css
|
||||
${S} ${SFLAGS} release/tmp/main_layout_theme_muted.scss release/tmp/main_layout_theme_muted.css
|
||||
${S} ${SFLAGS} release/tmp/blips_buttons.scss release/tmp/blips_buttons.css
|
||||
${S} ${SFLAGS} release/tmp/comments_rank_border.scss.new release/tmp/comments_rank_border.css
|
||||
${S} ${SFLAGS} src/eSixCafe.user.scss release/eSixCafe.user.css
|
||||
|
||||
echo "if buttons {" >>release/eSixCafe.user.css
|
||||
cat release/tmp/_comment_container_buttons.css >>release/eSixCafe.user.css
|
||||
echo "}" >>release/eSixCafe.user.css
|
||||
|
||||
echo "if roundness == circle {" >>release/eSixCafe.user.css
|
||||
cat release/tmp/_comment_container_profile_picture_circle.css >>release/eSixCafe.user.css
|
||||
echo "}" >>release/eSixCafe.user.css
|
||||
|
||||
echo "if roundness == square {" >>release/eSixCafe.user.css
|
||||
cat release/tmp/_comment_container_profile_picture_square.css >>release/eSixCafe.user.css
|
||||
echo "}" >>release/eSixCafe.user.css
|
||||
|
||||
echo "if borderRank {" >>release/eSixCafe.user.css
|
||||
cat release/tmp/_comment_container_rank_border.css >>release/eSixCafe.user.css
|
||||
echo "}" >>release/eSixCafe.user.css
|
||||
|
||||
echo "if themep == classic {" >>release/eSixCafe.user.css
|
||||
cat release/tmp/main_layout_theme_classic.css >>release/eSixCafe.user.css
|
||||
echo "}" >>release/eSixCafe.user.css
|
||||
|
||||
echo "if themep == muted {" >>release/eSixCafe.user.css
|
||||
cat release/tmp/main_layout_theme_muted.css >>release/eSixCafe.user.css
|
||||
echo "}" >>release/eSixCafe.user.css
|
||||
|
||||
echo "if buttons {" >>release/eSixCafe.user.css
|
||||
cat release/tmp/blips_buttons.css >>release/eSixCafe.user.css
|
||||
echo "}" >>release/eSixCafe.user.css
|
||||
|
||||
echo "if borderRank {" >>release/eSixCafe.user.css
|
||||
cat release/tmp/comments_rank_border.css >>release/eSixCafe.user.css
|
||||
echo "}" >>release/eSixCafe.user.css
|
||||
|
||||
printf "$$%s\n" "theme-pack: \"classic\";" >src/eSixCafe.user.scss
|
||||
echo "@import \"base/themable\";" >>src/eSixCafe.user.scss
|
||||
${S} ${SFLAGS} src/eSixCafe.user.scss release/tmp/theme_classic.css
|
||||
|
||||
printf "$$%s\n" "theme-pack: \"muted\";" >src/eSixCafe.user.scss
|
||||
echo "@import \"base/themable\";" >>src/eSixCafe.user.scss
|
||||
${S} ${SFLAGS} src/eSixCafe.user.scss release/tmp/theme_muted.css
|
||||
|
||||
printf "$$%s\n" "theme-pack: \"popular\";" >src/eSixCafe.user.scss
|
||||
echo "@import \"base/themable\";" >>src/eSixCafe.user.scss
|
||||
${S} ${SFLAGS} src/eSixCafe.user.scss release/tmp/theme_popular.css
|
||||
|
||||
echo "if themep == classic {" >>release/eSixCafe.user.css
|
||||
cat release/tmp/theme_classic.css >>release/eSixCafe.user.css
|
||||
echo "}" >>release/eSixCafe.user.css
|
||||
|
||||
echo "if themep == muted {" >>release/eSixCafe.user.css
|
||||
cat release/tmp/theme_muted.css >>release/eSixCafe.user.css
|
||||
echo "}" >>release/eSixCafe.user.css
|
||||
|
||||
echo "if themep == pThemes {" >>release/eSixCafe.user.css
|
||||
cat release/tmp/theme_popular.css >>release/eSixCafe.user.css
|
||||
echo "}" >>release/eSixCafe.user.css
|
||||
|
||||
sed -i 's^\/\*@-moz-document domain^@-moz-document domain^g' release/eSixCafe.user.css
|
||||
sed -i 's^e926.net\") {\*\/^e926.net\") {^g' release/eSixCafe.user.css
|
||||
echo "}" >>release/eSixCafe.user.css
|
||||
|
||||
clean:
|
||||
rm -rf release/tmp
|
||||
rm -f release/eSixCafe.css
|
||||
rm -f release/eSixCafe.user.css
|
||||
rm -f src/eSixCafe.user.scss
|
||||
|
||||
setup:
|
||||
yarn add sass@1.42.1
|
||||
|
||||
@ -1,3 +1,27 @@
|
||||
/* ==UserStyle==
|
||||
@name eSix Café
|
||||
@namespace mandorinn
|
||||
@version 3.0.0
|
||||
@description Muted and easy on the eyes style for e621. Big credits to Faucet for the bug reports so far, thank you!
|
||||
@author mandorinn [(www.mandorinn.dev)], faucet [(https://e621.net/users/601225)], edshot99 [(https://git.groovyexpress.com/edshot99)]
|
||||
@preprocessor stylus
|
||||
|
||||
@var select themep "Theme Pack" {
|
||||
"Muted": "muted",
|
||||
"Classic": "classic",
|
||||
"Popular": "pThemes"
|
||||
}
|
||||
@var select roundness "Profile picture shape" {
|
||||
"Circle": "circle",
|
||||
"Square": "square"
|
||||
}
|
||||
@var checkbox buttons "Comment Buttons" 1
|
||||
@var checkbox borderRank "Name Rank Border Colors" 1
|
||||
|
||||
==/UserStyle== */
|
||||
|
||||
/*@-moz-document domain("e621.net"), domain("e926.net") {*/
|
||||
|
||||
body {
|
||||
background-color: var(--bg-300) !important;
|
||||
background-image: none !important;
|
||||
|
||||
@ -25,314 +25,6 @@
|
||||
.forum-post-votes-list {
|
||||
margin-top: 1.5em !important;
|
||||
}
|
||||
|
||||
@if $comment-buttons == 1 {
|
||||
.content-menu {
|
||||
margin: .5rem 0;
|
||||
margin-top: 1rem;
|
||||
width: fit-content;
|
||||
|
||||
menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: transparent !important;
|
||||
user-select: none;
|
||||
|
||||
/*
|
||||
li:nth-child(2),
|
||||
li:nth-child(6),
|
||||
li:nth-child(8) {
|
||||
display: none;
|
||||
}
|
||||
*/
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p.info {
|
||||
padding-bottom: .5rem;
|
||||
}
|
||||
|
||||
.re621-comment-reply:hover,
|
||||
.re621-forum-post-reply:hover,
|
||||
.reply-link:hover,
|
||||
.blip-reply-link:hover,
|
||||
a.blip-atme-link:hover {
|
||||
&::before {
|
||||
background-color: var(--bg-300) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.re621-comment-reply,
|
||||
.re621-forum-post-reply,
|
||||
.reply-link,
|
||||
.blip-reply-link {
|
||||
font-size: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 26px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
aspect-ratio: 1/1;
|
||||
width: 28px;
|
||||
position: absolute;
|
||||
background-color: var(--bg-400);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: url("data:image/svg+xml,%3Csvg height='20.0' viewBox='0 0 24.0 24.0' width='20.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 8.2667V4L3 11.4667L10 18.9333V14.56C15 14.56 18.5 16.2667 21 20C20 14.6667 17 9.3333 10 8.2667Z' fill='%23ffffffff'/%3E%3C/svg%3E");
|
||||
position: absolute;
|
||||
mix-blend-mode: soft-light;
|
||||
}
|
||||
}
|
||||
|
||||
.content-menu a:not([data-bid])[href^="/blips"]:hover {
|
||||
&::before {
|
||||
background-color: var(--bg-300) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.content-menu a:not([data-bid])[href^="/blips"] {
|
||||
font-size: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 26px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
aspect-ratio: 1/1;
|
||||
width: 28px;
|
||||
position: absolute;
|
||||
background-color: var(--bg-400);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: url("data:image/svg+xml,%3Csvg height='24.0' viewBox='0 0 24.0 24.0' width='24.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.998,3C2.894,3 1.998,3.895 1.998,5V17C1.998,18.104 2.894,19 3.998,19H6.9981V23L10.998,19H19.998C21.103,19 21.998,18.104 21.998,17V5C21.998,3.895 21.103,3 19.998,3H3.998Z' fill='%23ffffffff'/%3E%3C/svg%3E");
|
||||
position: absolute;
|
||||
mix-blend-mode: soft-light;
|
||||
}
|
||||
}
|
||||
|
||||
.content-menu a.blip-atme-link {
|
||||
font-size: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 26px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
aspect-ratio: 1/1;
|
||||
width: 28px;
|
||||
position: absolute;
|
||||
background-color: var(--bg-400);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: url("data:image/svg+xml,%3Csvg height='24.0' viewBox='0 0 24.0 24.0' width='24.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,2C6.486,2 2,6.486 2,12C2,17.515 6.486,22 12,22C14.039,22 15.993,21.398 17.652,20.259L16.521,18.611C15.195,19.519 13.633,20 12,20C7.589,20 4,16.411 4,12C4,7.589 7.589,4 12,4C16.411,4 20,7.589 20,12V12.782C20,14.17 19.402,15 18.4,15L18.398,15.018C18.338,15.005 18.273,15 18.209,15H18C17.437,15 16.6,14.182 16.6,13.631V12C16.6,9.464 14.537,7.4 12,7.4C9.463,7.4 7.4,9.463 7.4,12C7.4,14.537 9.463,16.6 12,16.6C13.234,16.6 14.35,16.106 15.177,15.313C15.826,16.269 16.93,17 18,17L18.002,16.981C18.064,16.994 18.129,17 18.195,17H18.4C20.552,17 22,15.306 22,12.782V12C22,6.486 17.514,2 12,2ZM12,14.599C10.566,14.599 9.4,13.433 9.4,11.999C9.4,10.565 10.566,9.399 12,9.399C13.434,9.399 14.6,10.565 14.6,11.999C14.6,13.433 13.434,14.599 12,14.599Z' fill='%23ffffffff'/%3E%3C/svg%3E%0A");
|
||||
position: absolute;
|
||||
mix-blend-mode: soft-light;
|
||||
}
|
||||
}
|
||||
|
||||
.blip-atme-link {
|
||||
font-size: 0;
|
||||
margin-inline: .25rem;
|
||||
}
|
||||
|
||||
li[id^="comment-vote-up-"] a {
|
||||
background-color: var(--bg-400) !important;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: .5rem;
|
||||
border-radius: 4px 0 0 4px;
|
||||
padding: 0 .5rem 0 .5rem;
|
||||
color: var(--base-text) !important;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--favorite-button) !important;
|
||||
color: var(--base-text) !important;
|
||||
border-radius: 4px 0 0 4px !important;
|
||||
}
|
||||
}
|
||||
|
||||
li[id^="comment-vote-up-"].score-positive a {
|
||||
background-color: var(--favorite-button) !important;
|
||||
color: var(--base-text) !important;
|
||||
}
|
||||
|
||||
li[id^="comment-score-"] {
|
||||
background-color: var(--bg-400);
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 .25rem !important;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
li[id^="comment-score-"]:nth-of-type(2) {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
li[id^="comment-vote-down-"] a {
|
||||
background-color: var(--bg-400) !important;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: .5rem;
|
||||
border-radius: 0 4px 4px 0;
|
||||
padding: 0 .5rem 0 .5rem;
|
||||
color: var(--base-text) !important;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--remove-favorite) !important;
|
||||
color: var(--base-text) !important;
|
||||
border-radius: 0 4px 4px 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
li[id^="comment-vote-down-"].score-negative a {
|
||||
background-color: var(--remove-favorite) !important;
|
||||
color: var(--base-text) !important;
|
||||
border-radius: 0 4px 4px 0 !important;
|
||||
}
|
||||
|
||||
a[href^="/tickets/new?disp_id"]:hover {
|
||||
&::before {
|
||||
background-color: var(--bg-300);
|
||||
}
|
||||
}
|
||||
|
||||
a[href^="/tickets/new?disp_id"] {
|
||||
font-size: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 26px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
aspect-ratio: 1/1;
|
||||
width: 28px;
|
||||
position: absolute;
|
||||
background-color: var(--bg-400);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: url("data:image/svg+xml,%3Csvg height='20.0' viewBox='0 0 24.0 24.0' width='20.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6.002H14V3.002C14 2.45 13.553 2.002 13 2.002H4C3.447 2.002 3 2.45 3 3.002V22.002H5V14.002H10.586L8.293 16.295C8.007 16.581 7.922 17.011 8.076 17.385C8.23 17.759 8.596 18.002 9 18.002H20C20.553 18.002 21 17.554 21 17.002V7.002C21 6.45 20.553 6.002 20 6.002Z' fill='%23f00'/%3E%3C/svg%3E");
|
||||
position: absolute;
|
||||
mix-blend-mode: color-dodge;
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
|
||||
.re621-comment-copy-id:hover, .re621-forum-post-copy-id:hover {
|
||||
&::before {
|
||||
background-color: var(--bg-300);
|
||||
}
|
||||
}
|
||||
|
||||
.re621-comment-copy-id, .re621-forum-post-copy-id, .blip {
|
||||
font-size: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 26px;
|
||||
position: relative;
|
||||
margin-left: .25rem;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
aspect-ratio: 1/1;
|
||||
width: 28px;
|
||||
position: absolute;
|
||||
background-color: var(--bg-400);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: url("data:image/svg+xml,%3Csvg height='20.0' viewBox='0 0 24.0 24.0' width='20.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.414 1H9C7.897 1 7 1.898 7 3V17C7 18.103 7.897 19 9 19H19C20.103 19 21 18.103 21 17V5.586L16.414 1ZM15 7V2L20 7H15Z' fill='%23ffffffff'/%3E%3Cpath d='M5 5H3V21C3 22.103 3.897 23 5 23H17V21H5V5Z' fill='%23ffffffff'/%3E%3C/svg%3E");
|
||||
position: absolute;
|
||||
mix-blend-mode: soft-light;
|
||||
}
|
||||
}
|
||||
|
||||
a[class*="-hide-link"]:hover, a[data-confirm^="Are you sure you want to hide this"]:hover {
|
||||
&::before {
|
||||
background-color: var(--bg-300);
|
||||
}
|
||||
}
|
||||
|
||||
a[class*="-hide-link"], a[data-confirm^="Are you sure you want to hide this"] {
|
||||
font-size: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 26px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
aspect-ratio: 1/1;
|
||||
width: 28px;
|
||||
position: absolute;
|
||||
background-color: var(--bg-400);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: url("data:image/svg+xml,%3Csvg height='20.0' viewBox='0 0 24.0 24.0' width='20.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 7c2.76 0 5 2.24 5 5 0 0.65 -0.13 1.26 -0.36 1.83l2.92 2.92c1.51 -1.26 2.7 -2.89 3.43 -4.75 -1.73 -4.39 -6 -7.5 -11 -7.5 -1.4 0 -2.74 0.25 -3.98 0.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28 0.46 0.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03 -0.3 4.38 -0.84l0.42 0.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-0.05 0.21 -0.08 0.43 -0.08 0.65 0 1.66 1.34 3 3 3 0.22 0 0.44 -0.03 0.65 -0.08l1.55 1.55c-0.67 0.33 -1.41 0.53 -2.2 0.53 -2.76 0 -5 -2.24 -5 -5 0 -0.79 0.2 -1.53 0.53 -2.2zM11.84 9.02l3.15 3.15 0.02 -0.16c0 -1.66 -1.34 -3 -3 -3l-0.17 0.01z' fill='%23ffffff'/%3E%3C/svg%3E") !important;
|
||||
position: absolute;
|
||||
mix-blend-mode: soft-light;
|
||||
}
|
||||
}
|
||||
|
||||
.content-menu a[class*="edit_"]:hover, .content-menu a[href*="edit"]:hover {
|
||||
&::before {
|
||||
background-color: var(--bg-300);
|
||||
}
|
||||
}
|
||||
|
||||
.content-menu a[class*="edit_"], .content-menu a[href*="edit"] {
|
||||
font-size: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 26px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
aspect-ratio: 1/1;
|
||||
width: 28px;
|
||||
position: absolute;
|
||||
background-color: var(--bg-400);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: url("data:image/svg+xml,%3Csvg height='24.0' viewBox='0 0 24.0 24.0' width='24.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75 -3.75L3 17.25zM20.71 7.04c0.39 -0.39 0.39 -1.02 0 -1.41l-2.34 -2.34c-0.39 -0.39 -1.02 -0.39 -1.41 0l-1.83 1.83 3.75 3.75 1.83 -1.83z' fill='%23ffffff'/%3E%3C/svg%3E");
|
||||
position: absolute;
|
||||
mix-blend-mode: soft-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -362,29 +54,3 @@
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@if $profile-picture-circle == 1 {
|
||||
:root {
|
||||
--avatar-border-radius: 50%;
|
||||
}
|
||||
} @else {
|
||||
:root {
|
||||
--avatar-border-radius: 2.5%;
|
||||
}
|
||||
|
||||
.avatar .post-thumbnail {
|
||||
background-color: var(--elements-highlight);
|
||||
}
|
||||
}
|
||||
|
||||
@if $name-rank-border-colors == 1 {
|
||||
body[data-th-main="hexagon"] {
|
||||
.author-info:has(.user-member) .post-thumbnail {
|
||||
border-color: var(--user-member) !important;
|
||||
}
|
||||
|
||||
.avatar .post-thumbnail {
|
||||
background-color: var(--user-member);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
311
src/common/_comment_container_buttons.scss
Normal file
311
src/common/_comment_container_buttons.scss
Normal file
@ -0,0 +1,311 @@
|
||||
.comment-post-grid {
|
||||
.content {
|
||||
@if $comment-buttons == 1 {
|
||||
.content-menu {
|
||||
margin: .5rem 0;
|
||||
margin-top: 1rem;
|
||||
width: fit-content;
|
||||
|
||||
menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: transparent !important;
|
||||
user-select: none;
|
||||
|
||||
/*
|
||||
li:nth-child(2),
|
||||
li:nth-child(6),
|
||||
li:nth-child(8) {
|
||||
display: none;
|
||||
}
|
||||
*/
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p.info {
|
||||
padding-bottom: .5rem;
|
||||
}
|
||||
|
||||
.re621-comment-reply:hover,
|
||||
.re621-forum-post-reply:hover,
|
||||
.reply-link:hover,
|
||||
.blip-reply-link:hover,
|
||||
a.blip-atme-link:hover {
|
||||
&::before {
|
||||
background-color: var(--bg-300) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.re621-comment-reply,
|
||||
.re621-forum-post-reply,
|
||||
.reply-link,
|
||||
.blip-reply-link {
|
||||
font-size: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 26px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
aspect-ratio: 1/1;
|
||||
width: 28px;
|
||||
position: absolute;
|
||||
background-color: var(--bg-400);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: url("data:image/svg+xml,%3Csvg height='20.0' viewBox='0 0 24.0 24.0' width='20.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 8.2667V4L3 11.4667L10 18.9333V14.56C15 14.56 18.5 16.2667 21 20C20 14.6667 17 9.3333 10 8.2667Z' fill='%23ffffffff'/%3E%3C/svg%3E");
|
||||
position: absolute;
|
||||
mix-blend-mode: soft-light;
|
||||
}
|
||||
}
|
||||
|
||||
.content-menu a:not([data-bid])[href^="/blips"]:hover {
|
||||
&::before {
|
||||
background-color: var(--bg-300) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.content-menu a:not([data-bid])[href^="/blips"] {
|
||||
font-size: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 26px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
aspect-ratio: 1/1;
|
||||
width: 28px;
|
||||
position: absolute;
|
||||
background-color: var(--bg-400);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: url("data:image/svg+xml,%3Csvg height='24.0' viewBox='0 0 24.0 24.0' width='24.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.998,3C2.894,3 1.998,3.895 1.998,5V17C1.998,18.104 2.894,19 3.998,19H6.9981V23L10.998,19H19.998C21.103,19 21.998,18.104 21.998,17V5C21.998,3.895 21.103,3 19.998,3H3.998Z' fill='%23ffffffff'/%3E%3C/svg%3E");
|
||||
position: absolute;
|
||||
mix-blend-mode: soft-light;
|
||||
}
|
||||
}
|
||||
|
||||
.content-menu a.blip-atme-link {
|
||||
font-size: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 26px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
aspect-ratio: 1/1;
|
||||
width: 28px;
|
||||
position: absolute;
|
||||
background-color: var(--bg-400);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: url("data:image/svg+xml,%3Csvg height='24.0' viewBox='0 0 24.0 24.0' width='24.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,2C6.486,2 2,6.486 2,12C2,17.515 6.486,22 12,22C14.039,22 15.993,21.398 17.652,20.259L16.521,18.611C15.195,19.519 13.633,20 12,20C7.589,20 4,16.411 4,12C4,7.589 7.589,4 12,4C16.411,4 20,7.589 20,12V12.782C20,14.17 19.402,15 18.4,15L18.398,15.018C18.338,15.005 18.273,15 18.209,15H18C17.437,15 16.6,14.182 16.6,13.631V12C16.6,9.464 14.537,7.4 12,7.4C9.463,7.4 7.4,9.463 7.4,12C7.4,14.537 9.463,16.6 12,16.6C13.234,16.6 14.35,16.106 15.177,15.313C15.826,16.269 16.93,17 18,17L18.002,16.981C18.064,16.994 18.129,17 18.195,17H18.4C20.552,17 22,15.306 22,12.782V12C22,6.486 17.514,2 12,2ZM12,14.599C10.566,14.599 9.4,13.433 9.4,11.999C9.4,10.565 10.566,9.399 12,9.399C13.434,9.399 14.6,10.565 14.6,11.999C14.6,13.433 13.434,14.599 12,14.599Z' fill='%23ffffffff'/%3E%3C/svg%3E%0A");
|
||||
position: absolute;
|
||||
mix-blend-mode: soft-light;
|
||||
}
|
||||
}
|
||||
|
||||
.blip-atme-link {
|
||||
font-size: 0;
|
||||
margin-inline: .25rem;
|
||||
}
|
||||
|
||||
li[id^="comment-vote-up-"] a {
|
||||
background-color: var(--bg-400) !important;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: .5rem;
|
||||
border-radius: 4px 0 0 4px;
|
||||
padding: 0 .5rem 0 .5rem;
|
||||
color: var(--base-text) !important;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--favorite-button) !important;
|
||||
color: var(--base-text) !important;
|
||||
border-radius: 4px 0 0 4px !important;
|
||||
}
|
||||
}
|
||||
|
||||
li[id^="comment-vote-up-"].score-positive a {
|
||||
background-color: var(--favorite-button) !important;
|
||||
color: var(--base-text) !important;
|
||||
}
|
||||
|
||||
li[id^="comment-score-"] {
|
||||
background-color: var(--bg-400);
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 .25rem !important;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
li[id^="comment-score-"]:nth-of-type(2) {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
li[id^="comment-vote-down-"] a {
|
||||
background-color: var(--bg-400) !important;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: .5rem;
|
||||
border-radius: 0 4px 4px 0;
|
||||
padding: 0 .5rem 0 .5rem;
|
||||
color: var(--base-text) !important;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--remove-favorite) !important;
|
||||
color: var(--base-text) !important;
|
||||
border-radius: 0 4px 4px 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
li[id^="comment-vote-down-"].score-negative a {
|
||||
background-color: var(--remove-favorite) !important;
|
||||
color: var(--base-text) !important;
|
||||
border-radius: 0 4px 4px 0 !important;
|
||||
}
|
||||
|
||||
a[href^="/tickets/new?disp_id"]:hover {
|
||||
&::before {
|
||||
background-color: var(--bg-300);
|
||||
}
|
||||
}
|
||||
|
||||
a[href^="/tickets/new?disp_id"] {
|
||||
font-size: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 26px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
aspect-ratio: 1/1;
|
||||
width: 28px;
|
||||
position: absolute;
|
||||
background-color: var(--bg-400);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: url("data:image/svg+xml,%3Csvg height='20.0' viewBox='0 0 24.0 24.0' width='20.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6.002H14V3.002C14 2.45 13.553 2.002 13 2.002H4C3.447 2.002 3 2.45 3 3.002V22.002H5V14.002H10.586L8.293 16.295C8.007 16.581 7.922 17.011 8.076 17.385C8.23 17.759 8.596 18.002 9 18.002H20C20.553 18.002 21 17.554 21 17.002V7.002C21 6.45 20.553 6.002 20 6.002Z' fill='%23f00'/%3E%3C/svg%3E");
|
||||
position: absolute;
|
||||
mix-blend-mode: color-dodge;
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
|
||||
.re621-comment-copy-id:hover, .re621-forum-post-copy-id:hover {
|
||||
&::before {
|
||||
background-color: var(--bg-300);
|
||||
}
|
||||
}
|
||||
|
||||
.re621-comment-copy-id, .re621-forum-post-copy-id, .blip {
|
||||
font-size: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 26px;
|
||||
position: relative;
|
||||
margin-left: .25rem;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
aspect-ratio: 1/1;
|
||||
width: 28px;
|
||||
position: absolute;
|
||||
background-color: var(--bg-400);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: url("data:image/svg+xml,%3Csvg height='20.0' viewBox='0 0 24.0 24.0' width='20.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.414 1H9C7.897 1 7 1.898 7 3V17C7 18.103 7.897 19 9 19H19C20.103 19 21 18.103 21 17V5.586L16.414 1ZM15 7V2L20 7H15Z' fill='%23ffffffff'/%3E%3Cpath d='M5 5H3V21C3 22.103 3.897 23 5 23H17V21H5V5Z' fill='%23ffffffff'/%3E%3C/svg%3E");
|
||||
position: absolute;
|
||||
mix-blend-mode: soft-light;
|
||||
}
|
||||
}
|
||||
|
||||
a[class*="-hide-link"]:hover, a[data-confirm^="Are you sure you want to hide this"]:hover {
|
||||
&::before {
|
||||
background-color: var(--bg-300);
|
||||
}
|
||||
}
|
||||
|
||||
a[class*="-hide-link"], a[data-confirm^="Are you sure you want to hide this"] {
|
||||
font-size: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 26px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
aspect-ratio: 1/1;
|
||||
width: 28px;
|
||||
position: absolute;
|
||||
background-color: var(--bg-400);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: url("data:image/svg+xml,%3Csvg height='20.0' viewBox='0 0 24.0 24.0' width='20.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 7c2.76 0 5 2.24 5 5 0 0.65 -0.13 1.26 -0.36 1.83l2.92 2.92c1.51 -1.26 2.7 -2.89 3.43 -4.75 -1.73 -4.39 -6 -7.5 -11 -7.5 -1.4 0 -2.74 0.25 -3.98 0.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28 0.46 0.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03 -0.3 4.38 -0.84l0.42 0.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-0.05 0.21 -0.08 0.43 -0.08 0.65 0 1.66 1.34 3 3 3 0.22 0 0.44 -0.03 0.65 -0.08l1.55 1.55c-0.67 0.33 -1.41 0.53 -2.2 0.53 -2.76 0 -5 -2.24 -5 -5 0 -0.79 0.2 -1.53 0.53 -2.2zM11.84 9.02l3.15 3.15 0.02 -0.16c0 -1.66 -1.34 -3 -3 -3l-0.17 0.01z' fill='%23ffffff'/%3E%3C/svg%3E") !important;
|
||||
position: absolute;
|
||||
mix-blend-mode: soft-light;
|
||||
}
|
||||
}
|
||||
|
||||
.content-menu a[class*="edit_"]:hover, .content-menu a[href*="edit"]:hover {
|
||||
&::before {
|
||||
background-color: var(--bg-300);
|
||||
}
|
||||
}
|
||||
|
||||
.content-menu a[class*="edit_"], .content-menu a[href*="edit"] {
|
||||
font-size: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 26px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
aspect-ratio: 1/1;
|
||||
width: 28px;
|
||||
position: absolute;
|
||||
background-color: var(--bg-400);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: url("data:image/svg+xml,%3Csvg height='24.0' viewBox='0 0 24.0 24.0' width='24.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75 -3.75L3 17.25zM20.71 7.04c0.39 -0.39 0.39 -1.02 0 -1.41l-2.34 -2.34c-0.39 -0.39 -1.02 -0.39 -1.41 0l-1.83 1.83 3.75 3.75 1.83 -1.83z' fill='%23ffffff'/%3E%3C/svg%3E");
|
||||
position: absolute;
|
||||
mix-blend-mode: soft-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
@if $profile-picture-circle == 1 {
|
||||
:root {
|
||||
--avatar-border-radius: 50%;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
@if $profile-picture-circle == 0 {
|
||||
:root {
|
||||
--avatar-border-radius: 2.5%;
|
||||
}
|
||||
|
||||
.avatar .post-thumbnail {
|
||||
background-color: var(--elements-highlight);
|
||||
}
|
||||
}
|
||||
11
src/common/_comment_container_rank_border.scss
Normal file
11
src/common/_comment_container_rank_border.scss
Normal file
@ -0,0 +1,11 @@
|
||||
@if $name-rank-border-colors == 1 {
|
||||
body[data-th-main="hexagon"] {
|
||||
.author-info:has(.user-member) .post-thumbnail {
|
||||
border-color: var(--user-member) !important;
|
||||
}
|
||||
|
||||
.avatar .post-thumbnail {
|
||||
background-color: var(--user-member);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -149,17 +149,3 @@ body {
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--bg-300);
|
||||
}
|
||||
|
||||
@if $theme-pack == "classic" {
|
||||
::selection {
|
||||
color: var(--bg);
|
||||
background: var(--header-link);
|
||||
}
|
||||
}
|
||||
|
||||
@if $theme-pack == "muted" {
|
||||
::selection {
|
||||
color: var(--bg);
|
||||
background: var(--elements-highlight);
|
||||
}
|
||||
}
|
||||
|
||||
6
src/common/main_layout_theme_classic.scss
Normal file
6
src/common/main_layout_theme_classic.scss
Normal file
@ -0,0 +1,6 @@
|
||||
@if $theme-pack == "classic" {
|
||||
::selection {
|
||||
color: var(--bg);
|
||||
background: var(--header-link);
|
||||
}
|
||||
}
|
||||
6
src/common/main_layout_theme_muted.scss
Normal file
6
src/common/main_layout_theme_muted.scss
Normal file
@ -0,0 +1,6 @@
|
||||
@if $theme-pack == "muted" {
|
||||
::selection {
|
||||
color: var(--bg);
|
||||
background: var(--elements-highlight);
|
||||
}
|
||||
}
|
||||
@ -5,6 +5,10 @@
|
||||
@import "base/themable";
|
||||
|
||||
@import "common/comment_container";
|
||||
@import "common/comment_container_buttons";
|
||||
@import "common/comment_container_profile_picture_circle";
|
||||
@import "common/comment_container_profile_picture_square";
|
||||
@import "common/comment_container_rank_border";
|
||||
@import "common/footer";
|
||||
@import "common/helper_classes";
|
||||
@import "common/scores";
|
||||
@ -16,6 +20,8 @@
|
||||
@import "common/forms.scss";
|
||||
@import "common/jquery_ui_custom.scss";
|
||||
@import "common/main_layout.scss";
|
||||
@import "common/main_layout_theme_classic.scss";
|
||||
@import "common/main_layout_theme_muted.scss";
|
||||
@import "common/navigation.scss";
|
||||
@import "common/news.scss";
|
||||
@import "common/notices.scss";
|
||||
@ -28,7 +34,7 @@
|
||||
|
||||
@import "specific/misc/challenge.scss";
|
||||
@import "specific/misc/cloudflare.scss";
|
||||
@import "specific/misc/extensions.scss";
|
||||
/*@import "specific/misc/extensions.scss";*/
|
||||
@import "specific/misc/maintenance.scss";
|
||||
|
||||
@import "specific/re621/components/_modal.scss";
|
||||
@ -41,7 +47,9 @@
|
||||
|
||||
@import "specific/admin_dashboards.scss";
|
||||
@import "specific/blips.scss";
|
||||
@import "specific/blips_buttons.scss";
|
||||
@import "specific/comments.scss";
|
||||
@import "specific/comments_rank_border.scss";
|
||||
@import "specific/error.scss";
|
||||
@import "specific/favorites.scss";
|
||||
@import "specific/forum.scss";
|
||||
|
||||
@ -1,9 +1,4 @@
|
||||
div#c-blips {
|
||||
article.blip {
|
||||
@if $comment-buttons == 1 {
|
||||
.content-menu menu {
|
||||
gap: .25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
9
src/specific/blips_buttons.scss
Normal file
9
src/specific/blips_buttons.scss
Normal file
@ -0,0 +1,9 @@
|
||||
div#c-blips {
|
||||
article.blip {
|
||||
@if $comment-buttons == 1 {
|
||||
.content-menu menu {
|
||||
gap: .25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -225,33 +225,6 @@ a.user-blocked, a.user-banned {
|
||||
}
|
||||
}
|
||||
|
||||
@if $name-rank-border-colors == 1 {
|
||||
:root {
|
||||
--mobileRankOpacity: 0.2;
|
||||
}
|
||||
|
||||
@each $rank-name, $rank-value in $rank-listing {
|
||||
.author-info:has(.user-#{$rank-name}) .post-thumbnail {
|
||||
border-color: var(--user-#{$rank-value}) !important;
|
||||
background-color: var(--user-#{$rank-value}) !important;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
opacity: var(--mobileRankOpacity);
|
||||
background-color: var(--user-#{$rank-value});
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comments article {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
26
src/specific/comments_rank_border.scss
Normal file
26
src/specific/comments_rank_border.scss
Normal file
@ -0,0 +1,26 @@
|
||||
@if $name-rank-border-colors == 1 {
|
||||
:root {
|
||||
--mobileRankOpacity: 0.2;
|
||||
}
|
||||
|
||||
@each $rank-name, $rank-value in $rank-listing {
|
||||
.author-info:has(.user-#{$rank-name}) .post-thumbnail {
|
||||
border-color: var(--user-#{$rank-value}) !important;
|
||||
background-color: var(--user-#{$rank-value}) !important;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
opacity: var(--mobileRankOpacity);
|
||||
background-color: var(--user-#{$rank-value});
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user