Difference between revisions of "User:Wookipan/Sandbox/Page.css"

From Team Fortress Wiki
Jump to: navigation, search
m (Change selectors in accordance with elements)
Line 1: Line 1:
 
.wiki-tooltip {
 
.wiki-tooltip {
position: relative;
+
    position: relative;
 +
    display: inline-block;
 
}
 
}
  
 
.wiki-tooltip .wiki-tooltip-content {
 
.wiki-tooltip .wiki-tooltip-content {
 
     position: absolute;
 
     position: absolute;
 +
    top: 0;
 +
    display: flex;
 +
    align-items: center;
 +
    color: #222222;
 +
    background-color: #FFFCF7;
 +
    margin-top: 20px;
 +
    padding: 5px;
 +
    font-weight: 400;
 
     -webkit-pointer-events: none;
 
     -webkit-pointer-events: none;
 
     pointer-events: none;
 
     pointer-events: none;
 
     -webkit-transition: opacity .2s ease-in-out;
 
     -webkit-transition: opacity .2s ease-in-out;
 
     transition: opacity .2s ease-in-out;
 
     transition: opacity .2s ease-in-out;
white-space: nowrap;
+
    white-space: nowrap;
opacity: 0;
+
    box-shadow: 0 30px 90px -20px rgb(0 0 0 / 30%), 0 0 1px 1px rgb(0 0 0 / 5%);
z-index: 9;
+
    opacity: 0;
 +
    z-index: 9;
 +
}
 +
 
 +
.wiki-tooltip .wiki-tooltip-content a {
 +
    background: url('/w/images/a/a6/Tooltip_internal_link_icon.png') no-repeat left / 16px;
 +
    width: 16px;
 +
    height: 16px;
 +
    margin-top: 1px;
 +
    margin-left: 5px;
 
}
 
}
  
 
.wiki-tooltip:hover .wiki-tooltip-content {
 
.wiki-tooltip:hover .wiki-tooltip-content {
 
     opacity: 1;
 
     opacity: 1;
}
+
     -webkit-pointer-events: auto;
 
+
     pointer-events: auto;
.wiki-tooltip .wiki-tooltip-content {
 
    color: inherit;
 
     background-color: #FFFCF7;
 
    margin-top: 20px;
 
    padding: 5px;
 
    font-weight: 400;
 
     box-shadow: 0 30px 90px -20px rgb(0 0 0 / 30%), 0 0 1px 1px rgb(0 0 0 / 5%);
 
 
}
 
}
  
 
.infobox-label .wiki-tooltip {
 
.infobox-label .wiki-tooltip {
position: relative;
+
    position: relative;
margin-left: 20px;
+
    margin-left: 20px;
 
}
 
}
  
 
.infobox-label .wiki-tooltip:before {
 
.infobox-label .wiki-tooltip:before {
     content: '';
+
     content: 'i';
position: absolute;
+
    color: #222222;
top: 0;
+
    position: absolute;
left: -20px;
+
    top: -1px;
width: 15px;
+
    left: -20px;
height: 15px;
+
    width: 12px;
     background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2218%22 height=%2218%22 viewBox=%220 0 24 24%22%3E %3Cpath d=%22M12.001 2.085c-5.478 0-9.916 4.438-9.916 9.916 0 5.476 4.438 9.914 9.916 9.914 5.476 0 9.914-4.438 9.914-9.914 0-5.478-4.438-9.916-9.914-9.916zm.001 18c-4.465 0-8.084-3.619-8.084-8.083 0-4.465 3.619-8.084 8.084-8.084 4.464 0 8.083 3.619 8.083 8.084 0 4.464-3.619 8.083-8.083 8.083z%22/%3E %3Cpath d=%22M11.766 6.688c-2.5 0-3.219 2.188-3.219 2.188l1.411.854s.298-.791.901-1.229c.516-.375 1.625-.625 2.219.125.701.885-.17 1.587-1.078 2.719-.953 1.186-1 3.655-1 3.655h1.969s.135-2.318 1.041-3.381c.603-.707 1.443-1.338 1.443-2.494s-1.187-2.437-3.687-2.437zM11 16h2v2h-2z%22/%3E %3C/svg%3E");
+
    height: 12px;
     background-repeat: no-repeat;
+
     font-style: italic;
     background-position: center;
+
    font-family: 'serif';
 +
    border: 1px solid;
 +
    border-radius: 100%;
 +
     padding: 1px;
 +
    line-height: 1;
 +
     text-align: center;
 
}
 
}

Revision as of 23:05, 3 September 2023

.wiki-tooltip {
    position: relative;
    display: inline-block;
}

.wiki-tooltip .wiki-tooltip-content {
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    color: #222222;
    background-color: #FFFCF7;
    margin-top: 20px;
    padding: 5px;
    font-weight: 400;
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-transition: opacity .2s ease-in-out;
    transition: opacity .2s ease-in-out;
    white-space: nowrap;
    box-shadow: 0 30px 90px -20px rgb(0 0 0 / 30%), 0 0 1px 1px rgb(0 0 0 / 5%);
    opacity: 0;
    z-index: 9;
}

.wiki-tooltip .wiki-tooltip-content a {
    background: url('/w/images/a/a6/Tooltip_internal_link_icon.png') no-repeat left / 16px;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    margin-left: 5px;
}

.wiki-tooltip:hover .wiki-tooltip-content {
    opacity: 1;
    -webkit-pointer-events: auto;
    pointer-events: auto;
}

.infobox-label .wiki-tooltip {
    position: relative;
    margin-left: 20px;
}

.infobox-label .wiki-tooltip:before {
    content: 'i';
    color: #222222;
    position: absolute;
    top: -1px;
    left: -20px;
    width: 12px;
    height: 12px;
    font-style: italic;
    font-family: 'serif';
    border: 1px solid;
    border-radius: 100%;
    padding: 1px;
    line-height: 1;
    text-align: center;
}