Utilisateur:Ankhseram/Style.css : Différence entre versions
(64 révisions intermédiaires par le même utilisateur non affichées) | |||
Ligne 8 : | Ligne 8 : | ||
} | } | ||
− | + | svg.svg-delete-monster { | |
− | + | transform: rotate(45deg); | |
+ | fill: red; | ||
+ | transition: transform .4s, fill .4s; | ||
} | } | ||
+ | svg.svg-delete-monster:hover { | ||
+ | fill: red; | ||
+ | } | ||
+ | |||
+ | #characters-container > * { | ||
+ | border: 1px grey solid; | ||
+ | } | ||
+ | |||
+ | #characters-container > *:hover, | ||
#characters-container > *:focus { | #characters-container > *:focus { | ||
− | + | border: 1px #651e10 dashed; | |
} | } | ||
#characters-container > .selected-character { | #characters-container > .selected-character { | ||
− | + | border: 2px #651e10 solid; | |
} | } | ||
Ligne 38 : | Ligne 49 : | ||
border-radius: 3px; | border-radius: 3px; | ||
margin-left: 0; | margin-left: 0; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
Ligne 58 : | Ligne 57 : | ||
} | } | ||
− | input:focus:not([type='checkbox']), | + | #character-creation input[type='number'] { |
+ | display: inline-block; | ||
+ | vertical-align: middle; | ||
+ | margin-right: 10px; | ||
+ | width: 45px; | ||
+ | height: 20px; | ||
+ | border: 1px solid #ccc; | ||
+ | border-radius: 3px; | ||
+ | appearance: none; | ||
+ | } | ||
+ | |||
+ | #character-creation input:focus:not([type='checkbox']), | ||
select:focus { | select:focus { | ||
− | border | + | border: 1px rgb(102, 175, 233) solid; |
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), | box-shadow: inset 0 1px 1px rgba(0,0,0,.075), | ||
0 0 8px rgba(102, 175, 233, 0.6); | 0 0 8px rgba(102, 175, 233, 0.6); | ||
} | } | ||
− | + | #weapon-category label { | |
− | + | position: relative; | |
+ | padding-left: 0; | ||
} | } | ||
− | + | #weapon-category .cadreFenetre { | |
− | + | position: absolute; | |
− | + | z-index: 100; | |
− | + | pointer-events: none; | |
− | + | width: max-content; | |
− | + | color: black; | |
− | + | top: 0; | |
− | + | left: 50%; | |
+ | transform: translate(-50%, -100%); | ||
+ | white-space: normal; | ||
+ | opacity: 0; | ||
} | } | ||
− | . | + | #weapon-category .cadreFenetre { |
− | + | text-align: center; | |
− | + | margin: 0; | |
− | + | color: white; | |
− | + | text-shadow: #000000 1px 1px, #000000 -1px 1px, | |
− | + | #000000 -1px -1px, #000000 1px -1px; | |
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
.improved-collapsible.custom-js > .mw-collapsible-content { | .improved-collapsible.custom-js > .mw-collapsible-content { | ||
− | + | display: grid; | |
− | transition: | + | transition: grid-template-rows 0.2s ease-out; |
} | } | ||
− | + | input[type='radio'] { | |
− | + | position: absolute; | |
+ | opacity: 0; | ||
+ | width: 0; | ||
+ | height: 0; | ||
} | } | ||
− | + | input[type='radio'] + img { | |
− | + | cursor: pointer; | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | + | input[type='radio']:hover + img { | |
− | + | background: rgba(0, 0, 0, .05); | |
+ | outline: 2px solid rgba(0, 0, 0, .2); | ||
} | } | ||
− | + | input[type='radio']:checked + img { | |
− | + | background: rgba(0, 0, 0, .05); | |
− | + | outline: 2px solid green; | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
Ligne 137 : | Ligne 132 : | ||
width: 24px; | width: 24px; | ||
margin: 0 5px; | margin: 0 5px; | ||
− | |||
− | |||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
Ligne 147 : | Ligne 140 : | ||
border-radius: 8px; | border-radius: 8px; | ||
padding: 10px; | padding: 10px; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | . | + | .drop-zone { |
− | + | border: 2px dashed #651e10; | |
− | + | } | |
− | + | ||
− | + | .drop-zone--dragover, | |
− | + | .drop-zone:hover, | |
− | + | .drop-zone:focus { | |
− | + | border-style: solid; | |
+ | } | ||
+ | |||
+ | button#add-new-character { | ||
+ | background: #651e10; | ||
+ | } | ||
+ | |||
+ | button#add-new-character:hover, | ||
+ | button#add-new-character:focus { | ||
+ | background: #551a0e; | ||
+ | } | ||
+ | |||
+ | button#add-new-character:active { | ||
+ | background: #45160c; | ||
+ | } | ||
+ | |||
+ | button#save-character { | ||
+ | background: #2f9e44; | ||
+ | transition: background-color .4s | ||
+ | } | ||
+ | |||
+ | button#save-character:hover { | ||
+ | background-color: #2b8a3e; | ||
+ | } | ||
+ | |||
+ | button#save-character.unsaved-character { | ||
+ | background-color: #e3a008; | ||
} | } | ||
− | . | + | button#save-character.unsaved-character:hover, |
− | + | button#save-character.unsaved-character:focus { | |
− | + | background-color: #c27803; | |
− | |||
} | } | ||
− | . | + | .styled-button { |
− | + | font-family: Arial, sans-serif; | |
− | + | box-sizing: border-box; | |
+ | display: inline-block; | ||
+ | color: #ffffff; | ||
+ | border: none; | ||
+ | padding: 10px 12px; | ||
+ | font-weight: bold; | ||
+ | border-radius: 8px; | ||
+ | cursor: pointer; | ||
+ | transition: background-color 0.3s ease, | ||
+ | box-shadow 0.3s ease, transform 0.3s ease; | ||
+ | line-height: normal; | ||
+ | text-align: center; | ||
+ | user-select: none; | ||
+ | background-color: #ff6f61; | ||
+ | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | ||
+ | min-width: 80px; | ||
} | } | ||
− | + | .styled-button:hover { | |
− | + | background-color: #ff3b2e; | |
− | + | box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); | |
− | } | + | transform: translateY(-2px); |
+ | } | ||
− | + | .styled-button:active, | |
− | + | .styled-button.tabber-active { | |
− | + | background-color: #cc4537; | |
− | + | box-shadow: 0 3px 4px rgba(0, 0, 0, 0.1); | |
− | + | transform: translateY(0); | |
− | + | border: none; | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } |
Version actuelle datée du 30 mai 2024 à 12:27
svg.svg-icon:hover {
fill: green;
cursor: pointer;
}
svg.svg-icon-delete:hover {
fill: red;
}
svg.svg-delete-monster {
transform: rotate(45deg);
fill: red;
transition: transform .4s, fill .4s;
}
svg.svg-delete-monster:hover {
fill: red;
}
#characters-container > * {
border: 1px grey solid;
}
#characters-container > *:hover,
#characters-container > *:focus {
border: 1px #651e10 dashed;
}
#characters-container > .selected-character {
border: 2px #651e10 solid;
}
#monster-list label {
display: block;
cursor: pointer;
}
#monster-list label:hover {
background: rgba(0, 0, 0, .1);
}
#monster-list input {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
width: 20px;
height: 20px;
border: 1px solid #ccc;
border-radius: 3px;
margin-left: 0;
}
input,
select {
border-radius: 3px;
border: 1px #cccccc solid;
}
#character-creation input[type='number'] {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
width: 45px;
height: 20px;
border: 1px solid #ccc;
border-radius: 3px;
appearance: none;
}
#character-creation input:focus:not([type='checkbox']),
select:focus {
border: 1px rgb(102, 175, 233) solid;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),
0 0 8px rgba(102, 175, 233, 0.6);
}
#weapon-category label {
position: relative;
padding-left: 0;
}
#weapon-category .cadreFenetre {
position: absolute;
z-index: 100;
pointer-events: none;
width: max-content;
color: black;
top: 0;
left: 50%;
transform: translate(-50%, -100%);
white-space: normal;
opacity: 0;
}
#weapon-category .cadreFenetre {
text-align: center;
margin: 0;
color: white;
text-shadow: #000000 1px 1px, #000000 -1px 1px,
#000000 -1px -1px, #000000 1px -1px;
}
.improved-collapsible.custom-js > .mw-collapsible-content {
display: grid;
transition: grid-template-rows 0.2s ease-out;
}
input[type='radio'] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
input[type='radio'] + img {
cursor: pointer;
}
input[type='radio']:hover + img {
background: rgba(0, 0, 0, .05);
outline: 2px solid rgba(0, 0, 0, .2);
}
input[type='radio']:checked + img {
background: rgba(0, 0, 0, .05);
outline: 2px solid green;
}
.tooltip-icon {
position: relative;
height: 24px;
width: 24px;
margin: 0 5px;
cursor: pointer;
}
.tooltip-info {
background-color: #F7EACC;
border: 1px solid black;
border-radius: 8px;
padding: 10px;
}
.drop-zone {
border: 2px dashed #651e10;
}
.drop-zone--dragover,
.drop-zone:hover,
.drop-zone:focus {
border-style: solid;
}
button#add-new-character {
background: #651e10;
}
button#add-new-character:hover,
button#add-new-character:focus {
background: #551a0e;
}
button#add-new-character:active {
background: #45160c;
}
button#save-character {
background: #2f9e44;
transition: background-color .4s
}
button#save-character:hover {
background-color: #2b8a3e;
}
button#save-character.unsaved-character {
background-color: #e3a008;
}
button#save-character.unsaved-character:hover,
button#save-character.unsaved-character:focus {
background-color: #c27803;
}
.styled-button {
font-family: Arial, sans-serif;
box-sizing: border-box;
display: inline-block;
color: #ffffff;
border: none;
padding: 10px 12px;
font-weight: bold;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s ease,
box-shadow 0.3s ease, transform 0.3s ease;
line-height: normal;
text-align: center;
user-select: none;
background-color: #ff6f61;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
min-width: 80px;
}
.styled-button:hover {
background-color: #ff3b2e;
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
}
.styled-button:active,
.styled-button.tabber-active {
background-color: #cc4537;
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.1);
transform: translateY(0);
border: none;
}