MediaWiki:CustomSlider.css

background: transparent; width: 100%; height: auto; position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; text-align: center; /* Overall- Ends at same spot, but goes out further to left. Find fitting text shadow and color combination. Then font. To do- Find out if google font overrides selected font,set top or line height to make titlebar? . Ideas- Selected= White. Unselected= black?*/ } position: relative; -webkit-transition: 1s; -o-transition: 1s; transition: 1s; -webkit-transition-timing-function: cubic-bezier(.67,.01,.23,1); -o-transition-timing-function: cubic-bezier(.67,.01,.23,1); transition-timing-function: cubic-bezier(.67,.01,.23,1); }    /*Stuff that changes where the slider box is on your screen*/ margin: 0px; padding: 0px; } /* List of tabs. The tabs themselves? Yes! Keeping the same padding here as in the buttons will make sure nothing moves. Otherwise, when hovering or selecting tabs, the text or width of the button will change. Maybe. Have yet to verify. If this is the case, it only happens with height. Padding-right will move everything to the left, create a space to the right of the text. Padding-left doesn't seem to do anything.*/ margin: 0px; padding-top: 25px; padding-bottom: 17px; /*!!!!!!!!!!These two pesky functions: decide how far left/right that list thing really goes Looks like they have to be the same if you want to move anything. These are responsible for all those comments you see about padding and left/right.*/ padding-right: 20px; padding-left: 20px; } /*Not sure what changing stuff here this does yet*/ .Sld { height: auto; list-style: none; display: inline; float: left; } /*Stuff changing way the images themselves are displayed*/ .SlideIMG { width: 100%; } .SlideIMG img { display: block; max-width: 100%; height: auto; min-width: 100%; min-height: 100%; position: relative; } /*Stuff for the tabs. Can't tell what changing padding or margin left and right here does.*/ position: absolute; display: block; } /*Text within the tabs? Changing padding left/right doesn't seem to do anything. Base info for the regular ones. Looks like padding only needs to be changed once, here, if everything else is to stay the same. Otherwise, it seems to compound on itself.*/ .NavBtn { position: relative; display: block; /*Changing top here changes how high/low the list begins */ top: 0px; /*Width= how wide you allow the list to be*/ width: auto; height: auto; list-style: none; /* Setting margin left or right here doesn't seem to do anything */ margin: 0px; padding-top: 25px; padding-bottom: 17px; /* Padding left and right here doesn't seem to do anything */ padding-right: 0px; padding-left: 0px; background: transparent; font-family: arial, san-serif; font-size: 24px; font-weight: bold; text-shadow: 1px 1px rgba(248, 107, 100, .3), -1px 0 rgba(248,186,135,0.3); color: rgb(255, 248, 214) } .nmLeft { height: 100%; left: 0px; background: linear-gradient(to right, rgba(61,61,61,0.8), rgba(61,61,61,0.8), transparent); } .nmLeft li { list-style: none; } .nmLeft li:hover { cursor: pointer; background: linear-gradient(to right, rgba(177, 181, 181,0.8), rgba(177, 181, 181,0.8), transparent); } .nmBottom { width: 100%; bottom: 0px; background: linear-gradient(to top, rgba(159, 209, 254, 1), rgba(159, 209, 254, 1), transparent); text-align: left; } .nmBottom li { display: inline-block; list-style: none; } .nmBottom li:hover { cursor: pointer; background: linear-gradient(to top, rgba(177, 181, 181,0.8), rgba(177, 181, 181,0.8), transparent); } .nmRight { height: 100%; right: 0px; background: linear-gradient(to left, rgba(189, 215, 236, 1), transparent); text-align: right ; } .nmRight li { padding: 10px 10px 10px 100px; list-style: none; } /*Gradient for right to left and text stuff, hovered tab.*/ .nmRight li:hover { cursor: pointer; padding: 10px 10px 10px 100px; border-radius: 5px; background: linear-gradient(to left, rgba(159, 209, 254, 1), rgba(159, 209, 254, 1), transparent    ); font-family: arial, san-serif; font-size: 24px; font-weight: bold; text-shadow: 1px 1px rgba(88, 88, 198, .3), -1px 0 rgba(148, 148, 214,0.3); color: rgb(229, 227, 239) } .nmTop { width: 100%; top: 0px; background: linear-gradient(to bottom, rgba(61,61,61,0.8), rgba(61,61,61,0.8), transparent); text-align: left; } .nmTop li { display: inline-block; list-style: none; } .nmTop li:hover { cursor: pointer; background: linear-gradient(to bottom, rgba(177, 181, 181,0.8), rgba(177, 181, 181,0.8), transparent); } .nbActiveLeft { background: linear-gradient(to right, rgba(217, 221, 221,0.8), rgba(217, 221, 221,0.8), transparent); } /*Right to left gradient for active tab, stuff for text in active tab too.*/ .nbActiveRight { background: linear-gradient(to left, rgba( 0, 110, 179, 1), rgba( 0, 110, 179, 1), transparent); font-family: arial, san-serif; font-size: 24px; font-weight: bold; text-shadow: 1px 1px rgba(255, 255, 255, 0.3), -1px 0 rgba(0,0,0,0.3); color: rgb(255,255,255); } .nbActiveTop { background: linear-gradient(to bottom, rgba(217, 221, 221,0.8), rgba(217, 221, 221,0.8), transparent); } .nbActiveBottom { background: linear-gradient(to top, rgba(159, 209, 254, 1), rgba(159, 209, 254, 1), transparent); } /*Text associated with each image.*/ .sl_info { position: relative; top: -25px; width: 100%; text-align: left; background: rgba(55, 194, 241, 0.52) ;           text-shadow: 1px 2px rgba( 0, 0, 0, .3), -1px 0 rgba( 0,0,0,.3); color: rgba(255, 255, 255, 1); /*Padding= extra space in a tab around the text. Must specify direction for better results*/ padding: 10px; margin: -25px 0px -25px 0px; }
 * 1) SliderView {
 * 1) SliderWrapper {
 * 1) SliderWrapper, #SliderWrapper ul, #SliderWrapper li, #NavBtns, #NavBtns ul {
 * 1) NavBtns li {
 * 1) NavBtns {