Utilisateur:Ankhseram/Style.css
< Utilisateur:Ankhseram
Révision datée du 3 décembre 2024 à 14:47 par Ankhseram (discussion | contributions)
Note : après avoir enregistré vos modifications, il se peut que vous deviez forcer le rechargement complet du cache de votre navigateur pour voir les changements.
- Firefox / Safari : maintenez la touche Maj (Shift) en cliquant sur le bouton Actualiser ou pressez Ctrl-F5 ou Ctrl-R (⌘-R sur un Mac)
- Google Chrome : appuyez sur Ctrl-Maj-R (⌘-Shift-R sur un Mac)
- Internet Explorer : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl-F5
- Opera : allez dans Menu → Settings (Opera → Préférences sur un Mac) et ensuite à Confidentialité & sécurité → Effacer les données d’exploration → Images et fichiers en cache.
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);
}
#character-creation input:user-invalid {
border: 1px solid #dc3545;
background-color: #f8d7da;
box-shadow: 0 0 5px #dc3545;
}
#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;
}
@media screen and (min-width: 769px){
.tooltip-info-left {
transform: translateX(-90%);
}
.tooltip-info-left:after {
left: calc(90% - 8px);
}
}
.drop-zone {
border: 2px dashed #651e10;
}
.drop-zone--dragover,
.drop-zone:hover,
.drop-zone:focus {
border-style: solid;
}
button.brown {
background: #651e10;
}
button.brown-transparent {
background: #651e10cc;
}
button.brown:hover,
button.brown:focus {
background: #551a0e;
}
button.red {
background: #ef4444;
}
button.red:hover,
button.red:focus {
background: #b91c1c;
}
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;
}
button:active {
opacity: 0.8;
}
.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;
}
table.pretty-table th {
padding: 4px 10px;
font-weight: bold;
font-size: 1em;
font-family: sans-serif;
background: #651e10;
}
.tabber-container .button.styled-button {
text-transform: lowercase;
}
.tabber-container .button.styled-button::first-letter {
text-transform: uppercase;
}
.chart-container:hover svg[data-icon="download"] {
display: block;
}