Browse Source

implement optional posts translation API

twisterarmy twisterarmy-1.5
d47081 2 years ago
parent
commit
eb45bffacd
  1. 13
      css/style.css
  2. 1
      home.html
  3. 43
      js/interface_common.js
  4. 14
      js/options.js
  5. 25
      options.html
  6. 13
      theme_calm/css/style.css
  7. 8
      theme_nin/css/style.css
  8. 10
      theme_nin/sass/_postboard.sass
  9. 7
      theme_nin/sass/_tabs.sass
  10. 12
      theme_nin_night/css/style.css
  11. 8
      theme_nin_original/css/style.css
  12. 4
      theme_nin_original/sass/layout/_postboard.sass
  13. 3
      theme_nin_original/sass/layout/_tabs.sass

13
css/style.css

@ -1256,6 +1256,7 @@ ol.toptrends-list {
{ {
display: none; display: none;
} }
.post-translate,
.post-reply, .post-reply,
.post-propagate, .post-propagate,
.post-favorite .post-favorite
@ -1266,30 +1267,36 @@ ol.toptrends-list {
opacity: .7; opacity: .7;
display: none; display: none;
} }
.post:hover .post-translate,
.post:hover .post-reply, .post:hover .post-reply,
.post:hover .post-propagate, .post:hover .post-propagate,
.post:hover .post-favorite, .post:hover .post-favorite,
.original.open .post-interactions .post-translate,
.original.open .post-interactions .post-reply, .original.open .post-interactions .post-reply,
.original.open .post-interactions .post-propagate, .original.open .post-interactions .post-propagate,
.original.open .post-interactions .post-favorite, .original.open .post-interactions .post-favorite,
.post:hover .original .post-interactions .post-translate,
.post:hover .original .post-interactions .post-reply, .post:hover .original .post-interactions .post-reply,
.post:hover .original .post-interactions .post-propagate, .post:hover .original .post-interactions .post-propagate,
.post:hover .original .post-interactions .post-favorite .post:hover .original .post-interactions .post-favorite
{ {
display: inline-block; display: inline-block;
} }
.related.post:hover .post-translate,
.related.post:hover .post-reply, .related.post:hover .post-reply,
.related.post:hover .post-propagate, .related.post:hover .post-propagate,
.related.post:hover .post-favorite .related.post:hover .post-favorite
{ {
display: inline-block; display: inline-block;
} }
.open .related .post-translate,
.open .related .post-reply, .open .related .post-reply,
.open .related .post-propagate, .open .related .post-propagate,
.open .related .post-favorite .open .related .post-favorite
{ {
display: none!important; display: none!important;
} }
.open .related:hover .post-translate,
.open .related:hover .post-reply, .open .related:hover .post-reply,
.open .related:hover .post-propagate, .open .related:hover .post-propagate,
.open .related:hover .post-favorite .open .related:hover .post-favorite
@ -1300,6 +1307,11 @@ ol.toptrends-list {
{ {
background: url(../img/repost.png) no-repeat left center; background: url(../img/repost.png) no-repeat left center;
} }
.post-translate
{
background: none;
padding-left: 0;
}
.post-favorite .post-favorite
{ {
background: none; background: none;
@ -1310,6 +1322,7 @@ ol.toptrends-list {
content: "★"; content: "★";
font-size: 18px; font-size: 18px;
} }
.post-translate:hover,
.post-reply:hover, .post-reply:hover,
.post-propagate:hover, .post-propagate:hover,
.post-favorite:hover .post-favorite:hover

1
home.html

@ -365,6 +365,7 @@
<span class="post-expand">Expand</span> <span class="post-expand">Expand</span>
<!-- elementos de interação com o post que são exibidos no hover --> <!-- elementos de interação com o post que são exibidos no hover -->
<div class="post-interactions"> <div class="post-interactions">
<span class="post-translate">Translate</span>
<span class="post-reply">Reply</span> <span class="post-reply">Reply</span>
<span class="post-propagate">Retransmit</span> <span class="post-propagate">Retransmit</span>
<span class="post-favorite">Favorite</span> <span class="post-favorite">Favorite</span>

43
js/interface_common.js

@ -1873,6 +1873,43 @@ function postReplyClick(event) {
event.stopPropagation(); event.stopPropagation();
} }
function postTranslateClick(event) {
if ($.Options.TranslationEnabled.val === 'enable' && $.Options.TranslationAPI.val.length > 0) {
var post = $(this).closest('.post').find('.post-text');
// prevent merge string on tabulation usage
post.html(post.html().replaceAll('<br>',' '));
// some APIs not accept slash as the part of the get request routing
var request = post.text().replaceAll('/','|');
$.ajax({
dataType: 'json',
url: $.Options.TranslationAPI.val + encodeURIComponent(request),
success: function(json) {
if (json.translation) {
var translation = htmlFormatMsg(json.translation.replaceAll('|','/'));
post.html(translation.html);
}
if (json.error) {
alert(json.error);
}
},
error: function(xhr, ajaxOptions, thrownError) {
alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
})
}
event.stopPropagation();
}
// Expande Área do Novo post // Expande Área do Novo post
function composeNewPost(e, postAreaNew) { function composeNewPost(e, postAreaNew) {
e.stopPropagation(); e.stopPropagation();
@ -3028,6 +3065,12 @@ function initInterfaceCommon() {
postExpandFunction(event, $(this)); postExpandFunction(event, $(this));
}) })
; ;
if ($.Options.TranslationEnabled.val !== 'enable') {
twister.tmpl.post.find('.post-translate').remove();
}
twister.tmpl.post.find('.post-translate').on('click', postTranslateClick);
twister.tmpl.post.find('.post-reply').on('click', postReplyClick); twister.tmpl.post.find('.post-reply').on('click', postReplyClick);
twister.tmpl.post.find('.post-propagate').on('click', reTwistPopup); twister.tmpl.post.find('.post-propagate').on('click', reTwistPopup);
twister.tmpl.post.find('.post-favorite').on('click', favPopup); twister.tmpl.post.find('.post-favorite').on('click', favPopup);

14
js/options.js

@ -340,6 +340,20 @@ function twisterOptions() {
type: 'checkbox', type: 'checkbox',
valDefault: false valDefault: false
}); });
this.add({
name: 'TranslationEnabled',
valDefault: 'disable',
tickMethod: function (elem) {
$('#TranslationCont').css('display', (elem.value === 'enable') ? 'block' : 'none');
}
});
this.add({
name: 'TranslationAPI',
type: 'text',
valDefault: 'https://lingva.ml/api/v1/auto/en/',
valMes: 'characters',
getMethod: function (val) {return val;}
});
} }
twisterOptions.prototype.add = function (option) { twisterOptions.prototype.add = function (option) {

25
options.html

@ -60,6 +60,8 @@
<label for="t-6" class="tabs selectable_theme theme_nin">Users</label> <label for="t-6" class="tabs selectable_theme theme_nin">Users</label>
<input id="t-7" name="option_tab" type="radio" class="selectable_theme theme_nin" /> <input id="t-7" name="option_tab" type="radio" class="selectable_theme theme_nin" />
<label for="t-7" class="tabs selectable_theme theme_nin">WebTorrent</label> <label for="t-7" class="tabs selectable_theme theme_nin">WebTorrent</label>
<input id="t-9" name="option_tab" type="radio" class="selectable_theme theme_nin" />
<label for="t-9" class="tabs selectable_theme theme_nin">Translation</label>
<div class="tab-content"> <div class="tab-content">
@ -539,6 +541,29 @@
</div> </div>
</div> </div>
<div class="translation">
<div class="module">
<p class="label label-h"> Translation </p>
<div class="container">
<form>
<p class="label">Translation support to display localized twists</p>
<select id="TranslationEnabled" class="container">
<option value="enable">Enable</option>
<option value="disable">Disable</option>
</select>
</form>
</div>
<div id="TranslationCont" class="container">
<form>
<p class="label">Translation API address</p>
<input type="text" id="TranslationAPI" size="80" class="container"/>
<a href="https://github.com/thedaviddelta/lingva-translate#instances" target="_blank">Get Instances</a>
</form>
<p></p>
</div>
</div>
</div>
</div><!-- /tab-content --> </div><!-- /tab-content -->
</div><!-- /options --> </div><!-- /options -->
</div><!-- /options --> </div><!-- /options -->

13
theme_calm/css/style.css

@ -1646,6 +1646,7 @@ textarea.splited-post {
{ {
display: none; display: none;
} }
.post-translate,
.post-reply, .post-reply,
.post-propagate, .post-propagate,
.post-favorite .post-favorite
@ -1661,30 +1662,36 @@ textarea.splited-post {
-o-transition: all 200ms; -o-transition: all 200ms;
transition: all 200ms; transition: all 200ms;
} }
.post:hover .post-translate,
.post:hover .post-reply, .post:hover .post-reply,
.post:hover .post-propagate, .post:hover .post-propagate,
.post:hover .post-favorite, .post:hover .post-favorite,
.original.open .post-interactions .post-translate,
.original.open .post-interactions .post-reply, .original.open .post-interactions .post-reply,
.original.open .post-interactions .post-propagate, .original.open .post-interactions .post-propagate,
.original.open .post-interactions .post-favorite, .original.open .post-interactions .post-favorite,
.post:hover .original .post-interactions .post-translate,
.post:hover .original .post-interactions .post-reply, .post:hover .original .post-interactions .post-reply,
.post:hover .original .post-interactions .post-propagate, .post:hover .original .post-interactions .post-propagate,
.post:hover .original .post-interactions .post-favorite .post:hover .original .post-interactions .post-favorite
{ {
display: inline-block; display: inline-block;
} }
.related.post:hover .post-translate,
.related.post:hover .post-reply, .related.post:hover .post-reply,
.related.post:hover .post-propagate, .related.post:hover .post-propagate,
.related.post:hover .post-favorite .related.post:hover .post-favorite
{ {
display: inline-block; display: inline-block;
} }
.open .related .post-translate,
.open .related .post-reply, .open .related .post-reply,
.open .related .post-propagate, .open .related .post-propagate,
.open .related .post-favorite .open .related .post-favorite
{ {
display: none!important; display: none!important;
} }
.open .related:hover .post-translate,
.open .related:hover .post-reply, .open .related:hover .post-reply,
.open .related:hover .post-propagate, .open .related:hover .post-propagate,
.open .related:hover .post-favorite .open .related:hover .post-favorite
@ -1703,10 +1710,16 @@ textarea.splited-post {
background: none; background: none;
padding-left: 0; padding-left: 0;
} }
.post-translate
{
background: none;
padding-left: 0;
}
.post-favorite:before .post-favorite:before
{ {
content: "★"; content: "★";
} }
.post-translate:hover,
.post-reply:hover, .post-reply:hover,
.post-propagate:hover, .post-propagate:hover,
.post-favorite:hover .post-favorite:hover

8
theme_nin/css/style.css

@ -1003,11 +1003,11 @@ samp {
} }
/* line 215, ../sass/_postboard.sass */ /* line 215, ../sass/_postboard.sass */
.expanded-post .post-expand, .expanded-post .post-reply, .expanded-post .post-propagate, .expanded-post .post-favorite { .expanded-post .post-expand, .expanded-post .post-reply, .expanded-post .post-propagate, .expanded-post .post-favorite, .expanded-post .post-translate {
color: #b3b5b7; color: #b3b5b7;
} }
/* line 217, ../sass/_postboard.sass */ /* line 217, ../sass/_postboard.sass */
.expanded-post .post-expand:hover, .expanded-post .post-reply:hover, .expanded-post .post-propagate:hover, .expanded-post .post-favorite:hover { .expanded-post .post-expand:hover, .expanded-post .post-reply:hover, .expanded-post .post-propagate:hover, .expanded-post .post-favorite:hover, .expanded-post .post-translate:hover {
color: #727578; color: #727578;
} }
@ -1038,7 +1038,7 @@ samp {
} }
/* line 239, ../sass/_postboard.sass */ /* line 239, ../sass/_postboard.sass */
.post-reply:hover, .post-propagate:hover, .post-favorite:hover { .post-reply:hover, .post-propagate:hover, .post-favorite:hover, .post-translate:hover {
color: #727578; color: #727578;
} }
@ -1440,7 +1440,7 @@ button:disabled:hover, button.disabled:hover, .mini-profile-actions span.disable
visibility: hidden; visibility: hidden;
} }
/* line 42, ../sass/_tabs.sass */ /* line 42, ../sass/_tabs.sass */
.options input#tab_language:checked ~ .tab-content .language, .options input#t-2:checked ~ .tab-content .theme, .options input#t-3:checked ~ .tab-content .notifications, .options input#t-4:checked ~ .tab-content .keys, .options input#t-5:checked ~ .tab-content .appearance, .options input#t-6:checked ~ .tab-content .users, .options input#t-7:checked ~ .tab-content .webtorrent, .options input#t-8:checked ~ .tab-content .DMs { .options input#tab_language:checked ~ .tab-content .language, .options input#t-2:checked ~ .tab-content .theme, .options input#t-3:checked ~ .tab-content .notifications, .options input#t-4:checked ~ .tab-content .keys, .options input#t-5:checked ~ .tab-content .appearance, .options input#t-6:checked ~ .tab-content .users, .options input#t-7:checked ~ .tab-content .webtorrent, .options input#t-8:checked ~ .tab-content .DMs, .options input#t-9:checked ~ .tab-content .translation {
position: relative; position: relative;
z-index: 10; z-index: 10;
opacity: 1; opacity: 1;

