Browse Source

Now with more of our style

master
Kody 1 year ago
parent
commit
fb60276bb4
  1. 28
      src/css/_variables.scss
  2. 7
      src/css/dashboard.scss
  3. 44
      src/css/style.scss
  4. 8
      src/css/sweetalert.scss
  5. 4
      src/js/home.js
  6. 2
      views/_partial/links.njk
  7. 16
      views/cookiepolicy.njk
  8. 50
      views/faq.njk
  9. 10
      views/home.njk
  10. 4
      views/nojs.njk

28
src/css/_variables.scss

@ -14,30 +14,30 @@ $red: hsl(348, 100%, 61%);
@import "../../node_modules/bulma/sass/utilities/functions.sass";
@import "../../node_modules/bulma/sass/utilities/derived-variables.sass";
$scheme-main: $black;
$text: $white-ter;
$scheme-main: $white-ter;
$text: $black;
$strong-color: $grey-lighter;
$link-hover: $link-light;
$link-hover: $link-dark;
$hr-background-color: $grey-light;
$border-hover: $link;
$input-focus-border-color: $link-light;
$input-focus-border-color: $link-dark;
$title-color: $white-ter;
$subtitle-color: $grey-lightest;
$subtitle-strong-color: $grey-lightest;
$title-color: $black;
$subtitle-color: $black-ter;
$subtitle-strong-color: $black-ter;
$input-background-color: $scheme-main;
$input-border-color: $grey;
$input-color: $text;
$input-placeholder-color: $grey-lightest;
$input-disabled-background-color: $grey-dark;
$input-disabled-background-color: $grey-light;
$input-disabled-border-color: $input-border-color;
$input-disabled-color: $input-color;
$input-disabled-color: $grey-darker;
$input-disabled-placeholder-color: $grey-lightest;
$pagination-background-color: $scheme-main;
@ -48,12 +48,12 @@ $pagination-hover-background-color: $pagination-color;
$pagination-hover-border-color: $pagination-border-color;
$pagination-hover-color: $scheme-main;
$pagination-disabled-background-color: $grey-dark;
$pagination-disabled-background-color: $grey-light;
$pagination-disabled-border-color: $grey;
$pagination-disabled-color: hsl(0, 0%, 64%);
$pagination-disabled-color: $grey-darker;
$tabs-link-color: $text;
$tabs-link-hover-color: $tabs-link-color;
$tabs-boxed-link-active-border-color: $grey;
$tabs-boxed-link-hover-background-color: $grey-darker;
$tabs-boxed-link-hover-border-bottom-color: $tabs-boxed-link-active-border-color
$tabs-boxed-link-active-border-color: $white;
$tabs-boxed-link-hover-background-color: $white-ter;
$tabs-boxed-link-hover-border-bottom-color: $tabs-boxed-link-active-border-color;

7
src/css/dashboard.scss

