MediaWiki:Fandomdesktop.css

/* XXX: Very important. It is important for all administrators not to change it without approval of bureaucracy. */

body.skin-fandomdesktop {font-family: 'Gotham SSm Medium', system-ui; }

/** * if you want flair, please message wall this user. */ a[href$=":ChikoritaROBLOXHurricanes"] {

background: -webkit-linear-gradient(left, orange, yellow, green, cyan, blue, violet);

background-clip: text; -webkit-background-clip: text; color: transparent; font-family: 'Gotham SSm Medium', system-ui; font-weight: 900;

text-transform: uppercase;

text-decoration: overline; text-align: center; line-height: 2;

}

/** end of all flair and beginng of page styling */

/* Removed elements that detract from the Fandom user experience. */

/* hyperlink information */ a { outline: none; text-decoration: none; padding: 2px 1px 0; } /* we will let fandom deal with hyperlink colors */

/* illusion 100 */ a:focus { border-bottom: 1px solid; background: #0078d7; /*0078d7*/ }

a:hover { border-bottom: 1px solid; background: #0078d7; /*0078d7*/ }

a:active { background: #0078d7; /*0078d7*/ color: #0078d7; /*0078d7*/ } /* spacing */

/* typography */

tbody td { text-align: center; }

tfoot th { text-align: right; } /* caption tables */

caption { padding: 20px; font-style: normal; caption-side: top; text-align: center; } /* elaborate on the block quote */ blockquote { min-height: 5em; padding  : 1em 4em; position : relative; background-color: #fcf9a1; }

blockquote::before, blockquote::after { position: absolute; height : 3rem; }

blockquote::before { content: '“'; top   : 0.3rem; left  : 0.9rem; }

blockquote::after { content: '”'; bottom : 0.3rem; right : 0.8rem; }

blockquote:lang(fr)::before { content: '«'; top   : -1.5rem; left  : 0.5rem; }

blockquote:lang(fr)::after { content: '»'; bottom : 2.6rem; right : 0.5rem }

blockquote i { display  : block; font-size : 0.8em; margin-top: 1rem; text-style: italic; text-align: right; } blockquote { resize: both; overflow: auto; } table { resize: both; overflow: auto; }

/* Tooltip container */ .tooltip { position: relative; display: inline-block; }

/* Tooltip text */ .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: #FFFFE1; color: #000; text-align: center; padding: 5px 0; border-radius: 6px; position: absolute; z-index: 1; }

/* Show the tooltip text when you mouse over the tooltip container */ .tooltip:hover .tooltiptext { visibility: visible; } /* Make sure that padding behaves as expected */
 * {box-sizing:border-box}

/* Container for progress bars */ .container { width: 100%; /* Full width */

}

.skills { text-align: right; /* Right-align text */ padding-top: 10px; /* Add top padding */ padding-bottom: 10px; /* Add bottom padding */ }

.progress {width: 44%; background-color: #008000;}

.hide { display: none; }

.myDIV:hover + .hide { display: block; } .loader { border: 16px solid #f3f3f3; border-top: 16px solid #0078d7; /* Blue */ border-radius: 50%; width: 120px; height: 120px; animation: spin 2s linear infinite; }

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* The alert message box */ .alert { padding: 20px; background-color: #00f; color: white; margin-bottom: 15px; }

/* The close button */ .closebtn { margin-left: 15px; color: white; font-weight: bold; float: right; font-size: 22px; line-height: 20px; cursor: pointer; transition: 0.3s; }

/* When moving the mouse over the close button */ .closebtn:hover { color: #e81123; } /* Callout box - fixed position at the bottom of the page */ .callout { position: fixed; bottom: 35px; right: 20px; margin-left: 20px; max-width: 300px; }

/* Callout header */ .callout-header { padding: 25px 15px; background: #04246a; font-size: 30px; color: white; }

/* Callout container/body */ .callout-container { padding: 15px; background-color: #d4d0c8; } /* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */ .flip-box { background-color: transparent;  width: 300px;  height: 200px;  border: 1px solid #f1f1f1;  perspective: 1000px; /* Remove this if you don't want the 3D effect */ }

/* This container is needed to position the front and back side */ .flip-box-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d; }

/* Do an horizontal flip when you move the mouse over the flip box container */ .flip-box:hover .flip-box-inner { transform: rotateY(180deg); }

/* Position the front and back side */ .flip-box-front, .flip-box-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; /* Safari */ backface-visibility: hidden; }

/* Style the back side */ .flip-box-back { transform: rotateY(180deg); } /* For making circles! */ .dot { height: 25px; width: 25px; background-color: #bbb; border-radius: 50%; display: inline-block; } /* RoPhone X tech specs */ .smartphone { position: relative; width: 375px; /* inspired by the iPhone X */ height: 768px; /* inspired by the iPhone X */ margin: auto; border: 16px gold solid; /* lets make the phone gold */ border-top-width: 60px; border-bottom-width: 60px; border-radius: 36px; }

/* The horizontal line on the top of the device */ .smartphone:before { content: ''; display: block; width: 60px; height: 5px; position: absolute; top: -30px; left: 50%; transform: translate(-50%, -50%); background: #333; border-radius: 10px; }

/* The screen (or content) of the device */ .smartphone .content { width: 375px; height: 768px; border:none;

} /* RoPad */ .tablet { position: relative; width: 800px; /* Samsung Galaxy Tab A Dimensions */ height: 1280px; /* Samsung Galaxy Tab A Dimensions */ margin: auto; border: 16px silver solid; /* Samsung Galaxy Tab A Color */ border-top-width: 60px; border-bottom-width: 60px; border-radius: 36px; }

/* The horizontal line on the top of the device */ .tablet:before { content: ''; display: block; width: 60px; height: 5px; position: absolute; top: -30px; left: 50%; transform: translate(-50%, -50%); background: #333; border-radius: 10px; }

/* The screen (or content) of the device */ .tablet .content { width: 800px; height: 1280px; margin: -1px; border:none; } /* Average */ .laptop { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scale(.6) translate(-50%); /* Scaled down for a better Try-it experience (change to 1 for full scale) */ transform: scale(.6) translate(-50%); /* Scaled down for a better Try-it experience (change to 1 for full scale) */ left: 50%; position: absolute; width: 1366px; height: 768px; border-radius: 6px; border-style: solid; border-color: black; border-width: 24px 24px 80px; background: white;

}

/* The keyboard of the laptop */ .laptop:after { content: ''; display: block; position: absolute; width: 1600px; height: 60px; margin: 80px 0 0 -110px; background: black; border-radius: 6px; }

/* The top of the keyboard */ .laptop:before { content: ''; display: block; position: absolute; width: 250px; height: 30px; bottom: -110px; left: 50%; -webkit-transform: translate(-50%); transform: translate(-50%); background: #f1f1f1; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; z-index: 1; }

/* The screen (or content) of the device */ .laptop .content { width: 1366px; height: 768px; overflow: hidden; border: none; }
 * selection {

background: #ffff00; } /* vertical lines */ .vl { border-left: 6px solid green; height: 500px; position: absolute; left: 50%; margin-left: -3px; top: 0; } /* Float five columns side by side */ .column { float: left; width: 20%; padding: 0 5px; }

.row {margin: 0 -5px;}

/* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; }

/* Responsive columns */ @media screen and (max-width: 600px) { .column { width: 100%; display: block; margin-bottom: 10px; } }

/* Style the counter cards */ .card { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); padding: 16px; text-align: center; background-color: #444; color: white; }

.fa {font-size:50px;}