10
theme_nin/sass/_postboard.sass

@ -231,7 +231,7 @@
display: block display: block
.expanded-post .expanded-post
.post-expand, .post-reply, .post-propagate, .post-favorite .post-expand, .post-reply, .post-propagate, .post-favorite, .post-translate
color: lighten($dark-grey,30%) color: lighten($dark-grey,30%)
&:hover &:hover
color: lighten($dark-grey,5%) color: lighten($dark-grey,5%)
@ -240,22 +240,22 @@
display: none display: none
margin: 0 margin: 0
.post-reply, .post-propagate, .post-favorite .post-reply, .post-propagate, .post-favorite, .post-translate
padding-left: 10px padding-left: 10px
display: none display: none
.post:hover, .original.open .post-interactions, .post:hover .original .post-interactions, .related.post:hover .post:hover, .original.open .post-interactions, .post:hover .original .post-interactions, .related.post:hover
.post-reply, .post-propagate, .post-favorite .post-reply, .post-propagate, .post-favorite, .post-translate
display: inline-block display: inline-block
.open .related .open .related
.post-reply, .post-propagate, .post-favorite .post-reply, .post-propagate, .post-favorite, .post-translate
display: none!important display: none!important
&:hover &:hover
.post-reply, .post-propagate/*, .post-favorite*/ .post-reply, .post-propagate/*, .post-favorite*/
display: inline-block!important display: inline-block!important
.post-reply:hover, .post-propagate:hover, .post-favorite:hover .post-reply:hover, .post-propagate:hover, .post-favorite:hover, .post-translate:hover
color: lighten($dark-grey,5%) color: lighten($dark-grey,5%)
.expanded-content .expanded-content

