Skip to content

SmoothKirka by mcgames75

Write a review Install Get Stylus

Details

Authormcgames75

Licensemcgames75

Categorykirka.io

Created

Updated

Size31 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Smooth Theme For Kirka

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         SmoothKirka
@version      20230924.17.58
@namespace    ?
==/UserStyle== */

@-moz-document url-prefix("https://kirka.io/") {
body {
  /* Colors */
  --primary-1: hsl(0, 84%, 56%);
  --secondary-1: hsl(160, 6%, 9%);
  --secondary-2: hsl(340, 7%, 18%);
  --secondary-3: hsl(150, 7%, 6%);
  --secondary-4: hsl(160, 5%, 11%);
  --secondary-5: hsl(160, 5%, 11%);
  --secondary-6: hsl(345, 6%, 13%);
  --secondary-7: hsl(0, 0%, 6%);
  --hover: hsla(0, 0%, 100%, 0.059);
  --background: hsla(0, 0%, 16%, 0.25);
  --background-dark: hsla(0, 0%, 0%, 0.329);

  /* Box-Model */
  --right-border: 2px solid var(--primary-1);
  --corners: linear-gradient(to right, var(--primary-1) 2px, transparent 2px) 0
      100%,
    linear-gradient(to left, var(--primary-1) 2px, transparent 2px) 100% 100%,
    linear-gradient(to top, var(--primary-1) 2px, transparent 2px) 0 100%,
    linear-gradient(to top, var(--primary-1) 2px, transparent 2px) 100% 100%,
    linear-gradient(to right, var(--primary-1) 2px, transparent 2px) 0 0,
    linear-gradient(to left, var(--primary-1) 2px, transparent 2px) 100% 0,
    linear-gradient(to bottom, var(--primary-1) 2px, transparent 2px) 0 0,
    linear-gradient(to bottom, var(--primary-1) 2px, transparent 2px) 100% 0;
  --right-corners: linear-gradient(to right, var(--primary-1) 0px, transparent 0px) 0
  100%,
  linear-gradient(to left, var(--primary-1) 2px, transparent 2px) 100% 100%,
  linear-gradient(to top, var(--primary-1) 0px, transparent 0px) 0 100%,
  linear-gradient(to top, var(--primary-1) 2px, transparent 2px) 100% 100%,
  linear-gradient(to right, var(--primary-1) 0px, transparent 0px) 0 0,
  linear-gradient(to left, var(--primary-1) 2px, transparent 2px) 100% 0,
  linear-gradient(to bottom, var(--primary-1) 0px, transparent 0px) 0 0,
  linear-gradient(to bottom, var(--primary-1) 2px, transparent 2px) 100% 0;

  /* Manipulation */
  --blur: blur(6px);

  /* misc */
  --logo: url(https://media.discordapp.net/attachments/919511402853580860/934397506299785296/lorekirkalogo.png);
  --pattern: url(https://cdn.discordapp.com/attachments/919511402853580860/931100063827132456/pattern.png);
  --join-button: url(https://cdn.discordapp.com/attachments/919511402853580860/934408875556339732/JoinButton.png);
  --logout: url(https://cdn.discordapp.com/attachments/919511402853580860/936228827481378887/157938.png);
  --logout-hover: url(https://cdn.discordapp.com/attachments/919511402853580860/936229656049373184/157938_1.png)
}

/* Credit    */
#app > div.interface.text-2 > div.background > div.bg-radial {
  position: absolute !important;
  height: 45px !important;
  width: 105px !important;
  top: 64rem !important;
  left: 0rem !important;
  background: #ffffff00 !important;
}
#app > div.interface.text-2 > div.background > div.bg-radial::after {	
  font-size: 1rem;
  content: "CSS by Word ";
  padding: 0.6rem !important;
  color: #ffffff;
  position: fixed;
  top: 64.5rem;
  left: 0rem;
  z-index: 10;
  pointer-events: auto;
  backdrop-filter: blur(3px) !important;
  border-bottom: none !important;
  box-shadow: none !important;
  border-top: none !important;
  background-color: var(--background) !important;
  background: var(--corners);
  background-repeat: no-repeat !important;
  background-size: 10px 10px !important;
  border-radius: 0px !important;
}
#app > div.interface.text-2 > div.background > div.bg-radial:hover::after {
  font-size: 1rem;
  text-align: left;
  white-space: pre;
  content: "Nitro Boosters \A --------------- \A wxlruz#9576 \A y9mx#8088 \A Rebel#0005 \A HaHa#4475";
  backdrop-filter: blur(3px) !important;
  border-bottom: none !important;
  box-shadow: none !important;
  border-top: none !important;
  background-color: var(--background) !important;
  background: var(--corners);
  background-repeat: no-repeat !important;
  background-size: 10px 10px !important;
  border-radius: 0px !important;
  transition: all 0.3s cubic-bezier(0.45, 0.05, 0.55, 0.95);
  border: none !important;
  padding: 0.9rem;
  width: auto;
  max-width: 350px;
  height: 389px;
  color: #ffffff;
  position: fixed;
  top: 41.99em;
  left: 0rem;
}
/* Logo */
#app > div.interface.text-2 > img {
  content: var(--logo) !important;
}

/* Background */
#app > div.interface.text-2 > div.background {
  pointer-events: auto !important;
  background: linear-gradient(
    103.28deg,
    #000000 7.06%,
    #000000 90.75%
  ) !important;
}
#app > div.interface.text-2 > div.background > div.pattern-bg {
  background: var(--pattern) repeat;
  -webkit-animation: loopPattern-data-v-50a88 80s linear infinite;
  animation: loopPattern-data-v-50a88834 80s linear infinite;
  opacity: 1;
}
#view
  > div
  > div
  > div.content
  > div
  > div
  > div.content
  > div.bottom
  > button {
  --top: transparent !important;
  --bottom: transparent !important;
  --hover-color: transparent !important;
  width: 50px;
  height: 50px;
  background: var(--logout) center 100% / 100% no-repeat !important;
  background-color: transparent !important;
  color: transparent !important;
  text-shadow: 0 0.1em 0 transparent;
  -webkit-text-stroke: 1px transparent;
  transition: none;
  box-shadow: none;
}
#view > div > div > div.content > div > div.add-friends.text-2 > div.input > button{
  --top: transparent !important;
  --bottom: transparent !important;
  --hover-color: transparent !important;
  width: 55px;
  height: 55px;
  top: 2px;
  background: url(https://cdn.discordapp.com/attachments/919511402853580860/936551471233785887/157938_1.png) center 100% / 100% no-repeat !important;
  background-color: transparent !important;
  color: transparent !important;
  text-shadow: 0 0.1em 0 transparent;
  -webkit-text-stroke: 1px transparent;
  transition: none;
  box-shadow: none;
  transform: skew(0deg);
  transition: all 0.3s ease;
  right: 23px;
}
#view > div > div > div.content > div > div.add-friends.text-2 > div.input > button:hover{
   transform: scale(1.1) rotate(45deg);
}
#view
  > div
  > div
  > div.content
  > div
  > div
  > div.content
  > div.bottom
  > button:after, .button[data-v-02c36fca]:after {
  border: none !important;
}
#view
  > div
  > div
  > div.content
  > div
  > div
  > div.content
  > div.bottom
  > button:hover {
  background: var(--logout-hover) center 100% / 100% no-repeat !important;
  background-color: var(--hover) !important;
  padding: 10px !important;
}
/* join Button
#app > div.interface.text-2 > div.left-interface {
  background-image: var(--join-button) !important;
  background: no-repeat;
  background-size: 10.48rem 2.25rem;
  background-position: 7.1rem 9.84rem;
  image-rendering: pixelated;
}
*/
.add[data-v-197190ba]:hover {
    background-color: var(--primary-1)
}
/* Hidden */
#app > div.view > div > div > div.content > div > div.clans,
#left-icons > div:nth-child(1) > div:nth-child(1),
#left-icons > div:nth-child(1) > div:nth-child(2),
#left-icons > div:nth-child(1) > div:nth-child(3),
#left-icons > div:nth-child(1) > div:nth-child(4),
#left-icons > div.icon-btn.text-1,
#left-interface > div.moneys > div:nth-child(1),
#left-interface > div.moneys > div:nth-child(2),
.container,
.close,
.name-page,
.home,
#view
  > div
  > div
  > div.content
  > div
  > div.leaderboard-cont
  > div.list-champions
  > div
  > div.top-items,
