Browse Source

Transitioned styling to Sass

Added new dev dependencies:
bulma, gulp-sass, node-sass

Updated some dependencies

Various other things related to styling

Bumped v1 version string and rebuilt client assets
safe.fiery.me
Bobby Wibowo 1 year ago
parent
commit
34d3601c30
No known key found for this signature in database GPG Key ID: 51C3A1E1E22D26CF
  1. 1
      .stylelintrc.json
  2. 2
      dist/css/album.css
  3. 2
      dist/css/album.css.map
  4. 2
      dist/css/dashboard.css
  5. 2
      dist/css/dashboard.css.map
  6. 2
      dist/css/home.css
  7. 2
      dist/css/home.css.map
  8. 3
      dist/css/style.css
  9. 2
      dist/css/style.css.map
  10. 2
      dist/css/sweetalert.css
  11. 2
      dist/css/sweetalert.css.map
  12. 2
      dist/css/thumbs.css
  13. 2
      dist/css/thumbs.css.map
  14. 2
      dist/js/dashboard.js
  15. 2
      dist/js/dashboard.js.map
  16. 46
      gulpfile.js
  17. 7
      package.json
  18. 21
      public/libs/bulma/LICENSE
  19. 1
      public/libs/bulma/bulma.css.map
  20. 1
      public/libs/bulma/bulma.min.css
  21. 59
      src/css/_variables.scss
  22. 8
      src/css/album.scss
  23. 177
      src/css/dashboard.css
  24. 196
      src/css/dashboard.scss
  25. 232
      src/css/home.css
  26. 224
      src/css/home.scss
  27. 348
      src/css/style.css
  28. 350
      src/css/style.scss
  29. 166
      src/css/sweetalert.css
  30. 180
      src/css/sweetalert.scss
  31. 52
      src/css/thumbs.css
  32. 58
      src/css/thumbs.scss
  33. 10
      src/js/dashboard.js
  34. 2
      src/versions.json
  35. 1
      views/_layout.njk
  36. 4
      views/album-notice.njk
  37. 4
      views/album.njk
  38. 3
      views/auth.njk
  39. 19
      views/cookiepolicy.njk
  40. 3
      views/dashboard.njk
  41. 53
      views/faq.njk
  42. 3
      views/home.njk
  43. 489
      yarn.lock

1
.stylelintrc.json

@ -2,6 +2,7 @@
"extends": "stylelint-config-standard",
"rules": {
"declaration-block-trailing-semicolon": "never",
"function-name-case": null,
"indentation": 2,
"no-descending-specificity": null
}

2
dist/css/album.css

@ -1,2 +1,2 @@
.section{background:none}@media screen and (max-width:768px){.description{text-align:center}}
@media screen and (max-width:768px){.description{text-align:center}}
/*# sourceMappingURL=album.css.map */

2
dist/css/album.css.map

@ -1 +1 @@
{"version":3,"sources":["css/album.css"],"names":[],"mappings":"AAAA,SACE,eACF,CAEA,oCACE,aACE,iBACF,CACF","file":"album.css","sourcesContent":[".section {\n background: none\n}\n\n@media screen and (max-width: 768px) {\n .description {\n text-align: center\n }\n}\n"]}
{"version":3,"sources":["css/album.scss"],"names":[],"mappings":"AAMA,oCACE,aACE,iBACF,CAAC","file":"album.css","sourcesContent":["@charset \"utf-8\";\n\n@import \"_variables\";\n\n/** Main **/\n\n@media screen and (max-width: 768px) {\n .description {\n text-align: center\n }\n}\n"]}

2
dist/css/dashboard.css

@ -1,2 +1,2 @@
body{-webkit-animation:none;animation:none}#dashboard{-webkit-animation:fadeInOpacity .5s;animation:fadeInOpacity .5s}.section{background:none}.menu-list a{color:#209cee;border:1px solid transparent;margin-top:-1px}.menu-list a.is-active{color:#fff;background:#209cee;border-color:#209cee}.menu-list a:not(.is-active):hover{color:#209cee;background:none;border-color:#209cee}.menu-list a[disabled]{color:#7a7a7a;pointer-events:none}.menu-list a.is-loading:after{-webkit-animation:spinAround .5s linear infinite;animation:spinAround .5s linear infinite;border-radius:290486px;border-color:transparent transparent #dbdbdb #dbdbdb;border-style:solid;border-width:2px;content:"";display:block;height:1em;width:1em;right:.5em;top:calc(50% - .5em);position:absolute!important}ul#albumsContainer{border-left:0;padding-left:0}ul#albumsContainer li{border-left:2px solid #585858;padding-left:.75em}#page.fade-in,ul#albumsContainer li{-webkit-animation:fadeInOpacity .5s;animation:fadeInOpacity .5s}.pagination{margin-bottom:1.25rem}.pagination a:not([disabled]){color:#eff0f1;border-color:#eff0f1;background:none}.pagination a.pagination-link:hover,.pagination a.pagination-next:not([disabled]):hover,.pagination a.pagination-previous:not([disabled]):hover{color:#000;background-color:#eff0f1;border-color:#eff0f1}.pagination a.pagination-link.is-current{color:#000;background-color:#eff0f1}.pagination a.is-loading:hover:after,.pagination a.pagination-link.is-current.is-loading:after{border-bottom-color:#000;border-left-color:#000}li[data-action=page-ellipsis]{cursor:pointer}.label{color:#bdc3c7}.menu-list li ul{border-left-color:#898b8d}.image-container .checkbox{position:absolute;top:11px;left:11px}.image-container .controls{display:flex;position:absolute;top:11px;right:11px}.image-container .controls .button{border-radius:0}.image-container .controls .button:not(:active):not(:hover){color:#fff;background-color:rgba(0,0,0,.56078)}.no-touch .image-container .checkbox{opacity:.5}.no-touch .image-container .controls,.no-touch .image-container .details{opacity:0}.no-touch .image-container:hover .checkbox,.no-touch .image-container:hover .controls,.no-touch .image-container:hover .details{opacity:1}#page{min-width:0}.is-linethrough{text-decoration:line-through}#dashboard.is-loading #menu .menu-list a,#dashboard.is-loading [data-action]{cursor:progress}#dashboard.is-loading .column.bulk-operations [data-action],#dashboard.is-loading .column.exclusive-operations [data-action],#dashboard.is-loading .table [data-action],#dashboard.is-loading [data-action$=-help]{cursor:pointer}#statistics tr :first-child{width:50%}.expirydate{color:#bdc3c7}.table .originalname{max-width:200px;text-overflow:ellipsis;overflow:hidden}
body{-webkit-animation:none;animation:none}#dashboard{-webkit-animation:fadeInOpacity .5s;animation:fadeInOpacity .5s}.menu-label{color:#b5b5b5}.menu-list a{color:#1f89e5;border:1px solid transparent;margin-top:-1px}.menu-list a.is-active{color:#fff;background:#1f89e5;border-color:#1f89e5}.menu-list a:not(.is-active):hover{color:#1f89e5;background:none;border-color:#1f89e5}.menu-list a[disabled]{color:#7a7a7a;pointer-events:none}.menu-list a.is-loading:after{-webkit-animation:spinAround .5s linear infinite;animation:spinAround .5s linear infinite;border-radius:290486px;border-color:transparent transparent #f5f5f5 #f5f5f5;border-style:solid;border-width:2px;content:"";display:block;height:1em;width:1em;right:.5em;top:calc(50% - .5em);position:absolute!important}.menu-list li ul{border-left:0;padding-left:0}.menu-list li ul li{border-left:2px solid #b5b5b5;padding-left:.75em}#page.fade-in,.menu-list #albumsContainer li{-webkit-animation:fadeInOpacity .5s;animation:fadeInOpacity .5s}.pagination{margin-bottom:1.25rem}.pagination-link:not([disabled]),.pagination-next:not([disabled]),.pagination-previous:not([disabled]){background-color:#000}.pagination-link:not([disabled]):hover,.pagination-next:not([disabled]):hover,.pagination-previous:not([disabled]):hover{background-color:#f5f5f5}.pagination-link[disabled],.pagination-next[disabled],.pagination-previous[disabled]{opacity:1}.pagination-link.is-current{color:#000;background-color:#f5f5f5;border-color:#f5f5f5}.pagination-link.is-current.is-loading:after{border-bottom-color:#4a4a4a;border-left-color:#4a4a4a}li[data-action=page-ellipsis]{cursor:pointer}.label{color:#ededed}#page{min-width:0}.is-linethrough{text-decoration:line-through}#dashboard.is-loading #menu .menu-list a,#dashboard.is-loading [data-action]{cursor:progress}#dashboard.is-loading .column.bulk-operations [data-action],#dashboard.is-loading .column.exclusive-operations [data-action],#dashboard.is-loading .table [data-action],#dashboard.is-loading [data-action$=-help]{cursor:pointer}#statistics tr :first-child{width:50%}.expirydate{color:#ededed}.table .originalname{max-width:200px;text-overflow:ellipsis;overflow:hidden}.image-container .checkbox{position:absolute;top:11px;left:11px}.image-container .controls{display:flex;position:absolute;top:11px;right:11px}.image-container .controls .button{border-radius:0}.image-container .controls .button:not(:active):not(:hover){color:#fff;background-color:#000}.no-touch .image-container .checkbox{opacity:.5}.no-touch .image-container .controls,.no-touch .image-container .details{opacity:0}.no-touch .image-container:hover .checkbox,.no-touch .image-container:hover .controls,.no-touch .image-container:hover .details{opacity:1}
/*# sourceMappingURL=dashboard.css.map */

2
dist/css/dashboard.css.map

File diff suppressed because one or more lines are too long

2
dist/css/home.css

@ -1,2 +1,2 @@
#b{width:200px;height:200px;border-radius:100%;display:inline-block;margin-bottom:40px;vertical-align:top;-webkit-animation:fadeInOpacity .5s;animation:fadeInOpacity .5s}.logo{max-height:200px}.logo.is-2x{display:none}#dropzone *{pointer-events:none}#panel,#tokenContainer{display:none}#maxSize{font-size:1rem}.dz-preview .dz-details{display:flex}.dz-preview .dz-details .dz-filename,.dz-preview .dz-details .dz-size{flex:1}.dz-preview .dz-error-mark,.dz-preview .dz-success-mark,.dz-preview img{display:none}.uploads{display:flex;flex-direction:column}.uploads.is-reversed{flex-direction:column-reverse}.uploads>div{-webkit-animation:fadeInOpacity .5s;animation:fadeInOpacity .5s;margin:.75rem!important}.uploads.is-reversed>div{flex:0 0 auto}.uploads>div:first-child{margin-top:1.5rem}.uploads.nojs{margin-bottom:0}.uploads>div>.icon:not(.icon-block){color:#209cee}.uploads>div>.icon.icon-block{color:#da4453}.uploads .descriptive-progress{color:#bdc3c7}.uploads img{max-width:200px}.name{font-size:1rem;color:#eff0f1}.link>a,.name{word-break:break-all}.clipboard-mobile{margin-top:5px}#albumDiv{-webkit-animation:fadeInOpacity .5s;animation:fadeInOpacity .5s}#albumDiv .control{text-align:inherit}#linksColumn{margin-top:-.25rem;margin-left:-.25rem;margin-right:-.25rem;-webkit-animation:fadeInOpacity .5s;animation:fadeInOpacity .5s}#linksColumn .column{padding:.25rem}#linksColumn>span{padding:0 .3rem;color:#7f8c8d}.git-commit a{display:inline-block;word-break:break-all}#tabs{margin-bottom:1rem;-webkit-animation:fadeInOpacity .5s;animation:fadeInOpacity .5s}#tabs ul{border-bottom:1px solid #585858}#tabs li a{color:#bdc3c7;border-bottom-color:#585858}#tabs.is-boxed li.is-active a{color:#209cee;background:#000;border-color:#585858 #585858 #000}#tabs.is-boxed li:not(.is-active) a:hover{background:#585858}.tab-content{margin-bottom:-.75rem;-webkit-animation:fadeInOpacity .5s;animation:fadeInOpacity .5s}#tab-config.tab-content form{margin-bottom:.75rem}#urlMaxSize{font-weight:700}input[type=file].is-fullwidth{width:100%}.render{position:fixed;right:0;bottom:0;font-size:1rem;color:#bdc3c7;cursor:pointer;-webkit-animation:floatUp 1.5s cubic-bezier(0,.71,.29,1) .5s 1 normal both;animation:floatUp 1.5s cubic-bezier(0,.71,.29,1) .5s 1 normal both}.render.button{border-bottom-left-radius:0;border-bottom-right-radius:0;right:1%;opacity:.25;transition:opacity .25s}.render.button:hover{opacity:1}#newsfeed{position:absolute;top:0;right:0;left:0;padding:1.5rem 1.5rem 0}#newsfeed .column:last-child{-webkit-animation:floatUp 1.5s cubic-bezier(0,.71,.29,1) .5s 1 normal both;animation:floatUp 1.5s cubic-bezier(0,.71,.29,1) .5s 1 normal both}#newsfeed .notification{display:block;padding:.75rem 2.25rem .75rem 1.125rem;margin-bottom:1.125rem}#newsfeed .notification>.delete{top:.75rem}#newsfeed .notification .content{font-size:.75rem}#newsfeed .news-date.is-recent-week,#newsfeed .news-title{font-weight:700}
#b{width:200px;height:200px;border-radius:100%;display:inline-block;margin-bottom:40px;vertical-align:top;-webkit-animation:fadeInOpacity .5s;animation:fadeInOpacity .5s}.logo{max-height:200px}.logo.is-2x{display:none}#dropzone *{pointer-events:none}#panel,#tokenContainer{display:none}#maxSize{font-size:1rem}.dz-preview .dz-details{display:flex}.dz-preview .dz-details .dz-filename,.dz-preview .dz-details .dz-size{flex:1}.dz-preview .dz-error-mark,.dz-preview .dz-success-mark,.dz-preview img{display:none}.uploads{display:flex;flex-direction:column}.uploads.is-reversed{flex-direction:column-reverse}.uploads>div{-webkit-animation:fadeInOpacity .5s;animation:fadeInOpacity .5s;margin:.75rem!important}.uploads>div:first-child{margin-top:1.5rem}.uploads>div>.icon:not(.icon-block){color:#1f89e5}.uploads>div>.icon.icon-block{color:#ff3860}.uploads.is-reversed>div{flex:0 0 auto}.uploads.nojs{margin-bottom:0}.uploads .descriptive-progress{color:#ededed}.uploads img{max-width:200px}.name{font-size:1rem;color:#f5f5f5}.link>a,.name{word-break:break-all}.clipboard-mobile{margin-top:5px}#albumDiv{-webkit-animation:fadeInOpacity .5s;animation:fadeInOpacity .5s}#albumDiv .control{text-align:inherit}#linksColumn{margin-top:-.25rem;margin-left:-.25rem;margin-right:-.25rem;-webkit-animation:fadeInOpacity .5s;animation:fadeInOpacity .5s}#linksColumn .column{padding:.25rem}#linksColumn>span{padding:0 .3rem;color:#b5b5b5}.git-commit a{display:inline-block;word-break:break-all}.hero .tabs ul{border-bottom:1px solid #7a7a7a}#tabs{margin-bottom:1rem}#tabs,#tabs .tab-content{-webkit-animation:fadeInOpacity .5s;animation:fadeInOpacity .5s}#tabs .tab-content{margin-bottom:-.75rem}#tab-config.tab-content form{margin-bottom:.75rem}#urlMaxSize{font-weight:700}input[type=file].is-fullwidth{width:100%}.render{position:fixed;right:0;bottom:0;font-size:1rem;color:#ededed;cursor:pointer;-webkit-animation:floatUp 1.5s cubic-bezier(0,.71,.29,1) .5s 1 normal both;animation:floatUp 1.5s cubic-bezier(0,.71,.29,1) .5s 1 normal both}.render.button{border-bottom-left-radius:0;border-bottom-right-radius:0;right:1%;opacity:.25;transition:opacity .25s}.render.button:hover{opacity:1}#newsfeed{position:absolute;top:0;right:0;left:0;padding:1.5rem 1.5rem 0}#newsfeed .column:last-child{-webkit-animation:floatUp 1.5s cubic-bezier(0,.71,.29,1) .5s 1 normal both;animation:floatUp 1.5s cubic-bezier(0,.71,.29,1) .5s 1 normal both}#newsfeed .notification{display:block;padding:.75rem 2.25rem .75rem 1.125rem;margin-bottom:1.125rem}#newsfeed .notification>.delete{top:.75rem}#newsfeed .notification .content{font-size:.75rem}#newsfeed .news-date.is-recent-week,#newsfeed .news-title{font-weight:700}
/*# sourceMappingURL=home.css.map */

2
dist/css/home.css.map

File diff suppressed because one or more lines are too long

3
dist/css/style.css

File diff suppressed because one or more lines are too long

2
dist/css/style.css.map

File diff suppressed because one or more lines are too long

2
dist/css/sweetalert.css

@ -1,2 +1,2 @@
.swal-modal{background-color:#282828}.swal-modal .field{text-align:left;text-align:initial}.swal-modal.is-expanded{width:auto;max-width:90%}.swal-text,.swal-title{color:#eff0f1}.swal-text{text-align:center}.swal-content .checkbox,.swal-content .label,.swal-content .radio{color:#eff0f1}.swal-content .checkbox:hover,.swal-content .radio:hover{color:#bdc3c7}.swal-button--confirm:not(.swal-button--danger){background-color:#209cee}.swal-button--confirm:not(.swal-button--danger):hover{background-color:#67c3ff}.swal-button--confirm:not(.swal-button--danger):focus{box-shadow:0 0 0 1px #030303,0 0 0 3px rgba(32,156,238,.29)}.swal-button--danger{background-color:#ff3860}.swal-button--danger:hover{background-color:#ff2b56}.swal-button--danger:focus{box-shadow:0 0 0 1px #030303,0 0 0 3px rgba(255,56,96,.29)}.swal-button--cancel{background-color:#00d1b2;color:#fff}.swal-button--cancel:hover{background-color:#00c4a7}.swal-button--cancel:focus{box-shadow:0 0 0 1px #030303,0 0 0 3px rgba(0,209,178,.29)}.swal-button--loading{color:transparent}.swal-icon--info{border-color:#3794d2}.swal-icon--info:after,.swal-icon--info:before{background-color:#3794d2}.swal-icon--error{border-color:#da4453}.swal-icon--error__line{background-color:#da4453}.swal-icon--warning{border-color:#f67400;-webkit-animation:pulseWarning .5s infinite alternate;animation:pulseWarning .5s infinite alternate}.swal-icon--warning__body,.swal-icon--warning__dot{background-color:#f67400;-webkit-animation:pulseWarningBody .5s infinite alternate;animation:pulseWarningBody .5s infinite alternate}@-webkit-keyframes pulseWarning{0%{border-color:#ffaa60}to{border-color:#f67400}}@keyframes pulseWarning{0%{border-color:#ffaa60}to{border-color:#f67400}}@-webkit-keyframes pulseWarningBody{0%{background-color:#ffaa60}to{background-color:#f67400}}@keyframes pulseWarningBody{0%{background-color:#ffaa60}to{background-color:#f67400}}.swal-icon--success{border-color:#27ae60}.swal-icon--success__line{background-color:#27ae60}.swal-icon--success__hide-corners{background-color:#282828}.swal-icon--success:after,.swal-icon--success:before{background:#282828}.swal-display-thumb-container{min-width:200px;min-height:200px;display:flex;align-items:center;justify-content:center}
@-webkit-keyframes pulseWarning{0%{border-color:#ffdd57}to{border-color:#947600}}@keyframes pulseWarning{0%{border-color:#ffdd57}to{border-color:#947600}}@-webkit-keyframes pulseWarningBody{0%{background-color:#ffdd57}to{background-color:#947600}}@keyframes pulseWarningBody{0%{background-color:#ffdd57}to{background-color:#947600}}.swal-modal{background-color:#363636}.swal-modal.is-expanded{width:auto;max-width:90%}.swal-modal .field{text-align:left;text-align:initial}.swal-text,.swal-title{color:#f5f5f5}.swal-text{text-align:center}.swal-content .checkbox,.swal-content .label,.swal-content .radio{color:#f5f5f5}.swal-content .checkbox:hover,.swal-content .radio:hover{color:#ededed}.swal-button--confirm:not(.swal-button--danger){background-color:#4387f4}.swal-button--confirm:not(.swal-button--danger):hover{background-color:#0c53c6}.swal-button--confirm:not(.swal-button--danger):focus{box-shadow:0 0 0 1px #121212,0 0 0 3px #0c53c6}.swal-button--danger{background-color:#ff3860}.swal-button--danger:hover{background-color:#db002c}.swal-button--danger:focus{box-shadow:0 0 0 1px #121212,0 0 0 3px #db002c}.swal-button--cancel{background-color:#00d1b2;color:#fff}.swal-button--cancel:hover{background-color:#00947e}.swal-button--cancel:focus{box-shadow:0 0 0 1px #121212,0 0 0 3px #00947e}.swal-button--loading{color:transparent}.swal-icon--info{border-color:#4387f4}.swal-icon--info:after,.swal-icon--info:before{background-color:#4387f4}.swal-icon--error{border-color:#ff3860}.swal-icon--error__line{background-color:#ff3860}.swal-icon--warning{border-color:#ffdd57;-webkit-animation:pulseWarning .5s infinite alternate;animation:pulseWarning .5s infinite alternate}.swal-icon--warning__body,.swal-icon--warning__dot{background-color:#ffdd57;-webkit-animation:pulseWarningBody .5s infinite alternate;animation:pulseWarningBody .5s infinite alternate}.swal-icon--success{border-color:#55b978}.swal-icon--success:after,.swal-icon--success:before{background-color:#363636}.swal-icon--success__line{background-color:#55b978}.swal-icon--success__hide-corners{background-color:#363636}.swal-display-thumb-container{min-width:200px;min-height:200px;display:flex;align-items:center;justify-content:center}
/*# sourceMappingURL=sweetalert.css.map */

2
dist/css/sweetalert.css.map

File diff suppressed because one or more lines are too long

2
dist/css/thumbs.css

@ -1,2 +1,2 @@
.image-container{flex:none;position:relative;width:224px;height:224px;margin:.75rem;padding:11px;overflow:hidden;align-items:center;border:1px solid #585858}.image-container .title{font-weight:400;word-break:break-all}.image-container .image{display:flex;height:200px;width:200px;align-items:center;justify-content:center}.image-container .image img{max-height:100%;max-width:100%;height:auto;width:auto}.image-container .details{position:absolute;left:11px;bottom:11px;right:11px;background-color:rgba(0,0,0,.56078);color:#eff0f1;padding:3px;font-size:.75rem}.image-container .details p{display:block;text-overflow:ellipsis;overflow:hidden}.image-container .details p.name{font-weight:700}
.image-container{flex:none;position:relative;width:224px;height:224px;margin:.75rem;padding:11px;overflow:hidden;align-items:center;border:1px solid #7a7a7a}.image-container .title{font-weight:400;word-break:break-all}.image-container .image{display:flex;height:200px;width:200px;align-items:center;justify-content:center}.image-container .image img{max-height:100%;max-width:100%;height:auto;width:auto}.image-container .details{position:absolute;left:11px;bottom:11px;right:11px;background-color:rgba(0,0,0,.56078);color:#eff0f1;padding:3px;font-size:.75rem}.image-container .details p{display:block;text-overflow:ellipsis;overflow:hidden}.image-container .details p.name{font-weight:700}
/*# sourceMappingURL=thumbs.css.map */

2
dist/css/thumbs.css.map

@ -1 +1 @@
{"version":3,"sources":["css/thumbs.css"],"names":[],"mappings":"AAAA,iBACE,SAAU,CACV,iBAAkB,CAClB,WAAY,CACZ,YAAa,CACb,aAAe,CACf,YAAa,CACb,eAAgB,CAChB,kBAAmB,CACnB,wBACF,CAEA,wBACE,eAAmB,CACnB,oBACF,CAEA,wBACE,YAAa,CACb,YAAa,CACb,WAAY,CACZ,kBAAmB,CACnB,sBACF,CAEA,4BACE,eAAgB,CAChB,cAAe,CACf,WAAY,CACZ,UACF,CAEA,0BACE,iBAAkB,CAClB,SAAU,CACV,WAAY,CACZ,UAAW,CACX,mCAA2B,CAC3B,aAAc,CACd,WAAY,CACZ,gBACF,CAEA,4BACE,aAAc,CACd,sBAAuB,CACvB,eACF,CAEA,iCACE,eACF","file":"thumbs.css","sourcesContent":[".image-container {\n flex: none;\n position: relative;\n width: 224px;\n height: 224px;\n margin: 0.75rem;\n padding: 11px;\n overflow: hidden;\n align-items: center;\n border: 1px solid #585858\n}\n\n.image-container .title {\n font-weight: normal;\n word-break: break-all\n}\n\n.image-container .image {\n display: flex;\n height: 200px;\n width: 200px;\n align-items: center;\n justify-content: center\n}\n\n.image-container .image img {\n max-height: 100%;\n max-width: 100%;\n height: auto;\n width: auto\n}\n\n.image-container .details {\n position: absolute;\n left: 11px;\n bottom: 11px;\n right: 11px;\n background-color: #0000008f;\n color: #eff0f1;\n padding: 3px;\n font-size: 0.75rem\n}\n\n.image-container .details p {\n display: block;\n text-overflow: ellipsis;\n overflow: hidden\n}\n\n.image-container .details p.name {\n font-weight: bold\n}\n"]}
{"version":3,"sources":["css/thumbs.scss","../node_modules/bulma/sass/utilities/initial-variables.sass"],"names":[],"mappings":"AAMA,iBACE,SAAU,CACV,iBAAkB,CAClB,WAAY,CACZ,YAAa,CACb,aAAe,CACf,YAAa,CACb,eAAgB,CAChB,kBAAmB,CACnB,wBCP4B,CDF9B,wBAYI,eAAmB,CACnB,oBACF,CAdF,wBAiBI,YAAa,CACb,YAAa,CACb,WAAY,CACZ,kBAAmB,CACnB,sBAAuB,CArB3B,4BAwBM,eAAgB,CAChB,cAAe,CACf,WAAY,CACZ,UACF,CA5BJ,0BAgCI,iBAAkB,CAClB,SAAU,CACV,WAAY,CACZ,UAAW,CACX,mCAA2B,CAC3B,aAAc,CACd,WAAY,CACZ,gBAAkB,CAvCtB,4BA0CM,aAAc,CACd,sBAAuB,CACvB,eAAgB,CA5CtB,iCA+CQ,eACF","file":"thumbs.css","sourcesContent":["@charset \"utf-8\";\n\n@import \"_variables\";\n\n/** Main **/\n\n.image-container {\n flex: none;\n position: relative;\n width: 224px;\n height: 224px;\n margin: 0.75rem;\n padding: 11px;\n overflow: hidden;\n align-items: center;\n border: 1px solid $grey;\n\n .title {\n font-weight: normal;\n word-break: break-all\n }\n\n .image {\n display: flex;\n height: 200px;\n width: 200px;\n align-items: center;\n justify-content: center;\n\n img {\n max-height: 100%;\n max-width: 100%;\n height: auto;\n width: auto\n }\n }\n\n .details {\n position: absolute;\n left: 11px;\n bottom: 11px;\n right: 11px;\n background-color: #0000008f;\n color: #eff0f1;\n padding: 3px;\n font-size: 0.75rem;\n\n p {\n display: block;\n text-overflow: ellipsis;\n overflow: hidden;\n\n &.name {\n font-weight: bold\n }\n }\n }\n}\n","// Colors\n\n$black: hsl(0, 0%, 4%) !default;\n$black-bis: hsl(0, 0%, 7%) !default;\n$black-ter: hsl(0, 0%, 14%) !default;\n\n$grey-darker: hsl(0, 0%, 21%) !default;\n$grey-dark: hsl(0, 0%, 29%) !default;\n$grey: hsl(0, 0%, 48%) !default;\n$grey-light: hsl(0, 0%, 71%) !default;\n$grey-lighter: hsl(0, 0%, 86%) !default;\n$grey-lightest: hsl(0, 0%, 93%) !default;\n\n$white-ter: hsl(0, 0%, 96%) !default;\n$white-bis: hsl(0, 0%, 98%) !default;\n$white: hsl(0, 0%, 100%) !default;\n\n$orange: hsl(14, 100%, 53%) !default;\n$yellow: hsl(48, 100%, 67%) !default;\n$green: hsl(141, 53%, 53%) !default;\n$turquoise: hsl(171, 100%, 41%) !default;\n$cyan: hsl(204, 71%, 53%) !default;\n$blue: hsl(217, 71%, 53%) !default;\n$purple: hsl(271, 100%, 71%) !default;\n$red: hsl(348, 86%, 61%) !default;\n\n// Typography\n\n$family-sans-serif: BlinkMacSystemFont, -apple-system, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", \"Helvetica\", \"Arial\", sans-serif !default;\n$family-monospace: monospace !default;\n$render-mode: optimizeLegibility !default;\n\n$size-1: 3rem !default;\n$size-2: 2.5rem !default;\n$size-3: 2rem !default;\n$size-4: 1.5rem !default;\n$size-5: 1.25rem !default;\n$size-6: 1rem !default;\n$size-7: 0.75rem !default;\n\n$weight-light: 300 !default;\n$weight-normal: 400 !default;\n$weight-medium: 500 !default;\n$weight-semibold: 600 !default;\n$weight-bold: 700 !default;\n\n// Spacing\n\n$block-spacing: 1.5rem !default;\n\n// Responsiveness\n\n// The container horizontal gap, which acts as the offset for breakpoints\n$gap: 32px !default;\n// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16\n$tablet: 769px !default;\n// 960px container + 4rem\n$desktop: 960px + (2 * $gap) !default;\n// 1152px container + 4rem\n$widescreen: 1152px + (2 * $gap) !default;\n$widescreen-enabled: true !default;\n// 1344px container + 4rem\n$fullhd: 1344px + (2 * $gap) !default;\n$fullhd-enabled: true !default;\n\n// Miscellaneous\n\n$easing: ease-out !default;\n$radius-small: 2px !default;\n$radius: 4px !default;\n$radius-large: 6px !default;\n$radius-rounded: 290486px !default;\n$speed: 86ms !default;\n\n// Flags\n\n$variable-columns: true !default;\n$rtl: false !default;\n"]}

2
dist/js/dashboard.js

File diff suppressed because one or more lines are too long

2
dist/js/dashboard.js.map

File diff suppressed because one or more lines are too long

46
gulpfile.js

@ -9,6 +9,8 @@ const nodemon = require('gulp-nodemon')
const postcss = require('gulp-postcss')
const postcssPresetEnv = require('postcss-preset-env')
const replace = require('gulp-replace')
const sass = require('gulp-sass')
const sassCompiler = require('node-sass')
const sourcemaps = require('gulp-sourcemaps')
const stylelint = require('gulp-stylelint')
const terser = require('gulp-terser')
@ -24,19 +26,20 @@ const postcssPlugins = [
postcssPresetEnv()
]
sass.compiler = sassCompiler
// Minify on production
if (process.env.NODE_ENV !== 'development')
postcssPlugins.push(cssnano())
/** TASKS: LINT */
gulp.task('lint:js', () => {
return gulp.src('./src/**/*.js', {
ignore: './src/libs/**/*'
})
.pipe(eslint())
.pipe(eslint.format('stylish'))
.pipe(eslint.failAfterError())
gulp.task('lint:sass', () => {
return gulp.src('./src/**/*.scss')
.pipe(stylelint({
failAfterError: true,
reporters: [{ formatter: 'verbose', console: true }]
}))
})
gulp.task('lint:css', () => {
@ -49,11 +52,20 @@ gulp.task('lint:css', () => {
}))
})
gulp.task('lint:js', () => {
return gulp.src('./src/**/*.js', {
ignore: './src/libs/**/*'
})
.pipe(eslint())
.pipe(eslint.format('stylish'))
.pipe(eslint.failAfterError())
})
// Set _settle to true, so that if one of the parallel tasks fails,
// the other one won't exit prematurely (this is a bit awkward).
// https://github.com/gulpjs/gulp/issues/1487#issuecomment-466621047
gulp._settle = true
gulp.task('lint', gulp.parallel('lint:js', 'lint:css'))
gulp.task('lint', gulp.parallel('lint:sass', 'lint:css', 'lint:js'))
gulp._settle = false
/** TASKS: CLEAN */
@ -82,6 +94,17 @@ gulp.task('clean', gulp.parallel('clean:css', 'clean:js', 'clean:rest'))
/** TASKS: BUILD */
gulp.task('build:sass', function () {
return gulp.src('./src/**/*.scss', {
ignore: '_*.scss'
})
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(postcss(postcssPlugins))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(dist))
})
gulp.task('build:css', () => {
return gulp.src('./src/**/*.css', {
ignore: './src/libs/fontello/fontello.css'
@ -112,7 +135,7 @@ gulp.task('build:js', () => {
.pipe(gulp.dest(dist))
})
gulp.task('build', gulp.parallel('build:css', 'build:fontello', 'build:js'))
gulp.task('build', gulp.parallel('build:sass', 'build:css', 'build:fontello', 'build:js'))
/** TASKS: VERSION STRINGS */
@ -130,8 +153,9 @@ gulp.task('default', gulp.series('lint', 'clean', 'build', 'exec:bump-versions')
gulp.task('watch:css', () => {
return gulp.watch([
'src/**/*.css'
], gulp.series('clean:css', 'build:css', 'build:fontello'))
'src/**/*.css',
'src/**/*.scss'
], gulp.series('clean:css', 'build:sass', 'build:css', 'build:fontello'))
})
gulp.task('watch:js', () => {

7
package.json

@ -44,7 +44,7 @@
"knex": "~0.21.2",
"multer": "~1.4.2",
"node-fetch": "~2.6.0",
"nunjucks": "~3.2.1",
"nunjucks": "~3.2.2",
"randomstring": "~1.1.5",
"readline": "~1.3.0",
"search-query-parser": "~1.5.5",
@ -54,6 +54,7 @@
},
"devDependencies": {
"browserslist": "~4.13.0",
"bulma": "~0.9.0",
"cssnano": "~4.1.10",
"del": "~5.1.0",
"eslint": "~6.8.0",
@ -71,9 +72,11 @@
"gulp-nodemon": "~2.5.0",
"gulp-postcss": "~8.0.0",
"gulp-replace": "~1.0.0",
"gulp-sass": "~4.1.0",
"gulp-sourcemaps": "~2.6.5",
"gulp-stylelint": "~13.0.0",
"gulp-terser": "~1.2.0",
"gulp-terser": "~1.2.1",
"node-sass": "~4.14.1",
"postcss-preset-env": "~6.7.0",
"stylelint": "~13.6.1",
"stylelint-config-standard": "~20.0.0"

21
public/libs/bulma/LICENSE

@ -1,21 +0,0 @@
The MIT License (MIT)
Copyright (c) 2019 Jeremy Thomas
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

1
public/libs/bulma/bulma.css.map

File diff suppressed because one or more lines are too long

1
public/libs/bulma/bulma.min.css

File diff suppressed because one or more lines are too long

59
src/css/_variables.scss

@ -0,0 +1,59 @@
@charset "utf-8";
/* stylelint-disable-next-line value-keyword-case */
$family-sans-serif: blinkmacsystemfont, -apple-system, "Segoe UI", "Ubuntu", "Roboto", "Oxygen", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
$black: hsl(0, 0%, 0%);
$green: hsl(141, 42%, 53%);
$cyan: hsl(217, 89%, 61%);
$blue: hsl(208, 79%, 51%);
$red: hsl(348, 100%, 61%);
/** Bulma: Variables **/
@import "../../node_modules/bulma/sass/utilities/initial-variables.sass";
@import "../../node_modules/bulma/sass/utilities/functions.sass";
@import "../../node_modules/bulma/sass/utilities/derived-variables.scss";
$scheme-main: $black;
$text: $white-ter;
$strong-color: $grey-lighter;
$link-hover: $link-light;
$hr-background-color: $grey-light;
$border-hover: $link;
$input-focus-border-color: $link-light;
$title-color: $white-ter;
$subtitle-color: $grey-lightest;
$subtitle-strong-color: $grey-lightest;
$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-border-color: $input-border-color;
$input-disabled-color: $input-color;
$input-disabled-placeholder-color: $grey-lightest;
$pagination-background-color: $scheme-main;
$pagination-border-color: $text;
$pagination-color: $text;
$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-border-color: $grey;
$pagination-disabled-color: hsl(0, 0%, 64%);
$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

8
src/css/album.css → src/css/album.scss

@ -1,6 +1,8 @@
.section {
background: none
}
@charset "utf-8";
@import "_variables";
/** Main **/
@media screen and (max-width: 768px) {
.description {

177
src/css/dashboard.css

@ -1,177 +0,0 @@
body {
animation: none
}
#dashboard {
animation: fadeInOpacity 0.5s
}
.section {
background: none
}
.menu-list a {
color: #209cee;
border: 1px solid transparent;
margin-top: -1px
}
.menu-list a.is-active {
color: #fff;
background: #209cee;
border-color: #209cee
}
.menu-list a:not(.is-active):hover {
color: #209cee;
background: none;
border-color: #209cee
}
.menu-list a[disabled] {
color: #7a7a7a;
pointer-events: none
}
.menu-list a.is-loading::after {
animation: spinAround 0.5s infinite linear;
border: 2px solid #dbdbdb;
border-radius: 290486px;
border-right-color: transparent;
border-top-color: transparent;
content: "";
display: block;
height: 1em;
width: 1em;
right: calc(0% + (1em / 2));
top: calc(50% - (1em / 2));
position: absolute !important
}
ul#albumsContainer {
border-left: 0;
padding-left: 0
}
ul#albumsContainer li {
border-left: 2px solid #585858;
padding-left: 0.75em;
animation: fadeInOpacity 0.5s
}
#page.fade-in {
animation: fadeInOpacity 0.5s
}
.pagination {
margin-bottom: 1.25rem
}
.pagination a:not([disabled]) {
color: #eff0f1;
border-color: #eff0f1;
background: none
}
.pagination a.pagination-link:hover,
.pagination a.pagination-next:not([disabled]):hover,
.pagination a.pagination-previous:not([disabled]):hover {
color: #000;
background-color: #eff0f1;
border-color: #eff0f1
}
.pagination a.pagination-link.is-current {
color: #000;
background-color: #eff0f1
}
.pagination a.is-loading:hover::after,
.pagination a.pagination-link.is-current.is-loading::after {
border-bottom-color: #000;
border-left-color: #000
}
li[data-action="page-ellipsis"] {
cursor: pointer
}
.label {
color: #bdc3c7
}
.menu-list li ul {
border-left-color: #898b8d
}
.image-container .checkbox {
position: absolute;
top: 11px;
left: 11px
}
.image-container .controls {
display: flex;
position: absolute;
top: 11px;
right: 11px
}
.image-container .controls .button {
border-radius: 0
}
.image-container .controls .button:not(:active):not(:hover) {
color: #fff;
background-color: #0000008f
}
.no-touch .image-container .checkbox {
opacity: 0.5
}
.no-touch .image-container .controls,
.no-touch .image-container .details {
opacity: 0
}
.no-touch .image-container:hover .checkbox,
.no-touch .image-container:hover .controls,
.no-touch .image-container:hover .details {
opacity: 1
}
#page {
/* fix overflow issue with flex */
min-width: 0
}
.is-linethrough {
text-decoration: line-through
}
#dashboard.is-loading *[data-action],
#dashboard.is-loading #menu .menu-list a {
cursor: progress
}
#dashboard.is-loading *[data-action$="-help"],
#dashboard.is-loading .table *[data-action],
#dashboard.is-loading .column.bulk-operations *[data-action],
#dashboard.is-loading .column.exclusive-operations *[data-action] {
cursor: pointer
}
#statistics tr *:nth-child(1) {
width: 50%
}
.expirydate {
color: #bdc3c7
}
.table .originalname {
max-width: 200px;
text-overflow: ellipsis;
overflow: hidden
}

196
src/css/dashboard.scss

@ -0,0 +1,196 @@
@charset "utf-8";
@import "_variables";
/** Main **/
body {
animation: none
}
#dashboard {
animation: fadeInOpacity 0.5s
}
.menu-label {
color: $grey-light
}
.menu-list {
a {
color: $link;
border: 1px solid transparent;
margin-top: -1px;
&.is-active {
color: $white;
background: $link;
border-color: $link
}
&:not(.is-active):hover {
color: $link;
background: none;
border-color: $link
}
&[disabled] {
color: $grey;
pointer-events: none
}
&.is-loading::after {
animation: spinAround 0.5s infinite linear;
border: 2px solid $white-ter;
border-radius: 290486px;
border-right-color: transparent;
border-top-color: transparent;
content: "";
display: block;
height: 1em;
width: 1em;
right: calc(0% + (1em / 2));
top: calc(50% - (1em / 2));
position: absolute !important
}
}
li ul {
border-left: 0;
padding-left: 0;
li {
border-left: 2px solid $grey-light;
padding-left: 0.75em
}
}
#albumsContainer li {
animation: fadeInOpacity 0.5s
}
}
#page.fade-in {
animation: fadeInOpacity 0.5s
}
.pagination {
margin-bottom: 1.25rem
}
.pagination-previous,
.pagination-next,
.pagination-link {
&:not([disabled]) {
background-color: $pagination-background-color;
&:hover {
background-color: $pagination-hover-background-color
}
}
&[disabled] {
opacity: 1
}
}
.pagination-link.is-current {
color: $pagination-background-color;
background-color: $pagination-color;
border-color: $pagination-border-color;
&.is-loading::after {
border-bottom-color: $grey-dark;
border-left-color: $grey-dark
}
}
li[data-action="page-ellipsis"] {
cursor: pointer
}
.label {
color: $grey-lightest
}
#page {
/* fix overflow issue with flex */
min-width: 0
}
.is-linethrough {
text-decoration: line-through
}
#dashboard.is-loading {
*[data-action],
#menu .menu-list a {
cursor: progress
}
*[data-action$="-help"],
.table *[data-action],
.column.bulk-operations *[data-action],
.column.exclusive-operations *[data-action] {
cursor: pointer
}
}
#statistics tr *:nth-child(1) {
width: 50%
}
.expirydate {
color: $grey-lightest
}
.table .originalname {
max-width: 200px;
text-overflow: ellipsis;
overflow: hidden
}
/** Thumbs extension **/
.image-container {
.checkbox {
position: absolute;
top: 11px;
left: 11px
}
.controls {
display: flex;
position: absolute;
top: 11px;
right: 11px;
.button {
border-radius: 0;
&:not(:active):not(:hover) {
color: $white;
background-color: rgba(0, 0, 0, 143)
}
}
}
}
.no-touch .image-container {
.checkbox {
opacity: 0.5
}
.controls,
.details {
opacity: 0
}
&:hover {
.checkbox,
.controls,
.details {
opacity: 1
}
}
}

232
src/css/home.css

@ -1,232 +0,0 @@
#b {
width: 200px;
height: 200px;
border-radius: 100%;
display: inline-block;
margin-bottom: 40px;
vertical-align: top;
animation: fadeInOpacity 0.5s
}
.logo {
max-height: 200px
}
.logo.is-2x {
display: none
}
#dropzone * {
pointer-events: none
}
#tokenContainer,
#panel {
display: none
}
#maxSize {
font-size: 1rem
}
.dz-preview .dz-details {
display: flex
}
.dz-preview .dz-details .dz-size,
.dz-preview .dz-details .dz-filename {
flex: 1
}
.dz-preview img,
.dz-preview .dz-success-mark,
.dz-preview .dz-error-mark {
display: none
}
.uploads {
display: flex;
flex-direction: column
}
.uploads.is-reversed {
flex-direction: column-reverse
}
.uploads > div {
animation: fadeInOpacity 0.5s;
margin: 0.75rem !important
}
.uploads.is-reversed > div {
flex: 0 0 auto
}
.uploads > div:first-child {
margin-top: 1.5rem
}
.uploads.nojs {
margin-bottom: 0
}
.uploads > div > .icon:not(.icon-block) {
color: #209cee
}
.uploads > div > .icon.icon-block {
color: #da4453
}
.uploads .descriptive-progress {
color: #bdc3c7
}
.uploads img {
max-width: 200px
}
.name {
font-size: 1rem;
color: #eff0f1;
word-break: break-all
}
.link > a {
word-break: break-all
}
.clipboard-mobile {
margin-top: 5px
}
#albumDiv {
animation: fadeInOpacity 0.5s
}
#albumDiv .control {
text-align: inherit
}
#linksColumn {
margin-top: -0.25rem;
margin-left: -0.25rem;
margin-right: -0.25rem;
animation: fadeInOpacity 0.5s
}
#linksColumn .column {
padding: 0.25rem
}
#linksColumn > span {
padding: 0 0.3rem;
color: #7f8c8d
}
.git-commit a {
display: inline-block;
word-break: break-all
}
#tabs {
margin-bottom: 1rem;
animation: fadeInOpacity 0.5s
}
#tabs ul {
border-bottom: 1px solid #585858
}
#tabs li a {
color: #bdc3c7;
border-bottom-color: #585858
}
#tabs.is-boxed li.is-active a {
color: #209cee;
background: #000;
border-color: #585858;
border-bottom-color: #000
}
#tabs.is-boxed li:not(.is-active) a:hover {
background: #585858
}
.tab-content {
margin-bottom: -0.75rem;
animation: fadeInOpacity 0.5s
}
#tab-config.tab-content form {
margin-bottom: 0.75rem
}
#urlMaxSize {
font-weight: bold
}
input[type="file"].is-fullwidth {
width: 100%
}
/** Render **/
.render {
position: fixed;
right: 0;
bottom: 0;
font-size: 1rem;
color: #bdc3c7;
cursor: pointer;
animation: floatUp 1.5s cubic-bezier(0, 0.71, 0.29, 1) 0.5s 1 normal both
}
.render.button {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
right: 1%;
opacity: 0.25;
transition: opacity 0.25s
}
.render.button:hover {
opacity: 1
}
/** Newsfeed **/
#newsfeed {
position: absolute;
top: 0;
right: 0;
left: 0;
padding: 1.5rem 1.5rem 0 1.5rem
}
#newsfeed .column:last-child {
animation: floatUp 1.5s cubic-bezier(0, 0.71, 0.29, 1) 0.5s 1 normal both
}
#newsfeed .notification {
display: block;
padding: 0.75rem 2.25rem 0.75rem 1.125rem;
margin-bottom: 1.125rem
}
#newsfeed .notification > .delete {
top: 0.75rem
}
#newsfeed .notification .content {
font-size: 0.75rem
}
#newsfeed .news-title {
font-weight: bold
}
#newsfeed .news-date.is-recent-week {
font-weight: bold
}

224
src/css/home.scss

@ -0,0 +1,224 @@
@charset "utf-8";
@import "_variables";
/** Main **/
#b {
width: 200px;
height: 200px;
border-radius: 100%;
display: inline-block;
margin-bottom: 40px;
vertical-align: top;
animation: fadeInOpacity 0.5s
}
.logo {
max-height: 200px;
&.is-2x {
display: none
}
}
#dropzone * {
pointer-events: none
}
#tokenContainer,
#panel {
display: none
}
#maxSize {
font-size: 1rem
}
.dz-preview {
.dz-details {
display: flex;
.dz-size,
.dz-filename {
flex: 1
}
}
img,
.dz-success-mark,
.dz-error-mark {
display: none
}
}
.uploads {
display: flex;
flex-direction: column;
&.is-reversed {
flex-direction: column-reverse
}
> div {
animation: fadeInOpacity 0.5s;
margin: 0.75rem !important;
&:first-child {
margin-top: 1.5rem
}
> .icon:not(.icon-block) {
color: $blue
}
> .icon.icon-block {
color: $danger
}
}
&.is-reversed > div {
flex: 0 0 auto
}
&.nojs {
margin-bottom: 0
}
.descriptive-progress {
color: $grey-lightest
}
img {
max-width: 200px
}
}
.name {
font-size: 1rem;
color: $white-ter;
word-break: break-all
}
.link > a {
word-break: break-all
}
.clipboard-mobile {
margin-top: 5px
}
#albumDiv {
animation: fadeInOpacity 0.5s;
.control {
text-align: inherit
}
}
#linksColumn {
margin-top: -0.25rem;
margin-left: -0.25rem;
margin-right: -0.25rem;
animation: fadeInOpacity 0.5s;
.column {
padding: 0.25rem
}
> span {
padding: 0 0.3rem;
color: $grey-light
}
}
.git-commit a {
display: inline-block;
word-break: break-all
}
.hero .tabs ul {
border-bottom: 1px solid $tabs-boxed-link-active-border-color
}
#tabs {
margin-bottom: 1rem;
animation: fadeInOpacity 0.5s;
.tab-content {
margin-bottom: -0.75rem;
animation: fadeInOpacity 0.5s
}
}
#tab-config.tab-content form {
margin-bottom: 0.75rem
}
#urlMaxSize {
font-weight: bold
}
input[type="file"].is-fullwidth {
width: 100%
}
/** Render **/
.render {
position: fixed;
right: 0;
bottom: 0;
font-size: 1rem;
color: $grey-lightest;
cursor: pointer;
animation: floatUp 1.5s cubic-bezier(0, 0.71, 0.29, 1) 0.5s 1 normal both;
&.button {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
right: 1%;
opacity: 0.25;
transition: opacity 0.25s;
&:hover {
opacity: 1
}
}
}
/** Newsfeed **/
#newsfeed {
position: absolute;
top: 0;
right: 0;
left: 0;
padding: 1.5rem 1.5rem 0 1.5rem;
.column:last-child {
animation: floatUp 1.5s cubic-bezier(0, 0.71, 0.29, 1) 0.5s 1 normal both
}
.notification {
display: block;
padding: 0.75rem 2.25rem 0.75rem 1.125rem;
margin-bottom: 1.125rem;
> .delete {
top: 0.75rem
}
.content {
font-size: 0.75rem
}
}
.news-title {
font-weight: bold
}
.news-date.is-recent-week {
font-weight: bold
}
}

