TriHard
/
rDrama
forked from rDrama/rDrama
1
0
Fork 0
Code Pull Requests Activity

Merge pull request #138 from Aevann1/rudolph 

new grays
master
Aevann1 2021-12-19 14:37:53 -08:00 committed by GitHub
parent 3d4ee442d9 ee5d0fd52f
commit 00a2850a3d
28 changed files with 1348 additions and 694 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

988
files/static/dist/main.css vendored
View File

File diff suppressed because it is too large Load Diff

432
files/static/src/main.css
View File

@ -2,174 +2,290 @@
@tailwind components;
@tailwind utilities;
/* ----------------------- VARIABLES --------------------- */
:root {
.theme-tron {
--color-primary: 249,115,22;
--color-100: 224,231,255;
--color-200: 199,210,254;
--color-300: 165,180,252;
--color-400: 129,140,248;
--color-500: 121,124,242;
--color-600: 79,70,229;
--color-700: 67,56,202;
--color-800: 55,48,163;
--color-900: 49,46,129;
}
.theme-mocha {
--color-primary: 5,150,105;
--color-100: 246,246,244;
--color-200: 235,233,229;
--color-300: 219,218,209;
--color-400: 155,175,161;
--color-500: 148,144,129;
--color-600: 99,96,77;
--color-700: 82,76,55;
--color-800: 55,52,31;
--color-900: 40,37,17;
}
.theme-dramblr {
--color-primary: 2,132,199;
--color-100: 241,245,249;
--color-200: 226,232,240;
--color-300: 203,213,225;
--color-400: 148,163,184;
--color-500: 100,116,139;
--color-600: 71,85,105;
--color-700: 51,65,85;
--color-800: 30,41,59;
--color-900: 15,23,42;
}
.theme-midnight {
--color-primary: 219,39,119;
--color-100: 243,244,246;
--color-200: 229,231,235;
--color-300: 209,213,219;
--color-400: 156,163,175;
--color-500: 107,114,128;
--color-600: 75,85,99;
--color-700: 55,65,81;
--color-800: 31,41,55;
--color-900: 17,24,39;
}
.theme-iron {
--color-primary: 219,39,119;
--color-100: 244,244,245;
--color-200: 228,228,231;
--color-300: 212,212,216;
--color-400: 161,161,170;
--color-500: 113,113,122;
--color-600: 82,82,91;
--color-700: 63,63,70;
--color-800: 39,39,42;
--color-900: 24,24,27;
}
.theme-bubblegum {
--color-primary: 2,132,199;
--color-100: 252,231,243;
--color-200: 251,207,232;
--color-300: 249,168,212;
--color-400: 244,114,182;
--color-500: 236,72,153;
--color-600: 219,39,119;
--color-700: 190,24,93;
--color-800: 157,23,77;
--color-900: 131,24,67;
}
.theme-canary {
--color-primary: 2,132,199;
--color-100: 254,249,195;
--color-200: 254,240,138;
--color-300: 253,224,71;
--color-400: 250,204,21;
--color-500: 234,179,8;
--color-600: 202,138,4;
--color-700: 161,98,7;
--color-800: 133,77,14;
--color-900: 113,63,18;
}
.theme-evergreen {
--color-primary: 220, 38, 38;
--color-100: 244,246,244;
--color-200: 229,235,231;
--color-300: 209,219,213;
--color-400: 155,175,161;
--color-500: 106,128,115;
--color-600: 76,99,81;
--color-700: 55,82,62;
--color-800: 31,55,38;
--color-900: 17,40,23;
}
/* ---------------- RESPONSIVE UTILITIES ----------------- */
@responsive {
.text-shadow {
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12)
}
.text-shadow-t {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12)
}
.text-shadow-light {
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1)
}
.text-shadow-light-t {
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.1)
}
.sub-header-shadow {
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.10) inset, -1px -1px 0.5px rgba(17, 40, 19, 0.1) inset;
}
.gradient-mask {
-webkit-mask-image: linear-gradient(180deg,#000 60%,transparent); mask-image: linear-gradient(180deg,#000 60%,transparent)
}
/* Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
}
/* ----------------------- VARIABLES --------------------- */
/*:root {
--color-primary: 220, 38, 38;
}*/
/* -------------------- BASE STYLING -------------------- */
@layer base {
/* Headings */
h1, .h1 {
@apply text-5xl font-bold leading-10 mb-2;
/* ---------------- RESPONSIVE UTILITIES ----------------- */
@responsive {
.text-shadow {
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12)
}
.text-shadow-t {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12)
}
.text-shadow-light {
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1)
}
.text-shadow-light-t {
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.1)
}
.sub-header-shadow {
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.10) inset, -1px -1px 0.5px rgba(17, 40, 19, 0.1) inset;
}
.gradient-mask {
-webkit-mask-image: linear-gradient(180deg,#000 60%,transparent); mask-image: linear-gradient(180deg,#000 60%,transparent)
}
/* Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
}
h2, .h2 {
@apply text-4xl font-bold leading-8 mb-2;
}
h3, .h3 {
@apply text-3xl font-bold leading-7 mb-2;
}
h4, .h4 {
@apply text-2xl font-bold leading-6 mb-2;
}
h5, .h5 {
@apply text-lg font-bold leading-5 mb-2;
}
h6, .h6 {
@apply text-base font-bold leading-4 mb-2;
}
/* Typography */
p {
@apply mb-3 last:mb-0;
}
a {
@apply text-primary break-all
}
blockquote {
@apply bg-green-100 border-l-2 border-green-700 mb-4
}
hr {
@apply my-3
}
ul {
@apply mb-3
}
strong {
@apply font-bold
}
code {
@apply text-pink-600 dark:text-pink-300 font-mono;
}
pre {
white-space: pre-wrap; /* Since CSS 2.1 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
/* Images */
img {
@apply inline
}
img[lazy=loading] {
@apply animate-pulse;
}
img[width], img[height] {
max-width: none;
height: 24px;
}
/*Inputs*/
.label {
@apply block font-bold text-gray-700 text-sm leading-normal mb-1;
}
}
/* ----------------------- INPUTS ----------------------- */
.form-input {
@apply text-lg sm:text-base appearance-none block w-full rounded shadow-inner p-2 bg-white border border-gray-300 hover:border-gray-400 focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50
}
/* -------------------- BASE STYLING -------------------- */
@layer base {
/* Headings */
h1, .h1 {
@apply text-5xl font-bold leading-10 mb-2;
}
h2, .h2 {
@apply text-4xl font-bold leading-8 mb-2;
}
h3, .h3 {
@apply text-3xl font-bold leading-7 mb-2;
}
h4, .h4 {
@apply text-2xl font-bold leading-6 mb-2;
}
h5, .h5 {
@apply text-lg font-bold leading-5 mb-2;
}
h6, .h6 {
@apply text-base font-bold leading-4 mb-2;
}
/* Typography */
p {
@apply mb-3 last:mb-0;
}
a {
@apply text-primary break-all
}
blockquote {
@apply bg-gray-100 dark:bg-gray-700 border-l-2 border-gray-700 dark:border-gray-500 mb-4;
}
hr {
@apply my-3
}
ul {
@apply mb-3
}
.comment-text ul, .post-body ul {
@apply list-disc pl-4
}
.comment-text ol, .post-body ol {
@apply list-decimal pl-4
}
strong {
@apply font-bold
}
code {
@apply text-pink-600 dark:text-pink-300 font-mono;
}
pre {
white-space: pre-wrap; /* Since CSS 2.1 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
/* Images */
img {
@apply inline
}
img[lazy=loading] {
@apply animate-pulse;
}
img[width], img[height] {
max-width: none;
height: 24px;
}
/*Inputs*/
.label {
@apply block font-bold text-gray-700 text-sm leading-normal mb-1;
}
}
/* ---------------------- BUTTONS ----------------------- */
.btn {
@apply inline-block px-4 py-2 active:shadow-inner border rounded-md text-shadow-t shadow-inset-t-white-10 text-sm font-bold focus:outline-none disabled:opacity-50;
}
.btn-red {
@apply bg-gradient-to-t from-red-700 to-red-600 hover:from-red-600 hover:to-red-700 border-red-900 text-gray-100 focus:text-white;
}
.btn-green {
@apply bg-gradient-to-t from-green-700 to-green-600 hover:from-green-600 hover:to-green-700 border-green-900 text-gray-100 focus:text-gray-200;
}
.btn-gray {
@apply bg-gradient-to-t from-gray-200 to-gray-100 hover:from-gray-100 hover:to-gray-200 border-gray-300 text-gray-700 focus:text-gray-900;
}
/* ----------------------- INPUTS ----------------------- */
.form-input {
@apply text-lg sm:text-base appearance-none block w-full rounded shadow-inner p-2 bg-white border border-gray-300 hover:border-gray-400 focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50
}
/* ----------------------- BADGES ----------------------- */
.badge {
@apply px-1 py-0.5 text-sm text-shadow-light font-bold leading-normal rounded bg-gradient-to-t;
}
.badge-pink {
@apply from-pink-600 to-pink-500 text-white;
}
.badge-purple {
@apply from-purple-600 to-purple-500 text-white;
}
.badge-red {
@apply from-red-600 to-red-500 text-white;
}
.badge-yellow {
@apply from-yellow-600 to-yellow-500 text-yellow-900;
}
.badge-blue {
@apply from-blue-600 to-blue-500 text-white;
}
.badge-green {
@apply from-green-600 to-green-500 text-white;
}
.badge-primary {
@apply bg-primary text-white;
}
/* ---------------------- BUTTONS ----------------------- */
.btn {
@apply inline-block px-4 py-2 active:shadow-inner border rounded-md text-shadow-t shadow-inset-t-white-10 text-sm font-bold focus:outline-none disabled:opacity-50;
}
.btn-primary {
@apply bg-white bg-gradient-to-t from-primary to-primary/80 hover:from-primary/90 hover:to-primary border-black/10 text-gray-100 focus:text-gray-200;
}
.btn-red {
@apply bg-gradient-to-t from-red-700 to-red-600 hover:from-red-600 hover:to-red-700 border-red-900 text-gray-100 focus:text-white;
}
.btn-green {
@apply bg-gradient-to-t from-green-700 to-green-600 hover:from-green-600 hover:to-green-700 border-green-900 text-gray-100 focus:text-gray-200;
}
.btn-blue {
@apply bg-gradient-to-t from-blue-700 to-blue-600 hover:from-blue-600 hover:to-blue-700 border-blue-900 text-gray-100 focus:text-gray-200;
}
.btn-gray {
@apply bg-gradient-to-t from-gray-200 to-gray-100 hover:from-gray-100 hover:to-gray-200 border-gray-300 text-gray-700 focus:text-gray-900;
}
/* ---------------------- TOOLTIPS ---------------------- */
.tooltip-inner {
background-color: @apply text-black;
color: @apply text-white;
}
/* ----------------------- BADGES ----------------------- */
.badge {
@apply px-1 py-0.5 text-sm text-shadow-light font-bold leading-normal rounded bg-gradient-to-t;
}
.badge-pink {
@apply from-pink-600 to-pink-500 text-white;
}
.badge-purple {
@apply from-purple-600 to-purple-500 text-white;
}
.badge-red {
@apply from-red-600 to-red-500 text-white;
}
.badge-yellow {
@apply from-yellow-600 to-yellow-500 text-yellow-900;
}
.badge-blue {
@apply from-blue-600 to-blue-500 text-white;
}
.badge-green {
@apply from-green-600 to-green-500 text-white;
}
.badge-primary {
@apply bg-primary text-white;
}
/* ----------------------- EMOJI ------------------------ */
/* ---------------------- TOOLTIPS ---------------------- */
.tooltip-inner {
background-color: @apply text-black;
color: @apply text-white;
}
img.emoji {
width: 30px;
height: 30px;
@apply inline-block object-contain
}
/* ----------------------- EMOJI ------------------------ */
img.emoji-md {
width: 60px;
height: 60px;
@apply inline-block object-contain
}
img.emoji {
width: 30px;
height: 30px;
@apply inline-block object-contain
}
img.emoji-lg {
max-width: 100%;
@apply inline-block object-contain
}
img.emoji-md {
width: 60px;
height: 60px;
@apply inline-block object-contain
}
img.emoji-lg {
max-width: 100%;
@apply inline-block object-contain
}

2
files/templates/CHRISTMAS/admin/reported_posts.html
View File

@ -1,4 +1,4 @@
{% extends "CHRISTMAS/userpage.html" %}
{% extends "CHRISTMAS/settings2.html" %}
{% block adminpanel %}{% endblock %}
{% block pagetype %}userpage{% endblock %}

20
files/templates/CHRISTMAS/comments.html
View File

@ -147,22 +147,22 @@
{% if c.author_id==v.id and c.child_comments and is_notification_page%}
<span>
Comment {{'Replies' if (c.child_comments | length)>1 else 'Reply'}}:
<a href="{{c.post.permalink}}" class="text-gray-700 hover:text-gray-900">{{c.post.realtitle(v) | safe}}</a>
<a href="{{c.post.permalink}}" class="text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200">{{c.post.realtitle(v) | safe}}</a>
</span>
{% elif c.post.author_id==v.id and c.level == 1 and is_notification_page%}
<span>Post Reply:
<a href="{{c.post.permalink}}" class="text-gray-700 hover:text-gray-900">{{c.post.realtitle(v) | safe}}</a>
<a href="{{c.post.permalink}}" class="text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200">{{c.post.realtitle(v) | safe}}</a>
</span>
{% elif is_notification_page and c.parent_submission in v.subscribed_idlist() %}
<span>Subscribed Thread:
<a href="{{c.post.permalink}}" class="text-gray-700 hover:text-gray-900">{{c.post.realtitle(v) | safe}}</a></span>
<a href="{{c.post.permalink}}" class="text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200">{{c.post.realtitle(v) | safe}}</a></span>
{% elif is_notification_page %}
<span>Username Mention:
<a href="{{c.post.permalink}}" class="text-gray-700 hover:text-gray-900">{{c.post.realtitle(v) | safe}}</a>
<a href="{{c.post.permalink}}" class="text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200">{{c.post.realtitle(v) | safe}}</a>
</span>
{% else %}
<span>
<a href="{{c.post.permalink}}" class="text-gray-700 hover:text-gray-900">{{c.post.realtitle(v) | safe}}</a>
<a href="{{c.post.permalink}}" class="text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200">{{c.post.realtitle(v) | safe}}</a>
</span>
{% endif %}
{% elif c.author_id==NOTIFICATIONS_ID or c.author_id==AUTOJANNY_ID %}
@ -191,12 +191,12 @@
<div class="flex flex-col flex-shrink-0 items-center mr-2.5 {{ 'md:mr-4' if not c.parent_comment_id or standalone else 'md:mr-3' }}">
<div class="relative {{ 'santa' if c.author.patron else 'cap' }}">
{% if standalone or level==1 %}
<img loading="lazy" src="{{ c.author.profile_url }}" class="hidden md:block flex-shrink-0 w-14 h-14 p-[3px] bg-white border border-gray-300 object-cover lozad" alt="{{ c.author.username }} avatar"/>
<img loading="lazy" src="{{ c.author.profile_url }}" class="hidden md:block flex-shrink-0 w-14 h-14 p-[3px] bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 object-cover lozad" alt="{{ c.author.username }} avatar"/>
{% else %}
<img loading="lazy" src="{{ c.author.profile_url }}" class="hidden md:block flex-shrink-0 w-9 h-9 p-[3px] bg-white border border-gray-300 object-cover lozad" alt="{{ c.author.username }} avatar"/>
<img loading="lazy" src="{{ c.author.profile_url }}" class="hidden md:block flex-shrink-0 w-9 h-9 p-[3px] bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 object-cover lozad" alt="{{ c.author.username }} avatar"/>
{% endif %}
</div>
<button onclick="collapse_comment('{{c.id}}')" class="invisible-on-collapse md:ml-4 w-[1px] md:w-4 h-full border-l border-gray-400"></button>
<button onclick="collapse_comment('{{c.id}}')" class="invisible-on-collapse md:ml-4 w-[1px] md:w-4 h-full border-l border-gray-400 dark:border-gray-700"></button>
</div>
<div class="w-full">
@ -228,7 +228,7 @@
{% endif %}
<div class="relative md:hidden flex-shrink-0 {{ 'santa' if c.author.patron else 'cap' }}">
<img loading="lazy" src="{{ c.author.profile_url }}" class="flex-shrink-0 w-9 h-9 p-[3px] bg-white border border-gray-300 object-cover lozad" alt="{{ c.author.username }} avatar"/>
<img loading="lazy" src="{{ c.author.profile_url }}" class="flex-shrink-0 w-9 h-9 p-[3px] bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 object-cover lozad" alt="{{ c.author.username }} avatar"/>
</div>
<span class="flex-shrink-0">
@ -324,7 +324,7 @@
<div id="comment-banned-warning" class="hidden-on-collapse text-red-600 mb-0">Removed by @{{c.ban_reason}}</div>
{% endif %}
<div id="comment-text-{{c.id}}" class="hidden-on-collapse text-black mt-2 break-words {% if c.award_count("candycane") %}candycane{% endif %}">
<div id="comment-text-{{c.id}}" class="comment-text hidden-on-collapse mt-2 break-words {% if c.award_count("candycane") %}candycane{% endif %}">
{{c.realbody(v) | safe}}
{% if c.options %}
{% for o in c.options %}

4
files/templates/CHRISTMAS/comments/CommentForm.html
View File

@ -3,7 +3,7 @@
<input type="hidden" name="parent_fullname" value="t2_{{p.id}}">
<input id="reply-form-submission-{{p.fullname}}" type="hidden" name="submission" value="{{p.id}}">
<div class="relative comment-box rounded-lg border border-gray-300 bg-gray-100 shadow-inner w-full">
<textarea maxlength="10000" id="reply-form-body-{{p.fullname}}" data-fullname="{{p.fullname}}" class="w-full rounded-t-md p-3 bg-transparent focus:bg-white shadow-inner resize-y focus:outline-none" id="comment-form" name="body" form="reply-to-{{p.fullname}}" aria-label="With textarea" placeholder="Add your comment..." rows="3" oninput="charLimit('reply-form-body-{{p.fullname}}','charcount-reply')"></textarea>
<textarea maxlength="10000" id="reply-form-body-{{p.fullname}}" data-fullname="{{p.fullname}}" class="text-black w-full rounded-t-md p-3 bg-transparent focus:bg-white shadow-inner resize-y focus:outline-none placehoder:text-gray-400" id="comment-form" name="body" form="reply-to-{{p.fullname}}" aria-label="With textarea" placeholder="Add your comment..." rows="3" oninput="charLimit('reply-form-body-{{p.fullname}}','charcount-reply')"></textarea>
<ul class="-mt-1 flex space-x-4 px-3 py-2 border-t border-dashed border-gray-400 mb-0">
<li>
<button type="button" class="text-gray-400 hover:text-gray-500" onclick="makeBold('reply-form-body-{{p.fullname}}')">
@ -46,7 +46,7 @@
<a href="/formatting" target="_blank" class="inline-block text-sm text-gray-600">
Formatting help
</a>
<button type="button" id="save-reply-to-{{p.fullname}}" form="reply-to-{{p.fullname}}" class="ml-auto block px-4 py-2 bg-gradient-to-t from-red-800 to-red-700 hover:from-red-700 hover:to-red-800 active:shadow-inner border border-red-900 rounded-md text-shadow-t shadow-inset-t-white-10 text-sm font-bold text-gray-100 focus:text-gray-300 focus:outline-none" onclick="post_comment('{{p.fullname}}', '{{p.id}}')">
<button type="button" id="save-reply-to-{{p.fullname}}" form="reply-to-{{p.fullname}}" class="ml-auto btn btn-primary" onclick="post_comment('{{p.fullname}}', '{{p.id}}')">
Comment
</button>
</div>

2
files/templates/CHRISTMAS/comments/CommentMessageReplyForm.html
View File

@ -3,7 +3,7 @@
<form id="reply-to-message-{{c.id}}" action="/reply" method="post" class="input-group" enctype="multipart/form-data">
<input type="hidden" name="formkey" value="{{v.formkey}}">
<div class="relative comment-box rounded-lg border border-gray-300 bg-gray-100 shadow-inner w-full">
<textarea maxlength="10000" name="body" form="reply-to-t3_{{c.id}}" data-id="{{c.id}}" class="w-full rounded-t-md p-3 bg-transparent focus:bg-white shadow-inner resize-y focus:outline-none" placeholder="Write a reply..." id="reply-form-body-{{c.id}}" aria-label="With textarea" rows="3"></textarea>
<textarea maxlength="10000" name="body" form="reply-to-t3_{{c.id}}" data-id="{{c.id}}" class="text-black w-full rounded-t-md p-3 bg-transparent focus:bg-white shadow-inner resize-y focus:outline-none placehoder:text-gray-400" placeholder="Write a reply..." id="reply-form-body-{{c.id}}" aria-label="With textarea" rows="3"></textarea>
<ul class="-mt-1 flex space-x-4 px-3 py-2 border-t border-dashed border-gray-400 mb-0">
<li>
<button type="button" class="text-gray-400 hover:text-gray-500" onclick="makeBold('reply-form-body-{{c.id}}')">

2
files/templates/CHRISTMAS/comments/CommentReplyForm.html
View File

@ -4,7 +4,7 @@
<input type="hidden" name="parent_fullname" value="{{c.fullname}}">
<input id="reply-form-submission-{{c.fullname}}" type="hidden" name="submission" value="{{c.post.id}}">
<div class="relative comment-box rounded-lg border border-gray-300 bg-gray-100 shadow-inner w-full">
<textarea {% if v.longpost %}minlength="280"{% endif %} maxlength="{% if v.bird %}140{% else %}10000{% endif %}" id="reply-form-body-{{c.fullname}}" data-fullname="{{c.fullname}}" name="body" form="reply-to-t3_{{c.id}}" class="w-full rounded-t-md p-3 bg-transparent focus:bg-white shadow-inner resize-y focus:outline-none" aria-label="With textarea" placeholder="Write your reply..." rows="3" oninput="charLimit('reply-form-body-{{c.fullname}}','charcount-{{c.id}}')"></textarea>
<textarea {% if v.longpost %}minlength="280"{% endif %} maxlength="{% if v.bird %}140{% else %}10000{% endif %}" id="reply-form-body-{{c.fullname}}" data-fullname="{{c.fullname}}" name="body" form="reply-to-t3_{{c.id}}" class="text-black w-full rounded-t-md p-3 bg-transparent focus:bg-white shadow-inner resize-y focus:outline-none placehoder:text-gray-400" aria-label="With textarea" placeholder="Write your reply..." rows="3" oninput="charLimit('reply-form-body-{{c.fullname}}','charcount-{{c.id}}')"></textarea>
<ul class="-mt-1 flex space-x-4 px-3 py-2 border-t border-dashed border-gray-400 mb-0">
<li>
<button type="button" class="text-gray-400 hover:text-gray-500" onclick="makeBold('reply-form-body-{{c.fullname}}')">

59
files/templates/CHRISTMAS/default.html
View File

@ -217,7 +217,13 @@
</head>
<body id="{% if request.path != '/comments' %}{% block pagetype %}frontpage{% endblock %}{% endif %}" class="overflow-hidden overflow-y-auto sm:overflow-y-none antialiased bg-cover bg-center bg-gray-500 text-gray-900">
{% if v and (v.theme == 'theme-iron dark' or v.theme == 'theme-evergreen') %}
{% set theme = v.theme %}
{% else %}
{% set theme = 'theme-iron dark' %}
{% endif %}
<body id="{% if request.path != '/comments' %}{% block pagetype %}frontpage{% endblock %}{% endif %}" class="{{ theme }} overflow-hidden overflow-y-auto sm:overflow-y-none antialiased bg-cover bg-center bg-gray-500 text-gray-900 dark:bg-gray-700 dark:text-gray-100">
{% block Banner %}
{% endblock %}
@ -233,7 +239,7 @@
{% block postNav %}
{% endblock %}
<div class="flex h-screen pt-16 bg-gray-500">
<div class="flex h-screen pt-16 bg-gray-500 dark:bg-gray-700 dark:text-gray-200">
<div class="w-full sm:overflow-y-auto">
{% block desktopUserBanner %}
@ -251,7 +257,7 @@
{% endblock %}
<div class="w-full md:px-4">
<div class="w-full max-w-screen-2xl mx-auto mb-4 md:px-4 grid grid-cols-12 gap-6 bg-gray-300 md:bg-gray-200 rounded-b" id="main-content-row">
<div class="w-full max-w-screen-2xl mx-auto mb-4 md:px-4 grid grid-cols-12 gap-6 bg-gray-300 md:bg-gray-200 dark:bg-gray-700 md:dark:bg-gray-800 rounded-b" id="main-content-row">
{% block searchText %}
{% endblock %}
@ -281,36 +287,30 @@
{% include "CHRISTMAS/mobile_navigation_bar.html" %}
{% endblock %}
{% block actionsModal %}
{% endblock %}
{% block actionsModal %}{% endblock %}
{% block reportCommentModal %}
{% endblock %}
{% block reportCommentModal %}{% endblock %}
{% block GIFtoast %}
{% endblock %}
{% block GIFpicker %}
{% endblock %}
{% block GIFtoast %}{% endblock %}
{% block GIFpicker %}{% endblock %}
<!-- Import toast notifications -->
{% include "CHRISTMAS/toasts/toasts.html" %}
{% block modals %}
{% endblock %}
{% block modals %}{% endblock %}
{% block popovers %}
{% endblock %}
{% if v %}
{% include "CHRISTMAS/modals/ModalThemePicker.html" %}
{% endif %}
{% block fixedMobileBarJS %}
{% endblock %}
{% block popovers %}{% endblock %}
{% block scripts %}
{% endblock %}
{% block fixedMobileBarJS %}{% endblock %}
{% block scripts %}{% endblock %}
<!-- Scripts -->
<script src="/assets/CHRISTMAS/js/header.js?v=200"></script>
<!-- Lazy Loading -->
@ -346,8 +346,23 @@
{% if v %}
<script>function formkey() {return '{{v.formkey}}';}</script>
<script>
var previousTheme = '{{ v.theme }}'.split(' ');
function changeTheme(theme) {
const body = document.body;
// if previous selection has a value, remove them from body tag
if (previousTheme.length) {
previousTheme.map(v => body.classList.toggle(v));
}
// toggle classes in body tag
theme.map(v => body.classList.toggle(v));
// Set global previous selection to current selection
previousTheme = theme;
}
</script>
{% endif %}
<script src="/assets/CHRISTMAS/js/default.js?v=201"></script>
<script src="/assets/CHRISTMAS/js/default.js?v=204"></script>
</body>
</html>

8
files/templates/CHRISTMAS/dropdowns/NavbarProfile.html
View File

@ -72,6 +72,14 @@
<li>
<hr class="mt-2 mb-1.5 border-t border-black h-1 shadow-inset-t-white-05"/>
</li>
<li>
<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" data-bs-toggle="modal" data-bs-target="#themePickerModal">
<i class="fas fa-paint-brush fa-sm fa-fw mr-4"></i>Pick theme
</button>
</li>
<li>
<hr class="mt-2 mb-1.5 border-t border-black h-1 shadow-inset-t-white-05"/>
</li>
<li>
<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" onclick="post_toast('/logout', '1')">
<i class="fas fa-power-off fa-sm fa-fw mr-4"></i>Log out

5
files/templates/CHRISTMAS/header-tw.html
View File

@ -193,6 +193,11 @@
Settings
</a>
</li>
<li>
<button class="text-gray-700 hover:text-gray-900 font-bold" data-bs-toggle="modal" data-bs-target="#themePickerModal">
<i class="fas fa-paint-brush fa-fw mr-2"></i>
Pick theme
</button>
<li>
<button class="text-gray-700 hover:text-gray-900 font-bold" onclick="post_toast('/logout', '1')">
<i class="fas fa-power-off fa-fw mr-2"></i>

4
files/templates/CHRISTMAS/home.html
View File

@ -2,13 +2,13 @@
{% block subHeader %}
<div class="relative max-w-screen-2xl mx-auto px-4 py-4 grid grid-cols-12 rounded-t">
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-gray-300 to-gray-200 rounded-t sub-header-shadow"></div>
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-gray-300 to-gray-200 dark:bg-none dark:bg-gray-800 rounded-t sub-header-shadow dark:border-b dark:border-gray-700"></div>
<div class="relative col-span-full flex items-center">
<div>
<h1 class="font-bold text-xl font-heading leading-normal mb-0">
Home
</h1>
<small class="block text-gray-700">
<small class="block text-gray-700 dark:text-gray-400">
<span class="capitalize font-bold">{{ sort }}</span>
posts {{ 'from all time' if t=='all' else 'in the last' }}
{% if t != 'all' %}<span class="font-bold">{{ t }}{% endif %}

6
files/templates/CHRISTMAS/home_comments.html
View File

@ -2,13 +2,13 @@
{% block subHeader %}
<div class="relative max-w-screen-2xl mx-auto px-4 py-4 grid grid-cols-12 rounded-t">
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-gray-300 to-gray-200 rounded-t sub-header-shadow"></div>
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-gray-300 to-gray-200 dark:bg-none dark:bg-gray-800 rounded-t sub-header-shadow dark:border-b dark:border-gray-700"></div>
<div class="relative col-span-full flex items-center">
<div>
<h1 class="font-bold text-xl font-heading leading-normal mb-0">
Comments
</h1>
<small class="block text-gray-700">
<small class="block text-gray-700 dark:text-gray-400">
<span class="capitalize font-bold">{{ sort }}</span>
comments {{ 'from all time' if t=='all' else 'in the last' }}
{% if t != 'all' %}<strong>{{ t }}</strong>{% endif %}
@ -23,7 +23,7 @@
{% block content %}
<!-- Comments list -->
<div class="col-span-full px-2.5 md:px-0" id="posts">
<div class="col-span-full px-2.5 md:px-0 dark:bg-gray-800" id="posts">
{% include "CHRISTMAS/comments.html" %}
</div>
<!-- Pagination -->

60
files/templates/CHRISTMAS/leaderboard.html
View File

@ -4,13 +4,13 @@
{% block subHeader %}
<div class="relative max-w-screen-2xl mx-auto px-4 py-4 grid grid-cols-12 rounded-t">
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-gray-300 to-gray-200 rounded-t sub-header-shadow"></div>
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-gray-300 to-gray-200 dark:bg-none dark:bg-gray-800 rounded-t sub-header-shadow"></div>
<div class="relative col-span-full flex items-center">
<div>
<h1 class="font-bold text-xl font-heading leading-normal mb-0">
Leaderboards
</h1>
<small class="block text-gray-700 leading-normal">
<small class="block text-gray-700 dark:text-gray-400 leading-normal">
In-depth analysis of our most terminally online members' careers.
</small>
<ul class="hidden text-gray-500 text-sm flex items-center space-x-3 leading-normal mb-0">
@ -52,14 +52,14 @@
{% block content %}
<div class="col-span-full mb-6">
<div class="flex items-center px-4 py-4 bg-gradient-to-t from-gray-200 to-gray-100 sticky top-0 z-10">
<div class="flex items-center px-4 py-4 bg-gradient-to-t from-gray-200 to-gray-100 dark:bg-none dark:bg-gray-800 sticky top-0 z-10">
<h2 class="text-2xl font-heading font-bold mb-0">
rDrama's 25 Greediest Members
</h2>
</div>
<div class="mb-4 flex flex-col bg-gray-100 rounded-lg overflow-hidden">
<div class="mb-4 flex flex-col bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden">
{% for user in users1 %}
<div class="flex items-center border-b last:border-b-none border-gray-300 shadow-inset-t-white-05 px-5 py-3 {% if v.username == user.username %}text-red-900 text-shadow-light bg-red-600{% elif users1.index(user) % 2 != 0 %}bg-gray-200{% endif %}">
<div class="flex items-center border-b last:border-b-none border-gray-300 dark:border-gray-900 shadow-inset-t-white-05 px-5 py-3 {% if v.username == user.username %}text-gray-900 text-shadow-light bg-primary{% elif users1.index(user) % 2 != 0 %}bg-gray-200 dark:bg-gray-700{% endif %}">
<!-- Rank -->
<h2 class="flex-shrink-0 text-2xl font-bold font-heading text-center w-16 -ml-5 mb-0 {{ 'text-red-900' if v.username == user.username else 'text-gray-400' }}">
{{users1.index(user)+1}}
@ -72,7 +72,7 @@
</div>
<!-- User Details -->
<div class="ml-3">
<a class="block font-heading font-bold text-lg md:text-xl text-black hover:text-red-600" href="/@{{user.username}}">
<a class="block font-heading font-bold text-lg md:text-xl text-black dark:text-gray-200 hover:text-primary" href="/@{{user.username}}">
{{user.username}}
</a>
{% if user.customtitle %}
@ -91,14 +91,14 @@
</div>
</div>
<div class="col-span-full mb-6">
<div class="flex items-center px-4 py-4 bg-gradient-to-t from-gray-200 to-gray-100 sticky top-0 z-10">
<div class="flex items-center px-4 py-4 bg-gradient-to-t from-gray-200 to-gray-100 dark:bg-none dark:bg-gray-800 sticky top-0 z-10">
<h2 class="text-2xl font-heading font-bold mb-0">
rDrama's 20 Top Spenders
</h2>
</div>
<div class="mb-4 flex flex-col bg-gray-100 rounded-lg overflow-hidden">
<div class="mb-4 flex flex-col bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden">
{% for user in users7 %}
<div class="flex items-center border-b last:border-b-none border-gray-300 shadow-inset-t-white-05 px-5 py-3 {% if v.username == user.username %}text-red-900 text-shadow-light bg-red-600{% elif users7.index(user) % 2 != 0 %}bg-gray-200{% endif %}">
<div class="flex items-center border-b last:border-b-none border-gray-300 dark:border-gray-900 shadow-inset-t-white-05 px-5 py-3 {% if v.username == user.username %}text-red-900 text-shadow-light bg-red-600{% elif users7.index(user) % 2 != 0 %}bg-gray-200 dark:bg-gray-700{% endif %}">
<!-- Rank -->
<h2 class="flex-shrink-0 text-2xl font-bold font-heading text-center w-16 -ml-5 mb-0 {{ 'text-red-900' if v.username == user.username else 'text-gray-400' }}">
{{users7.index(user)+1}}
@ -111,7 +111,7 @@
</div>
<!-- User Details -->
<div class="ml-3">
<a class="block font-heading font-bold text-lg md:text-xl text-black hover:text-red-600" href="/@{{user.username}}">
<a class="block font-heading font-bold text-lg md:text-xl text-black dark:text-gray-200 hover:text-primary" href="/@{{user.username}}">
{{user.username}}
</a>
{% if user.customtitle %}
@ -130,14 +130,14 @@
</div>
</div>
<div class="col-span-full mb-6">
<div class="flex items-center px-4 py-4 bg-gradient-to-t from-gray-200 to-gray-100 sticky top-0 z-10">
<div class="flex items-center px-4 py-4 bg-gradient-to-t from-gray-200 to-gray-100 dark:bg-none dark:bg-gray-800 sticky top-0 z-10">
<h2 class="text-2xl font-heading font-bold mb-0">
rDrama's 15 Most Popular
</h2>
</div>
<div class="mb-4 flex flex-col bg-gray-100 rounded-lg overflow-hidden">
<div class="mb-4 flex flex-col bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden">
{% for user in users2 %}
<div class="flex items-center border-b last:border-b-none border-gray-300 shadow-inset-t-white-05 px-5 py-3 {% if v.username == user.username %}text-red-900 text-shadow-light bg-red-600{% elif users2.index(user) % 2 != 0 %}bg-gray-200{% endif %}">
<div class="flex items-center border-b last:border-b-none border-gray-300 dark:border-gray-900 shadow-inset-t-white-05 px-5 py-3 {% if v.username == user.username %}text-red-900 text-shadow-light bg-red-600{% elif users2.index(user) % 2 != 0 %}bg-gray-200 dark:bg-gray-700{% endif %}">
<!-- Rank -->
<h2 class="flex-shrink-0 text-2xl font-bold font-heading text-center w-16 -ml-5 mb-0 {{ 'text-red-900' if v.username == user.username else 'text-gray-400' }}">
{{users2.index(user)+1}}
@ -150,7 +150,7 @@
</div>
<!-- User Details -->
<div class="ml-3">
<a class="block font-heading font-bold text-lg md:text-xl text-black hover:text-red-600" href="/@{{user.username}}">
<a class="block font-heading font-bold text-lg md:text-xl text-black dark:text-gray-200 hover:text-primary" href="/@{{user.username}}">
{{user.username}}
</a>
{% if user.customtitle %}
@ -169,14 +169,14 @@
</div>
</div>
<div class="col-span-full mb-6">
<div class="flex items-center px-4 py-4 bg-gradient-to-t from-gray-200 to-gray-100 sticky top-0 z-10">
<div class="flex items-center px-4 py-4 bg-gradient-to-t from-gray-200 to-gray-100 dark:bg-none dark:bg-gray-800 sticky top-0 z-10">
<h2 class="text-2xl font-heading font-bold mb-0">
rDrama's 10 Most Terminally Online (Posts)
</h2>
</div>
<div class="mb-4 flex flex-col bg-gray-100 rounded-lg overflow-hidden">
<div class="mb-4 flex flex-col bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden">
{% for user in users3 %}
<div class="flex items-center border-b last:border-b-none border-gray-300 shadow-inset-t-white-05 px-5 py-3 {% if v.username == user.username %}text-red-900 text-shadow-light bg-red-600{% elif users3.index(user) % 2 != 0 %}bg-gray-200{% endif %}">
<div class="flex items-center border-b last:border-b-none border-gray-300 dark:border-gray-900 shadow-inset-t-white-05 px-5 py-3 {% if v.username == user.username %}text-red-900 text-shadow-light bg-red-600{% elif users3.index(user) % 2 != 0 %}bg-gray-200 dark:bg-gray-700{% endif %}">
<!-- Rank -->
<h2 class="flex-shrink-0 text-2xl font-bold font-heading text-center w-16 -ml-5 mb-0 {{ 'text-red-900' if v.username == user.username else 'text-gray-400' }}">
{{users3.index(user)+1}}
@ -189,7 +189,7 @@
</div>
<!-- User Details -->
<div class="ml-3">
<a class="block font-heading font-bold text-lg md:text-xl text-black hover:text-red-600" href="/@{{user.username}}">
<a class="block font-heading font-bold text-lg md:text-xl text-black dark:text-gray-200 hover:text-primary" href="/@{{user.username}}">
{{user.username}}
</a>
{% if user.customtitle %}
@ -208,14 +208,14 @@
</div>
</div>
<div class="col-span-full mb-6">
<div class="flex items-center px-4 py-4 bg-gradient-to-t from-gray-200 to-gray-100 sticky top-0 z-10">
<div class="flex items-center px-4 py-4 bg-gradient-to-t from-gray-200 to-gray-100 dark:bg-none dark:bg-gray-800 sticky top-0 z-10">
<h2 class="text-2xl font-heading font-bold mb-0">
rDrama's 10 Most Terminally Online (Comments)
</h2>
</div>
<div class="mb-4 flex flex-col bg-gray-100 rounded-lg overflow-hidden">
<div class="mb-4 flex flex-col bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden">
{% for user in users4 %}
<div class="flex items-center border-b last:border-b-none border-gray-300 shadow-inset-t-white-05 px-5 py-3 {% if v.username == user.username %}text-red-900 text-shadow-light bg-red-600{% elif users4.index(user) % 2 != 0 %}bg-gray-200{% endif %}">
<div class="flex items-center border-b last:border-b-none border-gray-300 dark:border-gray-900 shadow-inset-t-white-05 px-5 py-3 {% if v.username == user.username %}text-red-900 text-shadow-light bg-red-600{% elif users4.index(user) % 2 != 0 %}bg-gray-200 dark:bg-gray-700{% endif %}">
<!-- Rank -->
<h2 class="flex-shrink-0 text-2xl font-bold font-heading text-center w-16 -ml-5 mb-0 {{ 'text-red-900' if v.username == user.username else 'text-gray-400' }}">
{{users4.index(user)+1}}
@ -228,7 +228,7 @@
</div>
<!-- User Details -->
<div class="ml-3">
<a class="block font-heading font-bold text-lg md:text-xl text-black hover:text-red-600" href="/@{{user.username}}">
<a class="block font-heading font-bold text-lg md:text-xl text-black dark:text-gray-200 hover:text-primary" href="/@{{user.username}}">
{{user.username}}
</a>
{% if user.customtitle %}
@ -247,14 +247,14 @@
</div>
</div>
<div class="col-span-full mb-6">
<div class="flex items-center px-4 py-4 bg-gradient-to-t from-gray-200 to-gray-100 sticky top-0 z-10">
<div class="flex items-center px-4 py-4 bg-gradient-to-t from-gray-200 to-gray-100 dark:bg-none dark:bg-gray-800 sticky top-0 z-10">
<h2 class="text-2xl font-heading font-bold mb-0">
rDrama's 10 Biggest Winners
</h2>
</div>
<div class="mb-4 flex flex-col bg-gray-100 rounded-lg overflow-hidden">
<div class="mb-4 flex flex-col bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden">
{% for user in users5 %}
<div class="flex items-center border-b last:border-b-none border-gray-300 shadow-inset-t-white-05 px-5 py-3 {% if v.username == user.username %}text-red-900 text-shadow-light bg-red-600{% elif users5.index(user) % 2 != 0 %}bg-gray-200{% endif %}">
<div class="flex items-center border-b last:border-b-none border-gray-300 dark:border-gray-900 shadow-inset-t-white-05 px-5 py-3 {% if v.username == user.username %}text-red-900 text-shadow-light bg-red-600{% elif users5.index(user) % 2 != 0 %}bg-gray-200 dark:bg-gray-700{% endif %}">
<!-- Rank -->
<h2 class="flex-shrink-0 text-2xl font-bold font-heading text-center w-16 -ml-5 mb-0 {{ 'text-red-900' if v.username == user.username else 'text-gray-400' }}">
{{users5.index(user)+1}}
@ -267,7 +267,7 @@
</div>
<!-- User Details -->
<div class="ml-3">
<a class="block font-heading font-bold text-lg md:text-xl text-black hover:text-red-600" href="/@{{user.username}}">
<a class="block font-heading font-bold text-lg md:text-xl text-black dark:text-gray-200 hover:text-primary" href="/@{{user.username}}">
{{user.username}}
</a>
{% if user.customtitle %}
@ -286,14 +286,14 @@
</div>
</div>
<div class="col-span-full mb-6">
<div class="flex items-center px-4 py-4 bg-gradient-to-t from-gray-200 to-gray-100 sticky top-0 z-10">
<div class="flex items-center px-4 py-4 bg-gradient-to-t from-gray-200 to-gray-100 dark:bg-none dark:bg-gray-800 sticky top-0 z-10">
<h2 class="text-2xl font-heading font-bold mb-0">
rDrama's 25 Most Downvoted
</h2>
</div>
<div class="mb-4 flex flex-col bg-gray-100 rounded-lg overflow-hidden">
<div class="mb-4 flex flex-col bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden">
{% for user in users9 %}
<div class="flex items-center border-b last:border-b-none border-gray-300 shadow-inset-t-white-05 px-5 py-3 {% if v.username == user.username %}text-red-900 text-shadow-light bg-red-600{% elif users9.index(user) % 2 != 0 %}bg-gray-200{% endif %}">
<div class="flex items-center border-b last:border-b-none border-gray-300 dark:border-gray-900 shadow-inset-t-white-05 px-5 py-3 {% if v.username == user.username %}text-red-900 text-shadow-light bg-red-600{% elif users9.index(user) % 2 != 0 %}bg-gray-200 dark:bg-gray-700{% endif %}">
<!-- Rank -->
<h2 class="flex-shrink-0 text-2xl font-bold font-heading text-center w-16 -ml-5 mb-0 {{ 'text-red-900' if v.username == user.username else 'text-gray-400' }}">
{{loop.index}}
@ -306,7 +306,7 @@
</div>
<!-- User Details -->
<div class="ml-3">
<a class="block font-heading font-bold text-lg md:text-xl text-black hover:text-red-600" href="/@{{user[0].username}}">
<a class="block font-heading font-bold text-lg md:text-xl text-black dark:text-gray-200 hover:text-primary" href="/@{{user[0].username}}">
{{user[0].username}}
</a>
{% if user[0].customtitle %}

14
files/templates/CHRISTMAS/mobile_navigation_bar.html
View File

@ -1,12 +1,12 @@
<div class="container inline-flex sm:hidden">
<div class="z-100 fixed shadow-sm bottom-0 w-full bg-gradient-to-t from-gray-200 to-gray-100 border-t border-gray-300 px-4 py-3" id="mobile-bottom-navigation-bar" style="transition: transform cubic-bezier(0, 0, 0.2, 1) 220ms;">
<div class="z-100 fixed shadow-sm bottom-0 w-full bg-gradient-to-t from-gray-200 to-gray-100 dark:from-gray-800 dark:to-gray-700 border-t border-gray-300 dark:border-gray-900 px-4 py-3" id="mobile-bottom-navigation-bar" style="transition: transform cubic-bezier(0, 0, 0.2, 1) 220ms;">
<ul class="flex flex-nowrap justify-around text-shadow mb-0">
<li>
<button type="button" class="px-2">
<a href="/" class="text-decoration-none" role="button">
<div class="text-center {% if request.path=='/' and request.full_path!='/?sort=hot&t=all' and request.full_path!='/?sort=new&t=all' %}text-gray-700{% else %}text-gray-400{% endif %}">
<div class="text-center {% if request.path=='/' and request.full_path!='/?sort=hot&t=all' and request.full_path!='/?sort=new&t=all' %}text-gray-700 dark:text-gray-200{% else %}text-gray-400 dark:text-gray-500{% endif %}">
<i class="fas fa-home-alt fa-fw text-lg"></i>
<div class="text-sm font-bold">Home</div>
</div>
@ -17,7 +17,7 @@
<li>
<button type="button" class="px-2">
<a href="/?sort=hot&t=all" class="text-decoration-none" role="button">
<div class="text-center {% if request.full_path=='/?sort=hot&t=all' %}text-gray-700{% else %}text-gray-400{% endif %}">
<div class="text-center {% if request.full_path=='/?sort=hot&t=all' %}text-gray-700 dark:text-gray-200{% else %}text-gray-400 dark:text-gray-500{% endif %}">
<i class="fas fa-fire fa-fw text-lg"></i>
<div class="text-sm font-bold">Hot</div>
</div>
@ -28,7 +28,7 @@
<li>
<button type="button" class="px-2">
<a href="/?sort=new&t=all" class="text-decoration-none" role="button">
<div class="text-center {% if request.full_path=='/?sort=new&t=all' %}text-gray-700{% else %}text-gray-400{% endif %}">
<div class="text-center {% if request.full_path=='/?sort=new&t=all' %}text-gray-700 dark:text-gray-200{% else %}text-gray-400 dark:text-gray-500{% endif %}">
<i class="fas fa-sparkles fa-fw text-lg"></i>
<div class="text-sm font-bold">New</div>
</div>
@ -39,7 +39,7 @@
<li>
<button type="button" class="px-2">
<a href="/comments" class="text-decoration-none" role="button">
<div class="text-center {% if request.path=='/comments' %}text-gray-900{% else %}text-gray-400{% endif %}">
<div class="text-center {% if request.path=='/comments' %}text-gray-700 dark:text-gray-200{% else %}text-gray-400 dark:text-gray-500{% endif %}">
<i class="fas fa-comment-dots fa-fw text-lg"></i>
<div class="text-sm font-bold">Comments</div>
</div>
@ -49,7 +49,7 @@
<li>
<button type="button" class="px-2">
<a href="/leaderboard" class="text-decoration-none" role="button">
<div class="text-center {% if request.path=='/leaderboard' %}text-gray-700{% else %}text-gray-400{% endif %}">
<div class="text-center {% if request.path=='/leaderboard' %}text-gray-700 dark:text-gray-200{% else %}text-gray-400 dark:text-gray-500{% endif %}">
<i class="fas fa-trophy fa-fw text-lg"></i>
<div class="text-sm font-bold">Members</div>
</div>
@ -60,7 +60,7 @@
<li>
<button type="button" class="px-2">
<a href="/shop" class="text-decoration-none" role="button">
<div class="text-center {% if request.path=='/shop' %}text-gray-700{% else %}text-gray-400{% endif %}">
<div class="text-center {% if request.path=='/shop' %}text-gray-700 dark:text-gray-200{% else %}text-gray-400 dark:text-gray-500{% endif %}">
<i class="fas fa-store fa-fw text-lg"></i>
<div class="text-sm font-bold">Shop</div>
</div>

77
files/templates/CHRISTMAS/modals/ModalThemePicker.html 100644
View File

@ -0,0 +1,77 @@
<div class="modal fade" id="themePickerModal" tabindex="-1" role="dialog" aria-labelledby="themePickerModalTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered" role="document">
<div class="modal-content bg-gray-100 dark:bg-gray-700 dark:text-gray-200 rounded-md shadow-lg">
<div class="modal-header">
<h5 class="font-bold text-xl font-heading leading-normal">Select theme</h5>
<button type="button" class="close text-gray-700 hover:text-gray-900 dark:text-gray-500 dark:hover:text-gray-400" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="far fa-times"></i></span>
</button>
</div>
<div id="themePickerModalBody" class="overflow-y-auto px-4 py-2">
<!-- List of themes -->
<div class="flex flex-wrap -mx-2 overflow-hidden">
<!-- Evergreen -->
<div class="my-2 px-2 w-1/2 overflow-hidden lg:w-1/4 flex items-center justify-center">
<input hidden name="kind" value="theme-evergreen" type="radio" id="evergreen-theme" class="peer" onchange="changeTheme(['theme-evergreen']); post_toast2('/settings/profile?theme='+value, '1')" {% if v.theme == 'theme-evergreen'%}checked{% endif %}>
<label for="evergreen-theme" class="flex flex-col items-center justify-center w-full h-full text-center border border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-primary rounded-lg overflow-hidden">
<div class="flex flex-col w-full h-full bg-[#37523e]">
<div class="h-3 w-full bg-[#37523e]"></div>
<div class="h-4 w-full bg-[#d1dbd5]"></div>
<ul class="flex flex-col space-y-1 h-12 w-full bg-[#e5ebe7] p-2 mb-0">
<li class="flex">
<i class="fas fa-arrow-alt-up text-[8px] text-[#dc2626]"></i>
<div class="ml-1 h-2 w-2/4 rounded-full bg-black/50"></div>
<div class="ml-auto h-2 w-1/4 rounded-full bg-[#dc2626]"></div>
</li>
<li class="flex">
<i class="fas fa-arrow-alt-up text-[8px] text-gray-400"></i>
<div class="ml-1 h-2 w-2/4 rounded-full bg-black/50"></div>
<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
</li>
<li class="flex">
<i class="fas fa-arrow-alt-up text-[8px] text-gray-400"></i>
<div class="ml-1 h-2 w-2/4 rounded-full bg-black/50"></div>
<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
</li>
</ul>
</div>
<div class="w-full border-t border-gray-200 dark:border-gray-600 p-2 text-center">
<span class="font-bold text-base">Evergreen</span>
</div>
</label>
</div>
<!-- Iron -->
<div class="my-2 px-2 w-1/2 overflow-hidden lg:w-1/4 flex items-center justify-center">
<input hidden name="kind" value="theme-iron dark" type="radio" id="iron-theme" class="peer" onchange="changeTheme(['theme-iron','dark']); post_toast2('/settings/profile?theme='+value, '1')" {% if v.theme == 'theme-iron dark'%}checked{% endif %}>
<label for="iron-theme" class="flex flex-col items-center justify-center w-full h-full text-center border border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-primary rounded-lg overflow-hidden">
<div class="flex flex-col w-full h-full bg-[#3f3f46]">
<div class="h-3 w-full bg-[#3f3f46]"></div>
<div class="h-4 w-full bg-[#27272a]"></div>
<ul class="flex flex-col space-y-1 h-12 w-full bg-[#27272a] p-2 mb-0">
<li class="flex">
<i class="fas fa-arrow-alt-up text-[8px] text-[#db2777]"></i>
<div class="ml-1 h-2 w-2/4 rounded-full bg-white/50"></div>
<div class="ml-auto h-2 w-1/4 rounded-full bg-[#db2777]"></div>
</li>
<li class="flex">
<i class="fas fa-arrow-alt-up text-[8px] text-gray-400"></i>
<div class="ml-1 h-2 w-2/4 rounded-full bg-white/50"></div>
<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
</li>
<li class="flex">
<i class="fas fa-arrow-alt-up text-[8px] text-gray-400"></i>
<div class="ml-1 h-2 w-2/4 rounded-full bg-white/50"></div>
<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
</li>
</ul>
</div>
<div class="w-full border-t border-gray-200 dark:border-gray-600 p-2 text-center">
<span class="font-bold text-base">Iron (Dark)</span>
</div>
</label>
</div>
</div>
</div>
</div>
</div>
</div>

2
files/templates/CHRISTMAS/notifications.html
View File

@ -6,7 +6,7 @@
{% block subHeader %}
<div class="relative max-w-screen-2xl mx-auto px-4 py-4 grid grid-cols-12 rounded-t">
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-gray-300 to-gray-200 rounded-t sub-header-shadow"></div>
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-gray-300 to-gray-200 dark:bg-none dark:bg-gray-800 rounded-t sub-header-shadow dark:border-b dark:border-gray-700"></div>
<div class="relative col-span-full flex items-center">
<div>
<h1 class="font-bold text-xl font-heading leading-normal mb-0">

2
files/templates/CHRISTMAS/search.html
View File

@ -8,7 +8,7 @@
{% block subHeader %}
<div class="relative max-w-screen-2xl mx-auto px-4 py-4 grid grid-cols-12 rounded-t">
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-gray-300 to-gray-200 rounded-t sub-header-shadow"></div>
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-gray-300 to-gray-200 dark:bg-none dark:bg-gray-800 rounded-t sub-header-shadow dark:border-b dark:border-gray-700"></div>
<div class="relative col-span-full flex items-center">
<div class="truncate">
<h1 class="font-bold text-xl font-heading leading-normal mb-0 truncate ellipsis">

28
files/templates/CHRISTMAS/settings.html
View File

@ -1,7 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
@ -58,7 +57,13 @@
</style>
</head>
<body class="overflow-hidden overflow-y-auto sm:overflow-y-none antialiased bg-cover bg-center bg-gray-500 text-gray-900" {% if v and v.background %}style="background:url(/assets/CHRISTMAS/images/backgrounds/{{v.background}})"{% endif %}>
{% if v and (v.theme == 'theme-iron dark' or v.theme == 'theme-evergreen') %}
{% set theme = v.theme %}
{% else %}
{% set theme = 'theme-iron dark' %}
{% endif %}
<body class="{{ theme }} overflow-hidden overflow-y-auto sm:overflow-y-none antialiased bg-cover bg-center bg-gray-500 text-gray-900" {% if v and v.background %}style="background:url(/assets/CHRISTMAS/images/backgrounds/{{v.background}})"{% endif %}>
{% include "CHRISTMAS/header-tw.html" %}
@ -178,6 +183,7 @@
{% if v %}
{% include "CHRISTMAS/modals/Modal2FA.html" %}
{% include "CHRISTMAS/modals/ModalThemePicker.html" %}
{% endif %}
{% block modals %}{% endblock %}
@ -215,7 +221,23 @@
{% if v %}
<script>function formkey() {return '{{v.formkey}}';}</script>
<script src="/assets/CHRISTMAS/js/default.js?v=201"></script>
<script>
var previousTheme = '{{ v.theme }}'.split(' ');
function changeTheme(theme) {
const body = document.body;
// if previous selection has a value, remove them from body tag
if (previousTheme.length) {
previousTheme.map(v => body.classList.toggle(v));
}
// toggle classes in body tag
theme.map(v => body.classList.toggle(v));
// Set global previous selection to current selection
previousTheme = theme;
}
</script>
{% endif %}
<script src="/assets/CHRISTMAS/js/default.js?v=204"></script>
</body>
</html>

35
files/templates/CHRISTMAS/sidebars/HomeSidebar.html
View File

@ -2,7 +2,7 @@
<div class="hidden xl:block xl:col-start-10 xl:col-end-13 flex-shrink-0 py-4">
<div>
<h2 class="ml-2 font-bold text-xl font-heading leading-normal mb-2">
<h2 class="ml-2 font-bold text-xl text-gray-900 dark:text-gray-300 font-heading leading-normal mb-2">
Fistmas Stickies
</h2>
<ul class="flex flex-col space-y-2 mb-0">
@ -11,11 +11,13 @@
<img class="object-contain w-5 h-5" src="/assets/CHRISTMAS/ribbon1.png" alt="ribbon icon">
</div>
<div class="pl-3 mt-[-1px] truncate">
<a href="/post/29747/" class="block font-medium text-black hover:text-red-600 truncate ellipsis">
<a href="/post/29747/" class="block font-medium text-black dark:text-gray-200 hover:text-primary truncate ellipsis">
rDrama presents: FISTMAS 2021 | Santa Claus is CUMMING to town for the HOLIGAYS :marseysanta:
</a>
<small class="block text-gray-500">
posted by <a href="/@christmaspathianflorist" class="text-gray-500 hover:text-gray-600">@christmaspathianflorist</a>
posted by
<a href="/@christmaspathianflorist" class="text-gray-500 hover:text-gray-600 dark:hover:text-gray-400">@christmaspathianflorist
</a>
</small>
</div>
</li>
@ -24,11 +26,14 @@
<img class="object-contain w-5 h-5" src="/assets/CHRISTMAS/ribbon1.png" alt="ribbon icon">
</div>
<div class="pl-3 mt-[-1px] truncate">
<a href="/post/29748/" class="block font-medium text-black hover:text-red-600 truncate ellipsis">
<a href="/post/29748/" class="block font-medium text-black dark:text-gray-200 hover:text-primary truncate ellipsis">
UI overhaul bug report thread
</a>
<small class="block text-gray-500">
posted by <a href="/@christmaspathianflorist" class="text-gray-500 hover:text-gray-600">@christmaspathianflorist</a>
posted by
<a href="/@christmaspathianflorist" class="text-gray-500 hover:text-gray-600 dark:hover:text-gray-400">
@christmaspathianflorist
</a>
</small>
</div>
</li>
@ -37,11 +42,14 @@
<img class="object-contain w-5 h-5" src="/assets/CHRISTMAS/ribbon1.png" alt="ribbon icon">
</div>
<div class="pl-3 mt-[-1px] truncate">
<a href="/post/29885/" class="block font-medium text-black hover:text-red-600 truncate ellipsis">
<a href="/post/29885/" class="block font-medium text-black dark:text-gray-200 hover:text-primary truncate ellipsis">
On the Twelfth day of Christmas MasterLawlz gave to meee [Finale]
</a>
<small class="block text-gray-500">
posted by <a href="/@HoHoHotep" class="text-gray-500 hover:text-gray-600">@HoHoHotep</a>
posted by
<a href="/@HoHoHotep" class="text-gray-500 hover:text-gray-600 dark:hover:text-gray-400">
@HoHoHotep
</a>
</small>
</div>
</li>
@ -50,24 +58,27 @@
<img class="object-contain w-5 h-5" src="/assets/CHRISTMAS/ribbon1.png" alt="ribbon icon">
</div>
<div class="pl-3 mt-[-1px] truncate">
<a href="/post/29916/" class="block font-medium text-black hover:text-red-600 truncate ellipsis">
<a href="/post/29916/" class="block font-medium text-black dark:text-gray-200 hover:text-primary truncate ellipsis">
PUBLIC DRAMACOIN MINE
</a>
<small class="block text-gray-500">
posted by <a href="/@SeetheFarmer" class="text-gray-500 hover:text-gray-600">@SeetheFarmer</a>
posted by
<a href="/@SeetheFarmer" class="text-gray-500 hover:text-gray-600 dark:hover:text-gray-400">
@SeetheFarmer
</a>
</small>
</div>
</li>
</ul>
</div>
<hr class="mt-6 mb-5 h-0.5 border-b border-gray-300 shadow-inset-t-white-05"/>
<hr class="mt-6 mb-5 h-0.5 border-b border-gray-300 dark:border-gray-900 shadow-inset-t-white-05"/>
<button data-bs-toggle="modal" data-bs-target="#expandImageModal" data-bs-url="/assets/CHRISTMAS/banners/banner-{{ random }}.jpg" onclick="expandDesktopImage('/assets/CHRISTMAS/banners/banner-{{ random }}.jpg')" class="w-full h-56 shadow-sm p-[3px] bg-white overflow-hidden">
<img class="w-full h-full flex-shrink-0 object-contain cursor-pointer" src="/assets/CHRISTMAS/banners/banner-{{ random }}.jpg" alt="cat in a bar wearing a santa hat"/>
</button>
{% if v %}
<hr class="mt-6 mb-5 h-0.5 border-b border-gray-300 shadow-inset-t-white-05"/>
<hr class="mt-6 mb-5 h-0.5 border-b border-gray-300 dark:border-gray-900 shadow-inset-t-white-05"/>
<div class="flex flex-col sticky top-4">
<a class="btn btn-red text-center w-full" href="/submit">
<a class="btn btn-primary text-center w-full" href="/submit">
Submit drama
<i class="fas fa-arrow-alt-right fa-fw fa-sm ml-1"></i>
</a>

6
files/templates/CHRISTMAS/sidebars/ProfileSidebar.html
View File

@ -17,7 +17,7 @@
{% endif %}
</div>
</div>
<hr class="mt-6 mb-5 h-0.5 border-b border-gray-300 shadow-inset-t-white-05"/>
<hr class="mt-6 mb-5 h-0.5 border-b border-gray-300 dark:border-gray-900 shadow-inset-t-white-05"/>
<div>
<h2 class="ml-2 font-bold text-lg font-heading leading-normal mb-2">Badges</h2>
<ul class="flex flex-row flex-wrap gap-2 mb-0">
@ -38,7 +38,7 @@
{% endif %}
</ul>
</div>
<hr class="mt-6 mb-5 h-0.5 border-b border-gray-300 shadow-inset-t-white-05"/>
<hr class="mt-6 mb-5 h-0.5 border-b border-gray-300 dark:border-gray-900 shadow-inset-t-white-05"/>
<div>
<h2 class="ml-2 font-bold text-lg font-heading leading-normal mb-2">Awards</h2>
<ul class="flex flex-row flex-wrap gap-2 mb-0">
@ -55,7 +55,7 @@
</ul>
</div>
{% if v and (v.admin_level > 1 or v.alt) %}
<hr class="mt-6 mb-5 h-0.5 border-b border-gray-300 shadow-inset-t-white-05"/>
<hr class="mt-6 mb-5 h-0.5 border-b border-gray-300 dark:border-gray-900 shadow-inset-t-white-05"/>
<div>
<h2 class="ml-2 font-bold text-lg font-heading leading-normal mb-2">Alts</h2>
<ul class="flex flex-row flex-wrap gap-2 mb-0">

6
files/templates/CHRISTMAS/sidebars/SubmissionSidebar.html
View File

@ -22,14 +22,14 @@
{% endif %}
</ul>
</div>
<hr class="mt-6 mb-5 h-0.5 border-b border-gray-300 shadow-inset-t-white-05"/>
<hr class="mt-6 mb-5 h-0.5 border-b border-gray-300 dark:border-gray-900 shadow-inset-t-white-05"/>
<div>
<h2 class="ml-2 font-bold text-lg font-heading leading-normal mb-2">
Link
</h2>
<input type="text" onclick="this.select()" value="https://rdrama.net/post/{{ p.id }}" class="m-0.5 p-0.5 bg-white border border-gray-300 text-xs text-black w-44">
</div>
<hr class="mt-6 mb-5 h-0.5 border-b border-gray-300 shadow-inset-t-white-05"/>
<hr class="mt-6 mb-5 h-0.5 border-b border-gray-300 dark:border-gray-900 shadow-inset-t-white-05"/>
<div>
<h2 class="ml-2 font-bold text-lg font-heading leading-normal mb-2">
Share Post
@ -43,7 +43,7 @@
</a>
</div>
</div>
<hr class="mt-6 mb-5 h-0.5 border-b border-gray-300 shadow-inset-t-white-05"/>
<hr class="mt-6 mb-5 h-0.5 border-b border-gray-300 dark:border-gray-900 shadow-inset-t-white-05"/>
<div>
<h2 class="ml-2 font-bold text-lg font-heading leading-normal mb-2">
DramaMetric™

4
files/templates/CHRISTMAS/sidebars/SubmitSidebar.html
View File

@ -1,4 +1,4 @@
<div class="hidden xl:block xl:col-start-10 xl:col-end-13 flex-shrink-0 my-4 px-4 py-3 rounded-md bg-gray-300/40 shadow-inner">
<div class="hidden xl:block xl:col-start-10 xl:col-end-13 flex-shrink-0 my-4 px-4 py-3 rounded-md bg-gray-300/40 dark:bg-gray-700/40 shadow-inner">
<h2 class="ml-2 font-bold text-lg font-heading leading-normal mb-2">Options</h2>
<div class="flex flex-col space-y-4 mb-3">
<div class="flex items-center">
@ -16,7 +16,7 @@
</div>
{% endif %}
</div>
<hr class="my-2 border-t border-gray-300 h-1 shadow-inset-t-white-10"/>
<hr class="my-2 border-t border-gray-300 dark:border-gray-900 h-1 shadow-inset-t-white-10"/>
<a href="https://www.youtube.com/watch?v=Qlpnt-6HQZo" target="_blank">
<img src="https://media0.giphy.com/media/3o72FhIuVWddxQHftS/giphy.gif" class="sticky top-4 w-full h-58 object-contain p-[3px] bg-white lozad" alt="cozy fireplace log fire"/>
</a>

20
files/templates/CHRISTMAS/submission.html
View File

@ -104,13 +104,13 @@
{% block subHeader %}
<div class="relative max-w-screen-2xl mx-auto px-4 py-4 grid grid-cols-12 rounded-t {% if p.award_count("lights") %}lights{% endif %}">
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-gray-300 to-gray-200 rounded-t sub-header-shadow"></div>
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-gray-300 to-gray-200 dark:bg-none dark:bg-gray-800 rounded-t sub-header-shadow dark:border-b dark:border-gray-700"></div>
<div class="relative col-span-full flex items-center">
<div>
<h1 class="font-bold text-xl font-heading leading-normal mb-0">
Thread
</h1>
<ul class="flex space-x-2 text-xs text-gray-500 leading-normal mb-0">
<ul class="flex space-x-2 text-xs text-gray-500 dark:text-gray-400 leading-normal mb-0">
<li>
<a href="/" class="text-gray-500 hover:underline">Home</a>
</li>
@ -118,7 +118,7 @@
<i class="fas fa-arrow-alt-right text-shadow fa-fw fa-sm"></i>
</li>
<li>
<a href="{{p.permalink}}" class="text-gray-700 hover:underline">{{p.author.username}}'s post</a>
<a href="{{p.permalink}}" class="text-gray-700 dark:text-gray-500 hover:underline">{{p.author.username}}'s post</a>
<li>
</ul>
</div>
@ -221,7 +221,7 @@
<!-- Post -->
<div id="post-root" class="sm:py-4 my-2.5 sm:my-0">
<div id="post-{{p.id}}" class="w-full p-2.5 md:p-0 bg-gray-200 {% if voted==1 %}upvoted{% elif voted==-1 %}downvoted{% endif %}">
<div id="post-{{p.id}}" class="w-full p-2.5 md:p-0 bg-gray-200 dark:bg-gray-800 {% if voted==1 %}upvoted{% elif voted==-1 %}downvoted{% endif %}">
<div class="{% if p.deleted_utc > 0 %}deleted {% endif %} flex flex-row-reverse flex-nowrap justify-end">
{% if not p.is_image and p.thumb_url and not p.embed_url %}
@ -320,7 +320,7 @@
<!-- Title -->
<h1 id="post-title" class="post-title font-medium text-lg md:text-3xl leading-normal mb-2">
{% if p.realurl(v) %}
<a {% if not v or v.newtabexternal %}target="_blank"{% endif %} rel="nofollow noopener noreferrer" href="{{p.realurl(v)}}" class="text-black hover:text-primary">
<a {% if not v or v.newtabexternal %}target="_blank"{% endif %} rel="nofollow noopener noreferrer" href="{{p.realurl(v)}}" class="text-black dark:text-gray-200 hover:text-primary">
{{p.realtitle(v) | safe}}
</a>
{% else %}
@ -352,7 +352,7 @@
</a>
{% endif %}
{% endif %}
<div id="post-text" class="text-black {% if p.award_count("candycane") %}candycane{% endif %}">
<div id="post-text" class="text-black dark:text-gray-200 {% if p.award_count("candycane") %}candycane{% endif %}">
{% if p.is_image %}
<a {% if not v or v.newtabexternal %}target="_blank"{% endif %} rel="nofollow noopener noreferrer" href="{{p.realurl(v)}}">
<img loading="lazy" src="{{p.realurl(v)}}" class="img-fluid" style="max-height:500px;" alt="Unable to load image">
@ -410,7 +410,7 @@
{% endif %}
{% if p.embed_url and "http" not in p.embed_url and "<" not in p.embed_url %}
<div id="crosspost-embed" class="p-2.5 rounded-md bg-gray-300 border border-gray-400">
<div id="crosspost-embed" class="p-2.5 rounded-md bg-gray-300 dark:bg-gray-700 border border-gray-400 dark:border-gray-600">
<div class="row no-gutters">
<div id="frontpage" class="col-12 pt-0">
<div class="posts" id="posts">
@ -486,11 +486,11 @@
{% endif %}
</div>
<div class="shadow-inset-t-white-05 bg-gray-200 md:border-t md:border-gray-300 py-4 mt-3 md:mt-0">
<div class="shadow-inset-t-white-05 bg-gray-200 dark:bg-gray-800 md:border-t md:border-gray-300 dark:md:border-gray-900 py-4 mt-3 md:mt-0">
<div class="flex flex-wrap justify-between mb-2 px-2.5 md:px-0">
<div class="md:ml-20 font-bold text-sm">
<span class="text-black">
<span class="text-black dark:text-gray-300">
{{ p.comment_count }} {{ 'Response' if p.comment_count == 1 else 'Responses' }}
</span>
<!-- Entire thread link -->
@ -546,7 +546,7 @@
</div>
</div>
<div class="w-full">
<textarea maxlength="10000" class="text-lg sm:text-base appearance-none block w-full rounded shadow-inner p-2 bg-gray-300 border border-gray-400 hover:border-gray-500 focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50" name="body" aria-label="With textarea" placeholder="Add your comment..." rows="3" onclick="location.href='/login?redirect={{request.path | urlencode}}';"></textarea>
<textarea maxlength="10000" class="text-lg sm:text-base appearance-none block w-full rounded shadow-inner p-2 bg-gray-300 dark:bg-gray-700 border border-gray-400 dark:border-gray-600 hover:border-gray-500 focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50" name="body" aria-label="With textarea" placeholder="Add your comment..." rows="3" onclick="location.href='/login?redirect={{request.path | urlencode}}';"></textarea>
<div class="flex w-full justify-end mt-2">
<a href="/login?redirect={{request.path | urlencode}}" class="btn btn-gray">Log in to comment</a>
</div>

142
files/templates/CHRISTMAS/submission_listing.html
View File

@ -40,13 +40,13 @@
</div>
{% endif %}
<li id="post-{{p.id}}" class="relative p-2.5 mb-2 md:mb-4 md:pb-4 md:pt-0 md:px-0 border-b border-gray-300 {% if p.is_banned %}bg-red-200{% elif p.deleted_utc %}bg-yellow-200{% else %} md:bg-transparent bg-gray-200{% endif %} {% if p.stickied %} stickied{% endif %}{% if voted==1 %} upvoted{% elif voted==-1 %} downvoted{% endif %}{% if p.over_18 %} nsfw{% endif %} list-none {% if p.award_count("snow") %}snowcaps{% endif %} {% if p.award_count("lights") %}lights{% endif %}">
<li id="post-{{p.id}}" class="relative p-2.5 mb-2 md:mb-4 md:pb-4 md:pt-0 md:px-0 border-b border-gray-300 dark:border-gray-700 {% if p.is_banned %}bg-red-200{% elif p.deleted_utc %}bg-yellow-200{% else %} md:bg-transparent bg-gray-200 dark:bg-gray-800 dark:md:bg-transparent{% endif %} {% if p.stickied %} stickied{% endif %}{% if voted==1 %} upvoted{% elif voted==-1 %} downvoted{% endif %}{% if p.over_18 %} nsfw{% endif %} list-none {% if p.award_count("snow") %}snowcaps{% endif %} {% if p.award_count("lights") %}lights{% endif %}">
<div class="flex flex-nowrap">
<div class="relative z-10 hidden md:flex flex-col flex-shrink-0 items-center mr-4">
<div class="relative {{ 'santa' if p.author.patron else 'cap' }}">
<img loading="lazy" src="{{ p.author.profile_url }}" class="hidden md:block flex-shrink-0 w-14 h-14 p-[3px] bg-white border border-gray-300 object-cover" alt="{{ p.author.username }} avatar"/>
<img loading="lazy" src="{{ p.author.profile_url }}" class="hidden md:block flex-shrink-0 w-14 h-14 p-[3px] bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 object-cover" alt="{{ p.author.username }} avatar"/>
</div>
{% if not postembed %}
@ -86,10 +86,10 @@
<div class="w-full">
<div class="relative z-10 no-scrollbar overflow-y-hidden overflow-x-auto flex items-center space-x-2 md:-ml-2 mb-1 text-sm text-gray-500 leading-normal {% if p.award_count('ghosts') %}ghosts{% endif %}">
<div class="relative z-10 no-scrollbar overflow-y-hidden overflow-x-auto flex items-center space-x-2 md:-ml-2 mb-1 md:mb-0 text-sm text-gray-500 leading-normal {% if p.award_count('ghosts') %}ghosts{% endif %}">
<div class="relative md:hidden flex-shrink-0 {{ 'santa' if p.author.patron else 'cap' }}">
<img loading="lazy" src="{{ p.author.profile_url }}" class="flex-shrink-0 w-9 h-9 p-[3px] bg-white border border-gray-300 object-cover" alt="{{ p.author.username }} avatar"/>
<img loading="lazy" src="{{ p.author.profile_url }}" class="flex-shrink-0 w-9 h-9 p-[3px] bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 object-cover" alt="{{ p.author.username }} avatar"/>
</div>
<span class="flex-shrink-0">
{% if v and v.admin_level==6 and p.author.shadowbanned %}
@ -171,66 +171,68 @@
{% endif %}
</div>
<ul class="relative z-10 flex flex-wrap gap-2 items-center mb-1">
<!-- Flair -->
{% if p.flair %}
<li>
<span class="badge badge-purple">
{{p.flair | safe}}
</span>
</li>
{% endif %}
<!-- NSFW -->
{% if p.over_18 %}
<li>
<span class="badge badge-red">+18</span>
</li>
{% endif %}
<!-- Country Club -->
{% if p.club %}
<li>
<span class="badge badge-yellow">Country Club</span>
</li>
{% endif %}
<!-- Stickied -->
{% if p.stickied %}
<li>
<span class="badge badge-pink">
<i class="fas fa-thumbtack fa-rotate--45 fa-sm fa-fw"></i>
Pinned {% if p.stickied.startswith('t:') %}until {{p.stickied[2:]}}{% else %}by @{{p.stickied}}{%endif%}
</span>
</li>
{% endif %}
<!-- Pinned -->
{% if p.is_pinned and request.path.startswith('/@') %}
<li>
<span class="badge badge-green">
<i class="fas fa-thumbtack fa-rotate--45 fa-sm fa-fw"></i>
Pinned to profile
</span>
</li>
{% endif %}
<!-- Private -->
{% if p.private %}
<li>
<span class="badge badge-blue">
<i class="fas fa-lock-alt fa-sm fa-fw1"></i>
Draft
</span>
</li>
{% endif %}
<!-- Awards -->
{% if p.awards %}
{% for a in p.awards %}
<li>
<i class="{{a.class_list}} fa-sm fa-fw" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="{{a.title}} Award given by @{{a.user.username}}"></i>
</li>
{% endfor %}
{% endif %}
</ul>
{% if p.flair or p.over_18 or p.club or p.stickied or (p.is_pinned and request.path.startswith('/@')) or p.private or p.awards %}
<ul class="relative z-10 flex flex-wrap gap-2 items-center mb-1">
<!-- Flair -->
{% if p.flair %}
<li>
<span class="badge badge-purple">
{{p.flair | safe}}
</span>
</li>
{% endif %}
<!-- NSFW -->
{% if p.over_18 %}
<li>
<span class="badge badge-red">+18</span>
</li>
{% endif %}
<!-- Country Club -->
{% if p.club %}
<li>
<span class="badge badge-yellow">Country Club</span>
</li>
{% endif %}
<!-- Stickied -->
{% if p.stickied %}
<li>
<span class="badge badge-pink">
<i class="fas fa-thumbtack fa-rotate--45 fa-sm fa-fw"></i>
Pinned {% if p.stickied.startswith('t:') %}until {{p.stickied[2:]}}{% else %}by @{{p.stickied}}{%endif%}
</span>
</li>
{% endif %}
<!-- Pinned -->
{% if p.is_pinned and request.path.startswith('/@') %}
<li>
<span class="badge badge-green">
<i class="fas fa-thumbtack fa-rotate--45 fa-sm fa-fw"></i>
Pinned to profile
</span>
</li>
{% endif %}
<!-- Private -->
{% if p.private %}
<li>
<span class="badge badge-blue">
<i class="fas fa-lock-alt fa-sm fa-fw1"></i>
Draft
</span>
</li>
{% endif %}
<!-- Awards -->
{% if p.awards %}
{% for a in p.awards %}
<li>
<i class="{{a.class_list}} fa-sm fa-fw" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="{{a.title}} Award given by @{{a.user.username}}"></i>
</li>
{% endfor %}
{% endif %}
</ul>
{% endif %}
<h5 class="post-title font-medium text-lg md:text-xl leading-5 mb-2">
<a {% if v and v.newtab %}target="_blank"{% endif %} href="{{p.permalink}}" class="stretched-link text-black hover:text-primary visited:text-gray-700 break-words" style="word-break: break-word;">
<a {% if v and v.newtab %}target="_blank"{% endif %} href="{{p.permalink}}" class="stretched-link text-black dark:text-gray-200 hover:text-primary visited:text-gray-700 dark:visited:text-gray-400 break-words" style="word-break: break-word;">
{{p.realtitle(v) | safe}}
</a>
</h5>
@ -249,22 +251,22 @@
<div class="relative z-10 flex flex-row flex-nowrap pl-3 md:pl-5 flex-shrink-0">
<div style="z-index: 3;">
{% if p.club and not (v and v.paid_dues) %}
<img loading="lazy" src="/assets/images/emojis/marseyglow.webp" class="post-thumbnail shadow-sm p-[3px] w-24 h-16 md:w-32 md:h-20 object-cover object-cover bg-white border border-gray-300 flex-shrink-0">
<img loading="lazy" src="/assets/images/emojis/marseyglow.webp" class="post-thumbnail shadow-sm p-[3px] w-24 h-16 md:w-32 md:h-20 object-cover object-cover bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 flex-shrink-0">
{% elif not p.url %}
<a {% if v and v.newtab %}target="_blank"{% endif %} {% if v %}href="{{p.permalink}}"{% else %}href="/logged_out{{p.permalink}}"{% endif %}>
<img loading="lazy" src="{{p.thumb_url}}" class="post-thumbnail shadow-sm p-[3px] w-24 h-16 md:w-32 md:h-20 object-cover object-cover bg-white border border-gray-300 flex-shrink-0">
<img loading="lazy" src="{{p.thumb_url}}" class="post-thumbnail shadow-sm p-[3px] w-24 h-16 md:w-32 md:h-20 object-cover bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 flex-shrink-0">
</a>
{% elif p.is_image %}
<button data-bs-toggle="modal" data-bs-target="#expandImageModal" data-bs-url="{{p.realurl(v)}}" onclick="expandDesktopImage('{{ p.realurl(v) }}')">
<img loading="lazy" src="{{p.thumb_url}}" class="post-thumbnail shadow-sm p-[3px] w-24 h-16 md:w-32 md:h-20 object-cover object-cover bg-white border border-gray-300 flex-shrink-0">
<img loading="lazy" src="{{p.thumb_url}}" class="post-thumbnail shadow-sm p-[3px] w-24 h-16 md:w-32 md:h-20 object-cover bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 flex-shrink-0">
</button>
{% elif (p.url and p.url.lower().endswith('.mp4')) or (p.embed_url and "youtu" in p.domain) or (p.url and "streamable.com/e/" in p.url) %}
<button onclick="document.getElementById('video-{{p.id}}').classList.toggle('hidden')">
<img loading="lazy" src="{{p.thumb_url}}" class="post-thumbnail shadow-sm p-[3px] w-24 h-16 md:w-32 md:h-20 object-cover object-cover bg-white border border-gray-300 flex-shrink-0">
<img loading="lazy" src="{{p.thumb_url}}" class="post-thumbnail shadow-sm p-[3px] w-24 h-16 md:w-32 md:h-20 object-cover bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 flex-shrink-0">
</button>
{% else %}
<a {% if not v or v.newtabexternal %}target="_blank"{% endif %} rel="nofollow noopener noreferrer" href="{{p.realurl(v)}}">
<img loading="lazy" src="{{p.thumb_url}}" class="post-thumbnail shadow-sm p-[3px] w-24 h-16 md:w-32 md:h-20 object-cover object-cover bg-white border border-gray-300 flex-shrink-0">
<img loading="lazy" src="{{p.thumb_url}}" class="post-thumbnail shadow-sm p-[3px] w-24 h-16 md:w-32 md:h-20 object-cover bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 flex-shrink-0">
</a>
{% endif %}
</div>
@ -281,7 +283,7 @@
{% if p.is_image and not p.over_18 and ((v and v.cardview) or (not v and environ.get('CARD_VIEW') == '1')) %}
<div class="md:ml-[4.5rem] mt-4">
<a target="_blank" rel="nofollow noopener noreferrer" href="{{p.url}}" class="inline-block">
<img loading="lazy" src="/assets/CHRISTMAS/images/loading.gif" data-src="{{p.url}}" class="shadow-md p-1 bg-white w-full md:w-64" alt="Post preview">
<img loading="lazy" src="/assets/CHRISTMAS/images/loading.gif" data-src="{{p.url}}" class="shadow-md p-1 bg-white dark:bg-gray-900 w-full md:w-64" alt="Post preview">
</a>
</div>
{% endif %}
@ -381,7 +383,7 @@
{% include "CHRISTMAS/expanded_image_modal.html" %}
<script defer src="/assets/CHRISTMAS/js/new_comments_count.js?v=200"></script>
<script defer src="/assets/CHRISTMAS/js/submission_listing.js?v=201"></script>
<script defer src="/assets/CHRISTMAS/js/submission_listing.js?v=202"></script>
<style>
.mod:before {

14
files/templates/CHRISTMAS/submit.html
View File

@ -6,13 +6,13 @@
{% block subHeader %}
<div class="relative max-w-screen-2xl mx-auto px-4 py-4 grid grid-cols-12 rounded-t">
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-gray-300 to-gray-200 rounded-t sub-header-shadow"></div>
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-gray-300 to-gray-200 dark:bg-none dark:bg-gray-800 rounded-t sub-header-shadow dark:border-b dark:border-gray-700"></div>
<div class="relative col-span-full flex items-center">
<div>
<h1 class="font-bold text-xl font-heading leading-normal mb-0">
Create post
</h1>
<small class="block text-gray-700">
<small class="block text-gray-700 dark:text-gray-400">
Share drama with the community.
</small>
</div>
@ -29,14 +29,14 @@
<div class="flex items-center mb-4">
<img src="{{ v.profile_url }}" class="w-8 h-8 object-cover rounded" alt="My avatar"/>
<div class="text-lg text-black font-bold pl-2">{{ v.username }}</div>
<div class="text-lg font-bold pl-2">{{ v.username }}</div>
</div>
<form id="submitform" action="/submit" method="post" enctype="multipart/form-data" class="flex flex-col space-y-6">
<!-- Post title field section -->
<div class="flex flex-col">
<label for="post-title" class="label text-black">Title</label>
<label for="post-title" class="label text-black dark:text-gray-200">Title</label>
<div>
<!-- Input field -->
<input class="form-input" id="post-title" aria-describedby="titleHelpRegister" type="text" name="title" placeholder="rdrama.net is one of the most malevolent, cruel, coldhearted online communities you'll ever find" value="{{title}}" minlength="1" maxlength="500" required oninput="checkForRequired()">
@ -49,7 +49,7 @@
<!-- Link field section -->
<div id="urlblock" class="flex flex-col">
<label for="url" class="label text-black">
<label for="url" class="label text-black dark:text-gray-200">
Link
<span class="italic text-sm font-normal text-gray-500">(optional if you have text)</span>
</label>
@ -64,7 +64,7 @@
<!-- Attachment field section -->
<div class="flex flex-col">
<label for="file" class="label text-black">
<label for="file" class="label text-black dark:text-gray-200">
Image or Video
<span class="italic text-sm font-normal text-gray-500">(optional)</span>
</label>
@ -88,7 +88,7 @@
<!-- Link field section -->
<div class="flex flex-col">
<label for="body" class="label text-black">
<label for="body" class="label text-black dark:text-gray-200">
Post
<span class="italic text-sm font-normal text-gray-500">(optional if you have a link)</span>
</label>

2
files/templates/CHRISTMAS/tailwind-class-list.html
View File

@ -1,3 +1,3 @@
<div class="animate-pulse hover:bg-gray-300 hover:opacity-100 md:hover:opacity-100 pointer-events-none"></div>
<div class="text-twitter text-blue text-lightblue text-danger text-success text-gold text-silver text-light-green text-green-500 text-blue-200"></div>
<div class="text-twitter text-blue text-lightblue text-danger text-success text-gold text-silver text-light-green text-green-500 text-blue-200 dark:text-gray-100"></div>

2
files/templates/CHRISTMAS/userpage.html
View File

@ -31,7 +31,7 @@
{% endblock %}
{% block subHeader %}
<img src="{{ u.banner_url}}" class="-mb-0.5 w-full h-48 lg:h-[28rem] object-cover"/>
<img src="{{ u.banner_url }}" class="-mb-0.5 w-full h-48 lg:h-[28rem] object-cover"/>
<div class="relative max-w-screen-2xl mx-auto px-4 py-4 grid grid-cols-12 rounded-t">
{% if v %}
<div class="absolute -top-12 right-3">

96
tailwind.config.js
View File

@ -3,8 +3,8 @@ const colors = require('tailwindcss/colors')
module.exports = {
mode: 'jit',
purge: [
'files/templates/**/*.html',
'files/templates/*.html'
'files/templates/**/*.html',
'files/templates/*.html'
],
darkMode: 'class', // or 'media' or 'class'
theme: {
@ -47,16 +47,88 @@ module.exports = {
},
colors: {
gray: {
'100': '#f4f6f4',
'200': '#e5ebe7',
'300': '#d1dbd5',
'400': '#9bafa1',
'500': '#6a8073',
'600': '#4c6351',
'700': '#37523e',
'800': '#1f3726',
'900': '#112817'
},
100: ({ opacityVariable, opacityValue }) => {
if (opacityValue !== undefined) {
return `rgba(var(--color-100), ${opacityValue})`;
}
if (opacityVariable !== undefined) {
return `rgba(var(--color-100), var(${opacityVariable}, 1))`;
}
return `rgb(var(--color-100))`;
},
200: ({ opacityVariable, opacityValue }) => {
if (opacityValue !== undefined) {
return `rgba(var(--color-200), ${opacityValue})`;
}
if (opacityVariable !== undefined) {
return `rgba(var(--color-200), var(${opacityVariable}, 1))`;
}
return `rgb(var(--color-200))`;
},
300: ({ opacityVariable, opacityValue }) => {
if (opacityValue !== undefined) {
return `rgba(var(--color-300), ${opacityValue})`;
}
if (opacityVariable !== undefined) {
return `rgba(var(--color-300), var(${opacityVariable}, 1))`;
}
return `rgb(var(--color-300))`;
},
400: ({ opacityVariable, opacityValue }) => {
if (opacityValue !== undefined) {
return `rgba(var(--color-400), ${opacityValue})`;
}
if (opacityVariable !== undefined) {
return `rgba(var(--color-400), var(${opacityVariable}, 1))`;
}
return `rgb(var(--color-400))`;
},
500: ({ opacityVariable, opacityValue }) => {
if (opacityValue !== undefined) {
return `rgba(var(--color-500), ${opacityValue})`;
}
if (opacityVariable !== undefined) {
return `rgba(var(--color-500), var(${opacityVariable}, 1))`;
}
return `rgb(var(--color-500))`;
},
600: ({ opacityVariable, opacityValue }) => {
if (opacityValue !== undefined) {
return `rgba(var(--color-600), ${opacityValue})`;
}
if (opacityVariable !== undefined) {
return `rgba(var(--color-600), var(${opacityVariable}, 1))`;
}
return `rgb(var(--color-600))`;
},
700: ({ opacityVariable, opacityValue }) => {
if (opacityValue !== undefined) {
return `rgba(var(--color-700), ${opacityValue})`;
}
if (opacityVariable !== undefined) {
return `rgba(var(--color-700), var(${opacityVariable}, 1))`;
}
return `rgb(var(--color-700))`;
},
800: ({ opacityVariable, opacityValue }) => {
if (opacityValue !== undefined) {
return `rgba(var(--color-800), ${opacityValue})`;
}
if (opacityVariable !== undefined) {
return `rgba(var(--color-800), var(${opacityVariable}, 1))`;
}
return `rgb(var(--color-800))`;
},
900: ({ opacityVariable, opacityValue }) => {
if (opacityValue !== undefined) {
return `rgba(var(--color-900), ${opacityValue})`;
}
if (opacityVariable !== undefined) {
return `rgba(var(--color-900), var(${opacityVariable}, 1))`;
}
return `rgb(var(--color-900))`;
},
}
}
},
},