.active,
.tab:hover,
#play > div > div.play-content-up > div > div > hr,
#view > div > div > div.content > div > div.avatar, div.gun, div.delete, #view > div > div > div.content > div > div.content > div.tabs.text-2,
.active-tab, #view > div > div > div.content > div > div.add-friends.text-2{
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.active,
.tab:hover {
  text-decoration: underline;
}

/* Player */
#app > div.interface.text-2 > div.team-section > div.player > div > div.levels {
  border-radius: 0px;
  background-color: var(--background) !important;
  background: var(--corners);
  background-size: 10px 10px;
  background-repeat: no-repeat;
}
/* Text Color */
.level-value,
.levels,
.clan-tag,
.top-name,
.list-labels {
  color: var(--primary-1) !important;
}
/* Containers */
/* Play button */
#play-btn {
  --hover-color: var(--primary-2);
  border: none;
  border-radius: 0px !important;
  padding: 1em 1em;
  box-shadow: none;
  background-color: var(--background) !important;
  /* Right */
  background: var(--right-corners);
  background-repeat: no-repeat;
  background-size: 10px 10px;
}
#play-btn > div.borders > div.border-top.border {
  background: none;
}
#play-btn > div.borders > div.border-bottom.border {
  width: 0.5rem;
  height: 100rem;
  background: #f23636;
  box-shadow: 0 0 50px #e24f4f;
}
.triangle-bottom[data-v-02c36fca],
.triangle[data-v-02c36fca] {
  display: none !important;
}
/* Cards */
#auth-user > div > div.card-cont,
#right-icons > div.card-cont.text-1.inventory-card,
#right-icons > div.icon-btn.text-1,
#view > div,
#view
  > div
  > div
  > div.content
  > div
  > div
  > div.content
  > div.top-medium
  > div.top
  > div.card.card-profile,
#view
  > div
  > div
  > div.content
  > div
  > div
  > div.content
  > div.top-medium
  > div.top
  > div.card.k-d,
#view
  > div
  > div
  > div.content
  > div
  > div
  > div.content
  > div.top-medium
  > div.top
  > div.card.progress,
#view > div > div > div.content > div > div > div.you > div > div.levels,
#view
  > div
  > div
  > div.content
  > div
  > div.leaderboard-cont
  > div.list-champions
  > div,
.lvl-leader,
#view
  > div
  > div
  > div.content
  > div
  > div.clans
  > div.champions-container
  > div.champions-list,
#left-interface::after,
#right-interface > div.settings-and-socicons > div.card-cont.settings.card-1,
#right-interface > div.live-streams, #view > div > div > div.content > div > div.content > div.tabs.text-2 > div.limit{
  backdrop-filter: blur(6px) !important;
  border-bottom: none !important;
  box-shadow: none !important;
  border-top: none !important;
  background-color: var(...

Reviews

No reviews yet.