|
|
| (24 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| /* All CSS here will be loaded for users of the Timeless skin */ | | /* All CSS here will be loaded for users of the Timeless skin */ |
| | | @import url('https://fonts.googleapis.com/css2?family=Inconsolata&display=swap'); |
| :root {
| | #mw-site-navigation .sidebar-chunk { |
| /* Twoje podstawowe zmienne */
| | border: none; |
| --box-bg: rgba(24, 18, 61, 0.85);
| | background: none; |
| --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);
| |
| } | | } |
| | | .box { |
| | | border: 1px solid rgba(255,255,255,0.15); |
| body {
| | background: rgba(24,18,61,0.85); |
| margin: 0;
| | margin-bottom: 3.0rem; |
| background: url('../img/background.png') no-repeat center center fixed;
| | padding: 1.2em; |
| background-size: cover;
| | margin-left: -1.5em; |
| color: var(--text);
| | margin-right: -1.5em; |
| font-family: 'Inconsolata', monospace;
| | margin-top: -1.5em; |
| 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 { | | .box h5 { |
| background-color: rgba(126, 96, 195, 0.2);
| | background-color: rgba(126,96,195,0.2); |
| border: 1px solid var(--border-color);
| | border: 1px solid rgba(255,255,255,0.15); |
| padding: 0.5rem 1rem;
| | padding: 0.5rem 1rem; |
| text-align: center;
| | text-align: center; |
| margin: -1.2rem -1.2rem 1rem;
| | margin: -1.2rem -1.2rem 1rem; |
| font-weight: bold;
| | font-weight: bold; |
| color: var(--accent);
| | color: var(--accent); |
| text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
| | text-shadow: 0 0 5px rgba(0,0,0,0.5); |
| }
| | } |
|
| |
|
| a {
| | .no-radius { |
| color: #ab93f2;
| | border-radius: 0 !important; |
| 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 {
| | .text-uppercase { |
| position: absolute;
| | text-transform: uppercase !important; |
| top: 10px;
| | font-family: 'Inconsolata', monospace; |
| font-size: 36px;
| | font-size: 1.25rem; |
| 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 { | | #site-navigation .box.no-radius ul.list-unstyled li { |
| color: #e2d8ff; | | font-size: 16px; |
| } | | } |
| .alert-info {
| | #bodyContentOuter { |
| --bs-alert-color: #e2d8ff;
| | font-size:16px; |
| --bs-alert-bg: rgba(160, 216, 255, 0.08);
| |
| --bs-alert-border-color: rgba(160, 216, 255, 0.3);
| |
| } | | } |
| .alert-success {
| | #mw-content-container { |
| --bs-alert-color: #e2d8ff;
| | background: none; |
| --bs-alert-bg: rgba(143, 255, 209, 0.08);
| |
| --bs-alert-border-color: rgba(143, 255, 209, 0.3);
| |
| --bs-alert-link-color: #8fffd1;
| |
| } | | } |
