Fix apv2, WIP
This commit is contained in:
@@ -0,0 +1,257 @@
|
||||
// ============================================
|
||||
// Utilitaires LESS pour Vermine2047
|
||||
// Mixins, fonctions et classes utilitaires
|
||||
// ============================================
|
||||
|
||||
// Mixin pour les ombres standard
|
||||
.shadow() {
|
||||
box-shadow: 0 2rem @theme-color-shadow;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
.shadow(@color) {
|
||||
box-shadow: 0 2rem @color;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
.shadow(@color, @blur) {
|
||||
box-shadow: 0 @blur @color;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
.shadow(@h-offset, @v-offset, @blur, @color) {
|
||||
box-shadow: @h-offset @v-offset @blur @color;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
// Mixin pour le style des hexagones
|
||||
.hexa-style(@bg-color: rgba(255, 255, 255, 0.425), @bg-color-end: rgba(0, 0, 0, 0.288)) {
|
||||
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
|
||||
background: radial-gradient(circle, @bg-color 0%, @bg-color-end 100%);
|
||||
max-height: 1.5rem;
|
||||
max-width: 1.5rem;
|
||||
min-width: 1.5rem;
|
||||
aspect-ratio: 1/1;
|
||||
color: #000;
|
||||
vertical-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Mixin pour les boutons rollable
|
||||
.rollable-style() {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #000;
|
||||
text-shadow: 0 0 10px red;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// Mixin pour les inputs de type hexa
|
||||
.input-hexa-style() {
|
||||
.hexa-style();
|
||||
input {
|
||||
width: 1rem;
|
||||
}
|
||||
input[type="radio"] {
|
||||
opacity: 0;
|
||||
}
|
||||
input[type="radio"]::after,
|
||||
input[type="radio"]::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Mixin pour les classes flex
|
||||
.flex-container(@direction: row, @wrap: nowrap, @justify: flex-start, @align: stretch) {
|
||||
display: flex;
|
||||
flex-direction: @direction;
|
||||
flex-wrap: @wrap;
|
||||
justify-content: @justify;
|
||||
align-items: @align;
|
||||
}
|
||||
|
||||
// Mixin pour le style des cartes
|
||||
.card-style(@bg-color: rgba(0, 0, 0, 0.1), @border-color: #444) {
|
||||
border: 1px solid @border-color;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
margin-bottom: 15px;
|
||||
background: @bg-color;
|
||||
}
|
||||
|
||||
// Mixin pour les titres de carte
|
||||
.card-title(@border-color: #666) {
|
||||
margin-top: 0;
|
||||
border-bottom: 1px solid @border-color;
|
||||
padding-bottom: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Mixin pour les éléments de liste avec bordure
|
||||
.list-item-with-border(@border-color: #333) {
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid @border-color;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Mixin pour les groupes de formulaires
|
||||
.form-group-style(@margin-bottom: 10px) {
|
||||
margin-bottom: @margin-bottom;
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 3px;
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
}
|
||||
input,
|
||||
select {
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// Mixin pour les ressources
|
||||
.resource-style(@bg-color: rgba(0, 0, 0, 0.05)) {
|
||||
padding: 5px;
|
||||
background: @bg-color;
|
||||
border-radius: 4px;
|
||||
margin: 0 5px;
|
||||
label {
|
||||
font-weight: bold;
|
||||
margin-right: 8px;
|
||||
min-width: 60px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.resource-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
// Mixin pour les badges de rareté
|
||||
.rarity-badge(@bg-color, @text-color) {
|
||||
display: inline-block;
|
||||
padding: 1px 4px;
|
||||
border-radius: 3px;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
margin-left: 5px;
|
||||
background: @bg-color;
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
// Mixin pour le fond avec image
|
||||
.background-image(@url, @repeat: no-repeat, @size: auto, @position: center) {
|
||||
background: @url @repeat @position / @size;
|
||||
}
|
||||
|
||||
// Mixin pour les transitions
|
||||
.transition(@property: all, @duration: 0.2s, @timing: ease-out) {
|
||||
transition: @property @duration @timing;
|
||||
}
|
||||
|
||||
// Mixin pour les styles de l'éditeur TinyMCE
|
||||
.tiny-mce-style() {
|
||||
.tox {
|
||||
min-height: 25vh;
|
||||
.tox-editor-container {
|
||||
background: #fff;
|
||||
}
|
||||
.tox-edit-area {
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mixin pour les styles des inputs personnalisés
|
||||
.custom-input-style() {
|
||||
appearance: none;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
.background-image(url("@{ui-path}/scotch.webp"), no-repeat, auto, center);
|
||||
background-size: 100% auto;
|
||||
height: 0.4rem;
|
||||
border: none;
|
||||
box-shadow: 0px 0px 13px rgba(31, 26, 26, 0.979) inset;
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
appearance: none;
|
||||
margin-top: -0.3rem;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
.background-image(url("@{totems-path}/human.webp"), no-repeat, cover);
|
||||
filter: contrast(2);
|
||||
box-shadow: 0px 0px 10px #000;
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0px 0px 10px #ff0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mixin pour les checkbox et radio boutons personnalisés
|
||||
.custom-checkbox-radio() {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
box-shadow: 0px 0px 3px #85854e;
|
||||
cursor: pointer;
|
||||
width: 1.5rem;
|
||||
height: 1rem;
|
||||
border-radius: 0.4rem;
|
||||
.transition();
|
||||
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
|
||||
box-shadow: 0px 0px 6px #000 inset;
|
||||
background-color: rgba(61, 11, 11, 0.658);
|
||||
|
||||
&[disabled=true] {
|
||||
filter: grayscale(1);
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: " ";
|
||||
.background-image(url("@{totems-path}/human.webp"), no-repeat, auto, 50% 150%);
|
||||
position: relative;
|
||||
top: 10%;
|
||||
left: 0%;
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
display: block;
|
||||
border-radius: 0%;
|
||||
padding: 0;
|
||||
.transition();
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background-color: rgba(26, 107, 12, 0.658);
|
||||
&:after {
|
||||
font-weight: 900;
|
||||
background-color: rgba(26, 1, 1, 0);
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mixin pour les selects personnalisés
|
||||
.custom-select-style() {
|
||||
border: none;
|
||||
.background-image(url("@{ui-path}/scotch.webp"), no-repeat, auto, 100% 100%);
|
||||
box-shadow: 0px 0px 3px rgba(31, 26, 26, 0.979) inset;
|
||||
|
||||
&[disabled] {
|
||||
color: #000;
|
||||
text-shadow: 0px 0px 15px #000;
|
||||
}
|
||||
|
||||
option {
|
||||
appearance: none;
|
||||
border: none;
|
||||
.background-image(url("@{ui-path}/scotch.webp"), no-repeat, auto, 100% 100%);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user