tokyo-theme.css

/*
  Tokyo Night Theme for League of Legends Client
  version 1.0
*/

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;600&display=swap');

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -30%, 0);
    transform: translate3d(0, -30%, 0)
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -30%, 0);
    transform: translate3d(0, -30%, 0)
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

:root {
  /* Tokyo Night color variables */
  --tokyo-bg: #1a1b26;
  --tokyo-bg-lighter: #24283b;
  --tokyo-bg-lighter2: #2f344d;
  --tokyo-accent: #7aa2f7;
  --tokyo-accent-hover: #91b4ff;
  --tokyo-accent-secondary: #bb9af7;
  --tokyo-text: #c0caf5;
  --tokyo-text-darker: #a9b1d6;
  --tokyo-border: #3b4261;
  
  /* Font settings */
  --font-display: 'JetBrains Mono', sans-serif !important;
  --font-body: 'JetBrains Mono', sans-serif !important;
}

body {
  overflow: hidden !important;
  position: relative !important;
}

/* Main viewport styling with glowing borders */
#rcp-fe-viewport-root {
  display: flex;
  width: 1280px;
  height: 720px;
  position: relative;
  border-right: 2px solid var(--tokyo-accent) !important;
  border-left: 2px solid var(--tokyo-accent) !important;
  border-bottom: 2px solid var(--tokyo-accent) !important;
  border-top: 2px solid var(--tokyo-accent) !important;
  box-sizing: border-box;
  overflow: hidden;
  background: rgba(26, 27, 38, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  filter: drop-shadow(1px 1px 10px var(--tokyo-accent)) !important; 
}

/* Navigation app styling with transparency */
#rcp-fe-viewport-root #rcp-fe-lol-navigation-app {
  pointer-events: none;
  position: relative;
  z-index: 10;
  background: rgba(42, 45, 69, 0.14) !important;
  backdrop-filter: blur(5px) !important;
}

/* Social sidebar background gradient with transparency */
.lol-social-sidebar {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  color: var(--tokyo-text-darker);
  font-size: 12px;
  cursor: default;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  background: linear-gradient(180deg, var(--tokyo-bg) 0%, var(--tokyo-bg-lighter) 100%) !important;
  border-left: 1px solid var(--tokyo-border) !important;
}

/* Navigation sections styling */
.section, :host-context(lol-uikit-navigation-bar[type=nav-bar-secondary]) .section {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--tokyo-text) !important;
  border: none;
  margin: 0;
  text-decoration: none;
  outline: none;
  transition: text-shadow 0.3s ease-in-out, background 1.5s;
  width: 100%;
  height: 100%;
  min-height: 20px;
  cursor: pointer;
  font-family: var(--font-display);
}

/* Active section glow effect */
.section.active .section-glow {
  height: 1px;
  width: 100%;
  position: absolute;
  left: 0;
  top: 20px;
  margin: 0;
  background: linear-gradient(to left, transparent, var(--tokyo-accent), transparent) !important;
}

/* Active section text styling */
.section.active, :host-context(lol-uikit-navigation-bar[type=nav-bar-secondary]) .section.active {
  color: var(--tokyo-accent);
  text-shadow: 0px 0px 21px var(--tokyo-accent) !important;
}

/* Active section background */
.section.active {
  background-image: linear-gradient(0deg, rgba(122, 162, 247, 0.2) 0%, rgba(26, 27, 38, 0.1) 55%) !important;
}

.section.active, :host-context(lol-uikit-navigation-bar[type=nav-bar-secondary]) .section.active {
  color: var(--tokyo-text) !important;
  text-shadow: 0px 1px 15px var(--tokyo-text) !important;
  font-family: var(--font-display) !important;
}

/* Play button styling with glow */
.play-button-container {
  background-image: none !important;
  background: linear-gradient(90deg, var(--tokyo-bg-lighter), var(--tokyo-bg)) !important;
  border-radius: 50px !important;
  border: 2px solid var(--tokyo-accent) !important;
  filter: drop-shadow(1px 1px 8px var(--tokyo-accent)) !important;
  transition: 0.2s !important;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(122, 162, 247, 0.4) !important;
}

.play-button-container:hover {
  filter: drop-shadow(1px 1px 15px var(--tokyo-accent)) !important;
  transform: translateY(-2px);
  transition: 0.2s !important;
}

.play-button-content {
  width: calc(100% - 52px) !important;
}

.play-button-text {
  color: var(--tokyo-text) !important;
  font-family: var(--font-display) !important;
  content: '▶ PLAY' !important;
  visibility: hidden;
  z-index: 0 !important;
}

