MediaWiki:Timeless.css: Difference between revisions

Revision as of 00:09, 11 July 2025

/* All CSS here will be loaded for users of the Timeless skin */

:root {
  /* Twoje podstawowe zmienne */
  --box-bg: rgba(24, 18, 61, 0.85);
  --border-color: rgba(255, 255, 255, 0.15);
  --accent: #cbb4ff;
  --text: #e2d8ff;
  --soft-purple: #7e60c3;

  /* Bootstrap body */
  --bs-body-bg: rgba(24, 18, 61, 0.85);
  --bs-body-color: #e2d8ff;
  --bs-border-color: rgba(255, 255, 255, 0.15);

  /* Bootstrap theme colors */
  --bs-primary: #7e60c3;
  --bs-secondary: #cbb4ff;
  --bs-success: #8fffd1;
  --bs-info: #a0d8ff;
  --bs-warning: #ffd8a0;
  --bs-danger: #ff8fb1;

  --bs-link-color: #a89ad1;

  /* Bootstrap tables */
  --bs-table-bg: rgba(24, 18, 61, 0.85);
  --bs-table-color: #e2d8ff;
  --bs-table-border-color: rgba(255, 255, 255, 0.15);
  --bs-table-striped-bg: rgba(126, 96, 195, 0.1);
  --bs-table-hover-bg: rgba(126, 96, 195, 0.15);

  /* Bootstrap buttons (global base) */
  --bs-btn-bg: #7e60c3;
  --bs-btn-color: #e2d8ff;
  --bs-btn-border-color: rgba(255, 255, 255, 0.15);
  --bs-btn-hover-bg: #cbb4ff;
  --bs-btn-hover-color: #e2d8ff;
  --bs-btn-hover-border-color: rgba(255, 255, 255, 0.3);
  --bs-btn-focus-shadow-rgb: 203, 180, 255;
  --bs-btn-active-bg: #a89ad1;
  --bs-btn-active-color: #e2d8ff;
  --bs-btn-active-border-color: rgba(255, 255, 255, 0.4);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-bg: #7e60c3;
  --bs-btn-disabled-color: #e2d8ff;
  --bs-btn-disabled-border-color: rgba(255, 255, 255, 0.15);
}


    body {
      margin: 0;
      background: url('../img/background.png') no-repeat center center fixed;
      background-size: cover;
      color: var(--text);
      font-family: 'Inconsolata', monospace;
      overflow-x: hidden;
    }

    .no-radius {
      border-radius: 0 !important;
    }

    .blur-bg {
      position: sticky;
      top: 0;
      z-index: 999;
      background: rgba(47, 29, 99, 0.6);
      backdrop-filter: blur(6px);
      border-top: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);
      box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.05), 0 2px 10px rgba(0, 0, 0, 0.3);
    }

    .nav-link {
      color: var(--accent) !important;
      font-weight: bold;
      text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
    }

    .box {
      background: var(--box-bg);
      border: 1px solid var(--border-color);
      padding: 1.2rem;
      margin-bottom: 1.2rem;
    }

    h1, h2, h3 {
      color: var(--accent);
    }

    .box h5 {
      background-color: rgba(126, 96, 195, 0.2);
      border: 1px solid var(--border-color);
      padding: 0.5rem 1rem;
      text-align: center;
      margin: -1.2rem -1.2rem 1rem;
      font-weight: bold;
      color: var(--accent);
      text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    }

    a {
      color: #ab93f2;
      text-decoration: none;
    }

    .btn-custom {
      background-color: var(--soft-purple);
      color: white;
      font-weight: bold;
      border: none;
    }

    input.form-control {
      background-color: #2a1f4e;
      border: 1px solid #5e4d89;
      color: #fff;
    }

    .socials img {
      width: 36px;
      height: 36px;
    }

    .sidepanel {
      height: 100%;
      width: 0;
      position: fixed;
      z-index: 1000;
      top: 0;
      background-color: var(--box-bg);
      overflow-x: hidden;
      transition: 0.3s;
      padding-top: 60px;
    }

    .sidepanel-left {
      left: 0;
    }

    .sidepanel-right {
      right: 0;
    }

    .sidepanel .closebtn {
      position: absolute;
      top: 10px;
      font-size: 36px;
      text-decoration: none;
    }

    .box ul {
      padding-left: 0;
    }

    .box ul li {
      list-style: none;
    }

    .box ul li a {
      display: block;
      padding: 0.4rem 0.6rem;
      color: var(--text);
      text-decoration: none;
      border-radius: 4px;
      transition: background 0.3s ease, color 0.3s ease;
    }

    .box ul li a:hover {
      background-color: rgba(255, 255, 255, 0.05);
      color: #ffffff;
    }

    .title {
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 4rem;
      text-transform: uppercase;
      color: white;
      -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
      -webkit-mask-size: 100% 100%;
      -webkit-mask-repeat: no-repeat;
      mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
      mask-size: 100% 100%;
      mask-repeat: no-repeat;
    }
    .title a {
      text-decoration: none;
      color: #fff;
    }
	.text-bg-purple {
	  background-color: rgba(126, 96, 195, 0.2) !important;
	  color: #fff;
	}
  .btn-primary {
  --bs-btn-color: #e2d8ff;
  --bs-btn-bg: #7e60c3;
  --bs-btn-border-color: #7e60c3;
  --bs-btn-hover-bg: #cbb4ff;
  --bs-btn-hover-border-color: #cbb4ff;
  --bs-btn-hover-color: #e2d8ff;
  --bs-btn-active-bg: #a89ad1;
  --bs-btn-active-border-color: #a89ad1;
  --bs-btn-active-color: #e2d8ff;
  --bs-btn-disabled-bg: #7e60c3;
  --bs-btn-disabled-border-color: #7e60c3;
  --bs-btn-disabled-color: #e2d8ff;
}
.form-text {
  color: #e2d8ff;
}
.alert-info {
  --bs-alert-color: #e2d8ff;
  --bs-alert-bg: rgba(160, 216, 255, 0.08);
  --bs-alert-border-color: rgba(160, 216, 255, 0.3);
}
.alert-success {
  --bs-alert-color: #e2d8ff;
  --bs-alert-bg: rgba(143, 255, 209, 0.08);
  --bs-alert-border-color: rgba(143, 255, 209, 0.3);
  --bs-alert-link-color: #8fffd1;
}