7
theme_nin/sass/_tabs.sass

@ -46,9 +46,10 @@
&#t-3:checked ~ .tab-content .notifications, &#t-3:checked ~ .tab-content .notifications,
&#t-4:checked ~ .tab-content .keys, &#t-4:checked ~ .tab-content .keys,
&#t-5:checked ~ .tab-content .appearance, &#t-5:checked ~ .tab-content .appearance,
&#t-6:checked ~ .tab-content .users &#t-6:checked ~ .tab-content .users,
&#t-7:checked ~ .tab-content .webtorrent &#t-7:checked ~ .tab-content .webtorrent,
&#t-8:checked ~ .tab-content .DMs &#t-8:checked ~ .tab-content .DMs,
&#t-9:checked ~ .tab-content .translation
position: relative position: relative
z-index: 10 z-index: 10
opacity: 1 opacity: 1

12
theme_nin_night/css/style.css

@ -1015,11 +1015,11 @@ samp {
} }
/* line 215, ../sass/_postboard.sass */ /* line 215, ../sass/_postboard.sass */
.expanded-post .post-expand, .expanded-post .post-reply, .expanded-post .post-propagate, .expanded-post .post-favorite { .expanded-post .post-expand, .expanded-post .post-reply, .expanded-post .post-propagate, .expanded-post .post-favorite, .expanded-post .post-translate {
color: #b3b5b7; color: #b3b5b7;
} }
/* line 217, ../sass/_postboard.sass */ /* line 217, ../sass/_postboard.sass */
.expanded-post .post-expand:hover, .expanded-post .post-reply:hover, .expanded-post .post-propagate:hover, .expanded-post .post-favorite:hover { .expanded-post .post-expand:hover, .expanded-post .post-reply:hover, .expanded-post .post-propagate:hover, .expanded-post .post-favorite:hover, .expanded-post .post-translate:hover {
color: #e3bc71; color: #e3bc71;
} }
@ -1030,13 +1030,13 @@ samp {
} }
/* line 224, ../sass/_postboard.sass */ /* line 224, ../sass/_postboard.sass */
.post-reply, .post-propagate, .post-favorite { .post-reply, .post-propagate, .post-favorite, .post-translate {
padding-left: 10px; padding-left: 10px;
display: none; display: none;
} }
/* line 229, ../sass/_postboard.sass */ /* line 229, ../sass/_postboard.sass */
.post:hover .post-reply, .post:hover .post-propagate, .post:hover .post-favorite, .original.open .post-interactions .post-reply, .mini-profile .original.post-area-new .post-interactions .post-reply, #postboard-top .post-area .original.post-area-new .post-interactions .post-reply, .original.open .post-interactions .post-propagate, .mini-profile .original.post-area-new .post-interactions .post-propagate, #postboard-top .post-area .original.post-area-new .post-interactions .post-propagate, .original.open .post-interactions .post-favorite, .mini-profile .original.post-area-new .post-interactions .post-favorite, #postboard-top .post-area .original.post-area-new .post-interactions .post-favorite, .post:hover .original .post-interactions .post-reply, .post:hover .original .post-interactions .post-propagate, .post:hover .original .post-interactions .post-favorite, .related.post:hover .post-reply, .related.post:hover .post-propagate, .related.post:hover .post-favorite { .post:hover .post-reply, .post:hover .post-propagate, .post:hover .post-favorite, .original.open .post-interactions .post-reply, .mini-profile .original.post-area-new .post-interactions .post-reply, #postboard-top .post-area .original.post-area-new .post-interactions .post-reply, .original.open .post-interactions .post-propagate, .mini-profile .original.post-area-new .post-interactions .post-propagate, #postboard-top .post-area .original.post-area-new .post-interactions .post-propagate, .original.open .post-interactions .post-favorite, .mini-profile .original.post-area-new .post-interactions .post-favorite, #postboard-top .post-area .original.post-area-new .post-interactions .post-favorite, .post:hover .original .post-interactions .post-reply, .post:hover .original .post-interactions .post-propagate, .post:hover .original .post-interactions .post-favorite, .related.post:hover .post-reply, .related.post:hover .post-propagate, .related.post:hover .post-favorite, .post:hover .post-translate {
display: inline-block; display: inline-block;
} }
@ -1050,7 +1050,7 @@ samp {
} }
/* line 239, ../sass/_postboard.sass */ /* line 239, ../sass/_postboard.sass */
.post-reply:hover, .post-propagate:hover, .post-favorite:hover { .post-reply:hover, .post-propagate:hover, .post-favorite:hover, .post-translate:hover {
color: rgba(255, 255, 255, 1) color: rgba(255, 255, 255, 1)
} }
@ -1460,7 +1460,7 @@ button:disabled, button.disabled, .mini-profile-actions span.disabled, a.button.
visibility: hidden; visibility: hidden;
} }
/* line 42, ../sass/_tabs.sass */ /* line 42, ../sass/_tabs.sass */
.options input#tab_language:checked ~ .tab-content .language, .options input#t-2:checked ~ .tab-content .theme, .options input#t-3:checked ~ .tab-content .notifications, .options input#t-4:checked ~ .tab-content .keys, .options input#t-5:checked ~ .tab-content .appearance, .options input#t-6:checked ~ .tab-content .users, .options input#t-7:checked ~ .tab-content .webtorrent, .options input#t-8:checked ~ .tab-content .DMs { .options input#tab_language:checked ~ .tab-content .language, .options input#t-2:checked ~ .tab-content .theme, .options input#t-3:checked ~ .tab-content .notifications, .options input#t-4:checked ~ .tab-content .keys, .options input#t-5:checked ~ .tab-content .appearance, .options input#t-6:checked ~ .tab-content .users, .options input#t-7:checked ~ .tab-content .webtorrent, .options input#t-8:checked ~ .tab-content .DMs, .options input#t-9:checked ~ .tab-content .translation {
position: relative; position: relative;
z-index: 10; z-index: 10;
opacity: 1; opacity: 1;

