test

Nitex · 2024-11-01T18:47:11+00:00

/* --- ICON STYLES USING PSEUDO-ELEMENTS --- */ /* Common styles for all button icons */ .tab-container button::before { content: ''; display: inline-block; width: 40px; height: 40px; background-repeat: no-repeat; background-image: url('https://pcp.dekaron-rising.com/icon.png?3'); background-size: auto; /* Adjust if using a sprite sheet */ border-radius: 50%; /* Makes the icon rounded */ margin-right: 8px; /* Spaces the icon from the text */ flex-shrink: 0; /* Prevents the icon from shrinking */ } /* Individual background positions for each icon */ .icon_job_0::before { background-position: -55px -20px; } .icon_job_1::before { background-position: -105px -20px; } .icon_job_2::before { background-position: -155px -20px; } .icon_job_3::before { background-position: -205px -20px; } .icon_job_4::before { background-position: -255px -20px; } .icon_job_5::before { background-position: -305px -20px; } .icon_job_6::before { background-position: -355px -20px; } .icon_job_7::before { background-position: -405px -20px; } .icon_job_8::before { background-position: -255px -70px; } .icon_job_9::before { background-position: -55px -70px; } .icon_job_10::before { background-position: -105px -70px; } .icon_job_11::before { background-position: -155px -70px; } .icon_job_12::before { background-position: -205px -70px; } /* Specific background image for icon_job_13 */ .icon_job_13::before { background-image: url('https://img.dekaron.co.kr/dekaron/home/icon.png?4'); background-position: -355px -70px; } .icon_job_14::before { background-position: -305px -70px; } /* --- TAB CONTAINER STYLES --- */ /* Container for the tab buttons */ .tab-container { overflow: hidden; border-bottom: 1px solid #ccc; background-color: #f1f1f1; margin-bottom: 20px; } /* Style the buttons inside the tab container */ .tab-container button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 10px 20px; transition: background-color 0.3s; font-size: 16px; color: black; display: flex; /* Aligns icon and text horizontally */ align-items: center; /* Vertically centers the content */ } /* Change background color of buttons on hover */ .tab-container button:hover { background-color: #ddd; } /* Create an active/current tablink class */ .tab-container button.active { background-color: #ccc; } /* Style the tab content */ .tab-content { display: none; } /* Show the active tab content */ .tab-content.active { display: block; } /* Table Styles */ .skill-table { width: 100%; border-collapse: collapse; text-align: center; margin-bottom: 40px; } .skill-table caption { color: gold; font-weight: bold; font-size: 24px; margin: 10px 0; } .skill-table th, .skill-table td { border: 1px solid #ddd; padding: 8px; vertical-align: top; color: #000; /* Ensures text is dark */ } .skill-table thead { background-color: #f2f2f2; color: #000; /* Ensures header text is dark */ } .skill-table tbody tr:nth-child(odd) { background-color: #fff; } .skill-table tbody tr:nth-child(even) { background-color: #f9f9f9; } .skill-table ul { list-style: none; padding-left: 0; margin: 0; } /* Responsive Design */ @media (max-width: 768px) { .tab-container button { padding: 8px 12px; font-size: 14px; } .skill-table th, .skill-table td { padding: 6px; font-size: 12px; } .skill-table caption { font-size: 20px; } .tab-container button::before { width: 30px; height: 30px; } } Azure KnightSegita HunterIncar MagicianVicious SummonerConcerra SummonerSegnaleBagi WarriorAlokenDragon KnightSegita ShooterBlack WizardSeguripperHalf BagiAlokesTrie Muse