CSS: .charsheet, .charsheet.lang-en { /* Defaul value */ --repcontrol_add-name: "Add"; --repcontrol_add-width: 4vw; /* Add button width */ --repcontrol_edit-name: "Modify"; --repcontrol_edit-name2: "Done"; --repcontrol_edit-width: 8vw; /* Modify / Done button width */ } .charsheet.lang-ru { /* Translation for RU */ --repcontrol_add-name: "Добавить"; --repcontrol_add-width: 8vw; /* Button width for cases when the translation is longer/shorter than the original */ --repcontrol_edit-name: "Изменить"; --repcontrol_edit-name2: "Принять"; }
.charsheet .repcontrol_add {
width: var(--repcontrol_add-width);
}
.charsheet .repcontrol_add::before {
content: var(--repcontrol_add-name);
}
.charsheet .repcontrol_edit {
width: var(--repcontrol_edit-width);
}
.charsheet .repcontrol_edit::before {
content: var(--repcontrol_edit-name);
}
.charsheet .editmode + .repcontrol > .repcontrol_edit::before {
content: var(--repcontrol_edit-name2);
}
.charsheet .repcontrol_add,
.charsheet .repcontrol_edit {
position: relative;
display: flex;
justify-content: center;
align-items: center;
color: transparent;
text-shadow: unset;
overflow: hidden;
background-image: unset;
}
.charsheet .repcontrol_add::before,
.charsheet .repcontrol_edit::before {
color: white; /* Any text color you need */
position: absolute;
}
The style of the buttons themselves is not specified in the example.