348
src/css/style.css

@ -1,348 +0,0 @@
/** Animations **/
@-webkit-keyframes fadeInOpacity {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@keyframes fadeInOpacity {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@-webkit-keyframes floatUp {
0% {
opacity: 0;
transform: scale(0.86)
}
25% {
opacity: 100
}
67% {
transform: scale(1)
}
100% {
transform: scale(1)
}
}
@keyframes floatUp {
0% {
opacity: 0;
transform: scale(0.86)
}
25% {
opacity: 100
}
67% {
transform: scale(1)
}
100% {
transform: scale(1)
}
}
/** General **/
html {
background-color: #000;
overflow-y: auto
}
body {
color: #eff0f1;
animation: fadeInOpacity 0.5s
}
a {
color: #209cee
}
a:hover {
color: #67c3ff
}
hr {
background-color: #585858
}
code,
.message-body code {
background-color: #000;
border-radius: 5px;
font-size: 1rem
}
.subtitle {
color: #bdc3c7
}
.subtitle strong {
color: #bdc3c7
}
.title,
.subtitle.is-brighter,
.subtitle.is-brighter strong {
color: #eff0f1
}
.input,
.select select,
.textarea {
color: #eff0f1;
border-color: #585858;
background-color: #000
}
.input::-moz-placeholder,
.textarea::-moz-placeholder {
color: #bdc3c7
}
.input::-webkit-input-placeholder,
.textarea::-webkit-input-placeholder {
color: #bdc3c7
}
.input:-moz-placeholder,
.textarea:-moz-placeholder {
color: #bdc3c7
}
.input:-ms-input-placeholder,
.textarea:-ms-input-placeholder {
color: #bdc3c7
}
.input:not([disabled]):hover,
.select fieldset:not([disabled]) select:hover,
.select select:not([disabled]):hover,
.textarea:not([disabled]):hover,
fieldset:not([disabled]) .input:hover,
fieldset:not([disabled]) .select select:hover,
fieldset:not([disabled]) .textarea:hover {
border-color: #209cee
}
.input.is-active,
.input.is-focused,
.input:active,
.input:focus,
.textarea.is-active,
.textarea.is-focused,
.textarea:active,
.textarea:focus {
border-color: #209cee
}
.input[disabled],
.select fieldset[disabled] select,
.select select[disabled],
.textarea[disabled],
fieldset[disabled] .input,
fieldset[disabled] .select select,
fieldset[disabled] .textarea {
border-color: #585858;
background-color: #2f2f2f
}
.label {
color: #eff0f1;
font-weight: normal
}
.help {
color: #bdc3c7
}
.progress {
background-color: #585858
}
.button.is-info.is-hovered [class^="icon-"]::before,
.button.is-info.is-hovered [class*=" icon-"]::before,
.button.is-info:hover [class^="icon-"]::before,
.button.is-info:hover [class*=" icon-"]::before {
fill: #fff
}
.button.is-dangerish {
background-color: #ff7043;
border-color: transparent;
color: rgba(0, 0, 0, 0.7)
}
.button.is-dangerish.is-hovered,
.button.is-dangerish:not([disabled]):hover {
background-color: #ff8a65;
border-color: transparent;
color: rgba(0, 0, 0, 0.7)
}
.button.is-dangerish.is-active,
.button.is-dangerish:not([disabled]):active {
background-color: #ff5722;
border-color: transparent;
color: rgba(0, 0, 0, 0.7)
}
.button.is-dangerish.is-outlined {
background-color: transparent;
border-color: #ff7043;
color: #ff7043
}
.button.is-dangerish.is-outlined.is-focused,
.button.is-dangerish.is-outlined.is-hovered,
.button.is-dangerish.is-outlined:not([disabled]):focus,
.button.is-dangerish.is-outlined:not([disabled]):hover {
background-color: #ff7043;
border-color: #ff7043;
color: rgba(0, 0, 0, 0.7)
}
.button.is-wrappable {
white-space: break-spaces;
min-height: 2.25em;
height: auto
}
.checkbox:hover,
.radio:hover {
color: #7f8c8d
}
.select:not(.is-multiple):not(.is-loading)::after {
border-color: #eff0f1
}
.select:not(.is-multiple):not(.is-loading):hover::after {
border-color: #eff0f1
}
.select select[disabled]:hover,
fieldset[disabled] .select select:hover {
border-color: #585858
}
.message {
background-color: #2f2f2f
}
.message-body {
color: #eff0f1;
border: 0
}
.table {
color: #bdc3c7;
background-color: #000
}
.table.is-narrow {
font-size: 0.75rem
}
.table.is-hoverable tbody tr:not(.is-selected):hover {
background-color: #2f2f2f
}
.table td,
.table th {
white-space: nowrap;
vertical-align: middle;
border-bottom: 1px solid #585858
}
.table th {
color: #eff0f1;
height: 2.25em;
font-weight: normal
}
.table th.capitalize {
text-transform: capitalize
}
.table thead td,
.table thead th {
color: #eff0f1;
background-color: #383838;
border-bottom: 0;
height: 31px
}
.table tbody tr:last-child td,
.table tbody tr:last-child th {
border-bottom-width: 1px
}
.table .cell-indent {
padding-left: 2.25em
}
/** Cookie Consent **/
.cc-window {
font-family: inherit !important
}
.cc-link {
padding: 0 !important
}
/* floating button's bottom offset + height + bottom offset */
.section.has-extra-bottom-padding {
padding-bottom: 6.5rem