User:Acme Gamer/global.css

Intro
So, this will be my coding area [if anyone seeing it], here I shall be testing up some codes for this wiki. Don't worry, I won't implement anything on any page until I prepare my codes and show them to the admins.

(Note: Codes used here won't be mine completely, but I'm just using them for training & educational purpose).

====

Testing Tab
This is is the tab in question, simply putting, the Tab where I will be putting some animated filters for smooth scrolling and switching when switched to the other tab. Hmm, there are 3 animals I like the most,
 * -|Favorite Animales=


 * Panda!! [Really, Panda's are my favorite as they are living walking teddy bears]
 * Fox
 * Wolf
 * -| How I work on Media Wiki=

I usually use codes for working on any wiki, though, I use Visuals only if I need to do some quick formatting of huge text.

Examples:


 * Queries that I post on Brave Frontier Wiki on threads is mostly done in coded form.


 * Though, just to differ each skill and asset, I use Dark & light [that is bold & italic] for quick formatting for better understanding using visuals if there is a huge list to format


 * I can't use Underline that would be " " and "< /u >" on every single character name so, I use visuals in this case. Though, it depends on mostly what content I'm facing.


 * -| Languages I know=

Languages used in daily life:

I know 6 languages, but each has a fall but, I can read and write your messages in these languages too,


 * Urdu [Native Language]
 * Punjabi [Native language] :: On the note, I don't speak in Punjabi, though, I can understand it well.


 * English [Second Language]
 * Hindi [Similar to Urdu in vocal and plain chatting though, not syntax of course]
 * Bengali [Similar to Urdu in vocal and plain chatting though, not syntax of course]
 * Japanese [Under-development]

 (Facts:  I can't count more than 40 in my native language, so I need to ask in English for the price. Where in Japanese I can count more than 100. Weird right ).''

Lanugages used in Codings:

I know 6 languages in computer and design terms though, all of them are under-development,


 * Python [Basics]
 * C [Basics & Currently learning]
 * C++ [Basics & Currently learning]
 * HTML/CSS/JS [Basics & Currently learning]
 * GW-Basic [Intermidate]

what it is converting in any format, though, it still counts as Basics].
 * Machine Language [Can understand what machine is giving output in Binary no's and

Example:

1001001100011101 = 1001 0011 0001 1101 = 9 3 1 D

(Note: In memory, data is compromised in the form of 0's & 1's and making each 8 strings of 0's & 1's makes one byte).

[Fact: In total, I know 12 different languages that may or may not be similar to previous languages as each language has it's own rules and regulations to perform something].


 * -| Editing=

This tab is still under development, though, will edit it in my free time😊.

Code#1: .tabberlive { /* tabber wrapper style */ } .tabberlive > .tabbertab:not(.tabbertabhide) { /* tabber visible content */ } .tabberlive > .tabbernav > li > a { /* tabber tabs */ } .tabberlive > .tabbernav > li > a:hover { /* tabber tabs when being hovered */ } .tabberlive > .tabbernav > li > a:active { /* tabber tabs when being clicked */ } .tabberlive > .tabbernav > li.tabberactive > a { /* selected tabber tab */ } .tabberlive > .tabbernav > li.tabberactive > a:hover { /* selected tabber tab when being hovered */ } .tabberlive > .tabbernav > li.tabberactive > a:active { /* selected tabber tab when being clicked */ }

Code

Other Codes:

z-index: 10; position: relative; }   background: #f3f3f3; border: 1px solid silver; padding: 0.5em 1em; display: inline-block; cursor: pointer; margin-right: -1px; margin-bottom: -1px; color: #0645ad; }   background: transparent; color: #000; border-bottom-color: #fcfcfc; }   border: 1px solid silver; padding: 1em; z-index: 1; overflow: auto; display: none; }   z-index: 1; }
 * 1) wiki-editor-tabs{
 * 1) wiki-editor-tabs div{
 * 1) wiki-editor-tabs div.current{
 * 1) wiki-editor-tabs-preview{
 * 1) editform{

.sk-fading-circle { margin: 100px auto; width: 40px; height: 40px; position: relative; }

.sk-fading-circle .sk-circle { width: 100%; height: 100%; position: absolute; left: 0; top: 0; }

.sk-fading-circle .sk-circle:before { content: ; display: block; margin: 0 auto; width: 15%; height: 15%; background-color: #333; border-radius: 100%; -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; } .sk-fading-circle .sk-circle2 { -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); } .sk-fading-circle .sk-circle3 { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); } .sk-fading-circle .sk-circle4 { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .sk-fading-circle .sk-circle5 { -webkit-transform: rotate(120deg); -ms-transform: rotate(120deg); transform: rotate(120deg); } .sk-fading-circle .sk-circle6 { -webkit-transform: rotate(150deg); -ms-transform: rotate(150deg); transform: rotate(150deg); } .sk-fading-circle .sk-circle7 { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .sk-fading-circle .sk-circle8 { -webkit-transform: rotate(210deg); -ms-transform: rotate(210deg); transform: rotate(210deg); } .sk-fading-circle .sk-circle9 { -webkit-transform: rotate(240deg); -ms-transform: rotate(240deg); transform: rotate(240deg); } .sk-fading-circle .sk-circle10 { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } .sk-fading-circle .sk-circle11 { -webkit-transform: rotate(300deg); -ms-transform: rotate(300deg); transform: rotate(300deg); } .sk-fading-circle .sk-circle12 { -webkit-transform: rotate(330deg); -ms-transform: rotate(330deg); transform: rotate(330deg); } .sk-fading-circle .sk-circle2:before { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .sk-fading-circle .sk-circle3:before { -webkit-animation-delay: -1s; animation-delay: -1s; } .sk-fading-circle .sk-circle4:before { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .sk-fading-circle .sk-circle5:before { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .sk-fading-circle .sk-circle6:before { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } .sk-fading-circle .sk-circle7:before { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .sk-fading-circle .sk-circle8:before { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .sk-fading-circle .sk-circle9:before { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .sk-fading-circle .sk-circle10:before { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } .sk-fading-circle .sk-circle11:before { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .sk-fading-circle .sk-circle12:before { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; }

@-webkit-keyframes sk-circleFadeDelay { 0%, 39%, 100% { opacity: 0; } 40% { opacity: 1; } }

@keyframes sk-circleFadeDelay { 0%, 39%, 100% { opacity: 0; } 40% { opacity: 1; } }

Code#2

(function($) { // static constructs $.tools = $.tools || {version: 'v1.2.6'}; $.tools.tabs = { conf: { tabs: 'a', current: 'current', onBeforeClick: null, onClick: null, effect: 'default', initialIndex: 0, event: 'click', rotate: false,      // slide effect      slideUpSpeed: 400,      slideDownSpeed: 400, // 1.2 history: false }, addEffect: function(name, fn) { effects[name] = fn; } }; var effects = { // simple "toggle" effect 'default': function(i, done) {  this.getPanes.hide.eq(i).show; done.call; }, /* configuration: - fadeOutSpeed (positive value does "crossfading") - fadeInSpeed */ fade: function(i, done) { var conf = this.getConf, speed = conf.fadeOutSpeed, panes = this.getPanes; if (speed) { panes.fadeOut(speed); } else { panes.hide; }

panes.eq(i).fadeIn(conf.fadeInSpeed, done); }, // for basic accordions slide: function(i, done) { var conf = this.getConf; this.getPanes.slideUp(conf.slideUpSpeed); this.getPanes.eq(i).slideDown(conf.slideDownSpeed, done); },

/** * AJAX effect */ ajax: function(i, done) { this.getPanes.eq(0).load(this.getTabs.eq(i).attr("href"), done); } }; /** * Horizontal accordion * * @deprecated will be replaced with a more robust implementation */ var /** * @type {Boolean} * * Mutex to control horizontal animation * Disables clicking of tabs while animating * They mess up otherwise as currentPane gets set *after* animation is done */ animating, /** * @type {Number} *   * Initial width of tab panes */ w; $.tools.tabs.addEffect("horizontal", function(i, done) { if (animating) return; // don't allow other animations var nextPane = this.getPanes.eq(i), currentPane = this.getCurrentPane; // store original width of a pane into memory w || ( w = this.getPanes.eq(0).width ); animating = true; nextPane.show; // hidden by default // animate current pane's width to zero   // animate next pane's width at the same time for smooth animation    currentPane.animate({width: 0}, { step: function(now){ nextPane.css("width", w-now); },     complete: function{ $(this).hide; done.call; animating = false; }   });    // Case...  onLoad, currentPant will be empty and nextPane will be the first pane    // If this is the case, manually run callback since the animation never occured, and reset animating    if (!currentPane.length){       done.call;       animating = false;    } });

function Tabs(root, paneSelector, conf) { var self = this, trigger = root.add(this), tabs = root.find(conf.tabs), panes = paneSelector.jquery ? paneSelector : root.children(paneSelector), current;

// make sure tabs and panes are found if (!tabs.length) { tabs = root.children; } if (!panes.length) { panes = root.parent.find(paneSelector); } if (!panes.length) { panes = $(paneSelector); }

// public methods $.extend(this, { click: function(i, e) { var tab = tabs.eq(i); if (typeof i == 'string' && i.replace("#", "")) { tab = tabs.filter("[href*=" + i.replace("#", "") + "]"); i = Math.max(tabs.index(tab), 0); } if (conf.rotate) { var last = tabs.length -1; if (i < 0) { return self.click(last, e); } if (i > last) { return self.click(0, e); } } if (!tab.length) { if (current >= 0) { return self; } i = conf.initialIndex; tab = tabs.eq(i); } // current tab is being clicked if (i === current) { return self; } // possibility to cancel click action e = e || $.Event; e.type = "onBeforeClick"; trigger.trigger(e, [i]); if (e.isDefaultPrevented) { return; }

// call the effect effects[conf.effect].call(self, i, function { current = i; // onClick callback e.type = "onClick"; trigger.trigger(e, [i]); }); // default behaviour tabs.removeClass(conf.current); tab.addClass(conf.current); return self; }, getConf: function { return conf; },

getTabs: function { return tabs; }, getPanes: function { return panes; }, getCurrentPane: function { return panes.eq(current); }, getCurrentTab: function { return tabs.eq(current); }, getIndex: function { return current; }, next: function { return self.click(current + 1); }, prev: function { return self.click(current - 1); }, destroy: function { tabs.off(conf.event).removeClass(conf.current); panes.find("a[href^=#]").off("click.T"); return self; } });

// callbacks $.each("onBeforeClick,onClick".split(","), function(i, name) { // configuration if ($.isFunction(conf[name])) { $(self).on(name, conf[name]); }

// API self[name] = function(fn) { if (fn) { $(self).on(name, fn); } return self; }; });

if (conf.history && $.fn.history) { $.tools.history.init(tabs); conf.event = 'history'; } // setup click actions for each tab tabs.each(function(i) { $(this).on(conf.event, function(e) { self.click(i, e); return e.preventDefault; }); }); // cross tab anchor link panes.find("a[href^=#]").on("click.T", function(e) { self.click($(this).attr("href"), e); }); // open initial tab if (location.hash && conf.tabs == "a" && root.find('[href="' + location.hash + '"]').length) { self.click(location.hash);

} else { if (conf.initialIndex === 0 || conf.initialIndex > 0) { self.click(conf.initialIndex); } } }

// jQuery plugin implementation $.fn.tabs = function(paneSelector, conf) { // return existing instance var el = this.data("tabs"); if (el) { el.destroy; this.removeData("tabs"); }

if ($.isFunction(conf)) { conf = {onBeforeClick: conf}; } // setup conf conf = $.extend({}, $.tools.tabs.conf, conf);

this.each(function { el = new Tabs($(this), paneSelector, conf); $(this).data("tabs", el); }); return conf.api ? el: this; }; }) (jQuery);