[chore] Relax custom CSS length limitation a bit

[tsmethurst]

Initially we set this to 5,000 characters, but this is rather stringent when you start doing stuff like animating, setting keyframes, etc.

We should consider bumping this limit higher, maybe to 10k or 20k characters, to allow users to make rich animations and stuff if they wanna.

Relevant line: https://github.com/superseriousbusiness/gotosocial/blob/main/internal/validate/formvalidation.go#L44

[tsmethurst]

For reference, the following is 5,207 characters, and css will increase until morale improves

/* Theme colors */
:root {
  --link-fg: var(--gray1);
  --bg-translucent: rgba(255, 255, 255, 0.5);
  --bg-nearly-opaque: rgba(255, 255, 255, 0.8);
  --trans-flag: linear-gradient(#5BCEFA, #F5A9B8, #FFFFFF, #F5A9B8, #5BCEFA);
  font-size: large;
}

/* Funky bounce animation courtesty of https://stackoverflow.com/a/29786270 */
@-webkit-keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
  }
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
  }
}

/* Define + use cool background animation */
@-webkit-keyframes BackgroundAnimation {
  0%{background-position:76% 0%}
  50%{background-position:25% 100%}
  100%{background-position:76% 0%}
}

@keyframes BackgroundAnimation {
  0%{background-position:76% 0%}
  50%{background-position:25% 100%}
  100%{background-position:76% 0%}
}

.page {
  background: var(--trans-flag);
  background-size: 1000% 1000%;
  -webkit-animation: BackgroundAnimation 60s ease infinite;
  animation: BackgroundAnimation 60s ease infinite;
}

/* Deploy atkinson hyperlegible if present on server */
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-weight: 400;
  src: url(/assets/Atkinson-Hyperlegible-Regular-102.ttf) format('truetype');
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  font-weight: bold;
  src: url(/assets/Atkinson-Hyperlegible-Bold-102.ttf) format('truetype');
}

html, body {
  font-family: "Atkinson Hyperlegible", "Noto Sans", sans-serif;
  color: var(--gray1);
}

/* Instance display name */
header a h1 {
  color: var(--gray1);
}

/* Header card */
.profile .header {
  background: var(--bg-translucent);
  color: var(--gray1);
  border: 1px solid var(--gray1);
}

/* Header card username */
.profile .header .basic-info .username {
  color: var(--gray1);
}

/* Make avatars bounce on mouseover */
.avatar:hover {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* About + Pinned posts headers */
.profile .col-header {
  background: var(--bg-translucent);
  border: 1px solid var(--gray1);
}

.profile .about-user .col-header {
  border-bottom: none;
  margin-bottom: 0;
}

/* Make about sections transparent */
.profile .about-user .fields, .profile .about-user .bio, .profile .about-user .accountstats {
  background: var(--bg-translucent);
  border-left: 1px solid var(--gray1);
  border-right: 1px solid var(--gray1);
}

/* Fiddle around with borders on about sections */
.profile .about-user .fields .field:first-child {
  border-top: 1px dashed var(--gray1);
}
.profile .about-user .fields .field {
  border-bottom: 1px dashed var(--gray1);
}
.profile .about-user .accountstats {
  border-top: 1px dashed var(--gray1);
  border-bottom: 1px solid var(--gray1);
}

/* Statuses + threads */
/* Main status body */
.toot, .toot.expanded {
  background: var(--bg-translucent);
}

/* Code snippets */
.toot .text .content pre, .toot .text .content code {
  background: var(--bg-nearly-opaque);
}

/* Remove black border from media */
.toot .media .media-wrapper {
  border: 0.15rem solid transparent;
}

/* Status info bars */
.toot .info, .toot.expanded .info {
  background: var(--bg-nearly-opaque);
  color: var(--gray1);
}

[NyaaaWhatsUpDoc]

I think we should consider not storing this in the database anymore considering these possible sizes :p. Not a now problem but something we could consider changing in the future.

[tsmethurst]

Ahh, we could keep the css file in the storage dir you mean? Like that?

[tsmethurst]

Made custom css length configurable in #1827 , and opened an issue here for storing css in the fileserver: #1830