Utilisateur:Ankhseram/Style.css : Différence entre versions
(Page créée avec « .test {background: red;"} ») |
|||
(163 révisions intermédiaires par le même utilisateur non affichées) | |||
Ligne 1 : | Ligne 1 : | ||
− | . | + | svg.svg-icon:hover { |
+ | fill: green; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | svg.svg-icon-delete: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; | ||
+ | } | ||
+ | |||
+ | input[type="checkbox"] { | ||
+ | appearance: none; | ||
+ | background-color: white; | ||
+ | } | ||
+ | |||
+ | input, | ||
+ | input[type="checkbox"], | ||
+ | select { | ||
+ | border: 3px #d0e0e3 solid; | ||
+ | } | ||
+ | |||
+ | input[type="checkbox"]:checked { | ||
+ | background-color: #19bd94; | ||
+ | border: none; | ||
+ | position: relative; | ||
+ | font-size: 25px; | ||
+ | } | ||
+ | |||
+ | input[type="checkbox"]:checked:after { | ||
+ | content: ""; | ||
+ | position: absolute; | ||
+ | background: transparent; | ||
+ | left: 20%; | ||
+ | top: 20%; | ||
+ | width: 45%; | ||
+ | height: 25%; | ||
+ | transform: rotate(-45deg); | ||
+ | border: 0.18em white solid; | ||
+ | border-top: none; | ||
+ | border-right: none; | ||
+ | } | ||
+ | |||
+ | #character-creation input:focus:not([type='checkbox']), | ||
+ | select:focus { | ||
+ | border: 3px 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: 3px #dc3545 solid; | ||
+ | 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#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; | ||
+ | } | ||
+ | |||
+ | 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; | ||
+ | } |
Version actuelle datée du 22 décembre 2024 à 14:28
svg.svg-icon:hover {
fill: green;
cursor: pointer;
}
svg.svg-icon-delete: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;
}
input[type="checkbox"] {
appearance: none;
background-color: white;
}
input,
input[type="checkbox"],
select {
border: 3px #d0e0e3 solid;
}
input[type="checkbox"]:checked {
background-color: #19bd94;
border: none;
position: relative;
font-size: 25px;
}
input[type="checkbox"]:checked:after {
content: "";
position: absolute;
background: transparent;
left: 20%;
top: 20%;
width: 45%;
height: 25%;
transform: rotate(-45deg);
border: 0.18em white solid;
border-top: none;
border-right: none;
}
#character-creation input:focus:not([type='checkbox']),
select:focus {
border: 3px 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: 3px #dc3545 solid;
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#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;
}
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;
}