430 lines
8.1 KiB
CSS
430 lines
8.1 KiB
CSS
/**
|
|
* Make the scrollbar stable so the page doesn't shift when collapsing all elements
|
|
*/
|
|
html {
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
.achieveRow .compareImg {
|
|
position: relative;
|
|
font-size: 0; /* fix incorrect extra padding */
|
|
}
|
|
|
|
.achieveRow:not(.unlocked) .compareImg::before {
|
|
content: "";
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill='%2366C0F4' fill-rule='evenodd' d='M27 26v-2h-1.75l-1.5 2H27zm0 1a3.002 3.002 0 0 1-3.009 3H9.01A3.008 3.008 0 0 1 6 27h21zM6 26v-2h3.25l-1.5 2H6zm2.75 0l1.5-2h2l-1.5 2h-2zm3 0l1.5-2h2l-1.5 2h-2zm3 0l1.5-2h2l-1.5 2h-2zm3 0l1.5-2h2l-1.5 2h-2zm3 0l1.5-2h2l-1.5 2h-2zM27 23v-5.99c0-1.66-1.34-3.005-3-3.01v-3.5a7.5 7.5 0 1 0-15 0V14c-1.658.005-3 1.34-3 3.01V23h21zm-15-9v-3.5C12 8.01 14.015 6 16.5 6c2.48 0 4.5 2.015 4.5 4.5V14h-9z'/%3E%3C/svg%3E%0A");
|
|
background-size: 24px 24px;
|
|
width: 24px;
|
|
height: 24px;
|
|
display: block;
|
|
position: absolute;
|
|
left: 5px;
|
|
top: 22px;
|
|
}
|
|
|
|
#topSummaryAchievements .compareVal {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.steamdb_global_achievements_page {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.steamdb_global_achievements_page #compareAvatar {
|
|
display: none;
|
|
}
|
|
|
|
.steamdb_global_achievements_page #headerContent {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.steamdb_achievement_spoiler {
|
|
filter: brightness(3) blur(6px);
|
|
}
|
|
|
|
.steamdb_achievement_image.steamdb_achievement_spoiler {
|
|
filter: grayscale(1) blur(6px);
|
|
}
|
|
|
|
.steamdb_achievement:hover .steamdb_achievement_spoiler {
|
|
filter: unset;
|
|
}
|
|
|
|
.steamdb_stats_extra_tabs {
|
|
float: right;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.steamdb_stats_extra_tabs_mobile {
|
|
float: unset;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.steamdb_stats_extra_tabs > a {
|
|
display: flex;
|
|
}
|
|
|
|
.steamdb_stats_tab_icon {
|
|
width: 22px;
|
|
height: 22px;
|
|
}
|
|
|
|
.steamdb_achievements_group {
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.steamdb_achievements_group > summary {
|
|
display: flex;
|
|
}
|
|
|
|
.steamdb_achievements_title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
color: #fff;
|
|
margin-bottom: 15px;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.steamdb_achievements_group .steamdb_achievements_game_logo_contain {
|
|
position: relative;
|
|
display: flex;
|
|
}
|
|
|
|
.steamdb_achievements_group .steamdb_achievements_game_logo {
|
|
width: 184px;
|
|
height: 69px;
|
|
}
|
|
|
|
.steamdb_achievements_game_name {
|
|
font-weight: bold;
|
|
font-size: 21px;
|
|
}
|
|
|
|
.steamdb_achievements_update_name {
|
|
color: #83868a;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.steamdb_completed_achievements_icon {
|
|
position: absolute;
|
|
left: -12px;
|
|
bottom: -12px;
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
.steamdb_fold_button,
|
|
.steamdb_done_button {
|
|
margin-left: auto;
|
|
background: none;
|
|
border: none;
|
|
color: #83868a;
|
|
display: flex;
|
|
place-content: center;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
}
|
|
|
|
.steamdb_hide_earned_achievements .steamdb_done_button {
|
|
color: #5aa9d6;
|
|
}
|
|
|
|
.steamdb_fold_button:hover,
|
|
.steamdb_fold_button:focus,
|
|
.steamdb_done_button:hover,
|
|
.steamdb_done_button:focus {
|
|
color: #1a9fff;
|
|
}
|
|
|
|
.steamdb_stats_extra_tabs .steamdb_fold_button,
|
|
.steamdb_stats_extra_tabs .steamdb_done_button {
|
|
margin-left: 30px;
|
|
}
|
|
|
|
.steamdb_stats_extra_tabs_mobile .steamdb_fold_button,
|
|
.steamdb_stats_extra_tabs_mobile .steamdb_done_button {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.steamdb_stats_extra_tabs .steamdb_done_button + .steamdb_fold_button {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.steamdb_achievements_list {
|
|
font-weight: 700;
|
|
color: #83868a;
|
|
}
|
|
|
|
.steamdb_achievements_list + .steamdb_achievements_list {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.steamdb_achievements_list > summary {
|
|
cursor: pointer;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.steamdb_achievements_list > summary:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
.steamdb_achievements_sort_button {
|
|
float: right;
|
|
}
|
|
|
|
.steamdb_achievement {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 4px;
|
|
padding-right: 8px;
|
|
margin-bottom: 8px;
|
|
background-color: #23262e;
|
|
position: relative;
|
|
}
|
|
|
|
.steamdb_achievement[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.steamdb_achievement_global_progress_overlay {
|
|
background: linear-gradient(
|
|
to right,
|
|
#23262e 40px,
|
|
#31343e 40px,
|
|
#31343e var(--steamdb-progress),
|
|
#23262e var(--steamdb-progress)
|
|
);
|
|
}
|
|
|
|
.steamdb_achievement_image {
|
|
width: 58px;
|
|
height: 58px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.steamdb_achievement_image_glow {
|
|
box-shadow:
|
|
0 0 2px 1px rgb(255 184 78 / 60%),
|
|
0 0 16px 1px rgb(255 184 78 / 40%);
|
|
}
|
|
|
|
.steamdb_achievement h3 {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #dcdedf;
|
|
overflow-wrap: anywhere;
|
|
z-index: 1;
|
|
}
|
|
|
|
.steamdb_achievement h5 {
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
color: #b8bcbf;
|
|
overflow-wrap: anywhere;
|
|
z-index: 1;
|
|
}
|
|
|
|
.steamdb_achievement h6 {
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
color: #8b929a;
|
|
}
|
|
|
|
.steamdb_hide_earned_achievements .steamdb_earned_achievement {
|
|
display: none;
|
|
}
|
|
|
|
.steamdb_achievement_checkmark {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 20px;
|
|
padding: 6px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.steamdb_achievement_checkmark > svg {
|
|
width: 20px;
|
|
fill: #fff;
|
|
}
|
|
|
|
.steamdb_achievement_status {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
margin-left: auto;
|
|
text-align: right;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
color: #8b929a;
|
|
}
|
|
|
|
.steamdb_achievement_status_row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: end;
|
|
gap: 8px;
|
|
}
|
|
|
|
.steamdb_achievement_status_avatar {
|
|
height: 24px;
|
|
}
|
|
|
|
.steamdb_achievement_status_locked .steamdb_achievement_status_avatar {
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.steamdb_achievement_status_row_compare {
|
|
color: #ffcc6a;
|
|
}
|
|
|
|
.steamdb_achievement_unlock_global {
|
|
margin-left: auto;
|
|
text-align: right;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
z-index: 1;
|
|
}
|
|
|
|
.steamdb_achievement_progress {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-left: auto;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
color: #b8bcbf;
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.steamdb_achievement_progress_info {
|
|
width: 100%;
|
|
}
|
|
|
|
.steamdb_achievement_progress_compare {
|
|
color: #ffcc6a;
|
|
}
|
|
|
|
.steamdb_achievements_name_container .steamdb_achievement_progress_compare {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.steamdb_achievements_title .steamdb_achievement_progress {
|
|
text-align: left;
|
|
}
|
|
|
|
.steamdb_achievement_progress_avatar {
|
|
height: 26px;
|
|
align-self: center;
|
|
}
|
|
|
|
.steamdb_achievement_progressbar {
|
|
border-radius: 10px;
|
|
height: 8px;
|
|
width: 200px;
|
|
margin-top: 4px;
|
|
background: #3d4450;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.achieveBar.steamdb_achievement_progressbar {
|
|
width: 100%;
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
|
|
.achieveBar.steamdb_achievement_progressbar .achieveBarProgress,
|
|
.steamdb_achievement_progressbar_inner {
|
|
height: 100%;
|
|
border-top-right-radius: 10px;
|
|
border-bottom-right-radius: 10px;
|
|
background: #1a9fff;
|
|
width: 0%;
|
|
}
|
|
|
|
.steamdb_achievement_progressbar.steamdb_achievement_progress_compare
|
|
.achieveBarProgress,
|
|
.steamdb_achievement_progress_compare .steamdb_achievement_progressbar_inner {
|
|
background: #ffcc6a;
|
|
}
|
|
|
|
.steamdb_achievement_groups_disclaimer {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: 16px;
|
|
margin-top: 100px;
|
|
}
|
|
|
|
.steamdb_achievement_groups_disclaimer > img {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
.steamdb_achievement_groups_disclaimer:not(:hover) img {
|
|
filter: grayscale(1) brightness(0.5);
|
|
}
|
|
|
|
.steamdb_achievement_groups_disclaimer > a {
|
|
font-style: italic;
|
|
color: inherit;
|
|
}
|
|
|
|
.steamdb_achievement_groups_disclaimer > a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.steamdb_achievement_search {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.steamdb_achievement_search > input {
|
|
background: #1b2838;
|
|
color: #fff;
|
|
border: 1px solid #000;
|
|
border-radius: 6px;
|
|
width: 100%;
|
|
font: inherit;
|
|
box-sizing: border-box;
|
|
padding: 7px 10px 7px 36px;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
|
|
background-size: 16px;
|
|
background-position: 10px center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.steamdb_achievement_search > input:focus {
|
|
border-color: #417b9c;
|
|
outline: none;
|
|
}
|
|
|
|
.steamdb_achievement_search > input::-webkit-search-cancel-button {
|
|
opacity: 1;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.steamdb_achievements_title {
|
|
flex-flow: row wrap;
|
|
}
|
|
|
|
.steamdb_achievements_name_container {
|
|
order: 2;
|
|
flex-basis: 100%;
|
|
}
|
|
|
|
.steamdb_achievement_progressbar {
|
|
max-width: 200px;
|
|
width: 100%;
|
|
}
|
|
|
|
.steamdb_achievement_image_compare {
|
|
display: none;
|
|
}
|
|
}
|