Smooth Theme For Kirka
SmoothKirka by mcgames75
Details
Authormcgames75
Licensemcgames75
Categorykirka.io
Created
Updated
Size31 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
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(...