.play-button-text:after {
  content: '\25B6  PLAY'; 
  visibility: visible;
  display: block;
  position: absolute;
  right: 11px !important;
}

/* Find Match button styling */
.find-match-button-container {
  background: linear-gradient(90deg, var(--tokyo-accent), var(--tokyo-accent-secondary)) !important;
  box-shadow: 0 0 15px rgba(122, 162, 247, 0.4) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  border-radius: 4px !important;
}

.find-match-button-container:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 0 20px rgba(122, 162, 247, 0.6) !important;
}

/* Loading screen with blur */
.lol-loading-screen-container.lol-loading-screen-default-state {
  background: var(--tokyo-bg) !important;
}

.lol-loading-screen-container {
  backdrop-filter: blur(20px) !important;
}

/* Online status indicators */
.availability-icon {
  background-color: var(--tokyo-accent) !important;
  border-color: var(--tokyo-accent-hover) !important;
  filter: drop-shadow(0px 0px 4px var(--tokyo-accent));
  border-radius: 10px;
  box-shadow: 0 0 5px var(--tokyo-accent) !important;
}

.availability-icon.mobile {
  background-color: transparent !important;
}

.availability-icon.away {
  background-color: var(--tokyo-bg-lighter) !important;
  border-color: var(--tokyo-accent-secondary) !important;
}

/* Status messages */
.status-message.offline {
  color: var(--tokyo-border) !important;
}

.status-message-wrapper {
  color: var(--tokyo-accent) !important;
}

.status-message.chat {
  color: var(--tokyo-accent) !important;
}

/* Player profile card */
.parties-player-container {
  background: rgba(36, 40, 59, 0.7) !important;
  border: 1px solid var(--tokyo-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(26, 27, 38, 0.4) !important;
  overflow: hidden !important;
}

/* Player emblems */
.regalia-parties-banner-backdrop,
.regalia-parties-crest-backdrop {
  filter: drop-shadow(0 0 5px var(--tokyo-accent)) !important;
}

/* Hover-to-show elements from acrylic theme */

/* Chat, missions, league-voice buttons and version info */
.alpha-version-panel {
  opacity: 0.3 !important;
  transition: 0.2s !important;
}

.alpha-version-panel:hover {
  opacity: 1 !important;
  transition: 0.2s !important;
}

/* Leven xp ring, user icon */
.xp-ring {
  opacity: 0.3 !important;
  transition: 0.2s !important;
}

.identity-icon:hover>.summoner-level-icon>.xp-ring {
  opacity: 1 !important;
  transition: 0.2s !important;
}

/* Level ring styling */
.summoner-level-ring {
  display: none !important;
}

.bottom.unfilled.xp-ring {
  background: var(--tokyo-bg-lighter);
}

.middle.filled.xp-ring {
  background: var(--tokyo-accent);
}

.filled.xp-ring {
  background-color: var(--tokyo-accent) !important;
}

/* Notifications button */
.notifications-button {
  opacity: 0.3 !important;
  transition: 0.2s !important;
}

.notifications-button:hover {
  opacity: 1 !important;
  transition: 0.2s !important;
}

/* Status indicator hover */
.lower-details>.status,
.lower-details>lol-social-availability-hitbox {
  opacity: 0.3 !important;
  transition: 0.2s !important;
}

.lower-details:hover>.status,
.lower-details:hover>lol-social-availability-hitbox {
  opacity: 1 !important;
  transition: 0.2s !important;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px !important;
  background-color: rgba(26, 27, 38, 0.3) !important;
}

::-webkit-scrollbar-thumb {
  background-color: var(--tokyo-accent) !important;
  border-radius: 3px !important;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--tokyo-accent-hover) !important;
}

/* Social notifications */
.mission-button .count-badge {
  background-color: var(--tokyo-accent-secondary) !important;
}

.social-count-badge {
  background-color: var(--tokyo-accent-secondary) !important;
}

/* Friend list styling */
.lol-social-roster-member {
  border-radius: 4px !important;
  transition: background-color 0.2s ease !important;
}

.lol-social-roster-member:hover {
  background-color: rgba(36, 40, 59, 0.8) !important;
}

/* Chat styling */
.chat-header {
  border-bottom: thin solid var(--tokyo-border) !important;
}

.chat-bubble .my-bubble {
  background-color: var(--tokyo-accent) !important;
}

/* Navigation bar styling */
.league-header-logos {
  filter: drop-shadow(0 0 3px var(--tokyo-accent)) !important;
}

/* Top navigation buttons */
.navigation-bar-button {
  background: transparent !important;
  border: 1px solid transparent !important;
  transition: all 0.2s ease !important;
}

