f0ckv2/public/css/f0ck.css

/* f0ck.me Stylesheet v2 */
/* Created in April of 2019 by the notorious and super sexy Alman Abu Ottermann */
/* This style makes use of the Milligram CSS framework and might not work as expected without! */
/* Contact: sirx @ f0ck . it */
/* This style is not meant to be used anywhere else than on f0ck.me or any other f0ck related website! */

/*Theming*/
:root {
  --primary-color: #302AE6;
  --secondary-color: #536390;
  --font-color: #424242;
  --bg-color: #090f13;
  --heading-color: #292922;
}

[data-theme="light"] {
  --primary-color: #9A97F3;
  --secondary-color: #818cab;
  --font-color: #e1e1ff;
  --bg-color: black;
  --heading-color: #818cab;
}
/*End of Theming*/

/* Body */
body {
  background-color: var(--bg-color);
  color: var(--font-color);
  /*overflow: hidden;*/
}
/* End of Body */

/* Fieldset & Legend
legend {
  border-radius: 2px;
  background: black;
  font-family: monospace;
  border: 1px white solid;
  color: white;
}

fieldset {
  border: 1px solid white;
  padding: 20px;
  background: black;
}
End of Fieldset & Legend */

/* NAV */
button {
  background: #000101;
  border: 1px solid white;
  border-radius: 0px;
  vertical-align: bottom !important;
}

img.logo {
  height: 48px;
}
/* END OF NAV */

/* f0ck Grid! */
.f0ckgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  grid-gap: 20px;
  align-items: stretch;
}

.f0ckgrid img {
  box-shadow: 2px 2px 6px 0px rgb(0, 0, 0);
  max-width: 100%;
}
/* End of f0ck Grid! */

/* Image Thumbs */
a img.thumb {
  border: 2px solid black;
  transition: .1s ease-out;
}

img.thumb:hover {
     box-shadow: 0px 0px 0px 2px #dac8d2;
  border-radius: 5px;
  transition: .1s ease-in;
}
/* End of Image Thumbs */

/* List Styling
ul.f0ck-links {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

li.post {
  width: 128px;
  height: 128px;
  margin-top: 5px;
  line-height: 128px;
  float: left;
  margin: 5px;
  transition: .1s ease-out;
}

li.post:hover {
  box-shadow: 0px 0px 0px 2px #dac8d2;
  border-radius: 5px;
  transition: .1s ease-in;
}

li.post:hover img {
border-radius: 5px;
opacity: 0.8;
}
End of List Styling */

/* MISC */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}