Skip to content

Watercss by opsaaaaa

Homepage Write a review Install Get Stylus

Details

Authoropsaaaaa

LicenseNo License

Categorywatercss

Created

Updated

Size40 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Literally just watercss

Notes

Userstyle doesn't have notes.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name watercss
@namespace      userstyles.world
@version        1.0.0
==/UserStyle== */
@-moz-document domain("heerdebeer.org") {
/**
 * Automatic version:
 * Uses light theme by default but switches to dark theme
 * if a system-wide theme preference is set on the user's device.
 */

:root {
  --background-body: #fff!important;
  --background: #efefef!important;
  --background-alt: #f7f7f7!important;
  --selection: #9e9e9e!important;
  --text-main: #363636!important;
  --text-bright: #000!important;
  --text-muted: #70777f!important;
  --links: #0076d1!important;
  --focus: #0096bfab!important;
  --border: #dbdbdb!important;
  --code: #000!important;
  --animation-duration: 0.1s!important;
  --button-base: #d0cfcf!important;
  --button-hover: #9b9b9b!important;
  --scrollbar-thumb: rgb(170, 170, 170)!important;
  --scrollbar-thumb-hover: var(--button-hover)!important;
  --form-placeholder: #949494!important;
  --form-text: #1d1d1d!important;
  --variable: #39a33c!important;
  --highlight: #ff0!important;
  --select-arrow: url("data:image/svg+xml!important;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23161f27'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E")!important;
}

@media (prefers-color-scheme: dark) {
:root {
  --background-body: #1f2833!important;
  --background: #161f27!important;
  --background-alt: #1a242f!important;
  --selection: #1c76c5!important;
  --text-main: #dbdbdb!important;
  --text-bright: #fff!important;
  --text-muted: #a9b1ba!important;
  --links: #41adff!important;
  --focus: #0096bfab!important;
  --border: #526980!important;
  --code: #ffbe85!important;
  --animation-duration: 0.1s!important;
  --button-base: #0c151c!important;
  --button-hover: #040a0f!important;
  --scrollbar-thumb: var(--button-hover)!important;
  --scrollbar-thumb-hover: rgb(0, 0, 0)!important;
  --form-placeholder: #a9a9a9!important;
  --form-text: #fff!important;
  --variable: #d941e2!important;
  --highlight: #efdb43!important;
  --select-arrow: url("data:image/svg+xml!important;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23efefef'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E")!important;
}
}

html {
  scrollbar-color: rgb(170, 170, 170) #fff!important;
  scrollbar-color: var(--scrollbar-thumb) var(--background-body)!important;
  scrollbar-width: thin!important;
}

@media (prefers-color-scheme: dark) {

  html {
  scrollbar-color: #040a0f #202b38!important;
  scrollbar-color: var(--scrollbar-thumb) var(--background-body)!important;
  }
}

@media (prefers-color-scheme: dark) {

  html {
  scrollbar-color: #040a0f #202b38!important;
  scrollbar-color: var(--scrollbar-thumb) var(--background-body)!important;
  }
}

@media (prefers-color-scheme: dark) {

  html {
  scrollbar-color: #040a0f #202b38!important;
  scrollbar-color: var(--scrollbar-thumb) var(--background-body)!important;
  }
}

@media (prefers-color-scheme: dark) {

  html {
  scrollbar-color: #040a0f #202b38!important;
  scrollbar-color: var(--scrollbar-thumb) var(--background-body)!important;
  }
}

@media (prefers-color-scheme: dark) {

  html {
  scrollbar-color: #040a0f #202b38!important;
  scrollbar-color: var(--scrollbar-thumb) var(--background-body)!important;
  }
}

@media (prefers-color-scheme: dark) {

  html {
  scrollbar-color: #040a0f #202b38!important;
  scrollbar-color: var(--scrollbar-thumb) var(--background-body)!important;
  }
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif!important;
  line-height: 1.4!important;
  max-width: 800px!important;
  margin: 20px auto!important;
  padding: 0 10px!important;
  word-wrap: break-word!important;
  color: #363636!important;
  color: var(--text-main)!important;
  background: #fff!important;
  background: var(--background-body)!important;
  text-rendering: optimizeLegibility!important;
}

@media (prefers-color-scheme: dark) {

  body {
  background: #202b38!important;
  background: var(--background-body)!important;
  }
}

@media (prefers-color-scheme: dark) {

  body {
  color: #dbdbdb!important;
  color: var(--text-main)!important;
  }
}

button {
  transition:
    background-color 0.1s linear,
    border-color 0.1s linear,
    color 0.1s linear,
    box-shadow 0.1s linear,
    transform 0.1s ease!important;
  transition:
    background-color var(--animation-duration) linear,
    border-color var(--animation-duration) linear,
    color var(--animation-duration) linear,
    box-shadow var(--animation-duration) linear,
    transform var(--animation-duration) ease!important;
}

@media (prefers-color-scheme: dark) {

  button {
  transition:
    background-color 0.1s linear,
    border-color 0.1s linear,
    color 0.1s linear,
    box-shadow 0.1s linear,
    transform 0.1s ease!important;
  transition:
    background-color var(--animation-duration) linear,
    border-color var(--animation-duration) linear,
    color var(--animation-duration) linear,
    box-shadow var(--animation-duration) linear,
    transform var(--animation-duration) ease!important;
  }
}

input {
  transition:
    background-color 0.1s linear,
    border-color 0.1s linear,
    color 0.1s linear,
    box-shadow 0.1s linear,
    transform 0.1s ease!important;
  transition:
    background-color var(--animation-duration) linear,
    border-color var(--animation-duration) linear,
    color var(--animation-duration) linear,
    box-shadow var(--animation-duration) linear,
    transform var(--animation-duration) ease!important;
}

@media (prefers-color-scheme: dark) {

  input {
  transition:
    background-color 0.1s linear,
    border-color 0.1s linear,
    color 0.1s linear,
    box-shadow 0.1s linear,
    transform 0.1s ease!important;
  transition:
    background-color var(--animation-duration) linear,
    border-color var(--animation-duration) linear,
    color var(--animation-duration) linear,
    box-shadow var(--animation-duration) linear,
    transform var(--animation-duration) ease!important;
  }
}

textarea {
  transition:
    background-color 0.1s linear,
    border-color 0.1s linear,
    color 0.1s linear,
    box-shadow 0.1s linear,
    transform 0.1s ease!important;
  transition:
    background-color var(--animation-duration) linear,
    border-color var(--animation-duration) linear,
    color var(--animation-duration) linear,
    box-shadow var(--animation-duration) linear,
    transform var(--animation-duration) ease!important;
}

@media (prefers-color-scheme: dark) {

  textarea {
  transition:
    background-color 0.1s linear,
    border-color 0.1s linear,
    color 0.1s linear,
    box-shadow 0.1s linear,
    transform 0.1s ease!important;
  transition:
    background-color var(--animation-duration) linear,
    border-color var(--animation-duration) linear,
    color var(--animation-duration) linear,
    box-shadow var(--animation-duration) linear,
    transform var(--animation-duration) ease!important;
  }
}

h1 {
  font-size: 2.2em!important;
  margin-top: 0!important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 12px!important;
  margin-top: 24px!important;
}

h1 {
  color: #000!important;
  color: var(--text-bright)!important;
}

@media (prefers-color-scheme: dark) {

  h1 {
  color: #fff!important;
  color: var(--text-bright)!important;
  }
}

h2 {
  color: #000!important;
  color: var(--text-bright)!important;
}

@media (prefers-color-scheme: dark) {

  h2 {
  color: #fff!important;
  color: var(--text-bright)!important;
  }
}

h3 {
  color: #000!important;
  color: var(--text-bright)!important;
}

@media (prefers-color-scheme: dark) {

  h3 {
  color: #fff!important;
  color: var(--text-bright)!important;
  }
}

h4 {
  color: #000!important;
  color: var(--text-bright)!important;
}

@media (prefers-color-scheme: dark) {

  h4 {
  color: #fff!important;
  color: var(--text-bright)!important;
  }
}

h5 {
  color: #000!important;
  color: var(--text-bright)!important;
}

@media (prefers-color-scheme: dark) {

  h5 {
  color: #fff!important;
  color: var(--text-bright)!important;
  }
}

h6 {
  color: #000!important;
  color: var(--text-bright)!important;
}

@media (prefers-color-scheme: dark) {

  h6 {
  color: #fff!important;
  color: var(--text-bright)!important;
  }
}

strong {
  color: #000!important;
  color: var(--text-bright)!important;
}

@media (prefers-color-scheme: dark) {

  strong {
  color: #fff!important;
  color: var(--text-bright)!important;
  }
}

h1,
h2,
h3,
h4,
h5,
h6,
b,
strong,
th {
  font-weight: 600!important;
}

q::before {
  content: none!important;
}

q::after {
  content: none!important;
}

blockquote {
  border-left: 4px solid #0096bfab!important;
  border-left: 4px solid var(--focus)!important;
  margin: 1.5em 0!important;
  padding: 0.5em 1em!important;
  font-style: italic!important;
}

@media (prefers-color-scheme: dark...

Reviews

No reviews yet.