User:Msbah1996on/global.css

/* Import Roboto Font from Google Fonts */ @import url('https://fonts.googleapis.com/css?family=Roboto');

/* Roboto Font for Entire Body */ body{ font-family: 'Roboto', sans-serif; }

/* Global Navigation */ .wds-global-navigation{ background-color: #3C67A0; -webkit-box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -7px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -7px rgba(0, 0, 0, 0.2); box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -7px rgba(0, 0, 0, 0.2); }

/* Insert something before the content on .wds-community-header */ .wds-community-header::before{ -webkit-box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); background: linear-gradient(to right,rgba(48,181,92),rgba(151,218,173,0.5)),linear-gradient(to left,rgba(0,108,176,0) 200px,#006cb0 430px); }

/* Wikia Rail modules */ .WikiaRail .module{ -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3); }

/* Remove default checkbox */ [type="checkbox"]:not(:checked), [type="checkbox"]:checked { position: absolute; opacity: 0; pointer-events: none; }

[type="checkbox"] + span:not(.lever) { position: relative; padding-left: 35px; cursor: pointer; display: inline-block; height: 25px; line-height: 25px; font-size: 1rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

[type="checkbox"] + span:not(.lever):before, [type="checkbox"]:not(.filled-in) + span:not(.lever):after { content: ''; position: absolute; top: 0; left: 0; width: 18px; height: 18px; z-index: 0; border: 2px solid #5a5a5a; border-radius: 1px; margin-top: 3px; -webkit-transition: .2s; -moz-transition: .2s; -o-transition: .2s; transition: .2s; }

[type="checkbox"]:not(.filled-in) + span:not(.lever):after { border: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); }

[type="checkbox"]:not(:checked):disabled + span:not(.lever):before { border: none; background-color: #000000; background-color: rgba(0, 0, 0, 0.42); }

[type="checkbox"].tabbed:focus + span:not(.lever):after { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); border: 0; border-radius: 50%; -webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1); background-color: #000000; background-color: rgba(0, 0, 0, 0.1); }

[type="checkbox"]:checked + span:not(.lever):before { top: -4px; left: -5px; width: 12px; height: 22px; border-top: 2px solid transparent; border-left: 2px solid transparent; border-right: 2px solid #26a69a; border-bottom: 2px solid #26a69a; -webkit-transform: rotate(40deg); -moz-transform: rotate(40deg); -ms-transform: rotate(40deg); -o-transform: rotate(40deg); transform: rotate(40deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; }

[type="checkbox"]:checked:disabled + span:before { border-right: 2px solid #000000; border-right: 2px solid rgba(0, 0, 0, 0.42); border-bottom: 2px solid #000000; border-bottom: 2px solid rgba(0, 0, 0, 0.42); }

/* Indeterminate checkbox */ [type="checkbox"]:indeterminate + span:not(.lever):before { top: -11px; left: -12px; width: 10px; height: 22px; border-top: none; border-left: none; border-right: 2px solid #26a69a; border-bottom: none; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; }

[type="checkbox"]:indeterminate:disabled + span:not(.lever):before { border-right: 2px solid #000000; border-right: 2px solid rgba(0, 0, 0, 0.42); background-color: transparent; }

[type="checkbox"].filled-in + span:not(.lever):after { border-radius: 2px; }

[type="checkbox"].filled-in + span:not(.lever):before, [type="checkbox"].filled-in + span:not(.lever):after { content: ''; left: 0; position: absolute; /* .1s delay is for check animation */ -webkit-transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s; -moz-transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s; -o-transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s; transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s; z-index: 1; }

[type="checkbox"].filled-in:not(:checked) + span:not(.lever):before { width: 0; height: 0; border: 3px solid transparent; left: 6px; top: 10px; -webkit-transform: rotateZ(37deg); -moz-transform: rotateZ(37deg); -ms-transform: rotateZ(37deg); -o-transform: rotateZ(37deg); transform: rotateZ(37deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; }

[type="checkbox"].filled-in:not(:checked) + span:not(.lever):after { height: 20px; width: 20px; background-color: transparent; border: 2px solid #5a5a5a; top: 0px; z-index: 0; }

[type="checkbox"].filled-in:checked + span:not(.lever):before { top: 0; left: 1px; width: 8px; height: 13px; border-top: 2px solid transparent; border-left: 2px solid transparent; border-right: 2px solid #fff; border-bottom: 2px solid #fff; -webkit-transform: rotateZ(37deg); -moz-transform: rotateZ(37deg); -ms-transform: rotateZ(37deg); -o-transform: rotateZ(37deg); transform: rotateZ(37deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; }

[type="checkbox"].filled-in:checked + span:not(.lever):after { top: 0; width: 20px; height: 20px; border: 2px solid #26a69a; background-color: #26a69a; z-index: 0; }

[type="checkbox"] .filled-in .tabbed:focus + span:not(.lever):after { border-radius: 2px; border-color: #5a5a5a; background-color: #000000; background-color: rgba(0, 0, 0, 0.1); }

[type="checkbox"] .filled-in .tabbed:checked:focus + span:not(.lever):after { border-radius: 2px; background-color: #26a69a; border-color: #26a69a; }

[type="checkbox"].filled-in:disabled:not(:checked) + span:not(.lever):before { background-color: transparent; border: 2px solid transparent; }

[type="checkbox"].filled-in:disabled:not(:checked) + span:not(.lever):after { border-color: transparent; background-color: #949494; }

[type="checkbox"].filled-in:disabled:checked + span:not(.lever):before { background-color: transparent; }

[type="checkbox"].filled-in:disabled:checked + span:not(.lever):after { background-color: #949494; border-color: #949494; }

/* Module Content */

input:not([type]), input[type=text]:not(.browser-default), input[type=password]:not(.browser-default), input[type=email]:not(.browser-default), input[type=url]:not(.browser-default), input[type=time]:not(.browser-default), input[type=date]:not(.browser-default), input[type=datetime]:not(.browser-default), input[type=datetime-local]:not(.browser-default), input[type=tel]:not(.browser-default), input[type=number]:not(.browser-default), textarea.materialize-textarea { background-color: transparent; border: none; border-bottom: 1px solid #9e9e9e; border-radius: 0; outline: none; height: 3rem; width: 100%; font-size: 16px; margin: 0 0 8px 0; padding: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; -webkit-transition: border .3s, -webkit-box-shadow .3s; -moz-transition: border .3s, -webkit-box-shadow .3s; -o-transition: border .3s, -webkit-box-shadow .3s; transition: border .3s, -webkit-box-shadow .3s; transition: box-shadow .3s, border .3s; transition: box-shadow .3s, border .3s, -webkit-box-shadow .3s; }

/* WDS Buttons and avatar on Hover*/ .wds-button:hover, .avatar:hover{ -webkit-transition: -webkit-box-shadow .25s; -moz-transition: -webkit-box-shadow .25s; -o-transition: -webkit-box-shadow .25s; transition: -webkit-box-shadow .25s; transition: box-shadow .25s; transition: box-shadow .25s, -webkit-box-shadow .25s; -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); -moz-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }