1
0
mirror of https://github.com/chylex/Transparent-Twitch-Chat.git synced 2025-04-10 22:15:45 +02:00

Tweak preprocessor to clean up CSS

This commit is contained in:
chylex 2018-08-03 16:56:31 +02:00
parent 6301f599a2
commit 5b39fa4776
2 changed files with 82 additions and 53 deletions

View File

@ -45,18 +45,31 @@ with open(SRC_FILE, 'r') as src:
src_contents = src_contents.replace("{VERSION}", new_version, 1)
src_contents = re.sub(r'@#hex\(([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})\)',
lambda m: f'rgba({int(m.group(1), 16)},{int(m.group(2), 16)},{int(m.group(3), 16)},{int(m.group(4), 16) / 256})',
src_contents)
src_contents = re.sub(
pattern = r'@#hex\(([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})\)',
repl = lambda m: f'rgba({int(m.group(1), 16)},{int(m.group(2), 16)},{int(m.group(3), 16)},{int(m.group(4), 16) / 256})',
string = src_contents
)
src_contents = re.sub(r'@#hex\(([0-9a-f])([0-9a-f])([0-9a-f])([0-9a-f])\)',
lambda m: f'rgba({int(m.group(1)*2, 16)},{int(m.group(2)*2, 16)},{int(m.group(3)*2, 16)},{int(m.group(4)*2, 16) / 256})',
src_contents)
src_contents = re.sub(
pattern = r'@#hex\(([0-9a-f])([0-9a-f])([0-9a-f])([0-9a-f])\)',
repl = lambda m: f'rgba({int(m.group(1) * 2, 16)},{int(m.group(2) * 2, 16)},{int(m.group(3) * 2, 16)},{int(m.group(4) * 2, 16) / 256})',
string = src_contents
)
src_contents = re.sub(r'@#css{{(.*?)@#css}}',
lambda m: "\n".join(filter(lambda line: line and not line.startswith("//"), map(lambda line: line.strip(), m.group(1).splitlines()))),
src_contents,
flags = re.DOTALL)
src_contents = re.sub(
pattern = r'@#rem{{(.*?)@#rem}}',
repl = lambda m: "\n".join(line for line in map(str.strip, m.group(1).splitlines()) if line and not line.startswith("//")),
string = src_contents,
flags = re.DOTALL
)
src_contents = re.sub(
pattern = r'@#css{{(.*?)@#css}}',
repl = lambda m: "\n" + re.sub(r"([a-z]): ", "\\1:", m.group(1).replace("\n", "").replace(";}", "}\n").replace(" !important", "!important")),
string = src_contents,
flags = re.DOTALL
)
with open(OUTPUT_FILE, 'w') as out:
out.write(src_contents)

View File

@ -82,7 +82,9 @@ function generateCustomCSS(){
style.id = "chylex-ttc-style-custom";
}
style.innerHTML = `@#css{{
style.innerHTML = `@#rem{{
@#css{{
// fix scrollbars
@ -90,11 +92,15 @@ ${rcolBlur} .chat-list__lines .simplebar-track.vertical {
visibility: hidden !important;
}
${isFirefox ? `
@#css}}
${isFirefox ? `@#css{{
${rcol} .video-chat__message-list-wrapper:not(.video-chat__message-list-wrapper--unsynced) {
overflow-y: hidden !important;
}
` : ``}
@#css}}` : ``}
@#css{{
// general chat styles
@ -123,35 +129,37 @@ ${rcol} .hidden {
display: none;
}
${settings.hideHeader ? `
${rcolBlur} .room-selector__header {
display: none !important;
}
` : ``}
${settings.hideChatInput ? `
${rcolBlur} .chat-input, ${rcolBlur} .video-chat__input {
display: none;
}
` : ``}
${settings.hidePinnedCheer ? `
.pinned-cheer, .pinned-cheer-v2 {
display: none;
}
` : ``}
${rcol} .video-chat__sync-button {
width: ${settings.chatWidth - 50}px;
z-index: 10;
background-color: #b8b5c0 !important;
}
${settings.chatWidth < 350 ? `
@#css}}
${settings.chatWidth < 350 ? `@#css{{
${rcol} .video-chat__settings, ${rcol} .chat-settings {
width: ${settings.chatWidth - 50}px;
}
` : ``}
@#css}}` : ``}
${settings.hideHeader ? `@#css{{
${rcolBlur} .room-selector__header {
display: none !important;
}
@#css}}` : ``}
${settings.hideChatInput ? `@#css{{
${rcolBlur} .chat-input, ${rcolBlur} .video-chat__input {
display: none;
}
@#css}}` : ``}
${settings.hidePinnedCheer ? `@#css{{
.pinned-cheer, .pinned-cheer-v2 {
display: none;
}
@#css}}` : ``}
// BTTV workarounds
@ -164,7 +172,7 @@ ${settings.chatWidth < 350 ? `
// z-index: 3 !important;
// }
${settings.transparentChat ? `
${settings.transparentChat ? `@#css{{
// expand player width, FrankerFaceZ workaround
@ -273,7 +281,7 @@ ${settings.transparentChat ? `
.whispers--theatre-mode .whispers-threads-box__container:not(.whispers-threads-box__container--open):not(:hover) {
opacity: ${Math.max(0.1, settings.backgroundOpacity * 0.01)};
}
` : `
@#css}}` : `@#css{{
// adapt player size with disabled transparency
@ -284,7 +292,7 @@ ${settings.transparentChat ? `
.persistent-player--theatre .player-streamstatus {
margin-right: 20px !important;
}
`}
@#css}}`}
// conversation menu and bottom margin
@ -292,7 +300,7 @@ ${settings.transparentChat ? `
right: ${settings.chatWidth - 10}px !important;
}
${settings.hideConversations ? `
${settings.hideConversations ? `@#css{{
.whispers--theatre-mode {
display: none;
}
@ -300,20 +308,20 @@ ${settings.hideConversations ? `
.video-player--theatre .video-player__container {
bottom: 0 !important;
}
` : ``}
@#css}}` : ``}
// hide timestamps
${settings.hideTimestamps ? `
${settings.hideTimestamps ? `@#css{{
${rcol} .vod-message__timestamp {
visibility: hidden;
width: 0 !important;
}
` : ``}
@#css}}` : ``}
// chat on left side
${settings.chatLeftSide && settings.transparentChat ? `
${settings.chatLeftSide && settings.transparentChat ? `@#css{{
${rcol}${wa}, ${rcol} .chat-list__lines .simplebar-track.vertical {
left: 0 !important;
right: auto !important;
@ -352,11 +360,11 @@ ${settings.chatLeftSide && settings.transparentChat ? `
margin-left: 0;
transform: rotate(-90deg) !important;
}
` : ``}
@#css}}` : ``}
// gray theme
${settings.grayTheme ? `
${settings.grayTheme ? `@#css{{
${rcol} .tw-border-l.tw-c-background-alt-2 {
border-left-color: #2b2b2b !important;
}
@ -414,7 +422,9 @@ ${settings.grayTheme ? `
.whispers--theatre-mode .whispers-threads-box__open-close${wa} {
background-color: #0e0e0e !important;
}
` : ``}
@#css}}` : ``}
@#css{{
// badge tweaks
@ -423,30 +433,36 @@ ${rcolBlur} div[data-a-target="chat-badge"] {
${settings.badgeOpacity === 0 ? `display: none !important;` : ``}
}
${settings.hideBadgeTurbo ? `
@#css}}
${settings.hideBadgeTurbo ? `@#css{{
${rcol} .chat-badge[alt="Turbo"] {
display: none;
}
` : ``}
@#css}}` : ``}
${settings.hideBadgePrime ? `
${settings.hideBadgePrime ? `@#css{{
${rcol} .chat-badge[alt$="Prime"] {
display: none;
}
` : ``}
@#css}}` : ``}
${settings.hideBadgeSubscriber ? `
${settings.hideBadgeSubscriber ? `@#css{{
${rcol} .chat-badge[alt~="Subscriber"] {
display: none;
}
` : ``}
@#css}}` : ``}
@#css{{
// dynamic styles for settings, replaces default style
#chylex-ttc-settings-btn {
margin-left: ${settings.chatWidth - 58}px;
}
@#css}}`;
@#css}}
@#rem}}`;
document.head.appendChild(style);
}
@ -458,7 +474,7 @@ function generateSettingsCSS(){
let style = document.createElement("style");
style.id = "chylex-ttc-style-settings";
style.innerHTML = `@#css{{
style.innerHTML = `@#rem{{@#css{{
// settings button
@ -605,7 +621,7 @@ function generateSettingsCSS(){
padding-left: 4px;
text-align: right;
}
@#css}}`;
@#css}}@#rem}}`;
document.head.appendChild(style);
}