.navigation-bar-button:hover {
  border-color: var(--tokyo-accent) !important;
  background: rgba(122, 162, 247, 0.1) !important;
}

/* Champion selection circles */
.champion-select-container {
  filter: drop-shadow(0 0 8px rgba(122, 162, 247, 0.4)) !important;
}

.champion-select-circle {
  border: 2px solid var(--tokyo-accent) !important;
  transition: all 0.3s ease !important;
}

.champion-select-circle:hover {
  border-color: var(--tokyo-accent-secondary) !important;
  transform: scale(1.05) !important;
}

/* Dialog windows */
.lol-uikit-dialog-frame {
  border: 1px solid var(--tokyo-border) !important;
  background: linear-gradient(135deg, var(--tokyo-bg), var(--tokyo-bg-lighter)) !important;
  box-shadow: 0 0 20px rgba(26, 27, 38, 0.8) !important;
  animation: fadeIn 0.3s ease-in-out;
}

/* Transparent elements with blur */
.clash-root-background-landing,
.hold-leave,
.collections-application,
.clash-root-background-landing,
.__rcp-fe-lol-store,
.loot-backdrop.background-static,
.personalized-offers-root,
.parties-view,
.yourshop-root,
.clash-root-background,
.clash-root-background-landing,
.store-backdrop,
.challenges-collection-component>.background,
.loot-backdrop .lol-uikit-video-content,
.rcp-fe-lol-event-shop-application,
.champ-select-bg-darken,
.rcp-fe-lol-game-in-progress,
.postgame-background-image,
.clash-root-background-landing,
.clash-aram-intro-modal,
.clash-root-background,
.postgame-champion-background-wrapper,
.stats-backdrop,
.rcp-fe-viewport-sidebar,
.loot-loading-screen,
.lol-social-sidebar {
  background-color: transparent !important;
  background: transparent !important;
  backdrop-filter: blur(10px) !important;
}

/* Background overlay for client */
.parties-background,
.parties-view,
.parties-game-search-background {
  background: linear-gradient(135deg, rgba(26, 27, 38, 0.8), rgba(36, 40, 59, 0.8)) !important;
  backdrop-filter: blur(10px) !important;
}

/* Fullscreen backdrops */
lol-uikit-full-page-backdrop {
  background: linear-gradient(rgba(26, 27, 38, 0.7), rgba(26, 27, 38, 0.8) 93%) !important;
  backdrop-filter: blur(20px) !important;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

/* Fade-in animation for various elements */
.ready-check-root-element,
.fake-application-template {
  animation-name: fadeIn;
  animation-duration: 1.5s;
}

/* Gradient masks */
.screen-root.active {
  -webkit-mask: linear-gradient(180deg, transparent 0%, white 30%, white 100%);
  mask: linear-gradient(90deg, transparent 0%, white 10%, white 100%);
}

.rcp-fe-viewport-persistent {
  -webkit-mask: linear-gradient(270deg, transparent 0%, white 20%, white 100%);
  mask: linear-gradient(270deg, transparent 0%, white 20%, white 100%);
}

/* Font application throughout the client */
body, button, input, select, textarea, .lol-uikit-dialog-frame, .champion-name-container, .summoner-name {
  font-family: var(--font-display) !important;
}

/* Party and matchmaking UI */
.parties-invite-info-panel {
  background: rgba(26, 27, 38, 0.7) !important;
  border: 1px solid var(--tokyo-border) !important;
  border-radius: 10px !important;
  backdrop-filter: blur(5px) !important;
}

.custom-invite-header,
.parties-invite-info-panel-body {
  border: none !important;
  background: none !important;
}

/* Fix for background image overlays */
.cdp-backdrop-img {
  opacity: 0.4 !important;
  position: unset !important;
  filter: saturate(0.7) brightness(0.7) !important;
}

/* Clean up borders */
.group-separator {
  display: none !important;
  border: none !important;
}

.navigation-root-component {
  border-bottom: none !important;
}

/* Hide unnecessary UI elements */
.navbar-blur {
  background: transparent !important;
  width: 0 !important;
}

/* Position adjustments */
.lower-details {
  gap: 5px !important;
}

/* Remove default buttons that clash with theme */
.lol-uikit-flat-button-secondary {
  background: var(--tokyo-bg-lighter) !important;
  border: 1px solid var(--tokyo-accent) !important;
  color: var(--tokyo-text) !important;
  transition: all 0.2s ease !important;
}

.lol-uikit-flat-button-secondary:hover {
  background: rgba(122, 162, 247, 0.2) !important;
  border-color: var(--tokyo-accent-hover) !important;
}