NewStyle.css

/* -- Main styling for fsh pages -- */
@import url("https://fonts.googleapis.com/css?family=Lexend&display=swap");

/* -- Colors -- */
:root {
  --bg-dim: #070707;
  --bg: #181818;
  --bg-light: #333333;

  --text: #ffffff;
  --text-dim: #bbbbbb;

  --sky-300: #7dd3fc;
  --sky-400: #38bdf8;
}

/* -- General text/background styling -- */
body {
  color: var(--text);
  caret-color: transparent;
  background-color: var(--bg);
  font-family: 'Lexend', 'Arial';
}
img {
  user-drag: none;
  user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
}
h1, h2, p {
  margin: 2px;
}
h3, h4, h5, h6 {
  margin-bottom: 2px;
  margin-top: 1em;
}
details {
  cursor: pointer;
}
svg {
  fill: var(--text);
  stroke: var(--text);
  transition: 500ms;
}

/* -- Fsh ownership title -- */
.title {
  font-size: 40px;
  margin-top: -15px;
  color: var(--text);
  text-decoration: hidden;
}
a:has(.title) {
  text-decoration: none;
  display: block;
  width: fit-content;
  margin-inline: auto;
}
.title h1 {
  margin: 0px;
  font-weight: normal;
  margin-top: -12px;
}

/* -- Dialog -- */
dialog {
  padding: 10px;
  color: var(--text);
  border-radius: 1rem;
  background-color: var(--bg);
  border: 2px var(--text) solid;
}
::backdrop {
  backdrop-filter: blur(2px);
}

/* -- Scrollbar -- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: none;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: var(--text-dim);
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--bg-light);
}

/* -- Links -- */
a {
  cursor: pointer;
  color: var(--sky-300);
}
a:hover {
  color: var(--sky-400);
}

/* -- Inputs -- */
button {
  padding: 5px;
  outline: none;
  font-weight: bold;
  transition: 500ms;
  color: var(--text);
  border-radius: 0.7rem;
  border: 2px var(--text) solid;
  background-color: transparent;
}
button:hover {
  cursor: pointer;
  color: var(--bg);
  background-color: var(--text);
}
button:hover svg {
  fill: var(--bg);
  stroke: var(--bg);
}
input:not([type=range]), textarea {
  margin: 5px;
  padding: 5px;
  outline: none;
  font-size: 15px;
  font-weight: bold;
  caret-color: auto;
  color: var(--text);
  border-radius: 0.7rem;
  border: 2px var(--text) solid;
  background-color: transparent;
}
input[type=file]::file-selector-button {
  outline: none;
  font-weight: bold;
  caret-color: auto;
  color: var(--text);
  border-radius: 0.3rem;
  border: 2px var(--text) solid;
  background-color: transparent;
}
select {
  margin: 5px;
  padding: 5px;
  outline: none;
  font-size: 15px;
  font-weight: bold;
  color: var(--text);
  border-radius: 0.7rem;
  border: 2px var(--text) solid;
  background-color: transparent;
}
option {
  background-color: var(--bg);
}
option:disabled {
  background-color: var(--bg-dim);
}
button:focus-within, input:focus-within, textarea:focus-within, select:focus-within {
  outline: 1px solid var(--text);
}