8
theme_nin_original/css/style.css

@ -1999,11 +1999,11 @@ button.light:hover, a.button.light:hover {
.post-interactions span:before { .post-interactions span:before {
padding: 3px; padding: 3px;
} }
.post:hover .post-interactions .post-reply, .post:hover .post-interactions .post-propagate, .post:hover .post-interactions .post-favorite { .post:hover .post-interactions .post-reply, .post:hover .post-interactions .post-propagate, .post:hover .post-interactions .post-favorite, .post:hover .post-interactions .post-translate {
display: inline-block; display: inline-block;
} }
.open .related .post-reply, #postboard-top .post-area .post-area-new .related .post-reply, .mini-profile .post-area-new .related .post-reply, .open .related .post-reply, #postboard-top .post-area .post-area-new .related .post-reply, .mini-profile .post-area-new .related .post-reply, .mini-profile .post-area-new .related .post-translate,
.open .related .post-propagate, .open .related .post-propagate,
#postboard-top .post-area .post-area-new .related .post-propagate, #postboard-top .post-area .post-area-new .related .post-propagate,
.mini-profile .post-area-new .related .post-propagate, .mini-profile .post-area-new .related .post-propagate,
@ -2012,7 +2012,7 @@ button.light:hover, a.button.light:hover {
.mini-profile .post-area-new .related .post-favorite { .mini-profile .post-area-new .related .post-favorite {
display: none !important; display: none !important;
} }
.open .related:hover .post-reply, #postboard-top .post-area .post-area-new .related:hover .post-reply, .mini-profile .post-area-new .related:hover .post-reply, .open .related:hover .post-reply, #postboard-top .post-area .post-area-new .related:hover .post-reply, .mini-profile .post-area-new .related:hover .post-reply, .mini-profile .post-area-new .related:hover .post-translate,
.open .related:hover .post-propagate, .open .related:hover .post-propagate,
#postboard-top .post-area .post-area-new .related:hover .post-propagate, #postboard-top .post-area .post-area-new .related:hover .post-propagate,
.mini-profile .post-area-new .related:hover .post-propagate, .mini-profile .post-area-new .related:hover .post-propagate,
@ -2390,7 +2390,7 @@ button.light:hover, a.button.light:hover {
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
} }
.options input#tab_language:checked ~ .tab-content .language, .options input#t-2:checked ~ .tab-content .theme, .options input#t-3:checked ~ .tab-content .notifications, .options input#t-4:checked ~ .tab-content .keys, .options input#t-5:checked ~ .tab-content .appearance, .options input#t-6:checked ~ .tab-content .users, .options input#t-7:checked ~ .tab-content .webtorrent, .options input#t-8:checked ~ .tab-content .DMs { .options input#tab_language:checked ~ .tab-content .language, .options input#t-2:checked ~ .tab-content .theme, .options input#t-3:checked ~ .tab-content .notifications, .options input#t-4:checked ~ .tab-content .keys, .options input#t-5:checked ~ .tab-content .appearance, .options input#t-6:checked ~ .tab-content .users, .options input#t-7:checked ~ .tab-content .webtorrent, .options input#t-8:checked ~ .tab-content .DMs, .options input#t-9:checked ~ .tab-content .translation {
position: relative; position: relative;
z-index: 10; z-index: 10;
opacity: 1; opacity: 1;

4
theme_nin_original/sass/layout/_postboard.sass

@ -265,16 +265,18 @@
@extend .ion-alert @extend .ion-alert
.post:hover & .post:hover &
.post-reply, .post-propagate , .post-favorite .post-reply, .post-propagate, .post-favorite, .post-translate
display: inline-block display: inline-block
.open .related .open .related
.post-translate,
.post-reply, .post-reply,
.post-propagate, .post-propagate,
.post-favorite .post-favorite
display: none!important display: none!important
&:hover &:hover
.post-translate,
.post-reply, .post-reply,
.post-propagate, .post-propagate,
.post-favorite .post-favorite

3
theme_nin_original/sass/layout/_tabs.sass

@ -51,7 +51,8 @@
&#t-5:checked ~ .tab-content .appearance, &#t-5:checked ~ .tab-content .appearance,
&#t-6:checked ~ .tab-content .users, &#t-6:checked ~ .tab-content .users,
&#t-7:checked ~ .tab-content .webtorrent, &#t-7:checked ~ .tab-content .webtorrent,
&#t-8:checked ~ .tab-content .DMs &#t-8:checked ~ .tab-content .DMs,
&#t-9:checked ~ .tab-content .translation
position: relative position: relative
z-index: 10 z-index: 10
opacity: 1 opacity: 1

Loading…
Cancel
Save