@ -9,7 +9,8 @@ body {
}
#dashboard {
animation: fadeInOpacity 0.5s
animation: fadeInOpacity 0.5s;
width: 100%;
}
.menu-label {
@ -109,10 +110,6 @@ li[data-action="page-ellipsis"] {
cursor: pointer
}
.label {
color: $grey-lightest
}
#page {
/* fix overflow issue with flex */
min-width: 0

44
src/css/style.scss

@ -112,16 +112,36 @@
/** General **/
html {
overflow-y: auto
background: #B63A74;
background: -webkit-linear-gradient(135deg, #DF8AAC, #B63A74);
background: linear-gradient(135deg, #DF8AAC, #B63A74);
background-attachment: fixed;
overflow-y: auto;
}
body {
animation: fadeInOpacity 0.5s
animation: fadeInOpacity 0.5s;
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0;
min-height: 100vh;
}
body > .section > .container,
.hero-body > .container {
background-color: rgba(255, 255, 255, 0.8);
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8rem;
line-height: 1.4;
padding: 1rem 2rem;
}
code,
.message-body code {
background-color: $black;
background-color: $grey-lighter;
border-radius: 5px;
font-size: 1rem
}
@ -147,12 +167,12 @@ code,
}
.label {
color: $white-ter;
color: $black-ter;
font-weight: normal
}
.help {
color: $grey-lightest
color: $black-ter
}
.progress {
@ -238,26 +258,26 @@ fieldset[disabled] .select select:hover {
}
.table {
color: $grey-lightest;
background-color: $black;
color: $grey-darker;
background-color: $white;
&.is-narrow {
font-size: 0.75rem
}
&.is-hoverable tbody tr:not(.is-selected):hover {
background-color: #2f2f2f
background-color: $grey-lightest
}
td,
th {
white-space: nowrap;
vertical-align: middle;
border-bottom: 1px solid $grey
border-bottom: 1px solid $white-ter
}
th {
color: $white-ter;
color: $black-ter;
height: 2.25em;
font-weight: normal;
@ -269,8 +289,8 @@ fieldset[disabled] .select select:hover {
thead {
td,
th {
color: $white-ter;
background-color: #383838;
color: $black-ter;
background-color: $white-ter;
border-bottom: 0;
height: 31px
}

8
src/css/sweetalert.scss

@ -46,7 +46,7 @@
/** Main **/
$swal-modal-background: $grey-darker;
$swal-modal-background: $white-ter;
.swal-modal {
background-color: $swal-modal-background;
@ -63,7 +63,7 @@ $swal-modal-background: $grey-darker;
.swal-title,
.swal-text {
color: $white-ter
color: $dark-ter
}
.swal-text {
@ -72,12 +72,12 @@ $swal-modal-background: $grey-darker;
.swal-content {
.label {
color: $white-ter
color: $dark-ter
}
.checkbox,
.radio {
color: $white-ter;
color: $dark-ter;
&:hover {
color: $grey-lightest

4
src/js/home.js

@ -857,7 +857,7 @@ page.prepareUploadConfig = () => {
{ value: '0', text: 'Newer files on top' }
],
help: `"Newer files on top" will use a CSS technique, which unfortunately come with <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction#Accessibility_concerns" target="_blank" rel="noopener">some undesirable side effects</a>.<br>
This also affects text selection, such as when trying to select text from top to bottom will result in them being selected from bottom to top instead, and vice versa.`,
This also affects text selection, such as when trying to select text from top to bottom <br/>will result in them being selected from bottom to top instead, and vice versa.`,
valueHandler (value) {
if (value === '0') {
const uploadFields = document.querySelectorAll('.tab-content > .uploads')
@ -1026,7 +1026,7 @@ page.prepareUploadConfig = () => {
</p>
<p class="help">
This configuration will only be used in this browser.<br>
After reloading the page, some of them will also be applied to the ShareX config that you can download by clicking on the ShareX icon below.
After reloading the page, some of them will also be applied to the <br/>ShareX config that you can download by clicking on the ShareX icon below.
</p>
`

2
views/_partial/links.njk

@ -10,7 +10,6 @@
{% endmacro %}
<div class="columns is-gapless">
<div class="column is-hidden-mobile"></div>
<div class="column">
<div id="linksColumn" class="columns is-mobile is-multiline is-centered {{ "is-gapless" if separator }}">
{% for link in globals.home_links -%}
@ -29,5 +28,4 @@
{% endfor %}
</div>
</div>
<div class="column is-hidden-mobile"></div>
</div>

16
views/cookiepolicy.njk

@ -19,7 +19,7 @@
</p>
<hr>
<h3 class="subtitle has-text-white-ter">What are cookies? -or- How to disable cookies?</h3>
<h3 class="subtitle">What are cookies? -or- How to disable cookies?</h3>
<article class="message">
<div class="message-body">
<strong>Simply put, a cookie is a technology for remembering something about you.</strong><br>
@ -27,7 +27,7 @@
</div>
</article>
<h3 class="subtitle has-text-white-ter">How We Use Cookies</h3>
<h3 class="subtitle">How We Use Cookies</h3>
<article class="message">
<div class="message-body">
We use cookies for a variety of reasons detailed below.<br>
@ -36,14 +36,14 @@
</div>
</article>
<h3 class="subtitle has-text-white-ter">Account related cookies</h3>
<h3 class="subtitle">Account related cookies</h3>
<article class="message">
<div class="message-body">
If you create an account with us, then we will use cookies for the management of the signup process and general administration.
</div>
</article>
<h3 class="subtitle has-text-white-ter">Login related cookies</h3>
<h3 class="subtitle">Login related cookies</h3>
<article class="message">
<div class="message-body">
We use cookies when you are logged in so that we can remember that you are logged in.<br>
@ -52,7 +52,7 @@
</div>
</article>
<h3 class="subtitle has-text-white-ter">What information do we know about you?</h3>
<h3 class="subtitle">What information do we know about you?</h3>
<article class="message">
<div class="message-body">
We don’t request or require you to provide personal information to access our website.<br>
@ -60,14 +60,14 @@
</div>
</article>
<h3 class="subtitle has-text-white-ter">What about cookies?</h3>
<h3 class="subtitle">What about cookies?</h3>
<article class="message">
<div class="message-body">
{{ globals.whole_cookie }} may place cookies on your browser in order to identify you when you return to our website.
</div>
</article>
<h3 class="subtitle has-text-white-ter">Cookies We May Use</h3>
<h3 class="subtitle">Cookies We May Use</h3>
<article class="message">
<div class="message-body">
We may use the following cookies:<br>
@ -224,7 +224,7 @@
</div>
</article>
<h3 class="subtitle has-text-white-ter">Questions?</h3>
<h3 class="subtitle">Questions?</h3>
<article class="message">
<div class="message-body">
For more information, email <a href="mailto:{{ globals.email }}">{{ globals.email }}</a>.

50
views/faq.njk

@ -25,7 +25,7 @@
<h2 id="general" class='title is-spaced'>General</h2>
<h3 class="subtitle has-text-white-ter">What is {{ globals.name }}?</h3>
<h3 class="subtitle">What is {{ globals.name }}?</h3>
<article class="message">
<div class="message-body">
This is a fork of <a href="https://github.com/WeebDev/lolisafe" target="_blank" rel="noopener">lolisafe</a>.<br>
@ -34,7 +34,7 @@
</article>
{% if globals.enable_faq_banned_categories -%}
<h3 class="subtitle has-text-white-ter">Are there any <strong>banned categories</strong>?</h3>
<h3 class="subtitle">Are there any <strong>banned categories</strong>?</h3>
<article class="message">
<div class="message-body">
Banned categories are the following, <i>but not limited to</i>:<br>
@ -53,7 +53,7 @@
</article>
{%- endif %}
<h3 class="subtitle has-text-white-ter">Will you keep my uploads forever?</h3>
<h3 class="subtitle">Will you keep my uploads forever?</h3>
<article class="message">
<div class="message-body">
Unless the uploads are included within the banned categories above, or some other bullshit, I will.<br>
@ -66,7 +66,7 @@
</div>
</article>
<h3 class="subtitle has-text-white-ter">How can I keep track of my uploads?</h3>
<h3 class="subtitle">How can I keep track of my uploads?</h3>
<article class="message">
<div class="message-body">
Simply create a user on the site and every uploads will be associated with your account, granting you access to your uploads through our Dashboard.<br>
@ -74,7 +74,7 @@
</div>
</article>
<h3 class="subtitle has-text-white-ter">What are albums?</h3>
<h3 class="subtitle">What are albums?</h3>
<article class="message">
<div class="message-body">
Albums are a simple way of sorting/categorizing uploads together.<br>
@ -84,14 +84,14 @@
</div>
</article>
<h3 class="subtitle has-text-white-ter">Why should I use this?</h3>
<h3 class="subtitle">Why should I use this?</h3>
<article class="message">
<div class="message-body">
I don't know.
</div>
</article>
<h3 class="subtitle has-text-white-ter">I saw something too illegal for my tastes here, what should I do?</h3>
<h3 class="subtitle">I saw something too illegal for my tastes here, what should I do?</h3>
<article class="message">
<div class="message-body">
Send a strongly worded email to <a href="mailto:{{ globals.email }}">{{ globals.email }}</a> and I will try to get back to you within <strong>48 hours</strong>.<br>
@ -100,7 +100,7 @@
</article>
{% if globals.support -%}
<h3 class="subtitle has-text-white-ter">How can I support {{ globals.name }}?</h3>
<h3 class="subtitle">How can I support {{ globals.name }}?</h3>
<article class="message">
<div class="message-body">
{{ globals.support | safe }}
@ -114,7 +114,7 @@
<div class="container has-text-left">
<h2 id="technical" class='title is-spaced'>Technical</h2>
<h3 class="subtitle has-text-white-ter">What are the allowed extensions here?</h3>
<h3 class="subtitle">What are the allowed extensions here?</h3>
<article class="message">
<div class="message-body">
{% if extensionsFilter.length -%}
@ -133,7 +133,7 @@
</div>
</article>
<h3 class="subtitle has-text-white-ter">Why are my <strong>.htm/.html</strong> uploads being served as plain text?</h3>
<h3 class="subtitle">Why are my <strong>.htm/.html</strong> uploads being served as plain text?</h3>
<article class="message">
<div class="message-body">
There had been too many phishing pages being uploaded in the past.
@ -141,7 +141,7 @@
</article>
{% if globals.server_location -%}
<h3 class="subtitle has-text-white-ter">Where is the server located?</h3>
<h3 class="subtitle">Where is the server located?</h3>
<article class="message">
<div class="message-body">
{{ globals.server_location | safe }}.
@ -154,7 +154,7 @@
{%- endif %}
{% if config.cloudflare.purgeCache -%}
<h3 class="subtitle has-text-white-ter">Since my uploads are cached, what about after I delete them from the dashboard?</h3>
<h3 class="subtitle">Since my uploads are cached, what about after I delete them from the dashboard?</h3>
<article class="message">
<div class="message-body">
We will send API requests to Cloudflare to purge their cache immediately after you delete your uploads from the dashboard.<br>
@ -164,7 +164,7 @@
{%- endif %}
{% if globals.enable_faq_tor -%}
<h3 class="subtitle has-text-white-ter">I cannot access this website with Tor and/or VPNs!?</h3>
<h3 class="subtitle">I cannot access this website with Tor and/or VPNs!?</h3>
<article class="message">
<div class="message-body">
My server is actively refreshing and blacklisting Tor exit nodes.<br>
@ -175,7 +175,7 @@
</article>
{%- endif %}
<h3 class="subtitle has-text-white-ter">Are there any Desktop clients?</h3>
<h3 class="subtitle">Are there any Desktop clients?</h3>
<article class="message">
<div class="message-body">
We do have some browser extensions:<br>
@ -195,7 +195,7 @@
</div>
</article>
<h3 class="subtitle has-text-white-ter">Do you have a No-JS uploader form?</h3>
<h3 class="subtitle">Do you have a No-JS uploader form?</h3>
<article class="message">
<div class="message-body">
<a href="nojs" target="_blank"><strong>Yes!</strong></a>
@ -203,7 +203,7 @@
</article>
{% if noJsMaxSizeInt and chunkSizeInt -%}
<h3 class="subtitle has-text-white-ter">Why is the maximum file size in the No-JS uploader form smaller?</h3>
<h3 class="subtitle">Why is the maximum file size in the No-JS uploader form smaller?</h3>
<article class="message">
<div class="message-body">
This site is using Cloudflare, which limits the maximum upload size.<br>
@ -213,7 +213,7 @@
{%- endif %}
{% if chunkSizeInt -%}
<h3 class="subtitle has-text-white-ter">So your API supports chunked uploads?</h3>
<h3 class="subtitle">So your API supports chunked uploads?</h3>
<article class="message">
<div class="message-body">
<strong>Yes.</strong> The homepage uploader was coded to chunk uploads into {{ chunkSizeInt }} MB pieces by default. However, this is configurable through its Config tab.<br>
@ -226,7 +226,7 @@
{%- endif %}
{% if globals.fork_repo -%}
<h3 class="subtitle has-text-white-ter">I found a bug! -or- I want to request a feature!</h3>
<h3 class="subtitle">I found a bug! -or- I want to request a feature!</h3>
<article class="message">
<div class="message-body">
Feel free to create a {{ globals.fork_host }} issue <a href="{{ globals.fork_issues }}" target="_blank" rel="noopener">here</a>.</br>
@ -235,7 +235,7 @@
</article>
{%- endif %}
<h3 class="subtitle has-text-white-ter">How do I delete my own account <strong>and</strong> all the uploads associated with it?</h3>
<h3 class="subtitle">How do I delete my own account <strong>and</strong> all the uploads associated with it?</h3>
<article class="message">
<div class="message-body">
For now, you will also have to contact me through my email above.<br>
@ -250,14 +250,14 @@
<div class="container has-text-left">
<h2 id="privacy" class='title is-spaced'>Privacy</h2>
<h3 class="subtitle has-text-white-ter">What information is kept with uploads?</h3>
<h3 class="subtitle">What information is kept with uploads?</h3>
<article class="message">
<div class="message-body">
The uploader's <strong>IP address</strong>.
</div>
</article>
<h3 class="subtitle has-text-white-ter">What information is kept with users?</h3>
<h3 class="subtitle">What information is kept with users?</h3>
<article class="message">
<div class="message-body">
Technically, <strong>none</strong>.<br>
@ -267,7 +267,7 @@
</div>
</article>
<h3 class="subtitle has-text-white-ter">Why do you need to keep my IP address?</h3>
<h3 class="subtitle">Why do you need to keep my IP address?</h3>
<article class="message">
<div class="message-body">
<strong>Security purposes.</strong><br>
@ -276,7 +276,7 @@
</div>
</article>
<h3 class="subtitle has-text-white-ter">Does the server have some sort of access logs?</h3>
<h3 class="subtitle">Does the server have some sort of access logs?</h3>
<article class="message">
<div class="message-body">
<strong>Yes.</strong><br>
@ -288,7 +288,7 @@
</article>
{% if config.cookiePolicy -%}
<h3 class="subtitle has-text-white-ter">Cookies</h3>
<h3 class="subtitle">Cookies</h3>
<article class="message">
<div class="message-body">
We use cookies to offer you a better browsing experience and to analyze our traffic.<br>
@ -298,7 +298,7 @@
</article>
{%- endif %}
<h3 class="subtitle has-text-white-ter">I still have more unanswered questions!</h3>
<h3 class="subtitle">I still have more unanswered questions!</h3>
<article class="message">
<div class="message-body">
Feel free to email <a href="mailto:{{ globals.email }}">{{ globals.email }}</a>.

10
views/home.njk

@ -32,7 +32,7 @@
{%- endif %}
{# We assign an ID for this so that the script can find out version string for render images #}
{# <script id="renderScript" data-version="{{ versions[4] }}" src="js/misc/render.js{{ versions[1] }}" async></script> #}
<script src="js/misc/newsfeed.js{{ versions[1] }}" async></script>
{# <script src="js/misc/newsfeed.js{{ versions[1] }}" async></script> #}
{# We assign an ID for this so that the script can find out its own version #}
<script id="mainScript" src="js/home.js{{ versions[1] }}"></script>
<script src="js/misc/utils.js{{ versions[1] }}"></script>
@ -59,7 +59,6 @@
</p>
<div class="columns is-gapless">
<div class="column is-hidden-mobile"></div>
<div class="column">
<a id="loginToUpload" class="button is-danger is-outlined is-fullwidth is-loading is-wrappable"></a>
<div id="albumDiv" class="field has-addons is-hidden">
@ -113,7 +112,7 @@
<p class="help">
{% if urlMaxSizeInt !== maxSizeInt -%}
Maximum file size per URL is <span id="urlMaxSize">{{ urlMaxSizeInt }} MB</span>.
{{- ' ' }}{% endif -%}
{{- '<br/>' | safe }}{% endif -%}
{% if urlExtensionsFilterEnabled -%}
{% if urlExtensionsFilterMode === 'blacklist' -%}
@ -125,7 +124,7 @@
{%- for extension in urlExtensionsFilter -%}
{{ comma() }}{{ extension | replace('.', '') | upper }}
{%- endfor %}.
{{- ' ' }}{% endif -%}
{{- '<br/>' | safe }}{% endif -%}
{%- if urlDisclaimerMessage -%}
{{ urlDisclaimerMessage | safe }}
@ -147,7 +146,6 @@
{%- endif %}
<div id="tab-config" class="tab-content is-hidden"></div>
</div>
<div class="column is-hidden-mobile"></div>
</div>
<div id="tpl" class="is-hidden">
@ -180,11 +178,9 @@
{% if gitHash -%}
<div class="git-commit columns is-gapless">
<div class="column is-hidden-mobile"></div>
<div class="column">
<span>Git commit: </span><a href="https://github.com/BobbyWibowo/lolisafe/commit/{{ gitHash }}" target="_blank" rel="noopener">{{ gitHash }}</a>
</div>
<div class="column is-hidden-mobile"></div>
</div>
{%- endif %}
</div>

4
views/nojs.njk

@ -35,7 +35,6 @@
</p>
<div class="columns is-gapless">
<div class="column is-hidden-mobile"></div>
<div class="column">
{% if private -%}
<a class="button is-danger is-outlined is-fullwidth" href="auth">
@ -76,7 +75,6 @@
</div>
{%- endif %}
</div>
<div class="column is-hidden-mobile"></div>
</div>
{% set plain_links = true %}
@ -84,11 +82,9 @@
{% if gitHash -%}
<div class="git-commit columns is-gapless">
<div class="column is-hidden-mobile"></div>
<div class="column">
<span>Git commit: </span><a href="https://github.com/BobbyWibowo/lolisafe/commit/{{ gitHash }}" target="_blank" rel="noopener">{{ gitHash }}</a>
</div>
<div class="column is-hidden-mobile"></div>
</div>
{%- endif %}
</div>

Loading…
Cancel
Save