Last active
March 18, 2019 20:11
-
-
Save zbryikt/7165066 to your computer and use it in GitHub Desktop.
Here is a sample of heatmap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Here is a sample of heatmap |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * heatmap.js 1.0 - JavaScript Heatmap Library | |
| * | |
| * Copyright (c) 2011, Patrick Wied (http://www.patrick-wied.at) | |
| * Dual-licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) | |
| * and the Beerware (http://en.wikipedia.org/wiki/Beerware) license. | |
| */ | |
| (function(w){ | |
| // the heatmapFactory creates heatmap instances | |
| var heatmapFactory = (function(){ | |
| // store object constructor | |
| // a heatmap contains a store | |
| // the store has to know about the heatmap in order to trigger heatmap updates when datapoints get added | |
| var store = function store(hmap){ | |
| var _ = { | |
| // data is a two dimensional array | |
| // a datapoint gets saved as data[point-x-value][point-y-value] | |
| // the value at [point-x-value][point-y-value] is the occurrence of the datapoint | |
| data: [], | |
| // tight coupling of the heatmap object | |
| heatmap: hmap | |
| }; | |
| // the max occurrence - the heatmaps radial gradient alpha transition is based on it | |
| this.max = 1; | |
| this.get = function(key){ | |
| return _[key]; | |
| }; | |
| this.set = function(key, value){ | |
| _[key] = value; | |
| }; | |
| } | |
| store.prototype = { | |
| // function for adding datapoints to the store | |
| // datapoints are usually defined by x and y but could also contain a third parameter which represents the occurrence | |
| addDataPoint: function(x, y){ | |
| if(x < 0 || y < 0) | |
| return; | |
| var me = this, | |
| heatmap = me.get("heatmap"), | |
| data = me.get("data"); | |
| if(!data[x]) | |
| data[x] = []; | |
| if(!data[x][y]) | |
| data[x][y] = 0; | |
| // if count parameter is set increment by count otherwise by 1 | |
| data[x][y]+=(arguments.length<3)?1:arguments[2]; | |
| me.set("data", data); | |
| // do we have a new maximum? | |
| if(me.max < data[x][y]){ | |
| // max changed, we need to redraw all existing(lower) datapoints | |
| heatmap.get("actx").clearRect(0,0,heatmap.get("width"),heatmap.get("height")); | |
| me.setDataSet({ max: data[x][y], data: data }, true); | |
| return; | |
| } | |
| heatmap.drawAlpha(x, y, data[x][y], true); | |
| }, | |
| setDataSet: function(obj, internal){ | |
| var me = this, | |
| heatmap = me.get("heatmap"), | |
| data = [], | |
| d = obj.data, | |
| dlen = d.length; | |
| // clear the heatmap before the data set gets drawn | |
| heatmap.clear(); | |
| this.max = obj.max; | |
| // if a legend is set, update it | |
| heatmap.get("legend") && heatmap.get("legend").update(obj.max); | |
| if(internal != null && internal){ | |
| for(var one in d){ | |
| // jump over undefined indexes | |
| if(one === undefined) | |
| continue; | |
| for(var two in d[one]){ | |
| if(two === undefined) | |
| continue; | |
| // if both indexes are defined, push the values into the array | |
| heatmap.drawAlpha(one, two, d[one][two], false); | |
| } | |
| } | |
| }else{ | |
| while(dlen--){ | |
| var point = d[dlen]; | |
| heatmap.drawAlpha(point.x, point.y, point.count, false); | |
| if(!data[point.x]) | |
| data[point.x] = []; | |
| if(!data[point.x][point.y]) | |
| data[point.x][point.y] = 0; | |
| data[point.x][point.y] = point.count; | |
| } | |
| } | |
| heatmap.colorize(); | |
| this.set("data", d); | |
| }, | |
| exportDataSet: function(){ | |
| var me = this, | |
| data = me.get("data"), | |
| exportData = []; | |
| for(var one in data){ | |
| // jump over undefined indexes | |
| if(one === undefined) | |
| continue; | |
| for(var two in data[one]){ | |
| if(two === undefined) | |
| continue; | |
| // if both indexes are defined, push the values into the array | |
| exportData.push({x: parseInt(one, 10), y: parseInt(two, 10), count: data[one][two]}); | |
| } | |
| } | |
| return { max: me.max, data: exportData }; | |
| }, | |
| generateRandomDataSet: function(points){ | |
| var heatmap = this.get("heatmap"), | |
| w = heatmap.get("width"), | |
| h = heatmap.get("height"); | |
| var randomset = {}, | |
| max = Math.floor(Math.random()*1000+1); | |
| randomset.max = max; | |
| var data = []; | |
| while(points--){ | |
| data.push({x: Math.floor(Math.random()*w+1), y: Math.floor(Math.random()*h+1), count: Math.floor(Math.random()*max+1)}); | |
| } | |
| randomset.data = data; | |
| this.setDataSet(randomset); | |
| } | |
| }; | |
| var legend = function legend(config){ | |
| this.config = config; | |
| var _ = { | |
| element: null, | |
| labelsEl: null, | |
| gradientCfg: null, | |
| ctx: null | |
| }; | |
| this.get = function(key){ | |
| return _[key]; | |
| }; | |
| this.set = function(key, value){ | |
| _[key] = value; | |
| }; | |
| this.init(); | |
| }; | |
| legend.prototype = { | |
| init: function(){ | |
| var me = this, | |
| config = me.config, | |
| title = config.title || "Legend", | |
| position = config.position, | |
| offset = config.offset || 10, | |
| gconfig = config.gradient, | |
| labelsEl = document.createElement("ul"), | |
| labelsHtml = "", | |
| grad, element, gradient, positionCss = ""; | |
| me.processGradientObject(); | |
| // Positioning | |
| // top or bottom | |
| if(position.indexOf('t') > -1){ | |
| positionCss += 'top:'+offset+'px;'; | |
| }else{ | |
| positionCss += 'bottom:'+offset+'px;'; | |
| } | |
| // left or right | |
| if(position.indexOf('l') > -1){ | |
| positionCss += 'left:'+offset+'px;'; | |
| }else{ | |
| positionCss += 'right:'+offset+'px;'; | |
| } | |
| element = document.createElement("div"); | |
| element.style.cssText = "border-radius:5px;position:absolute;"+positionCss+"font-family:Helvetica; width:256px;z-index:10000000000; background:rgba(255,255,255,1);padding:10px;border:1px solid black;margin:0;"; | |
| element.innerHTML = "<h3 style='padding:0;margin:0;text-align:center;font-size:16px;'>"+title+"</h3>"; | |
| // create gradient in canvas | |
| labelsEl.style.cssText = "position:relative;font-size:12px;display:block;list-style:none;list-style-type:none;margin:0;height:15px;"; | |
| // create gradient element | |
| gradient = document.createElement("div"); | |
| gradient.style.cssText = ["position:relative;display:block;width:256px;height:15px;border-bottom:1px solid black; background-image:url(",me.createGradientImage(),");"].join(""); | |
| element.appendChild(labelsEl); | |
| element.appendChild(gradient); | |
| me.set("element", element); | |
| me.set("labelsEl", labelsEl); | |
| me.update(1); | |
| }, | |
| processGradientObject: function(){ | |
| // create array and sort it | |
| var me = this, | |
| gradientConfig = this.config.gradient, | |
| gradientArr = []; | |
| for(var key in gradientConfig){ | |
| if(gradientConfig.hasOwnProperty(key)){ | |
| gradientArr.push({ stop: key, value: gradientConfig[key] }); | |
| } | |
| } | |
| gradientArr.sort(function(a, b){ | |
| return (a.stop - b.stop); | |
| }); | |
| gradientArr.unshift({ stop: 0, value: 'rgba(0,0,0,0)' }); | |
| me.set("gradientArr", gradientArr); | |
| }, | |
| createGradientImage: function(){ | |
| var me = this, | |
| gradArr = me.get("gradientArr"), | |
| length = gradArr.length, | |
| canvas = document.createElement("canvas"), | |
| ctx = canvas.getContext("2d"), | |
| grad; | |
| // the gradient in the legend including the ticks will be 256x15px | |
| canvas.width = "256"; | |
| canvas.height = "15"; | |
| grad = ctx.createLinearGradient(0,5,256,10); | |
| for(var i = 0; i < length; i++){ | |
| grad.addColorStop(1/(length-1) * i, gradArr[i].value); | |
| } | |
| ctx.fillStyle = grad; | |
| ctx.fillRect(0,5,256,10); | |
| ctx.strokeStyle = "black"; | |
| ctx.beginPath(); | |
| for(var i = 0; i < length; i++){ | |
| ctx.moveTo(((1/(length-1)*i*256) >> 0)+.5, 0); | |
| ctx.lineTo(((1/(length-1)*i*256) >> 0)+.5, (i==0)?15:5); | |
| } | |
| ctx.moveTo(255.5, 0); | |
| ctx.lineTo(255.5, 15); | |
| ctx.moveTo(255.5, 4.5); | |
| ctx.lineTo(0, 4.5); | |
| ctx.stroke(); | |
| // we re-use the context for measuring the legends label widths | |
| me.set("ctx", ctx); | |
| return canvas.toDataURL(); | |
| }, | |
| getElement: function(){ | |
| return this.get("element"); | |
| }, | |
| update: function(max){ | |
| var me = this, | |
| gradient = me.get("gradientArr"), | |
| ctx = me.get("ctx"), | |
| labels = me.get("labelsEl"), | |
| labelText, labelsHtml = "", offset; | |
| for(var i = 0; i < gradient.length; i++){ | |
| labelText = max*gradient[i].stop >> 0; | |
| offset = (ctx.measureText(labelText).width/2) >> 0; | |
| if(i == 0){ | |
| offset = 0; | |
| } | |
| if(i == gradient.length-1){ | |
| offset *= 2; | |
| } | |
| labelsHtml += '<li style="position:absolute;left:'+(((((1/(gradient.length-1)*i*256) || 0)) >> 0)-offset+.5)+'px">'+labelText+'</li>'; | |
| } | |
| labels.innerHTML = labelsHtml; | |
| } | |
| }; | |
| // heatmap object constructor | |
| var heatmap = function heatmap(config){ | |
| // private variables | |
| var _ = { | |
| radius : 40, | |
| element : {}, | |
| canvas : {}, | |
| acanvas: {}, | |
| ctx : {}, | |
| actx : {}, | |
| legend: null, | |
| visible : true, | |
| width : 0, | |
| height : 0, | |
| max : false, | |
| gradient : false, | |
| opacity: 180, | |
| premultiplyAlpha: false, | |
| bounds: { | |
| l: 1000, | |
| r: 0, | |
| t: 1000, | |
| b: 0 | |
| }, | |
| debug: false | |
| }; | |
| // heatmap store containing the datapoints and information about the maximum | |
| // accessible via instance.store | |
| this.store = new store(this); | |
| this.get = function(key){ | |
| return _[key]; | |
| }; | |
| this.set = function(key, value){ | |
| _[key] = value; | |
| }; | |
| // configure the heatmap when an instance gets created | |
| this.configure(config); | |
| // and initialize it | |
| this.init(); | |
| }; | |
| // public functions | |
| heatmap.prototype = { | |
| configure: function(config){ | |
| var me = this, | |
| rout, rin; | |
| me.set("radius", config["radius"] || 40); | |
| me.set("element", (config.element instanceof Object)?config.element:document.getElementById(config.element)); | |
| me.set("visible", (config.visible != null)?config.visible:true); | |
| me.set("max", config.max || false); | |
| me.set("gradient", config.gradient || { 0.45: "rgb(0,0,255)", 0.55: "rgb(0,255,255)", 0.65: "rgb(0,255,0)", 0.95: "yellow", 1.0: "rgb(255,0,0)"}); // default is the common blue to red gradient | |
| me.set("opacity", parseInt(255/(100/config.opacity), 10) || 180); | |
| me.set("width", config.width || 0); | |
| me.set("height", config.height || 0); | |
| me.set("debug", config.debug); | |
| if(config.legend){ | |
| var legendCfg = config.legend; | |
| legendCfg.gradient = me.get("gradient"); | |
| me.set("legend", new legend(legendCfg)); | |
| } | |
| }, | |
| resize: function () { | |
| var me = this, | |
| element = me.get("element"), | |
| canvas = me.get("canvas"), | |
| acanvas = me.get("acanvas"); | |
| canvas.width = acanvas.width = me.get("width") || element.style.width.replace(/px/, "") || me.getWidth(element); | |
| this.set("width", canvas.width); | |
| canvas.height = acanvas.height = me.get("height") || element.style.height.replace(/px/, "") || me.getHeight(element); | |
| this.set("height", canvas.height); | |
| }, | |
| init: function(){ | |
| var me = this, | |
| canvas = document.createElement("canvas"), | |
| acanvas = document.createElement("canvas"), | |
| ctx = canvas.getContext("2d"), | |
| actx = acanvas.getContext("2d"), | |
| element = me.get("element"); | |
| me.initColorPalette(); | |
| me.set("canvas", canvas); | |
| me.set("ctx", ctx); | |
| me.set("acanvas", acanvas); | |
| me.set("actx", actx); | |
| me.resize(); | |
| canvas.style.cssText = acanvas.style.cssText = "position:absolute;top:0;left:0;z-index:10000000;"; | |
| if(!me.get("visible")) | |
| canvas.style.display = "none"; | |
| element.appendChild(canvas); | |
| if(me.get("legend")){ | |
| element.appendChild(me.get("legend").getElement()); | |
| } | |
| // debugging purposes only | |
| if(me.get("debug")) | |
| document.body.appendChild(acanvas); | |
| actx.shadowOffsetX = 15000; | |
| actx.shadowOffsetY = 15000; | |
| actx.shadowBlur = 15; | |
| }, | |
| initColorPalette: function(){ | |
| var me = this, | |
| canvas = document.createElement("canvas"), | |
| gradient = me.get("gradient"), | |
| ctx, grad, testData; | |
| canvas.width = "1"; | |
| canvas.height = "256"; | |
| ctx = canvas.getContext("2d"); | |
| grad = ctx.createLinearGradient(0,0,1,256); | |
| // Test how the browser renders alpha by setting a partially transparent pixel | |
| // and reading the result. A good browser will return a value reasonably close | |
| // to what was set. Some browsers (e.g. on Android) will return a ridiculously wrong value. | |
| testData = ctx.getImageData(0,0,1,1); | |
| testData.data[0] = testData.data[3] = 64; // 25% red & alpha | |
| testData.data[1] = testData.data[2] = 0; // 0% blue & green | |
| ctx.putImageData(testData, 0, 0); | |
| testData = ctx.getImageData(0,0,1,1); | |
| me.set("premultiplyAlpha", (testData.data[0] < 60 || testData.data[0] > 70)); | |
| for(var x in gradient){ | |
| grad.addColorStop(x, gradient[x]); | |
| } | |
| ctx.fillStyle = grad; | |
| ctx.fillRect(0,0,1,256); | |
| me.set("gradient", ctx.getImageData(0,0,1,256).data); | |
| }, | |
| getWidth: function(element){ | |
| var width = element.offsetWidth; | |
| if(element.style.paddingLeft){ | |
| width+=element.style.paddingLeft; | |
| } | |
| if(element.style.paddingRight){ | |
| width+=element.style.paddingRight; | |
| } | |
| return width; | |
| }, | |
| getHeight: function(element){ | |
| var height = element.offsetHeight; | |
| if(element.style.paddingTop){ | |
| height+=element.style.paddingTop; | |
| } | |
| if(element.style.paddingBottom){ | |
| height+=element.style.paddingBottom; | |
| } | |
| return height; | |
| }, | |
| colorize: function(x, y){ | |
| // get the private variables | |
| var me = this, | |
| width = me.get("width"), | |
| radius = me.get("radius"), | |
| height = me.get("height"), | |
| actx = me.get("actx"), | |
| ctx = me.get("ctx"), | |
| x2 = radius * 3, | |
| premultiplyAlpha = me.get("premultiplyAlpha"), | |
| palette = me.get("gradient"), | |
| opacity = me.get("opacity"), | |
| bounds = me.get("bounds"), | |
| left, top, bottom, right, | |
| image, imageData, length, alpha, offset, finalAlpha; | |
| if(x != null && y != null){ | |
| if(x+x2>width){ | |
| x=width-x2; | |
| } | |
| if(x<0){ | |
| x=0; | |
| } | |
| if(y<0){ | |
| y=0; | |
| } | |
| if(y+x2>height){ | |
| y=height-x2; | |
| } | |
| left = x; | |
| top = y; | |
| right = x + x2; | |
| bottom = y + x2; | |
| }else{ | |
| if(bounds['l'] < 0){ | |
| left = 0; | |
| }else{ | |
| left = bounds['l']; | |
| } | |
| if(bounds['r'] > width){ | |
| right = width; | |
| }else{ | |
| right = bounds['r']; | |
| } | |
| if(bounds['t'] < 0){ | |
| top = 0; | |
| }else{ | |
| top = bounds['t']; | |
| } | |
| if(bounds['b'] > height){ | |
| bottom = height; | |
| }else{ | |
| bottom = bounds['b']; | |
| } | |
| } | |
| image = actx.getImageData(left, top, right-left, bottom-top); | |
| imageData = image.data; | |
| length = imageData.length; | |
| // loop thru the area | |
| for(var i=3; i < length; i+=4){ | |
| // [0] -> r, [1] -> g, [2] -> b, [3] -> alpha | |
| alpha = imageData[i], | |
| offset = alpha*4; | |
| if(!offset) | |
| continue; | |
| // we ve started with i=3 | |
| // set the new r, g and b values | |
| finalAlpha = (alpha < opacity)?alpha:opacity; | |
| imageData[i-3]=palette[offset]; | |
| imageData[i-2]=palette[offset+1]; | |
| imageData[i-1]=palette[offset+2]; | |
| if (premultiplyAlpha) { | |
| // To fix browsers that premultiply incorrectly, we'll pass in a value scaled | |
| // appropriately so when the multiplication happens the correct value will result. | |
| imageData[i-3] /= 255/finalAlpha; | |
| imageData[i-2] /= 255/finalAlpha; | |
| imageData[i-1] /= 255/finalAlpha; | |
| } | |
| // we want the heatmap to have a gradient from transparent to the colors | |
| // as long as alpha is lower than the defined opacity (maximum), we'll use the alpha value | |
| imageData[i] = finalAlpha; | |
| } | |
| // the rgb data manipulation didn't affect the ImageData object(defined on the top) | |
| // after the manipulation process we have to set the manipulated data to the ImageData object | |
| image.data = imageData; | |
| ctx.putImageData(image, left, top); | |
| }, | |
| drawAlpha: function(x, y, count, colorize){ | |
| // storing the variables because they will be often used | |
| var me = this, | |
| radius = me.get("radius"), | |
| ctx = me.get("actx"), | |
| max = me.get("max"), | |
| bounds = me.get("bounds"), | |
| xb = x - (1.5 * radius) >> 0, yb = y - (1.5 * radius) >> 0, | |
| xc = x + (1.5 * radius) >> 0, yc = y + (1.5 * radius) >> 0; | |
| ctx.shadowColor = ('rgba(0,0,0,'+((count)?(count/me.store.max):'0.1')+')'); | |
| ctx.shadowOffsetX = 15000; | |
| ctx.shadowOffsetY = 15000; | |
| ctx.shadowBlur = 15; | |
| ctx.beginPath(); | |
| ctx.arc(x - 15000, y - 15000, radius, 0, Math.PI * 2, true); | |
| ctx.closePath(); | |
| ctx.fill(); | |
| if(colorize){ | |
| // finally colorize the area | |
| me.colorize(xb,yb); | |
| }else{ | |
| // or update the boundaries for the area that then should be colorized | |
| if(xb < bounds["l"]){ | |
| bounds["l"] = xb; | |
| } | |
| if(yb < bounds["t"]){ | |
| bounds["t"] = yb; | |
| } | |
| if(xc > bounds['r']){ | |
| bounds['r'] = xc; | |
| } | |
| if(yc > bounds['b']){ | |
| bounds['b'] = yc; | |
| } | |
| } | |
| }, | |
| toggleDisplay: function(){ | |
| var me = this, | |
| visible = me.get("visible"), | |
| canvas = me.get("canvas"); | |
| if(!visible) | |
| canvas.style.display = "block"; | |
| else | |
| canvas.style.display = "none"; | |
| me.set("visible", !visible); | |
| }, | |
| // dataURL export | |
| getImageData: function(){ | |
| return this.get("canvas").toDataURL(); | |
| }, | |
| clear: function(){ | |
| var me = this, | |
| w = me.get("width"), | |
| h = me.get("height"); | |
| me.store.set("data",[]); | |
| // @TODO: reset stores max to 1 | |
| //me.store.max = 1; | |
| me.get("ctx").clearRect(0,0,w,h); | |
| me.get("actx").clearRect(0,0,w,h); | |
| }, | |
| cleanup: function(){ | |
| var me = this; | |
| me.get("element").removeChild(me.get("canvas")); | |
| } | |
| }; | |
| return { | |
| create: function(config){ | |
| return new heatmap(config); | |
| }, | |
| util: { | |
| mousePosition: function(ev){ | |
| // this doesn't work right | |
| // rather use | |
| /* | |
| // this = element to observe | |
| var x = ev.pageX - this.offsetLeft; | |
| var y = ev.pageY - this.offsetTop; | |
| */ | |
| var x, y; | |
| if (ev.layerX) { // Firefox | |
| x = ev.layerX; | |
| y = ev.layerY; | |
| } else if (ev.offsetX) { // Opera | |
| x = ev.offsetX; | |
| y = ev.offsetY; | |
| } | |
| if(typeof(x)=='undefined') | |
| return; | |
| return [x,y]; | |
| } | |
| } | |
| }; | |
| })(); | |
| w.h337 = w.heatmapFactory = heatmapFactory; | |
| })(window); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body, html { | |
| margin: 0; | |
| padding: 0; | |
| width: 100%; | |
| height: 100%; } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html><html><head><link rel="stylesheet" type="text/css" href="semantic.css"><link rel="stylesheet" type="text/css" href="index.css"><script type="text/javascript" src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script><script type="text/javascript" src="heatmap.js"></script><script type="text/javascript" src="index.js"></script></head><body><div id="node"></div></body></html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| !!!5 | |
| html | |
| head | |
| link(rel="stylesheet",type="text/css",href="semantic.css") | |
| link(rel="stylesheet",type="text/css",href="index.css") | |
| //-script(type="text/javascript",src="/js/jquery-1.10.2.min.js") | |
| script(type="text/javascript",src="http://codeorigin.jquery.com/jquery-1.10.2.min.js") | |
| script(type="text/javascript",src="heatmap.js") | |
| script(type="text/javascript",src="index.js") | |
| body | |
| #node |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Generated by LiveScript 1.2.0 | |
| $(document).ready(function(){ | |
| var hm; | |
| hm = h337.create({ | |
| element: document.body, | |
| radius: 20, | |
| visible: true, | |
| opacity: 30 | |
| }); | |
| hm.store.generateRandomDataSet(400); | |
| hm.get('canvas').style.zIndex = 1; | |
| hm.get('canvas').onclick = function(e){ | |
| return hm.store.addDataPoint(e.clientX, e.clientY, 100); | |
| }; | |
| return hm.get('canvas').onmousemove = function(e){ | |
| return hm.store.addDataPoint(e.clientX, e.clientY, 100); | |
| }; | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <- $ document .ready | |
| hm = h337.create do | |
| element: document.body | |
| radius: 20 | |
| visible: true | |
| opacity: 30 | |
| hm.store.generateRandomDataSet 400 | |
| hm.get \canvas .style.zIndex = 1 | |
| hm.get \canvas .onclick = (e) -> | |
| hm.store.addDataPoint e.clientX, e.clientY, 100 | |
| hm.get \canvas .onmousemove = (e) -> | |
| hm.store.addDataPoint e.clientX, e.clientY, 100 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body, html | |
| margin: 0 | |
| padding: 0 | |
| width: 100% | |
| height: 100% |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| all: | |
| jade index.jade | |
| sass index.sass index.css | |
| livescript -cb index.ls |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * # Semantic - Breadcrumb | |
| * http://github.com/jlukic/semantic-ui/ | |
| * | |
| * | |
| * Copyright 2013 Contributors | |
| * Released under the MIT license | |
| * http://opensource.org/licenses/MIT | |
| * | |
| */ | |
| /******************************* | |
| Breadcrumb | |
| *******************************/ | |
| .ui.breadcrumb { | |
| margin: 1em 0em; | |
| display: inline-block; | |
| vertical-align: middle; | |
| } | |
| .ui.breadcrumb:first-child { | |
| margin-top: 0em; | |
| } | |
| .ui.breadcrumb:last-child { | |
| margin-bottom: 0em; | |
| } | |
| /******************************* | |
| Content | |
| *******************************/ | |
| .ui.breadcrumb .divider { | |
| display: inline-block; | |
| opacity: 0.5; | |
| margin: 0em 0.15em 0em; | |
| font-size: 1em; | |
| color: rgba(0, 0, 0, 0.3); | |
| } | |
| .ui.breadcrumb a.section { | |
| cursor: pointer; | |
| } | |
| .ui.breadcrumb .section { | |
| display: inline-block; | |
| margin: 0em; | |
| padding: 0em; | |
| } | |
| /* Loose Coupling */ | |
| .ui.breadcrumb.segment { | |
| display: inline-block; | |
| padding: 0.5em 1em; | |
| } | |
| /******************************* | |
| States | |
| *******************************/ | |
| .ui.breadcrumb .active.section { | |
| font-weight: bold; | |
| } | |
| /******************************* | |
| Variations | |
| *******************************/ | |
| .ui.small.breadcrumb { | |
| font-size: 0.75em; | |
| } | |
| .ui.large.breadcrumb { | |
| font-size: 1.1em; | |
| } | |
| .ui.huge.breadcrumb { | |
| font-size: 1.3em; | |
| } | |
| /* | |
| * # Semantic - Form | |
| * http://github.com/jlukic/semantic-ui/ | |
| * | |
| * | |
| * Copyright 2013 Contributors | |
| * Released under the MIT license | |
| * http://opensource.org/licenses/MIT | |
| * | |
| */ | |
| /******************************* | |
| Standard | |
| *******************************/ | |
| /*-------------------- | |
| Form | |
| ---------------------*/ | |
| .ui.form { | |
| position: relative; | |
| max-width: 100%; | |
| } | |
| .ui.form :first-child { | |
| margin-top: 0em; | |
| } | |
| .ui.form :last-child { | |
| margin-bottom: 0em; | |
| } | |
| /*-------------------- | |
| Content | |
| ---------------------*/ | |
| .ui.form > p { | |
| margin: 1em 0; | |
| } | |
| /*-------------------- | |
| Field | |
| ---------------------*/ | |
| .ui.form .field { | |
| clear: both; | |
| margin: 0em 0em 1em; | |
| } | |
| /*-------------------- | |
| Labels | |
| ---------------------*/ | |
| .ui.form .field > label { | |
| margin: 0em 0em 0.3em; | |
| display: block; | |
| color: #555555; | |
| font-size: 0.875em; | |
| } | |
| /*-------------------- | |
| Standard Inputs | |
| ---------------------*/ | |
| .ui.form textarea, | |
| .ui.form select, | |
| .ui.form input[type="text"], | |
| .ui.form input[type="email"], | |
| .ui.form input[type="date"], | |
| .ui.form input[type="password"], | |
| .ui.form input[type="number"], | |
| .ui.form input[type="tel"], | |
| .ui.form .ui.input { | |
| width: 100%; | |
| } | |
| .ui.form textarea, | |
| .ui.form select, | |
| .ui.form input[type="text"], | |
| .ui.form input[type="email"], | |
| .ui.form input[type="date"], | |
| .ui.form input[type="password"], | |
| .ui.form input[type="number"], | |
| .ui.form input[type="tel"] { | |
| margin: 0em; | |
| padding: 0.85em 1.2em; | |
| font-size: 0.875em; | |
| background-color: #FFFFFF; | |
| border: 1px solid rgba(0, 0, 0, 0.15); | |
| outline: none; | |
| color: rgba(0, 0, 0, 0.7); | |
| -webkit-border-radius: 0.3125em; | |
| -moz-border-radius: 0.3125em; | |
| border-radius: 0.3125em; | |
| -webkit-transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease; | |
| -moz-transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease; | |
| -o-transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease; | |
| -ms-transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease; | |
| transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease; | |
| -webkit-box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset; | |
| -moz-box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset; | |
| box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset; | |
| -webkit-appearance: none; | |
| -webkit-tap-highlight-color: rgba(255, 255, 255, 0); | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| .ui.textarea, | |
| .ui.form textarea { | |
| line-height: 1.33; | |
| min-height: 8em; | |
| height: 12em; | |
| max-height: 24em; | |
| resize: vertical; | |
| } | |
| .ui.form textarea, | |
| .ui.form input[type="checkbox"] { | |
| vertical-align: top; | |
| } | |
| /*-------------------- | |
| Dividers | |
| ---------------------*/ | |
| .ui.form .divider { | |
| clear: both; | |
| margin: 1em 0em; | |
| } | |
| /*-------------------- | |
| Types of Messages | |
| ---------------------*/ | |
| .ui.form .info.message, | |
| .ui.form .warning.message, | |
| .ui.form .error.message { | |
| display: none; | |
| } | |
| /* Assumptions */ | |
| .ui.form .message:first-child { | |
| margin-top: 0px; | |
| } | |
| /*-------------------- | |
| Validation Prompt | |
| ---------------------*/ | |
| .ui.form .field .prompt.label { | |
| white-space: nowrap; | |
| } | |
| .ui.form .inline.field .prompt { | |
| margin-top: 0em; | |
| margin-left: 1em; | |
| } | |
| .ui.form .inline.field .prompt:before { | |
| margin-top: -0.3em; | |
| bottom: auto; | |
| right: auto; | |
| top: 50%; | |
| left: 0em; | |
| } | |
| /******************************* | |
| States | |
| *******************************/ | |
| /*-------------------- | |
| Focus | |
| ---------------------*/ | |
| .ui.form input[type="text"]:focus, | |
| .ui.form input[type="email"]:focus, | |
| .ui.form input[type="date"]:focus, | |
| .ui.form input[type="password"]:focus, | |
| .ui.form input[type="number"]:focus, | |
| .ui.form input[type="tel"]:focus, | |
| .ui.form textarea:focus, | |
| .ui.form select:focus { | |
| color: rgba(0, 0, 0, 0.85); | |
| border-color: rgba(0, 0, 0, 0.2); | |
| border-bottom-left-radius: 0; | |
| border-top-left-radius: 0; | |
| -webkit-appearance: none; | |
| -webkit-box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset; | |
| -moz-box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset; | |
| box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset; | |
| } | |
| /*-------------------- | |
| Error | |
| ---------------------*/ | |
| /* On Form */ | |
| .ui.form.warning .warning.message { | |
| display: block; | |
| } | |
| /*-------------------- | |
| Warning | |
| ---------------------*/ | |
| /* On Form */ | |
| .ui.form.error .error.message { | |
| display: block; | |
| } | |
| /* On Field(s) */ | |
| .ui.form .fields.error .field label, | |
| .ui.form .field.error label { | |
| color: #D95C5C; | |
| } | |
| .ui.form .fields.error .field textarea, | |
| .ui.form .fields.error .field input[type="text"], | |
| .ui.form .fields.error .field input[type="email"], | |
| .ui.form .fields.error .field input[type="date"], | |
| .ui.form .fields.error .field input[type="password"], | |
| .ui.form .fields.error .field input[type="number"], | |
| .ui.form .fields.error .field input[type="tel"], | |
| .ui.form .field.error textarea, | |
| .ui.form .field.error input[type="text"], | |
| .ui.form .field.error input[type="email"], | |
| .ui.form .field.error input[type="date"], | |
| .ui.form .field.error input[type="password"], | |
| .ui.form .field.error input[type="number"], | |
| .ui.form .field.error input[type="tel"] { | |
| background-color: #FFFAFA; | |
| border-color: #E7BEBE; | |
| border-left: none; | |
| color: #D95C5C; | |
| padding-left: 1.2em; | |
| border-bottom-left-radius: 0; | |
| border-top-left-radius: 0; | |
| -webkit-box-shadow: 0.3em 0em 0em 0em #D95C5C inset; | |
| -moz-box-shadow: 0.3em 0em 0em 0em #D95C5C inset; | |
| box-shadow: 0.3em 0em 0em 0em #D95C5C inset; | |
| } | |
| .ui.form .field.error textarea:focus, | |
| .ui.form .field.error input[type="text"]:focus, | |
| .ui.form .field.error input[type="email"]:focus, | |
| .ui.form .field.error input[type="date"]:focus, | |
| .ui.form .field.error input[type="password"]:focus, | |
| .ui.form .field.error input[type="number"]:focus, | |
| .ui.form .field.error input[type="tel"]:focus { | |
| border-color: #ff5050; | |
| color: #ff5050; | |
| -webkit-appearance: none; | |
| -webkit-box-shadow: 0.3em 0em 0em 0em #FF5050 inset; | |
| -moz-box-shadow: 0.3em 0em 0em 0em #FF5050 inset; | |
| box-shadow: 0.3em 0em 0em 0em #FF5050 inset; | |
| } | |
| /*-------------------- | |
| Empty (Placeholder) | |
| ---------------------*/ | |
| /* browsers require these rules separate */ | |
| .ui.form ::-webkit-input-placeholder { | |
| color: #E0E0E0; | |
| } | |
| .ui.form ::-moz-placeholder { | |
| color: #E0E0E0; | |
| } | |
| .ui.form :focus::-webkit-input-placeholder { | |
| color: #AAAAAA; | |
| } | |
| .ui.form :focus::-moz-placeholder { | |
| color: #AAAAAA; | |
| } | |
| /* Error Placeholder */ | |
| .ui.form .error ::-webkit-input-placeholder { | |
| color: rgba(255, 80, 80, 0.4); | |
| } | |
| .ui.form .error ::-moz-placeholder { | |
| color: rgba(255, 80, 80, 0.4); | |
| } | |
| .ui.form .error :focus::-webkit-input-placeholder { | |
| color: rgba(255, 80, 80, 0.7); | |
| } | |
| .ui.form .error :focus::-moz-placeholder { | |
| color: rgba(255, 80, 80, 0.7); | |
| } | |
| /*-------------------- | |
| Disabled | |
| ---------------------*/ | |
| .ui.form .field :disabled, | |
| .ui.form .field.disabled { | |
| opacity: 0.5; | |
| } | |
| .ui.form .field.disabled label { | |
| opacity: 0.5; | |
| } | |
| .ui.form .field.disabled :disabled { | |
| opacity: 1; | |
| } | |
| /*-------------------- | |
| Loading State | |
| ---------------------*/ | |
| /* On Form */ | |
| .ui.form.loading { | |
| position: relative; | |
| } | |
| .ui.form.loading:after { | |
| position: absolute; | |
| top: 0%; | |
| left: 0%; | |
| content: ''; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(255, 255, 255, 0.8) url(../images/loader-large.gif) no-repeat 50% 50%; | |
| visibility: visible; | |
| } | |
| /******************************* | |
| Variations | |
| *******************************/ | |
| /*-------------------- | |
| Fluid Width | |
| ---------------------*/ | |
| .ui.form.fluid { | |
| width: 100%; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| /*-------------------------- | |
| Input w/ attached Button | |
| ---------------------------*/ | |
| .ui.form input.attached { | |
| width: auto; | |
| } | |
| /*-------------------- | |
| Date Input | |
| ---------------------*/ | |
| .ui.form .date.field > label { | |
| position: relative; | |
| } | |
| .ui.form .date.field > label:after { | |
| position: absolute; | |
| top: 2em; | |
| right: 0.5em; | |
| font-family: 'Icons'; | |
| content: '\f133'; | |
| font-size: 1.2em; | |
| font-weight: normal; | |
| color: #CCCCCC; | |
| } | |
| /*-------------------- | |
| Inverted Colors | |
| ---------------------*/ | |
| .ui.inverted.form label { | |
| color: #FFFFFF; | |
| } | |
| .ui.inverted.form .field.error textarea, | |
| .ui.inverted.form .field.error input[type="text"], | |
| .ui.inverted.form .field.error input[type="email"], | |
| .ui.inverted.form .field.error input[type="date"], | |
| .ui.inverted.form .field.error input[type="password"], | |
| .ui.inverted.form .field.error input[type="number"], | |
| .ui.inverted.form .field.error input[type="tel"] { | |
| background-color: #FFCCCC; | |
| } | |
| /*-------------------- | |
| Field Groups | |
| ---------------------*/ | |
| /* Grouped Vertically */ | |
| .ui.form .grouped.fields { | |
| margin: 0em 0em 1em; | |
| } | |
| .ui.form .grouped.fields .field { | |
| display: block; | |
| float: none; | |
| margin: 0.5em 0em; | |
| padding: 0em; | |
| } | |
| /*-------------------- | |
| Fields | |
| ---------------------*/ | |
| /* Split fields */ | |
| .ui.form .fields { | |
| clear: both; | |
| } | |
| .ui.form .fields:after { | |
| content: ' '; | |
| display: block; | |
| clear: both; | |
| visibility: hidden; | |
| line-height: 0; | |
| height: 0; | |
| } | |
| .ui.form .fields > .field { | |
| clear: none; | |
| float: left; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| .ui.form .fields > .field:first-child { | |
| border-left: none; | |
| box-shadow: none; | |
| } | |
| /* Other Combinations */ | |
| .ui.form .two.fields > .fields, | |
| .ui.form .two.fields > .field { | |
| width: 50%; | |
| padding-left: 1%; | |
| padding-right: 1%; | |
| } | |
| .ui.form .three.fields > .fields, | |
| .ui.form .three.fields > .field { | |
| width: 33.333%; | |
| padding-left: 1%; | |
| padding-right: 1%; | |
| } | |
| .ui.form .four.fields > .fields, | |
| .ui.form .four.fields > .field { | |
| width: 25%; | |
| padding-left: 1%; | |
| padding-right: 1%; | |
| } | |
| .ui.form .five.fields > .fields, | |
| .ui.form .five.fields > .field { | |
| width: 20%; | |
| padding-left: 1%; | |
| padding-right: 1%; | |
| } | |
| .ui.form .fields .field:first-child { | |
| padding-left: 0%; | |
| } | |
| .ui.form .fields .field:last-child { | |
| padding-right: 0%; | |
| } | |
| /*-------------------- | |
| Inline Fields | |
| ---------------------*/ | |
| .ui.form .inline.fields .field { | |
| min-height: 1.3em; | |
| margin-right: 0.5em; | |
| } | |
| .ui.form .inline.fields .field > label, | |
| .ui.form .inline.fields .field > p, | |
| .ui.form .inline.fields .field > input, | |
| .ui.form .inline.field > label, | |
| .ui.form .inline.field > p, | |
| .ui.form .inline.field > input { | |
| display: inline-block; | |
| width: auto; | |
| margin-top: 0em; | |
| margin-bottom: 0em; | |
| vertical-align: middle; | |
| font-size: 1em; | |
| } | |
| .ui.form .inline.fields .field > input, | |
| .ui.form .inline.field > input { | |
| font-size: 0.875em; | |
| } | |
| .ui.form .inline.fields .field > :first-child, | |
| .ui.form .inline.field > :first-child { | |
| margin: 0em 0.5em 0em 0em; | |
| } | |
| .ui.form .inline.fields .field > :only-child, | |
| .ui.form .inline.field > :only-child { | |
| margin: 0em; | |
| } | |
| /*-------------------- | |
| Sizes | |
| ---------------------*/ | |
| /* Standard */ | |
| .ui.small.form { | |
| font-size: 0.875em; | |
| } | |
| .ui.small.form textarea, | |
| .ui.small.form input[type="text"], | |
| .ui.small.form input[type="email"], | |
| .ui.small.form input[type="date"], | |
| .ui.small.form input[type="password"], | |
| .ui.small.form input[type="number"], | |
| .ui.small.form input[type="tel"], | |
| .ui.small.form label, | |
| .ui.small.form select { | |
| font-size: 1em; | |
| } | |
| /* Large */ | |
| .ui.large.form { | |
| font-size: 1.125em; | |
| } | |
| /* | |
| * # Semantic - Grid | |
| * http://github.com/jlukic/semantic-ui/ | |
| * | |
| * | |
| * Copyright 2013 Contributors | |
| * Released under the MIT license | |
| * http://opensource.org/licenses/MIT | |
| * | |
| */ | |
| /******************************* | |
| Grid | |
| *******************************/ | |
| .ui.grid { | |
| display: block; | |
| text-align: left; | |
| font-size: 0em; | |
| margin: 0% -1.5%; | |
| padding: 0%; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| body > .ui.grid { | |
| margin-left: 0%; | |
| margin-right: 0%; | |
| } | |
| .ui.grid:after, | |
| .ui.row:after { | |
| content: "."; | |
| display: block; | |
| height: 0; | |
| clear: both; | |
| visibility: hidden; | |
| } | |
| /*------------------- | |
| Columns | |
| --------------------*/ | |
| .ui.grid > .column, | |
| .ui.grid > .row > .column { | |
| display: inline-block; | |
| text-align: left; | |
| font-size: 1rem; | |
| padding-left: 1.5%; | |
| padding-right: 1.5%; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| vertical-align: top; | |
| } | |
| /*------------------- | |
| Rows | |
| --------------------*/ | |
| .ui.grid > .row { | |
| display: block; | |
| width: 100% !important; | |
| margin-top: 1.5%; | |
| padding: 1.5% 0% 0%; | |
| font-size: 0rem; | |
| } | |
| .ui.grid > .row:first-child { | |
| padding-top: 0rem; | |
| margin-top: 0rem; | |
| } | |
| /*------------------- | |
| Content | |
| --------------------*/ | |
| .ui.grid > .row > img, | |
| .ui.grid > .row > .column > img { | |
| max-width: 100%; | |
| } | |
| .ui.grid .column > .ui.segment:only-child { | |
| margin: 0em; | |
| } | |
| /******************************* | |
| Variations | |
| *******************************/ | |
| /*----------------------- | |
| Page Grid (Responsive) | |
| -------------------------*/ | |
| .ui.page.grid { | |
| min-width: 320px; | |
| margin-left: 0%; | |
| margin-right: 0%; | |
| } | |
| @media only screen and (max-width: 998px) { | |
| .ui.page.grid { | |
| padding: 0% 4%; | |
| } | |
| } | |
| @media only screen and (min-width: 998px) { | |
| .ui.page.grid { | |
| padding: 0% 8%; | |
| } | |
| } | |
| @media only screen and (min-width: 1500px) { | |
| .ui.page.grid { | |
| padding: 0% 13%; | |
| } | |
| } | |
| @media only screen and (min-width: 1750px) { | |
| .ui.page.grid { | |
| padding: 0% 18%; | |
| } | |
| } | |
| @media only screen and (min-width: 2000px) { | |
| .ui.page.grid { | |
| padding: 0% 23%; | |
| } | |
| } | |
| /*------------------- | |
| Column Width | |
| --------------------*/ | |
| /* Sizing Combinations */ | |
| .ui.grid > .row > .one.wide.column, | |
| .ui.grid > .one.wide.column { | |
| width: 6.25%; | |
| } | |
| .ui.grid > .row > .two.wide.column, | |
| .ui.grid > .two.wide.column { | |
| width: 12.5%; | |
| } | |
| .ui.grid > .row > .three.wide.column, | |
| .ui.grid > .three.wide.column { | |
| width: 18.75%; | |
| } | |
| .ui.grid > .row > .four.wide.column, | |
| .ui.grid > .four.wide.column { | |
| width: 25%; | |
| } | |
| .ui.grid > .row > .five.wide.column, | |
| .ui.grid > .five.wide.column { | |
| width: 31.25%; | |
| } | |
| .ui.grid > .row > .six.wide.column, | |
| .ui.grid > .six.wide.column { | |
| width: 37.5%; | |
| } | |
| .ui.grid > .row > .seven.wide.column, | |
| .ui.grid > .seven.wide.column { | |
| width: 43.75%; | |
| } | |
| .ui.grid > .row > .eight.wide.column, | |
| .ui.grid > .eight.wide.column { | |
| width: 50%; | |
| } | |
| .ui.grid > .row > .nine.wide.column, | |
| .ui.grid > .nine.wide.column { | |
| width: 56.25%; | |
| } | |
| .ui.grid > .row > .ten.wide.column, | |
| .ui.grid > .ten.wide.column { | |
| width: 62.5%; | |
| } | |
| .ui.grid > .row > .eleven.wide.column, | |
| .ui.grid > .eleven.wide.column { | |
| width: 68.75%; | |
| } | |
| .ui.grid > .row > .twelve.wide.column, | |
| .ui.grid > .twelve.wide.column { | |
| width: 75%; | |
| } | |
| .ui.grid > .row > .thirteen.wide.column, | |
| .ui.grid > .thirteen.wide.column { | |
| width: 81.25%; | |
| } | |
| .ui.grid > .row > .fourteen.wide.column, | |
| .ui.grid > .fourteen.wide.column { | |
| width: 87.5%; | |
| } | |
| .ui.grid > .row > .fifteen.wide.column, | |
| .ui.grid > .fifteen.wide.column { | |
| width: 93.75%; | |
| } | |
| .ui.grid > .row > .sixteen.wide.column, | |
| .ui.grid > .sixteen.wide.column { | |
| width: 100%; | |
| } | |
| /*------------------- | |
| Column Count | |
| --------------------*/ | |
| /* Standard */ | |
| .ui.grid > .column, | |
| .ui.grid > .row > .column { | |
| width: 6.25%; | |
| } | |
| /* Assume full width with one column */ | |
| .ui.one.column.grid > .row > .column, | |
| .ui.one.column.grid > .column, | |
| .ui.grid > .one.column.row > .column { | |
| width: 100%; | |
| } | |
| .ui.two.column.grid > .row > .column, | |
| .ui.two.column.grid > .column, | |
| .ui.grid > .two.column.row > .column { | |
| width: 50%; | |
| } | |
| .ui.three.column.grid > .row > .column, | |
| .ui.three.column.grid > .column, | |
| .ui.grid > .three.column.row > .column { | |
| width: 33.3333%; | |
| } | |
| .ui.four.column.grid > .row > .column, | |
| .ui.four.column.grid > .column, | |
| .ui.grid > .four.column.row > .column { | |
| width: 25%; | |
| } | |
| .ui.five.column.grid > .row > .column, | |
| .ui.five.column.grid > .column, | |
| .ui.grid > .five.column.row > .column { | |
| width: 20%; | |
| } | |
| .ui.six.column.grid > .row > .column, | |
| .ui.six.column.grid > .column, | |
| .ui.grid > .six.column.row > .column { | |
| width: 16.66667%; | |
| } | |
| .ui.seven.column.grid > .row > .column, | |
| .ui.seven.column.grid > .column, | |
| .ui.grid > .seven.column.row > .column { | |
| width: 14.2857%; | |
| } | |
| .ui.eight.column.grid > .row > .column, | |
| .ui.eight.column.grid > .column, | |
| .ui.grid > .eight.column.row > .column { | |
| width: 12.5%; | |
| } | |
| .ui.nine.column.grid > .row > .column, | |
| .ui.nine.column.grid > .column, | |
| .ui.grid > .nine.column.row > .column { | |
| width: 11.1111%; | |
| } | |
| .ui.ten.column.grid > .row > .column, | |
| .ui.ten.column.grid > .column, | |
| .ui.grid > .ten.column.row > .column { | |
| width: 10%; | |
| } | |
| .ui.eleven.column.grid > .row > .column, | |
| .ui.eleven.column.grid > .column, | |
| .ui.grid > .eleven.column.row > .column { | |
| width: 9.0909%; | |
| } | |
| .ui.twelve.column.grid > .row > .column, | |
| .ui.twelve.column.grid > .column, | |
| .ui.grid > .twelve.column.row > .column { | |
| width: 8.3333%; | |
| } | |
| .ui.thirteen.column.grid > .row > .column, | |
| .ui.thirteen.column.grid > .column, | |
| .ui.grid > .thirteen.column.row > .column { | |
| width: 7.6923%; | |
| } | |
| .ui.fourteen.column.grid > .row > .column, | |
| .ui.fourteen.column.grid > .column, | |
| .ui.grid > .fourteen.column.row > .column { | |
| width: 7.1428%; | |
| } | |
| .ui.fifteen.column.grid > .row > .column, | |
| .ui.fifteen.column.grid > .column, | |
| .ui.grid > .fifteen.column.row > .column { | |
| width: 6.6666%; | |
| } | |
| .ui.sixteen.column.grid > .row > .column, | |
| .ui.sixteen.column.grid > .column, | |
| .ui.grid > .sixteen.column.row > .column { | |
| width: 6.25%; | |
| } | |
| /* Assume full width with one column */ | |
| .ui.grid > .column:only-child, | |
| .ui.grid > .row > .column:only-child { | |
| width: 100%; | |
| } | |
| /*---------------------- | |
| Relaxed | |
| -----------------------*/ | |
| .ui.relaxed.grid { | |
| margin: 0% -2.5%; | |
| } | |
| .ui.relaxed.grid > .column, | |
| .ui.relaxed.grid > .row > .column { | |
| padding-left: 2.5%; | |
| padding-right: 2.5%; | |
| } | |
| /*---------------------- | |
| "Floated" | |
| -----------------------*/ | |
| .ui.grid .left.floated.column { | |
| float: left; | |
| } | |
| .ui.grid .right.floated.column { | |
| float: right; | |
| } | |
| /*---------------------- | |
| Divided | |
| -----------------------*/ | |
| .ui.divided.grid, | |
| .ui.divided.grid > .row { | |
| display: table; | |
| width: 100%; | |
| margin-left: 0% !important; | |
| margin-right: 0% !important; | |
| } | |
| .ui.divided.grid > .column:not(.row), | |
| .ui.divided.grid > .row > .column { | |
| display: table-cell; | |
| -webkit-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.8); | |
| -moz-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.8); | |
| box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.8); | |
| } | |
| .ui.divided.grid > .column.row { | |
| display: table; | |
| } | |
| .ui.divided.grid > .column:first-child, | |
| .ui.divided.grid > .row > .column:first-child { | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| /* Vertically Divided */ | |
| .ui.vertically.divided.grid > .row { | |
| -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important; | |
| -moz-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important; | |
| box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important; | |
| } | |
| .ui.vertically.divided.grid > .row > .column, | |
| .ui.vertically.divided.grid > .column:not(.row), | |
| .ui.vertically.divided.grid > .row:first-child { | |
| -webkit-box-shadow: none !important; | |
| -moz-box-shadow: none !important; | |
| box-shadow: none !important; | |
| } | |
| /*---------------------- | |
| Celled | |
| -----------------------*/ | |
| .ui.celled.grid { | |
| display: table; | |
| width: 100%; | |
| margin-left: 0% !important; | |
| margin-right: 0% !important; | |
| -webkit-box-shadow: 0px 0px 0px 1px #DFDFDF; | |
| -moz-box-shadow: 0px 0px 0px 1px #DFDFDF; | |
| box-shadow: 0px 0px 0px 1px #DFDFDF; | |
| } | |
| .ui.celled.grid > .row, | |
| .ui.celled.grid > .column.row, | |
| .ui.celled.grid > .column.row:first-child { | |
| display: table; | |
| width: 100%; | |
| margin-top: 0em; | |
| padding-top: 0em; | |
| -webkit-box-shadow: 0px -1px 0px 0px #dfdfdf; | |
| -moz-box-shadow: 0px -1px 0px 0px #dfdfdf; | |
| box-shadow: 0px -1px 0px 0px #dfdfdf; | |
| } | |
| .ui.celled.grid > .column:not(.row), | |
| .ui.celled.grid > .row > .column { | |
| display: table-cell; | |
| padding: 0.75em; | |
| -webkit-box-shadow: -1px 0px 0px 0px #dfdfdf; | |
| -moz-box-shadow: -1px 0px 0px 0px #dfdfdf; | |
| box-shadow: -1px 0px 0px 0px #dfdfdf; | |
| } | |
| .ui.celled.grid > .column:first-child, | |
| .ui.celled.grid > .row > .column:first-child { | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| .ui.celled.page.grid { | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| /*---------------------- | |
| Horizontally Centered | |
| -----------------------*/ | |
| /* Vertical Centered */ | |
| .ui.left.aligned.grid, | |
| .ui.left.aligned.grid > .row > .column, | |
| .ui.left.aligned.grid > .column, | |
| .ui.grid .left.aligned.column, | |
| .ui.grid > .left.aligned.row > .column { | |
| text-align: left; | |
| } | |
| .ui.center.aligned.grid, | |
| .ui.center.aligned.grid > .row > .column, | |
| .ui.center.aligned.grid > .column, | |
| .ui.grid .center.aligned.column, | |
| .ui.grid > .center.aligned.row > .column { | |
| text-align: center; | |
| } | |
| .ui.right.aligned.grid, | |
| .ui.right.aligned.grid > .row > .column, | |
| .ui.right.aligned.grid > .column, | |
| .ui.grid .right.aligned.column, | |
| .ui.grid > .right.aligned.row > .column { | |
| text-align: right; | |
| } | |
| /*---------------------- | |
| Vertically Centered | |
| -----------------------*/ | |
| /* Vertical Centered */ | |
| .ui.top.aligned.grid, | |
| .ui.top.aligned.grid > .row > .column, | |
| .ui.top.aligned.grid > .column, | |
| .ui.grid .top.aligned.column, | |
| .ui.grid > .top.aligned.row > .column { | |
| vertical-align: top; | |
| } | |
| .ui.middle.aligned.grid, | |
| .ui.middle.aligned.grid > .row > .column, | |
| .ui.middle.aligned.grid > .column, | |
| .ui.grid .middle.aligned.column, | |
| .ui.grid > .middle.aligned.row > .column { | |
| vertical-align: middle; | |
| } | |
| .ui.bottom.aligned.grid, | |
| .ui.bottom.aligned.grid > .row > .column, | |
| .ui.bottom.aligned.grid > .column, | |
| .ui.grid .bottom.aligned.column, | |
| .ui.grid > .bottom.aligned.row > .column { | |
| vertical-align: bottom; | |
| } | |
| /*---------------------- | |
| Equal Height Columns | |
| -----------------------*/ | |
| .ui.grid > .equal.height.row { | |
| display: table; | |
| width: 100%; | |
| } | |
| .ui.grid > .equal.height.row > .column { | |
| display: table-cell; | |
| } | |
| /*---------------------- | |
| Only (Device) | |
| -----------------------*/ | |
| /* Mobile Only */ | |
| @media only screen and (max-width: 768px) { | |
| .ui.mobile.only.grid, | |
| .ui.grid > .mobile.only.row { | |
| display: block !important; | |
| } | |
| .ui.grid > .row > .mobile.only.column { | |
| display: inline-block !important; | |
| } | |
| .ui.divided.mobile.only.grid, | |
| .ui.celled.mobile.only.grid, | |
| .ui.divided.mobile.only.grid .row, | |
| .ui.celled.mobile.only.grid .row, | |
| .ui.divided.grid .mobile.only.row, | |
| .ui.celled.grid .mobile.only.row, | |
| .ui.grid .mobile.only.equal.height.row, | |
| .ui.mobile.only.grid .equal.height.row { | |
| display: table !important; | |
| } | |
| .ui.divided.grid > .row > .mobile.only.column, | |
| .ui.celled.grid > .row > .mobile.only.column, | |
| .ui.divided.mobile.only.grid > .row > .column, | |
| .ui.celled.mobile.only.grid > .row > .column, | |
| .ui.divided.mobile.only.grid > .column, | |
| .ui.celled.mobile.only.grid > .column { | |
| display: table-cell !important; | |
| } | |
| } | |
| @media only screen and (min-width: 768px) { | |
| .ui.mobile.only.grid, | |
| .ui.grid > .mobile.only.row, | |
| .ui.grid > .row > .mobile.only.column { | |
| display: none; | |
| } | |
| } | |
| /* Tablet Only */ | |
| @media only screen and (min-width: 768px) and (max-width: 998px) { | |
| .ui.tablet.only.grid, | |
| .ui.grid > .tablet.only.row { | |
| display: block !important; | |
| } | |
| .ui.grid > .row > .tablet.only.column { | |
| display: inline-block !important; | |
| } | |
| .ui.divided.tablet.only.grid, | |
| .ui.celled.tablet.only.grid, | |
| .ui.divided.tablet.only.grid .row, | |
| .ui.celled.tablet.only.grid .row, | |
| .ui.divided.grid .tablet.only.row, | |
| .ui.celled.grid .tablet.only.row, | |
| .ui.grid .tablet.only.equal.height.row, | |
| .ui.tablet.only.grid .equal.height.row { | |
| display: table !important; | |
| } | |
| .ui.divided.grid > .row > .tablet.only.column, | |
| .ui.celled.grid > .row > .tablet.only.column, | |
| .ui.divided.tablet.only.grid > .row > .column, | |
| .ui.celled.tablet.only.grid > .row > .column, | |
| .ui.divided.tablet.only.grid > .column, | |
| .ui.celled.tablet.only.grid > .column { | |
| display: table-cell !important; | |
| } | |
| } | |
| @media only screen and (max-width: 768px), (min-width: 998px) { | |
| .ui.tablet.only.grid, | |
| .ui.grid > .tablet.only.row, | |
| .ui.grid > .row > .tablet.only.column { | |
| display: none; | |
| } | |
| } | |
| /* Computer Only */ | |
| @media only screen and (min-width: 998px) { | |
| .ui.computer.only.grid, | |
| .ui.grid > .computer.only.row { | |
| display: block !important; | |
| } | |
| .ui.grid > .row > .computer.only.column { | |
| display: inline-block !important; | |
| } | |
| .ui.divided.computer.only.grid, | |
| .ui.celled.computer.only.grid, | |
| .ui.divided.computer.only.grid .row, | |
| .ui.celled.computer.only.grid .row, | |
| .ui.divided.grid .computer.only.row, | |
| .ui.celled.grid .computer.only.row, | |
| .ui.grid .computer.only.equal.height.row, | |
| .ui.computer.only.grid .equal.height.row { | |
| display: table !important; | |
| } | |
| .ui.divided.grid > .row > .computer.only.column, | |
| .ui.celled.grid > .row > .computer.only.column, | |
| .ui.divided.computer.only.grid > .row > .column, | |
| .ui.celled.computer.only.grid > .row > .column, | |
| .ui.divided.computer.only.grid > .column, | |
| .ui.celled.computer.only.grid > .column { | |
| display: table-cell !important; | |
| } | |
| } | |
| @media only screen and (max-width: 998px) { | |
| .ui.computer.only.grid, | |
| .ui.grid > .computer.only.row, | |
| .ui.grid > .row > .computer.only.column { | |
| display: none; | |
| } | |
| } | |
| /*------------------- | |
| Stackable | |
| --------------------*/ | |
| @media only screen and (max-width: 768px) { | |
| .ui.stackable.grid { | |
| display: block !important; | |
| padding: 0em; | |
| } | |
| .ui.stackable.grid > .row > .column, | |
| .ui.stackable.grid > .column { | |
| display: block !important; | |
| width: auto !important; | |
| margin: 1.5em 5% 0em !important; | |
| padding: 1.5em 0em 0em !important; | |
| -webkit-box-shadow: none !important; | |
| -moz-box-shadow: none !important; | |
| box-shadow: none !important; | |
| } | |
| .ui.stackable.divided.grid .column, | |
| .ui.stackable.celled.grid .column { | |
| border-top: 1px dotted rgba(0, 0, 0, 0.1); | |
| } | |
| .ui.stackable.grid > .row:first-child > .column:first-child, | |
| .ui.stackable.grid > .column:first-child { | |
| margin-top: 0em !important; | |
| padding-top: 0em !important; | |
| } | |
| .ui.stackable.divided.grid > .row:first-child > .column:first-child, | |
| .ui.stackable.celled.grid > .row:first-child > .column:first-child, | |
| .ui.stackable.divided.grid > .column:first-child, | |
| .ui.stackable.celled.grid > .column:first-child { | |
| border-top: none !important; | |
| } | |
| /* Remove pointers from vertical menus */ | |
| .ui.stackable.grid .vertical.pointing.menu .item:after { | |
| display: none; | |
| } | |
| } | |
| /* | |
| * # Semantic - Menu | |
| * http://github.com/jlukic/semantic-ui/ | |
| * | |
| * | |
| * Copyright 2013 Contributors | |
| * Released under the MIT license | |
| * http://opensource.org/licenses/MIT | |
| * | |
| */ | |
| /******************************* | |
| Standard | |
| *******************************/ | |
| /*-------------- | |
| Menu | |
| ---------------*/ | |
| .ui.menu { | |
| margin: 1rem 0rem; | |
| background-color: #FFFFFF; | |
| font-size: 0px; | |
| font-weight: normal; | |
| -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); | |
| -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); | |
| box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); | |
| -webkit-border-radius: 0.1875rem; | |
| -moz-border-radius: 0.1875rem; | |
| border-radius: 0.1875rem; | |
| } | |
| .ui.menu:first-child { | |
| margin-top: 0rem; | |
| } | |
| .ui.menu:last-child { | |
| margin-bottom: 0rem; | |
| } | |
| .ui.menu:after { | |
| content: "."; | |
| display: block; | |
| height: 0; | |
| clear: both; | |
| visibility: hidden; | |
| } | |
| .ui.menu > .item:first-child { | |
| border-radius: 0.1875em 0px 0px 0.1875em; | |
| } | |
| .ui.menu > .item:last-child { | |
| border-radius: 0px 0.1875em 0.1875em 0px; | |
| } | |
| .ui.menu .item { | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| -webkit-tap-highlight-color: rgba(0, 0, 0, 0); | |
| vertical-align: middle; | |
| line-height: 1; | |
| text-decoration: none; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| -webkit-transition: opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; | |
| -moz-transition: opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; | |
| -o-transition: opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; | |
| -ms-transition: opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; | |
| transition: opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; | |
| } | |
| /*-------------- | |
| Colors | |
| ---------------*/ | |
| /* Text Color */ | |
| .ui.menu .item, | |
| .ui.menu .item > a { | |
| color: rgba(0, 0, 0, 0.75); | |
| } | |
| .ui.menu .item .item, | |
| .ui.menu .item .item > a { | |
| color: rgba(30, 30, 30, 0.7); | |
| } | |
| .ui.menu .item .item .item, | |
| .ui.menu .item .item .item > a { | |
| color: rgba(30, 30, 30, 0.6); | |
| } | |
| .ui.menu .dropdown.item .menu .item, | |
| .ui.menu .dropdown.item .menu .item a { | |
| color: rgba(0, 0, 0, 0.75); | |
| } | |
| /* Hover */ | |
| .ui.menu .item .menu a.item:hover, | |
| .ui.menu .item .menu a.item.hover, | |
| .ui.menu .item .menu .link.item:hover, | |
| .ui.menu .item .menu .link.item.hover { | |
| color: rgba(0, 0, 0, 0.85); | |
| } | |
| .ui.menu .dropdown.item .menu .item a:hover { | |
| color: rgba(0, 0, 0, 0.85); | |
| } | |
| /* Active */ | |
| .ui.menu .active.item, | |
| .ui.menu .active.item a { | |
| color: rgba(0, 0, 0, 0.85); | |
| -moz-border-radius: 0px; | |
| -webkit-border-radius: 0px; | |
| border-radius: 0px; | |
| } | |
| /*-------------- | |
| Items | |
| ---------------*/ | |
| .ui.menu .item { | |
| position: relative; | |
| display: inline-block; | |
| padding: 0.83em 0.95em; | |
| border-top: 0em solid rgba(0, 0, 0, 0); | |
| -webkit-tap-highlight-color: rgba(0, 0, 0, 0); | |
| -moz-user-select: -moz-none; | |
| -khtml-user-select: none; | |
| user-select: none; | |
| } | |
| .ui.menu .menu { | |
| margin: 0em; | |
| } | |
| .ui.menu .item.left, | |
| .ui.menu .menu.left { | |
| float: left; | |
| } | |
| .ui.menu .item.right, | |
| .ui.menu .menu.right { | |
| float: right; | |
| } | |
| /*-------------- | |
| Borders | |
| ---------------*/ | |
| .ui.menu .item:before { | |
| position: absolute; | |
| content: ''; | |
| top: 0%; | |
| right: 0px; | |
| width: 1px; | |
| height: 100%; | |
| background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.05) 100%); | |
| background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.05) 100%); | |
| background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.05) 100%); | |
| background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.05) 100%); | |
| background-image: linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.05) 100%); | |
| } | |
| .ui.menu .menu.right .item:before, | |
| .ui.menu .item.right:before { | |
| right: auto; | |
| left: 0px; | |
| } | |
| /*-------------- | |
| Text Content | |
| ---------------*/ | |
| .ui.menu .text.item > *, | |
| .ui.menu .item > p:only-child { | |
| -webkit-user-select: text; | |
| -moz-user-select: text; | |
| -ms-user-select: text; | |
| user-select: text; | |
| line-height: 1.3; | |
| color: rgba(0, 0, 0, 0.6); | |
| } | |
| .ui.menu .item > p:first-child { | |
| margin-top: 0px; | |
| } | |
| .ui.menu .item > p:last-child { | |
| margin-bottom: 0px; | |
| } | |
| /*-------------- | |
| Button | |
| ---------------*/ | |
| .ui.menu:not(.vertical) .item > .button { | |
| position: relative; | |
| top: -0.05em; | |
| margin: -0.55em 0; | |
| padding-bottom: 0.55em; | |
| padding-top: 0.55em; | |
| font-size: 0.875em; | |
| box-shadow: none; | |
| } | |
| /*-------------- | |
| Inputs | |
| ---------------*/ | |
| .ui.menu:not(.vertical) .item > .input { | |
| margin-top: -0.83em; | |
| margin-bottom: -0.83em; | |
| padding-top: 0.3em; | |
| padding-bottom: 0.3em; | |
| width: 100%; | |
| } | |
| .ui.menu .item > .input input { | |
| padding-top: 0.5em; | |
| padding-bottom: 0.5em; | |
| } | |
| .ui.vertical.menu .item > .input input { | |
| margin: 0em; | |
| padding-top: 0.63em; | |
| padding-bottom: 0.63em; | |
| } | |
| .ui.vertical.menu .ui.input > .icon { | |
| padding-top: 0.63em; | |
| } | |
| /*-------------- | |
| Header | |
| ---------------*/ | |
| .ui.menu .header.item { | |
| background-color: rgba(0, 0, 0, 0.04); | |
| margin: 0em; | |
| } | |
| .ui.vertical.menu .header.item { | |
| font-weight: bold; | |
| } | |
| /*-------------- | |
| Dropdowns | |
| ---------------*/ | |
| .ui.menu .dropdown.item .menu { | |
| left: 1px; | |
| margin: 1px 0px 0px 0px; | |
| min-width: calc(99%); | |
| box-shadow: 0 1px 1px 1px #DDDDDD; | |
| } | |
| .ui.menu .pointing.dropdown.item .menu { | |
| margin-top: 0.75em; | |
| } | |
| .ui.menu .simple.dropdown.item .menu { | |
| margin: 0px !important; | |
| } | |
| .ui.menu .dropdown.item .menu .item { | |
| width: 100%; | |
| color: rgba(0, 0, 0, 0.75); | |
| } | |
| .ui.menu .dropdown.item .menu .active.item { | |
| box-shadow: none !important; | |
| } | |
| .ui.menu .ui.dropdown .menu .item:before { | |
| display: none; | |
| } | |
| /*-------------- | |
| Labels | |
| ---------------*/ | |
| .ui.menu .item > .label { | |
| background-color: rgba(0, 0, 0, 0.35); | |
| color: #FFFFFF; | |
| margin: -0.15em 0em -0.15em 0.5em; | |
| padding: 0.3em 0.8em; | |
| vertical-align: baseline; | |
| } | |
| .ui.menu .item > .floating.label { | |
| padding: 0.3em 0.8em; | |
| } | |
| /*-------------- | |
| Images | |
| ---------------*/ | |
| .ui.menu .item > img:only-child { | |
| display: block; | |
| max-width: 100%; | |
| margin: 0em auto; | |
| } | |
| /******************************* | |
| States | |
| *******************************/ | |
| /*-------------- | |
| Hover | |
| ---------------*/ | |
| .ui.link.menu .item:hover, | |
| .ui.menu .item.hover, | |
| .ui.menu .link.item:hover, | |
| .ui.menu a.item:hover, | |
| .ui.menu .ui.dropdown .menu .item.hover, | |
| .ui.menu .ui.dropdown .menu .item:hover { | |
| cursor: pointer; | |
| background-color: rgba(0, 0, 0, 0.02); | |
| } | |
| .ui.menu .ui.dropdown.active { | |
| background-color: rgba(0, 0, 0, 0.02); | |
| -webkit-box-shadow: none; | |
| box-shadow: none; | |
| -webkit-border-bottom-right-radius: 0em; | |
| -moz-border-bottom-right-radius: 0em; | |
| border-bottom-right-radius: 0em; | |
| -webkit-border-bottom-left-radius: 0em; | |
| -moz-border-bottom-left-radius: 0em; | |
| border-bottom-left-radius: 0em; | |
| } | |
| /*-------------- | |
| Down | |
| ---------------*/ | |
| .ui.link.menu .item:active, | |
| .ui.menu .link.item:active, | |
| .ui.menu a.item:active, | |
| .ui.menu .ui.dropdown .menu .item:active { | |
| background-color: rgba(0, 0, 0, 0.05); | |
| } | |
| /*-------------- | |
| Active | |
| ---------------*/ | |
| .ui.menu .active.item { | |
| background-color: rgba(0, 0, 0, 0.01); | |
| color: rgba(0, 0, 0, 0.95); | |
| -webkit-box-shadow: 0em 0.2em 0em inset; | |
| -moz-box-shadow: 0em 0.2em 0em inset; | |
| box-shadow: 0em 0.2em 0em inset; | |
| } | |
| .ui.vertical.menu .active.item { | |
| -webkit-border-radius: 0em; | |
| -moz-border-radius: 0em; | |
| border-radius: 0em; | |
| -moz-box-shadow: 0.2em 0em 0em inset; | |
| -webkit-box-shadow: 0.2em 0em 0em inset; | |
| box-shadow: 0.2em 0em 0em inset; | |
| } | |
| .ui.vertical.menu > .active.item:first-child { | |
| -webkit-border-radius: 0em 0.1875em 0em 0em; | |
| -moz-border-radius: 0em 0.1875em 0em 0em; | |
| border-radius: 0em 0.1875em 0em 0em; | |
| } | |
| .ui.vertical.menu > .active.item:last-child { | |
| -webkit-border-radius: 0em 0em 0.1875em 0em; | |
| -moz-border-radius: 0em 0em 0.1875em 0em; | |
| border-radius: 0em 0em 0.1875em 0em; | |
| } | |
| .ui.vertical.menu > .active.item:only-child { | |
| -webkit-border-radius: 0em 0.1875em 0.1875em 0em; | |
| -moz-border-radius: 0em 0.1875em 0.1875em 0em; | |
| border-radius: 0em 0.1875em 0.1875em 0em; | |
| } | |
| .ui.vertical.menu .active.item .menu .active.item { | |
| border-left: none; | |
| } | |
| .ui.vertical.menu .active.item .menu .active.item { | |
| padding-left: 1.5rem; | |
| } | |
| .ui.vertical.menu .item .menu .active.item { | |
| background-color: rgba(0, 0, 0, 0.03); | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| /*-------------- | |
| Disabled | |
| ---------------*/ | |
| .ui.menu .item.disabled, | |
| .ui.menu .item.disabled:hover, | |
| .ui.menu .item.disabled.hover { | |
| cursor: default; | |
| color: rgba(0, 0, 0, 0.2); | |
| background-color: transparent !important; | |
| } | |
| /*-------------------- | |
| Loading | |
| ---------------------*/ | |
| /* On Form */ | |
| .ui.menu.loading { | |
| position: relative; | |
| } | |
| .ui.menu.loading:after { | |
| position: absolute; | |
| top: 0%; | |
| left: 0%; | |
| content: ''; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(255, 255, 255, 0.8) url(../images/loader-large.gif) no-repeat 50% 50%; | |
| visibility: visible; | |
| } | |
| /******************************* | |
| Types | |
| *******************************/ | |
| /*-------------- | |
| Vertical | |
| ---------------*/ | |
| .ui.vertical.menu .item { | |
| display: block; | |
| height: auto !important; | |
| border-top: none; | |
| border-left: 0em solid rgba(0, 0, 0, 0); | |
| border-right: none; | |
| } | |
| .ui.vertical.menu > .item:first-child { | |
| border-radius: 0.1875em 0.1875em 0px 0px; | |
| } | |
| .ui.vertical.menu > .item:last-child { | |
| border-radius: 0px 0px 0.1875em 0.1875em; | |
| } | |
| .ui.vertical.menu .item > .label { | |
| float: right; | |
| text-align: center; | |
| } | |
| .ui.vertical.menu .item > .icon:not(.input) { | |
| float: right; | |
| width: 1.22em; | |
| margin: 0em 0em 0em 0.5em; | |
| } | |
| .ui.vertical.menu .item > .label + .icon { | |
| float: none; | |
| margin: 0em 0.25em 0em 0em; | |
| } | |
| /*--- Border ---*/ | |
| .ui.vertical.menu .item:before { | |
| position: absolute; | |
| content: ''; | |
| top: 0%; | |
| left: 0px; | |
| width: 100%; | |
| height: 1px; | |
| background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.1) 1.5em, rgba(0, 0, 0, 0.03) 100%); | |
| background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.1) 1.5em, rgba(0, 0, 0, 0.03) 100%); | |
| background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.1) 1.5em, rgba(0, 0, 0, 0.03) 100%); | |
| background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.1) 1.5em, rgba(0, 0, 0, 0.03) 100%); | |
| background-image: linear-gradient(left, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.1) 1.5em, rgba(0, 0, 0, 0.03) 100%); | |
| } | |
| .ui.vertical.menu .item:first-child:before { | |
| background-image: none !important; | |
| } | |
| /*--- Dropdown ---*/ | |
| .ui.vertical.menu .dropdown.item > i { | |
| float: right; | |
| content: "\f0da"; | |
| } | |
| .ui.vertical.menu .dropdown.item .menu { | |
| top: 0% !important; | |
| left: 100%; | |
| margin: 0px 0px 0px 1px; | |
| box-shadow: 0 0px 1px 1px #DDDDDD; | |
| } | |
| .ui.vertical.menu .dropdown.item.active { | |
| border-top-right-radius: 0em; | |
| border-bottom-right-radius: 0em; | |
| } | |
| .ui.vertical.menu .dropdown.item .menu .item { | |
| font-size: 1rem; | |
| } | |
| .ui.vertical.menu .dropdown.item .menu .item .icon { | |
| margin-right: 0em; | |
| } | |
| .ui.vertical.menu .dropdown.item.active { | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| /*--- Sub Menu ---*/ | |
| .ui.vertical.menu .item > .menu { | |
| margin: 0.5em -0.95em 0em; | |
| } | |
| .ui.vertical.menu .item > .menu > .item { | |
| padding: 0.5rem 1.5rem; | |
| font-size: 0.875em; | |
| } | |
| .ui.vertical.menu .item > .menu > .item:before { | |
| display: none; | |
| } | |
| /*-------------- | |
| Tiered | |
| ---------------*/ | |
| .ui.tiered.menu > .sub.menu > .item { | |
| color: rgba(0, 0, 0, 0.4); | |
| } | |
| .ui.tiered.menu > .menu > .item:hover, | |
| .ui.tiered.menu > .menu > .item.hover { | |
| color: rgba(0, 0, 0, 0.8); | |
| } | |
| .ui.tiered.menu .item.active { | |
| color: rgba(0, 0, 0, 0.8); | |
| } | |
| .ui.tiered.menu > .menu .item.active:after { | |
| position: absolute; | |
| content: ''; | |
| margin-top: -1px; | |
| top: 100%; | |
| left: 0px; | |
| width: 100%; | |
| height: 2px; | |
| background-color: #FBFBFB; | |
| } | |
| .ui.tiered.menu .sub.menu { | |
| background-color: rgba(0, 0, 0, 0.01); | |
| border-radius: 0em; | |
| border-top: 1px solid rgba(0, 0, 0, 0.1); | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| color: #FFFFFF; | |
| } | |
| .ui.tiered.menu .sub.menu .item { | |
| font-size: 0.875rem; | |
| } | |
| .ui.tiered.menu .sub.menu .item:before { | |
| background-image: none; | |
| } | |
| .ui.tiered.menu .sub.menu .active.item { | |
| padding-top: 0.83em; | |
| background-color: transparent; | |
| border-radius: 0 0 0 0; | |
| border-top: medium none; | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| color: rgba(0, 0, 0, 0.7) !important; | |
| } | |
| .ui.tiered.menu .sub.menu .active.item:after { | |
| display: none; | |
| } | |
| /* Inverted */ | |
| .ui.inverted.tiered.menu > .menu > .item { | |
| color: rgba(255, 255, 255, 0.5); | |
| } | |
| .ui.inverted.tiered.menu .sub.menu { | |
| background-color: rgba(0, 0, 0, 0.2); | |
| } | |
| .ui.inverted.tiered.menu .sub.menu .item { | |
| color: rgba(255, 255, 255, 0.6); | |
| } | |
| .ui.inverted.tiered.menu > .menu > .item:hover, | |
| .ui.inverted.tiered.menu > .menu > .item.hover { | |
| color: rgba(255, 255, 255, 0.9); | |
| } | |
| .ui.inverted.tiered.menu .active.item:after { | |
| display: none; | |
| } | |
| .ui.inverted.tiered.menu > .sub.menu > .active.item, | |
| .ui.inverted.tiered.menu > .menu > .active.item { | |
| color: #ffffff !important; | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| /* Tiered pointing */ | |
| .ui.pointing.tiered.menu > .menu > .item:after { | |
| display: none; | |
| } | |
| .ui.pointing.tiered.menu > .sub.menu > .item:after { | |
| display: block; | |
| } | |
| /*-------------- | |
| Tabular | |
| ---------------*/ | |
| .ui.tabular.menu { | |
| background-color: transparent; | |
| border-bottom: 1px solid #DCDDDE; | |
| border-radius: 0em; | |
| -webkit-box-shadow: none !important; | |
| -moz-box-shadow: none !important; | |
| box-shadow: none !important; | |
| } | |
| .ui.tabular.menu .item { | |
| background-color: transparent; | |
| border-left: 1px solid transparent; | |
| border-right: 1px solid transparent; | |
| border-top: 1px solid transparent; | |
| padding-left: 1.4em; | |
| padding-right: 1.4em; | |
| color: rgba(0, 0, 0, 0.6); | |
| } | |
| .ui.tabular.menu .item:before { | |
| display: none; | |
| } | |
| /* Hover */ | |
| .ui.tabular.menu .item:hover { | |
| background-color: transparent; | |
| color: rgba(0, 0, 0, 0.8); | |
| } | |
| /* Active */ | |
| .ui.tabular.menu .active.item { | |
| position: relative; | |
| background-color: #FFFFFF; | |
| color: rgba(0, 0, 0, 0.8); | |
| border-color: #DCDDDE; | |
| font-weight: bold; | |
| margin-bottom: -1px; | |
| border-bottom: 1px solid #FFFFFF; | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| -webkit-border-radius: 5px 5px 0 0; | |
| -moz-border-radius: 5px 5px 0 0; | |
| border-radius: 5px 5px 0 0; | |
| } | |
| /* Coupling with segment for attachment */ | |
| .ui.attached.tabular.menu { | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .ui.tabular.menu ~ .bottom.attached.segment { | |
| margin: 1px 0px 0px 1px; | |
| } | |
| /*-------------- | |
| Pagination | |
| ---------------*/ | |
| .ui.pagination.menu { | |
| margin: 0em; | |
| display: inline-block; | |
| vertical-align: middle; | |
| } | |
| .ui.pagination.menu .item { | |
| min-width: 3em; | |
| text-align: center; | |
| } | |
| .ui.pagination.menu .icon.item .icon { | |
| vertical-align: top; | |
| } | |
| .ui.pagination.menu.floated { | |
| display: block; | |
| } | |
| /* active */ | |
| .ui.pagination.menu .active.item { | |
| border-top: none; | |
| padding-top: 0.83em; | |
| background-color: rgba(0, 0, 0, 0.05); | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| /*-------------- | |
| Secondary | |
| ---------------*/ | |
| .ui.secondary.menu { | |
| background-color: transparent; | |
| -webkit-border-radius: 0px; | |
| -moz-border-radius: 0px; | |
| border-radius: 0px; | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| .ui.secondary.menu > .menu > .item, | |
| .ui.secondary.menu > .item { | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| border: none; | |
| height: auto !important; | |
| margin: 0em 0.25em; | |
| padding: 0.5em 1em; | |
| -webkit-border-radius: 0.3125em; | |
| -moz-border-radius: 0.3125em; | |
| border-radius: 0.3125em; | |
| } | |
| .ui.secondary.menu > .menu > .item:before, | |
| .ui.secondary.menu > .item:before { | |
| display: none !important; | |
| } | |
| .ui.secondary.menu .item > .input input { | |
| background-color: transparent; | |
| border: none; | |
| } | |
| .ui.secondary.menu .link.item, | |
| .ui.secondary.menu a.item { | |
| opacity: 0.8; | |
| -webkit-transition: none; | |
| -moz-transition: none; | |
| -o-transition: none; | |
| -ms-transition: none; | |
| transition: none; | |
| } | |
| .ui.secondary.menu .header.item { | |
| border-right: 0.1em solid rgba(0, 0, 0, 0.1); | |
| background-color: transparent; | |
| -webkit-border-radius: 0em; | |
| -moz-border-radius: 0em; | |
| border-radius: 0em; | |
| } | |
| /* hover */ | |
| .ui.secondary.menu .link.item:hover, | |
| .ui.secondary.menu a.item:hover { | |
| opacity: 1; | |
| } | |
| /* active */ | |
| .ui.secondary.menu > .menu > .active.item, | |
| .ui.secondary.menu > .active.item { | |
| background-color: rgba(0, 0, 0, 0.08); | |
| opacity: 1; | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| .ui.secondary.vertical.menu > .active.item { | |
| -webkit-border-radius: 0.3125em; | |
| -moz-border-radius: 0.3125em; | |
| border-radius: 0.3125em; | |
| } | |
| /* inverted */ | |
| .ui.secondary.inverted.menu .link.item, | |
| .ui.secondary.inverted.menu a.item { | |
| color: rgba(255, 255, 255, 0.5); | |
| } | |
| .ui.secondary.inverted.menu .link.item:hover, | |
| .ui.secondary.inverted.menu a.item:hover { | |
| color: rgba(255, 255, 255, 0.9); | |
| } | |
| .ui.secondary.inverted.menu > .active.item { | |
| background-color: rgba(255, 255, 255, 0.9); | |
| } | |
| /* disable variations */ | |
| .ui.secondary.item.menu > .item { | |
| margin: 0em; | |
| } | |
| .ui.secondary.attached.menu { | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| /*--------------------- | |
| Secondary Pointing | |
| -----------------------*/ | |
| .ui.secondary.pointing.menu { | |
| border-bottom: 3px solid rgba(0, 0, 0, 0.1); | |
| } | |
| .ui.secondary.pointing.menu > .menu > .item, | |
| .ui.secondary.pointing.menu > .item { | |
| margin: 0em 0em -3px; | |
| padding: 0.6em 0.95em; | |
| border-bottom: 3px solid rgba(0, 0, 0, 0); | |
| -webkit-border-radius: 0em; | |
| -moz-border-radius: 0em; | |
| border-radius: 0em; | |
| -webkit-transition: color 0.2s | |
| ; | |
| -moz-transition: color 0.2s | |
| ; | |
| -o-transition: color 0.2s | |
| ; | |
| -ms-transition: color 0.2s | |
| ; | |
| transition: color 0.2s | |
| ; | |
| } | |
| /* Item Types */ | |
| .ui.secondary.pointing.menu .header.item { | |
| border-right-width: 0px; | |
| font-weight: bold; | |
| } | |
| .ui.secondary.pointing.menu .text.item { | |
| box-shadow: none !important; | |
| } | |
| .ui.secondary.pointing.menu > .menu > .item:after, | |
| .ui.secondary.pointing.menu > .item:after { | |
| display: none; | |
| } | |
| /* Hover */ | |
| .ui.secondary.pointing.menu > .menu > .link.item:hover, | |
| .ui.secondary.pointing.menu > .link.item:hover, | |
| .ui.secondary.pointing.menu > .menu > a.item:hover, | |
| .ui.secondary.pointing.menu > a.item:hover { | |
| background-color: transparent; | |
| color: rgba(0, 0, 0, 0.7); | |
| } | |
| /* Down */ | |
| .ui.secondary.pointing.menu > .menu > .link.item:active, | |
| .ui.secondary.pointing.menu > .link.item:active, | |
| .ui.secondary.pointing.menu > .menu > a.item:active, | |
| .ui.secondary.pointing.menu > a.item:active { | |
| background-color: transparent; | |
| border-color: rgba(0, 0, 0, 0.2); | |
| } | |
| /* Active */ | |
| .ui.secondary.pointing.menu > .menu > .item.active, | |
| .ui.secondary.pointing.menu > .item.active { | |
| background-color: transparent; | |
| border-color: rgba(0, 0, 0, 0.4); | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| /*--------------------- | |
| Secondary Vertical | |
| -----------------------*/ | |
| .ui.secondary.vertical.pointing.menu { | |
| border: none; | |
| border-right: 3px solid rgba(0, 0, 0, 0.1); | |
| } | |
| .ui.secondary.vertical.menu > .item { | |
| border: none; | |
| margin: 0em 0em 0.3em; | |
| padding: 0.6em 0.8em; | |
| -webkit-border-radius: 0.1875em; | |
| -moz-border-radius: 0.1875em; | |
| border-radius: 0.1875em; | |
| } | |
| .ui.secondary.vertical.menu > .header.item { | |
| -webkit-border-radius: 0em; | |
| -moz-border-radius: 0em; | |
| border-radius: 0em; | |
| } | |
| .ui.secondary.vertical.pointing.menu > .item { | |
| margin: 0em -3px 0em 0em; | |
| border-bottom: none; | |
| border-right: 3px solid transparent; | |
| -webkit-border-radius: 0em; | |
| -moz-border-radius: 0em; | |
| border-radius: 0em; | |
| } | |
| /* Hover */ | |
| .ui.secondary.vertical.pointing.menu > .item.hover, | |
| .ui.secondary.vertical.pointing.menu > .item:hover { | |
| background-color: transparent; | |
| color: rgba(0, 0, 0, 0.7); | |
| } | |
| /* Down */ | |
| .ui.secondary.vertical.pointing.menu > .item:active { | |
| background-color: transparent; | |
| border-color: rgba(0, 0, 0, 0.2); | |
| } | |
| /* Active */ | |
| .ui.secondary.vertical.pointing.menu > .item.active { | |
| background-color: transparent; | |
| border-color: rgba(0, 0, 0, 0.4); | |
| color: rgba(0, 0, 0, 0.85); | |
| } | |
| /*-------------- | |
| Inverted | |
| ---------------*/ | |
| .ui.secondary.inverted.menu { | |
| background-color: transparent; | |
| } | |
| .ui.secondary.inverted.pointing.menu { | |
| border-bottom: 3px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .ui.secondary.inverted.pointing.menu > .item { | |
| color: rgba(255, 255, 255, 0.7); | |
| } | |
| /* Hover */ | |
| .ui.secondary.inverted.pointing.menu > .item.hover, | |
| .ui.secondary.inverted.pointing.menu > .item:hover { | |
| color: rgba(255, 255, 255, 0.85); | |
| } | |
| /* Down */ | |
| .ui.secondary.inverted.pointing.menu > .item:active { | |
| border-color: rgba(255, 255, 255, 0.4) !important; | |
| } | |
| /* Active */ | |
| .ui.secondary.inverted.pointing.menu > .item.active { | |
| border-color: rgba(255, 255, 255, 0.8) !important; | |
| color: #ffffff; | |
| } | |
| /*--------------------- | |
| Inverted Vertical | |
| ----------------------*/ | |
| .ui.secondary.inverted.vertical.pointing.menu { | |
| border-right: 3px solid rgba(255, 255, 255, 0.1); | |
| border-bottom: none; | |
| } | |
| /*-------------- | |
| Text Menu | |
| ---------------*/ | |
| .ui.text.menu { | |
| background-color: transparent; | |
| margin: 1rem -1rem; | |
| -moz-border-radius: 0px; | |
| -webkit-border-radius: 0px; | |
| border-radius: 0px; | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| .ui.text.menu > .item { | |
| opacity: 0.8; | |
| margin: 0em 1em; | |
| padding: 0em; | |
| height: auto !important; | |
| -webkit-border-radius: 0px; | |
| -moz-border-radius: 0px; | |
| border-radius: 0px; | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| -webkit-transition: opacity 0.2s ease | |
| ; | |
| -moz-transition: opacity 0.2s ease | |
| ; | |
| -o-transition: opacity 0.2s ease | |
| ; | |
| -ms-transition: opacity 0.2s ease | |
| ; | |
| transition: opacity 0.2s ease | |
| ; | |
| } | |
| .ui.text.menu > .item:before { | |
| display: none !important; | |
| } | |
| .ui.text.menu .header.item { | |
| background-color: transparent; | |
| opacity: 1; | |
| color: rgba(50, 50, 50, 0.8); | |
| font-size: 0.875rem; | |
| padding: 0em; | |
| text-transform: uppercase; | |
| font-weight: bold; | |
| } | |
| /*--- fluid text ---*/ | |
| .ui.text.item.menu .item { | |
| margin: 0em; | |
| } | |
| /*--- vertical text ---*/ | |
| .ui.vertical.text.menu { | |
| margin: 1rem 0em; | |
| } | |
| .ui.vertical.text.menu:first-child { | |
| margin-top: 0rem; | |
| } | |
| .ui.vertical.text.menu:last-child { | |
| margin-bottom: 0rem; | |
| } | |
| .ui.vertical.text.menu .item { | |
| float: left; | |
| clear: left; | |
| margin: 0.5em 0em; | |
| } | |
| .ui.vertical.text.menu .item > .icon { | |
| float: none; | |
| margin: 0em 0.83em 0em 0em; | |
| } | |
| .ui.vertical.text.menu .header.item { | |
| margin: 0.8em 0em; | |
| } | |
| /*--- hover ---*/ | |
| .ui.text.menu .item.hover, | |
| .ui.text.menu .item:hover { | |
| opacity: 1; | |
| background-color: transparent; | |
| } | |
| /*--- active ---*/ | |
| .ui.text.menu .active.item { | |
| background-color: transparent; | |
| padding: 0em; | |
| border: none; | |
| opacity: 1; | |
| font-weight: bold; | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| /* disable variations */ | |
| .ui.text.pointing.menu .active.item:after { | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| .ui.text.attached.menu { | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| .ui.inverted.text.menu, | |
| .ui.inverted.text.menu .item, | |
| .ui.inverted.text.menu .item:hover, | |
| .ui.inverted.text.menu .item.active { | |
| background-color: transparent; | |
| } | |
| /*-------------- | |
| Icon Only | |
| ---------------*/ | |
| .ui.icon.menu, | |
| .ui.vertical.icon.menu { | |
| width: auto; | |
| display: inline-block; | |
| height: auto; | |
| } | |
| .ui.icon.menu > .item { | |
| height: auto; | |
| text-align: center; | |
| color: rgba(60, 60, 60, 0.7); | |
| } | |
| .ui.icon.menu > .item > .icon { | |
| display: block; | |
| float: none !important; | |
| opacity: 1; | |
| margin: 0em auto !important; | |
| } | |
| .ui.icon.menu .icon:before { | |
| opacity: 1; | |
| } | |
| /* Item Icon Only */ | |
| .ui.menu .icon.item .icon { | |
| margin: 0em; | |
| } | |
| .ui.vertical.icon.menu { | |
| float: none; | |
| } | |
| /*--- inverted ---*/ | |
| .ui.inverted.icon.menu .item { | |
| color: rgba(255, 255, 255, 0.8); | |
| } | |
| .ui.inverted.icon.menu .icon { | |
| color: #ffffff; | |
| } | |
| /*-------------- | |
| Labeled Icon | |
| ---------------*/ | |
| .ui.labeled.icon.menu { | |
| text-align: center; | |
| } | |
| .ui.labeled.icon.menu > .item > .icon { | |
| display: block; | |
| font-size: 1.5em !important; | |
| margin: 0em auto 0.3em !important; | |
| } | |
| /******************************* | |
| Variations | |
| *******************************/ | |
| /*-------------- | |
| Colors | |
| ---------------*/ | |
| /*--- Light Colors ---*/ | |
| .ui.menu .green.active.item, | |
| .ui.green.menu .active.item { | |
| border-color: #A1CF64 !important; | |
| color: #A1CF64 !important; | |
| } | |
| .ui.menu .red.active.item, | |
| .ui.red.menu .active.item { | |
| border-color: #D95C5C !important; | |
| color: #D95C5C !important; | |
| } | |
| .ui.menu .blue.active.item, | |
| .ui.blue.menu .active.item { | |
| border-color: #6ECFF5 !important; | |
| color: #6ECFF5 !important; | |
| } | |
| .ui.menu .purple.active.item, | |
| .ui.purple.menu .active.item { | |
| border-color: #564F8A !important; | |
| color: #564F8A !important; | |
| } | |
| .ui.menu .orange.active.item, | |
| .ui.orange.menu .active.item { | |
| border-color: #F05940 !important; | |
| color: #F05940 !important; | |
| } | |
| .ui.menu .teal.active.item, | |
| .ui.teal.menu .active.item { | |
| border-color: #00B5AD !important; | |
| color: #00B5AD !important; | |
| } | |
| /*-------------- | |
| Inverted | |
| ---------------*/ | |
| .ui.inverted.menu { | |
| background-color: #333333; | |
| box-shadow: none; | |
| } | |
| .ui.inverted.menu .header.item { | |
| margin: 0em; | |
| background-color: rgba(0, 0, 0, 0.3); | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| .ui.inverted.menu .item, | |
| .ui.inverted.menu .item > a { | |
| color: #FFFFFF; | |
| } | |
| .ui.inverted.menu .item .item, | |
| .ui.inverted.menu .item .item > a { | |
| color: rgba(255, 255, 255, 0.8); | |
| } | |
| .ui.inverted.menu .dropdown.item .menu .item, | |
| .ui.inverted.menu .dropdown.item .menu .item a { | |
| color: rgba(0, 0, 0, 0.75) !important; | |
| } | |
| .ui.inverted.menu .item.disabled, | |
| .ui.inverted.menu .item.disabled:hover, | |
| .ui.inverted.menu .item.disabled.hover { | |
| color: rgba(255, 255, 255, 0.2); | |
| } | |
| /*--- Border ---*/ | |
| .ui.inverted.menu .item:before { | |
| background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); | |
| background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); | |
| background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); | |
| background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); | |
| background-image: linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); | |
| } | |
| .ui.vertical.inverted.menu .item:before { | |
| background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); | |
| background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); | |
| background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); | |
| background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); | |
| background-image: linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); | |
| } | |
| /*--- Hover ---*/ | |
| .ui.link.inverted.menu .item:hover, | |
| .ui.inverted.menu .item.hover, | |
| .ui.inverted.menu .link.item:hover, | |
| .ui.inverted.menu a.item:hover, | |
| .ui.inverted.menu .dropdown.item.hover, | |
| .ui.inverted.menu .dropdown.item:hover { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| } | |
| .ui.inverted.menu a.item:hover, | |
| .ui.inverted.menu .item.hover, | |
| .ui.inverted.menu .item > a:hover, | |
| .ui.inverted.menu .item .menu a.item:hover, | |
| .ui.inverted.menu .item .menu a.item.hover, | |
| .ui.inverted.menu .item .menu .link.item:hover, | |
| .ui.inverted.menu .item .menu .link.item.hover { | |
| color: #ffffff; | |
| } | |
| /*--- Down ---*/ | |
| .ui.inverted.menu a.item:active, | |
| .ui.inverted.menu .dropdown.item:active, | |
| .ui.inverted.menu .link.item:active, | |
| .ui.inverted.menu a.item:active { | |
| background-color: rgba(255, 255, 255, 0.15); | |
| } | |
| /*--- Active ---*/ | |
| .ui.inverted.menu .active.item { | |
| box-shadow: none !important; | |
| background-color: rgba(255, 255, 255, 0.2); | |
| } | |
| .ui.inverted.menu .active.item, | |
| .ui.inverted.menu .active.item a { | |
| color: #ffffff !important; | |
| } | |
| .ui.inverted.vertical.menu .item .menu .active.item { | |
| background-color: rgba(255, 255, 255, 0.2); | |
| color: #ffffff; | |
| } | |
| /*--- Pointers ---*/ | |
| .ui.inverted.pointing.menu .active.item:after { | |
| background-color: #505050; | |
| box-shadow: none; | |
| } | |
| .ui.inverted.pointing.menu .active.item:hover:after { | |
| background-color: #3B3B3B; | |
| } | |
| /*-------------- | |
| Selection | |
| ---------------*/ | |
| .ui.selection.menu > .item { | |
| color: rgba(0, 0, 0, 0.4); | |
| } | |
| .ui.selection.menu > .item:hover { | |
| color: rgba(0, 0, 0, 0.6); | |
| } | |
| .ui.selection.menu > .item.active { | |
| color: rgba(0, 0, 0, 0.85); | |
| } | |
| .ui.inverted.selection.menu > .item { | |
| color: rgba(255, 255, 255, 0.4); | |
| } | |
| .ui.inverted.selection.menu > .item:hover { | |
| color: rgba(255, 255, 255, 0.9); | |
| } | |
| .ui.inverted.selection.menu > .item.active { | |
| color: #FFFFFF; | |
| } | |
| /*-------------- | |
| Floated | |
| ---------------*/ | |
| .ui.floated.menu { | |
| float: left; | |
| margin: 0rem 0.5rem 0rem 0rem; | |
| } | |
| .ui.right.floated.menu { | |
| float: right; | |
| margin: 0rem 0rem 0rem 0.5rem; | |
| } | |
| /*-------------- | |
| Inverted Colors | |
| ---------------*/ | |
| /*--- Light Colors ---*/ | |
| .ui.grey.menu { | |
| background-color: #F0F0F0; | |
| } | |
| /*--- Inverted Colors ---*/ | |
| .ui.inverted.green.menu { | |
| background-color: #A1CF64; | |
| } | |
| .ui.inverted.green.pointing.menu .active.item:after { | |
| background-color: #A1CF64; | |
| } | |
| .ui.inverted.red.menu { | |
| background-color: #D95C5C; | |
| } | |
| .ui.inverted.red.pointing.menu .active.item:after { | |
| background-color: #F16883; | |
| } | |
| .ui.inverted.blue.menu { | |
| background-color: #6ECFF5; | |
| } | |
| .ui.inverted.blue.pointing.menu .active.item:after { | |
| background-color: #6ECFF5; | |
| } | |
| .ui.inverted.purple.menu { | |
| background-color: #564F8A; | |
| } | |
| .ui.inverted.purple.pointing.menu .active.item:after { | |
| background-color: #564F8A; | |
| } | |
| .ui.inverted.orange.menu { | |
| background-color: #F05940; | |
| } | |
| .ui.inverted.orange.pointing.menu .active.item:after { | |
| background-color: #F05940; | |
| } | |
| .ui.inverted.teal.menu { | |
| background-color: #00B5AD; | |
| } | |
| .ui.inverted.teal.pointing.menu .active.item:after { | |
| background-color: #00B5AD; | |
| } | |
| /*-------------- | |
| Fitted | |
| ---------------*/ | |
| .ui.fitted.menu .item, | |
| .ui.fitted.menu .item .menu .item, | |
| .ui.menu .fitted.item { | |
| padding: 0em; | |
| } | |
| .ui.horizontally.fitted.menu .item, | |
| .ui.horizontally.fitted.menu .item .menu .item, | |
| .ui.menu .horizontally.fitted.item { | |
| padding-top: 0.83em; | |
| padding-bottom: 0.83em; | |
| } | |
| .ui.vertically.fitted.menu .item, | |
| .ui.vertically.fitted.menu .item .menu .item, | |
| .ui.menu .vertically.fitted.item { | |
| padding-left: 0.95em; | |
| padding-right: 0.95em; | |
| } | |
| /*-------------- | |
| Borderless | |
| ---------------*/ | |
| .ui.borderless.menu .item:before, | |
| .ui.borderless.menu .item .menu .item:before, | |
| .ui.menu .borderless.item:before { | |
| background-image: none; | |
| } | |
| /*------------------- | |
| Compact | |
| --------------------*/ | |
| .ui.compact.menu { | |
| display: inline-block; | |
| margin: 0em; | |
| vertical-align: middle; | |
| } | |
| .ui.compact.vertical.menu { | |
| width: auto !important; | |
| } | |
| .ui.compact.vertical.menu .item:last-child::before { | |
| display: block; | |
| } | |
| /*------------------- | |
| Fluid | |
| --------------------*/ | |
| .ui.menu.fluid, | |
| .ui.vertical.menu.fluid { | |
| display: block; | |
| width: 100% !important; | |
| } | |
| /*------------------- | |
| Evenly Sized | |
| --------------------*/ | |
| .ui.item.menu, | |
| .ui.item.menu .item { | |
| width: 100%; | |
| padding-left: 0px !important; | |
| padding-right: 0px !important; | |
| text-align: center; | |
| } | |
| .ui.menu.two.item .item { | |
| width: 50%; | |
| } | |
| .ui.menu.three.item .item { | |
| width: 33.333%; | |
| } | |
| .ui.menu.four.item .item { | |
| width: 25%; | |
| } | |
| .ui.menu.five.item .item { | |
| width: 20%; | |
| } | |
| .ui.menu.six.item .item { | |
| width: 16.666%; | |
| } | |
| .ui.menu.seven.item .item { | |
| width: 14.285%; | |
| } | |
| .ui.menu.eight.item .item { | |
| width: 12.500%; | |
| } | |
| .ui.menu.nine.item .item { | |
| width: 11.11%; | |
| } | |
| .ui.menu.ten.item .item { | |
| width: 10.0%; | |
| } | |
| .ui.menu.eleven.item .item { | |
| width: 9.09%; | |
| } | |
| .ui.menu.twelve.item .item { | |
| width: 8.333%; | |
| } | |
| /*-------------- | |
| Fixed | |
| ---------------*/ | |
| .ui.menu.fixed { | |
| position: fixed; | |
| z-index: 10; | |
| margin: 0em; | |
| border: none; | |
| width: 100%; | |
| } | |
| .ui.menu.fixed, | |
| .ui.menu.fixed .item:first-child, | |
| .ui.menu.fixed .item:last-child { | |
| -webkit-border-radius: 0px !important; | |
| -moz-border-radius: 0px !important; | |
| border-radius: 0px !important; | |
| } | |
| .ui.menu.fixed.top { | |
| top: 0px; | |
| left: 0px; | |
| right: auto; | |
| bottom: auto; | |
| } | |
| .ui.menu.fixed.right { | |
| top: 0px; | |
| right: 0px; | |
| left: auto; | |
| bottom: auto; | |
| width: auto; | |
| height: 100%; | |
| } | |
| .ui.menu.fixed.bottom { | |
| bottom: 0px; | |
| left: 0px; | |
| top: auto; | |
| right: auto; | |
| } | |
| .ui.menu.fixed.left { | |
| top: 0px; | |
| left: 0px; | |
| right: auto; | |
| bottom: auto; | |
| width: auto; | |
| height: 100%; | |
| } | |
| /*------------------- | |
| Pointing | |
| --------------------*/ | |
| .ui.pointing.menu .active.item:after { | |
| position: absolute; | |
| bottom: -0.35em; | |
| left: 50%; | |
| content: ""; | |
| margin-left: -0.3em; | |
| width: 0.6em; | |
| height: 0.6em; | |
| border: none; | |
| border-bottom: 1px solid rgba(0, 0, 0, 0.1); | |
| border-right: 1px solid rgba(0, 0, 0, 0.1); | |
| background-image: none; | |
| -webkit-transform: rotate(45deg); | |
| -moz-transform: rotate(45deg); | |
| transform: rotate(45deg); | |
| z-index: 2; | |
| -webkit-transition: background 0.2s ease | |
| ; | |
| -moz-transition: background 0.2s ease | |
| ; | |
| -o-transition: background 0.2s ease | |
| ; | |
| -ms-transition: background 0.2s ease | |
| ; | |
| transition: background 0.2s ease | |
| ; | |
| } | |
| /* Don't double up pointers */ | |
| .ui.pointing.menu .active.item .menu .active.item:after { | |
| display: none; | |
| } | |
| .ui.vertical.pointing.menu .active.item:after { | |
| position: absolute; | |
| top: 50%; | |
| margin-top: -0.3em; | |
| right: -0.4em; | |
| bottom: auto; | |
| left: auto; | |
| border: none; | |
| border-top: 1px solid rgba(0, 0, 0, 0.1); | |
| border-right: 1px solid rgba(0, 0, 0, 0.1); | |
| } | |
| /* Colors */ | |
| .ui.pointing.menu .active.item:after { | |
| background-color: #FCFCFC; | |
| } | |
| .ui.pointing.menu .active.item.hover:after, | |
| .ui.pointing.menu .active.item:hover:after { | |
| background-color: #FAFAFA; | |
| } | |
| .ui.vertical.pointing.menu .menu .active.item:after { | |
| background-color: #F4F4F4; | |
| } | |
| .ui.pointing.menu a.active.item:active:after { | |
| background-color: #F0F0F0; | |
| } | |
| /*-------------- | |
| Attached | |
| ---------------*/ | |
| .ui.menu.attached { | |
| margin: 0rem; | |
| -moz-border-radius: 0px; | |
| -webkit-border-radius: 0px; | |
| border-radius: 0px; | |
| /* avoid rgba multiplying */ | |
| -moz-box-shadow: 0px 0px 0px 1px #DDDDDD; | |
| -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD; | |
| box-shadow: 0px 0px 0px 1px #DDDDDD; | |
| } | |
| .ui.top.attached.menu { | |
| -moz-border-radius: 0.1875em 0.1875em 0px 0px; | |
| -webkit-border-radius: 0.1875em 0.1875em 0px 0px; | |
| border-radius: 0.1875em 0.1875em 0px 0px; | |
| } | |
| .ui.menu.bottom.attached { | |
| -moz-border-radius: 0px 0px 0.1875em 0.1875em; | |
| -webkit-border-radius: 0px 0px 0.1875em 0.1875em; | |
| border-radius: 0px 0px 0.1875em 0.1875em; | |
| } | |
| /*-------------- | |
| Sizes | |
| ---------------*/ | |
| .ui.small.menu .item { | |
| font-size: 0.875rem; | |
| } | |
| .ui.small.menu:not(.vertical) .item > .input input { | |
| padding-top: 0.4em; | |
| padding-bottom: 0.4em; | |
| } | |
| .ui.small.vertical.menu { | |
| width: 13rem; | |
| } | |
| .ui.menu .item { | |
| font-size: 1rem; | |
| } | |
| .ui.vertical.menu { | |
| width: 15rem; | |
| } | |
| .ui.large.menu .item { | |
| font-size: 1.125rem; | |
| } | |
| .ui.large.menu .item .item { | |
| font-size: 0.875rem; | |
| } | |
| .ui.large.menu:not(.vertical) .item > .input input { | |
| top: -0.125em; | |
| padding-bottom: 0.6em; | |
| padding-top: 0.6em; | |
| } | |
| .ui.large.menu .dropdown.item .item { | |
| font-size: 1rem; | |
| } | |
| .ui.large.vertical.menu { | |
| width: 18rem; | |
| } | |
| /* | |
| * # Semantic - Message | |
| * http://github.com/jlukic/semantic-ui/ | |
| * | |
| * | |
| * Copyright 2013 Contributors | |
| * Released under the MIT license | |
| * http://opensource.org/licenses/MIT | |
| * | |
| */ | |
| /******************************* | |
| Message | |
| *******************************/ | |
| .ui.message { | |
| position: relative; | |
| min-height: 18px; | |
| margin: 1em 0em; | |
| height: auto; | |
| background-color: #EFEFEF; | |
| padding: 1em; | |
| line-height: 1.33; | |
| color: rgba(0, 0, 0, 0.6); | |
| -webkit-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease; | |
| -moz-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease; | |
| -o-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease; | |
| -ms-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease; | |
| transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| -webkit-border-radius: 0.325em 0.325em 0.325em 0.325em; | |
| -moz-border-radius: 0.325em 0.325em 0.325em 0.325em; | |
| border-radius: 0.325em 0.325em 0.325em 0.325em; | |
| } | |
| .ui.message:first-child { | |
| margin-top: 0em; | |
| } | |
| .ui.message:last-child { | |
| margin-bottom: 0em; | |
| } | |
| /*-------------- | |
| Content | |
| ---------------*/ | |
| /* block with headers */ | |
| .ui.message .header { | |
| margin: 0em; | |
| font-size: 1.33em; | |
| font-weight: bold; | |
| } | |
| /* block with paragraphs */ | |
| .ui.message p { | |
| opacity: 0.85; | |
| margin: 1em 0em; | |
| } | |
| .ui.message p:first-child { | |
| margin-top: 0em; | |
| } | |
| .ui.message p:last-child { | |
| margin-bottom: 0em; | |
| } | |
| .ui.message .header + p { | |
| margin-top: 0.3em; | |
| } | |
| .ui.message > :first-child { | |
| margin-top: 0em; | |
| } | |
| .ui.message > :last-child { | |
| margin-bottom: 0em; | |
| } | |
| /* block with child list */ | |
| .ui.message ul.list { | |
| opacity: 0.85; | |
| list-style-position: inside; | |
| margin: 0.2em 0em; | |
| padding: 0em; | |
| } | |
| .ui.message ul.list li { | |
| position: relative; | |
| list-style-type: none; | |
| margin: 0em 0em 0.3em 1em; | |
| padding: 0em; | |
| } | |
| .ui.message ul.list li:before { | |
| position: absolute; | |
| content: '\2022'; | |
| top: -0.05em; | |
| left: -0.8em; | |
| height: 100%; | |
| vertical-align: baseline; | |
| opacity: 0.5; | |
| } | |
| .ui.message ul.list li:first-child { | |
| margin-top: 0em; | |
| } | |
| /* dismissable block */ | |
| .ui.message > .close.icon { | |
| cursor: pointer; | |
| position: absolute; | |
| top: 1em; | |
| right: 0.5em; | |
| opacity: 0.7; | |
| -webkit-transition: opacity 0.1s linear | |
| ; | |
| -moz-transition: opacity 0.1s linear | |
| ; | |
| -o-transition: opacity 0.1s linear | |
| ; | |
| -ms-transition: opacity 0.1s linear | |
| ; | |
| transition: opacity 0.1s linear | |
| ; | |
| } | |
| .ui.message > .close.icon:hover { | |
| opacity: 1; | |
| } | |
| /******************************* | |
| States | |
| *******************************/ | |
| .ui.message.visible, | |
| .ui.header.visible { | |
| display: block !important; | |
| } | |
| .ui.message.hidden, | |
| .ui.header.hidden { | |
| display: none; | |
| } | |
| /******************************* | |
| Variations | |
| *******************************/ | |
| /*-------------- | |
| Compact | |
| ---------------*/ | |
| .ui.compact.message { | |
| display: inline-block; | |
| } | |
| /*-------------- | |
| Attached | |
| ---------------*/ | |
| .ui.attached.message { | |
| margin-left: -1px; | |
| margin-right: -1px; | |
| margin-bottom: -1px; | |
| -webkit-border-radius: 0.325em 0.325em 0em 0em; | |
| -moz-border-radius: 0.325em 0.325em 0em 0em; | |
| border-radius: 0.325em 0.325em 0em 0em; | |
| -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset; | |
| -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset; | |
| box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset; | |
| } | |
| .ui.bottom.attached.message { | |
| margin-top: -1px; | |
| -webkit-border-radius: 0em 0em 0.325em 0.325em; | |
| -moz-border-radius: 0em 0em 0.325em 0.325em; | |
| border-radius: 0em 0em 0.325em 0.325em; | |
| } | |
| /*-------------- | |
| Icon | |
| ---------------*/ | |
| .ui.icon.message { | |
| display: table; | |
| width: 100%; | |
| } | |
| .ui.icon.message > .icon { | |
| display: table-cell; | |
| vertical-align: middle; | |
| font-size: 3.8em; | |
| opacity: 0.5; | |
| } | |
| .ui.icon.message > .icon + .content { | |
| padding-left: 1em; | |
| } | |
| .ui.icon.message > .content { | |
| display: table-cell; | |
| vertical-align: middle; | |
| } | |
| /*-------------- | |
| Inverted | |
| ---------------*/ | |
| .ui.inverted.message { | |
| background-color: rgba(255, 255, 255, 0.05); | |
| color: rgba(255, 255, 255, 0.95); | |
| } | |
| /*-------------- | |
| Floating | |
| ---------------*/ | |
| .ui.floating.message { | |
| -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset; | |
| -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset; | |
| box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset; | |
| } | |
| /*-------------- | |
| Colors | |
| ---------------*/ | |
| .ui.black.message { | |
| background-color: #333333; | |
| color: rgba(255, 255, 255, 0.95); | |
| } | |
| /*-------------- | |
| Types | |
| ---------------*/ | |
| .ui.blue.message, | |
| .ui.info.message { | |
| background-color: #E6F4F9; | |
| color: #4D8796; | |
| } | |
| /* Green Text Block */ | |
| .ui.green.message { | |
| background-color: #DEFCD5; | |
| color: #52A954; | |
| } | |
| /* Yellow Text Block */ | |
| .ui.yellow.message, | |
| .ui.warning.message { | |
| background-color: #F6F3D5; | |
| color: #96904D; | |
| } | |
| /* Red Text Block */ | |
| .ui.red.message { | |
| background-color: #F1D7D7; | |
| color: #A95252; | |
| } | |
| /* Success Text Block */ | |
| .ui.success.message, | |
| .ui.positive.message { | |
| background-color: #DEFCD5; | |
| color: #52A954; | |
| } | |
| /* Error Text Block */ | |
| .ui.error.message, | |
| .ui.negative.message { | |
| background-color: #F1D7D7; | |
| color: #A95252; | |
| } | |
| /*-------------- | |
| Sizes | |
| ---------------*/ | |
| .ui.small.message { | |
| font-size: 0.875em; | |
| } | |
| .ui.message { | |
| font-size: 1em; | |
| } | |
| .ui.large.message { | |
| font-size: 1.125em; | |
| } | |
| .ui.huge.message { | |
| font-size: 1.5em; | |
| } | |
| .ui.massive.message { | |
| font-size: 2em; | |
| } | |
| /* | |
| * # Semantic - Table | |
| * http://github.com/jlukic/semantic-ui/ | |
| * | |
| * | |
| * Copyright 2013 Contributors | |
| * Released under the MIT license | |
| * http://opensource.org/licenses/MIT | |
| * | |
| */ | |
| /******************************* | |
| Table | |
| *******************************/ | |
| /* Prototype */ | |
| .ui.table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| /* Table Content */ | |
| .ui.table th, | |
| .ui.table tr, | |
| .ui.table td { | |
| border-collapse: collapse; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| -webkit-transition: all 0.1s ease-out; | |
| -moz-transition: all 0.1s ease-out; | |
| -o-transition: all 0.1s ease-out; | |
| -ms-transition: all 0.1s ease-out; | |
| transition: all 0.1s ease-out; | |
| } | |
| /* Headers */ | |
| .ui.table thead { | |
| border-bottom: 1px solid rgba(0, 0, 0, 0.03); | |
| } | |
| .ui.table tfoot th { | |
| background-color: rgba(0, 0, 0, 0.03); | |
| } | |
| .ui.table th { | |
| cursor: auto; | |
| background-color: rgba(0, 0, 0, 0.05); | |
| text-align: left; | |
| color: rgba(0, 0, 0, 0.8); | |
| padding: 0.5em 0.7em; | |
| vertical-align: middle; | |
| } | |
| .ui.table thead th:first-child { | |
| border-radius: 5px 0px 0px 0px; | |
| } | |
| .ui.table thead th:last-child { | |
| border-radius: 0px 5px 0px 0px; | |
| } | |
| .ui.table tfoot th:first-child { | |
| border-radius: 0px 0px 0px 5px; | |
| } | |
| .ui.table tfoot th:last-child { | |
| border-radius: 0px 0px 5px 0px; | |
| } | |
| /* Table Cells */ | |
| .ui.table td { | |
| padding: 0.40em 0.7em; | |
| vertical-align: middle; | |
| } | |
| /* Footer */ | |
| .ui.table tfoot { | |
| border-top: 1px solid rgba(0, 0, 0, 0.03); | |
| } | |
| .ui.table tfoot th { | |
| font-weight: normal; | |
| font-style: italic; | |
| } | |
| /* Table Striping */ | |
| .ui.table tbody tr:nth-child(2n) { | |
| background-color: rgba(0, 0, 50, 0.02); | |
| } | |
| /* Icons */ | |
| .ui.table > .icon { | |
| vertical-align: baseline; | |
| } | |
| .ui.table > .icon:only-child { | |
| margin: 0em; | |
| } | |
| /* Table Segment */ | |
| .ui.table.segment:after { | |
| display: none; | |
| } | |
| .ui.table.segment.stacked:after { | |
| display: block; | |
| } | |
| /* Responsive */ | |
| @media only screen and (max-width: 768px) { | |
| .ui.table { | |
| display: block; | |
| padding: 0em; | |
| } | |
| .ui.table thead, | |
| .ui.table tfoot { | |
| display: none; | |
| } | |
| .ui.table tbody { | |
| display: block; | |
| } | |
| .ui.table tr { | |
| display: block; | |
| } | |
| .ui.table tr > td { | |
| width: 100% !important; | |
| display: block; | |
| border: none !important; | |
| padding: 0.25em 0.75em; | |
| box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05) !important; | |
| } | |
| .ui.table td:first-child { | |
| font-weight: bold; | |
| padding-top: 1em; | |
| } | |
| .ui.table td:last-child { | |
| box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important; | |
| padding-bottom: 1em; | |
| } | |
| /* Clear BG Colors */ | |
| .ui.table tr > td.warning, | |
| .ui.table tr > td.error, | |
| .ui.table tr > td.active, | |
| .ui.table tr > td.positive, | |
| .ui.table tr > td.negative { | |
| background-color: transparent !important; | |
| } | |
| } | |
| /******************************* | |
| States | |
| *******************************/ | |
| /*-------------- | |
| Hover | |
| ---------------*/ | |
| /* Sortable */ | |
| .ui.sortable.table th.disabled:hover { | |
| cursor: auto; | |
| text-align: left; | |
| font-weight: bold; | |
| color: #333333; | |
| color: rgba(0, 0, 0, 0.8); | |
| } | |
| .ui.sortable.table thead th:hover { | |
| background-color: rgba(0, 0, 0, 0.13); | |
| color: rgba(0, 0, 0, 0.8); | |
| } | |
| /* Inverted Sortable */ | |
| .ui.inverted.sortable.table thead th:hover { | |
| background-color: rgba(255, 255, 255, 0.13); | |
| color: #ffffff; | |
| } | |
| /*-------------- | |
| Positive | |
| ---------------*/ | |
| .ui.table tr.positive, | |
| .ui.table td.positive { | |
| -webkit-box-shadow: 2px 0px 0px #119000 inset; | |
| -moz-box-shadow: 2px 0px 0px #119000 inset; | |
| box-shadow: 2px 0px 0px #119000 inset; | |
| } | |
| .ui.table tr.positive td, | |
| .ui.table td.positive { | |
| background-color: #F2F8F0 !important; | |
| color: #119000 !important; | |
| } | |
| .ui.celled.table tr.positive:hover td, | |
| .ui.celled.table tr:hover td.positive, | |
| .ui.table tr.positive:hover td, | |
| .ui.table td:hover.positive, | |
| .ui.table th:hover.positive { | |
| background-color: #ECF5E9 !important; | |
| color: #119000 !important; | |
| } | |
| /*-------------- | |
| Negative | |
| ---------------*/ | |
| .ui.table tr.negative, | |
| .ui.table td.negative { | |
| -webkit-box-shadow: 2px 0px 0px #CD2929 inset; | |
| -moz-box-shadow: 2px 0px 0px #CD2929 inset; | |
| box-shadow: 2px 0px 0px #CD2929 inset; | |
| } | |
| .ui.table tr.negative td, | |
| .ui.table td.negative { | |
| background-color: #F9F4F4; | |
| color: #CD2929 !important; | |
| } | |
| .ui.celled.table tr.negative:hover td, | |
| .ui.celled.table tr:hover td.negative, | |
| .ui.table tr.negative:hover td, | |
| .ui.table td:hover.negative, | |
| .ui.table th:hover.negative { | |
| background-color: #F2E8E8; | |
| color: #CD2929; | |
| } | |
| /*-------------- | |
| Error | |
| ---------------*/ | |
| .ui.table tr.error, | |
| .ui.table td.error { | |
| -webkit-box-shadow: 2px 0px 0px #CD2929 inset; | |
| -moz-box-shadow: 2px 0px 0px #CD2929 inset; | |
| box-shadow: 2px 0px 0px #CD2929 inset; | |
| } | |
| .ui.table tr.error td, | |
| .ui.table td.error, | |
| .ui.table th.error { | |
| background-color: #F9F4F4; | |
| color: #CD2929; | |
| } | |
| .ui.celled.table tr.error:hover td, | |
| .ui.celled.table tr:hover td.error, | |
| .ui.table tr.error:hover td, | |
| .ui.table td:hover.error, | |
| .ui.table th:hover.error { | |
| background-color: #F2E8E8; | |
| color: #CD2929; | |
| } | |
| /*-------------- | |
| Warning | |
| ---------------*/ | |
| .ui.table tr.warning, | |
| .ui.table td.warning { | |
| -webkit-box-shadow: 2px 0px 0px #7D6C00 inset; | |
| -moz-box-shadow: 2px 0px 0px #7D6C00 inset; | |
| box-shadow: 2px 0px 0px #7D6C00 inset; | |
| } | |
| .ui.table tr.warning td, | |
| .ui.table td.warning, | |
| .ui.table th.warning { | |
| background-color: #FBF6E9; | |
| color: #7D6C00; | |
| } | |
| .ui.celled.table tr.warning:hover td, | |
| .ui.celled.table tr:hover td.warning, | |
| .ui.table tr.warning:hover td, | |
| .ui.table td:hover.warning, | |
| .ui.table th:hover.warning { | |
| background-color: #F3EDDC; | |
| color: #7D6C00; | |
| } | |
| /*-------------- | |
| Active | |
| ---------------*/ | |
| .ui.table tr.active, | |
| .ui.table td.active { | |
| -webkit-box-shadow: 2px 0px 0px rgba(50, 50, 50, 0.9) inset; | |
| -moz-box-shadow: 2px 0px 0px rgba(50, 50, 50, 0.9) inset; | |
| box-shadow: 2px 0px 0px rgba(50, 50, 50, 0.9) inset; | |
| } | |
| .ui.table tr.active td, | |
| .ui.table tr td.active { | |
| background-color: #E0E0E0; | |
| color: rgba(50, 50, 50, 0.9); | |
| /* border-color: rgba(0, 0, 0, 0.15) !important; */ | |
| } | |
| /*-------------- | |
| Disabled | |
| ---------------*/ | |
| .ui.table tr.disabled td, | |
| .ui.table tr td.disabled, | |
| .ui.table tr.disabled:hover td, | |
| .ui.table tr:hover td.disabled { | |
| color: rgba(150, 150, 150, 0.3); | |
| } | |
| /******************************* | |
| Variations | |
| *******************************/ | |
| /*-------------- | |
| Column Count | |
| ---------------*/ | |
| .ui.two.column.table td { | |
| width: 50%; | |
| } | |
| .ui.three.column.table td { | |
| width: 33.3333%; | |
| } | |
| .ui.four.column.table td { | |
| width: 25%; | |
| } | |
| .ui.five.column.table td { | |
| width: 20%; | |
| } | |
| .ui.six.column.table td { | |
| width: 16.66667%; | |
| } | |
| .ui.seven.column.table td { | |
| width: 14.2857%; | |
| } | |
| .ui.eight.column.table td { | |
| width: 12.5%; | |
| } | |
| .ui.nine.column.table td { | |
| width: 11.1111%; | |
| } | |
| .ui.ten.column.table td { | |
| width: 10%; | |
| } | |
| .ui.eleven.column.table td { | |
| width: 9.0909%; | |
| } | |
| .ui.twelve.column.table td { | |
| width: 8.3333%; | |
| } | |
| .ui.thirteen.column.table td { | |
| width: 7.6923%; | |
| } | |
| .ui.fourteen.column.table td { | |
| width: 7.1428%; | |
| } | |
| .ui.fifteen.column.table td { | |
| width: 6.6666%; | |
| } | |
| .ui.sixteen.column.table td { | |
| width: 6.25%; | |
| } | |
| /* Column Width */ | |
| .ui.table th.one.wide, | |
| .ui.table td.one.wide { | |
| width: 6.25%; | |
| } | |
| .ui.table th.two.wide, | |
| .ui.table td.two.wide { | |
| width: 12.5%; | |
| } | |
| .ui.table th.three.wide, | |
| .ui.table td.three.wide { | |
| width: 18.75%; | |
| } | |
| .ui.table th.four.wide, | |
| .ui.table td.four.wide { | |
| width: 25%; | |
| } | |
| .ui.table th.five.wide, | |
| .ui.table td.five.wide { | |
| width: 31.25%; | |
| } | |
| .ui.table th.six.wide, | |
| .ui.table td.six.wide { | |
| width: 37.5%; | |
| } | |
| .ui.table th.seven.wide, | |
| .ui.table td.seven.wide { | |
| width: 43.75%; | |
| } | |
| .ui.table th.eight.wide, | |
| .ui.table td.eight.wide { | |
| width: 50%; | |
| } | |
| .ui.table th.nine.wide, | |
| .ui.table td.nine.wide { | |
| width: 56.25%; | |
| } | |
| .ui.table th.ten.wide, | |
| .ui.table td.ten.wide { | |
| width: 62.5%; | |
| } | |
| .ui.table th.eleven.wide, | |
| .ui.table td.eleven.wide { | |
| width: 68.75%; | |
| } | |
| .ui.table th.twelve.wide, | |
| .ui.table td.twelve.wide { | |
| width: 75%; | |
| } | |
| .ui.table th.thirteen.wide, | |
| .ui.table td.thirteen.wide { | |
| width: 81.25%; | |
| } | |
| .ui.table th.fourteen.wide, | |
| .ui.table td.fourteen.wide { | |
| width: 87.5%; | |
| } | |
| .ui.table th.fifteen.wide, | |
| .ui.table td.fifteen.wide { | |
| width: 93.75%; | |
| } | |
| .ui.table th.sixteen.wide, | |
| .ui.table td.sixteen.wide { | |
| width: 100%; | |
| } | |
| /*-------------- | |
| Celled | |
| ---------------*/ | |
| .ui.celled.table { | |
| color: rgba(0, 0, 0, 0.8); | |
| } | |
| .ui.celled.table tbody tr, | |
| .ui.celled.table tfoot tr { | |
| border: none; | |
| } | |
| .ui.celled.table th, | |
| .ui.celled.table td { | |
| border: 1px solid rgba(0, 0, 0, 0.1); | |
| } | |
| /* Coupling with segment */ | |
| .ui.celled.table.segment th:first-child, | |
| .ui.celled.table.segment td:first-child { | |
| border-left: none; | |
| } | |
| .ui.celled.table.segment th:last-child, | |
| .ui.celled.table.segment td:last-child { | |
| border-right: none; | |
| } | |
| /*-------------- | |
| Sortable | |
| ---------------*/ | |
| .ui.sortable.table thead th { | |
| cursor: pointer; | |
| white-space: nowrap; | |
| } | |
| .ui.sortable.table thead th.sorted, | |
| .ui.sortable.table thead th.sorted:hover { | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| } | |
| .ui.sortable.table thead th:after { | |
| display: inline-block; | |
| content: ''; | |
| width: 1em; | |
| opacity: 0.8; | |
| margin: 0em 0em 0em 0.5em; | |
| font-family: 'Icons'; | |
| font-style: normal; | |
| font-weight: normal; | |
| text-decoration: inherit; | |
| } | |
| .ui.sortable.table thead th.ascending:after { | |
| content: '\25b4'; | |
| } | |
| .ui.sortable.table thead th.descending:after { | |
| content: '\25be'; | |
| } | |
| /*-------------- | |
| Inverted | |
| ---------------*/ | |
| /* Text Color */ | |
| .ui.inverted.table td { | |
| color: rgba(255, 255, 255, 0.9); | |
| } | |
| .ui.inverted.table th { | |
| background-color: rgba(0, 0, 0, 0.15); | |
| color: rgba(255, 255, 255, 0.9); | |
| } | |
| /* Stripes */ | |
| .ui.inverted.table tbody tr:nth-child(2n) { | |
| background-color: rgba(255, 255, 255, 0.06); | |
| } | |
| /*-------------- | |
| Definition | |
| ---------------*/ | |
| .ui.definition.table td:first-child { | |
| font-weight: bold; | |
| } | |
| /*-------------- | |
| Collapsing | |
| ---------------*/ | |
| .ui.collapsing.table { | |
| width: auto; | |
| } | |
| /*-------------- | |
| Basic | |
| ---------------*/ | |
| .ui.basic.table th { | |
| background-color: transparent; | |
| padding: 0.5em; | |
| } | |
| .ui.basic.table tbody tr { | |
| border-bottom: 1px solid rgba(0, 0, 0, 0.03); | |
| } | |
| .ui.basic.table td { | |
| padding: 0.8em 0.5em; | |
| } | |
| .ui.basic.table tbody tr:nth-child(2n) { | |
| background-color: transparent !important; | |
| } | |
| /*-------------- | |
| Padded | |
| ---------------*/ | |
| .ui.padded.table th, | |
| .ui.padded.table td { | |
| padding: 0.8em 1em; | |
| } | |
| .ui.compact.table th { | |
| padding: 0.3em 0.5em; | |
| } | |
| .ui.compact.table td { | |
| padding: 0.2em 0.5em; | |
| } | |
| /*-------------- | |
| Sizes | |
| ---------------*/ | |
| /* Small */ | |
| .ui.small.table { | |
| font-size: 0.875em; | |
| } | |
| /* Standard */ | |
| .ui.table { | |
| font-size: 1em; | |
| } | |
| /* Large */ | |
| .ui.large.table { | |
| font-size: 1.1em; | |
| } | |
| /* | |
| * # Semantic - basic.Icon (Basic) | |
| * http://github.com/jlukic/semantic-ui/ | |
| * | |
| * | |
| * Copyright 2013 Contributors | |
| * Released under the MIT license | |
| * http://opensource.org/licenses/MIT | |
| * | |
| */ | |
| /******************************* | |
| basic.Icon | |
| *******************************/ | |
| @font-face { | |
| font-family: 'Basic Icons'; | |
| src: url(../fonts/basic.icons.eot); | |
| src: url(../fonts/basic.icons.eot?#iefix) format('embedded-opentype'), url(../fonts/basic.icons.woff) format('woff'), url(../fonts/basic.icons.ttf) format('truetype'), url(../fonts/basic.icons.svg#basic.icons) format('svg'); | |
| font-style: normal; | |
| font-weight: normal; | |
| font-variant: normal; | |
| text-decoration: inherit; | |
| text-transform: none; | |
| } | |
| i.basic.icon { | |
| display: inline-block; | |
| opacity: 0.75; | |
| margin: 0em 0.25em 0em 0em; | |
| width: 1.23em; | |
| height: 1em; | |
| font-family: 'Basic Icons'; | |
| font-style: normal; | |
| line-height: 1; | |
| font-weight: normal; | |
| text-decoration: inherit; | |
| text-align: center; | |
| speak: none; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-font-smoothing: antialiased; | |
| font-smoothing: antialiased; | |
| } | |
| /* basic.icons available */ | |
| i.basic.icon.circle.attention:before { | |
| content: '\2757'; | |
| } | |
| /* '❗' */ | |
| i.basic.icon.circle.help:before { | |
| content: '\e704'; | |
| } | |
| /* '' */ | |
| i.basic.icon.circle.info:before { | |
| content: '\e705'; | |
| } | |
| /* '' */ | |
| i.basic.icon.add:before { | |
| content: '\2795'; | |
| } | |
| /* '➕' */ | |
| i.basic.icon.chart:before { | |
| content: '📈'; | |
| } | |
| /* '\1f4c8' */ | |
| i.basic.icon.chart.bar:before { | |
| content: '📊'; | |
| } | |
| /* '\1f4ca' */ | |
| i.basic.icon.chart.pie:before { | |
| content: '\e7a2'; | |
| } | |
| /* '' */ | |
| i.basic.icon.resize.full:before { | |
| content: '\e744'; | |
| } | |
| /* '' */ | |
| i.basic.icon.resize.horizontal:before { | |
| content: '\2b0d'; | |
| } | |
| /* '⬍' */ | |
| i.basic.icon.resize.small:before { | |
| content: '\e746'; | |
| } | |
| /* '' */ | |
| i.basic.icon.resize.vertical:before { | |
| content: '\2b0c'; | |
| } | |
| /* '⬌' */ | |
| i.basic.icon.down:before { | |
| content: '\2193'; | |
| } | |
| /* '↓' */ | |
| i.basic.icon.down.triangle:before { | |
| content: '\25be'; | |
| } | |
| /* '▾' */ | |
| i.basic.icon.down.arrow:before { | |
| content: '\e75c'; | |
| } | |
| /* '' */ | |
| i.basic.icon.left:before { | |
| content: '\2190'; | |
| } | |
| /* '←' */ | |
| i.basic.icon.left.triangle:before { | |
| content: '\25c2'; | |
| } | |
| /* '◂' */ | |
| i.basic.icon.left.arrow:before { | |
| content: '\e75d'; | |
| } | |
| /* '' */ | |
| i.basic.icon.right:before { | |
| content: '\2192'; | |
| } | |
| /* '→' */ | |
| i.basic.icon.right.triangle:before { | |
| content: '\25b8'; | |
| } | |
| /* '▸' */ | |
| i.basic.icon.right.arrow:before { | |
| content: '\e75e'; | |
| } | |
| /* '' */ | |
| i.basic.icon.up:before { | |
| content: '\2191'; | |
| } | |
| /* '↑' */ | |
| i.basic.icon.up.triangle:before { | |
| content: '\25b4'; | |
| } | |
| /* '▴' */ | |
| i.basic.icon.up.arrow:before { | |
| content: '\e75f'; | |
| } | |
| /* '' */ | |
| i.basic.icon.folder:before { | |
| content: '\e810'; | |
| } | |
| /* '' */ | |
| i.basic.icon.open.folder:before { | |
| content: '📂'; | |
| } | |
| /* '\1f4c2' */ | |
| i.basic.icon.globe:before { | |
| content: '𝌍'; | |
| } | |
| /* '\1d30d' */ | |
| i.basic.icon.desk.globe:before { | |
| content: '🌐'; | |
| } | |
| /* '\1f310' */ | |
| i.basic.icon.star:before { | |
| content: '\e801'; | |
| } | |
| /* '' */ | |
| i.basic.icon.star.empty:before { | |
| content: '\e800'; | |
| } | |
| /* '' */ | |
| i.basic.icon.star.half:before { | |
| content: '\e701'; | |
| } | |
| /* '' */ | |
| i.basic.icon.lock:before { | |
| content: '🔒'; | |
| } | |
| /* '\1f512' */ | |
| i.basic.icon.unlock:before { | |
| content: '🔓'; | |
| } | |
| /* '\1f513' */ | |
| i.basic.icon.layout.grid:before { | |
| content: '\e80c'; | |
| } | |
| /* '' */ | |
| i.basic.icon.layout.block:before { | |
| content: '\e708'; | |
| } | |
| /* '' */ | |
| i.basic.icon.layout.list:before { | |
| content: '\e80b'; | |
| } | |
| /* '' */ | |
| i.basic.icon.heart.empty:before { | |
| content: '\2661'; | |
| } | |
| /* '♡' */ | |
| i.basic.icon.heart:before { | |
| content: '\2665'; | |
| } | |
| /* '♥' */ | |
| i.basic.icon.asterisk:before { | |
| content: '\2731'; | |
| } | |
| /* '✱' */ | |
| i.basic.icon.attachment:before { | |
| content: '📎'; | |
| } | |
| /* '\1f4ce' */ | |
| i.basic.icon.attention:before { | |
| content: '\26a0'; | |
| } | |
| /* '⚠' */ | |
| i.basic.icon.trophy:before { | |
| content: '🏉'; | |
| } | |
| /* '\1f3c9' */ | |
| i.basic.icon.barcode:before { | |
| content: '\e792'; | |
| } | |
| /* '' */ | |
| i.basic.icon.cart:before { | |
| content: '\e813'; | |
| } | |
| /* '' */ | |
| i.basic.icon.block:before { | |
| content: '🚫'; | |
| } | |
| /* '\1f6ab' */ | |
| i.basic.icon.book:before { | |
| content: '📖'; | |
| } | |
| i.basic.icon.bookmark:before { | |
| content: '🔖'; | |
| } | |
| /* '\1f516' */ | |
| i.basic.icon.calendar:before { | |
| content: '📅'; | |
| } | |
| /* '\1f4c5' */ | |
| i.basic.icon.cancel:before { | |
| content: '\2716'; | |
| } | |
| /* '✖' */ | |
| i.basic.icon.close:before { | |
| content: '\e80d'; | |
| } | |
| /* '' */ | |
| i.basic.icon.color:before { | |
| content: '\e794'; | |
| } | |
| /* '' */ | |
| i.basic.icon.chat:before { | |
| content: '\e720'; | |
| } | |
| /* '' */ | |
| i.basic.icon.check:before { | |
| content: '\2611'; | |
| } | |
| /* '☑' */ | |
| i.basic.icon.time:before { | |
| content: '🕔'; | |
| } | |
| /* '\1f554' */ | |
| i.basic.icon.cloud:before { | |
| content: '\2601'; | |
| } | |
| /* '☁' */ | |
| i.basic.icon.code:before { | |
| content: '\e714'; | |
| } | |
| /* '' */ | |
| i.basic.icon.email:before { | |
| content: '\40'; | |
| } | |
| /* '@' */ | |
| i.basic.icon.settings:before { | |
| content: '\26ef'; | |
| } | |
| /* '⛯' */ | |
| i.basic.icon.setting:before { | |
| content: '\2699'; | |
| } | |
| /* '⚙' */ | |
| i.basic.icon.comment:before { | |
| content: '\e802'; | |
| } | |
| /* '' */ | |
| i.basic.icon.clockwise.counter:before { | |
| content: '\27f2'; | |
| } | |
| /* '⟲' */ | |
| i.basic.icon.clockwise:before { | |
| content: '\27f3'; | |
| } | |
| /* '⟳' */ | |
| i.basic.icon.cube:before { | |
| content: '\e807'; | |
| } | |
| /* '' */ | |
| i.basic.icon.direction:before { | |
| content: '\27a2'; | |
| } | |
| /* '➢' */ | |
| i.basic.icon.doc:before { | |
| content: '📄'; | |
| } | |
| /* '\1f4c4' */ | |
| i.basic.icon.docs:before { | |
| content: '\e736'; | |
| } | |
| /* '' */ | |
| i.basic.icon.dollar:before { | |
| content: '💵'; | |
| } | |
| /* '\1f4b5' */ | |
| i.basic.icon.paint:before { | |
| content: '\e7b5'; | |
| } | |
| /* '' */ | |
| i.basic.icon.edit:before { | |
| content: '\270d'; | |
| } | |
| /* '✍' */ | |
| i.basic.icon.eject:before { | |
| content: '\2ecf'; | |
| } | |
| /* '⻏' */ | |
| i.basic.icon.export:before { | |
| content: '\e715'; | |
| } | |
| /* '' */ | |
| i.basic.icon.hide:before { | |
| content: '\e80f'; | |
| } | |
| /* '' */ | |
| i.basic.icon.unhide:before { | |
| content: '\e70b'; | |
| } | |
| /* '' */ | |
| i.basic.icon.facebook:before { | |
| content: '\f301'; | |
| } | |
| /* '' */ | |
| i.basic.icon.fast-forward:before { | |
| content: '\e804'; | |
| } | |
| /* '' */ | |
| i.basic.icon.fire:before { | |
| content: '🔥'; | |
| } | |
| /* '\1f525' */ | |
| i.basic.icon.flag:before { | |
| content: '\2691'; | |
| } | |
| /* '⚑' */ | |
| i.basic.icon.lightning:before { | |
| content: '\26a1'; | |
| } | |
| /* '⚡' */ | |
| i.basic.icon.lab:before { | |
| content: '\68'; | |
| } | |
| /* 'h' */ | |
| i.basic.icon.flight:before { | |
| content: '\2708'; | |
| } | |
| /* '✈' */ | |
| i.basic.icon.forward:before { | |
| content: '\27a6'; | |
| } | |
| /* '➦' */ | |
| i.basic.icon.gift:before { | |
| content: '🎁'; | |
| } | |
| /* '\1f381' */ | |
| i.basic.icon.github:before { | |
| content: '\f308'; | |
| } | |
| /* '' */ | |
| i.basic.icon.globe:before { | |
| content: '\e817'; | |
| } | |
| /* '' */ | |
| i.basic.icon.headphones:before { | |
| content: '🎧'; | |
| } | |
| /* '\1f3a7' */ | |
| i.basic.icon.question:before { | |
| content: '\2753'; | |
| } | |
| /* '❓' */ | |
| i.basic.icon.home:before { | |
| content: '\2302'; | |
| } | |
| /* '⌂' */ | |
| i.basic.icon.i:before { | |
| content: '\2139'; | |
| } | |
| /* 'ℹ' */ | |
| i.basic.icon.idea:before { | |
| content: '💡'; | |
| } | |
| /* '\1f4a1' */ | |
| i.basic.icon.open:before { | |
| content: '🔗'; | |
| } | |
| /* '\1f517' */ | |
| i.basic.icon.content:before { | |
| content: '\e782'; | |
| } | |
| /* '' */ | |
| i.basic.icon.location:before { | |
| content: '\e724'; | |
| } | |
| /* '' */ | |
| i.basic.icon.mail:before { | |
| content: '\2709'; | |
| } | |
| /* '✉' */ | |
| i.basic.icon.mic:before { | |
| content: '🎤'; | |
| } | |
| /* '\1f3a4' */ | |
| i.basic.icon.minus:before { | |
| content: '\2d'; | |
| } | |
| /* '-' */ | |
| i.basic.icon.money:before { | |
| content: '💰'; | |
| } | |
| /* '\1f4b0' */ | |
| i.basic.icon.off:before { | |
| content: '\e78e'; | |
| } | |
| /* '' */ | |
| i.basic.icon.pause:before { | |
| content: '\e808'; | |
| } | |
| /* '' */ | |
| i.basic.icon.photos:before { | |
| content: '\e812'; | |
| } | |
| /* '' */ | |
| i.basic.icon.photo:before { | |
| content: '🌄'; | |
| } | |
| /* '\1f304' */ | |
| i.basic.icon.pin:before { | |
| content: '📌'; | |
| } | |
| /* '\1f4cc' */ | |
| i.basic.icon.play:before { | |
| content: '\e809'; | |
| } | |
| /* '' */ | |
| i.basic.icon.plus:before { | |
| content: '\2b'; | |
| } | |
| /* '+' */ | |
| i.basic.icon.print:before { | |
| content: '\e716'; | |
| } | |
| /* '' */ | |
| i.basic.icon.rss:before { | |
| content: '\e73a'; | |
| } | |
| /* '' */ | |
| i.basic.icon.search:before { | |
| content: '🔍'; | |
| } | |
| /* '\1f50d' */ | |
| i.basic.icon.shuffle:before { | |
| content: '\e803'; | |
| } | |
| /* '' */ | |
| i.basic.icon.tag:before { | |
| content: '\e80a'; | |
| } | |
| /* '' */ | |
| i.basic.icon.tags:before { | |
| content: '\e70d'; | |
| } | |
| /* '' */ | |
| i.basic.icon.terminal:before { | |
| content: '\e7ac'; | |
| } | |
| /* '' */ | |
| i.basic.icon.thumbs.down:before { | |
| content: '👎'; | |
| } | |
| /* '\1f44e' */ | |
| i.basic.icon.thumbs.up:before { | |
| content: '👍'; | |
| } | |
| /* '\1f44d' */ | |
| i.basic.icon.to-end:before { | |
| content: '\e806'; | |
| } | |
| /* '' */ | |
| i.basic.icon.to-start:before { | |
| content: '\e805'; | |
| } | |
| /* '' */ | |
| i.basic.icon.top.list:before { | |
| content: '🏆'; | |
| } | |
| /* '\1f3c6' */ | |
| i.basic.icon.trash:before { | |
| content: '\e729'; | |
| } | |
| /* '' */ | |
| i.basic.icon.twitter:before { | |
| content: '\f303'; | |
| } | |
| /* '' */ | |
| i.basic.icon.upload:before { | |
| content: '\e711'; | |
| } | |
| /* '' */ | |
| i.basic.icon.user.add:before { | |
| content: '\e700'; | |
| } | |
| /* '' */ | |
| i.basic.icon.user:before { | |
| content: '👤'; | |
| } | |
| /* '\1f464' */ | |
| i.basic.icon.community:before { | |
| content: '\e814'; | |
| } | |
| /* '' */ | |
| i.basic.icon.users:before { | |
| content: '👥'; | |
| } | |
| /* '\1f465' */ | |
| i.basic.icon.id:before { | |
| content: '\e722'; | |
| } | |
| /* '' */ | |
| i.basic.icon.url:before { | |
| content: '🔗'; | |
| } | |
| /* '\1f517' */ | |
| i.basic.icon.zoom.in:before { | |
| content: '\e750'; | |
| } | |
| /* '' */ | |
| i.basic.icon.zoom.out:before { | |
| content: '\e751'; | |
| } | |
| /* '' */ | |
| /*-------------- | |
| Spacing Fix | |
| ---------------*/ | |
| /* dropdown arrows are to the right */ | |
| i.dropdown.basic.icon { | |
| margin: 0em 0em 0em 0.5em; | |
| } | |
| /* stars are usually consecutive */ | |
| i.basic.icon.star { | |
| width: auto; | |
| margin: 0em; | |
| } | |
| /* left side basic.icons */ | |
| i.basic.icon.left, | |
| i.basic.icon.left, | |
| i.basic.icon.left { | |
| width: auto; | |
| margin: 0em 0.5em 0em 0em; | |
| } | |
| /* right side basic.icons */ | |
| i.basic.icon.search, | |
| i.basic.icon.up, | |
| i.basic.icon.down, | |
| i.basic.icon.right { | |
| width: auto; | |
| margin: 0em 0em 0em 0.5em; | |
| } | |
| /*-------------- | |
| Aliases | |
| ---------------*/ | |
| /* aliases for convenience */ | |
| i.basic.icon.delete:before { | |
| content: '\e80d'; | |
| } | |
| /* '' */ | |
| i.basic.icon.dropdown:before { | |
| content: '\25be'; | |
| } | |
| /* '▾' */ | |
| i.basic.icon.help:before { | |
| content: '\e704'; | |
| } | |
| /* '' */ | |
| i.basic.icon.info:before { | |
| content: '\e705'; | |
| } | |
| /* '' */ | |
| i.basic.icon.error:before { | |
| content: '\e80d'; | |
| } | |
| /* '' */ | |
| i.basic.icon.dislike:before { | |
| content: '\2661'; | |
| } | |
| /* '♡' */ | |
| i.basic.icon.like:before { | |
| content: '\2665'; | |
| } | |
| /* '♥' */ | |
| i.basic.icon.eye:before { | |
| content: '\e80f'; | |
| } | |
| /* '' */ | |
| i.basic.icon.eye.hidden:before { | |
| content: '\e70b'; | |
| } | |
| /* '' */ | |
| i.basic.icon.date:before { | |
| content: '📅'; | |
| } | |
| /* '\1f4c5' */ | |
| /******************************* | |
| States | |
| *******************************/ | |
| i.basic.icon.hover { | |
| opacity: 1; | |
| } | |
| i.basic.icon.active { | |
| opacity: 1; | |
| } | |
| i.emphasized.basic.icon { | |
| opacity: 1; | |
| } | |
| i.basic.icon.disabled { | |
| opacity: 0.3; | |
| } | |
| /******************************* | |
| Variations | |
| *******************************/ | |
| /*------------------- | |
| Link | |
| --------------------*/ | |
| i.link.basic.icon { | |
| cursor: pointer; | |
| opacity: 0.7; | |
| -webkit-transition: opacity 0.3s ease-out; | |
| -moz-transition: opacity 0.3s ease-out; | |
| -o-transition: opacity 0.3s ease-out; | |
| -ms-transition: opacity 0.3s ease-out; | |
| transition: opacity 0.3s ease-out; | |
| } | |
| .link.basic.icon:hover { | |
| opacity: 1 !important; | |
| } | |
| /*------------------- | |
| Circular | |
| --------------------*/ | |
| i.circular.basic.icon { | |
| -webkit-border-radius: 500px !important; | |
| -moz-border-radius: 500px !important; | |
| border-radius: 500px !important; | |
| padding: 0.5em 0em !important; | |
| -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; | |
| -moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; | |
| box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; | |
| line-height: 1 !important; | |
| width: 2em !important; | |
| height: 2em !important; | |
| } | |
| i.circular.inverted.basic.icon { | |
| border: none; | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| /*------------------- | |
| Flipped | |
| --------------------*/ | |
| i.vertically.flipped.basic.icon { | |
| -webkit-transform: scale(1, -1); | |
| -moz-transform: scale(1, -1); | |
| -o-transform: scale(1, -1); | |
| -ms-transform: scale(1, -1); | |
| transform: scale(1, -1); | |
| } | |
| i.horizontally.flipped.basic.icon { | |
| -webkit-transform: scale(-1, 1); | |
| -moz-transform: scale(-1, 1); | |
| -o-transform: scale(-1, 1); | |
| -ms-transform: scale(-1, 1); | |
| transform: scale(-1, 1); | |
| } | |
| /*------------------- | |
| Rotated | |
| --------------------*/ | |
| i.left.rotated.basic.icon { | |
| -webkit-transform: rotate(-90deg); | |
| -moz-transform: rotate(-90deg); | |
| -o-transform: rotate(-90deg); | |
| -ms-transform: rotate(-90deg); | |
| transform: rotate(-90deg); | |
| } | |
| i.right.rotated.basic.icon { | |
| -webkit-transform: rotate(90deg); | |
| -moz-transform: rotate(90deg); | |
| -o-transform: rotate(90deg); | |
| -ms-transform: rotate(90deg); | |
| transform: rotate(90deg); | |
| } | |
| /*------------------- | |
| Square | |
| --------------------*/ | |
| i.square.basic.icon { | |
| width: 2em; | |
| height: 2em; | |
| padding: 0.5em 0.35em !important; | |
| -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; | |
| -moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; | |
| box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; | |
| vertical-align: baseline; | |
| } | |
| i.square.basic.icon:before { | |
| vertical-align: middle; | |
| } | |
| i.square.inverted.basic.icon { | |
| border: none; | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| /*------------------- | |
| Inverted | |
| --------------------*/ | |
| i.inverted.basic.icon { | |
| background-color: #222222; | |
| color: #FFFFFF; | |
| } | |
| /*------------------- | |
| Colors | |
| --------------------*/ | |
| i.blue.basic.icon { | |
| color: #6ECFF5 !important; | |
| } | |
| i.black.basic.icon { | |
| color: #5C6166 !important; | |
| } | |
| i.green.basic.icon { | |
| color: #A1CF64 !important; | |
| } | |
| i.red.basic.icon { | |
| color: #D95C5C !important; | |
| } | |
| i.purple.basic.icon { | |
| color: #564F8A !important; | |
| } | |
| i.teal.basic.icon { | |
| color: #00B5AD !important; | |
| } | |
| /*------------------- | |
| Inverted Colors | |
| --------------------*/ | |
| i.inverted.black.basic.icon { | |
| background-color: #5C6166 !important; | |
| color: #FFFFFF !important; | |
| } | |
| i.inverted.blue.basic.icon { | |
| background-color: #6ECFF5 !important; | |
| color: #FFFFFF !important; | |
| } | |
| i.inverted.green.basic.icon { | |
| background-color: #A1CF64 !important; | |
| color: #FFFFFF !important; | |
| } | |
| i.inverted.red.basic.icon { | |
| background-color: #D95C5C !important; | |
| color: #FFFFFF !important; | |
| } | |
| i.inverted.purple.basic.icon { | |
| background-color: #564F8A !important; | |
| color: #FFFFFF !important; | |
| } | |
| i.inverted.teal.basic.icon { | |
| background-color: #00B5AD !important; | |
| color: #FFFFFF !important; | |
| } | |
| /*------------------- | |
| Sizes | |
| --------------------*/ | |
| i.small.basic.icon { | |
| font-size: 0.875em; | |
| } | |
| i.basic.icon { | |
| font-size: 1em; | |
| } | |
| i.large.basic.icon { | |
| font-size: 1.5em; | |
| margin-right: 0.2em; | |
| vertical-align: middle; | |
| } | |
| i.big.basic.icon { | |
| font-size: 2em; | |
| margin-right: 0.5em; | |
| vertical-align: middle; | |
| } | |
| i.huge.basic.icon { | |
| font-size: 4em; | |
| margin-right: 0.75em; | |
| vertical-align: middle; | |
| } | |
| i.massive.basic.icon { | |
| font-size: 8em; | |
| margin-right: 1em; | |
| vertical-align: middle; | |
| } | |
| /* | |
| * # Semantic - Button | |
| * http://github.com/jlukic/semantic-ui/ | |
| * | |
| * | |
| * Copyright 2013 Contributors | |
| * Released under the MIT license | |
| * http://opensource.org/licenses/MIT | |
| * | |
| */ | |
| /******************************* | |
| Button | |
| *******************************/ | |
| /* Prototype */ | |
| .ui.button { | |
| cursor: pointer; | |
| display: inline-block; | |
| vertical-align: middle; | |
| min-height: 1em; | |
| outline: none; | |
| border: none; | |
| background-color: #EBEBEB; | |
| color: #808080; | |
| margin: 0em; | |
| padding: 0.8em 1.5em; | |
| font-size: 1rem; | |
| text-transform: uppercase; | |
| line-height: 1; | |
| font-weight: bold; | |
| font-style: normal; | |
| text-align: center; | |
| text-decoration: none; | |
| -webkit-border-radius: 0.2em; | |
| -moz-border-radius: 0.2em; | |
| border-radius: 0.2em; | |
| -webkit-box-shadow: 0em -0.2rem 0em rgba(0, 0, 0, 0.1) inset; | |
| -moz-box-shadow: 0em -0.2rem 0em rgba(0, 0, 0, 0.1) inset; | |
| box-shadow: 0em -0.2rem 0em rgba(0, 0, 0, 0.1) inset; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| -webkit-tap-highlight-color: rgba(0, 0, 0, 0); | |
| -webkit-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; | |
| -moz-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; | |
| -o-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; | |
| -ms-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; | |
| transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; | |
| } | |
| /*-------------- | |
| Count | |
| ---------------*/ | |
| .ui.count.button { | |
| -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; | |
| -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; | |
| box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; | |
| } | |
| .ui.count.button > .count { | |
| position: absolute; | |
| background-color: #FFFFFF; | |
| border: 1px solid #F0F0F0; | |
| margin: -0.8em -1.5em; | |
| padding: 0.8em 1.5em; | |
| } | |
| /*------------------- | |
| Primary | |
| --------------------*/ | |
| .ui.primary.buttons .button, | |
| .ui.primary.button { | |
| background-color: #D95C5C; | |
| color: #FFFFFF; | |
| } | |
| .ui.primary.buttons .button:hover, | |
| .ui.primary.button:hover, | |
| .ui.primary.buttons .active.button, | |
| .ui.primary.button.active { | |
| background-color: #E75859; | |
| color: #FFFFFF; | |
| } | |
| .ui.primary.buttons .button:active, | |
| .ui.primary.button:active { | |
| background-color: #D24B4C; | |
| color: #FFFFFF; | |
| } | |
| /*------------------- | |
| Secondary | |
| --------------------*/ | |
| .ui.secondary.buttons .button, | |
| .ui.secondary.button { | |
| background-color: #00B5AD; | |
| color: #FFFFFF; | |
| } | |
| .ui.secondary.buttons .button:hover, | |
| .ui.secondary.button:hover, | |
| .ui.secondary.buttons .active.button, | |
| .ui.secondary.button.active { | |
| background-color: #009A93; | |
| color: #FFFFFF; | |
| } | |
| .ui.secondary.buttons .button:active, | |
| .ui.secondary.button:active { | |
| background-color: #00847E; | |
| color: #FFFFFF; | |
| } | |
| /*------------------- | |
| Social | |
| --------------------*/ | |
| /* Facebook */ | |
| .ui.facebook.button { | |
| background-color: #3B579D; | |
| color: #FFFFFF; | |
| } | |
| .ui.facebook.button:hover { | |
| background-color: #3A59A9; | |
| } | |
| .ui.facebook.button:active { | |
| background-color: #334F95; | |
| } | |
| /* Twitter */ | |
| .ui.twitter.button { | |
| background-color: #4092CC; | |
| color: #FFFFFF; | |
| } | |
| .ui.twitter.button:hover { | |
| background-color: #399ADE; | |
| } | |
| .ui.twitter.button:active { | |
| background-color: #3283BC; | |
| } | |
| /* Google Plus */ | |
| .ui.google.plus.button { | |
| background-color: #D34836; | |
| color: #FFFFFF; | |
| } | |
| .ui.google.plus.button:hover { | |
| background-color: #E3432E; | |
| } | |
| .ui.google.plus.button:active { | |
| background-color: #CA3A27; | |
| } | |
| /* Linked In */ | |
| .ui.linkedin.button { | |
| background-color: #1F88BE; | |
| color: #FFFFFF; | |
| } | |
| .ui.linkedin.button:hover { | |
| background-color: #1394D6; | |
| } | |
| .ui.linkedin.button:active { | |
| background-color: #1179AE; | |
| } | |
| /* YouTube */ | |
| .ui.youtube.button { | |
| background-color: #CC181E; | |
| color: #FFFFFF; | |
| } | |
| .ui.youtube.button:hover { | |
| background-color: #DF0209; | |
| } | |
| .ui.youtube.button:active { | |
| background-color: #A50006; | |
| } | |
| /* Instagram */ | |
| .ui.instagram.button { | |
| background-color: #49769C; | |
| color: #FFFFFF; | |
| } | |
| .ui.instagram.button:hover { | |
| background-color: #4781B1; | |
| } | |
| .ui.instagram.button:active { | |
| background-color: #38658A; | |
| } | |
| /* Pinterest */ | |
| .ui.pinterest.button { | |
| background-color: #00ACED; | |
| color: #FFFFFF; | |
| } | |
| .ui.pinterest.button:hover { | |
| background-color: #00B9FF; | |
| } | |
| .ui.pinterest.button:active { | |
| background-color: #009EDA; | |
| } | |
| /*-------------- | |
| Icon | |
| ---------------*/ | |
| .ui.button > .icon { | |
| margin-right: 0.5em; | |
| line-height: 1; | |
| -webkit-transition: opacity 0.1s ease | |
| ; | |
| -moz-transition: opacity 0.1s ease | |
| ; | |
| -o-transition: opacity 0.1s ease | |
| ; | |
| -ms-transition: opacity 0.1s ease | |
| ; | |
| transition: opacity 0.1s ease | |
| ; | |
| } | |
| /******************************* | |
| States | |
| *******************************/ | |
| /*-------------- | |
| Active | |
| ---------------*/ | |
| .ui.buttons .active.button, | |
| .ui.active.button { | |
| opacity: 1 !important; | |
| background-color: #B0B0B0; | |
| background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.1))); | |
| background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); | |
| background-image: -moz-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); | |
| background-image: -o-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); | |
| background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); | |
| color: #FFFFFF; | |
| -webkit-box-shadow: 0px 0px 0.3em 0px rgba(0, 0, 0, 0.3) inset; | |
| -moz-box-shadow: 0px 0px 0.3em 0px rgba(0, 0, 0, 0.3) inset; | |
| box-shadow: 0px 0px 0.3em 0px rgba(0, 0, 0, 0.3) inset; | |
| } | |
| /*-------------- | |
| Hover | |
| ---------------*/ | |
| .ui.button:hover, | |
| .ui.active.button:hover { | |
| opacity: 1 !important; | |
| background-color: #A4A4A4; | |
| color: #FFFFFF; | |
| } | |
| .ui.button:hover .icon, | |
| .ui.button.hover .icon { | |
| opacity: 0.85; | |
| } | |
| /*-------------- | |
| Down | |
| ---------------*/ | |
| .ui.button:active, | |
| .ui.active.button:active { | |
| opacity: 1 !important; | |
| background-color: #8C8C8C; | |
| color: #FFFFFF; | |
| -webkit-box-shadow: 0px 1px 0.2em 0px rgba(0, 0, 0, 0.3) inset; | |
| -moz-box-shadow: 0px 1px 0.2em 0px rgba(0, 0, 0, 0.3) inset; | |
| box-shadow: 0px 1px 0.2em 0px rgba(0, 0, 0, 0.3) inset; | |
| } | |
| /*-------------- | |
| Loading | |
| ---------------*/ | |
| .ui.loading.button { | |
| position: relative; | |
| cursor: default; | |
| background-color: #F3F3F3 !important; | |
| color: transparent !important; | |
| background-image: none !important; | |
| -webkit-box-shadow: none !important; | |
| -moz-box-shadow: none !important; | |
| box-shadow: none !important; | |
| -webkit-transition: all 0s linear; | |
| -moz-transition: all 0s linear; | |
| -o-transition: all 0s linear; | |
| -ms-transition: all 0s linear; | |
| transition: all 0s linear; | |
| } | |
| .ui.loading.button:after { | |
| position: absolute; | |
| top: 0em; | |
| left: 0em; | |
| width: 100%; | |
| height: 100%; | |
| content: ''; | |
| background: transparent url(../images/loader-mini.gif) no-repeat 50% 50%; | |
| } | |
| .ui.labeled.icon.loading.button .icon { | |
| background-color: transparent; | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| /*------------------- | |
| Disabled | |
| --------------------*/ | |
| .ui.disabled.button { | |
| cursor: default; | |
| color: #DDDDDD !important; | |
| background-color: rgba(50, 50, 50, 0.05) !important; | |
| background-image: none !important; | |
| -webkit-box-shadow: none !important; | |
| -moz-box-shadow: none !important; | |
| box-shadow: none !important; | |
| } | |
| /******************************* | |
| Variations | |
| *******************************/ | |
| /*------------------- | |
| Floated | |
| --------------------*/ | |
| .ui.left.floated.buttons, | |
| .ui.left.floated.button { | |
| float: left; | |
| margin-right: 0.25em; | |
| } | |
| .ui.right.floated.buttons, | |
| .ui.right.floated.button { | |
| float: right; | |
| margin-left: 0.25em; | |
| } | |
| /*------------------- | |
| Sizes | |
| --------------------*/ | |
| .ui.buttons .button, | |
| .ui.button { | |
| font-size: 1rem; | |
| } | |
| .ui.buttons.mini .button, | |
| .ui.mini.button { | |
| font-size: 0.8125rem; | |
| padding: 0.6em 0.8em; | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| .ui.tiny.buttons .button, | |
| .ui.tiny.button { | |
| font-size: 0.875rem; | |
| padding: 0.6em 0.8em; | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| .ui.small.buttons .button, | |
| .ui.small.button { | |
| font-size: 0.875rem; | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| .ui.large.buttons .button, | |
| .ui.large.button { | |
| font-size: 1.125rem; | |
| } | |
| .ui.big.buttons .button, | |
| .ui.big.button { | |
| font-size: 1.25rem; | |
| } | |
| .ui.huge.buttons .button, | |
| .ui.huge.button { | |
| font-size: 1.375rem; | |
| } | |
| .ui.massive.buttons .button, | |
| .ui.massive.button { | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| } | |
| /* loading */ | |
| .ui.huge.loading.button:after { | |
| background-image: url(../images/loader-small.gif); | |
| } | |
| .ui.massive.buttons .loading.button:after, | |
| .ui.gigantic.buttons .loading.button:after, | |
| .ui.massive.loading.button:after, | |
| .ui.gigantic.loading.button:after { | |
| background-image: url(../images/loader-medium.gif); | |
| } | |
| .ui.huge.loading.button:after, | |
| .ui.huge.loading.button.active:after { | |
| background-image: url(../images/loader-small.gif); | |
| } | |
| .ui.massive.buttons .loading.button:after, | |
| .ui.gigantic.buttons .loading.button:after, | |
| .ui.massive.loading.button:after, | |
| .ui.gigantic.loading.button:after, | |
| .ui.massive.buttons .loading.button.active:after, | |
| .ui.gigantic.buttons .loading.button.active:after, | |
| .ui.massive.loading.button.active:after, | |
| .ui.gigantic.loading.button.active:after { | |
| background-image: url(../images/loader-medium.gif); | |
| } | |
| /*-------------- | |
| Icon Only | |
| ---------------*/ | |
| .ui.icon.buttons .button, | |
| .ui.icon.button { | |
| padding: 0.8em; | |
| } | |
| .ui.icon.buttons .button > .icon, | |
| .ui.icon.button > .icon { | |
| opacity: 1; | |
| margin: 0em; | |
| vertical-align: top; | |
| } | |
| /*------------------- | |
| Basic | |
| --------------------*/ | |
| .ui.basic.buttons .button, | |
| .ui.basic.button { | |
| background-color: transparent !important; | |
| background-image: none; | |
| color: #808080 !important; | |
| font-weight: normal; | |
| text-transform: none; | |
| -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; | |
| -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; | |
| box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; | |
| } | |
| .ui.basic.buttons { | |
| -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; | |
| -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; | |
| box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; | |
| -webkit-border-radius: 0.2em; | |
| -moz-border-radius: 0.2em; | |
| border-radius: 0.2em; | |
| } | |
| .ui.basic.buttons .button:hover, | |
| .ui.basic.button:hover { | |
| color: #7F7F7F !important; | |
| -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset; | |
| -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset; | |
| box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset; | |
| } | |
| .ui.basic.buttons .button:active, | |
| .ui.basic.button:active { | |
| background-color: rgba(0, 0, 0, 0.02) !important; | |
| color: #7F7F7F !important; | |
| -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; | |
| -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; | |
| box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; | |
| } | |
| .ui.basic.buttons .button.active, | |
| .ui.basic.button.active { | |
| background-color: rgba(0, 0, 0, 0.05); | |
| color: #7F7F7F; | |
| -webkit-box-shadow: 0px 0px 0px 1px #BDBDBD inset; | |
| -moz-box-shadow: 0px 0px 0px 1px #BDBDBD inset; | |
| box-shadow: 0px 0px 0px 1px #BDBDBD inset; | |
| } | |
| .ui.basic.buttons .button.active:hover, | |
| .ui.basic.button.active:hover { | |
| background-color: rgba(0, 0, 0, 0.1); | |
| } | |
| /* Basic Group */ | |
| .ui.basic.buttons .button { | |
| border: none; | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| .ui.basic.buttons .button:hover, | |
| .ui.basic.buttons .button:active { | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| .ui.basic.buttons .button.active { | |
| -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; | |
| -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; | |
| box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; | |
| } | |
| /*-------------- | |
| Labeled Icon | |
| ---------------*/ | |
| .ui.labeled.icon.buttons .button, | |
| .ui.labeled.icon.button { | |
| position: relative; | |
| padding-left: 4em !important; | |
| padding-right: 1.4em !important; | |
| } | |
| .ui.labeled.icon.buttons > .button > .icon, | |
| .ui.labeled.icon.button > .icon { | |
| position: absolute; | |
| top: 0em; | |
| left: 0em; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| width: 2.75em; | |
| height: 100%; | |
| padding-top: 0.8em; | |
| background-color: rgba(0, 0, 0, 0.05); | |
| text-align: center; | |
| -webkit-border-radius: 0.2em 0px 0px 0.2em; | |
| -moz-border-radius: 0.2em 0px 0px 0.2em; | |
| border-radius: 0.2em 0px 0px 0.2em; | |
| line-height: 1; | |
| -webkit-box-shadow: -2px 0px 0px 0px rgba(0, 0, 0, 0.05) inset; | |
| -moz-box-shadow: -2px 0px 0px 0px rgba(0, 0, 0, 0.05) inset; | |
| box-shadow: -2px 0px 0px 0px rgba(0, 0, 0, 0.05) inset; | |
| } | |
| .ui.labeled.icon.buttons .button > .icon { | |
| -webkit-border-radius: 0em; | |
| -moz-border-radius: 0em; | |
| border-radius: 0em; | |
| } | |
| .ui.labeled.icon.buttons .button:first-child > .icon { | |
| border-top-left-radius: 0.2em; | |
| border-bottom-left-radius: 0.2em; | |
| } | |
| .ui.labeled.icon.buttons .button:last-child > .icon { | |
| border-top-right-radius: 0.2em; | |
| border-bottom-right-radius: 0.2em; | |
| } | |
| .ui.vertical.labeled.icon.buttons .button:first-child > .icon { | |
| -webkit-border-radius: 0em; | |
| -moz-border-radius: 0em; | |
| border-radius: 0em; | |
| border-top-left-radius: 0.2em; | |
| } | |
| .ui.vertical.labeled.icon.buttons .button:last-child > .icon { | |
| -webkit-border-radius: 0em; | |
| -moz-border-radius: 0em; | |
| border-radius: 0em; | |
| border-bottom-left-radius: 0.2em; | |
| } | |
| .ui.right.labeled.icon.button { | |
| padding-left: 1.4em !important; | |
| padding-right: 4em !important; | |
| } | |
| .ui.left.fluid.labeled.icon.button, | |
| .ui.right.fluid.labeled.icon.button { | |
| padding-left: 1.4em !important; | |
| padding-right: 1.4em !important; | |
| } | |
| .ui.right.labeled.icon.button .icon { | |
| left: auto; | |
| right: 0em; | |
| -webkit-border-radius: 0em 0.2em 0.2em 0em; | |
| -moz-border-radius: 0em 0.2em 0.2em 0em; | |
| border-radius: 0em 0.2em 0.2em 0em; | |
| -webkit-box-shadow: 2px 0px 0px 0px rgba(0, 0, 0, 0.05) inset; | |
| -moz-box-shadow: 2px 0px 0px 0px rgba(0, 0, 0, 0.05) inset; | |
| box-shadow: 2px 0px 0px 0px rgba(0, 0, 0, 0.05) inset; | |
| } | |
| /*-------------- | |
| Toggle | |
| ---------------*/ | |
| /* Toggle (Modifies active state to give affordances) */ | |
| .ui.toggle.buttons .active.button, | |
| .ui.buttons .button.toggle.active, | |
| .ui.button.toggle.active { | |
| background-color: #5BBD72 !important; | |
| color: #FFFFFF !important; | |
| } | |
| .ui.button.toggle.active:hover { | |
| background-color: #58CB73 !important; | |
| color: #FFFFFF !important; | |
| } | |
| /*-------------- | |
| Bubbly | |
| ---------------*/ | |
| .ui.circular.button { | |
| -webkit-border-radius: 10em; | |
| -moz-border-radius: 10em; | |
| border-radius: 10em; | |
| } | |
| /*-------------- | |
| Attached | |
| ---------------*/ | |
| .ui.attached.button { | |
| display: block; | |
| -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; | |
| -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; | |
| box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; | |
| } | |
| .ui.attached.top.button { | |
| -webkit-border-radius: 0.2em 0.2em 0em 0em; | |
| -moz-border-radius: 0.2em 0.2em 0em 0em; | |
| border-radius: 0.2em 0.2em 0em 0em; | |
| } | |
| .ui.attached.bottom.button { | |
| -webkit-border-radius: 0em 0em 0.2em 0.2em; | |
| -moz-border-radius: 0em 0em 0.2em 0.2em; | |
| border-radius: 0em 0em 0.2em 0.2em; | |
| } | |
| .ui.attached.left.button { | |
| display: inline-block; | |
| border-left: none; | |
| padding-right: 0.75em; | |
| text-align: right; | |
| -webkit-border-radius: 0.2em 0em 0em 0.2em; | |
| -moz-border-radius: 0.2em 0em 0em 0.2em; | |
| border-radius: 0.2em 0em 0em 0.2em; | |
| } | |
| .ui.attached.right.button { | |
| display: inline-block; | |
| padding-left: 0.75em; | |
| text-align: left; | |
| -webkit-border-radius: 0em 0.2em 0.2em 0em; | |
| -moz-border-radius: 0em 0.2em 0.2em 0em; | |
| border-radius: 0em 0.2em 0.2em 0em; | |
| } | |
| /*------------------- | |
| Or Buttons | |
| --------------------*/ | |
| .ui.buttons .or { | |
| position: relative; | |
| float: left; | |
| width: 0.3em; | |
| height: 1em; | |
| z-index: 3; | |
| } | |
| .ui.buttons .or:before { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| content: 'or'; | |
| background-color: #FFFFFF; | |
| margin-top: -0.15em; | |
| margin-left: -0.9em; | |
| width: 1.8em; | |
| height: 1.8em; | |
| line-height: 1.66; | |
| color: #AAAAAA; | |
| font-style: normal; | |
| font-weight: normal; | |
| text-align: center; | |
| -moz-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2) inset; | |
| -webkit-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2) inset; | |
| box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2) inset; | |
| -moz-border-radius: 500px; | |
| -webkit-border-radius: 500px; | |
| border-radius: 500px; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| .ui.buttons .or:after { | |
| position: absolute; | |
| top: 0em; | |
| left: 0em; | |
| content: ' '; | |
| width: 0.3em; | |
| height: 1.8em; | |
| background-color: transparent; | |
| border-top: 0.6em solid #FFFFFF; | |
| border-bottom: 0.6em solid #FFFFFF; | |
| } | |
| /* Fluid Or */ | |
| .ui.fluid.buttons .or { | |
| width: 0em !important; | |
| } | |
| .ui.fluid.buttons .or:after { | |
| display: none; | |
| } | |
| /*------------------- | |
| Attached | |
| --------------------*/ | |
| /* Plural Attached */ | |
| .attached.ui.buttons { | |
| margin: 0px; | |
| -webkit-border-radius: 4px 4px 0px 0px; | |
| -moz-border-radius: 4px 4px 0px 0px; | |
| border-radius: 4px 4px 0px 0px; | |
| } | |
| .attached.ui.buttons .button:first-child { | |
| -webkit-border-radius: 4px 0px 0px 0px; | |
| -moz-border-radius: 4px 0px 0px 0px; | |
| border-radius: 4px 0px 0px 0px; | |
| } | |
| .attached.ui.buttons .button:last-child { | |
| -webkit-border-radius: 0px 4px 0px 0px; | |
| -moz-border-radius: 0px 4px 0px 0px; | |
| border-radius: 0px 4px 0px 0px; | |
| } | |
| /* Bottom Side */ | |
| .bottom.attached.ui.buttons { | |
| margin-top: -1px; | |
| -webkit-border-radius: 0px 0px 4px 4px; | |
| -moz-border-radius: 0px 0px 4px 4px; | |
| border-radius: 0px 0px 4px 4px; | |
| } | |
| .bottom.attached.ui.buttons .button:first-child { | |
| -webkit-border-radius: 0px 0px 0px 4px; | |
| -moz-border-radius: 0px 0px 0px 4px; | |
| border-radius: 0px 0px 0px 4px; | |
| } | |
| .bottom.attached.ui.buttons .button:last-child { | |
| -webkit-border-radius: 0px 0px 4px 0px; | |
| -moz-border-radius: 0px 0px 4px 0px; | |
| border-radius: 0px 0px 4px 0px; | |
| } | |
| /* Left Side */ | |
| .left.attached.ui.buttons { | |
| margin-left: -1px; | |
| -webkit-border-radius: 0px 4px 4px 0px; | |
| -moz-border-radius: 0px 4px 4px 0px; | |
| border-radius: 0px 4px 4px 0px; | |
| } | |
| .left.attached.ui.buttons .button:first-child { | |
| margin-left: -1px; | |
| -webkit-border-radius: 0px 4px 0px 0px; | |
| -moz-border-radius: 0px 4px 0px 0px; | |
| border-radius: 0px 4px 0px 0px; | |
| } | |
| .left.attached.ui.buttons .button:last-child { | |
| margin-left: -1px; | |
| -webkit-border-radius: 0px 0px 4px 0px; | |
| -moz-border-radius: 0px 0px 4px 0px; | |
| border-radius: 0px 0px 4px 0px; | |
| } | |
| /* Right Side */ | |
| .right.attached.ui.buttons, | |
| .right.attached.ui.buttons .button { | |
| margin-right: -1px; | |
| -webkit-border-radius: 4px 0px 0px 4px; | |
| -moz-border-radius: 4px 0px 0px 4px; | |
| border-radius: 4px 0px 0px 4px; | |
| } | |
| .right.attached.ui.buttons .button:first-child { | |
| margin-left: -1px; | |
| -webkit-border-radius: 4px 0px 0px 0px; | |
| -moz-border-radius: 4px 0px 0px 0px; | |
| border-radius: 4px 0px 0px 0px; | |
| } | |
| .right.attached.ui.buttons .button:last-child { | |
| margin-left: -1px; | |
| -webkit-border-radius: 0px 0px 0px 4px; | |
| -moz-border-radius: 0px 0px 0px 4px; | |
| border-radius: 0px 0px 0px 4px; | |
| } | |
| /* Fluid */ | |
| .ui.fluid.buttons, | |
| .ui.button.fluid, | |
| .ui.fluid.buttons > .button { | |
| display: block; | |
| width: 100%; | |
| } | |
| .ui.two.buttons > .button { | |
| width: 50%; | |
| } | |
| .ui.three.buttons > .button { | |
| width: 33.333%; | |
| } | |
| .ui.four.buttons > .button { | |
| width: 25%; | |
| } | |
| .ui.five.buttons > .button { | |
| width: 20%; | |
| } | |
| .ui.six.buttons > .button { | |
| width: 16.666%; | |
| } | |
| .ui.seven.buttons > .button { | |
| width: 14.285%; | |
| } | |
| .ui.eight.buttons > .button { | |
| width: 12.500%; | |
| } | |
| .ui.nine.buttons > .button { | |
| width: 11.11%; | |
| } | |
| .ui.ten.buttons > .button { | |
| width: 10%; | |
| } | |
| .ui.eleven.buttons > .button { | |
| width: 9.09%; | |
| } | |
| .ui.twelve.buttons > .button { | |
| width: 8.3333%; | |
| } | |
| /* Fluid Vertical Buttons */ | |
| .ui.fluid.vertical.buttons, | |
| .ui.fluid.vertical.buttons > .button { | |
| display: block; | |
| width: auto; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| .ui.two.vertical.buttons > .button { | |
| height: 50%; | |
| } | |
| .ui.three.vertical.buttons > .button { | |
| height: 33.333%; | |
| } | |
| .ui.four.vertical.buttons > .button { | |
| height: 25%; | |
| } | |
| .ui.five.vertical.buttons > .button { | |
| height: 20%; | |
| } | |
| .ui.six.vertical.buttons > .button { | |
| height: 16.666%; | |
| } | |
| .ui.seven.vertical.buttons > .button { | |
| height: 14.285%; | |
| } | |
| .ui.eight.vertical.buttons > .button { | |
| height: 12.500%; | |
| } | |
| .ui.nine.vertical.buttons > .button { | |
| height: 11.11%; | |
| } | |
| .ui.ten.vertical.buttons > .button { | |
| height: 10%; | |
| } | |
| .ui.eleven.vertical.buttons > .button { | |
| height: 9.09%; | |
| } | |
| .ui.twelve.vertical.buttons > .button { | |
| height: 8.3333%; | |
| } | |
| /*------------------- | |
| Colors | |
| --------------------*/ | |
| /*--- White ---*/ | |
| .ui.white.buttons .button, | |
| .ui.white.button { | |
| background-color: #FFFFFF; | |
| } | |
| .ui.white.buttons .button:hover, | |
| .ui.white.button:hover { | |
| background-color: #A4A4A4; | |
| } | |
| /*--- Black ---*/ | |
| .ui.black.buttons .button, | |
| .ui.black.button { | |
| background-color: #5C6166; | |
| color: #FFFFFF; | |
| } | |
| .ui.black.buttons .button:hover, | |
| .ui.black.button:hover { | |
| background-color: #4C4C4C; | |
| color: #FFFFFF; | |
| } | |
| .ui.black.buttons .button:active, | |
| .ui.black.button:active { | |
| background-color: #333333; | |
| color: #FFFFFF; | |
| } | |
| /*--- Green ---*/ | |
| .ui.green.buttons .button, | |
| .ui.green.button { | |
| background-color: #5BBD72; | |
| color: #FFFFFF; | |
| } | |
| .ui.green.buttons .button:hover, | |
| .ui.green.button:hover, | |
| .ui.green.buttons .active.button, | |
| .ui.green.button.active { | |
| background-color: #58cb73; | |
| color: #FFFFFF; | |
| } | |
| .ui.green.buttons .button:active, | |
| .ui.green.button:active { | |
| background-color: #4CB164; | |
| color: #FFFFFF; | |
| } | |
| /*--- Red ---*/ | |
| .ui.red.buttons .button, | |
| .ui.red.button { | |
| background-color: #D95C5C; | |
| color: #FFFFFF; | |
| } | |
| .ui.red.buttons .button:hover, | |
| .ui.red.button:hover, | |
| .ui.red.buttons .active.button, | |
| .ui.red.button.active { | |
| background-color: #E75859; | |
| color: #FFFFFF; | |
| } | |
| .ui.red.buttons .button:active, | |
| .ui.red.button:active { | |
| background-color: #D24B4C; | |
| color: #FFFFFF; | |
| } | |
| /*--- Orange ---*/ | |
| .ui.orange.buttons .button, | |
| .ui.orange.button { | |
| background-color: #E96633; | |
| color: #FFFFFF; | |
| } | |
| .ui.orange.buttons .button:hover, | |
| .ui.orange.button:hover, | |
| .ui.orange.buttons .active.button, | |
| .ui.orange.button.active { | |
| background-color: #FF7038; | |
| color: #FFFFFF; | |
| } | |
| .ui.orange.buttons .button:active, | |
| .ui.orange.button:active { | |
| background-color: #DA683B; | |
| color: #FFFFFF; | |
| } | |
| /*--- Blue ---*/ | |
| .ui.blue.buttons .button, | |
| .ui.blue.button { | |
| background-color: #6ECFF5; | |
| color: #FFFFFF; | |
| } | |
| .ui.blue.buttons .button:hover, | |
| .ui.blue.button:hover, | |
| .ui.blue.buttons .active.button, | |
| .ui.blue.button.active { | |
| background-color: #1AB8F3; | |
| color: #FFFFFF; | |
| } | |
| .ui.blue.buttons .button:active, | |
| .ui.blue.button:active { | |
| background-color: #0AA5DF; | |
| color: #FFFFFF; | |
| } | |
| /*--- Purple ---*/ | |
| .ui.purple.buttons .button, | |
| .ui.purple.button { | |
| background-color: #564F8A; | |
| color: #FFFFFF; | |
| } | |
| .ui.purple.buttons .button:hover, | |
| .ui.purple.button:hover, | |
| .ui.purple.buttons .active.button, | |
| .ui.purple.button.active { | |
| background-color: #3E3773; | |
| color: #FFFFFF; | |
| } | |
| .ui.purple.buttons .button:active, | |
| .ui.purple.button:active { | |
| background-color: #2E2860; | |
| color: #FFFFFF; | |
| } | |
| /*--- Teal ---*/ | |
| .ui.teal.buttons .button, | |
| .ui.teal.button { | |
| background-color: #00B5AD; | |
| color: #FFFFFF; | |
| } | |
| .ui.teal.buttons .button:hover, | |
| .ui.teal.button:hover, | |
| .ui.teal.buttons .active.button, | |
| .ui.teal.button.active { | |
| background-color: #009A93; | |
| color: #FFFFFF; | |
| } | |
| .ui.teal.buttons .button:active, | |
| .ui.teal.button:active { | |
| background-color: #00847E; | |
| color: #FFFFFF; | |
| } | |
| /*--------------- | |
| Positive | |
| ----------------*/ | |
| .ui.positive.buttons .button, | |
| .ui.positive.button { | |
| background-color: #5BBD72 !important; | |
| color: #FFFFFF; | |
| } | |
| .ui.positive.buttons .button:hover, | |
| .ui.positive.button:hover, | |
| .ui.positive.buttons .active.button, | |
| .ui.positive.button.active { | |
| background-color: #58CB73 !important; | |
| color: #FFFFFF; | |
| } | |
| .ui.positive.buttons .button:active, | |
| .ui.positive.button:active { | |
| background-color: #4CB164 !important; | |
| color: #FFFFFF; | |
| } | |
| /*--------------- | |
| Negative | |
| ----------------*/ | |
| .ui.negative.buttons .button, | |
| .ui.negative.button { | |
| background-color: #D95C5C !important; | |
| color: #FFFFFF; | |
| } | |
| .ui.negative.buttons .button:hover, | |
| .ui.negative.button:hover, | |
| .ui.negative.buttons .active.button, | |
| .ui.negative.button.active { | |
| background-color: #E75859 !important; | |
| color: #FFFFFF; | |
| } | |
| .ui.negative.buttons .button:active, | |
| .ui.negative.button:active { | |
| background-color: #D24B4C !important; | |
| color: #FFFFFF; | |
| } | |
| /******************************* | |
| Groups | |
| *******************************/ | |
| .ui.buttons { | |
| display: inline-block; | |
| vertical-align: middle; | |
| } | |
| .ui.buttons:after { | |
| content: "."; | |
| display: block; | |
| height: 0; | |
| clear: both; | |
| visibility: hidden; | |
| } | |
| .ui.buttons .button:first-child { | |
| border-left: none; | |
| } | |
| .ui.buttons .button { | |
| float: left; | |
| -webkit-border-radius: 0em; | |
| -moz-border-radius: 0em; | |
| border-radius: 0em; | |
| border-left: 1px solid rgba(0, 0, 0, 0.05); | |
| } | |
| .ui.buttons .button:first-child { | |
| margin-left: 0em; | |
| border-top-left-radius: 0.2em; | |
| border-bottom-left-radius: 0.2em; | |
| } | |
| .ui.buttons .button:last-child { | |
| border-top-right-radius: 0.2em; | |
| border-bottom-right-radius: 0.2em; | |
| } | |
| /* Vertical Style */ | |
| .ui.vertical.buttons { | |
| display: inline-block; | |
| } | |
| .ui.vertical.buttons .button { | |
| display: block; | |
| float: none; | |
| border-bottom: 1px solid rgba(0, 0, 0, 0.05); | |
| border-left: none; | |
| box-shadow: none; | |
| } | |
| .ui.vertical.buttons .button:first-child, | |
| .ui.vertical.buttons .mini.button:first-child, | |
| .ui.vertical.buttons .tiny.button:first-child, | |
| .ui.vertical.buttons .small.button:first-child, | |
| .ui.vertical.buttons .massive.button:first-child, | |
| .ui.vertical.buttons .huge.button:first-child { | |
| margin-top: 0px; | |
| -moz-border-radius: 0.2em 0.2em 0px 0px; | |
| -webkit-border-radius: 0.2em 0.2em 0px 0px; | |
| border-radius: 0.2em 0.2em 0px 0px; | |
| } | |
| .ui.vertical.buttons .button:last-child, | |
| .ui.vertical.buttons .mini.button:last-child, | |
| .ui.vertical.buttons .tiny.button:last-child, | |
| .ui.vertical.buttons .small.button:last-child, | |
| .ui.vertical.buttons .massive.button:last-child, | |
| .ui.vertical.buttons .huge.button:last-child, | |
| .ui.vertical.buttons .gigantic.button:last-child { | |
| -moz-border-radius: 0px 0px 0.2em 0.2em; | |
| -webkit-border-radius: 0px 0px 0.2em 0.2em; | |
| border-radius: 0px 0px 0.2em 0.2em; | |
| } | |
| /* | |
| * # Semantic - Divider | |
| * http://github.com/jlukic/semantic-ui/ | |
| * | |
| * | |
| * Copyright 2013 Contributors | |
| * Released under the MIT license | |
| * http://opensource.org/licenses/MIT | |
| * | |
| */ | |
| /******************************* | |
| Divider | |
| *******************************/ | |
| .ui.divider { | |
| margin: 1rem 0rem; | |
| border-top: 1px solid rgba(0, 0, 0, 0.1); | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.8); | |
| line-height: 1; | |
| height: 0em; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| -webkit-tap-highlight-color: rgba(0, 0, 0, 0); | |
| } | |
| .ui.vertical.divider, | |
| .ui.horizontal.divider { | |
| position: absolute; | |
| border: none; | |
| height: 0em; | |
| margin: 0em; | |
| background-color: transparent; | |
| font-size: 0.875rem; | |
| font-weight: bold; | |
| text-align: center; | |
| text-transform: uppercase; | |
| color: rgba(0, 0, 0, 0.8); | |
| } | |
| /*-------------- | |
| Vertical | |
| ---------------*/ | |
| .ui.vertical.divider { | |
| position: absolute; | |
| z-index: 2; | |
| top: 50%; | |
| left: 50%; | |
| margin: 0% 0% 0% -3%; | |
| width: 6%; | |
| height: 50%; | |
| line-height: 0; | |
| padding: 0em; | |
| } | |
| .ui.vertical.divider:before, | |
| .ui.vertical.divider:after { | |
| position: absolute; | |
| left: 50%; | |
| content: " "; | |
| z-index: 3; | |
| border-left: 1px solid rgba(0, 0, 0, 0.1); | |
| border-right: 1px solid rgba(255, 255, 255, 0.8); | |
| width: 0%; | |
| height: 80%; | |
| } | |
| .ui.vertical.divider:before { | |
| top: -100%; | |
| } | |
| .ui.vertical.divider:after { | |
| top: auto; | |
| bottom: 0px; | |
| } | |
| /*-------------- | |
| Horizontal | |
| ---------------*/ | |
| .ui.horizontal.divider { | |
| position: relative; | |
| top: 0%; | |
| left: 0%; | |
| margin: 1rem 1.5rem; | |
| height: auto; | |
| padding: 0em; | |
| line-height: 1; | |
| } | |
| .ui.horizontal.divider:before, | |
| .ui.horizontal.divider:after { | |
| position: absolute; | |
| content: " "; | |
| z-index: 3; | |
| width: 50%; | |
| top: 50%; | |
| height: 0%; | |
| border-top: 1px solid rgba(0, 0, 0, 0.1); | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.8); | |
| } | |
| .ui.horizontal.divider:before { | |
| left: 0%; | |
| margin-left: -1.5rem; | |
| } | |
| .ui.horizontal.divider:after { | |
| left: auto; | |
| right: 0%; | |
| margin-right: -1.5rem; | |
| } | |
| /*-------------- | |
| Icon | |
| ---------------*/ | |
| .ui.divider > .icon { | |
| margin: 0em; | |
| font-size: 1rem; | |
| vertical-align: middle; | |
| } | |
| /******************************* | |
| Variations | |
| *******************************/ | |
| /*-------------- | |
| Inverted | |
| ---------------*/ | |
| .ui.divider.inverted { | |
| color: #ffffff; | |
| } | |
| .ui.vertical.inverted.divider, | |
| .ui.horizontal.inverted.divider { | |
| color: rgba(255, 255, 255, 0.9); | |
| } | |
| .ui.divider.inverted, | |
| .ui.divider.inverted:after, | |
| .ui.divider.inverted:before { | |
| border-top-color: rgba(0, 0, 0, 0.15); | |
| border-bottom-color: rgba(255, 255, 255, 0.15); | |
| border-left-color: rgba(0, 0, 0, 0.15); | |
| border-right-color: rgba(255, 255, 255, 0.15); | |
| } | |
| /*-------------- | |
| Fitted | |
| ---------------*/ | |
| .ui.fitted.divider { | |
| margin: 0em; | |
| } | |
| /*-------------- | |
| Clearing | |
| ---------------*/ | |
| .ui.clearing.divider { | |
| clear: both; | |
| } | |
| /*-------------- | |
| Section | |
| ---------------*/ | |
| .ui.section.divider { | |
| margin-top: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| /* | |
| * # Semantic - Header | |
| * http://github.com/jlukic/semantic-ui/ | |
| * | |
| * | |
| * Copyright 2013 Contributors | |
| * Released under the MIT license | |
| * http://opensource.org/licenses/MIT | |
| * | |
| */ | |
| /******************************* | |
| Header | |
| *******************************/ | |
| /* Standard */ | |
| .ui.header { | |
| border: none; | |
| margin: 1em 0em 1rem; | |
| padding: 0em; | |
| font-size: 1.33em; | |
| font-weight: bold; | |
| line-height: 1.33; | |
| } | |
| .ui.header .sub.header { | |
| font-size: 1rem; | |
| font-weight: normal; | |
| margin: 0em; | |
| padding: 0em; | |
| line-height: 1.2; | |
| color: rgba(0, 0, 0, 0.5); | |
| } | |
| .ui.header .icon { | |
| display: table-cell; | |
| vertical-align: middle; | |
| padding-right: 0.5em; | |
| } | |
| .ui.header .icon:only-child { | |
| display: inline-block; | |
| } | |
| .ui.header .content { | |
| display: inline-block; | |
| vertical-align: top; | |
| } | |
| .ui.header .icon + .content { | |
| padding-left: 0.5em; | |
| display: table-cell; | |
| } | |
| /* Positioning */ | |
| .ui.header:first-child { | |
| margin-top: 0em; | |
| } | |
| .ui.header:last-child { | |
| margin-bottom: 0em; | |
| } | |
| .ui.header + p { | |
| margin-top: 0em; | |
| } | |
| /*-------------- | |
| Page Heading | |
| ---------------*/ | |
| h1.ui.header { | |
| min-height: 1rem; | |
| line-height: 1.33; | |
| font-size: 2rem; | |
| } | |
| h2.ui.header { | |
| line-height: 1.33; | |
| font-size: 1.75rem; | |
| } | |
| h3.ui.header { | |
| line-height: 1.33; | |
| font-size: 1.33rem; | |
| } | |
| h4.ui.header { | |
| line-height: 1.33; | |
| font-size: 1.1rem; | |
| } | |
| h5.ui.header { | |
| line-height: 1.2; | |
| font-size: 1rem; | |
| } | |
| /*-------------- | |
| Content Heading | |
| ---------------*/ | |
| .ui.huge.header { | |
| min-height: 1em; | |
| font-size: 2em; | |
| } | |
| .ui.large.header { | |
| font-size: 1.75em; | |
| } | |
| .ui.medium.header { | |
| font-size: 1.33em; | |
| } | |
| .ui.small.header { | |
| font-size: 1.1em; | |
| } | |
| .ui.tiny.header { | |
| font-size: 1em; | |
| } | |
| /******************************* | |
| Types | |
| *******************************/ | |
| /*------------------- | |
| Icon | |
| --------------------*/ | |
| .ui.icon.header { | |
| display: inline-block; | |
| text-align: center; | |
| } | |
| .ui.icon.header .icon { | |
| float: none; | |
| display: block; | |
| font-size: 3em; | |
| margin: 0em auto 0.2em; | |
| padding: 0em; | |
| } | |
| .ui.icon.header .content { | |
| display: block; | |
| } | |
| .ui.icon.header .circular.icon, | |
| .ui.icon.header .square.icon { | |
| font-size: 2em; | |
| } | |
| .ui.block.icon.header .icon { | |
| margin-bottom: 0em; | |
| } | |
| .ui.icon.header.aligned { | |
| margin-left: auto; | |
| margin-right: auto; | |
| display: block; | |
| } | |
| /******************************* | |
| States | |
| *******************************/ | |
| .ui.disabled.header { | |
| opacity: 0.5; | |
| } | |
| /******************************* | |
| Variations | |
| *******************************/ | |
| /*------------------- | |
| Colors | |
| --------------------*/ | |
| .ui.blue.header { | |
| color: #6ECFF5 !important; | |
| } | |
| .ui.black.header { | |
| color: #5C6166 !important; | |
| } | |
| .ui.green.header { | |
| color: #A1CF64 !important; | |
| } | |
| .ui.red.header { | |
| color: #D95C5C !important; | |
| } | |
| .ui.purple.header { | |
| color: #564F8A !important; | |
| } | |
| .ui.teal.header { | |
| color: #00B5AD !important; | |
| } | |
| .ui.blue.dividing.header { | |
| border-bottom: 3px solid #6ECFF5; | |
| } | |
| .ui.black.dividing.header { | |
| border-bottom: 3px solid #5C6166; | |
| } | |
| .ui.green.dividing.header { | |
| border-bottom: 3px solid #A1CF64; | |
| } | |
| .ui.red.dividing.header { | |
| border-bottom: 3px solid #D95C5C; | |
| } | |
| .ui.purple.dividing.header { | |
| border-bottom: 3px solid #564F8A; | |
| } | |
| .ui.teal.dividing.header { | |
| border-bottom: 3px solid #00B5AD; | |
| } | |
| /*------------------- | |
| Inverted | |
| --------------------*/ | |
| .ui.inverted.header { | |
| color: #FFFFFF; | |
| } | |
| .ui.inverted.header .sub.header { | |
| color: rgba(255, 255, 255, 0.85); | |
| } | |
| /*------------------- | |
| Inverted Colors | |
| --------------------*/ | |
| .ui.inverted.black.header { | |
| background-color: #5C6166 !important; | |
| color: #FFFFFF !important; | |
| } | |
| .ui.inverted.blue.header { | |
| background-color: #6ECFF5 !important; | |
| color: #FFFFFF !important; | |
| } | |
| .ui.inverted.green.header { | |
| background-color: #A1CF64 !important; | |
| color: #FFFFFF !important; | |
| } | |
| .ui.inverted.red.header { | |
| background-color: #D95C5C !important; | |
| color: #FFFFFF !important; | |
| } | |
| .ui.inverted.purple.header { | |
| background-color: #564F8A !important; | |
| color: #FFFFFF !important; | |
| } | |
| .ui.inverted.teal.header { | |
| background-color: #00B5AD !important; | |
| color: #FFFFFF !important; | |
| } | |
| .ui.inverted.block.header { | |
| border-bottom: none; | |
| } | |
| /*------------------- | |
| Aligned | |
| --------------------*/ | |
| .ui.left.aligned.header { | |
| text-align: left; | |
| } | |
| .ui.right.aligned.header { | |
| text-align: right; | |
| } | |
| .ui.center.aligned.header { | |
| text-align: center; | |
| } | |
| /*------------------- | |
| Floated | |
| --------------------*/ | |
| .ui.floated.header, | |
| .ui.left.floated.header { | |
| float: left; | |
| margin-top: 0em; | |
| margin-right: 0.5em; | |
| } | |
| .ui.right.floated.header { | |
| float: right; | |
| margin-top: 0em; | |
| margin-left: 0.5em; | |
| } | |
| /*------------------- | |
| Fittted | |
| --------------------*/ | |
| .ui.fitted.header { | |
| padding: 0em; | |
| } | |
| /*------------------- | |
| Dividing | |
| --------------------*/ | |
| .ui.dividing.header { | |
| padding-bottom: 0.2rem; | |
| border-bottom: 1px solid rgba(0, 0, 0, 0.1); | |
| } | |
| .ui.dividing.header .sub.header { | |
| padding-bottom: 0.5em; | |
| } | |
| .ui.dividing.header .icon { | |
| margin-bottom: 0.2em; | |
| } | |
| /*------------------- | |
| Block | |
| --------------------*/ | |
| .ui.block.header { | |
| background-color: rgba(0, 0, 0, 0.05); | |
| padding: 0.5em 1em; | |
| } | |
| /*------------------- | |
| Attached | |
| --------------------*/ | |
| .ui.attached.header { | |
| background-color: #E0E0E0; | |
| padding: 0.5em 1rem; | |
| -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); | |
| -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); | |
| box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); | |
| } | |
| .ui.top.attached.header { | |
| margin-bottom: 0em; | |
| -webkit-border-radius: 0.3125em 0.3125em 0em 0em; | |
| -moz-border-radius: 0.3125em 0.3125em 0em 0em; | |
| border-radius: 0.3125em 0.3125em 0em 0em; | |
| } | |
| .ui.bottom.attached.header { | |
| margin-top: 0em; | |
| -webkit-border-radius: 0em 0em 0.3125em 0.3125em; | |
| -moz-border-radius: 0em 0em 0.3125em 0.3125em; | |
| border-radius: 0em 0em 0.3125em 0.3125em; | |
| } | |
| /* | |
| * # Semantic - Icon | |
| * http://github.com/jlukic/semantic-ui/ | |
| * | |
| * | |
| * Copyright 2013 Contributors | |
| * Released under the MIT license | |
| * http://opensource.org/licenses/MIT | |
| * | |
| */ | |
| /*! | |
| * Font Awesome 3.2.1 | |
| * the iconic font designed for Bootstrap | |
| * ------------------------------------------------------------------------------ | |
| * The full suite of pictographic icons, examples, and documentation can be | |
| * found at http://fon.io. Stay up to date on Twitter at | |
| * http://twitter.com/fon. | |
| * | |
| * License | |
| * ------------------------------------------------------------------------------ | |
| * - The Font Awesome font is licensed under SIL OFL 1.1 - | |
| * http://scripts.sil.org/OFL | |
| /******************************* | |
| Icon | |
| *******************************/ | |
| @font-face { | |
| font-family: 'Icons'; | |
| src: url(../fonts/icons.eot); | |
| src: url(../fonts/icons.eot?#iefix) format('embedded-opentype'), url(../fonts/icons.woff) format('woff'), url(../fonts/icons.ttf) format('truetype'), url(../fonts/icons.svg#icons) format('svg'); | |
| font-style: normal; | |
| font-weight: normal; | |
| font-variant: normal; | |
| text-decoration: inherit; | |
| text-transform: none; | |
| } | |
| i.icon { | |
| display: inline-block; | |
| opacity: 0.75; | |
| margin: 0em 0.25em 0em 0em; | |
| width: 1.23em; | |
| height: 1em; | |
| font-family: 'Icons'; | |
| font-style: normal; | |
| line-height: 1; | |
| font-weight: normal; | |
| text-decoration: inherit; | |
| text-align: center; | |
| speak: none; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-font-smoothing: antialiased; | |
| font-smoothing: antialiased; | |
| } | |
| i.icon.left:before { | |
| content: "\f060"; | |
| } | |
| i.icon.right:before { | |
| content: "\f061"; | |
| } | |
| i.icon.add.sign.box:before { | |
| content: "\f0fe"; | |
| } | |
| i.icon.add.sign:before { | |
| content: "\f055"; | |
| } | |
| i.icon.add:before { | |
| content: "\f067"; | |
| } | |
| i.icon.adjust:before { | |
| content: "\f042"; | |
| } | |
| i.icon.adn:before { | |
| content: "\f170"; | |
| } | |
| i.icon.align.center:before { | |
| content: "\f037"; | |
| } | |
| i.icon.align.justify:before { | |
| content: "\f039"; | |
| } | |
| i.icon.align.left:before { | |
| content: "\f036"; | |
| } | |
| i.icon.align.right:before { | |
| content: "\f038"; | |
| } | |
| i.icon.ambulance:before { | |
| content: "\f0f9"; | |
| } | |
| i.icon.anchor:before { | |
| content: "\f13d"; | |
| } | |
| i.icon.android:before { | |
| content: "\f17b"; | |
| } | |
| i.icon.angle.down:before { | |
| content: "\f107"; | |
| } | |
| i.icon.angle.left:before { | |
| content: "\f104"; | |
| } | |
| i.icon.angle.right:before { | |
| content: "\f105"; | |
| } | |
| i.icon.angle.up:before { | |
| content: "\f106"; | |
| } | |
| i.icon.apple:before { | |
| content: "\f179"; | |
| } | |
| i.icon.archive:before { | |
| content: "\f187"; | |
| } | |
| i.icon.arrow.down:before { | |
| content: "\f078"; | |
| } | |
| i.icon.arrow.left:before { | |
| content: "\f053"; | |
| } | |
| i.icon.arrow.right:before { | |
| content: "\f054"; | |
| } | |
| i.icon.arrow.sign.down:before { | |
| content: "\f13a"; | |
| } | |
| i.icon.arrow.sign.left:before { | |
| content: "\f137"; | |
| } | |
| i.icon.arrow.sign.right:before { | |
| content: "\f138"; | |
| } | |
| i.icon.arrow.sign.up:before { | |
| content: "\f139"; | |
| } | |
| i.icon.arrow.up:before { | |
| content: "\f077"; | |
| } | |
| i.icon.asterisk:before { | |
| content: "\f069"; | |
| } | |
| i.icon.attachment:before { | |
| content: "\f0c6"; | |
| } | |
| i.icon.attention:before { | |
| content: "\f06a"; | |
| } | |
| i.icon.backward:before { | |
| content: "\f04a"; | |
| } | |
| i.icon.ban.circle:before { | |
| content: "\f05e"; | |
| } | |
| i.icon.bar.chart:before { | |
| content: "\f080"; | |
| } | |
| i.icon.barcode:before { | |
| content: "\f02a"; | |
| } | |
| i.icon.beer:before { | |
| content: "\f0fc"; | |
| } | |
| i.icon.bell.outline:before { | |
| content: "\f0a2"; | |
| } | |
| i.icon.bell:before { | |
| content: "\f0f3"; | |
| } | |
| i.icon.bitbucket.sign:before { | |
| content: "\f172"; | |
| } | |
| i.icon.bitbucket:before { | |
| content: "\f171"; | |
| } | |
| i.icon.bitcoin:before { | |
| content: "\f15a"; | |
| } | |
| i.icon.bold:before { | |
| content: "\f032"; | |
| } | |
| i.icon.bolt:before { | |
| content: "\f0e7"; | |
| } | |
| i.icon.book:before { | |
| content: "\f02d"; | |
| } | |
| i.icon.bookmark.empty:before { | |
| content: "\f097"; | |
| } | |
| i.icon.bookmark:before { | |
| content: "\f02e"; | |
| } | |
| i.icon.box.arrow.down:before { | |
| content: "\f150"; | |
| } | |
| i.icon.box.arrow.right:before { | |
| content: "\f152"; | |
| } | |
| i.icon.box.arrow.up:before { | |
| content: "\f151"; | |
| } | |
| i.icon.briefcase:before { | |
| content: "\f0b1"; | |
| } | |
| i.icon.browser:before { | |
| content: "\f022"; | |
| } | |
| i.icon.bug:before { | |
| content: "\f188"; | |
| } | |
| i.icon.building:before { | |
| content: "\f0f7"; | |
| } | |
| i.icon.bullhorn:before { | |
| content: "\f0a1"; | |
| } | |
| i.icon.bullseye:before { | |
| content: "\f140"; | |
| } | |
| i.icon.calendar.empty:before { | |
| content: "\f133"; | |
| } | |
| i.icon.calendar:before { | |
| content: "\f073"; | |
| } | |
| i.icon.camera.retro:before { | |
| content: "\f083"; | |
| } | |
| i.icon.camera:before { | |
| content: "\f030"; | |
| } | |
| i.icon.triangle.down:before { | |
| content: "\f0d7"; | |
| } | |
| i.icon.triangle.left:before { | |
| content: "\f0d9"; | |
| } | |
| i.icon.triangle.right:before { | |
| content: "\f0da"; | |
| } | |
| i.icon.triangle.up:before { | |
| content: "\f0d8"; | |
| } | |
| i.icon.cart:before { | |
| content: "\f07a"; | |
| } | |
| i.icon.certificate:before { | |
| content: "\f0a3"; | |
| } | |
| i.icon.chat.outline:before { | |
| content: "\f0e6"; | |
| } | |
| i.icon.chat:before { | |
| content: "\f086"; | |
| } | |
| i.icon.checkbox.empty:before { | |
| content: "\f096"; | |
| } | |
| i.icon.checkbox.minus:before { | |
| content: "\f147"; | |
| } | |
| i.icon.checked.checkbox:before { | |
| content: "\f046"; | |
| } | |
| i.icon.checkmark.sign:before { | |
| content: "\f14a"; | |
| } | |
| i.icon.checkmark:before { | |
| content: "\f00c"; | |
| } | |
| i.icon.circle.blank:before { | |
| content: "\f10c"; | |
| } | |
| i.icon.circle.down:before { | |
| content: "\f0ab"; | |
| } | |
| i.icon.circle.left:before { | |
| content: "\f0a8"; | |
| } | |
| i.icon.circle.right:before { | |
| content: "\f0a9"; | |
| } | |
| i.icon.circle.up:before { | |
| content: "\f0aa"; | |
| } | |
| i.icon.circle:before { | |
| content: "\f111"; | |
| } | |
| i.icon.cloud.download:before { | |
| content: "\f0ed"; | |
| } | |
| i.icon.cloud.upload:before { | |
| content: "\f0ee"; | |
| } | |
| i.icon.cloud:before { | |
| content: "\f0c2"; | |
| } | |
| i.icon.code.fork:before { | |
| content: "\f126"; | |
| } | |
| i.icon.code:before { | |
| content: "\f121"; | |
| } | |
| i.icon.coffee:before { | |
| content: "\f0f4"; | |
| } | |
| i.icon.collapse:before { | |
| content: "\f117"; | |
| } | |
| i.icon.comment.outline:before { | |
| content: "\f0e5"; | |
| } | |
| i.icon.comment:before { | |
| content: "\f075"; | |
| } | |
| i.icon.copy:before { | |
| content: "\f0c5"; | |
| } | |
| i.icon.crop:before { | |
| content: "\f125"; | |
| } | |
| i.icon.css3:before { | |
| content: "\f13c"; | |
| } | |
| i.icon.cut:before { | |
| content: "\f0c4"; | |
| } | |
| i.icon.dashboard:before { | |
| content: "\f0e4"; | |
| } | |
| i.icon.desktop:before { | |
| content: "\f108"; | |
| } | |
| i.icon.doctor:before { | |
| content: "\f0f0"; | |
| } | |
| i.icon.dollar:before { | |
| content: "\f155"; | |
| } | |
| i.icon.double.angle.down:before { | |
| content: "\f103"; | |
| } | |
| i.icon.double.angle.left:before { | |
| content: "\f100"; | |
| } | |
| i.icon.double.angle.right:before { | |
| content: "\f101"; | |
| } | |
| i.icon.double.angle.up:before { | |
| content: "\f102"; | |
| } | |
| i.icon.down:before { | |
| content: "\f063"; | |
| } | |
| i.icon.download.disk:before { | |
| content: "\f019"; | |
| } | |
| i.icon.download:before { | |
| content: "\f01a"; | |
| } | |
| i.icon.dribbble:before { | |
| content: "\f17d"; | |
| } | |
| i.icon.dropbox:before { | |
| content: "\f16b"; | |
| } | |
| i.icon.edit.sign:before { | |
| content: "\f14b"; | |
| } | |
| i.icon.edit:before { | |
| content: "\f044"; | |
| } | |
| i.icon.eject:before { | |
| content: "\f052"; | |
| } | |
| i.icon.ellipsis.horizontal:before { | |
| content: "\f141"; | |
| } | |
| i.icon.ellipsis.vertical:before { | |
| content: "\f142"; | |
| } | |
| i.icon.eraser:before { | |
| content: "\f12d"; | |
| } | |
| i.icon.euro:before { | |
| content: "\f153"; | |
| } | |
| i.icon.exchange:before { | |
| content: "\f0ec"; | |
| } | |
| i.icon.exclamation:before { | |
| content: "\f12a"; | |
| } | |
| i.icon.expand:before { | |
| content: "\f116"; | |
| } | |
| i.icon.external.url.sign:before { | |
| content: "\f14c"; | |
| } | |
| i.icon.external.url:before { | |
| content: "\f08e"; | |
| } | |
| i.icon.facebook.sign:before { | |
| content: "\f082"; | |
| } | |
| i.icon.facebook:before { | |
| content: "\f09a"; | |
| } | |
| i.icon.facetime.video:before { | |
| content: "\f03d"; | |
| } | |
| i.icon.fast.backward:before { | |
| content: "\f049"; | |
| } | |
| i.icon.fast.forward:before { | |
| content: "\f050"; | |
| } | |
| i.icon.female:before { | |
| content: "\f182"; | |
| } | |
| i.icon.fighter.jet:before { | |
| content: "\f0fb"; | |
| } | |
| i.icon.file.outline:before { | |
| content: "\f016"; | |
| } | |
| i.icon.file.text.outline:before { | |
| content: "\f0f6"; | |
| } | |
| i.icon.file.text:before { | |
| content: "\f15c"; | |
| } | |
| i.icon.file:before { | |
| content: "\f15b"; | |
| } | |
| i.icon.filter:before { | |
| content: "\f0b0"; | |
| } | |
| i.icon.fire.extinguisher:before { | |
| content: "\f134"; | |
| } | |
| i.icon.fire:before { | |
| content: "\f06d"; | |
| } | |
| i.icon.flag.checkered:before { | |
| content: "\f11e"; | |
| } | |
| i.icon.flag.empty:before { | |
| content: "\f11d"; | |
| } | |
| i.icon.flag:before { | |
| content: "\f024"; | |
| } | |
| i.icon.flickr:before { | |
| content: "\f16e"; | |
| } | |
| i.icon.folder.open.outline:before { | |
| content: "\f115"; | |
| } | |
| i.icon.folder.open:before { | |
| content: "\f07c"; | |
| } | |
| i.icon.folder.outline:before { | |
| content: "\f114"; | |
| } | |
| i.icon.folder:before { | |
| content: "\f07b"; | |
| } | |
| i.icon.font:before { | |
| content: "\f031"; | |
| } | |
| i.icon.food:before { | |
| content: "\f0f5"; | |
| } | |
| i.icon.forward.mail:before { | |
| content: "\f064"; | |
| } | |
| i.icon.forward:before { | |
| content: "\f04e"; | |
| } | |
| i.icon.foursquare:before { | |
| content: "\f180"; | |
| } | |
| i.icon.frown:before { | |
| content: "\f119"; | |
| } | |
| i.icon.fullscreen:before { | |
| content: "\f0b2"; | |
| } | |
| i.icon.gamepad:before { | |
| content: "\f11b"; | |
| } | |
| i.icon.gift:before { | |
| content: "\f06b"; | |
| } | |
| i.icon.github.alternate:before { | |
| content: "\f09b"; | |
| } | |
| i.icon.github.sign:before { | |
| content: "\f092"; | |
| } | |
| i.icon.github:before { | |
| content: "\f113"; | |
| } | |
| i.icon.gittip:before { | |
| content: "\f184"; | |
| } | |
| i.icon.glass:before { | |
| content: "\f000"; | |
| } | |
| i.icon.globe:before { | |
| content: "\f0ac"; | |
| } | |
| i.icon.google.plus.sign:before { | |
| content: "\f0d4"; | |
| } | |
| i.icon.google.plus:before { | |
| content: "\f0d5"; | |
| } | |
| i.icon.h.sign:before { | |
| content: "\f0fd"; | |
| } | |
| i.icon.hand.down:before { | |
| content: "\f0a7"; | |
| } | |
| i.icon.hand.left:before { | |
| content: "\f0a5"; | |
| } | |
| i.icon.hand.right:before { | |
| content: "\f0a4"; | |
| } | |
| i.icon.hand.up:before { | |
| content: "\f0a6"; | |
| } | |
| i.icon.hdd:before { | |
| content: "\f0a0"; | |
| } | |
| i.icon.headphones:before { | |
| content: "\f025"; | |
| } | |
| i.icon.heart.empty:before { | |
| content: "\f08a"; | |
| } | |
| i.icon.heart:before { | |
| content: "\f004"; | |
| } | |
| i.icon.help:before { | |
| content: "\f059"; | |
| } | |
| i.icon.hide:before { | |
| content: "\f070"; | |
| } | |
| i.icon.home:before { | |
| content: "\f015"; | |
| } | |
| i.icon.hospital:before { | |
| content: "\f0f8"; | |
| } | |
| i.icon.html5:before { | |
| content: "\f13b"; | |
| } | |
| i.icon.inbox:before { | |
| content: "\f01c"; | |
| } | |
| i.icon.indent.left:before { | |
| content: "\f03b"; | |
| } | |
| i.icon.indent.right:before { | |
| content: "\f03c"; | |
| } | |
| i.icon.info.letter:before { | |
| content: "\f129"; | |
| } | |
| i.icon.info:before { | |
| content: "\f05a"; | |
| } | |
| i.icon.instagram:before { | |
| content: "\f16d"; | |
| } | |
| i.icon.italic:before { | |
| content: "\f033"; | |
| } | |
| i.icon.key:before { | |
| content: "\f084"; | |
| } | |
| i.icon.keyboard:before { | |
| content: "\f11c"; | |
| } | |
| i.icon.lab:before { | |
| content: "\f0c3"; | |
| } | |
| i.icon.laptop:before { | |
| content: "\f109"; | |
| } | |
| i.icon.layout.block:before { | |
| content: "\f009"; | |
| } | |
| i.icon.layout.column:before { | |
| content: "\f0db"; | |
| } | |
| i.icon.layout.grid:before { | |
| content: "\f00a"; | |
| } | |
| i.icon.layout.list:before { | |
| content: "\f00b"; | |
| } | |
| i.icon.leaf:before { | |
| content: "\f06c"; | |
| } | |
| i.icon.legal:before { | |
| content: "\f0e3"; | |
| } | |
| i.icon.lemon:before { | |
| content: "\f094"; | |
| } | |
| i.icon.level.down:before { | |
| content: "\f149"; | |
| } | |
| i.icon.level.up:before { | |
| content: "\f148"; | |
| } | |
| i.icon.lightbulb:before { | |
| content: "\f0eb"; | |
| } | |
| i.icon.linkedin.sign:before { | |
| content: "\f08c"; | |
| } | |
| i.icon.linkedin:before { | |
| content: "\f0e1"; | |
| } | |
| i.icon.linux:before { | |
| content: "\f17c"; | |
| } | |
| i.icon.list.ordered:before { | |
| content: "\f0cb"; | |
| } | |
| i.icon.list.unordered:before { | |
| content: "\f0ca"; | |
| } | |
| i.icon.list:before { | |
| content: "\f03a"; | |
| } | |
| i.icon.loading:before { | |
| content: "\f110"; | |
| } | |
| i.icon.location:before { | |
| content: "\f124"; | |
| } | |
| i.icon.lock:before { | |
| content: "\f023"; | |
| } | |
| i.icon.long.arrow.down:before { | |
| content: "\f175"; | |
| } | |
| i.icon.long.arrow.left:before { | |
| content: "\f177"; | |
| } | |
| i.icon.long.arrow.right:before { | |
| content: "\f178"; | |
| } | |
| i.icon.long.arrow.up:before { | |
| content: "\f176"; | |
| } | |
| i.icon.magic:before { | |
| content: "\f0d0"; | |
| } | |
| i.icon.magnet:before { | |
| content: "\f076"; | |
| } | |
| i.icon.mail.outline:before { | |
| content: "\f003"; | |
| } | |
| i.icon.mail.reply:before { | |
| content: "\f112"; | |
| } | |
| i.icon.mail:before { | |
| content: "\f0e0"; | |
| } | |
| i.icon.male:before { | |
| content: "\f183"; | |
| } | |
| i.icon.map.marker:before { | |
| content: "\f041"; | |
| } | |
| i.icon.map:before { | |
| content: "\f14e"; | |
| } | |
| i.icon.maxcdn:before { | |
| content: "\f136"; | |
| } | |
| i.icon.medkit:before { | |
| content: "\f0fa"; | |
| } | |
| i.icon.meh:before { | |
| content: "\f11a"; | |
| } | |
| i.icon.minus.sign.alternate:before { | |
| content: "\f146"; | |
| } | |
| i.icon.minus.sign:before { | |
| content: "\f056"; | |
| } | |
| i.icon.minus:before { | |
| content: "\f068"; | |
| } | |
| i.icon.mobile:before { | |
| content: "\f10b"; | |
| } | |
| i.icon.money:before { | |
| content: "\f0d6"; | |
| } | |
| i.icon.moon:before { | |
| content: "\f186"; | |
| } | |
| i.icon.move:before { | |
| content: "\f047"; | |
| } | |
| i.icon.music:before { | |
| content: "\f001"; | |
| } | |
| i.icon.mute:before { | |
| content: "\f131"; | |
| } | |
| i.icon.off:before { | |
| content: "\f011"; | |
| } | |
| i.icon.ok.circle:before { | |
| content: "\f05d"; | |
| } | |
| i.icon.ok.sign:before { | |
| content: "\f058"; | |
| } | |
| i.icon.paste:before { | |
| content: "\f0ea"; | |
| } | |
| i.icon.pause:before { | |
| content: "\f04c"; | |
| } | |
| i.icon.payment:before { | |
| content: "\f09d"; | |
| } | |
| i.icon.pencil:before { | |
| content: "\f040"; | |
| } | |
| i.icon.phone.sign:before { | |
| content: "\f098"; | |
| } | |
| i.icon.phone:before { | |
| content: "\f095"; | |
| } | |
| i.icon.photo:before { | |
| content: "\f03e"; | |
| } | |
| i.icon.pin:before { | |
| content: "\f08d"; | |
| } | |
| i.icon.pinterest.sign:before { | |
| content: "\f0d3"; | |
| } | |
| i.icon.pinterest:before { | |
| content: "\f0d2"; | |
| } | |
| i.icon.plane:before { | |
| content: "\f072"; | |
| } | |
| i.icon.play.circle:before { | |
| content: "\f01d"; | |
| } | |
| i.icon.play.sign:before { | |
| content: "\f144"; | |
| } | |
| i.icon.play:before { | |
| content: "\f04b"; | |
| } | |
| i.icon.pound:before { | |
| content: "\f154"; | |
| } | |
| i.icon.print:before { | |
| content: "\f02f"; | |
| } | |
| i.icon.puzzle.piece:before { | |
| content: "\f12e"; | |
| } | |
| i.icon.qr.code:before { | |
| content: "\f029"; | |
| } | |
| i.icon.question:before { | |
| content: "\f128"; | |
| } | |
| i.icon.quote.left:before { | |
| content: "\f10d"; | |
| } | |
| i.icon.quote.right:before { | |
| content: "\f10e"; | |
| } | |
| i.icon.refresh:before { | |
| content: "\f021"; | |
| } | |
| i.icon.remove.circle:before { | |
| content: "\f05c"; | |
| } | |
| i.icon.remove.sign:before { | |
| content: "\f057"; | |
| } | |
| i.icon.remove:before { | |
| content: "\f00d"; | |
| } | |
| i.icon.renren:before { | |
| content: "\f18b"; | |
| } | |
| i.icon.reorder:before { | |
| content: "\f0c9"; | |
| } | |
| i.icon.repeat:before { | |
| content: "\f01e"; | |
| } | |
| i.icon.reply.all.mail:before { | |
| content: "\f122"; | |
| } | |
| i.icon.resize.full:before { | |
| content: "\f065"; | |
| } | |
| i.icon.resize.horizontal:before { | |
| content: "\f07e"; | |
| } | |
| i.icon.resize.small:before { | |
| content: "\f066"; | |
| } | |
| i.icon.resize.vertical:before { | |
| content: "\f07d"; | |
| } | |
| i.icon.retweet:before { | |
| content: "\f079"; | |
| } | |
| i.icon.road:before { | |
| content: "\f018"; | |
| } | |
| i.icon.rocket:before { | |
| content: "\f135"; | |
| } | |
| i.icon.rss.sign:before { | |
| content: "\f143"; | |
| } | |
| i.icon.rss:before { | |
| content: "\f09e"; | |
| } | |
| i.icon.rupee:before { | |
| content: "\f156"; | |
| } | |
| i.icon.save:before { | |
| content: "\f0c7"; | |
| } | |
| i.icon.screenshot:before { | |
| content: "\f05b"; | |
| } | |
| i.icon.search:before { | |
| content: "\f002"; | |
| } | |
| i.icon.setting:before { | |
| content: "\f013"; | |
| } | |
| i.icon.settings:before { | |
| content: "\f085"; | |
| } | |
| i.icon.share.sign:before { | |
| content: "\f14d"; | |
| } | |
| i.icon.share:before { | |
| content: "\f045"; | |
| } | |
| i.icon.shield:before { | |
| content: "\f132"; | |
| } | |
| i.icon.shuffle:before { | |
| content: "\f074"; | |
| } | |
| i.icon.sign.in:before { | |
| content: "\f090"; | |
| } | |
| i.icon.sign.out:before { | |
| content: "\f08b"; | |
| } | |
| i.icon.sign:before { | |
| content: "\f0c8"; | |
| } | |
| i.icon.signal:before { | |
| content: "\f012"; | |
| } | |
| i.icon.sitemap:before { | |
| content: "\f0e8"; | |
| } | |
| i.icon.skype:before { | |
| content: "\f17e"; | |
| } | |
| i.icon.smile:before { | |
| content: "\f118"; | |
| } | |
| i.icon.sort.alphabet.descending:before { | |
| content: "\f15e"; | |
| } | |
| i.icon.sort.alphabet:before { | |
| content: "\f15d"; | |
| } | |
| i.icon.sort.ascending:before { | |
| content: "\f0de"; | |
| } | |
| i.icon.sort.attributes.descending:before { | |
| content: "\f161"; | |
| } | |
| i.icon.sort.attributes:before { | |
| content: "\f160"; | |
| } | |
| i.icon.sort.descending:before { | |
| content: "\f0dd"; | |
| } | |
| i.icon.sort.order.descending:before { | |
| content: "\f163"; | |
| } | |
| i.icon.sort.order:before { | |
| content: "\f162"; | |
| } | |
| i.icon.sort:before { | |
| content: "\f0dc"; | |
| } | |
| i.icon.stackexchange:before { | |
| content: "\f16c"; | |
| } | |
| i.icon.star.empty:before { | |
| content: "\f006"; | |
| } | |
| i.icon.star.half.empty:before { | |
| content: "\f123"; | |
| } | |
| i.icon.star.half.full:before, | |
| i.icon.star.half:before { | |
| content: "\f089"; | |
| } | |
| i.icon.star:before { | |
| content: "\f005"; | |
| } | |
| i.icon.step.backward:before { | |
| content: "\f048"; | |
| } | |
| i.icon.step.forward:before { | |
| content: "\f051"; | |
| } | |
| i.icon.stethoscope:before { | |
| content: "\f0f1"; | |
| } | |
| i.icon.stop:before { | |
| content: "\f04d"; | |
| } | |
| i.icon.strikethrough:before { | |
| content: "\f0cc"; | |
| } | |
| i.icon.subscript:before { | |
| content: "\f12c"; | |
| } | |
| i.icon.suitcase:before { | |
| content: "\f0f2"; | |
| } | |
| i.icon.sun:before { | |
| content: "\f185"; | |
| } | |
| i.icon.superscript:before { | |
| content: "\f12b"; | |
| } | |
| i.icon.table:before { | |
| content: "\f0ce"; | |
| } | |
| i.icon.tablet:before { | |
| content: "\f10a"; | |
| } | |
| i.icon.tag:before { | |
| content: "\f02b"; | |
| } | |
| i.icon.tags:before { | |
| content: "\f02c"; | |
| } | |
| i.icon.tasks:before { | |
| content: "\f0ae"; | |
| } | |
| i.icon.terminal:before { | |
| content: "\f120"; | |
| } | |
| i.icon.text.height:before { | |
| content: "\f034"; | |
| } | |
| i.icon.text.width:before { | |
| content: "\f035"; | |
| } | |
| i.icon.thumbs.down.outline:before { | |
| content: "\f088"; | |
| } | |
| i.icon.thumbs.down:before { | |
| content: "\f165"; | |
| } | |
| i.icon.thumbs.up.outline:before { | |
| content: "\f087"; | |
| } | |
| i.icon.thumbs.up:before { | |
| content: "\f164"; | |
| } | |
| i.icon.ticket:before { | |
| content: "\f145"; | |
| } | |
| i.icon.time:before { | |
| content: "\f017"; | |
| } | |
| i.icon.tint:before { | |
| content: "\f043"; | |
| } | |
| i.icon.trash:before { | |
| content: "\f014"; | |
| } | |
| i.icon.trello:before { | |
| content: "\f181"; | |
| } | |
| i.icon.trophy:before { | |
| content: "\f091"; | |
| } | |
| i.icon.truck:before { | |
| content: "\f0d1"; | |
| } | |
| i.icon.tumblr.sign:before { | |
| content: "\f174"; | |
| } | |
| i.icon.tumblr:before { | |
| content: "\f173"; | |
| } | |
| i.icon.twitter.sign:before { | |
| content: "\f081"; | |
| } | |
| i.icon.twitter:before { | |
| content: "\f099"; | |
| } | |
| i.icon.umbrella:before { | |
| content: "\f0e9"; | |
| } | |
| i.icon.underline:before { | |
| content: "\f0cd"; | |
| } | |
| i.icon.undo:before { | |
| content: "\f0e2"; | |
| } | |
| i.icon.unhide:before { | |
| content: "\f06e"; | |
| } | |
| i.icon.unlink:before { | |
| content: "\f127"; | |
| } | |
| i.icon.unlock.alternate:before { | |
| content: "\f13e"; | |
| } | |
| i.icon.unlock:before { | |
| content: "\f09c"; | |
| } | |
| i.icon.unmute:before { | |
| content: "\f130"; | |
| } | |
| i.icon.up:before { | |
| content: "\f062"; | |
| } | |
| i.icon.upload.disk:before { | |
| content: "\f093"; | |
| } | |
| i.icon.upload:before { | |
| content: "\f01b"; | |
| } | |
| i.icon.url:before { | |
| content: "\f0c1"; | |
| } | |
| i.icon.user:before { | |
| content: "\f007"; | |
| } | |
| i.icon.users:before { | |
| content: "\f0c0"; | |
| } | |
| i.icon.video:before { | |
| content: "\f008"; | |
| } | |
| i.icon.vk:before { | |
| content: "\f189"; | |
| } | |
| i.icon.volume.down:before { | |
| content: "\f027"; | |
| } | |
| i.icon.volume.off:before { | |
| content: "\f026"; | |
| } | |
| i.icon.volume.up:before { | |
| content: "\f028"; | |
| } | |
| i.icon.warning:before { | |
| content: "\f071"; | |
| } | |
| i.icon.weibo:before { | |
| content: "\f18a"; | |
| } | |
| i.icon.windows:before { | |
| content: "\f17a"; | |
| } | |
| i.icon.won:before { | |
| content: "\f159"; | |
| } | |
| i.icon.wrench:before { | |
| content: "\f0ad"; | |
| } | |
| i.icon.xing.sign:before { | |
| content: "\f169"; | |
| } | |
| i.icon.xing:before { | |
| content: "\f168"; | |
| } | |
| i.icon.yen:before { | |
| content: "\f157"; | |
| } | |
| i.icon.youtube.play:before { | |
| content: "\f16a"; | |
| } | |
| i.icon.youtube.sign:before { | |
| content: "\f166"; | |
| } | |
| i.icon.youtube:before { | |
| content: "\f167"; | |
| } | |
| i.icon.yuan:before { | |
| content: "\f158"; | |
| } | |
| i.icon.zoom.in:before { | |
| content: "\f00e"; | |
| } | |
| i.icon.zoom.out:before { | |
| content: "\f010"; | |
| } | |
| /*-------------- | |
| Aliases | |
| ---------------*/ | |
| i.icon.check:before { | |
| content: "\f00c"; | |
| } | |
| i.icon.close:before { | |
| content: "\f00d"; | |
| } | |
| i.icon.delete:before { | |
| content: "\f00d"; | |
| } | |
| i.icon.like:before { | |
| content: "\f004"; | |
| } | |
| i.icon.plus:before { | |
| content: "\f067"; | |
| } | |
| i.icon.signup:before { | |
| content: "\f044"; | |
| } | |
| /*-------------- | |
| Spacing Fix | |
| ---------------*/ | |
| /* stars are usually consecutive */ | |
| i.icon.star { | |
| width: auto; | |
| margin: 0em; | |
| } | |
| /* left side icons */ | |
| i.icon.left, | |
| i.icon.left, | |
| i.icon.left { | |
| width: auto; | |
| margin: 0em 0.5em 0em 0em; | |
| } | |
| /* right side icons */ | |
| i.icon.search, | |
| i.icon.up, | |
| i.icon.down, | |
| i.icon.right { | |
| width: auto; | |
| margin: 0em 0em 0em 0.5em; | |
| } | |
| /******************************* | |
| Types | |
| *******************************/ | |
| /*-------------- | |
| Loading | |
| ---------------*/ | |
| i.icon.loading { | |
| -webkit-animation: icon-loading 2s linear infinite; | |
| -moz-animation: icon-loading 2s linear infinite; | |
| -ms-animation: icon-loading 2s linear infinite; | |
| -o-animation: icon-loading 2s linear infinite; | |
| animation: icon-loading 2s linear infinite; | |
| } | |
| @keyframes icon-loading { | |
| from { | |
| -webkit-transform: rotate(0deg); | |
| -moz-transform: rotate(0deg); | |
| -o-transform: rotate(0deg); | |
| -ms-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| to { | |
| -webkit-transform: rotate(360deg); | |
| -moz-transform: rotate(360deg); | |
| -o-transform: rotate(360deg); | |
| -ms-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| } | |
| } | |
| @-moz-keyframes icon-loading { | |
| from { | |
| -moz-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| to { | |
| -moz-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| } | |
| } | |
| @-webkit-keyframes icon-loading { | |
| from { | |
| -webkit-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| to { | |
| -webkit-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| } | |
| } | |
| @-ms-keyframes icon-loading { | |
| from { | |
| -ms-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| to { | |
| -ms-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| } | |
| } | |
| @-o-keyframes icon-loading { | |
| from { | |
| -o-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| to { | |
| -o-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| } | |
| } | |
| /******************************* | |
| States | |
| *******************************/ | |
| i.icon.hover { | |
| opacity: 1; | |
| } | |
| i.icon.active { | |
| opacity: 1; | |
| } | |
| i.emphasized.icon { | |
| opacity: 1; | |
| } | |
| i.icon.disabled { | |
| opacity: 0.3; | |
| } | |
| /******************************* | |
| Variations | |
| *******************************/ | |
| /*------------------- | |
| Link | |
| --------------------*/ | |
| i.link.icon { | |
| cursor: pointer; | |
| opacity: 0.7; | |
| -webkit-transition: opacity 0.3s ease-out; | |
| -moz-transition: opacity 0.3s ease-out; | |
| -o-transition: opacity 0.3s ease-out; | |
| -ms-transition: opacity 0.3s ease-out; | |
| transition: opacity 0.3s ease-out; | |
| } | |
| i.link.icon:hover { | |
| opacity: 1 !important; | |
| } | |
| /*------------------- | |
| Circular | |
| --------------------*/ | |
| i.circular.icon { | |
| -webkit-border-radius: 500em !important; | |
| -moz-border-radius: 500em !important; | |
| border-radius: 500em !important; | |
| padding: 0.5em 0.35em !important; | |
| -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; | |
| -moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; | |
| box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; | |
| line-height: 1 !important; | |
| width: 2em !important; | |
| height: 2em !important; | |
| } | |
| i.circular.inverted.icon { | |
| border: none; | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| /*------------------- | |
| Flipped | |
| --------------------*/ | |
| i.flipped.icon, | |
| i.horizontally.flipped.icon { | |
| -webkit-transform: scale(-1, 1); | |
| -moz-transform: scale(-1, 1); | |
| -o-transform: scale(-1, 1); | |
| -ms-transform: scale(-1, 1); | |
| transform: scale(-1, 1); | |
| } | |
| i.vertically.flipped.icon { | |
| -webkit-transform: scale(1, -1); | |
| -moz-transform: scale(1, -1); | |
| -o-transform: scale(1, -1); | |
| -ms-transform: scale(1, -1); | |
| transform: scale(1, -1); | |
| } | |
| /*------------------- | |
| Rotated | |
| --------------------*/ | |
| i.rotated.icon, | |
| i.right.rotated.icon, | |
| i.clockwise.rotated.icon { | |
| -webkit-transform: rotate(90deg); | |
| -moz-transform: rotate(90deg); | |
| -o-transform: rotate(90deg); | |
| -ms-transform: rotate(90deg); | |
| transform: rotate(90deg); | |
| } | |
| i.left.rotated.icon, | |
| i.counterclockwise.rotated.icon { | |
| -webkit-transform: rotate(-90deg); | |
| -moz-transform: rotate(-90deg); | |
| -o-transform: rotate(-90deg); | |
| -ms-transform: rotate(-90deg); | |
| transform: rotate(-90deg); | |
| } | |
| /*------------------- | |
| Square | |
| --------------------*/ | |
| i.square.icon { | |
| width: 2em; | |
| height: 2em; | |
| padding: 0.5em 0.35em !important; | |
| -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; | |
| -moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; | |
| box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; | |
| vertical-align: baseline; | |
| } | |
| i.square.inverted.icon { | |
| border: none; | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| /*------------------- | |
| Inverted | |
| --------------------*/ | |
| i.inverted.icon { | |
| background-color: #222222; | |
| color: #FFFFFF; | |
| } | |
| /*------------------- | |
| Colors | |
| --------------------*/ | |
| i.blue.icon { | |
| color: #6ECFF5 !important; | |
| } | |
| i.black.icon { | |
| color: #5C6166 !important; | |
| } | |
| i.green.icon { | |
| color: #A1CF64 !important; | |
| } | |
| i.red.icon { | |
| color: #D95C5C !important; | |
| } | |
| i.purple.icon { | |
| color: #564F8A !important; | |
| } | |
| i.teal.icon { | |
| color: #00B5AD !important; | |
| } | |
| /*------------------- | |
| Inverted Colors | |
| --------------------*/ | |
| i.inverted.black.icon { | |
| background-color: #5C6166 !important; | |
| color: #FFFFFF !important; | |
| } | |
| i.inverted.blue.icon { | |
| background-color: #6ECFF5 !important; | |
| color: #FFFFFF !important; | |
| } | |
| i.inverted.green.icon { | |
| background-color: #A1CF64 !important; | |
| color: #FFFFFF !important; | |
| } | |
| i.inverted.red.icon { | |
| background-color: #D95C5C !important; | |
| color: #FFFFFF !important; | |
| } | |
| i.inverted.purple.icon { | |
| background-color: #564F8A !important; | |
| color: #FFFFFF !important; | |
| } | |
| i.inverted.teal.icon { | |
| background-color: #00B5AD !important; | |
| color: #FFFFFF !important; | |
| } | |
| /*------------------- | |
| Sizes | |
| --------------------*/ | |
| i.small.icon { | |
| font-size: 0.875em; | |
| } | |
| i.icon { | |
| font-size: 1em; | |
| } | |
| i.large.icon { | |
| font-size: 1.5em; | |
| vertical-align: middle; | |
| } | |
| i.big.icon { | |
| font-size: 2em; | |
| vertical-align: middle; | |
| } | |
| i.huge.icon { | |
| font-size: 4em; | |
| vertical-align: middle; | |
| } | |
| i.massive.icon { | |
| font-size: 8em; | |
| vertical-align: middle; | |
| } | |
| /* | |
| * # Semantic - Image | |
| * http://github.com/jlukic/semantic-ui/ | |
| * | |
| * | |
| * Copyright 2013 Contributors | |
| * Released under the MIT license | |
| * http://opensource.org/licenses/MIT | |
| * | |
| */ | |
| /******************************* | |
| Image | |
| *******************************/ | |
| .ui.image { | |
| position: relative; | |
| display: inline-block; | |
| vertical-align: middle; | |
| max-width: 100%; | |
| background-color: rgba(0, 0, 0, 0.05); | |
| } | |
| img.ui.image { | |
| display: block; | |
| background: none; | |
| } | |
| .ui.image img { | |
| display: block; | |
| max-width: 100%; | |
| height: auto; | |
| } | |
| /******************************* | |
| States | |
| *******************************/ | |
| .ui.disabled.image { | |
| cursor: default; | |
| opacity: 0.3; | |
| } | |
| /******************************* | |
| Variations | |
| *******************************/ | |
| /*-------------- | |
| Rounded | |
| ---------------*/ | |
| .ui.rounded.images .image, | |
| .ui.rounded.images img, | |
| .ui.rounded.image img, | |
| .ui.rounded.image { | |
| -webkit-border-radius: 0.3125em; | |
| -moz-border-radius: 0.3125em; | |
| border-radius: 0.3125em; | |
| } | |
| /*-------------- | |
| Circular | |
| ---------------*/ | |
| .ui.circular.images .image, | |
| .ui.circular.images img, | |
| .ui.circular.image img, | |
| .ui.circular.image { | |
| -webkit-border-radius: 500rem; | |
| -moz-border-radius: 500rem; | |
| border-radius: 500rem; | |
| } | |
| /*-------------- | |
| Fluid | |
| ---------------*/ | |
| .ui.fluid.images, | |
| .ui.fluid.image, | |
| .ui.fluid.images img, | |
| .ui.fluid.image img { | |
| display: block; | |
| width: 100%; | |
| } | |
| /*-------------- | |
| Avatar | |
| ---------------*/ | |
| .ui.avatar.images .image, | |
| .ui.avatar.images img, | |
| .ui.avatar.image img, | |
| .ui.avatar.image { | |
| margin-right: 0.5em; | |
| display: inline-block; | |
| width: 2em; | |
| height: 2em; | |
| -webkit-border-radius: 500rem; | |
| -moz-border-radius: 500rem; | |
| border-radius: 500rem; | |
| } | |
| /*------------------- | |
| Floated | |
| --------------------*/ | |
| .ui.floated.image, | |
| .ui.floated.images { | |
| float: left; | |
| margin-right: 1em; | |
| margin-bottom: 1em; | |
| } | |
| .ui.right.floated.images, | |
| .ui.right.floated.image { | |
| float: right; | |
| margin-bottom: 1em; | |
| margin-left: 1em; | |
| } | |
| /*-------------- | |
| Sizes | |
| ---------------*/ | |
| .ui.tiny.images .image, | |
| .ui.tiny.images img, | |
| .ui.tiny.image { | |
| width: 20px; | |
| font-size: 0.7rem; | |
| } | |
| .ui.mini.images .image, | |
| .ui.mini.images img, | |
| .ui.mini.image { | |
| width: 35px; | |
| font-size: 0.8rem; | |
| } | |
| .ui.small.images .image, | |
| .ui.small.images img, | |
| .ui.small.image { | |
| width: 80px; | |
| font-size: 0.9rem; | |
| } | |
| .ui.medium.images .image, | |
| .ui.medium.images img, | |
| .ui.medium.image { | |
| width: 300px; | |
| font-size: 1rem; | |
| } | |
| .ui.large.images .image, | |
| .ui.large.images img, | |
| .ui.large.image { | |
| width: 450px; | |
| font-size: 1.1rem; | |
| } | |
| .ui.huge.images .image, | |
| .ui.huge.images img, | |
| .ui.huge.image { | |
| width: 600px; | |
| font-size: 1.2rem; | |
| } | |
| /******************************* | |
| Groups | |
| *******************************/ | |
| .ui.images { | |
| font-size: 0em; | |
| margin: 0em -0.25rem 0rem; | |
| } | |
| .ui.images .image, | |
| .ui.images img { | |
| display: inline-block; | |
| margin: 0em 0.25em 0.5em; | |
| } | |
| /* | |
| * # Semantic - Input | |
| * http://github.com/jlukic/semantic-ui/ | |
| * | |
| * | |
| * Copyright 2013 Contributors | |
| * Released under the MIT license | |
| * http://opensource.org/licenses/MIT | |
| * | |
| */ | |
| /******************************* | |
| Standard | |
| *******************************/ | |
| /*-------------------- | |
| Inputs | |
| ---------------------*/ | |
| .ui.input { | |
| display: inline-block; | |
| position: relative; | |
| color: rgba(0, 0, 0, 0.7); | |
| } | |
| .ui.input input { | |
| width: 100%; | |
| font-family: "Helvetica Neue", "Helvetica", Arial; | |
| margin: 0em; | |
| padding: 0.85em 1.2em; | |
| font-size: 0.875em; | |
| background-color: #FFFFFF; | |
| border: 1px solid rgba(0, 0, 0, 0.15); | |
| outline: none; | |
| color: rgba(0, 0, 0, 0.7); | |
| -webkit-border-radius: 0.3125em; | |
| -moz-border-radius: 0.3125em; | |
| border-radius: 0.3125em; | |
| -webkit-transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease; | |
| -moz-transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease; | |
| -o-transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease; | |
| -ms-transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease; | |
| transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease; | |
| -webkit-tap-highlight-color: rgba(255, 255, 255, 0); | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| /*-------------------- | |
| Placeholder | |
| ---------------------*/ | |
| /* browsers require these rules separate */ | |
| .ui.input::-web inputkit-input-placeholder { | |
| color: #E0E0E0; | |
| } | |
| .ui.input::-moz input-placeholder { | |
| color: #E0E0E0; | |
| } | |
| /******************************* | |
| States | |
| *******************************/ | |
| /*-------------------- | |
| Active | |
| ---------------------*/ | |
| .ui.input input:active, | |
| .ui.input.down input { | |
| border-color: rgba(0, 0, 0, 0.3); | |
| background-color: #FAFAFA; | |
| } | |
| /*-------------------- | |
| Loading | |
| ---------------------*/ | |
| .ui.loading.input > .icon { | |
| background: url(../images/loader-mini.gif) no-repeat 50% 50%; | |
| } | |
| .ui.loading.input > .icon:before, | |
| .ui.loading.input > .icon:after { | |
| display: none; | |
| } | |
| /*-------------------- | |
| Focus | |
| ---------------------*/ | |
| .ui.input.focus input, | |
| .ui.input input:focus { | |
| border-color: rgba(0, 0, 0, 0.2); | |
| color: rgba(0, 0, 0, 0.85); | |
| } | |
| .ui.input.focus input input::-webkit-input-placeholder, | |
| .ui.input input:focus input::-webkit-input-placeholder { | |
| color: #AAAAAA; | |
| } | |
| .ui.input.focus input input::-moz-placeholder, | |
| .ui.input input:focus input::-moz-placeholder { | |
| color: #AAAAAA; | |
| } | |
| /*-------------------- | |
| Error | |
| ---------------------*/ | |
| .ui.input.error input { | |
| background-color: #FFFAFA; | |
| border-color: #E7BEBE; | |
| color: #D95C5C; | |
| } | |
| /* Error Placeholder */ | |
| .ui.input.error input ::-webkit-input-placeholder { | |
| color: rgba(255, 80, 80, 0.4); | |
| } | |
| .ui.input.error input ::-moz-placeholder { | |
| color: rgba(255, 80, 80, 0.4); | |
| } | |
| .ui.input.error input :focus::-webkit-input-placeholder { | |
| color: rgba(255, 80, 80, 0.7); | |
| } | |
| .ui.input.error input :focus::-moz-placeholder { | |
| color: rgba(255, 80, 80, 0.7); | |
| } | |
| /******************************* | |
| Variations | |
| *******************************/ | |
| /*-------------------- | |
| Transparent | |
| ---------------------*/ | |
| .ui.transparent.input input { | |
| border: none; | |
| background-color: transparent; | |
| } | |
| /*-------------------- | |
| Icon | |
| ---------------------*/ | |
| .ui.icon.input > .icon { | |
| cursor: default; | |
| position: absolute; | |
| opacity: 0.5; | |
| top: 0px; | |
| right: 0px; | |
| margin: 0em; | |
| width: 2.6em; | |
| height: 100%; | |
| padding-top: 0.82em; | |
| text-align: center; | |
| -webkit-border-radius: 0em 0.3125em 0.3125em 0em; | |
| -moz-border-radius: 0em 0.3125em 0.3125em 0em; | |
| border-radius: 0em 0.3125em 0.3125em 0em; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| -webkit-transition: opacity 0.3s ease-out; | |
| -moz-transition: opacity 0.3s ease-out; | |
| -o-transition: opacity 0.3s ease-out; | |
| -ms-transition: opacity 0.3s ease-out; | |
| transition: opacity 0.3s ease-out; | |
| } | |
| .ui.icon.input > .link.icon { | |
| cursor: pointer; | |
| } | |
| .ui.icon.input input { | |
| padding-right: 3em !important; | |
| } | |
| .ui.icon.input > .circular.icon { | |
| top: 0.35em; | |
| right: 0.5em; | |
| } | |
| /* Left Side */ | |
| .ui.left.icon.input > .icon { | |
| right: auto; | |
| left: 1px; | |
| -webkit-border-radius: 0.3125em 0em 0em 0.3125em; | |
| -moz-border-radius: 0.3125em 0em 0em 0.3125em; | |
| border-radius: 0.3125em 0em 0em 0.3125em; | |
| } | |
| .ui.left.icon.input > .circular.icon { | |
| right: auto; | |
| left: 0.5em; | |
| } | |
| .ui.left.icon.input > input { | |
| padding-left: 3em !important; | |
| padding-right: 1.2em !important; | |
| } | |
| /* Focus */ | |
| .ui.icon.input > input:focus ~ .icon { | |
| opacity: 1; | |
| } | |
| /*-------------------- | |
| Labeled | |
| ---------------------*/ | |
| .ui.labeled.input .corner.label { | |
| top: 1px; | |
| right: 1px; | |
| -webkit-border-top-right-radius: 0.3125em; | |
| -moz-border-top-right-radius: 0.3125em; | |
| border-top-right-radius: 0.3125em; | |
| } | |
| .ui.labeled.input input { | |
| padding-right: 2.5em !important; | |
| } | |
| /* Spacing with corner label */ | |
| .ui.labeled.icon.input:not(.left) > input { | |
| padding-right: 3.25em !important; | |
| } | |
| .ui.labeled.icon.input:not(.left) > .icon { | |
| margin-right: 0.75em; | |
| } | |
| /*-------------------- | |
| Action | |
| ---------------------*/ | |
| .ui.action.input { | |
| display: table; | |
| } | |
| .ui.action.input > input { | |
| display: table-cell; | |
| border-top-right-radius: 0px !important; | |
| border-bottom-right-radius: 0px !important; | |
| border-right: none; | |
| } | |
| .ui.action.input > .button { | |
| display: table-cell; | |
| border-top-left-radius: 0px; | |
| border-bottom-left-radius: 0px; | |
| -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; | |
| -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; | |
| box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; | |
| white-space: nowrap; | |
| } | |
| .ui.action.input > .button > .icon { | |
| display: inline; | |
| } | |
| .ui.action.input > input:focus ~ .button { | |
| -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset; | |
| -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset; | |
| box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset; | |
| } | |
| /*-------------------- | |
| Fluid | |
| ---------------------*/ | |
| .ui.fluid.input { | |
| display: block; | |
| } | |
| /*-------------------- | |
| Size | |
| ---------------------*/ | |
| .ui.mini.input { | |
| font-size: 0.8125rem; | |
| } | |
| .ui.tiny.input { | |
| font-size: 0.875rem; | |
| } | |
| .ui.small.input { | |
| font-size: 0.875rem; | |
| } | |
| .ui.input { | |
| font-size: 1rem; | |
| } | |
| .ui.large.input { | |
| font-size: 1.125rem; | |
| } | |
| .ui.big.input { | |
| font-size: 1.25rem; | |
| } | |
| .ui.huge.input { | |
| font-size: 1.375rem; | |
| } | |
| .ui.massive.input { | |
| font-size: 1.5rem; | |
| } | |
| /* | |
| * # Semantic - Label | |
| * http://github.com/jlukic/semantic-ui/ | |
| * | |
| * | |
| * Copyright 2013 Contributors | |
| * Released under the MIT license | |
| * http://opensource.org/licenses/MIT | |
| * | |
| */ | |
| /******************************* | |
| Label | |
| *******************************/ | |
| .ui.label { | |
| display: inline-block; | |
| vertical-align: middle; | |
| margin: -0.25em 0.25em 0em; | |
| background-color: #E8E8E8; | |
| border-color: #E8E8E8; | |
| padding: 0.5em 0.8em; | |
| color: rgba(0, 0, 0, 0.65); | |
| text-transform: uppercase; | |
| font-weight: normal; | |
| -webkit-border-radius: 0.325em; | |
| -moz-border-radius: 0.325em; | |
| border-radius: 0.325em; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| -webkit-transition: background 0.1s linear | |
| ; | |
| -moz-transition: background 0.1s linear | |
| ; | |
| -o-transition: background 0.1s linear | |
| ; | |
| -ms-transition: background 0.1s linear | |
| ; | |
| transition: background 0.1s linear | |
| ; | |
| } | |
| .ui.label:first-child { | |
| margin-left: 0em; | |
| } | |
| .ui.label:last-child { | |
| margin-right: 0em; | |
| } | |
| /* Link */ | |
| a.ui.label { | |
| cursor: pointer; | |
| } | |
| /* Detail */ | |
| .ui.label .detail { | |
| display: inline-block; | |
| margin-left: 0.5em; | |
| font-weight: bold; | |
| opacity: 0.8; | |
| } | |
| /* Icon */ | |
| .ui.label .icon { | |
| width: auto; | |
| } | |
| /* Removable label */ | |
| .ui.label .delete.icon { | |
| cursor: pointer; | |
| margin: 0em 0em 0em 0.5em; | |
| opacity: 0.7; | |
| -webkit-transition: background 0.1s linear | |
| ; | |
| -moz-transition: background 0.1s linear | |
| ; | |
| -o-transition: background 0.1s linear | |
| ; | |
| -ms-transition: background 0.1s linear | |
| ; | |
| transition: background 0.1s linear | |
| ; | |
| } | |
| .ui.label .delete.icon:hover { | |
| opacity: 0.99; | |
| } | |
| /*------------------- | |
| Coupling | |
| --------------------*/ | |
| /* Padding on next content after a label */ | |
| .ui.segment > .attached.label:first-child + * { | |
| margin-top: 2.5em; | |
| } | |
| .ui.segment > .bottom.attached.label:first-child ~ :last-child { | |
| margin-top: 0em; | |
| margin-bottom: 2.5em; | |
| } | |
| /******************************* | |
| Types | |
| *******************************/ | |
| .ui.image.label { | |
| width: auto !important; | |
| margin-top: 0em; | |
| margin-bottom: 0em; | |
| padding-top: 0.4em; | |
| padding-bottom: 0.4em; | |
| line-height: 1.5em; | |
| vertical-align: baseline; | |
| text-transform: none; | |
| -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; | |
| -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; | |
| box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; | |
| } | |
| .ui.image.label img { | |
| display: inline-block; | |
| height: 2.25em; | |
| margin: -0.4em 0.8em -0.4em -0.8em; | |
| vertical-align: top; | |
| -moz-border-radius: 0.325em 0em 0em 0.325em; | |
| -webkit-border-radius: 0.325em 0em 0em 0.325em; | |
| border-radius: 0.325em 0em 0em 0.325em; | |
| } | |
| /******************************* | |
| States | |
| *******************************/ | |
| /*------------------- | |
| Disabled | |
| --------------------*/ | |
| .ui.label.disabled { | |
| opacity: 0.5; | |
| } | |
| /*------------------- | |
| Hover | |
| --------------------*/ | |
| a.ui.labels .label:hover, | |
| a.ui.label:hover { | |
| background-color: #E0E0E0; | |
| border-color: #E0E0E0; | |
| color: rgba(0, 0, 0, 0.7); | |
| } | |
| .ui.labels a.label:hover:before, | |
| a.ui.label:hover:before { | |
| background-color: #E0E0E0; | |
| color: rgba(0, 0, 0, 0.7); | |
| } | |
| /*------------------- | |
| Visible | |
| --------------------*/ | |
| .ui.labels.visible .label, | |
| .ui.label.visible { | |
| display: inline-block !important; | |
| } | |
| /*------------------- | |
| Hidden | |
| --------------------*/ | |
| .ui.labels.hidden .label, | |
| .ui.label.hidden { | |
| display: none !important; | |
| } | |
| /******************************* | |
| Variations | |
| *******************************/ | |
| /*------------------- | |
| Tag | |
| --------------------*/ | |
| .ui.tag.labels .label, | |
| .ui.tag.label { | |
| margin-left: 1em; | |
| position: relative; | |
| padding: 0.33em 1.3em 0.33em 1.4em; | |
| -webkit-border-radius: 0px 3px 3px 0px; | |
| -moz-border-radius: 0px 3px 3px 0px; | |
| border-radius: 0px 3px 3px 0px; | |
| } | |
| .ui.tag.labels .label:before, | |
| .ui.tag.label:before { | |
| position: absolute; | |
| top: 0.3em; | |
| left: 0.3em; | |
| content: ''; | |
| margin-left: -1em; | |
| background-image: none; | |
| width: 1.5em; | |
| height: 1.5em; | |
| -webkit-transform: rotate(45deg); | |
| -moz-transform: rotate(45deg); | |
| transform: rotate(45deg); | |
| -webkit-transition: background 0.1s linear | |
| ; | |
| -moz-transition: background 0.1s linear | |
| ; | |
| -o-transition: background 0.1s linear | |
| ; | |
| -ms-transition: background 0.1s linear | |
| ; | |
| transition: background 0.1s linear | |
| ; | |
| } | |
| .ui.tag.labels .label:after, | |
| .ui.tag.label:after { | |
| position: absolute; | |
| content: ''; | |
| top: 50%; | |
| left: -0.25em; | |
| margin-top: -0.3em; | |
| background-color: #FFFFFF; | |
| width: 0.55em; | |
| height: 0.55em; | |
| -webkit-box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3); | |
| -moz-box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3); | |
| box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3); | |
| -moz-border-radius: 100px 100px 100px 100px; | |
| -webkit-border-radius: 100px 100px 100px 100px; | |
| border-radius: 100px 100px 100px 100px; | |
| } | |
| /*------------------- | |
| Ribbon | |
| --------------------*/ | |
| .ui.ribbon.label { | |
| position: relative; | |
| margin: 0em 0.2em; | |
| left: -2rem; | |
| padding-left: 2rem; | |
| -webkit-border-radius: 0px 4px 4px 0px; | |
| -moz-border-radius: 0px 4px 4px 0px; | |
| border-radius: 0px 4px 4px 0px; | |
| border-color: rgba(0, 0, 0, 0.15); | |
| } | |
| .ui.ribbon.label:after { | |
| position: absolute; | |
| content: ""; | |
| top: 100%; | |
| left: 0%; | |
| border-top: 0em solid transparent; | |
| border-right-width: 1em; | |
| border-right-color: inherit; | |
| border-right-style: solid; | |
| border-bottom: 1em solid transparent; | |
| border-left: 0em solid transparent; | |
| width: 0em; | |
| height: 0em; | |
| } | |
| /*------------------- | |
| Attached | |
| --------------------*/ | |
| .ui.top.attached.label, | |
| .ui.attached.label { | |
| width: 100%; | |
| position: absolute; | |
| margin: 0em; | |
| top: 0em; | |
| left: 0em; | |
| padding: 0.75em 1em; | |
| -webkit-border-radius: 4px 4px 0em 0em; | |
| -moz-border-radius: 4px 4px 0em 0em; | |
| border-radius: 4px 4px 0em 0em; | |
| } | |
| .ui.bottom.attached.label { | |
| top: auto; | |
| bottom: 0em; | |
| -webkit-border-radius: 0em 0em 4px 4px; | |
| -moz-border-radius: 0em 0em 4px 4px; | |
| border-radius: 0em 0em 4px 4px; | |
| } | |
| .ui.top.left.attached.label { | |
| width: auto; | |
| margin-top: 0em !important; | |
| -webkit-border-radius: 4px 0em 4px 0em; | |
| -moz-border-radius: 4px 0em 4px 0em; | |
| border-radius: 4px 0em 4px 0em; | |
| } | |
| .ui.top.right.attached.label { | |
| width: auto; | |
| left: auto; | |
| right: 0em; | |
| -webkit-border-radius: 0em 4px 0em 4px; | |
| -moz-border-radius: 0em 4px 0em 4px; | |
| border-radius: 0em 4px 0em 4px; | |
| } | |
| .ui.bottom.left.attached.label { | |
| width: auto; | |
| top: auto; | |
| bottom: 0em; | |
| -webkit-border-radius: 4px 0em 0em 4px; | |
| -moz-border-radius: 4px 0em 0em 4px; | |
| border-radius: 4px 0em 0em 4px; | |
| } | |
| .ui.bottom.right.attached.label { | |
| top: auto; | |
| bottom: 0em; | |
| left: auto; | |
| right: 0em; | |
| width: auto; | |
| -webkit-border-radius: 4px 0em 4px 0em; | |
| -moz-border-radius: 4px 0em 4px 0em; | |
| border-radius: 4px 0em 4px 0em; | |
| } | |
| /*------------------- | |
| Corner Label | |
| --------------------*/ | |
| .ui.corner.label { | |
| background-color: transparent; | |
| position: absolute; | |
| top: 0em; | |
| right: 0em; | |
| z-index: 10; | |
| margin: 0em; | |
| font-size: 0.8125em; | |
| width: 2rem; | |
| height: 2rem; | |
| padding: 0em; | |
| text-align: center; | |
| -webkit-transition: color 0.2s ease; | |
| -moz-transition: color 0.2s ease; | |
| -o-transition: color 0.2s ease; | |
| -ms-transition: color 0.2s ease; | |
| transition: color 0.2s ease; | |
| } | |
| .ui.corner.label:after { | |
| position: absolute; | |
| content: ""; | |
| right: 0em; | |
| top: 0em; | |
| z-index: -1; | |
| width: 0em; | |
| height: 0em; | |
| border-top: 0em solid transparent; | |
| border-right: 3em solid transparent; | |
| border-bottom: 3em solid transparent; | |
| border-left: 0em solid transparent; | |
| border-right-color: inherit; | |
| -webkit-transition: border-color 0.2s ease; | |
| -moz-transition: border-color 0.2s ease; | |
| -o-transition: border-color 0.2s ease; | |
| -ms-transition: border-color 0.2s ease; | |
| transition: border-color 0.2s ease; | |
| } | |
| .ui.corner.label .icon { | |
| margin: 0.4em 0em 0em 0.7em; | |
| } | |
| .ui.corner.label .text { | |
| display: inline-block; | |
| font-weight: bold; | |
| margin: 0.5em 0em 0em 0.6em; | |
| width: 2.5em; | |
| font-size: 0.82em; | |
| text-align: center; | |
| -webkit-transform: rotate(45deg); | |
| -moz-transform: rotate(45deg); | |
| -o-transform: rotate(45deg); | |
| -ms-transform: rotate(45deg); | |
| transform: rotate(45deg); | |
| } | |
| /* Left Corner */ | |
| .ui.left.corner.label, | |
| .ui.left.corner.label:after { | |
| right: auto; | |
| left: 0em; | |
| } | |
| .ui.left.corner.label:after { | |
| border-top: 3em solid transparent; | |
| border-right: 3em solid transparent; | |
| border-bottom: 0em solid transparent; | |
| border-left: 0em solid transparent; | |
| border-top-color: inherit; | |
| } | |
| .ui.left.corner.label .icon { | |
| margin: 0.4em 0em 0em -0.7em; | |
| } | |
| .ui.left.corner.label .text { | |
| margin: 0.5em 0em 0em -0.6em; | |
| -webkit-transform: rotate(-45deg); | |
| -moz-transform: rotate(-45deg); | |
| -o-transform: rotate(-45deg); | |
| -ms-transform: rotate(-45deg); | |
| transform: rotate(-45deg); | |
| } | |
| /* Hover */ | |
| .ui.corner.label:hover { | |
| background-color: transparent; | |
| } | |
| /*------------------- | |
| Fluid | |
| --------------------*/ | |
| .ui.label.fluid, | |
| .ui.fluid.labels > .label { | |
| width: 100%; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| /*------------------- | |
| Inverted | |
| --------------------*/ | |
| .ui.inverted.labels .label, | |
| .ui.inverted.label { | |
| color: #FFFFFF !important; | |
| } | |
| /*------------------- | |
| Colors | |
| --------------------*/ | |
| /*--- Black ---*/ | |
| .ui.black.labels .label, | |
| .ui.black.label { | |
| background-color: #5C6166 !important; | |
| border-color: #5C6166 !important; | |
| color: #FFFFFF !important; | |
| } | |
| .ui.labels .black.label:before, | |
| .ui.black.labels .label:before, | |
| .ui.black.label:before { | |
| background-color: #5C6166 !important; | |
| } | |
| /* Hover */ | |
| a.ui.black.labels .label:hover, | |
| a.ui.black.label:hover { | |
| background-color: #333333 !important; | |
| border-color: #333333 !important; | |
| } | |
| .ui.labels a.black.label:hover:before, | |
| .ui.black.labels a.label:hover:before, | |
| a.ui.black.label:hover:before { | |
| background-color: #333333 !important; | |
| } | |
| /* Corner */ | |
| .ui.black.corner.label, | |
| .ui.black.corner.label:hover { | |
| background-color: transparent !important; | |
| } | |
| /* Ribbon */ | |
| .ui.black.ribbon.label { | |
| border-color: #333333 !important; | |
| } | |
| /*--- Green ---*/ | |
| .ui.green.labels .label, | |
| .ui.green.label { | |
| background-color: #A1CF64 !important; | |
| border-color: #A1CF64 !important; | |
| color: #FFFFFF !important; | |
| } | |
| .ui.labels .green.label:before, | |
| .ui.green.labels .label:before, | |
| .ui.green.label:before { | |
| background-color: #A1CF64 !important; | |
| } | |
| /* Hover */ | |
| a.ui.green.labels .label:hover, | |
| a.ui.green.label:hover { | |
| background-color: #89B84C !important; | |
| border-color: #89B84C !important; | |
| } | |
| .ui.labels a.green.label:hover:before, | |
| .ui.green.labels a.label:hover:before, | |
| a.ui.green.label:hover:before { | |
| background-color: #89B84C !important; | |
| } | |
| /* Corner */ | |
| .ui.green.corner.label, | |
| .ui.green.corner.label:hover { | |
| background-color: transparent !important; | |
| } | |
| /* Ribbon */ | |
| .ui.green.ribbon.label { | |
| border-color: #89B84C !important; | |
| } | |
| /*--- Red ---*/ | |
| .ui.red.labels .label, | |
| .ui.red.label { | |
| background-color: #D95C5C !important; | |
| border-color: #D95C5C !important; | |
| color: #FFFFFF !important; | |
| } | |
| .ui.labels .red.label:before, | |
| .ui.red.labels .label:before, | |
| .ui.red.label:before { | |
| background-color: #D95C5C !important; | |
| } | |
| /* Corner */ | |
| .ui.red.corner.label, | |
| .ui.red.corner.label:hover { | |
| background-color: transparent !important; | |
| } | |
| /* Hover */ | |
| a.ui.red.labels .label:hover, | |
| a.ui.red.label:hover { | |
| background-color: #DE3859 !important; | |
| border-color: #DE3859 !important; | |
| color: #FFFFFF !important; | |
| } | |
| .ui.labels a.red.label:hover:before, | |
| .ui.red.labels a.label:hover:before, | |
| a.ui.red.label:hover:before { | |
| background-color: #DE3859 !important; | |
| } | |
| /* Ribbon */ | |
| .ui.red.ribbon.label { | |
| border-color: #DE3859 !important; | |
| } | |
| /*--- Blue ---*/ | |
| .ui.blue.labels .label, | |
| .ui.blue.label { | |
| background-color: #6ECFF5 !important; | |
| border-color: #6ECFF5 !important; | |
| color: #FFFFFF !important; | |
| } | |
| .ui.labels .blue.label:before, | |
| .ui.blue.labels .label:before, | |
| .ui.blue.label:before { | |
| background-color: #6ECFF5 !important; | |
| } | |
| /* Hover */ | |
| a.ui.blue.labels .label:hover, | |
| .ui.blue.labels a.label:hover, | |
| a.ui.blue.label:hover { | |
| background-color: #1AB8F3 !important; | |
| border-color: #1AB8F3 !important; | |
| color: #FFFFFF !important; | |
| } | |
| .ui.labels a.blue.label:hover:before, | |
| .ui.blue.labels a.label:hover:before, | |
| a.ui.blue.label:hover:before { | |
| background-color: #1AB8F3 !important; | |
| } | |
| /* Corner */ | |
| .ui.blue.corner.label, | |
| .ui.blue.corner.label:hover { | |
| background-color: transparent !important; | |
| } | |
| /* Ribbon */ | |
| .ui.blue.ribbon.label { | |
| border-color: #1AB8F3 !important; | |
| } | |
| /*--- Purple ---*/ | |
| .ui.purple.labels .label, | |
| .ui.purple.label { | |
| background-color: #564F8A !important; | |
| border-color: #564F8A !important; | |
| color: #FFFFFF !important; | |
| } | |
| .ui.labels .purple.label:before, | |
| .ui.purple.labels .label:before, | |
| .ui.purple.label:before { | |
| background-color: #564F8A !important; | |
| } | |
| /* Hover */ | |
| a.ui.purple.labels .label:hover, | |
| .ui.purple.labels a.label:hover, | |
| a.ui.purple.label:hover { | |
| background-color: #3E3773 !important; | |
| border-color: #3E3773 !important; | |
| color: #FFFFFF !important; | |
| } | |
| .ui.labels a.purple.label:hover:before, | |
| .ui.purple.labels a.label:hover:before, | |
| a.ui.purple.label:hover:before { | |
| background-color: #3E3773 !important; | |
| } | |
| /* Corner */ | |
| .ui.purple.corner.label, | |
| .ui.purple.corner.label:hover { | |
| background-color: transparent !important; | |
| } | |
| /* Ribbon */ | |
| .ui.purple.ribbon.label { | |
| border-color: #3E3773 !important; | |
| } | |
| /*--- Orange ---*/ | |
| .ui.orange.labels .label, | |
| .ui.orange.label { | |
| background-color: #F05940 !important; | |
| border-color: #F05940 !important; | |
| color: #FFFFFF !important; | |
| } | |
| .ui.labels .orange.label:before, | |
| .ui.orange.labels .label:before, | |
| .ui.orange.label:before { | |
| background-color: #F05940 !important; | |
| } | |
| /* Hover */ | |
| a.ui.orange.labels .label:hover, | |
| .ui.orange.labels a.label:hover, | |
| a.ui.orange.label:hover { | |
| background-color: #FF4121 !important; | |
| border-color: #FF4121 !important; | |
| color: #FFFFFF !important; | |
| } | |
| .ui.labels a.orange.label:hover:before, | |
| .ui.orange.labels a.label:hover:before, | |
| a.ui.orange.label:hover:before { | |
| background-color: #FF4121 !important; | |
| } | |
| /* Corner */ | |
| .ui.orange.corner.label, | |
| .ui.orange.corner.label:hover { | |
| background-color: transparent !important; | |
| } | |
| /* Ribbon */ | |
| .ui.orange.ribbon.label { | |
| border-color: #FF4121 !important; | |
| } | |
| /*--- Teal ---*/ | |
| .ui.teal.labels .label, | |
| .ui.teal.label { | |
| background-color: #00B5AD !important; | |
| border-color: #00B5AD !important; | |
| color: #FFFFFF !important; | |
| } | |
| .ui.labels .teal.label:before, | |
| .ui.teal.labels .label:before, | |
| .ui.teal.label:before { | |
| background-color: #00B5AD !important; | |
| } | |
| /* Hover */ | |
| a.ui.teal.labels .label:hover, | |
| .ui.teal.labels a.label:hover, | |
| a.ui.teal.label:hover { | |
| background-color: #009A93 !important; | |
| border-color: #009A93 !important; | |
| color: #FFFFFF !important; | |
| } | |
| .ui.labels a.teal.label:hover:before, | |
| .ui.teal.labels a.label:hover:before, | |
| a.ui.teal.label:hover:before { | |
| background-color: #009A93 !important; | |
| } | |
| /* Corner */ | |
| .ui.teal.corner.label, | |
| .ui.teal.corner.label:hover { | |
| background-color: transparent !important; | |
| } | |
| /* Ribbon */ | |
| .ui.teal.ribbon.label { | |
| border-color: #009A93 !important; | |
| } | |
| /*------------------- | |
| Horizontal | |
| --------------------*/ | |
| .ui.horizontal.labels .label, | |
| .ui.horizontal.label { | |
| margin: -0.125em 0.5em -0.125em 0em; | |
| padding: 0.35em 1em; | |
| min-width: 6em; | |
| text-align: center; | |
| } | |
| /*------------------- | |
| Circular | |
| --------------------*/ | |
| .ui.circular.labels .label, | |
| .ui.circular.label { | |
| min-height: 1em; | |
| max-height: 2em; | |
| padding: 0.5em !important; | |
| line-height: 1em; | |
| text-align: center; | |
| -webkit-border-radius: 500rem; | |
| -moz-border-radius: 500rem; | |
| border-radius: 500rem; | |
| } | |
| /*------------------- | |
| Pointing | |
| --------------------*/ | |
| .ui.pointing.label { | |
| position: relative; | |
| } | |
| .ui.attached.pointing.label { | |
| position: absolute; | |
| } | |
| .ui.pointing.label:before { | |
| position: absolute; | |
| content: ""; | |
| width: 0.6em; | |
| height: 0.6em; | |
| background-image: none; | |
| -webkit-transform: rotate(45deg); | |
| -moz-transform: rotate(45deg); | |
| transform: rotate(45deg); | |
| z-index: 2; | |
| -webkit-transition: background 0.1s linear | |
| ; | |
| -moz-transition: background 0.1s linear | |
| ; | |
| -o-transition: background 0.1s linear | |
| ; | |
| -ms-transition: background 0.1s linear | |
| ; | |
| transition: background 0.1s linear | |
| ; | |
| } | |
| /*--- Above ---*/ | |
| .ui.pointing.label:before { | |
| background-color: #E8E8E8; | |
| } | |
| .ui.pointing.label, | |
| .ui.pointing.above.label { | |
| margin-top: 1em; | |
| } | |
| .ui.pointing.label:before, | |
| .ui.pointing.above.label:before { | |
| margin-left: -0.3em; | |
| top: -0.3em; | |
| left: 50%; | |
| } | |
| /*--- Below ---*/ | |
| .ui.pointing.below.label { | |
| margin-top: 0em; | |
| margin-bottom: 1em; | |
| } | |
| .ui.pointing.below.label:before { | |
| margin-left: -0.3em; | |
| top: auto; | |
| right: auto; | |
| bottom: -0.3em; | |
| left: 50%; | |
| } | |
| /*--- Left ---*/ | |
| .ui.pointing.left.label { | |
| margin-top: 0em; | |
| margin-left: 1em; | |
| } | |
| .ui.pointing.left.label:before { | |
| margin-top: -0.3em; | |
| bottom: auto; | |
| right: auto; | |
| top: 50%; | |
| left: 0em; | |
| } | |
| /*--- Right ---*/ | |
| .ui.pointing.right.label { | |
| margin-top: 0em; | |
| margin-right: 1em; | |
| } | |
| .ui.pointing.right.label:before { | |
| margin-top: -0.3em; | |
| right: -0.3em; | |
| top: 50%; | |
| bottom: auto; | |
| left: auto; | |
| } | |
| /*------------------ | |
| Floating Label | |
| -------------------*/ | |
| .ui.floating.label { | |
| position: absolute; | |
| z-index: 100; | |
| top: -1em; | |
| left: 100%; | |
| margin: 0em 0em 0em -1.5em !important; | |
| } | |
| /*------------------- | |
| Sizes | |
| --------------------*/ | |
| .ui.small.labels .label, | |
| .ui.small.label { | |
| font-size: 0.75rem; | |
| } | |
| .ui.label { | |
| font-size: 0.8125rem; | |
| } | |
| .ui.large.labels .label, | |
| .ui.large.label { | |
| font-size: 0.875rem; | |
| } | |
| .ui.huge.labels .label, | |
| .ui.huge.label { | |
| font-size: 1rem; | |
| } | |
| /* | |
| * # Semantic - Loader | |
| * http://github.com/jlukic/semantic-ui/ | |
| * | |
| * | |
| * Copyright 2013 Contributors | |
| * Released under the MIT license | |
| * http://opensource.org/licenses/MIT | |
| * | |
| */ | |
| /******************************* | |
| Loader | |
| *******************************/ | |
| /* Standard Size */ | |
| .ui.loader { | |
| display: none; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| margin: 0px; | |
| z-index: 1000; | |
| -webkit-transform: translateX(-50%) translateY(-50%); | |
| -moz-transform: translateX(-50%) translateY(-50%); | |
| -o-transform: translateX(-50%) translateY(-50%); | |
| -ms-transform: translateX(-50%) translateY(-50%); | |
| transform: translateX(-50%) translateY(-50%); | |
| } | |
| .ui.dimmer .loader { | |
| display: block; | |
| } | |
| /******************************* | |
| Types | |
| *******************************/ | |
| /*------------------- | |
| Text | |
| --------------------*/ | |
| .ui.text.loader { | |
| width: auto !important; | |
| height: auto !important; | |
| text-align: center; | |
| font-style: normal; | |
| } | |
| .ui.mini.text.loader { | |
| min-width: 16px; | |
| padding-top: 2em; | |
| font-size: 0.875em; | |
| } | |
| .ui.small.text.loader { | |
| min-width: 24px; | |
| padding-top: 2.5em; | |
| font-size: 0.875em; | |
| } | |
| .ui.text.loader { | |
| min-width: 32px; | |
| font-size: 1em; | |
| padding-top: 3em; | |
| } | |
| .ui.large.text.loader { | |
| min-width: 64px; | |
| padding-top: 5em; | |
| font-size: 1.2em; | |
| } | |
| /******************************* | |
| States | |
| *******************************/ | |
| .ui.loader.active, | |
| .ui.loader.visible { | |
| display: block; | |
| } | |
| .ui.loader.disabled, | |
| .ui.loader.hidden { | |
| display: none; | |
| } | |
| /******************************* | |
| Variations | |
| *******************************/ | |
| /*------------------- | |
| Inverted | |
| --------------------*/ | |
| .ui.dimmer .ui.text.loader, | |
| .ui.inverted.text.loader { | |
| color: rgba(255, 255, 255, 0.8); | |
| } | |
| .ui.inverted.dimmer .ui.text.loader { | |
| color: rgba(0, 0, 0, 0.8); | |
| } | |
| /* Tiny Size */ | |
| .ui.dimmer .mini.ui.loader, | |
| .ui.inverted .mini.ui.loader { | |
| background-image: url(../images/loader-mini-inverted.gif); | |
| } | |
| /* Small Size */ | |
| .ui.dimmer .small.ui.loader, | |
| .ui.inverted .small.ui.loader { | |
| background-image: url(../images/loader-small-inverted.gif); | |
| } | |
| /* Standard Size */ | |
| .ui.dimmer .ui.loader, | |
| .ui.inverted.loader { | |
| background-image: url(../images/loader-medium-inverted.gif); | |
| } | |
| /* Large Size */ | |
| .ui.dimmer .large.ui.loader, | |
| .ui.inverted .large.ui.loader { | |
| background-image: url(../images/loader-large-inverted.gif); | |
| } | |
| /*------------------- | |
| Sizes | |
| --------------------*/ | |
| /* Tiny Size */ | |
| .ui.inverted.dimmer .ui.mini.loader, | |
| .ui.mini.loader { | |
| width: 16px; | |
| height: 16px; | |
| background-image: url(../images/loader-mini.gif); | |
| } | |
| /* Small Size */ | |
| .ui.inverted.dimmer .ui.small.loader, | |
| .ui.small.loader { | |
| width: 24px; | |
| height: 24px; | |
| background-image: url(../images/loader-small.gif); | |
| } | |
| .ui.inverted.dimmer .ui.loader, | |
| .ui.loader { | |
| width: 32px; | |
| height: 32px; | |
| background: url(../images/loader-medium.gif) no-repeat; | |
| background-position: 48% 0px; | |
| } | |
| /* Large Size */ | |
| .ui.inverted.dimmer .ui.loader.large, | |
| .ui.loader.large { | |
| width: 64px; | |
| height: 64px; | |
| background-image: url(../images/loader-large.gif); | |
| } | |
| /*------------------- | |
| Inline | |
| --------------------*/ | |
| .ui.inline.loader { | |
| position: static; | |
| vertical-align: middle; | |
| margin: 0em; | |
| -webkit-transform: none; | |
| -moz-transform: none; | |
| -o-transform: none; | |
| -ms-transform: none; | |
| transform: none; | |
| } | |
| .ui.inline.loader.active, | |
| .ui.inline.loader.visible { | |
| display: inline-block; | |
| } | |
| /* | |
| * # Semantic - Progress Bar | |
| * http://github.com/jlukic/semantic-ui/ | |
| * | |
| * | |
| * Copyright 2013 Contributors | |
| * Released under the MIT license | |
| * http://opensource.org/licenses/MIT | |
| * | |
| */ | |
| /******************************* | |
| Progress Bar | |
| *******************************/ | |
| .ui.progress { | |
| border: 1px solid rgba(0, 0, 0, 0.1); | |
| width: 100%; | |
| height: 35px; | |
| background-color: #FAFAFA; | |
| padding: 5px; | |
| -webkit-border-radius: 0.3125em; | |
| -moz-border-radius: 0.3125em; | |
| border-radius: 0.3125em; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| .ui.progress .bar { | |
| display: inline-block; | |
| height: 100%; | |
| background-color: #CCCCCC; | |
| -moz-border-radius: 3px; | |
| -webkit-border-radius: 3px; | |
| border-radius: 3px; | |
| -webkit-transition: width 1s ease-in-out, background-color 1s ease-out; | |
| -moz-transition: width 1s ease-in-out, background-color 1s ease-out; | |
| -ms-transition: width 1s ease-in-out, background-color 1s ease-out; | |
| -o-transition: width 1s ease-in-out, background-color 1s ease-out; | |
| transition: width 1s ease-in-out, background-color 1s ease-out; | |
| } | |
| /******************************* | |
| States | |
| *******************************/ | |
| /*-------------- | |
| Successful | |
| ---------------*/ | |
| .ui.successful.progress .bar { | |
| background-color: #73E064 !important; | |
| } | |
| .ui.successful.progress .bar, | |
| .ui.successful.progress .bar::after { | |
| -webkit-animation: none !important; | |
| -moz-animation: none !important; | |
| animation: none !important; | |
| } | |
| /*-------------- | |
| Failed | |
| ---------------*/ | |
| .ui.failed.progress .bar { | |
| background-color: #DF9BA4 !important; | |
| } | |
| .ui.failed.progress .bar, | |
| .ui.failed.progress .bar::after { | |
| -webkit-animation: none !important; | |
| -moz-animation: none !important; | |
| animation: none !important; | |
| } | |
| /*-------------- | |
| Active | |
| ---------------*/ | |
| .ui.active.progress .bar { | |
| position: relative; | |
| } | |
| .ui.active.progress .bar::after { | |
| content: ''; | |
| opacity: 0; | |
| position: absolute; | |
| top: 0px; | |
| left: 0px; | |
| right: 0px; | |
| bottom: 0px; | |
| background: #FFFFFF; | |
| -moz-border-radius: 3px; | |
| -webkit-border-radius: 3px; | |
| border-radius: 3px; | |
| -webkit-animation: progress-active 2s ease-out infinite; | |
| -moz-animation: progress-active 2s ease-out infinite; | |
| animation: progress-active 2s ease-out infinite; | |
| } | |
| @-webkit-keyframes progress-active { | |
| 0% { | |
| opacity: 0; | |
| width: 0; | |
| } | |
| 50% { | |
| opacity: 0.3; | |
| } | |
| 100% { | |
| opacity: 0; | |
| width: 95%; | |
| } | |
| } | |
| @-moz-keyframes progress-active { | |
| 0% { | |
| opacity: 0; | |
| width: 0; | |
| } | |
| 50% { | |
| opacity: 0.3; | |
| } | |
| 100% { | |
| opacity: 0; | |
| width: 100%; | |
| } | |
| } | |
| @keyframes progress-active { | |
| 0% { | |
| opacity: 0; | |
| width: 0; | |
| } | |
| 50% { | |
| opacity: 0.3; | |
| } | |
| 100% { | |
| opacity: 0; | |
| width: 100%; | |
| } | |
| } | |
| /*-------------- | |
| Disabled | |
| ---------------*/ | |
| .ui.disabled.progress { | |
| opacity: 0.35; | |
| } | |
| .ui.disabled.progress .bar, | |
| .ui.disabled.progress .bar::after { | |
| -webkit-animation: none !important; | |
| -moz-animation: none !important; | |
| animation: none !important; | |
| } | |
| /******************************* | |
| Variations | |
| *******************************/ | |
| /*-------------- | |
| Attached | |
| ---------------*/ | |
| /* bottom attached */ | |
| .ui.progress.attached { | |
| position: relative; | |
| border: none; | |
| } | |
| .ui.progress.attached, | |
| .ui.progress.attached .bar { | |
| display: block; | |
| height: 3px; | |
| padding: 0px; | |
| overflow: hidden; | |
| -webkit-border-radius: 0em 0em 0.3125em 0.3125em; | |
| -moz-border-radius: 0em 0em 0.3125em 0.3125em; | |
| border-radius: 0em 0em 0.3125em 0.3125em; | |
| } | |
| .ui.progress.attached .bar { | |
| -webkit-border-radius: 0em; | |
| -moz-border-radius: 0em; | |
| border-radius: 0em; | |
| } | |
| /* top attached */ | |
| .ui.progress.top.attached, | |
| .ui.progress.top.attached .bar { | |
| top: -2px; | |
| -webkit-border-radius: 0.3125em 0.3125em 0em 0em; | |
| -moz-border-radius: 0.3125em 0.3125em 0em 0em; | |
| border-radius: 0.3125em 0.3125em 0em 0em; | |
| } | |
| .ui.progress.top.attached .bar { | |
| -webkit-border-radius: 0em; | |
| -moz-border-radius: 0em; | |
| border-radius: 0em; | |
| } | |
| /*-------------- | |
| Colors | |
| ---------------*/ | |
| .ui.blue.progress .bar { | |
| background-color: #6ECFF5; | |
| } | |
| .ui.black.progress .bar { | |
| background-color: #5C6166; | |
| } | |
| .ui.green.progress .bar { | |
| background-color: #A1CF64; | |
| } | |
| .ui.red.progress .bar { | |
| background-color: #EF4D6D; | |
| } | |
| .ui.purple.progress .bar { | |
| background-color: #564F8A; | |
| } | |
| .ui.teal.progress .bar { | |
| background-color: #00B5AD; | |
| } | |
| /*-------------- | |
| Striped | |
| ---------------*/ | |
| .ui.progress.striped .bar { | |
| -webkit-background-size: 30px 30px; | |
| -moz-background-size: 30px 30px; | |
| background-size: 30px 30px; | |
| background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); | |
| background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); | |
| background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); | |
| background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); | |
| background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); | |
| background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); | |
| } | |
| .ui.progress.active.striped .bar:after { | |
| -webkit-animation: none; | |
| -moz-animation: none; | |
| -ms-animation: none; | |
| -o-animation: none; | |
| animation: none; | |
| } | |
| .ui.progress.active.striped .bar { | |
| -webkit-animation: progress-striped 3s linear infinite; | |
| -moz-animation: progress-striped 3s linear infinite; | |
| animation: progress-striped 3s linear infinite; | |
| } | |
| @-webkit-keyframes progress-striped { | |
| 0% { | |
| background-position: 0px 0; | |
| } | |
| 100% { | |
| background-position: 60px 0; | |
| } | |
| } | |
| @-moz-keyframes progress-striped { | |
| 0% { | |
| background-position: 0px 0; | |
| } | |
| 100% { | |
| background-position: 60px 0; | |
| } | |
| } | |
| @keyframes progress-striped { | |
| 0% { | |
| background-position: 0px 0; | |
| } | |
| 100% { | |
| background-position: 60px 0; | |
| } | |
| } | |
| /*-------------- | |
| Sizes | |
| ---------------*/ | |
| .ui.small.progress .bar { | |
| height: 14px; | |
| } | |
| /* | |
| * # Semantic - Segment | |
| * http://github.com/jlukic/semantic-ui/ | |
| * | |
| * | |
| * Copyright 2013 Contributors | |
| * Released under the MIT license | |
| * http://opensource.org/licenses/MIT | |
| * | |
| */ | |
| /******************************* | |
| Segment | |
| *******************************/ | |
| .ui.segment { | |
| position: relative; | |
| background-color: #FFFFFF; | |
| -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); | |
| -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); | |
| box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); | |
| margin: 1em 0em; | |
| padding: 1em; | |
| -webkit-border-radius: 5px 5px 5px 5px; | |
| -moz-border-radius: 5px 5px 5px 5px; | |
| border-radius: 5px 5px 5px 5px; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| .ui.segment:first-child { | |
| margin-top: 0em; | |
| } | |
| .ui.segment:last-child { | |
| margin-bottom: 0em; | |
| } | |
| .ui.segment:after { | |
| content: ''; | |
| display: block; | |
| height: 0; | |
| clear: both; | |
| visibility: hidden; | |
| } | |
| .ui.vertical.segment { | |
| margin: 0em; | |
| padding-left: 0em; | |
| padding-right: 0em; | |
| background-color: transparent; | |
| -webkit-border-radius: 0px; | |
| -moz-border-radius: 0px; | |
| border-radius: 0px; | |
| -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); | |
| -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); | |
| box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); | |
| } | |
| .ui.vertical.segment:first-child { | |
| padding-top: 0em; | |
| } | |
| .ui.horizontal.segment { | |
| margin: 0em; | |
| padding-top: 0em; | |
| padding-bottom: 0em; | |
| background-color: transparent; | |
| -webkit-border-radius: 0px; | |
| -moz-border-radius: 0px; | |
| border-radius: 0px; | |
| -webkit-box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1); | |
| -moz-box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1); | |
| box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1); | |
| } | |
| .ui.horizontal.segment:first-child { | |
| padding-left: 0em; | |
| } | |
| /*------------------- | |
| Loose Coupling | |
| --------------------*/ | |
| .ui.pointing.menu + .ui.attached.segment { | |
| top: 1px; | |
| } | |
| /* No padding on edge content */ | |
| .ui.segment > :first-child { | |
| margin-top: 0em; | |
| } | |
| .ui.segment > :last-child { | |
| margin-bottom: 0em; | |
| } | |
| /******************************* | |
| Types | |
| *******************************/ | |
| /*------------------- | |
| Piled | |
| --------------------*/ | |
| .ui.piled.segment { | |
| margin: 2em 0em; | |
| -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15); | |
| -moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15); | |
| -ms-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15); | |
| -o-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15); | |
| box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15); | |
| } | |
| .ui.piled.segment:first-child { | |
| margin-top: 0em; | |
| } | |
| .ui.piled.segment:last-child { | |
| margin-bottom: 0em; | |
| } | |
| .ui.piled.segment:after, | |
| .ui.piled.segment:before { | |
| background-color: #FFFFFF; | |
| visibility: visible; | |
| content: ""; | |
| display: block; | |
| height: 100%; | |
| left: -1px; | |
| position: absolute; | |
| width: 100%; | |
| -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); | |
| -moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); | |
| box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); | |
| } | |
| .ui.piled.segment:after { | |
| -webkit-transform: rotate(1.2deg); | |
| -moz-transform: rotate(1.2deg); | |
| -ms-transform: rotate(1.2deg); | |
| -o-transform: rotate(1.2deg); | |
| transform: rotate(1.2deg); | |
| top: 0; | |
| z-index: -1; | |
| } | |
| .ui.piled.segment:before { | |
| -webkit-transform: rotate(-1.2deg); | |
| -moz-transform: rotate(-1.2deg); | |
| -ms-transform: rotate(-1.2deg); | |
| -o-transform: rotate(-1.2deg); | |
| transform: rotate(-1.2deg); | |
| top: 0; | |
| z-index: -2; | |
| } | |
| /*------------------- | |
| Stacked | |
| --------------------*/ | |
| .ui.stacked.segment { | |
| padding-bottom: 1.7em; | |
| } | |
| .ui.stacked.segment:after, | |
| .ui.stacked.segment:before { | |
| content: ''; | |
| position: absolute; | |
| bottom: -3px; | |
| left: 0%; | |
| border-top: 1px solid rgba(0, 0, 0, 0.1); | |
| background-color: rgba(0, 0, 0, 0.02); | |
| width: 100%; | |
| height: 5px; | |
| visibility: visible; | |
| } | |
| .ui.stacked.segment:before { | |
| bottom: 0px; | |
| } | |
| /* Inverted */ | |
| .ui.stacked.inverted.segment:after, | |
| .ui.stacked.inverted.segment:before { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| border-top: 1px solid rgba(255, 255, 255, 0.35); | |
| } | |
| /*------------------- | |
| Raised | |
| --------------------*/ | |
| .ui.raised.segment { | |
| -webkit-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1); | |
| -moz-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1); | |
| box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1); | |
| } | |
| /******************************* | |
| States | |
| *******************************/ | |
| .ui.disabled.segment { | |
| opacity: 0.8; | |
| color: #DDDDDD; | |
| } | |
| /******************************* | |
| Variations | |
| *******************************/ | |
| /*------------------- | |
| Basic | |
| --------------------*/ | |
| .ui.basic.segment { | |
| position: relative; | |
| background-color: transparent; | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| -webkit-border-radius: 0px; | |
| -moz-border-radius: 0px; | |
| border-radius: 0px; | |
| } | |
| .ui.basic.segment:first-child { | |
| padding-top: 0em; | |
| } | |
| .ui.basic.segment:last-child { | |
| padding-bottom: 0em; | |
| } | |
| /*------------------- | |
| Fittted | |
| --------------------*/ | |
| .ui.fitted.segment { | |
| padding: 0em; | |
| } | |
| /*------------------- | |
| Colors | |
| --------------------*/ | |
| .ui.blue.segment { | |
| border-top: 0.2em solid #6ECFF5; | |
| } | |
| .ui.green.segment { | |
| border-top: 0.2em solid #A1CF64; | |
| } | |
| .ui.red.segment { | |
| border-top: 0.2em solid #D95C5C; | |
| } | |
| .ui.orange.segment { | |
| border-top: 0.2em solid #F05940; | |
| } | |
| .ui.purple.segment { | |
| border-top: 0.2em solid #564F8A; | |
| } | |
| .ui.teal.segment { | |
| border-top: 0.2em solid #00B5AD; | |
| } | |
| /*------------------- | |
| Inverted Colors | |
| --------------------*/ | |
| .ui.inverted.black.segment { | |
| background-color: #5C6166 !important; | |
| color: #FFFFFF !important; | |
| } | |
| .ui.inverted.blue.segment { | |
| background-color: #6ECFF5 !important; | |
| color: #FFFFFF !important; | |
| } | |
| .ui.inverted.green.segment { | |
| background-color: #A1CF64 !important; | |
| color: #FFFFFF !important; | |
| } | |
| .ui.inverted.red.segment { | |
| background-color: #D95C5C !important; | |
| color: #FFFFFF !important; | |
| } | |
| .ui.inverted.orange.segment { | |
| background-color: #F05940 !important; | |
| color: #FFFFFF !important; | |
| } | |
| .ui.inverted.purple.segment { | |
| background-color: #564F8A !important; | |
| color: #FFFFFF !important; | |
| } | |
| .ui.inverted.teal.segment { | |
| background-color: #00B5AD !important; | |
| color: #FFFFFF !important; | |
| } | |
| /*------------------- | |
| Aligned | |
| --------------------*/ | |
| .ui.left.aligned.segment { | |
| text-align: left; | |
| } | |
| .ui.right.aligned.segment { | |
| text-align: right; | |
| } | |
| .ui.center.aligned.segment { | |
| text-align: center; | |
| } | |
| /*------------------- | |
| Floated | |
| --------------------*/ | |
| .ui.floated.segment, | |
| .ui.left.floated.segment { | |
| float: left; | |
| } | |
| .ui.right.floated.segment { | |
| float: right; | |
| } | |
| /*------------------- | |
| Inverted | |
| --------------------*/ | |
| .ui.inverted.segment { | |
| border: none; | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| .ui.inverted.segment, | |
| .ui.primary.inverted.segment { | |
| background-color: #222222; | |
| color: #FFFFFF; | |
| } | |
| /*------------------- | |
| Ordinality | |
| --------------------*/ | |
| .ui.primary.segment { | |
| background-color: #FFFFFF; | |
| color: #555555; | |
| } | |
| .ui.secondary.segment { | |
| background-color: #FAF9FA; | |
| color: #777777; | |
| } | |
| .ui.tertiary.segment { | |
| background-color: #EBEBEB; | |
| color: #B0B0B0; | |
| } | |
| .ui.secondary.inverted.segment { | |
| background-color: #555555; | |
| background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.3))); | |
| background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%); | |
| background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%); | |
| background-image: -o-linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%); | |
| background-image: linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%); | |
| color: #FAFAFA; | |
| } | |
| .ui.tertiary.inverted.segment { | |
| background-color: #555555; | |
| background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.6)), to(rgba(255, 255, 255, 0.6))); | |
| background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%); | |
| background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%); | |
| background-image: -o-linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%); | |
| background-image: linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%); | |
| color: #EEEEEE; | |
| } | |
| /*------------------- | |
| Attached | |
| --------------------*/ | |
| .ui.segment.attached { | |
| top: -1px; | |
| bottom: -1px; | |
| -moz-border-radius: 0px; | |
| -webkit-border-radius: 0px; | |
| border-radius: 0px; | |
| margin: 0em; | |
| -moz-box-shadow: 0px 0px 0px 1px #DDDDDD; | |
| -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD; | |
| box-shadow: 0px 0px 0px 1px #DDDDDD; | |
| } | |
| .ui.top.attached.segment { | |
| top: 0px; | |
| bottom: -1px; | |
| margin-top: 1em; | |
| margin-bottom: 0em; | |
| -moz-border-radius: 5px 5px 0px 0px; | |
| -webkit-border-radius: 5px 5px 0px 0px; | |
| border-radius: 5px 5px 0px 0px; | |
| } | |
| .ui.segment.bottom.attached { | |
| top: -1px; | |
| bottom: 0px; | |
| margin-top: 0em; | |
| margin-bottom: 1em; | |
| -moz-border-radius: 0px 0px 5px 5px; | |
| -webkit-border-radius: 0px 0px 5px 5px; | |
| border-radius: 0px 0px 5px 5px; | |
| } | |
| /* | |
| * # Semantic - Steps | |
| * http://github.com/jlukic/semantic-ui/ | |
| * | |
| * | |
| * Copyright 2013 Contributors | |
| * Released under the MIT license | |
| * http://opensource.org/licenses/MIT | |
| * | |
| */ | |
| /******************************* | |
| Step | |
| *******************************/ | |
| .ui.step, | |
| .ui.steps .step { | |
| display: inline-block; | |
| position: relative; | |
| padding: 1em 2em 1em 3em; | |
| vertical-align: top; | |
| background-color: #FFFFFF; | |
| color: #888888; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| .ui.step:after, | |
| .ui.steps .step:after { | |
| position: absolute; | |
| z-index: 2; | |
| content: ''; | |
| top: 0em; | |
| right: -1.45em; | |
| border-bottom: 1.5em solid transparent; | |
| border-left: 1.5em solid #FFFFFF; | |
| border-top: 1.5em solid transparent; | |
| width: 0em; | |
| height: 0em; | |
| } | |
| .ui.step, | |
| .ui.steps .step, | |
| .ui.steps .step:after { | |
| -webkit-transition: opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease; | |
| -moz-transition: opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease; | |
| -o-transition: opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease; | |
| -ms-transition: opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease; | |
| transition: opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease; | |
| } | |
| /******************************* | |
| Group | |
| *******************************/ | |
| .ui.steps { | |
| cursor: pointer; | |
| display: inline-block; | |
| font-size: 0em; | |
| -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); | |
| -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); | |
| box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); | |
| line-height: 1; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| -moz-border-radius: 0.3125rem; | |
| -webkit-border-radius: 0.3125rem; | |
| border-radius: 0.3125rem; | |
| } | |
| .ui.steps .step:first-child { | |
| padding-left: 1.35em; | |
| -webkit-border-radius: 0.3125em 0em 0em 0.3125em; | |
| -moz-border-radius: 0.3125em 0em 0em 0.3125em; | |
| border-radius: 0.3125em 0em 0em 0.3125em; | |
| } | |
| .ui.steps .step:last-child { | |
| -webkit-border-radius: 0em 0.3125em 0.3125em 0em; | |
| -moz-border-radius: 0em 0.3125em 0.3125em 0em; | |
| border-radius: 0em 0.3125em 0.3125em 0em; | |
| } | |
| .ui.steps .step:only-child { | |
| -webkit-border-radius: 0.3125em; | |
| -moz-border-radius: 0.3125em; | |
| border-radius: 0.3125em; | |
| } | |
| .ui.steps .step:last-child { | |
| margin-right: 0em; | |
| } | |
| .ui.steps .step:last-child:after { | |
| display: none; | |
| } | |
| /******************************* | |
| States | |
| *******************************/ | |
| /* Hover */ | |
| .ui.step:hover, | |
| .ui.step.hover { | |
| background-color: #F7F7F7; | |
| color: rgba(0, 0, 0, 0.8); | |
| } | |
| .ui.steps .step.hover:after, | |
| .ui.steps .step:hover:after, | |
| .ui.step:hover, | |
| .ui.step.hover::after { | |
| border-left-color: #F7F7F7; | |
| } | |
| /* Hover */ | |
| .ui.steps .step.down, | |
| .ui.steps .step:active, | |
| .ui.step.down, | |
| .ui.step:active { | |
| background-color: #F0F0F0; | |
| } | |
| .ui.steps .step.down:after, | |
| .ui.steps .step:active:after, | |
| .ui.steps.down::after, | |
| .ui.steps:active::after { | |
| border-left-color: #F0F0F0; | |
| } | |
| /* Active */ | |
| .ui.steps .step.active, | |
| .ui.active.step { | |
| cursor: auto; | |
| background-color: #555555; | |
| color: #FFFFFF; | |
| font-weight: bold; | |
| } | |
| .ui.steps .step.active:after, | |
| .ui.active.steps:after { | |
| border-left-color: #555555; | |
| } | |
| /* Disabled */ | |
| .ui.steps .disabled.step, | |
| .ui.disabled.step { | |
| cursor: auto; | |
| background-color: #FFFFFF; | |
| color: #CBCBCB; | |
| } | |
| .ui.disabled.step:after { | |
| border: none; | |
| background-color: #FFFFFF; | |
| top: 0.42em; | |
| right: -1em; | |
| width: 2.15em; | |
| height: 2.15em; | |
| -webkit-transform: rotate(-45deg); | |
| -moz-transform: rotate(-45deg); | |
| -o-transform: rotate(-45deg); | |
| -ms-transform: rotate(-45deg); | |
| transform: rotate(-45deg); | |
| -webkit-box-shadow: -1px -1px 0px 0px rgba(0, 0, 0, 0.1) inset; | |
| -moz-box-shadow: -1px -1px 0px 0px rgba(0, 0, 0, 0.1) inset; | |
| box-shadow: -1px -1px 0px 0px rgba(0, 0, 0, 0.1) inset; | |
| } | |
| /******************************* | |
| Variations | |
| *******************************/ | |
| /* Attached */ | |
| .attached.ui.steps { | |
| margin: 0em; | |
| -webkit-border-radius: 0.3125em 0.3125em 0em 0em; | |
| -moz-border-radius: 0.3125em 0.3125em 0em 0em; | |
| border-radius: 0.3125em 0.3125em 0em 0em; | |
| } | |
| .attached.ui.steps .step:first-child { | |
| -webkit-border-radius: 0.3125em 0em 0em 0em; | |
| -moz-border-radius: 0.3125em 0em 0em 0em; | |
| border-radius: 0.3125em 0em 0em 0em; | |
| } | |
| .attached.ui.steps .step:last-child { | |
| -webkit-border-radius: 0em 0.3125em 0em 0em; | |
| -moz-border-radius: 0em 0.3125em 0em 0em; | |
| border-radius: 0em 0.3125em 0em 0em; | |
| } | |
| /* Bottom Side */ | |
| .bottom.attached.ui.steps { | |
| margin-top: -1px; | |
| -webkit-border-radius: 0em 0em 0.3125em 0.3125em; | |
| -moz-border-radius: 0em 0em 0.3125em 0.3125em; | |
| border-radius: 0em 0em 0.3125em 0.3125em; | |
| } | |
| .bottom.attached.ui.steps .step:first-child { | |
| -webkit-border-radius: 0em 0em 0em 0.3125em; | |
| -moz-border-radius: 0em 0em 0em 0.3125em; | |
| border-radius: 0em 0em 0em 0.3125em; | |
| } | |
| .bottom.attached.ui.steps .step:last-child { | |
| -webkit-border-radius: 0em 0em 0.3125em 0em; | |
| -moz-border-radius: 0em 0em 0.3125em 0em; | |
| border-radius: 0em 0em 0.3125em 0em; | |
| } | |
| /* Evenly divided */ | |
| .ui.one.steps, | |
| .ui.two.steps, | |
| .ui.three.steps, | |
| .ui.four.steps, | |
| .ui.five.steps, | |
| .ui.six.steps, | |
| .ui.seven.steps, | |
| .ui.eight.steps { | |
| display: block; | |
| } | |
| .ui.one.steps > .step { | |
| width: 100%; | |
| } | |
| .ui.two.steps > .step { | |
| width: 50%; | |
| } | |
| .ui.three.steps > .step { | |
| width: 33.333%; | |
| } | |
| .ui.four.steps > .step { | |
| width: 25%; | |
| } | |
| .ui.five.steps > .step { | |
| width: 20%; | |
| } | |
| .ui.six.steps > .step { | |
| width: 16.666%; | |
| } | |
| .ui.seven.steps > .step { | |
| width: 14.285%; | |
| } | |
| .ui.eight.steps > .step { | |
| width: 12.500%; | |
| } | |
| /******************************* | |
| Sizes | |
| *******************************/ | |
| .ui.small.step, | |
| .ui.small.steps .step { | |
| font-size: 0.8rem; | |
| } | |
| .ui.step, | |
| .ui.steps .step { | |
| font-size: 1rem; | |
| } | |
| .ui.large.step, | |
| .ui.large.steps .step { | |
| font-size: 1.25rem; | |
| } | |
| /******************************* | |
| Result | |
| *******************************/ | |
| .ui.steps .ui.state { | |
| display: inline-block; | |
| z-index: 10; | |
| position: absolute; | |
| background: red; | |
| padding: 5px; | |
| border-radius: 30px; | |
| font-size: 12px; | |
| font-weight: 900; | |
| background: #444444; | |
| border: 3px solid #EEEEEE; | |
| color: #FFFFFF; | |
| margin: 10px 20px 0 0; | |
| } | |
| .ui.steps .ui.state i { | |
| margin: 0; | |
| } | |
| .ui.steps .ui.state.black { | |
| background: #5C6166; | |
| } | |
| .ui.steps .ui.state.black i { | |
| color: #ffffff; | |
| } | |
| .ui.steps .ui.state.green { | |
| background: #5BBD72; | |
| } | |
| .ui.steps .ui.state.green i { | |
| color: #ffffff; | |
| } | |
| .ui.steps .ui.state.red { | |
| background: #D95C5C; | |
| } | |
| .ui.steps .ui.state.red i { | |
| color: #ffffff; | |
| } | |
| .ui.steps .ui.state.blue { | |
| background: #6ECFF5; | |
| } | |
| .ui.steps .ui.state.blue i { | |
| color: #ffffff; | |
| } | |
| .ui.steps .ui.state.purple { | |
| background: #564F8A; | |
| } | |
| .ui.steps .ui.state.purple i { | |
| color: #ffffff; | |
| } | |
| .ui.steps .ui.state.teal { | |
| background: #00B5AD; | |
| } | |
| .ui.steps .ui.state.teal i { | |
| color: #ffffff; | |
| } | |
| .ui.steps .ui.state.orange { | |
| background: #E96633; | |
| } | |
| .ui.steps .ui.state.orange i { | |
| color: #ffffff; | |
| } | |
| /* | |
| * # Semantic - Accordion | |
| * http://github.com/jlukic/semantic-ui/ | |
| * | |
| * | |
| * Copyright 2013 Contributors | |
| * Released under the MIT license | |
| * http://opensource.org/licenses/MIT | |
| * | |
| */ | |
| /******************************* | |
| Accordion | |
| *******************************/ | |
| .ui.accordion { | |
| width: 600px; | |
| max-width: 100%; | |
| overflow: hidden; | |
| font-size: 1rem; | |
| border-radius: 0.3125em; | |
| background-color: #FFFFFF; | |
| -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); | |
| -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); | |
| box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); | |
| } | |
| .ui.accordion .title { | |
| cursor: pointer; | |
| margin: 0em; | |
| padding: 0.75em 1em; | |
| color: rgba(0, 0, 0, 0.6); | |
| border-top: 1px solid rgba(0, 0, 0, 0.05); | |
| -webkit-transition: background-color 0.2s ease-out; | |
| -moz-transition: background-color 0.2s ease-out; | |
| -o-transition: background-color 0.2s ease-out; | |
| -ms-transition: background-color 0.2s ease-out; | |
| transition: background-color 0.2s ease-out; | |
| } | |
| .ui.accordion .title:first-child { | |
| border-top: none; | |
| } | |
| /* Content */ | |
| .ui.accordion .content { | |
| display: none; | |
| margin: 0em; | |
| padding: 1.3em 1em; | |
| } | |
| /* Arrow */ | |
| .ui.accordion .title .dropdown.icon { | |
| display: inline-block; | |
| float: none; | |
| margin: 0em 0.5em 0em 0em; | |
| -webkit-transition: -webkit-transform 0.2s ease, opacity 0.2s ease; | |
| -moz-transition: -moz-transform 0.2s ease, opacity 0.2s ease; | |
| -o-transition: -o-transform 0.2s ease, opacity 0.2s ease; | |
| -ms-transition: -ms-transform 0.2s ease, opacity 0.2s ease; | |
| transition: transform 0.2s ease, | |
| opacity 0.2s ease | |
| ; | |
| -webkit-transform: rotate(0deg); | |
| -moz-transform: rotate(0deg); | |
| -o-transform: rotate(0deg); | |
| -ms-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| .ui.accordion .title .dropdown.icon:before { | |
| content: '\f0da'; | |
| } | |
| /*-------------- | |
| Loose Coupling | |
| ---------------*/ | |
| .ui.basic.accordion.menu { | |
| background-color: #FFFFFF; | |
| -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); | |
| -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); | |
| box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); | |
| } | |
| .ui.basic.accordion.menu .title, | |
| .ui.basic.accordion.menu .content { | |
| padding: 0em; | |
| } | |
| /******************************* | |
| Types | |
| *******************************/ | |
| /*-------------- | |
| Basic | |
| ---------------*/ | |
| .ui.basic.accordion { | |
| background-color: transparent; | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| .ui.basic.accordion .title, | |
| .ui.basic.accordion .title { | |
| background-color: transparent; | |
| border-top: none; | |
| padding-left: 0em; | |
| padding-right: 0em; | |
| } | |
| .ui.basic.accordion .content { | |
| padding: 0.5em 0em; | |
| } | |
| .ui.basic.accordion .active.title { | |
| background-color: transparent; | |
| } | |
| /******************************* | |
| States | |
| *******************************/ | |
| /*-------------- | |
| Hover | |
| ---------------*/ | |
| .ui.accordion .title:hover, | |
| .ui.accordion .active.title { | |
| color: rgba(0, 0, 0, 0.8); | |
| } | |
| /*-------------- | |
| Active | |
| ---------------*/ | |
| .ui.accordion .active.title { | |
| background-color: rgba(0, 0, 0, 0.1); | |
| color: rgba(0, 0, 0, 0.8); | |
| } | |
| .ui.accordion .active.title .dropdown.icon { | |
| -webkit-transform: rotate(90deg); | |
| -moz-transform: rotate(90deg); | |
| -o-transform: rotate(90deg); | |
| -ms-transform: rotate(90deg); | |
| transform: rotate(90deg); | |
| } | |
| .ui.accordion .active.content { | |
| display: block; | |
| } | |
| /******************************* | |
| Variations | |
| *******************************/ | |
| /*-------------- | |
| Fluid | |
| ---------------*/ | |
| .ui.fluid.accordion { | |
| width: 100%; | |
| } | |
| /* | |
| * # Semantic - Chat Room | |
| * http://github.com/jlukic/semantic-ui/ | |
| * | |
| * | |
| * Copyright 2013 Contributors | |
| * Released under the MIT license | |
| * http://opensource.org/licenses/MIT | |
| * | |
| */ | |
| /******************************* | |
| Chat Room | |
| *******************************/ | |
| .ui.chatroom { | |
| background-color: #F8F8F8; | |
| width: 330px; | |
| height: 370px; | |
| padding: 0px; | |
| } | |
| .ui.chatroom .room { | |
| position: relative; | |
| background-color: #FFFFFF; | |
| overflow: hidden; | |
| height: 286px; | |
| border: 1px solid rgba(0, 0, 0, 0.1); | |
| border-top: none; | |
| border-bottom: none; | |
| } | |
| .ui.chatroom .room .loader { | |
| display: none; | |
| margin: -25px 0px 0px -25px; | |
| } | |
| /* Chat Room Actions */ | |
| .ui.chatroom .actions { | |
| overflow: hidden; | |
| background-color: #EEEEEE; | |
| padding: 4px; | |
| border: 1px solid rgba(0, 0, 0, 0.1); | |
| -moz-border-radius: 5px 5px 0px 0px; | |
| -webkit-border-radius: 5px 5px 0px 0px; | |
| border-radius: 5px 5px 0px 0px; | |
| } | |
| .ui.chatroom .actions .button { | |
| float: right; | |
| margin-left: 3px; | |
| } | |
| /* Online User Count */ | |
| .ui.chatroom .actions .message { | |
| float: left; | |
| margin-left: 6px; | |
| font-size: 11px; | |
| color: #AAAAAA; | |
| text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.8); | |
| line-height: 28px; | |
| } | |
| .ui.chatroom .actions .message .loader { | |
| display: inline-block; | |
| margin-right: 8px; | |
| } | |
| /* Chat Room Text Log */ | |
| .ui.chatroom .log { | |
| float: left; | |
| overflow: auto; | |
| overflow-x: hidden; | |
| overflow-y: auto; | |
| } | |
| .ui.chatroom .log .message { | |
| padding: 3px 0px; | |
| border-top: 1px dotted #DADADA; | |
| } | |
| .ui.chatroom .log .message:first-child { | |
| border-top: none; | |
| } | |
| /* status event */ | |
| .ui.chatroom .status { | |
| padding: 5px 0px; | |
| color: #AAAAAA; | |
| font-size: 12px; | |
| font-style: italic; | |
| line-height: 1.33; | |
| border-top: 1px dotted #DADADA; | |
| } | |
| .ui.chatroom .log .status:first-child { | |
| border-top: none; | |
| } | |
| .ui.chatroom .log .flag { | |
| float: left; | |
| } | |
| .ui.chatroom .log p { | |
| margin-left: 0px; | |
| } | |
| .ui.chatroom .log .author { | |
| font-weight: bold; | |
| -webkit-transition: color 0.3s ease-out; | |
| -moz-transition: color 0.3s ease-out; | |
| -o-transition: color 0.3s ease-out; | |
| -ms-transition: color 0.3s ease-out; | |
| transition: color 0.3s ease-out; | |
| } | |
| .ui.chatroom .log a.author:hover { | |
| opacity: 0.8; | |
| } | |
| .ui.chatroom .log .message.admin p { | |
| font-weight: bold; | |
| margin: 1px 0px 0px 23px; | |
| } | |
| .ui.chatroom .log .divider { | |
| margin: -1px 0px; | |
| font-size: 11px; | |
| padding: 10px 0px; | |
| border-top: 1px solid #F8F8F8; | |
| border-bottom: 1px solid #F8F8F8; | |
| } | |
| .ui.chatroom .log .divider .rule { | |
| top: 50%; | |
| width: 15%; | |
| } | |
| .ui.chatroom .log .divider .label { | |
| color: #777777; | |
| margin: 0px; | |
| } | |
| /* Chat Room User List */ | |
| .ui.chatroom .room .list { | |
| position: relative; | |
| overflow: auto; | |
| overflow-x: hidden; | |
| overflow-y: auto; | |
| float: left; | |
| background-color: #EEEEEE; | |
| border-left: 1px solid #DDDDDD; | |
| } | |
| .ui.chatroom .room .list .user { | |
| display: table; | |
| padding: 3px 7px; | |
| border-bottom: 1px solid #DDDDDD; | |
| } | |
| .ui.chatroom .room .list .user:hover { | |
| background-color: #F8F8F8; | |
| } | |
| .ui.chatroom .room .list .image { | |
| display: table-cell; | |
| vertical-align: middle; | |
| width: 20px; | |
| } | |
| .ui.chatroom .room .list .image img { | |
| width: 20px; | |
| height: 20px; | |
| vertical-align: middle; | |
| } | |
| .ui.chatroom .room .list p { | |
| display: table-cell; | |
| vertical-align: middle; | |
| padding-left: 7px; | |
| padding-right: 14px; | |
| font-size: 11px; | |
| line-height: 1.2; | |
| font-weight: bold; | |
| } | |
| .ui.chatroom .room .list a:hover { | |
| opacity: 0.8; | |
| } | |
| /* User List Loading */ | |
| .ui.chatroom.loading .loader { | |
| display: block; | |
| } | |
| /* Chat Room Talk Input */ | |
| .ui.chatroom .talk { | |
| border: 1px solid rgba(0, 0, 0, 0.1); | |
| padding: 5px 0px 0px; | |
| background-color: #EEEEEE; | |
| -webkit-border-radius: 0px 0px 5px 5px; | |
| -moz-border-radius: 0px 0px 5px 5px; | |
| border-radius: 0px 0px 5px 5px; | |
| } | |
| .ui.chatroom .talk .avatar, | |
| .ui.chatroom .talk input, | |
| .ui.chatroom .talk .button { | |
| float: left; | |
| } | |
| .ui.chatroom .talk .avatar img { | |
| display: block; | |
| width: 30px; | |
| height: 30px; | |
| margin-right: 4px; | |
| border-radius: 500rem; | |
| } | |
| .ui.chatroom .talk input { | |
| border: 1px solid #CCCCCC; | |
| margin: 0px; | |
| width: 196px; | |
| height: 14px; | |
| padding: 8px 5px; | |
| font-size: 12px; | |
| color: #555555; | |
| } | |
| .ui.chatroom .talk input.focus { | |
| border: 1px solid #AAAAAA; | |
| } | |
| .ui.chatroom .send { | |
| width: 80px; | |
| height: 32px; | |
| margin-left: -1px; | |
| padding: 4px 12px; | |
| font-size: 12px; | |
| line-height: 23px; | |
| -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; | |
| -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; | |
| box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; | |
| border-radius: 0 5px 5px 0; | |
| } | |
| .ui.chatroom .talk .log-in.button { | |
| display: block; | |
| float: none; | |
| margin-top: -6px; | |
| height: 22px; | |
| border-radius: 0px 0px 4px 4px; | |
| } | |
| .ui.chatroom .talk .log-in.button i { | |
| vertical-align: text-top; | |
| } | |
| /* Quirky Flags */ | |
| .ui.chatroom .log .team.flag { | |
| width: 18px; | |
| } | |
| /* Chat room Loaded */ | |
| .ui.chatroom.loading .loader { | |
| display: block; | |
| } | |
| /* Standard Size */ | |
| .ui.chatroom { | |
| width: 330px; | |
| height: 370px; | |
| } | |
| .ui.chatroom .room .container { | |
| width: 3000px; | |
| } | |
| .ui.chatroom .log { | |
| width: 314px; | |
| height: 278px; | |
| padding: 4px 7px; | |
| } | |
| .ui.chatroom .room .list { | |
| width: 124px; | |
| height: 278px; | |
| padding: 4px 0px; | |
| } | |
| .ui.chatroom .room .list .user { | |
| width: 110px; | |
| } | |
| .ui.chatroom .talk { | |
| height: 40px; | |
| } | |
| /* | |
| * # Semantic - Checkbox | |
| * http://github.com/jlukic/semantic-ui/ | |
| * | |
| * | |
| * Copyright 2013 Contributors | |
| * Released under the MIT license | |
| * http://opensource.org/licenses/MIT | |
| * | |
| */ | |
| /******************************* | |
| Checkbox | |
| *******************************/ | |
| /*-------------- | |
| Standard | |
| ---------------*/ | |
| /*--- Content ---*/ | |
| .ui.checkbox { | |
| position: relative; | |
| display: inline-block; | |
| min-width: 1em; | |
| height: 1.25em; | |
| line-height: 1em; | |
| outline: none; | |
| vertical-align: middle; | |
| } | |
| .ui.checkbox input { | |
| position: absolute; | |
| top: 0px; | |
| left: 0px; | |
| opacity: 0; | |
| outline: none; | |
| } | |
| /*--- Box ---*/ | |
| .ui.checkbox .box, | |
| .ui.checkbox label { | |
| cursor: pointer; | |
| padding-left: 2em; | |
| outline: none; | |
| } | |
| .ui.checkbox .box:before, | |
| .ui.checkbox label:before { | |
| position: absolute; | |
| top: 0em; | |
| line-height: 1; | |
| width: 1em; | |
| height: 1em; | |
| left: 0em; | |
| content: ''; | |
| border-radius: 4px; | |
| background: #FFFFFF; | |
| -webkit-transition: background-color 0.3s ease, box-shadow 0.3s ease; | |
| -moz-transition: background-color 0.3s ease, box-shadow 0.3s ease; | |
| -o-transition: background-color 0.3s ease, box-shadow 0.3s ease; | |
| -ms-transition: background-color 0.3s ease, box-shadow 0.3s ease; | |
| transition: background-color 0.3s ease, box-shadow 0.3s ease; | |
| -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); | |
| -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); | |
| box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); | |
| } | |
| /*--- Checkbox ---*/ | |
| .ui.checkbox .box:after, | |
| .ui.checkbox label:after { | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; | |
| filter: alpha(opacity=0); | |
| opacity: 0; | |
| content: ''; | |
| position: absolute; | |
| background: transparent; | |
| border: 0.2em solid #333333; | |
| border-top: none; | |
| border-right: none; | |
| -webkit-transform: rotate(-45deg); | |
| -moz-transform: rotate(-45deg); | |
| -o-transform: rotate(-45deg); | |
| -ms-transform: rotate(-45deg); | |
| transform: rotate(-45deg); | |
| } | |
| .ui.checkbox .box:after, | |
| .ui.checkbox label:after { | |
| top: 0.275em; | |
| left: 0.2em; | |
| width: 0.45em; | |
| height: 0.15em; | |
| } | |
| /*--- Inside Label ---*/ | |
| .ui.checkbox label { | |
| color: rgba(0, 0, 0, 0.6); | |
| -webkit-transition: color 0.2s ease; | |
| -moz-transition: color 0.2s ease; | |
| -o-transition: color 0.2s ease; | |
| -ms-transition: color 0.2s ease; | |
| transition: color 0.2s ease; | |
| } | |
| .ui.checkbox label:hover { | |
| color: rgba(0, 0, 0, 0.8); | |
| } | |
| .ui.checkbox input:focus + label { | |
| color: rgba(0, 0, 0, 0.8); | |
| } | |
| /*--- Outside Label ---*/ | |
| .ui.checkbox + label { | |
| cursor: pointer; | |
| opacity: 0.85; | |
| vertical-align: middle; | |
| } | |
| .ui.checkbox + label:hover { | |
| opacity: 1; | |
| } | |
| /******************************* | |
| States | |
| *******************************/ | |
| /*--- Hover ---*/ | |
| .ui.checkbox .box:hover::before, | |
| .ui.checkbox label:hover::before { | |
| -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); | |
| -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); | |
| box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); | |
| } | |
| /*--- Down ---*/ | |
| .ui.checkbox .box:active::before, | |
| .ui.checkbox label:active::before { | |
| background-color: #F5F5F5; | |
| } | |
| /*--- Focus ---*/ | |
| .ui.checkbox input:focus + .box:before, | |
| .ui.checkbox input:focus + label:before { | |
| -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); | |
| -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); | |
| box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); | |
| } | |
| /*--- Active ---*/ | |
| .ui.checkbox input:checked + .box:after, | |
| .ui.checkbox input:checked + label:after { | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | |
| filter: alpha(opacity=100); | |
| opacity: 1; | |
| } | |
| /*--- Disabled ---*/ | |
| .ui.disabled.checkbox + .box:after, | |
| .ui.checkbox input[disabled] + .box:after, | |
| .ui.disabled.checkbox label, | |
| .ui.checkbox input[disabled] + label { | |
| opacity: 0.4; | |
| color: rgba(0, 0, 0, 0.3); | |
| } | |
| /******************************* | |
| Variations | |
| *******************************/ | |
| /*-------------- | |
| Radio | |
| ---------------*/ | |
| .ui.radio.checkbox .box:before, | |
| .ui.radio.checkbox label:before { | |
| min-width: 1em; | |
| height: 1em; | |
| -webkit-border-radius: 500px; | |
| -moz-border-radius: 500px; | |
| border-radius: 500px; | |
| } | |
| .ui.radio.checkbox .box:after, | |
| .ui.radio.checkbox label:after { | |
| border: none; | |
| top: 0.2em; | |
| left: 0.2em; | |
| width: 0.6em; | |
| height: 0.6em; | |
| background-color: #555555; | |
| transform: none; | |
| -webkit-border-radius: 500px; | |
| -moz-border-radius: 500px; | |
| border-radius: 500px; | |
| } | |
| /*-------------- | |
| Slider | |
| ---------------*/ | |
| .ui.slider.checkbox { | |
| cursor: pointer; | |
| min-width: 3em; | |
| } | |
| /* Line */ | |
| .ui.slider.checkbox:after { | |
| position: absolute; | |
| top: 0.5em; | |
| left: 0em; | |
| content: ''; | |
| width: 3em; | |
| height: 2px; | |
| background-color: rgba(0, 0, 0, 0.1); | |
| } | |
| /* Button */ | |
| .ui.slider.checkbox .box, | |
| .ui.slider.checkbox label { | |
| padding-left: 4em; | |
| } | |
| .ui.slider.checkbox .box:before, | |
| .ui.slider.checkbox label:before { | |
| cursor: pointer; | |
| display: block; | |
| position: absolute; | |
| top: -0.25em; | |
| left: 0em; | |
| z-index: 1; | |
| width: 1.5em; | |
| height: 1.5em; | |
| -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; | |
| -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; | |
| box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; | |
| border-radius: 50rem; | |
| -webkit-transition: left 0.3s ease 0s; | |
| -moz-transition: left 0.3s ease 0s; | |
| -o-transition: left 0.3s ease 0s; | |
| -ms-transition: left 0.3s ease 0s; | |
| transition: left 0.3s ease 0s; | |
| } | |
| /* Button Activation Light */ | |
| .ui.slider.checkbox .box:after, | |
| .ui.slider.checkbox label:after { | |
| opacity: 1; | |
| position: absolute; | |
| content: ''; | |
| top: 0.15em; | |
| left: 0em; | |
| z-index: 2; | |
| margin-left: 0.375em; | |
| border: none; | |
| width: 0.75em; | |
| height: 0.75em; | |
| border-radius: 50rem; | |
| transform: none; | |
| -webkit-transition: background 0.3s ease 0s, | |
| left 0.3s ease 0s | |
| ; | |
| -moz-transition: background 0.3s ease 0s, | |
| left 0.3s ease 0s | |
| ; | |
| -o-transition: background 0.3s ease 0s, | |
| left 0.3s ease 0s | |
| ; | |
| -ms-transition: background 0.3s ease 0s, | |
| left 0.3s ease 0s | |
| ; | |
| transition: background 0.3s ease 0s, | |
| left 0.3s ease 0s | |
| ; | |
| } | |
| /* Selected Slider Toggle */ | |
| .ui.slider.checkbox input:checked + .box:before, | |
| .ui.slider.checkbox input:checked + label:before, | |
| .ui.slider.checkbox input:checked + .box:after, | |
| .ui.slider.checkbox input:checked + label:after { | |
| left: 1.75em; | |
| } | |
| /* Off Color */ | |
| .ui.slider.checkbox .box:after, | |
| .ui.slider.checkbox label:after { | |
| background-color: #D95C5C; | |
| } | |
| /* On Color */ | |
| .ui.slider.checkbox input:checked + .box:after, | |
| .ui.slider.checkbox input:checked + label:after { | |
| background-color: #89B84C; | |
| } | |
| /*-------------- | |
| Toggle | |
| ---------------*/ | |
| .ui.toggle.checkbox { | |
| cursor: pointer; | |
| } | |
| .ui.toggle.checkbox .box, | |
| .ui.toggle.checkbox label { | |
| padding-left: 4em; | |
| } | |
| /* Switch */ | |
| .ui.toggle.checkbox .box:before, | |
| .ui.toggle.checkbox label:before { | |
| cursor: pointer; | |
| display: block; | |
| position: absolute; | |
| content: ''; | |
| top: -0.25em; | |
| left: 0em; | |
| z-index: 1; | |
| background-color: #FFFFFF; | |
| width: 3em; | |
| height: 1.5em; | |
| -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; | |
| -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; | |
| box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; | |
| border-radius: 50rem; | |
| } | |
| /* Activation Light */ | |
| .ui.toggle.checkbox .box:after, | |
| .ui.toggle.checkbox label:after { | |
| opacity: 1; | |
| background-color: transparent; | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| content: ''; | |
| position: absolute; | |
| top: 0.15em; | |
| left: 0.5em; | |
| z-index: 2; | |
| border: none; | |
| width: 0.75em; | |
| height: 0.75em; | |
| background-color: #D95C5C; | |
| border-radius: 50rem; | |
| -webkit-transition: background 0.3s ease 0s, | |
| left 0.3s ease 0s | |
| ; | |
| -moz-transition: background 0.3s ease 0s, | |
| left 0.3s ease 0s | |
| ; | |
| -o-transition: background 0.3s ease 0s, | |
| left 0.3s ease 0s | |
| ; | |
| -ms-transition: background 0.3s ease 0s, | |
| left 0.3s ease 0s | |
| ; | |
| transition: background 0.3s ease 0s, | |
| left 0.3s ease 0s | |
| ; | |
| } | |
| /* Active */ | |
| .ui.toggle.checkbox:active .box:before, | |
| .ui.toggle.checkbox:active label:before { | |
| background-color: #F5F5F5; | |
| } | |
| /* Active */ | |
| .ui.toggle.checkbox input:checked + .box:after, | |
| .ui.toggle.checkbox input:checked + label:after { | |
| left: 1.75em; | |
| background-color: #89B84C; | |
| } | |
| /*-------------- | |
| Sizes | |
| ---------------*/ | |
| .ui.checkbox { | |
| font-size: 1em; | |
| } | |
| .ui.large.checkbox { | |
| font-size: 1.25em; | |
| } | |
| .ui.huge.checkbox { | |
| font-size: 1.5em; | |
| } | |
| /* | |
| * # Semantic - Dimmer | |
| * http://github.com/jlukic/semantic-ui/ | |
| * | |
| * | |
| * Copyright 2013 Contributors | |
| * Released under the MIT license | |
| * http://opensource.org/licenses/MIT | |
| * | |
| */ | |
| /******************************* | |
| Dimmer | |
| *******************************/ | |
| .ui.dimmable { | |
| position: relative; | |
| } | |
| .ui.dimmer { | |
| display: none; | |
| position: absolute; | |
| top: 0em !important; | |
| left: 0em !important; | |
| width: 0%; | |
| height: 0%; | |
| text-align: center; | |
| vertical-align: middle; | |
| background-color: rgba(0, 0, 0, 0.85); | |
| opacity: 0; | |
| line-height: 1; | |
| -webkit-animation-fill-mode: both; | |
| -moz-animation-fill-mode: both; | |
| -o-animation-fill-mode: both; | |
| -ms-animation-fill-mode: both; | |
| animation-fill-mode: both; | |
| -webkit-animation-duration: 0.5s; | |
| -moz-animation-duration: 0.5s; | |
| -o-animation-duration: 0.5s; | |
| -ms-animation-duration: 0.5s; | |
| animation-duration: 0.5s; | |
| -webkit-transition: background-color 0.5s linear; | |
| -moz-transition: background-color 0.5s linear; | |
| -o-transition: background-color 0.5s linear; | |
| -ms-transition: background-color 0.5s linear; | |
| transition: background-color 0.5s linear; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| z-index: 1000; | |
| } | |
| /* Dimmer Content */.ui.dimmer > .content { | |
| width: 100%; | |
| height: 100%; | |
| display: table; | |
| -webkit-user-select: text; | |
| -moz-user-select: text; | |
| -ms-user-select: text; | |
| user-select: text; | |
| } | |
| .ui.dimmer > .content > div { | |
| display: table-cell; | |
| vertical-align: middle; | |
| color: #FFFFFF; | |
| } | |
| /* Loose Coupling */ | |
| .ui.segment > .ui.dimmer { | |
| -webkit-border-radius: 5px; | |
| -moz-border-radius: 5px; | |
| border-radius: 5px; | |
| } | |
| .ui.horizontal.segment > .ui.dimmer, | |
| .ui.vertical.segment > .ui.dimmer { | |
| -webkit-border-radius: 5px; | |
| -moz-border-radius: 5px; | |
| border-radius: 5px; | |
| } | |
| /******************************* | |
| States | |
| *******************************/ | |
| .ui.dimmed.dimmable:not(body) { | |
| overflow: hidden; | |
| } | |
| .ui.dimmed.dimmable > .ui.dimmer, | |
| .ui.active.dimmer { | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| opacity: 1; | |
| } | |
| .ui.disabled.dimmer { | |
| width: 0em !important; | |
| height: 0em !important; | |
| } | |
| /******************************* | |
| Variations | |
| *******************************/ | |
| /*-------------- | |
| Page | |
| ---------------*/ | |
| .ui.page.dimmer { | |
| position: fixed; | |
| -webkit-transform-style: preserve-3d; | |
| -moz-transform-style: preserve-3d; | |
| -ms-transform-style: preserve-3d; | |
| transform-style: preserve-3d; | |
| -webkit-perspective: 2000px; | |
| -moz-perspective: 2000px; | |
| perspective: 2000px; | |
| -webkit-transform-origin: center center; | |
| -moz-transform-origin: center center; | |
| -o-transform-origin: center center; | |
| -ms-transform-origin: center center; | |
| transform-origin: center center; | |
| } | |
| .ui.scrolling.page.dimmer { | |
| position: absolute; | |
| } | |
| /* | |
| body.ui.dimmed.dimmable > :not(.dimmer){ | |
| -webkit-filter: ~"blur(15px) grayscale(0.7)"; | |
| -moz-filter: ~"blur(15px) grayscale(0.7)"; | |
| } | |
| */ | |
| /*-------------- | |
| Aligned | |
| ---------------*/ | |
| .ui.dimmer > .top.aligned.content > * { | |
| vertical-align: top; | |
| } | |
| .ui.dimmer > .bottom.aligned.content > * { | |
| vertical-align: bottom; | |
| } | |
| /*-------------- | |
| Inverted | |
| ---------------*/ | |
| .ui.inverted.dimmer { | |
| background-color: rgba(255, 255, 255, 0.85); | |
| } | |
| .ui.inverted.dimmer > .content > * { | |
| color: rgba(0, 0, 0, 0.8); | |
| } | |
| /*-------------- | |
| Simple | |
| ---------------*/ | |
| /* Displays without javascript */ | |
| .ui.simple.dimmer { | |
| display: block; | |
| overflow: hidden; | |
| opacity: 1; | |
| z-index: -100; | |
| background-color: rgba(0, 0, 0, 0); | |
| } | |
| .ui.dimmed.dimmable > .ui.simple.dimmer { | |
| overflow: visible; | |
| opacity: 1; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0, 0, 0, 0.85); | |
| z-index: 1; | |
| } | |
| .ui.simple.inverted.dimmer { | |
| background-color: rgba(255, 255, 255, 0); | |
| } | |
| .ui.dimmed.dimmable > .ui.simple.inverted.dimmer { | |
| background-color: rgba(255, 255, 255, 0.85); | |
| } | |
| /* | |
| * # Semantic - Dropdown | |
| * http://github.com/jlukic/semantic-ui/ | |
| * | |
| * | |
| * Copyright 2013 Contributors | |
| * Released under the MIT license | |
| * http://opensource.org/licenses/MIT | |
| * | |
| */ | |
| /******************************* | |
| Dropdown | |
| *******************************/ | |
| .ui.dropdown { | |
| position: relative; | |
| display: inline-block; | |
| line-height: 1; | |
| -webkit-transition: border-radius 0.1s ease, width 0.2s ease; | |
| -moz-transition: border-radius 0.1s ease, width 0.2s ease; | |
| -o-transition: border-radius 0.1s ease, width 0.2s ease; | |
| -ms-transition: border-radius 0.1s ease, width 0.2s ease; | |
| transition: border-radius 0.1s ease, width 0.2s ease; | |
| -webkit-tap-highlight-color: rgba(0, 0, 0, 0); | |
| -moz-tap-highlight-color: rgba(0, 0, 0, 0); | |
| tap-highlight-color: rgba(0, 0, 0, 0); | |
| } | |
| /******************************* | |
| Content | |
| *******************************/ | |
| /*-------------- | |
| Menu | |
| ---------------*/ | |
| .ui.dropdown .menu { | |
| position: absolute; | |
| display: none; | |
| top: 100%; | |
| margin: 0em; | |
| background-color: #FFFFFF; | |
| min-width: 100%; | |
| white-space: nowrap; | |
| font-size: 0.875em; | |
| text-shadow: none; | |
| -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); | |
| -moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); | |
| box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); | |
| -moz-border-radius: 0px 0px 0.325em 0.325em; | |
| -webkit-border-radius: 0px 0px 0.325em 0.325em; | |
| border-radius: 0px 0px 0.325em 0.325em; | |
| -webkit-transition: opacity 0.2s ease; | |
| -moz-transition: opacity 0.2s ease; | |
| -o-transition: opacity 0.2s ease; | |
| -ms-transition: opacity 0.2s ease; | |
| transition: opacity 0.2s ease; | |
| z-index: 11; | |
| } | |
| /*-------------- | |
| Icon | |
| ---------------*/ | |
| .ui.dropdown > .dropdown.icon { | |
| width: auto; | |
| margin: 0em 0em 0em 1em; | |
| } | |
| .ui.dropdown > .dropdown.icon:before { | |
| content: "\f0d7"; | |
| } | |
| .ui.dropdown .menu .item .dropdown.icon { | |
| width: auto; | |
| float: right; | |
| margin: 0em 0em 0em 0.5em; | |
| } | |
| .ui.dropdown .menu .item .dropdown.icon:before { | |
| content: "\f0da"; | |
| } | |
| /*-------------- | |
| Text | |
| ---------------*/ | |
| .ui.dropdown > .text { | |
| cursor: pointer; | |
| display: inline-block; | |
| -webkit-transition: color 0.2s ease; | |
| -moz-transition: color 0.2s ease; | |
| -o-transition: color 0.2s ease; | |
| -ms-transition: color 0.2s ease; | |
| transition: color 0.2s ease; | |
| } | |
| /* Flyout Direction */ | |
| .ui.dropdown .menu { | |
| left: 0px; | |
| } | |
| /*-------------- | |
| Sub Menu | |
| ---------------*/ | |
| .ui.dropdown .menu .menu { | |
| top: 0% !important; | |
| left: 100% !important; | |
| margin: 0em !important; | |
| border-radius: 0 0.325em 0.325em 0em !important; | |
| } | |
| .ui.dropdown .menu .menu:after { | |
| display: none; | |
| } | |
| .ui.dropdown .menu .item { | |
| cursor: pointer; | |
| border: none; | |
| border-top: 1px solid rgba(0, 0, 0, 0.05); | |
| height: auto; | |
| font-size: 0.875em; | |
| display: block; | |
| color: rgba(0, 0, 0, 0.75); | |
| padding: 0.85em 1em !important; | |
| font-size: 0.875rem; | |
| text-transform: none; | |
| font-weight: normal; | |
| text-align: left; | |
| -webkit-touch-callout: none; | |
| } | |
| .ui.dropdown .menu .item:before { | |
| display: none; | |
| } | |
| .ui.dropdown .menu .item .icon { | |
| margin-right: 0.75em; | |
| } | |
| .ui.dropdown .menu .item:first-child { | |
| border-top: none; | |
| } | |
| /******************************* | |
| Coupling | |
| *******************************/ | |
| /* Opposite on last menu on right */ | |
| .ui.menu .right.menu .dropdown:last-child .menu, | |
| .ui.buttons > .ui.dropdown:last-child .menu { | |
| left: auto; | |
| right: 0px; | |
| } | |
| .ui.vertical.menu .dropdown.item > .dropdown.icon { | |
| content: "\f0da"; | |
| } | |
| .ui.dropdown.icon.button > .dropdown.icon { | |
| margin: 0em; | |
| } | |
| /******************************* | |
| States | |
| *******************************/ | |
| /* Dropdown Visible */ | |
| .ui.visible.dropdown { | |
| border-bottom-left-radius: 0em !important; | |
| border-bottom-right-radius: 0em !important; | |
| } | |
| .ui.visible.dropdown > .menu { | |
| display: block; | |
| } | |
| /* Menu Item Hover */ | |
| .ui.dropdown .menu .item:hover { | |
| background-color: rgba(0, 0, 0, 0.02); | |
| z-index: 12; | |
| } | |
| /* Menu Item Active */ | |
| .ui.dropdown .menu .active.item { | |
| background-color: rgba(0, 0, 0, 0.06) !important; | |
| border-left: none; | |
| border-color: transparent !important; | |
| -webkit-box-shadow: none; | |
| -moz-shadow: none; | |
| box-shadow: none; | |
| z-index: 12; | |
| } | |
| /* Default Text */ | |
| .ui.dropdown > .default.text, | |
| .ui.default.dropdown > .text { | |
| color: rgba(0, 0, 0, 0.5); | |
| } | |
| .ui.dropdown:hover > .default.text, | |
| .ui.default.dropdown:hover > .text { | |
| color: rgba(0, 0, 0, 0.8); | |
| } | |
| /******************************* | |
| Variations | |
| *******************************/ | |
| /*-------------- | |
| Simple | |
| ---------------*/ | |
| /* Displays without javascript */ | |
| .ui.simple.dropdown .menu:before, | |
| .ui.simple.dropdown .menu:after { | |
| display: none; | |
| } | |
| .ui.simple.dropdown .menu { | |
| display: block; | |
| overflow: hidden; | |
| top: -9999px !important; | |
| position: absolute; | |
| opacity: 0; | |
| width: 0; | |
| height: 0; | |
| -webkit-transition: opacity 0.2s ease-out; | |
| -moz-transition: opacity 0.2s ease-out; | |
| -o-transition: opacity 0.2s ease-out; | |
| -ms-transition: opacity 0.2s ease-out; | |
| transition: opacity 0.2s ease-out; | |
| } | |
| .ui.simple.active.dropdown, | |
| .ui.simple.dropdown:hover { | |
| border-bottom-left-radius: 0em !important; | |
| border-bottom-right-radius: 0em !important; | |
| } | |
| .ui.simple.active.dropdown > .menu, | |
| .ui.simple.dropdown:hover > .menu { | |
| overflow: visible; | |
| width: auto; | |
| height: auto; | |
| top: 100% !important; | |
| opacity: 1; | |
| } | |
| .ui.simple.dropdown > .menu .item:active > .menu, | |
| .ui.simple.dropdown:hover > .menu .item:hover > .menu { | |
| overflow: visible; | |
| width: auto; | |
| height: auto; | |
| top: 0% !important; | |
| left: 100% !important; | |
| opacity: 1; | |
| } | |
| .ui.simple.disabled.dropdown:hover .menu { | |
| display: none; | |
| height: 0px; | |
| width: 0px; | |
| overflow: hidden; | |
| } | |
| /*-------------- | |
| Selection | |
| ---------------*/ | |
| /* Displays like a select box */ | |
| .ui.selection.dropdown { | |
| cursor: pointer; | |
| display: inline-block; | |
| word-wrap: break-word; | |
| white-space: normal; | |
| background-color: #FFFFFF; | |
| padding: 0.5em 1em; | |
| line-height: 1.33; | |
| color: rgba(0, 0, 0, 0.8); | |
| -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); | |
| -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); | |
| box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); | |
| -webkit-border-radius: 0.3125em !important; | |
| -moz-border-radius: 0.3125em !important; | |
| border-radius: 0.3125em !important; | |
| } | |
| .ui.selection.dropdown select { | |
| display: none; | |
| } | |
| .ui.selection.dropdown > .dropdown.icon { | |
| opacity: 0.7; | |
| margin: 0.2em 0em 0.2em 1.25em; | |
| -webkit-transition: opacity 0.2s ease-out; | |
| -moz-transition: opacity 0.2s ease-out; | |
| -o-transition: opacity 0.2s ease-out; | |
| -ms-transition: opacity 0.2s ease-out; | |
| transition: opacity 0.2s ease-out; | |
| } | |
| .ui.selection.dropdown, | |
| .ui.selection.dropdown .menu { | |
| top: 100%; | |
| -webkit-transition: box-shadow 0.2s ease-out; | |
| -moz-transition: box-shadow 0.2s ease-out; | |
| -o-transition: box-shadow 0.2s ease-out; | |
| -ms-transition: box-shadow 0.2s ease-out; | |
| transition: box-shadow 0.2s ease-out; | |
| } | |
| .ui.selection.dropdown .menu { | |
| max-height: 312px; | |
| overflow-x: hidden; | |
| overflow-y: auto; | |
| -webkit-box-shadow: 0px 1px 0px 1px #E0E0E0; | |
| -moz-box-shadow: 0px 1px 0px 1px #E0E0E0; | |
| box-shadow: 0px 1px 0px 1px #E0E0E0; | |
| -moz-border-radius: 0px 0px 0.325em 0.325em; | |
| -webkit-border-radius: 0px 0px 0.325em 0.325em; | |
| border-radius: 0px 0px 0.325em 0.325em; | |
| } | |
| .ui.selection.dropdown .menu:after, | |
| .ui.selection.dropdown .menu:before { | |
| display: none; | |
| } | |
| .ui.selection.dropdown .menu img { | |
| height: 2.5em; | |
| display: inline-block; | |
| vertical-align: middle; | |
| margin-right: 0.5em; | |
| } | |
| /* Hover */ | |
| .ui.selection.dropdown:hover { | |
| -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); | |
| -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); | |
| box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); | |
| } | |
| .ui.selection.dropdown:hover .menu { | |
| -webkit-box-shadow: 0px 1px 0px 1px #D3D3D3; | |
| -moz-box-shadow: 0px 1px 0px 1px #D3D3D3; | |
| box-shadow: 0px 1px 0px 1px #D3D3D3; | |
| } | |
| .ui.selection.dropdown:hover > .dropdown.icon { | |
| opacity: 1; | |
| } | |
| /* Active */ | |
| .ui.active.selection.dropdown { | |
| -webkit-border-radius: 0.3125em 0.3125em 0em 0em !important; | |
| -moz-border-radius: 0.3125em 0.3125em 0em 0em !important; | |
| border-radius: 0.3125em 0.3125em 0em 0em !important; | |
| } | |
| .ui.active.selection.dropdown > .dropdown.icon { | |
| opacity: 1; | |
| } | |
| /*-------------- | |
| Fluid | |
| ---------------*/ | |
| .ui.fluid.dropdown { | |
| display: block; | |
| } | |
| .ui.fluid.dropdown > .dropdown.icon { | |
| float: right; | |
| } | |
| /*-------------- | |
| Inline | |
| ---------------*/ | |
| .ui.inline.dropdown { | |
| cursor: pointer; | |
| display: inline-block; | |
| color: inherit; | |
| } | |
| .ui.inline.dropdown .dropdown.icon { | |
| margin: 0em 0.5em 0em 0.25em; | |
| } | |
| .ui.inline.dropdown .text { | |
| font-weight: bold; | |
| } | |
| .ui.inline.dropdown .menu { | |
| cursor: auto; | |
| margin-top: 0.25em; | |
| -webkit-border-radius: 0.325em; | |
| -moz-border-radius: 0.325em; | |
| border-radius: 0.325em; | |
| } | |
| /*-------------- | |
| Floating | |
| ---------------*/ | |
| .ui.floating.dropdown .menu { | |
| left: 0; | |
| right: auto; | |
| margin-top: 0.5em; | |
| -webkit-border-radius: 0.325em; | |
| -moz-border-radius: 0.325em; | |
| border-radius: 0.325em; | |
| } | |
| /*-------------- | |
| Pointing | |
| ---------------*/ | |
| .ui.pointing.dropdown .menu { | |
| top: 100%; | |
| margin-top: 0.75em; | |
| -moz-border-radius: 0.325em; | |
| -webkit-border-radius: 0.325em; | |
| border-radius: 0.325em; | |
| } | |
| .ui.pointing.dropdown .menu:after { | |
| display: block; | |
| position: absolute; | |
| pointer-events: none; | |
| content: " "; | |
| visibility: visible; | |
| width: 0.5em; | |
| height: 0.5em; | |
| -moz-box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.05); | |
| -webkit-box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.05); | |
| box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.05); | |
| background-image: none; | |
| background-color: #FFFFFF; | |
| -webkit-transform: rotate(45deg); | |
| -moz-transform: rotate(45deg); | |
| transform: rotate(45deg); | |
| z-index: 2; | |
| } | |
| .ui.pointing.dropdown .menu .active.item:first-child { | |
| background: transparent -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.03)); | |
| background: transparent -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.03)); | |
| background: transparent -o-linear-gradient(transparent, rgba(0, 0, 0, 0.03)); | |
| background: transparent -ms-linear-gradient(transparent, rgba(0, 0, 0, 0.03)); | |
| background: transparent linear-gradient(transparent, rgba(0, 0, 0, 0.03)); | |
| } | |
| /* Directions */ | |
| .ui.pointing.dropdown .menu:after { | |
| top: -0.25em; | |
| left: 50%; | |
| margin: 0em 0em 0em -0.25em; | |
| } | |
| .ui.top.left.pointing.dropdown .menu { | |
| top: 100%; | |
| bottom: auto; | |
| left: 0%; | |
| right: auto; | |
| margin: 0.75em 0em 0em; | |
| } | |
| .ui.top.left.pointing.dropdown .menu:after { | |
| top: -0.25em; | |
| left: 1.25em; | |
| right: auto; | |
| margin: 0em; | |
| -webkit-transform: rotate(45deg); | |
| -moz-transform: rotate(45deg); | |
| transform: rotate(45deg); | |
| } | |
| .ui.top.right.pointing.dropdown .menu { | |
| top: 100%; | |
| bottom: auto; | |
| right: 0%; | |
| left: auto; | |
| margin: 0.75em 0em 0em; | |
| } | |
| .ui.top.right.pointing.dropdown .menu:after { | |
| top: -0.25em; | |
| left: auto; | |
| right: 1.25em; | |
| margin: 0em; | |
| -webkit-transform: rotate(45deg); | |
| -moz-transform: rotate(45deg); | |
| transform: rotate(45deg); | |
| } | |
| .ui.left.pointing.dropdown .menu { | |
| top: 0%; | |
| left: 100%; | |
| right: auto; | |
| margin: 0em 0em 0em 0.75em; | |
| } | |
| .ui.left.pointing.dropdown .menu:after { | |
| top: 1em; | |
| left: -0.25em; | |
| margin: 0em 0em 0em 0em; | |
| -webkit-transform: rotate(-45deg); | |
| -moz-transform: rotate(-45deg); | |
| transform: rotate(-45deg); | |
| } | |
| .ui.right.pointing.dropdown .menu { | |
| top: 0%; | |
| left: auto; | |
| right: 100%; | |
| margin: 0em 0.75em 0em 0em; | |
| } | |
| .ui.right.pointing.dropdown .menu:after { | |
| top: 1em; | |
| left: auto; | |
| right: -0.25em; | |
| margin: 0em 0em 0em 0em; | |
| -webkit-transform: rotate(135deg); | |
| -moz-transform: rotate(135deg); | |
| transform: rotate(135deg); | |
| } | |
| /* | |
| * # Semantic - Modal | |
| * http://github.com/jlukic/semantic-ui/ | |
| * | |
| * | |
| * Copyright 2013 Contributors | |
| * Released under the MIT license | |
| * http://opensource.org/licenses/MIT | |
| * | |
| */ | |
| /******************************* | |
| Modal | |
| *******************************/ | |
| .ui.modal { | |
| display: none; | |
| position: fixed; | |
| z-index: 1001; | |
| top: 50%; | |
| left: 50%; | |
| text-align: left; | |
| width: 90%; | |
| margin-left: -45%; | |
| background-color: #FFFFFF; | |
| border: 1px solid #DDDDDD; | |
| -webkit-border-radius: 5px; | |
| -moz-border-radius: 5px; | |
| border-radius: 5px; | |
| } | |
| /******************************* | |
| Content | |
| *******************************/ | |
| /*-------------- | |
| Close | |
| ---------------*/ | |
| .ui.modal > .close { | |
| cursor: pointer; | |
| position: absolute; | |
| opacity: 0.8; | |
| font-size: 1.25em; | |
| top: -1.75em; | |
| right: -1.75em; | |
| color: #FFFFFF; | |
| } | |
| .ui.modal > .close:hover { | |
| opacity: 1; | |
| } | |
| /*-------------- | |
| Header | |
| ---------------*/ | |
| .ui.modal > .header { | |
| margin: 0em; | |
| padding: 1.5rem 2rem; | |
| font-size: 1.6em; | |
| font-weight: bold; | |
| -webkit-border-radius: 0.325em 0.325em 0px 0px; | |
| -moz-border-radius: 0.325em 0.325em 0px 0px; | |
| border-radius: 0.325em 0.325em 0px 0px; | |
| } | |
| /*-------------- | |
| Content | |
| ---------------*/ | |
| .ui.modal > .content { | |
| display: table; | |
| width: 100%; | |
| position: relative; | |
| padding: 2em; | |
| background-color: #F4F4F4; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| .ui.modal > .content > .left { | |
| display: table-cell; | |
| padding-right: 1.5%; | |
| min-width: 25%; | |
| } | |
| .ui.modal > .content > .right { | |
| display: table-cell; | |
| padding-left: 1.5%; | |
| vertical-align: top; | |
| } | |
| .ui.modal > .content > .left > .icon { | |
| font-size: 8em; | |
| margin: 0em; | |
| } | |
| .ui.modal > .content p { | |
| line-height: 1.6; | |
| } | |
| /*-------------- | |
| Actions | |
| ---------------*/ | |
| .ui.modal .actions { | |
| padding: 1rem 2rem; | |
| text-align: right; | |
| } | |
| .ui.modal .actions > .button { | |
| margin-left: 0.75em; | |
| } | |
| /*------------------- | |
| Sizing | |
| --------------------*/ | |
| /* Mobile Only */ | |
| @media only screen and (max-width: 768px) { | |
| .ui.modal .content .left { | |
| display: block; | |
| padding: 0em 0em 0em 1em; | |
| } | |
| .ui.modal .content .right { | |
| display: block; | |
| padding: 1em 0em 0em 0em; | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| } | |
| /* Tablet and Mobile */ | |
| @media only screen and (max-width: 998px) { | |
| .ui.modal { | |
| width: 92%; | |
| margin-left: -46%; | |
| } | |
| .ui.modal > .close { | |
| color: rgba(0, 0, 0, 0.8); | |
| top: 1.5rem; | |
| right: 1rem; | |
| } | |
| } | |
| /* Computer / Responsive */ | |
| @media only screen and (min-width: 998px) { | |
| .ui.modal { | |
| width: 74%; | |
| margin-left: -37%; | |
| } | |
| } | |
| @media only screen and (min-width: 1500px) { | |
| .ui.modal { | |
| width: 56%; | |
| margin-left: -28%; | |
| } | |
| } | |
| @media only screen and (min-width: 1750px) { | |
| .ui.modal { | |
| width: 42%; | |
| margin-left: -21%; | |
| } | |
| } | |
| @media only screen and (min-width: 2000px) { | |
| .ui.modal { | |
| width: 36%; | |
| margin-left: -18%; | |
| } | |
| } | |
| /******************************* | |
| Types | |
| *******************************/ | |
| .ui.basic.modal { | |
| background-color: transparent; | |
| border: none; | |
| color: #FFFFFF; | |
| } | |
| .ui.basic.modal > .close { | |
| top: 1.5rem; | |
| right: 1rem; | |
| } | |
| .ui.basic.modal .content { | |
| background-color: transparent; | |
| } | |
| /******************************* | |
| Variations | |
| *******************************/ | |
| /* A modal that cannot fit on the page */ | |
| .ui.modal.scrolling { | |
| position: absolute; | |
| margin-top: 10px; | |
| } | |
| /******************************* | |
| States | |
| *******************************/ | |
| .ui.active.modal { | |
| display: block; | |
| } | |
| /*-------------- | |
| Size | |
| ---------------*/ | |
| /* Small */ | |
| .ui.small.modal > .header { | |
| font-size: 1.3em; | |
| } | |
| @media only screen and (min-width: 998px) { | |
| .ui.small.modal { | |
| width: 58%; | |
| margin-left: -29%; | |
| } | |
| } | |
| @media only screen and (min-width: 1500px) { | |
| .ui.small.modal { | |
| width: 40%; | |
| margin-left: -20%; | |
| } | |
| } | |
| @media only screen and (min-width: 1750px) { | |
| .ui.small.modal { | |
| width: 26%; | |
| margin-left: -13%; | |
| } | |
| } | |
| @media only screen and (min-width: 2000px) { | |
| .ui.small.modal { | |
| width: 20%; | |
| margin-left: -10%; | |
| } | |
| } | |
| /* Large */ | |
| @media only screen and (min-width: 998px) { | |
| .ui.large.modal { | |
| width: 74%; | |
| margin-left: -37%; | |
| } | |
| } | |
| @media only screen and (min-width: 1500px) { | |
| .ui.large.modal { | |
| width: 64%; | |
| margin-left: -32%; | |
| } | |
| } | |
| @media only screen and (min-width: 1750px) { | |
| .ui.large.modal { | |
| width: 54%; | |
| margin-left: -27%; | |
| } | |
| } | |
| @media only screen and (min-width: 2000px) { | |
| .ui.large.modal { | |
| width: 44%; | |
| margin-left: -22%; | |
| } | |
| } | |
| /* | |
| * # Semantic - Nag | |
| * http://github.com/jlukic/semantic-ui/ | |
| * | |
| * | |
| * Copyright 2013 Contributors | |
| * Released under the MIT license | |
| * http://opensource.org/licenses/MIT | |
| * | |
| */ | |
| /******************************* | |
| Nag | |
| *******************************/ | |
| .ui.nag { | |
| display: none; | |
| opacity: 0.95; | |
| position: relative; | |
| top: 0px; | |
| left: 0%; | |
| z-index: 101; | |
| min-height: 0; | |
| width: 100%; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| margin: 0em; | |
| line-height: 3em; | |
| padding: 0em 1em; | |
| background-color: #555555; | |
| -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2); | |
| -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2); | |
| box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2); | |
| font-size: 1em; | |
| text-align: center; | |
| color: rgba(255, 255, 255, 0.8); | |
| -webkit-border-radius: 0px 0px 5px 5px; | |
| -moz-border-radius: 0px 0px 5px 5px; | |
| border-radius: 0px 0px 5px 5px; | |
| -webkit-transition: 0.2s background; | |
| -moz-transition: 0.2s background; | |
| -o-transition: 0.2s background; | |
| -ms-transition: 0.2s background; | |
| transition: 0.2s background; | |
| } | |
| a.ui.nag { | |
| cursor: pointer; | |
| } | |
| .ui.nag > .title { | |
| display: inline-block; | |
| margin: 0em 0.5em; | |
| color: #FFFFFF; | |
| } | |
| .ui.nag > .close.icon { | |
| cursor: pointer; | |
| opacity: 0.4; | |
| position: absolute; | |
| top: 50%; | |
| right: 1em; | |
| margin-top: -0.5em; | |
| color: #FFFFFF; | |
| -webkit-transition: 0.1s opacity; | |
| -moz-transition: 0.1s opacity; | |
| -o-transition: 0.1s opacity; | |
| -ms-transition: 0.1s opacity; | |
| transition: 0.1s opacity; | |
| } | |
| /******************************* | |
| States | |
| *******************************/ | |
| /* Hover */ | |
| .ui.nag:hover { | |
| opacity: 1; | |
| } | |
| .ui.nag .close:hover { | |
| opacity: 1; | |
| } | |
| /******************************* | |
| Variations | |
| *******************************/ | |
| /*-------------- | |
| Static | |
| ---------------*/ | |
| .ui.overlay.nag { | |
| position: absolute; | |
| display: block; | |
| } | |
| /*-------------- | |
| Fixed | |
| ---------------*/ | |
| .ui.fixed.nag { | |
| position: fixed; | |
| } | |
| /*-------------- | |
| Bottom | |
| ---------------*/ | |
| .ui.botton.nag { | |
| -webkit-border-radius: 5px 5px 0px 0px; | |
| -moz-border-radius: 5px 5px 0px 0px; | |
| border-radius: 5px 5px 0px 0px; | |
| } | |
| .ui.fixed.bottom.nags, | |
| .ui.fixed.bottom.nag { | |
| top: auto; | |
| bottom: 0px; | |
| } | |
| /*-------------- | |
| White | |
| ---------------*/ | |
| .ui.white.nags .nag, | |
| .ui.white.nag { | |
| background-color: #F1F1F1; | |
| text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8); | |
| color: #ACACAC; | |
| } | |
| .ui.white.nags .nag .close, | |
| .ui.white.nags .nag .title, | |
| .ui.white.nag .close, | |
| .ui.white.nag .title { | |
| color: #333333; | |
| } | |
| /******************************* | |
| Groups | |
| *******************************/ | |
| .ui.nags .nag { | |
| -webkit-border-radius: 0px; | |
| -moz-border-radius: 0px; | |
| border-radius: 0px; | |
| } | |
| /* | |
| * # Semantic - Popup | |
| * http://github.com/jlukic/semantic-ui/ | |
| * | |
| * | |
| * Copyright 2013 Contributors | |
| * Released under the MIT license | |
| * http://opensource.org/licenses/MIT | |
| * | |
| */ | |
| /******************************* | |
| Popup | |
| *******************************/ | |
| .ui.popup { | |
| display: none; | |
| position: absolute; | |
| top: 0px; | |
| right: 0px; | |
| z-index: 900; | |
| border: 1px solid rgba(0, 0, 0, 0.1); | |
| max-width: 250px; | |
| background-color: #FFFFFF; | |
| padding: 0.8em 1.2em; | |
| font-size: 0.875rem; | |
| font-weight: normal; | |
| font-style: normal; | |
| color: rgba(0, 0, 0, 0.7); | |
| -webkit-border-radius: 0.2em; | |
| -moz-border-radius: 0.2em; | |
| border-radius: 0.2em; | |
| -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); | |
| -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); | |
| box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); | |
| } | |
| .ui.popup .header { | |
| padding: 0em 0em 0.5em; | |
| font-size: 1.125em; | |
| line-height: 1.2; | |
| font-weight: bold; | |
| } | |
| .ui.popup:before { | |
| position: absolute; | |
| content: ""; | |
| width: 0.75em; | |
| height: 0.75rem; | |
| background-image: none; | |
| background-color: #FFFFFF; | |
| -webkit-transform: rotate(45deg); | |
| -moz-transform: rotate(45deg); | |
| transform: rotate(45deg); | |
| z-index: 2; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); | |
| -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); | |
| box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); | |
| } | |
| .ui.popup .ui.button { | |
| width: 100%; | |
| } | |
| /******************************* | |
| Types | |
| *******************************/ | |
| /*-------------- | |
| Spacing | |
| ---------------*/ | |
| .ui.popup { | |
| margin: 0em; | |
| } | |
| .ui.popup.bottom { | |
| margin: 0.75em 0em 0em; | |
| } | |
| .ui.popup.top { | |
| margin: 0em 0em 0.75em; | |
| } | |
| .ui.popup.left.center { | |
| margin: 0em 0.75em 0em 0em; | |
| } | |
| .ui.popup.right.center { | |
| margin: 0em 0em 0em 0.75em; | |
| } | |
| .ui.popup.center { | |
| margin-left: -1.25em; | |
| } | |
| /*-------------- | |
| Pointer | |
| ---------------*/ | |
| /*--- Below ---*/ | |
| .ui.bottom.center.popup:before { | |
| margin-left: -0.4em; | |
| top: -0.4em; | |
| left: 50%; | |
| right: auto; | |
| bottom: auto; | |
| -webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); | |
| -moz-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); | |
| box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); | |
| } | |
| .ui.bottom.left.popup { | |
| margin-right: -2em; | |
| } | |
| .ui.bottom.left.popup:before { | |
| top: -0.4em; | |
| right: 1em; | |
| bottom: auto; | |
| left: auto; | |
| margin-left: 0em; | |
| -webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); | |
| -moz-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); | |
| box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); | |
| } | |
| .ui.bottom.right.popup { | |
| margin-left: -2em; | |
| } | |
| .ui.bottom.right.popup:before { | |
| top: -0.4em; | |
| left: 1em; | |
| right: auto; | |
| bottom: auto; | |
| margin-left: 0em; | |
| -webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); | |
| -moz-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); | |
| box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); | |
| } | |
| /*--- Above ---*/ | |
| .ui.top.center.popup:before { | |
| top: auto; | |
| right: auto; | |
| bottom: -0.4em; | |
| left: 50%; | |
| margin-left: -0.4em; | |
| } | |
| .ui.top.left.popup { | |
| margin-right: -2em; | |
| } | |
| .ui.top.left.popup:before { | |
| bottom: -0.4em; | |
| right: 1em; | |
| top: auto; | |
| left: auto; | |
| margin-left: 0em; | |
| } | |
| .ui.top.right.popup { | |
| margin-left: -2em; | |
| } | |
| .ui.top.right.popup:before { | |
| bottom: -0.4em; | |
| left: 1em; | |
| top: auto; | |
| right: auto; | |
| margin-left: 0em; | |
| } | |
| /*--- Left Center ---*/ | |
| .ui.left.center.popup:before { | |
| top: 50%; | |
| right: -0.35em; | |
| bottom: auto; | |
| left: auto; | |
| margin-top: -0.4em; | |
| -moz-box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2); | |
| -webkit-box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2); | |
| box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2); | |
| } | |
| /*--- Right Center ---*/ | |
| .ui.right.center.popup:before { | |
| top: 50%; | |
| left: -0.35em; | |
| bottom: auto; | |
| right: auto; | |
| margin-top: -0.4em; | |
| -moz-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2); | |
| -webkit-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2); | |
| box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2); | |
| } | |
| /******************************* | |
| States | |
| *******************************/ | |
| .ui.loading.popup { | |
| display: block; | |
| visibility: hidden; | |
| } | |
| .ui.active.popup { | |
| display: block; | |
| } | |
| /******************************* | |
| Variations | |
| *******************************/ | |
| /*-------------- | |
| Size | |
| ---------------*/ | |
| .ui.small.popup { | |
| font-size: 0.75rem; | |
| } | |
| .ui.large.popup { | |
| font-size: 1rem; | |
| } | |
| /*-------------- | |
| Colors | |
| ---------------*/ | |
| /* Inverted colors */ | |
| .ui.inverted.popup { | |
| background-color: #333333; | |
| border: none; | |
| color: #FFFFFF; | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| .ui.inverted.popup .header { | |
| background-color: rgba(0, 0, 0, 0.2); | |
| color: #FFFFFF; | |
| } | |
| .ui.inverted.popup:before { | |
| background-color: #333333; | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| /* | |
| * # Semantic - Rating | |
| * http://github.com/jlukic/semantic-ui/ | |
| * | |
| * | |
| * Copyright 2013 Contributors | |
| * Released under the MIT license | |
| * http://opensource.org/licenses/MIT | |
| * | |
| */ | |
| /******************************* | |
| Rating | |
| *******************************/ | |
| .ui.rating { | |
| display: inline-block; | |
| font-size: 0em; | |
| vertical-align: baseline; | |
| margin: 0em 0.5rem 0em 0em; | |
| } | |
| .ui.rating:last-child { | |
| margin-right: 0em; | |
| } | |
| .ui.rating:before { | |
| display: block; | |
| content: ''; | |
| visibility: hidden; | |
| clear: both; | |
| height: 0; | |
| } | |
| /* Icon */ | |
| .ui.rating .icon { | |
| cursor: default; | |
| margin: 0em; | |
| width: 1em; | |
| height: auto; | |
| padding: 0em; | |
| color: rgba(0, 0, 0, 0.15); | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| .ui.rating .icon:before { | |
| content: "\2605"; | |
| -webkit-transition: color 0.3s ease, | |
| opacity 0.3s ease | |
| ; | |
| -moz-transition: color 0.3s ease, | |
| opacity 0.3s ease | |
| ; | |
| -ms-transition: color 0.3s ease, | |
| opacity 0.3s ease | |
| ; | |
| -o-transition: color 0.3s ease, | |
| opacity 0.3s ease | |
| ; | |
| transition: color 0.3s ease, | |
| opacity 0.3s ease | |
| ; | |
| } | |
| /******************************* | |
| Types | |
| *******************************/ | |
| /*------------------- | |
| Star | |
| --------------------*/ | |
| .ui.star.rating .icon { | |
| width: 1.2em; | |
| } | |
| /* Star */ | |
| .ui.star.rating .icon:before { | |
| content: '\f006'; | |
| font-family: 'Icons'; | |
| } | |
| /* Active Star */ | |
| .ui.star.rating .active.icon:before { | |
| content: '\f005'; | |
| font-family: 'Icons'; | |
| } | |
| /*------------------- | |
| Heart | |
| --------------------*/ | |
| .ui.heart.rating .icon { | |
| width: 1.2em; | |
| } | |
| .ui.heart.rating .icon:before { | |
| content: '\f08a'; | |
| font-family: 'Icons'; | |
| } | |
| /* Active */ | |
| .ui.heart.rating .active.icon:before { | |
| content: '\f004'; | |
| font-family: 'Icons'; | |
| } | |
| .ui.heart.rating .active.icon { | |
| color: #EF404A !important; | |
| } | |
| /* Hovered */ | |
| .ui.heart.rating .hover.icon, | |
| .ui.heart.rating .active.hover.icon { | |
| color: #FF2733 !important; | |
| } | |
| /******************************* | |
| States | |
| *******************************/ | |
| /*------------------- | |
| Active | |
| --------------------*/ | |
| /* active rating */ | |
| .ui.active.rating .icon { | |
| cursor: pointer; | |
| } | |
| /* active icons */ | |
| .ui.rating .active.icon { | |
| color: #FFCB08 !important; | |
| } | |
| /*------------------- | |
| Hover | |
| --------------------*/ | |
| /* rating */ | |
| .ui.rating.hover .active.icon { | |
| opacity: 0.5; | |
| } | |
| /* icon */ | |
| .ui.rating .icon.hover, | |
| .ui.rating .icon.hover.active { | |
| opacity: 1; | |
| color: #FFB70A !important; | |
| } | |
| /******************************* | |
| Variations | |
| *******************************/ | |
| .ui.small.rating .icon { | |
| font-size: 0.75rem; | |
| } | |
| .ui.rating .icon { | |
| font-size: 1rem; | |
| } | |
| .ui.large.rating .icon { | |
| font-size: 1.5rem; | |
| vertical-align: middle; | |
| } | |
| .ui.huge.rating .icon { | |
| font-size: 2rem; | |
| vertical-align: middle; | |
| } | |
| /* | |
| * # Semantic - Reveal | |
| * http://github.com/jlukic/semantic-ui/ | |
| * | |
| * | |
| * Copyright 2013 Contributors | |
| * Released under the MIT license | |
| * http://opensource.org/licenses/MIT | |
| * | |
| */ | |
| /******************************* | |
| Reveal | |
| *******************************/ | |
| .ui.reveal { | |
| display: inline-block; | |
| position: relative !important; | |
| z-index: 2 !important; | |
| font-size: 0em !important; | |
| } | |
| .ui.reveal > .content { | |
| font-size: 1em !important; | |
| } | |
| .ui.reveal > .visible.content { | |
| -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; | |
| -moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; | |
| -ms-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; | |
| transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; | |
| } | |
| .ui.reveal > .visible.content { | |
| position: absolute !important; | |
| top: 0em !important; | |
| left: 0em !important; | |
| z-index: 4 !important; | |
| -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; | |
| -moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; | |
| -ms-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; | |
| transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; | |
| } | |
| .ui.reveal > .hidden.content { | |
| position: relative !important; | |
| z-index: 3 !important; | |
| } | |
| /*------------------ | |
| Loose Coupling | |
| -------------------*/ | |
| .ui.reveal.button { | |
| overflow: hidden; | |
| } | |
| /******************************* | |
| Types | |
| *******************************/ | |
| /*-------------- | |
| Slide | |
| ---------------*/ | |
| .ui.slide.reveal { | |
| position: relative !important; | |
| display: block; | |
| overflow: hidden !important; | |
| white-space: nowrap; | |
| } | |
| .ui.slide.reveal > .content { | |
| display: block; | |
| float: left; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| margin: 0em; | |
| -webkit-transition: top 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, left 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, right 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; | |
| -moz-transition: top 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, left 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, right 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; | |
| -ms-transition: top 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, left 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, right 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; | |
| transition: top 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, left 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, right 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; | |
| } | |
| .ui.slide.reveal > .visible.content { | |
| position: relative !important; | |
| } | |
| .ui.slide.reveal > .hidden.content { | |
| position: absolute !important; | |
| left: 100% !important; | |
| width: 100% !important; | |
| } | |
| .ui.slide.reveal:hover > .visible.content { | |
| left: -100% !important; | |
| } | |
| .ui.slide.reveal:hover > .hidden.content { | |
| left: 0% !important; | |
| } | |
| .ui.right.slide.reveal > .visible.content { | |
| left: 0%; | |
| } | |
| .ui.right.slide.reveal > .hidden.content { | |
| left: auto !important; | |
| right: 100% !important; | |
| } | |
| .ui.right.slide.reveal:hover > .visible.content { | |
| left: 100% !important; | |
| right: auto !important; | |
| } | |
| .ui.right.slide.reveal:hover > .hidden.content { | |
| left: auto !important; | |
| right: 0% !important; | |
| } | |
| .ui.up.slide.reveal > .visible.content { | |
| top: 0% !important; | |
| left: 0% !important; | |
| right: auto !important; | |
| bottom: auto !important; | |
| } | |
| .ui.up.slide.reveal > .hidden.content { | |
| top: 100% !important; | |
| left: 0% !important; | |
| right: auto !important; | |
| bottom: auto !important; | |
| } | |
| .ui.slide.up.reveal:hover > .visible.content { | |
| top: -100% !important; | |
| left: 0% !important; | |
| } | |
| .ui.slide.up.reveal:hover > .hidden.content { | |
| top: 0% !important; | |
| left: 0% !important; | |
| } | |
| .ui.down.slide.reveal > .visible.content { | |
| top: auto !important; | |
| right: auto !important; | |
| bottom: auto !important; | |
| bottom: 0% !important; | |
| } | |
| .ui.down.slide.reveal > .hidden.content { | |
| top: auto !important; | |
| right: auto !important; | |
| bottom: 100% !important; | |
| left: 0% !important; | |
| } | |
| .ui.slide.down.reveal:hover > .visible.content { | |
| left: 0% !important; | |
| bottom: -100% !important; | |
| } | |
| .ui.slide.down.reveal:hover > .hidden.content { | |
| left: 0% !important; | |
| bottom: 0% !important; | |
| } | |
| /*-------------- | |
| Fade | |
| ---------------*/ | |
| .ui.fade.reveal > .visible.content { | |
| opacity: 1; | |
| } | |
| .ui.fade.reveal:hover > .visible.content { | |
| opacity: 0; | |
| } | |
| /*-------------- | |
| Move | |
| ---------------*/ | |
| .ui.move.reveal > .visible.content, | |
| .ui.move.left.reveal > .visible.content { | |
| left: auto !important; | |
| top: auto !important; | |
| bottom: auto !important; | |
| right: 0% !important; | |
| } | |
| .ui.move.reveal:hover > .visible.content, | |
| .ui.move.left.reveal:hover > .visible.content { | |
| right: 100% !important; | |
| } | |
| .ui.move.right.reveal > .visible.content { | |
| right: auto !important; | |
| top: auto !important; | |
| bottom: auto !important; | |
| left: 0% !important; | |
| } | |
| .ui.move.right.reveal:hover > .visible.content { | |
| left: 100% !important; | |
| } | |
| .ui.move.up.reveal > .visible.content { | |
| right: auto !important; | |
| left: auto !important; | |
| top: auto !important; | |
| bottom: 0% !important; | |
| } | |
| .ui.move.up.reveal:hover > .visible.content { | |
| bottom: 100% !important; | |
| } | |
| .ui.move.down.reveal > .visible.content { | |
| right: auto !important; | |
| left: auto !important; | |
| top: 0% !important; | |
| bottom: auto !important; | |
| } | |
| .ui.move.down.reveal:hover > .visible.content { | |
| top: 100% !important; | |
| } | |
| /*-------------- | |
| Rotate | |
| ---------------*/ | |
| .ui.rotate.reveal > .visible.content { | |
| -webkit-transition-duration: 0.8s; | |
| -moz-transition-duration: 0.8s; | |
| -o-transition-duration: 0.8s; | |
| -ms-transition-duration: 0.8s; | |
| transition-duration: 0.8s; | |
| -webkit-transform: rotate(0deg); | |
| -moz-transform: rotate(0deg); | |
| -o-transform: rotate(0deg); | |
| -ms-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| .ui.rotate.reveal > .visible.content, | |
| .ui.rotate.right.reveal > .visible.content { | |
| -webkit-transform-origin: bottom right; | |
| -moz-transform-origin: bottom right; | |
| -o-transform-origin: bottom right; | |
| -ms-transform-origin: bottom right; | |
| transform-origin: bottom right; | |
| } | |
| .ui.rotate.reveal:hover > .visible.content, | |
| .ui.rotate.right.reveal:hover > .visible.content { | |
| -webkit-transform: rotate(110deg); | |
| -moz-transform: rotate(110deg); | |
| -o-transform: rotate(110deg); | |
| -ms-transform: rotate(110deg); | |
| transform: rotate(110deg); | |
| } | |
| .ui.rotate.left.reveal > .visible.content { | |
| -webkit-transform-origin: bottom left; | |
| -moz-transform-origin: bottom left; | |
| -o-transform-origin: bottom left; | |
| -ms-transform-origin: bottom left; | |
| transform-origin: bottom left; | |
| } | |
| .ui.rotate.left.reveal:hover > .visible.content { | |
| -webkit-transform: rotate(-110deg); | |
| -moz-transform: rotate(-110deg); | |
| -o-transform: rotate(-110deg); | |
| -ms-transform: rotate(-110deg); | |
| transform: rotate(-110deg); | |
| } | |
| /******************************* | |
| States | |
| *******************************/ | |
| .ui.disabled.reveal { | |
| opacity: 1 !important; | |
| } | |
| .ui.disabled.reveal > .content { | |
| -webkit-transition: none !important; | |
| -moz-transition: none !important; | |
| -o-transition: none !important; | |
| -ms-transition: none !important; | |
| transition: none !important; | |
| } | |
| .ui.disabled.reveal:hover > .visible.content { | |
| position: static !important; | |
| display: block !important; | |
| opacity: 1 !important; | |
| top: 0 !important; | |
| left: 0 !important; | |
| right: auto !important; | |
| bottom: auto !important; | |
| transform: none !important; | |
| } | |
| .ui.disabled.reveal:hover > .hidden.content { | |
| display: none !important; | |
| } | |
| /******************************* | |
| Variations | |
| *******************************/ | |
| /*-------------- | |
| Masked | |
| ---------------*/ | |
| .ui.masked.reveal { | |
| overflow: hidden; | |
| } | |
| /*-------------- | |
| Instant | |
| ---------------*/ | |
| .ui.instant.reveal > .content { | |
| -webkit-transition-delay: 0s !important; | |
| -moz-transition-delay: 0s !important; | |
| -o-transition-delay: 0s !important; | |
| -ms-transition-delay: 0s !important; | |
| transition-delay: 0s !important; | |
| } | |
| /* | |
| * # Semantic - Search | |
| * http://github.com/jlukic/semantic-ui/ | |
| * | |
| * | |
| * Copyright 2013 Contributors | |
| * Released under the MIT license | |
| * http://opensource.org/licenses/MIT | |
| * | |
| */ | |
| /******************************* | |
| Search | |
| *******************************/ | |
| .ui.search { | |
| position: relative; | |
| text-shadow: none; | |
| font-style: normal; | |
| font-weight: normal; | |
| } | |
| .ui.search input { | |
| -webkit-border-radius: 500rem; | |
| -moz-border-radius: 500rem; | |
| border-radius: 500rem; | |
| } | |
| /*-------------- | |
| Button | |
| ---------------*/ | |
| .ui.search > .button { | |
| position: relative; | |
| z-index: 2; | |
| float: right; | |
| margin: 0px 0px 0px -15px; | |
| padding: 6px 15px 7px; | |
| -webkit-border-radius: 0px 15px 15px 0px; | |
| -moz-border-radius: 0px 15px 15px 0px; | |
| border-radius: 0px 15px 15px 0px; | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| /*-------------- | |
| Results | |
| ---------------*/ | |
| .ui.search .results { | |
| display: none; | |
| position: absolute; | |
| z-index: 999; | |
| top: 100%; | |
| left: 0px; | |
| overflow: hidden; | |
| background-color: #FFFFFF; | |
| margin-top: 0.5em; | |
| width: 380px; | |
| font-size: 0.875em; | |
| line-height: 1.2; | |
| color: #555555; | |
| -webkit-border-radius: 3px; | |
| -moz-border-radius: 3px; | |
| border-radius: 3px; | |
| -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset; | |
| -moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset; | |
| box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset; | |
| } | |
| .ui.search .result { | |
| cursor: pointer; | |
| overflow: hidden; | |
| padding: 0.5em 1em; | |
| } | |
| .ui.search .result:first-child { | |
| border-top: none; | |
| } | |
| .ui.search .result .image { | |
| background: #F0F0F0; | |
| margin-right: 10px; | |
| float: left; | |
| overflow: hidden; | |
| -webkit-border-radius: 3px; | |
| -moz-border-radius: 3px; | |
| border-radius: 3px; | |
| width: 38px; | |
| height: 38px; | |
| } | |
| .ui.search .result .image img { | |
| display: block; | |
| width: 38px; | |
| height: 38px; | |
| } | |
| .ui.search .result .image ~ .info { | |
| float: none; | |
| margin-left: 50px; | |
| } | |
| .ui.search .result .info { | |
| float: left; | |
| } | |
| .ui.search .result .title { | |
| font-weight: bold; | |
| color: rgba(0, 0, 0, 0.8); | |
| } | |
| .ui.search .result .description { | |
| color: rgba(0, 0, 0, 0.6); | |
| } | |
| .ui.search .result .price { | |
| float: right; | |
| color: #5BBD72; | |
| font-weight: bold; | |
| } | |
| /*-------------- | |
| Message | |
| ---------------*/ | |
| .ui.search .message { | |
| padding: 1em; | |
| } | |
| .ui.search .message .text .title { | |
| margin: 0em 0em 0.5rem; | |
| font-size: 1.25rem; | |
| font-weight: bold; | |
| color: rgba(0, 0, 0, 0.8); | |
| } | |
| .ui.search .message .text .description { | |
| margin: 0em; | |
| font-size: 1rem; | |
| color: rgba(0, 0, 0, 0.5); | |
| } | |
| /*-------------- | |
| Categories | |
| ---------------*/ | |
| .ui.search .results .category { | |
| background-color: #FAFAFA; | |
| border-top: 1px solid rgba(0, 0, 0, 0.1); | |
| -webkit-transition: background 0.2s ease-in; | |
| -moz-transition: background 0.2s ease-in; | |
| -o-transition: background 0.2s ease-in; | |
| -ms-transition: background 0.2s ease-in; | |
| transition: background 0.2s ease-in; | |
| } | |
| .ui.search .results .category:first-child { | |
| border-top: none; | |
| } | |
| .ui.search .results .category > .name { | |
| float: left; | |
| padding: 12px 0px 0px 8px; | |
| font-weight: bold; | |
| color: #777777; | |
| text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8); | |
| } | |
| .ui.search .results .category .result { | |
| background-color: #FFFFFF; | |
| margin-left: 80px; | |
| border-left: 1px solid rgba(0, 0, 0, 0.1); | |
| } | |
| /* View All Results */ | |
| .ui.search .all { | |
| display: block; | |
| border-top: 1px solid rgba(0, 0, 0, 0.1); | |
| background-color: #FAFAFA; | |
| height: 2em; | |
| line-height: 2em; | |
| color: rgba(0, 0, 0, 0.6); | |
| font-weight: bold; | |
| text-align: center; | |
| } | |
| /******************************* | |
| States | |
| *******************************/ | |
| /*-------------- | |
| Hover | |
| ---------------*/ | |
| .ui.search .result:hover, | |
| .ui.search .category .result:hover { | |
| background-color: #F8F8F8; | |
| } | |
| .ui.search .all:hover { | |
| background-color: #F0F0F0; | |
| } | |
| /*-------------- | |
| Loading | |
| ---------------*/ | |
| .ui.search.loading .input .icon { | |
| background: url(../images/loader-mini.gif) no-repeat 50% 50%; | |
| } | |
| .ui.search.loading .input .icon:before, | |
| .ui.search.loading .input .icon:after { | |
| display: none; | |
| } | |
| /*-------------- | |
| Active | |
| ---------------*/ | |
| .ui.search .results .category.active { | |
| background-color: #F1F1F1; | |
| } | |
| .ui.search .results .category.active > .name { | |
| color: #333333; | |
| } | |
| .ui.search .result.active, | |
| .ui.search .category .result.active { | |
| background-color: #FBFBFB; | |
| } | |
| .ui.search .result.active .title { | |
| color: #000000; | |
| } | |
| .ui.search .result.active .description { | |
| color: #555555; | |
| } | |
| /******************************* | |
| Variations | |
| *******************************/ | |
| /* Large */ | |
| .ui.search .large.result .image, | |
| .ui.search .large.result .image img { | |
| width: 50px; | |
| height: 50px; | |
| } | |
| .ui.search .large.results .indented.info { | |
| margin-left: 65px; | |
| } | |
| .ui.search .large.results .info .title { | |
| font-size: 16px; | |
| } | |
| .ui.search .large.results .info .description { | |
| font-size: 11px; | |
| } | |
| /* | |
| * # Semantic - Shape | |
| * http://github.com/jlukic/semantic-ui/ | |
| * | |
| * | |
| * Copyright 2013 Contributors | |
| * Released under the MIT license | |
| * http://opensource.org/licenses/MIT | |
| * | |
| */ | |
| /******************************* | |
| Shape | |
| *******************************/ | |
| .ui.shape { | |
| display: inline-block; | |
| position: relative; | |
| -webkit-perspective: 2000px; | |
| -moz-perspective: 2000px; | |
| -ms-perspective: 2000px; | |
| perspective: 2000px; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| .ui.shape .sides { | |
| -webkit-transform-style: preserve-3d; | |
| -moz-transform-style: preserve-3d; | |
| -ms-transform-style: preserve-3d; | |
| transform-style: preserve-3d; | |
| } | |
| .ui.shape .side { | |
| opacity: 1; | |
| width: 100%; | |
| margin: 0em !important; | |
| -webkit-backface-visibility: hidden; | |
| -moz-backface-visibility: hidden; | |
| -ms-backface-visibility: hidden; | |
| backface-visibility: hidden; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| .ui.shape .side { | |
| display: none; | |
| } | |
| /******************************* | |
| Types | |
| *******************************/ | |
| .ui.cube.shape .side { | |
| min-width: 15em; | |
| height: 15em; | |
| padding: 2em; | |
| background-color: #E6E6E6; | |
| color: rgba(0, 0, 0, 0.6); | |
| -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3); | |
| -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3); | |
| box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3); | |
| } | |
| .ui.cube.shape .side > .content { | |
| width: 100%; | |
| height: 100%; | |
| display: table; | |
| text-align: center; | |
| -webkit-user-select: text; | |
| -moz-user-select: text; | |
| -ms-user-select: text; | |
| user-select: text; | |
| } | |
| .ui.cube.shape .side > .content > div { | |
| display: table-cell; | |
| vertical-align: middle; | |
| font-size: 2em; | |
| } | |
| /******************************* | |
| Variations | |
| *******************************/ | |
| .ui.text.shape.animating .sides { | |
| position: static; | |
| } | |
| .ui.text.shape .side { | |
| white-space: nowrap; | |
| } | |
| .ui.text.shape .side > * { | |
| white-space: normal; | |
| } | |
| /******************************* | |
| States | |
| *******************************/ | |
| /*-------------- | |
| Loading | |
| ---------------*/ | |
| .ui.loading.shape { | |
| position: absolute; | |
| top: -9999px; | |
| left: -9999px; | |
| } | |
| /*-------------- | |
| Animating | |
| ---------------*/ | |
| .ui.shape .animating.side { | |
| position: absolute; | |
| top: 0px; | |
| left: 0px; | |
| z-index: 100; | |
| } | |
| .ui.shape .hidden.side { | |
| opacity: 0.4; | |
| } | |
| /*-------------- | |
| CSS | |
| ---------------*/ | |
| .ui.shape.animating { | |
| -webkit-transition: all 0.6s ease-in-out; | |
| -moz-transition: all 0.6s ease-in-out; | |
| -o-transition: all 0.6s ease-in-out; | |
| -ms-transition: all 0.6s ease-in-out; | |
| transition: all 0.6s ease-in-out; | |
| } | |
| .ui.shape.animating .sides { | |
| position: absolute; | |
| } | |
| .ui.shape.animating .sides { | |
| -webkit-transition: all 0.6s ease-in-out; | |
| -moz-transition: all 0.6s ease-in-out; | |
| -o-transition: all 0.6s ease-in-out; | |
| -ms-transition: all 0.6s ease-in-out; | |
| transition: all 0.6s ease-in-out; | |
| } | |
| .ui.shape.animating .side { | |
| -webkit-transition: opacity 0.6s ease-in-out; | |
| -moz-transition: opacity 0.6s ease-in-out; | |
| -o-transition: opacity 0.6s ease-in-out; | |
| -ms-transition: opacity 0.6s ease-in-out; | |
| transition: opacity 0.6s ease-in-out; | |
| } | |
| /*-------------- | |
| Active | |
| ---------------*/ | |
| .ui.shape .active.side { | |
| display: block; | |
| } | |
| /* | |
| * # Semantic - Sidebar | |
| * http://github.com/jlukic/semantic-ui/ | |
| * | |
| * | |
| * Copyright 2013 Contributors | |
| * Released under the MIT license | |
| * http://opensource.org/licenses/MIT | |
| * | |
| */ | |
| /******************************* | |
| Sidebar | |
| *******************************/ | |
| body { | |
| -webkit-transition: margin 0.3s ease, -webkit-transform 0.3s ease; | |
| -moz-transition: margin 0.3s ease, -moz-transform 0.3s ease; | |
| -o-transition: margin 0.3s ease, | |
| transform 0.3s ease | |
| ; | |
| -ms-transition: margin 0.3s ease, | |
| transform 0.3s ease | |
| ; | |
| transition: margin 0.3s ease, | |
| transform 0.3s ease | |
| ; | |
| } | |
| .ui.sidebar { | |
| position: fixed; | |
| margin: 0 !important; | |
| height: 100% !important; | |
| -webkit-border-radius: 0px !important; | |
| -moz-border-radius: 0px !important; | |
| border-radius: 0px !important; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| -ms-overflow-y: auto; | |
| overflow-y: auto; | |
| top: 0px; | |
| left: 0px; | |
| z-index: 999; | |
| -webkit-transition: margin-left 0.3s ease, margin-top 0.3s ease; | |
| -moz-transition: margin-left 0.3s ease, margin-top 0.3s ease; | |
| -o-transition: margin-left 0.3s ease, margin-top 0.3s ease; | |
| -ms-transition: margin-left 0.3s ease, margin-top 0.3s ease; | |
| transition: margin-left 0.3s ease, margin-top 0.3s ease; | |
| } | |
| /******************************* | |
| Types | |
| *******************************/ | |
| /*------------------- | |
| Direction | |
| --------------------*/ | |
| .ui.right.sidebar { | |
| left: 100%; | |
| margin: 0px !important; | |
| } | |
| .ui.top.sidebar { | |
| width: 100% !important; | |
| } | |
| .ui.bottom.sidebar { | |
| width: 100% !important; | |
| top: 100%; | |
| margin: 0px !important; | |
| } | |
| /******************************* | |
| States | |
| *******************************/ | |
| .ui.active.sidebar { | |
| margin-left: 0px !important; | |
| } | |
| .ui.active.top.sidebar, | |
| .ui.active.bottom.sidebar { | |
| margin-top: 0px !important; | |
| } | |
| /******************************* | |
| Variations | |
| *******************************/ | |
| /*------------------- | |
| Formatted | |
| --------------------*/ | |
| .ui.styled.sidebar { | |
| padding: 1em 1.5em; | |
| background-color: #FFFFFF; | |
| box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1); | |
| } | |
| .ui.styled.very.thin.sidebar { | |
| padding: 0.5em; | |
| } | |
| .ui.styled.thin.sidebar { | |
| padding: 1em; | |
| } | |
| /*------------------- | |
| Floating | |
| --------------------*/ | |
| .ui.floating.sidebar { | |
| -webkit-box-shadow: 2px 0px 2px rgba(0, 0, 0, 0.2); | |
| -moz-box-shadow: 2px 0px 2px rgba(0, 0, 0, 0.2); | |
| box-shadow: 2px 0px 2px rgba(0, 0, 0, 0.2); | |
| } | |
| .ui.right.floating.sidebar { | |
| -webkit-box-shadow: -2px 0px 2px rgba(0, 0, 0, 0.2); | |
| -moz-box-shadow: -2px 0px 2px rgba(0, 0, 0, 0.2); | |
| box-shadow: -2px 0px 2px rgba(0, 0, 0, 0.2); | |
| } | |
| .ui.top.floating.sidebar { | |
| -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2); | |
| -moz-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2); | |
| box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2); | |
| } | |
| .ui.bottom.floating.sidebar { | |
| -webkit-box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.2); | |
| -moz-box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.2); | |
| box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.2); | |
| } | |
| /*------------------- | |
| Width | |
| --------------------*/ | |
| /* Very Thin */ | |
| .ui.very.thin.sidebar { | |
| width: 60px !important; | |
| margin-left: -60px !important; | |
| } | |
| .ui.active.very.thin.sidebar { | |
| margin-left: 0px !important; | |
| } | |
| .ui.active.right.very.thin.sidebar { | |
| margin-left: -60px !important; | |
| } | |
| /* Thin */ | |
| .ui.thin.sidebar { | |
| width: 200px !important; | |
| margin-left: -200px !important; | |
| } | |
| .ui.active.thin.sidebar { | |
| margin-left: 0px !important; | |
| } | |
| .ui.active.right.thin.sidebar { | |
| margin-left: -200px !important; | |
| } | |
| /* Standard */ | |
| .ui.sidebar { | |
| width: 275px !important; | |
| margin-left: -275px !important; | |
| } | |
| .ui.active.sidebar { | |
| margin-left: 0px !important; | |
| } | |
| .ui.active.right.sidebar { | |
| margin-left: -275px !important; | |
| } | |
| /* Wide */ | |
| .ui.wide.sidebar { | |
| width: 350px !important; | |
| margin-left: -350px !important; | |
| } | |
| .ui.active.wide.sidebar { | |
| margin-left: 0px !important; | |
| } | |
| .ui.active.right.wide.sidebar { | |
| margin-left: -350px !important; | |
| } | |
| /* Very Wide */ | |
| .ui.very.wide.sidebar { | |
| width: 475px !important; | |
| margin-left: -475px !important; | |
| } | |
| .ui.active.very.wide.sidebar { | |
| margin-left: 0px !important; | |
| } | |
| .ui.active.right.very.wide.sidebar { | |
| margin-left: -475px !important; | |
| } | |
| /*------------------- | |
| Height | |
| --------------------*/ | |
| /* Standard */ | |
| .ui.top.sidebar { | |
| margin: -40px 0px 0px 0px !important; | |
| } | |
| .ui.top.sidebar, | |
| .ui.bottom.sidebar { | |
| height: 40px !important; | |
| } | |
| .ui.active.bottom.sidebar { | |
| margin-top: -40px !important; | |
| } | |
| /* | |
| * # Semantic - Tab | |
| * http://github.com/jlukic/semantic-ui/ | |
| * | |
| * | |
| * Copyright 2013 Contributors | |
| * Released under the MIT license | |
| * http://opensource.org/licenses/MIT | |
| * | |
| */ | |
| /******************************* | |
| UI Tabs | |
| *******************************/ | |
| .ui.tab { | |
| display: none; | |
| } | |
| /******************************* | |
| States | |
| *******************************/ | |
| /*-------------------- | |
| Active | |
| ---------------------*/ | |
| .ui.tab.active, | |
| .ui.tab.open { | |
| display: block; | |
| } | |
| /*-------------------- | |
| Loading | |
| ---------------------*/ | |
| .ui.tab.loading { | |
| position: relative; | |
| overflow: hidden; | |
| display: block; | |
| min-height: 250px; | |
| text-indent: -10000px; | |
| } | |
| .ui.tab.loading * { | |
| position: relative !important; | |
| left: -10000px !important; | |
| } | |
| .ui.tab.loading:after { | |
| position: absolute; | |
| top: 50px; | |
| left: 50%; | |
| content: 'Loading...'; | |
| margin-left: -32px; | |
| text-indent: 5px; | |
| color: rgba(0, 0, 0, 0.4); | |
| width: 100%; | |
| height: 100%; | |
| padding-top: 75px; | |
| background: url(../images/loader-large.gif) no-repeat 0px 0px; | |
| visibility: visible; | |
| } | |
| /******************************* | |
| Semantic - Transition | |
| Author: Jack Lukic | |
| CSS animation definitions for | |
| transition module | |
| *******************************/ | |
| /* | |
| Some transitions adapted from Animate CSS | |
| https://github.com/daneden/animate.css | |
| */ | |
| .ui.transition { | |
| -webkit-animation-iteration-count: 1; | |
| -moz-animation-iteration-count: 1; | |
| -ms-animation-iteration-count: 1; | |
| -o-animation-iteration-count: 1; | |
| animation-iteration-count: 1; | |
| -webkit-animation-duration: 1s; | |
| -moz-animation-duration: 1s; | |
| -ms-animation-duration: 1s; | |
| -o-animation-duration: 1s; | |
| animation-duration: 1s; | |
| animation-timing-function: ease; | |
| -webkit-animation-timing-function: ease; | |
| -webkit-animation-fill-mode: both; | |
| -moz-animation-fill-mode: both; | |
| -ms-animation-fill-mode: both; | |
| -o-animation-fill-mode: both; | |
| animation-fill-mode: both; | |
| } | |
| /******************************* | |
| States | |
| *******************************/ | |
| .ui.animating.transition { | |
| -webkit-backface-visibility: hidden; | |
| -moz-backface-visibility: hidden; | |
| -ms-backface-visibility: hidden; | |
| -o-backface-visibility: hidden; | |
| backface-visibility: hidden; | |
| -webkit-transform: translateZ(0); | |
| -moz-transform: translateZ(0); | |
| -ms-transform: translateZ(0); | |
| -o-transform: translateZ(0); | |
| transform: translateZ(0); | |
| } | |
| /* Loading */ | |
| .ui.loading.transition { | |
| position: absolute; | |
| top: -999999px; | |
| left: -99999px; | |
| } | |
| /* Hidden */ | |
| .ui.hidden.transition { | |
| display: none; | |
| } | |
| /* Visible */ | |
| .ui.visible.transition { | |
| display: block; | |
| visibility: visible; | |
| } | |
| /* Disabled */ | |
| .ui.disabled.transition { | |
| -webkit-animation-play-state: paused; | |
| -moz-animation-play-state: paused; | |
| -ms-animation-play-state: paused; | |
| -o-animation-play-state: paused; | |
| animation-play-state: paused; | |
| } | |
| /******************************* | |
| Variations | |
| *******************************/ | |
| .ui.looping.transition { | |
| -webkit-animation-iteration-count: infinite; | |
| -moz-animation-iteration-count: infinite; | |
| -ms-animation-iteration-count: infinite; | |
| -o-animation-iteration-count: infinite; | |
| animation-iteration-count: infinite; | |
| } | |
| /******************************* | |
| Types | |
| *******************************/ | |
| /*-------------- | |
| Emphasis | |
| ---------------*/ | |
| .ui.flash.transition { | |
| -webkit-animation-name: flash; | |
| -moz-animation-name: flash; | |
| -o-animation-name: flash; | |
| animation-name: flash; | |
| } | |
| .ui.shake.transition { | |
| -webkit-animation-name: shake; | |
| -moz-animation-name: shake; | |
| -o-animation-name: shake; | |
| animation-name: shake; | |
| } | |
| .ui.bounce.transition { | |
| -webkit-animation-name: bounce; | |
| -moz-animation-name: bounce; | |
| -o-animation-name: bounce; | |
| animation-name: bounce; | |
| } | |
| .ui.tada.transition { | |
| -webkit-animation-name: tada; | |
| -moz-animation-name: tada; | |
| -o-animation-name: tada; | |
| animation-name: tada; | |
| } | |
| /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ | |
| .ui.pulse.transition { | |
| -webkit-animation-name: pulse; | |
| -moz-animation-name: pulse; | |
| -o-animation-name: pulse; | |
| animation-name: pulse; | |
| } | |
| /*-------------- | |
| Flips | |
| ---------------*/ | |
| .ui.flip.transition.in, | |
| .ui.flip.transition.out { | |
| -webkit-perspective: 2000px; | |
| perspective: 2000px; | |
| } | |
| .ui.horizontal.flip.transition.in, | |
| .ui.horizontal.flip.transition.out { | |
| -webkit-animation-name: horizontalFlip; | |
| -moz-animation-name: horizontalFlip; | |
| -o-animation-name: horizontalFlip; | |
| animation-name: horizontalFlip; | |
| } | |
| .ui.horizontal.flip.transition.out { | |
| -webkit-animation-name: horizontalFlipOut; | |
| -moz-animation-name: horizontalFlipOut; | |
| -o-animation-name: horizontalFlipOut; | |
| animation-name: horizontalFlipOut; | |
| } | |
| .ui.vertical.flip.transition.in, | |
| .ui.vertical.flip.transition.out { | |
| -webkit-animation-name: verticalFlip; | |
| -moz-animation-name: verticalFlip; | |
| -o-animation-name: verticalFlip; | |
| animation-name: verticalFlip; | |
| } | |
| .ui.vertical.flip.transition.out { | |
| -webkit-animation-name: verticalFlipOut; | |
| -moz-animation-name: verticalFlipOut; | |
| -o-animation-name: verticalFlipOut; | |
| animation-name: verticalFlipOut; | |
| } | |
| /*-------------- | |
| Fades | |
| ---------------*/ | |
| .ui.fade.transition.in { | |
| -webkit-animation-name: fade; | |
| -moz-animation-name: fade; | |
| -o-animation-name: fade; | |
| animation-name: fade; | |
| } | |
| .ui.fade.transition.out { | |
| -webkit-animation-name: fadeOut; | |
| -moz-animation-name: fadeOut; | |
| -o-animation-name: fadeOut; | |
| animation-name: fadeOut; | |
| } | |
| .ui.fade.up.transition.in { | |
| -webkit-animation-name: fadeUp; | |
| -moz-animation-name: fadeUp; | |
| -o-animation-name: fadeUp; | |
| animation-name: fadeUp; | |
| } | |
| .ui.fade.up.transition.out { | |
| -webkit-animation-name: fadeUpOut; | |
| -moz-animation-name: fadeUpOut; | |
| -o-animation-name: fadeUpOut; | |
| animation-name: fadeUpOut; | |
| } | |
| .ui.fade.down.transition.in { | |
| -webkit-animation-name: fadeDown; | |
| -moz-animation-name: fadeDown; | |
| -o-animation-name: fadeDown; | |
| animation-name: fadeDown; | |
| } | |
| .ui.fade.down.transition.out { | |
| -webkit-animation-name: fadeDownOut; | |
| -moz-animation-name: fadeDownOut; | |
| -o-animation-name: fadeDownOut; | |
| animation-name: fadeDownOut; | |
| } | |
| /*-------------- | |
| Scale | |
| ---------------*/ | |
| .ui.scale.transition.in { | |
| -webkit-animation-name: scale; | |
| -moz-animation-name: scale; | |
| -o-animation-name: scale; | |
| animation-name: scale; | |
| } | |
| .ui.scale.transition.out { | |
| -webkit-animation-name: scaleOut; | |
| -moz-animation-name: scaleOut; | |
| -o-animation-name: scaleOut; | |
| animation-name: scaleOut; | |
| } | |
| /*-------------- | |
| Slide | |
| ---------------*/ | |
| .ui.slide.down.transition.in { | |
| -webkit-animation-name: slide; | |
| -moz-animation-name: slide; | |
| -o-animation-name: slide; | |
| animation-name: slide; | |
| transform-origin: 50% 0%; | |
| -ms-transform-origin: 50% 0%; | |
| -webkit-transform-origin: 50% 0%; | |
| } | |
| .ui.slide.down.transition.out { | |
| -webkit-animation-name: slideOut; | |
| -moz-animation-name: slideOut; | |
| -o-animation-name: slideOut; | |
| animation-name: slideOut; | |
| transform-origin: 50% 0%; | |
| -ms-transform-origin: 50% 0%; | |
| -webkit-transform-origin: 50% 0%; | |
| } | |
| .ui.slide.up.transition.in { | |
| -webkit-animation-name: slide; | |
| -moz-animation-name: slide; | |
| -o-animation-name: slide; | |
| animation-name: slide; | |
| transform-origin: 50% 100%; | |
| -ms-transform-origin: 50% 100%; | |
| -webkit-transform-origin: 50% 100%; | |
| } | |
| .ui.slide.up.transition.out { | |
| -webkit-animation-name: slideOut; | |
| -moz-animation-name: slideOut; | |
| -o-animation-name: slideOut; | |
| animation-name: slideOut; | |
| transform-origin: 50% 100%; | |
| -ms-transform-origin: 50% 100%; | |
| -webkit-transform-origin: 50% 100%; | |
| } | |
| @-moz-keyframes slide { | |
| 0% { | |
| opacity: 0; | |
| -moz-transform: scaleY(0); | |
| } | |
| 100% { | |
| opacity: 1; | |
| -moz-transform: scaleY(1); | |
| } | |
| } | |
| @-webkit-keyframes slide { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform: scaleY(0); | |
| } | |
| 100% { | |
| opacity: 1; | |
| -webkit-transform: scaleY(1); | |
| } | |
| } | |
| @keyframes slide { | |
| 0% { | |
| opacity: 0; | |
| transform: scaleY(0); | |
| } | |
| 100% { | |
| opacity: 1; | |
| transform: scaleY(1); | |
| } | |
| } | |
| @-moz-keyframes slideOut { | |
| 0% { | |
| opacity: 1; | |
| -moz-transform: scaleY(1); | |
| } | |
| 100% { | |
| opacity: 0; | |
| -moz-transform: scaleY(0); | |
| } | |
| } | |
| @-webkit-keyframes slideOut { | |
| 0% { | |
| opacity: 1; | |
| -webkit-transform: scaleY(1); | |
| } | |
| 100% { | |
| opacity: 0; | |
| -webkit-transform: scaleY(0); | |
| } | |
| } | |
| @keyframes slideOut { | |
| 0% { | |
| opacity: 1; | |
| transform: scaleY(1); | |
| } | |
| 100% { | |
| opacity: 0; | |
| transform: scaleY(0); | |
| } | |
| } | |
| /******************************* | |
| Animations | |
| *******************************/ | |
| /*-------------- | |
| Emphasis | |
| ---------------*/ | |
| /* Flash */ | |
| @-webkit-keyframes flash { | |
| 0%, | |
| 50%, | |
| 100% { | |
| opacity: 1; | |
| } | |
| 25%, | |
| 75% { | |
| opacity: 0; | |
| } | |
| } | |
| @-moz-keyframes flash { | |
| 0%, | |
| 50%, | |
| 100% { | |
| opacity: 1; | |
| } | |
| 25%, | |
| 75% { | |
| opacity: 0; | |
| } | |
| } | |
| @-o-keyframes flash { | |
| 0%, | |
| 50%, | |
| 100% { | |
| opacity: 1; | |
| } | |
| 25%, | |
| 75% { | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes flash { | |
| 0%, | |
| 50%, | |
| 100% { | |
| opacity: 1; | |
| } | |
| 25%, | |
| 75% { | |
| opacity: 0; | |
| } | |
| } | |
| /* Shake */ | |
| @-webkit-keyframes shake { | |
| 0%, | |
| 100% { | |
| -webkit-transform: translateX(0); | |
| } | |
| 10%, | |
| 30%, | |
| 50%, | |
| 70%, | |
| 90% { | |
| -webkit-transform: translateX(-10px); | |
| } | |
| 20%, | |
| 40%, | |
| 60%, | |
| 80% { | |
| -webkit-transform: translateX(10px); | |
| } | |
| } | |
| @-moz-keyframes shake { | |
| 0%, | |
| 100% { | |
| -moz-transform: translateX(0); | |
| } | |
| 10%, | |
| 30%, | |
| 50%, | |
| 70%, | |
| 90% { | |
| -moz-transform: translateX(-10px); | |
| } | |
| 20%, | |
| 40%, | |
| 60%, | |
| 80% { | |
| -moz-transform: translateX(10px); | |
| } | |
| } | |
| @-o-keyframes shake { | |
| 0%, | |
| 100% { | |
| -o-transform: translateX(0); | |
| } | |
| 10%, | |
| 30%, | |
| 50%, | |
| 70%, | |
| 90% { | |
| -o-transform: translateX(-10px); | |
| } | |
| 20%, | |
| 40%, | |
| 60%, | |
| 80% { | |
| -o-transform: translateX(10px); | |
| } | |
| } | |
| @keyframes shake { | |
| 0%, | |
| 100% { | |
| transform: translateX(0); | |
| } | |
| 10%, | |
| 30%, | |
| 50%, | |
| 70%, | |
| 90% { | |
| transform: translateX(-10px); | |
| } | |
| 20%, | |
| 40%, | |
| 60%, | |
| 80% { | |
| transform: translateX(10px); | |
| } | |
| } | |
| /* Bounce */ | |
| @-webkit-keyframes bounce { | |
| 0%, | |
| 20%, | |
| 50%, | |
| 80%, | |
| 100% { | |
| -webkit-transform: translateY(0); | |
| } | |
| 40% { | |
| -webkit-transform: translateY(-30px); | |
| } | |
| 60% { | |
| -webkit-transform: translateY(-15px); | |
| } | |
| } | |
| @-moz-keyframes bounce { | |
| 0%, | |
| 20%, | |
| 50%, | |
| 80%, | |
| 100% { | |
| -moz-transform: translateY(0); | |
| } | |
| 40% { | |
| -moz-transform: translateY(-30px); | |
| } | |
| 60% { | |
| -moz-transform: translateY(-15px); | |
| } | |
| } | |
| @-o-keyframes bounce { | |
| 0%, | |
| 20%, | |
| 50%, | |
| 80%, | |
| 100% { | |
| -o-transform: translateY(0); | |
| } | |
| 40% { | |
| -o-transform: translateY(-30px); | |
| } | |
| 60% { | |
| -o-transform: translateY(-15px); | |
| } | |
| } | |
| @keyframes bounce { | |
| 0%, | |
| 20%, | |
| 50%, | |
| 80%, | |
| 100% { | |
| transform: translateY(0); | |
| } | |
| 40% { | |
| transform: translateY(-30px); | |
| } | |
| 60% { | |
| transform: translateY(-15px); | |
| } | |
| } | |
| /* Tada */ | |
| @-webkit-keyframes tada { | |
| 0% { | |
| -webkit-transform: scale(1); | |
| } | |
| 10%, | |
| 20% { | |
| -webkit-transform: scale(0.9) rotate(-3deg); | |
| } | |
| 30%, | |
| 50%, | |
| 70%, | |
| 90% { | |
| -webkit-transform: scale(1.1) rotate(3deg); | |
| } | |
| 40%, | |
| 60%, | |
| 80% { | |
| -webkit-transform: scale(1.1) rotate(-3deg); | |
| } | |
| 100% { | |
| -webkit-transform: scale(1) rotate(0); | |
| } | |
| } | |
| @-moz-keyframes tada { | |
| 0% { | |
| -moz-transform: scale(1); | |
| } | |
| 10%, | |
| 20% { | |
| -moz-transform: scale(0.9) rotate(-3deg); | |
| } | |
| 30%, | |
| 50%, | |
| 70%, | |
| 90% { | |
| -moz-transform: scale(1.1) rotate(3deg); | |
| } | |
| 40%, | |
| 60%, | |
| 80% { | |
| -moz-transform: scale(1.1) rotate(-3deg); | |
| } | |
| 100% { | |
| -moz-transform: scale(1) rotate(0); | |
| } | |
| } | |
| @-o-keyframes tada { | |
| 0% { | |
| -o-transform: scale(1); | |
| } | |
| 10%, | |
| 20% { | |
| -o-transform: scale(0.9) rotate(-3deg); | |
| } | |
| 30%, | |
| 50%, | |
| 70%, | |
| 90% { | |
| -o-transform: scale(1.1) rotate(3deg); | |
| } | |
| 40%, | |
| 60%, | |
| 80% { | |
| -o-transform: scale(1.1) rotate(-3deg); | |
| } | |
| 100% { | |
| -o-transform: scale(1) rotate(0); | |
| } | |
| } | |
| @keyframes tada { | |
| 0% { | |
| transform: scale(1); | |
| } | |
| 10%, | |
| 20% { | |
| transform: scale(0.9) rotate(-3deg); | |
| } | |
| 30%, | |
| 50%, | |
| 70%, | |
| 90% { | |
| transform: scale(1.1) rotate(3deg); | |
| } | |
| 40%, | |
| 60%, | |
| 80% { | |
| transform: scale(1.1) rotate(-3deg); | |
| } | |
| 100% { | |
| transform: scale(1) rotate(0); | |
| } | |
| } | |
| @-webkit-keyframes pulse { | |
| 0% { | |
| -webkit-transform: scale(1); | |
| opacity: 1; | |
| } | |
| 50% { | |
| -webkit-transform: scale(0.9); | |
| opacity: 0.7; | |
| } | |
| 100% { | |
| -webkit-transform: scale(1); | |
| opacity: 1; | |
| } | |
| } | |
| @-o-keyframes pulse { | |
| 0% { | |
| -o-transform: scale(1); | |
| opacity: 1; | |
| } | |
| 50% { | |
| -o-transform: scale(0.9); | |
| opacity: 0.7; | |
| } | |
| 100% { | |
| -o-transform: scale(1); | |
| opacity: 1; | |
| } | |
| } | |
| @-moz-keyframes pulse { | |
| 0% { | |
| -moz-transform: scale(1); | |
| opacity: 1; | |
| } | |
| 50% { | |
| -moz-transform: scale(0.9); | |
| opacity: 0.7; | |
| } | |
| 100% { | |
| -moz-transform: scale(1); | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| transform: scale(1); | |
| opacity: 1; | |
| } | |
| 50% { | |
| transform: scale(0.9); | |
| opacity: 0.7; | |
| } | |
| 100% { | |
| transform: scale(1); | |
| opacity: 1; | |
| } | |
| } | |
| /*-------------- | |
| Flips | |
| ---------------*/ | |
| /* Horizontal */ | |
| @-webkit-keyframes horizontalFlip { | |
| 0% { | |
| -webkit-transform: rotateY(-90deg); | |
| opacity: 0; | |
| } | |
| 100% { | |
| -webkit-transform: rotateY(0deg); | |
| opacity: 1; | |
| } | |
| } | |
| @-moz-keyframes horizontalFlip { | |
| 0% { | |
| -moz-transform: rotateY(-90deg); | |
| opacity: 0; | |
| } | |
| 100% { | |
| -moz-transform: rotateY(0deg); | |
| opacity: 1; | |
| } | |
| } | |
| @-o-keyframes horizontalFlip { | |
| 0% { | |
| -o-transform: rotateY(-90deg); | |
| opacity: 0; | |
| } | |
| 100% { | |
| -o-transform: rotateY(0deg); | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes horizontalFlip { | |
| 0% { | |
| transform: rotateY(-90deg); | |
| opacity: 0; | |
| } | |
| 100% { | |
| transform: rotateY(0deg); | |
| opacity: 1; | |
| } | |
| } | |
| /* Horizontal */ | |
| @-webkit-keyframes horizontalFlipOut { | |
| 0% { | |
| -webkit-transform: rotateY(0deg); | |
| opacity: 0; | |
| } | |
| 100% { | |
| -webkit-transform: rotateY(90deg); | |
| opacity: 1; | |
| } | |
| } | |
| @-moz-keyframes horizontalFlipOut { | |
| 0% { | |
| -moz-transform: rotateY(0deg); | |
| opacity: 0; | |
| } | |
| 100% { | |
| -moz-transform: rotateY(90deg); | |
| opacity: 1; | |
| } | |
| } | |
| @-o-keyframes horizontalFlipOut { | |
| 0% { | |
| -o-transform: rotateY(0deg); | |
| opacity: 0; | |
| } | |
| 100% { | |
| -o-transform: rotateY(90deg); | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes horizontalFlipOut { | |
| 0% { | |
| transform: rotateY(0deg); | |
| opacity: 0; | |
| } | |
| 100% { | |
| transform: rotateY(90deg); | |
| opacity: 1; | |
| } | |
| } | |
| /* Vertical */ | |
| @-webkit-keyframes verticalFlip { | |
| 0% { | |
| -webkit-transform: rotateX(-90deg); | |
| opacity: 0; | |
| } | |
| 100% { | |
| -webkit-transform: rotateX(0deg); | |
| opacity: 1; | |
| } | |
| } | |
| @-moz-keyframes verticalFlip { | |
| 0% { | |
| -moz-transform: rotateX(-90deg); | |
| opacity: 0; | |
| } | |
| 100% { | |
| -moz-transform: rotateX(0deg); | |
| opacity: 1; | |
| } | |
| } | |
| @-o-keyframes verticalFlip { | |
| 0% { | |
| -o-transform: rotateX(-90deg); | |
| opacity: 0; | |
| } | |
| 100% { | |
| -o-transform: rotateX(0deg); | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes verticalFlip { | |
| 0% { | |
| transform: rotateX(-90deg); | |
| opacity: 0; | |
| } | |
| 100% { | |
| transform: rotateX(0deg); | |
| opacity: 1; | |
| } | |
| } | |
| @-webkit-keyframes verticalFlipOut { | |
| 0% { | |
| -webkit-transform: rotateX(0deg); | |
| opacity: 1; | |
| } | |
| 100% { | |
| -webkit-transform: rotateX(-90deg); | |
| opacity: 0; | |
| } | |
| } | |
| @-moz-keyframes verticalFlipOut { | |
| 0% { | |
| -moz-transform: rotateX(0deg); | |
| opacity: 1; | |
| } | |
| 100% { | |
| -moz-transform: rotateX(-90deg); | |
| opacity: 0; | |
| } | |
| } | |
| @-o-keyframes verticalFlipOut { | |
| 0% { | |
| -o-transform: rotateX(0deg); | |
| opacity: 1; | |
| } | |
| 100% { | |
| -o-transform: rotateX(-90deg); | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes verticalFlipOut { | |
| 0% { | |
| transform: rotateX(0deg); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: rotateX(-90deg); | |
| opacity: 0; | |
| } | |
| } | |
| /*-------------- | |
| Fades | |
| ---------------*/ | |
| /* Fade */ | |
| @-webkit-keyframes fade { | |
| 0% { | |
| opacity: 0; | |
| } | |
| 100% { | |
| opacity: 1; | |
| } | |
| } | |
| @-moz-keyframes fade { | |
| 0% { | |
| opacity: 0; | |
| } | |
| 100% { | |
| opacity: 1; | |
| } | |
| } | |
| @-o-keyframes fade { | |
| 0% { | |
| opacity: 0; | |
| } | |
| 100% { | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes fade { | |
| 0% { | |
| opacity: 0; | |
| } | |
| 100% { | |
| opacity: 1; | |
| } | |
| } | |
| @-webkit-keyframes fadeOut { | |
| 0% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| opacity: 0; | |
| } | |
| } | |
| @-moz-keyframes fadeOut { | |
| 0% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| opacity: 0; | |
| } | |
| } | |
| @-o-keyframes fadeOut { | |
| 0% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes fadeOut { | |
| 0% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| opacity: 0; | |
| } | |
| } | |
| /* Fade Up */ | |
| @-webkit-keyframes fadeUp { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform: translateY(20px); | |
| } | |
| 100% { | |
| opacity: 1; | |
| -webkit-transform: translateY(0); | |
| } | |
| } | |
| @-moz-keyframes fadeUp { | |
| 0% { | |
| opacity: 0; | |
| -moz-transform: translateY(20px); | |
| } | |
| 100% { | |
| opacity: 1; | |
| -moz-transform: translateY(0); | |
| } | |
| } | |
| @-o-keyframes fadeUp { | |
| 0% { | |
| opacity: 0; | |
| -o-transform: translateY(20px); | |
| } | |
| 100% { | |
| opacity: 1; | |
| -o-transform: translateY(0); | |
| } | |
| } | |
| @keyframes fadeUp { | |
| 0% { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| 100% { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @-webkit-keyframes fadeUpOut { | |
| 0% { | |
| opacity: 1; | |
| -webkit-transform: translateY(0); | |
| } | |
| 100% { | |
| opacity: 0; | |
| -webkit-transform: translateY(20px); | |
| } | |
| } | |
| @-moz-keyframes fadeUpOut { | |
| 0% { | |
| opacity: 1; | |
| -moz-transform: translateY(0); | |
| } | |
| 100% { | |
| opacity: 0; | |
| -moz-transform: translateY(20px); | |
| } | |
| } | |
| @-o-keyframes fadeUpOut { | |
| 0% { | |
| opacity: 1; | |
| -o-transform: translateY(0); | |
| } | |
| 100% { | |
| opacity: 0; | |
| -o-transform: translateY(20px); | |
| } | |
| } | |
| @keyframes fadeUpOut { | |
| 0% { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| 100% { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| } | |
| /* Fade Down */ | |
| @-webkit-keyframes fadeDown { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform: translateY(-20px); | |
| } | |
| 100% { | |
| opacity: 1; | |
| -webkit-transform: translateY(0); | |
| } | |
| } | |
| @-moz-keyframes fadeDown { | |
| 0% { | |
| opacity: 0; | |
| -moz-transform: translateY(-20px); | |
| } | |
| 100% { | |
| opacity: 1; | |
| -moz-transform: translateY(0); | |
| } | |
| } | |
| @-o-keyframes fadeDown { | |
| 0% { | |
| opacity: 0; | |
| -o-transform: translateY(-20px); | |
| } | |
| 100% { | |
| opacity: 1; | |
| -o-transform: translateY(0); | |
| } | |
| } | |
| @keyframes fadeDown { | |
| 0% { | |
| opacity: 0; | |
| transform: translateY(-20px); | |
| } | |
| 100% { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @-webkit-keyframes fadeDownOut { | |
| 0% { | |
| opacity: 1; | |
| -webkit-transform: translateY(0); | |
| } | |
| 100% { | |
| opacity: 0; | |
| -webkit-transform: translateY(-20px); | |
| } | |
| } | |
| @-moz-keyframes fadeDownOut { | |
| 0% { | |
| opacity: 1; | |
| -moz-transform: translateY(0); | |
| } | |
| 100% { | |
| opacity: 0; | |
| -moz-transform: translateY(-20px); | |
| } | |
| } | |
| @-o-keyframes fadeDownOut { | |
| 0% { | |
| opacity: 1; | |
| -o-transform: translateY(0); | |
| } | |
| 100% { | |
| opacity: 0; | |
| -o-transform: translateY(-20px); | |
| } | |
| } | |
| @keyframes fadeDownOut { | |
| 0% { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| 100% { | |
| opacity: 0; | |
| transform: translateY(-20px); | |
| } | |
| } | |
| /*-------------- | |
| Scale | |
| ---------------*/ | |
| /* Scale */ | |
| @-webkit-keyframes scale { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform: scale(0.7); | |
| } | |
| 100% { | |
| opacity: 1; | |
| -webkit-transform: scale(1); | |
| } | |
| } | |
| @-moz-keyframes scale { | |
| 0% { | |
| opacity: 0; | |
| -moz-transform: scale(0.7); | |
| } | |
| 100% { | |
| opacity: 1; | |
| -moz-transform: scale(1); | |
| } | |
| } | |
| @-o-keyframes scale { | |
| 0% { | |
| opacity: 0; | |
| -o-transform: scale(0.7); | |
| } | |
| 100% { | |
| opacity: 1; | |
| -o-transform: scale(1); | |
| } | |
| } | |
| @keyframes scale { | |
| 0% { | |
| opacity: 0; | |
| transform: scale(0.7); | |
| } | |
| 100% { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| } | |
| @-webkit-keyframes scaleOut { | |
| 0% { | |
| opacity: 1; | |
| -webkit-transform: scale(1); | |
| } | |
| 100% { | |
| opacity: 0; | |
| -webkit-transform: scale(0.7); | |
| } | |
| } | |
| @-moz-keyframes scaleOut { | |
| 0% { | |
| opacity: 1; | |
| -moz-transform: scale(1); | |
| } | |
| 100% { | |
| opacity: 0; | |
| -moz-transform: scale(0.7); | |
| } | |
| } | |
| @-o-keyframes scaleOut { | |
| 0% { | |
| opacity: 1; | |
| -o-transform: scale(1); | |
| } | |
| 100% { | |
| opacity: 0; | |
| -o-transform: scale(0.7); | |
| } | |
| } | |
| @keyframes scaleOut { | |
| 0% { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| 100% { | |
| opacity: 0; | |
| transform: scale(0.7); | |
| } | |
| } | |
| /* | |
| * # Semantic - Video | |
| * http://github.com/jlukic/semantic-ui/ | |
| * | |
| * | |
| * Copyright 2013 Contributors | |
| * Released under the MIT license | |
| * http://opensource.org/licenses/MIT | |
| * | |
| */ | |
| /******************************* | |
| Video | |
| *******************************/ | |
| .ui.video { | |
| position: relative; | |
| max-width: 100%; | |
| } | |
| /*-------------- | |
| Content | |
| ---------------*/ | |
| /* Placeholder Image */ | |
| .ui.video .placeholder { | |
| background-color: #333333; | |
| } | |
| /* Play Icon Overlay */ | |
| .ui.video .play { | |
| cursor: pointer; | |
| position: absolute; | |
| top: 0px; | |
| left: 0px; | |
| z-index: 10; | |
| width: 100%; | |
| height: 100%; | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; | |
| filter: alpha(opacity=60); | |
| opacity: 0.6; | |
| -webkit-transition: opacity 0.3s; | |
| -moz-transition: opacity 0.3s; | |
| -o-transition: opacity 0.3s; | |
| -ms-transition: opacity 0.3s; | |
| transition: opacity 0.3s; | |
| } | |
| .ui.video .play.icon:before { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| z-index: 11; | |
| font-size: 6rem; | |
| margin: -3rem 0em 0em -3rem; | |
| color: #FFFFFF; | |
| text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4); | |
| } | |
| .ui.video .placeholder { | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| /* IFrame Embed */ | |
| .ui.video .embed { | |
| display: none; | |
| } | |
| /******************************* | |
| States | |
| *******************************/ | |
| /*-------------- | |
| Hover | |
| ---------------*/ | |
| .ui.video .play:hover { | |
| opacity: 1; | |
| } | |
| /*-------------- | |
| Active | |
| ---------------*/ | |
| .ui.video.active .play, | |
| .ui.video.active .placeholder { | |
| display: none; | |
| } | |
| .ui.video.active .embed { | |
| display: block; | |
| } | |
| /* | |
| * # Semantic Comment View | |
| * http://github.com/jlukic/semantic-ui/ | |
| * | |
| * | |
| * Copyright 2013 Contributors | |
| * Released under the MIT license | |
| * http://opensource.org/licenses/MIT | |
| * | |
| * Released: April 17 2013 | |
| */ | |
| /******************************* | |
| Standard | |
| *******************************/ | |
| /*-------------- | |
| Comments | |
| ---------------*/ | |
| .ui.comments a { | |
| cursor: pointer; | |
| } | |
| /*-------------- | |
| Comment | |
| ---------------*/ | |
| .ui.comments .comment { | |
| position: relative; | |
| margin-top: 0.5em; | |
| padding-top: 0.5em; | |
| } | |
| .ui.comments .comment:first-child { | |
| margin-top: 0em; | |
| padding-top: 0em; | |
| } | |
| /*-------------------- | |
| Avatar (Optional) | |
| ---------------------*/ | |
| .ui.comments .comment .avatar { | |
| display: block; | |
| float: left; | |
| width: 4em; | |
| } | |
| .ui.comments .comment .avatar img { | |
| display: block; | |
| margin: 0em auto; | |
| width: 3em; | |
| height: 3em; | |
| border-radius: 500px; | |
| } | |
| /*-------------- | |
| Content | |
| ---------------*/ | |
| .ui.comments .comment > .content, | |
| .ui.comments .comment > .avatar { | |
| display: block; | |
| } | |
| .ui.comments .comment .avatar ~ .content { | |
| padding: 0em 1em; | |
| } | |
| /* If there is an avatar move content over */ | |
| .ui.comments .comment > .avatar ~ .content { | |
| padding-top: 0.25em; | |
| margin-left: 3.5em; | |
| } | |
| .ui.comments .comment .metadata { | |
| display: inline-block; | |
| margin-left: 0.3em; | |
| color: rgba(0, 0, 0, 0.4); | |
| } | |
| .ui.comments .comment .metadata > * { | |
| display: inline-block; | |
| margin: 0em 0.3em 0em 0em; | |
| } | |
| /*-------------------- | |
| Comment Text | |
| ---------------------*/ | |
| .ui.comments .comment .text { | |
| margin: 0.25em 0em 0.5em; | |
| word-wrap: break-word; | |
| } | |
| /*-------------------- | |
| User Actions | |
| ---------------------*/ | |
| .ui.comments .comment .actions { | |
| font-size: 0.9em; | |
| } | |
| .ui.comments .comment .actions a { | |
| display: inline-block; | |
| margin: 0em 0.3em 0em 0em; | |
| color: rgba(0, 0, 0, 0.3); | |
| } | |
| .ui.comments .comment .actions a.active, | |
| .ui.comments .comment .actions a:hover { | |
| color: rgba(0, 0, 0, 0.6); | |
| } | |
| /*-------------------- | |
| Reply Form | |
| ---------------------*/ | |
| .ui.comments .reply.form { | |
| margin-top: 0.75em; | |
| width: 100%; | |
| max-width: 30em; | |
| } | |
| .ui.comments .comment .reply.form { | |
| margin-left: 2em; | |
| } | |
| .ui.comments > .reply.form { | |
| margin-top: 1.5em; | |
| max-width: 40em; | |
| } | |
| .ui.comments .reply.form textarea { | |
| height: 12em; | |
| } | |
| /*-------------------- | |
| Nested Comments | |
| ---------------------*/ | |
| .ui.comments .comment .comments { | |
| margin-top: 0.5em; | |
| padding-top: 0.5em; | |
| padding-bottom: 1em; | |
| } | |
| .ui.comments .comment .comments:before { | |
| position: absolute; | |
| top: 0px; | |
| left: 0px; | |
| } | |
| /* One Deep */ | |
| .ui.comments > .comment .comments { | |
| margin-left: 2em; | |
| } | |
| /* Two Deep */ | |
| .ui.comments > .comment > .comments > .comment > .comments { | |
| margin-left: 1.75em; | |
| } | |
| /* Three Deep */ | |
| .ui.comments > .comment > .comments > .comment > .comments > .comment > .comments { | |
| margin-left: 1.5em; | |
| } | |
| /* Four Deep or more */ | |
| .ui.comments > .comment > .comments > .comment > .comments > .comment > .comments > .comment .comments { | |
| margin-left: 0.5em; | |
| } | |
| /******************************* | |
| Variations | |
| *******************************/ | |
| /*-------------------- | |
| Threaded | |
| ---------------------*/ | |
| .ui.threaded.comments .comment .comments { | |
| margin-left: 2em !important; | |
| padding-left: 2em !important; | |
| -webkit-box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05); | |
| -moz-box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05); | |
| box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05); | |
| } | |
| /*-------------------- | |
| Minimal | |
| ---------------------*/ | |
| .ui.minimal.comments .comment .actions { | |
| opacity: 0; | |
| -webkit-transition: opacity 0.1s ease-out; | |
| -moz-transition: opacity 0.1s ease-out; | |
| -o-transition: opacity 0.1s ease-out; | |
| -ms-transition: opacity 0.1s ease-out; | |
| transition: opacity 0.1s ease-out; | |
| -webkit-transition-delay: 0.1s; | |
| -moz-transition-delay: 0.1s; | |
| -o-transition-delay: 0.1s; | |
| -ms-transition-delay: 0.1s; | |
| transition-delay: 0.1s; | |
| } | |
| .ui.minimal.comments .comment > .content:hover > .actions { | |
| opacity: 1; | |
| } | |
| /*-------------------- | |
| Sizes | |
| ---------------------*/ | |
| .ui.small.comments { | |
| font-size: 0.875em; | |
| } | |
| /* | |
| * # Activity Feed View | |
| * http://github.com/jlukic/semantic-ui/ | |
| * | |
| * | |
| * Copyright 2013 Contributors | |
| * Released under the MIT license | |
| * http://opensource.org/licenses/MIT | |
| * | |
| * Released: May 22, 2013 | |
| */ | |
| /******************************* | |
| Activity Feed | |
| *******************************/ | |
| .ui.feed a { | |
| cursor: pointer; | |
| } | |
| .ui.feed, | |
| .ui.feed .event, | |
| .ui.feed .label, | |
| .ui.feed .content, | |
| .ui.feed .extra { | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| /******************************* | |
| Content | |
| *******************************/ | |
| /* Event */ | |
| .ui.feed .event { | |
| width: 100%; | |
| display: table; | |
| padding: 1em; | |
| } | |
| .ui.feed .event:first-child { | |
| border-top: 0px; | |
| } | |
| .ui.feed .event:last-child { | |
| margin-bottom: 1em; | |
| } | |
| /* Event Label */ | |
| .ui.feed .label { | |
| width: 3em; | |
| display: table-cell; | |
| vertical-align: top; | |
| text-align: left; | |
| } | |
| .ui.feed .label .icon { | |
| font-size: 1.5em; | |
| padding: 0.5em; | |
| margin: 0em; | |
| } | |
| .ui.feed .label img { | |
| width: 3em; | |
| margin: 0em; | |
| border-radius: 50em; | |
| } | |
| .ui.feed .label + .content { | |
| padding: 0.75em 1em 0em; | |
| } | |
| /* Content */ | |
| .ui.feed .content { | |
| display: table-cell; | |
| vertical-align: top; | |
| text-align: left; | |
| word-wrap: break-word; | |
| } | |
| /* Date */ | |
| .ui.feed .content .date { | |
| float: right; | |
| padding-left: 1em; | |
| color: rgba(0, 0, 0, 0.4); | |
| } | |
| /* Summary */ | |
| .ui.feed .content .summary { | |
| color: rgba(0, 0, 0, 0.75); | |
| } | |
| .ui.feed .content .summary img { | |
| display: inline-block; | |
| margin-right: 0.25em; | |
| width: 4em; | |
| border-radius: 500px; | |
| } | |
| /* Additional Information */ | |
| .ui.feed .content .extra { | |
| margin: 1em 0em 0em; | |
| padding: 0.5em 0em 0em; | |
| color: rgba(0, 0, 0, 0.5); | |
| } | |
| .ui.feed .content .extra.images img { | |
| display: inline-block; | |
| margin-right: 0.25em; | |
| width: 6em; | |
| } | |
| .ui.feed .content .extra.text { | |
| padding: 0.5em 1em; | |
| border-left: 0.2em solid rgba(0, 0, 0, 0.1); | |
| } | |
| /******************************* | |
| Variations | |
| *******************************/ | |
| .ui.small.feed { | |
| font-size: 0.875em; | |
| } | |
| .ui.small.feed .label img { | |
| width: 2.5em; | |
| } | |
| .ui.small.feed .label .icon { | |
| font-size: 1.25em; | |
| } | |
| .ui.feed .event { | |
| padding: 0.75em 0em; | |
| } | |
| .ui.small.feed .label + .content { | |
| padding: 0.5em 0.5em 0; | |
| } | |
| .ui.small.feed .content .extra.images img { | |
| width: 5em; | |
| } | |
| .ui.small.feed .content .extra { | |
| margin: 0.5em 0em 0em; | |
| } | |
| .ui.small.feed .content .extra.text { | |
| padding: 0.25em 0.5em; | |
| } | |
| /* | |
| * # Semantic Item View | |
| * http://github.com/jlukic/semantic-ui/ | |
| * | |
| * | |
| * Copyright 2013 Contributors | |
| * Released under the MIT license | |
| * http://opensource.org/licenses/MIT | |
| * | |
| * Released: April 17 2013 | |
| */ | |
| /******************************* | |
| Standard | |
| *******************************/ | |
| /*-------------- | |
| Items | |
| ---------------*/ | |
| .ui.items { | |
| margin: 1em 0em 0em; | |
| } | |
| .ui.items:first-child { | |
| margin-top: 0em; | |
| } | |
| .ui.items:last-child { | |
| margin-bottom: -1em; | |
| } | |
| /* Force Clearing */ | |
| .ui.items:after { | |
| display: block; | |
| content: ' '; | |
| height: 0px; | |
| clear: both; | |
| overflow: hidden; | |
| visibility: hidden; | |
| } | |
| /*-------------- | |
| Item | |
| ---------------*/ | |
| .ui.items > .row > .item, | |
| .ui.items > .item { | |
| display: block; | |
| float: left; | |
| position: relative; | |
| top: 0px; | |
| width: 316px; | |
| min-height: 375px; | |
| margin: 0em 0.5em 2.5em; | |
| padding: 0em; | |
| background-color: #FFFFFF; | |
| line-height: 1.2; | |
| font-size: 1em; | |
| -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); | |
| -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); | |
| box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); | |
| border-bottom: 0.2em solid rgba(0, 0, 0, 0.2); | |
| -moz-border-radius: 0.33em; | |
| -webkit-border-radius: 0.33em; | |
| border-radius: 0.33em; | |
| -webkit-transition: box-shadow 0.2s ease; | |
| -moz-transition: box-shadow 0.2s ease; | |
| -o-transition: box-shadow 0.2s ease; | |
| -ms-transition: box-shadow 0.2s ease; | |
| transition: box-shadow 0.2s ease; | |
| padding: 0.5em; | |
| } | |
| .ui.items a.item, | |
| .ui.items .item a { | |
| cursor: pointer; | |
| } | |
| .ui.items .item, | |
| .ui.items .item > .image, | |
| .ui.items .item > .image .overlay, | |
| .ui.items .item > .content, | |
| .ui.items .item > .content > .meta, | |
| .ui.items .item > .content > .extra { | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| /*-------------- | |
| Images | |
| ---------------*/ | |
| .ui.items .item > .image { | |
| display: block; | |
| position: relative; | |
| background-color: rgba(0, 0, 0, 0.05); | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| -webkit-border-radius: 0.2em; | |
| -moz-border-radius: 0.2em; | |
| border-radius: 0.2em; | |
| } | |
| .ui.items .item > .image > img { | |
| display: block; | |
| width: 100%; | |
| } | |
| /*-------------- | |
| Content | |
| ---------------*/ | |
| .ui.items .item > .content { | |
| padding: 0.75em 0.5em; | |
| } | |
| .ui.items .item > .content > .name { | |
| display: block; | |
| font-size: 1.25em; | |
| font-weight: bold; | |
| margin-bottom: 0.2em; | |
| color: rgba(0, 0, 0, 0.7); | |
| } | |
| .ui.items .item > .content > .description { | |
| clear: both; | |
| margin: 0em 0em; | |
| color: rgba(0, 0, 0, 0.45); | |
| } | |
| .ui.items .item > .content > .description p { | |
| margin: 0em 0em 0.2em; | |
| } | |
| .ui.items .item > .content > .description p:last-child { | |
| margin-bottom: 0em; | |
| } | |
| /*-------------- | |
| Meta | |
| ---------------*/ | |
| .ui.items .item .meta { | |
| float: right; | |
| color: rgba(0, 0, 0, 0.35); | |
| } | |
| .ui.items .item > .content > .meta + .name { | |
| float: left; | |
| } | |
| /*-------------- | |
| Labels | |
| ---------------*/ | |
| /*-----star----- */ | |
| /* hover */ | |
| .ui.items .item .star.label:hover::after { | |
| border-right-color: #F6EFC3; | |
| } | |
| .ui.items .item .star.label:hover::after { | |
| border-top-color: #F6EFC3; | |
| } | |
| .ui.items .item .star.label:hover .icon { | |
| color: #ac9400; | |
| } | |
| /* active */ | |
| .ui.items .item .star.label.active::after { | |
| border-right-color: #F6EFC3; | |
| } | |
| .ui.items .item .star.label.active::after { | |
| border-top-color: #F6EFC3; | |
| } | |
| .ui.items .item .star.label.active .icon { | |
| color: #ac9400; | |
| } | |
| /*-----like----- */ | |
| /* hover */ | |
| .ui.items .item .like.label:hover::after { | |
| border-right-color: #F5E1E2; | |
| } | |
| .ui.items .item .like.label.active::after { | |
| border-top-color: #F5E1E2; | |
| } | |
| .ui.items .item .like.label:hover .icon { | |
| color: #ef404a; | |
| } | |
| /* active */ | |
| .ui.items .item .like.label.active::after { | |
| border-right-color: #F5E1E2; | |
| } | |
| .ui.items .item .like.label.active::after { | |
| border-top-color: #F5E1E2; | |
| } | |
| .ui.items .item .like.label.active .icon { | |
| color: #ef404a; | |
| } | |
| /*-------------- | |
| Extra | |
| ---------------*/ | |
| .ui.items .item .extra { | |
| position: absolute; | |
| width: 100%; | |
| padding: 0em 0.5em; | |
| bottom: -2em; | |
| left: 0em; | |
| height: 1.5em; | |
| color: rgba(0, 0, 0, 0.25); | |
| -webkit-transition: color 0.2s ease; | |
| -moz-transition: color 0.2s ease; | |
| -o-transition: color 0.2s ease; | |
| -ms-transition: color 0.2s ease; | |
| transition: color 0.2s ease; | |
| } | |
| .ui.items .item .extra > img { | |
| display: inline-block; | |
| border-radius: 500px 500px 500px 500px; | |
| margin-right: 0.25em; | |
| vertical-align: middle; | |
| width: 2em; | |
| } | |
| .ui.items .item .extra .left { | |
| float: left; | |
| } | |
| .ui.items .item .extra .right { | |
| float: right; | |
| } | |
| /******************************* | |
| States | |
| *******************************/ | |
| .ui.items .item:hover { | |
| cursor: pointer; | |
| z-index: 5; | |
| box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); | |
| } | |
| .ui.items .item:hover .extra { | |
| color: rgba(0, 0, 0, 0.5); | |
| } | |
| .ui.items .item:nth-of-type(n+1):hover { | |
| border-bottom-color: #6ECFF5 !important; | |
| } | |
| .ui.items .item:nth-of-type(n+2):hover { | |
| border-bottom-color: #5C6166 !important; | |
| } | |
| .ui.items .item:nth-of-type(n+3):hover { | |
| border-bottom-color: #A1CF64 !important; | |
| } | |
| .ui.items .item:nth-of-type(n+4):hover { | |
| border-bottom-color: #D95C5C !important; | |
| } | |
| .ui.items .item:nth-of-type(n+5):hover { | |
| border-bottom-color: #564F8A !important; | |
| } | |
| .ui.items .item:nth-of-type(n+6):hover { | |
| border-bottom-color: #00B5AD !important; | |
| } | |
| /******************************* | |
| Variations | |
| *******************************/ | |
| /*-------------- | |
| Connected | |
| ---------------*/ | |
| .ui.connected.items { | |
| display: table; | |
| width: 100%; | |
| margin-left: 0em !important; | |
| margin-right: 0em !important; | |
| } | |
| .ui.connected.items > .row > .item, | |
| .ui.connected.items > .item { | |
| float: none; | |
| display: table-cell; | |
| vertical-align: top; | |
| height: auto; | |
| border-radius: 0px; | |
| margin: 0em; | |
| width: 33.33%; | |
| } | |
| .ui.connected.items > .row { | |
| display: table; | |
| margin: 0.5em 0em; | |
| } | |
| .ui.connected.items > .row:first-child { | |
| margin-top: 0em; | |
| } | |
| /* Borders */ | |
| .ui.connected.items > .item, | |
| .ui.connected.items > .row:last-child > .item { | |
| border-bottom: 0.2em solid rgba(0, 0, 0, 0.2); | |
| } | |
| .ui.connected.items > .row:last-child > .item:first-child, | |
| .ui.connected.items > .item:first-child { | |
| border-radius: 0em 0em 0em 0.33em; | |
| } | |
| .ui.connected.items > .row:last-child > .item:last-child, | |
| .ui.connected.items > .item:last-child { | |
| border-radius: 0em 0em 0.33em 0em; | |
| } | |
| /* Hover */ | |
| .ui.connected.items .item:hover { | |
| border-bottom-width: 0.2em; | |
| } | |
| /* Item Count */ | |
| .ui.one.connected.items > .row > .item, | |
| .ui.one.connected.items > .item { | |
| width: 50%; | |
| padding-left: 2%; | |
| padding-right: 2%; | |
| } | |
| .ui.two.connected.items > .row > .item, | |
| .ui.two.connected.items > .item { | |
| width: 50%; | |
| padding-left: 1%; | |
| padding-right: 1%; | |
| } | |
| .ui.three.connected.items > .row > .item, | |
| .ui.three.connected.items > .item { | |
| width: 33.333%; | |
| padding-left: 1%; | |
| padding-right: 1%; | |
| } | |
| .ui.four.connected.items > .row > .item, | |
| .ui.four.connected.items > .item { | |
| width: 25%; | |
| padding-left: 0.5%; | |
| padding-right: 0.5%; | |
| } | |
| .ui.five.connected.items > .row > .item, | |
| .ui.five.connected.items > .item { | |
| width: 20%; | |
| padding-left: 0.5%; | |
| padding-right: 0.5%; | |
| } | |
| .ui.six.connected.items > .row > .item, | |
| .ui.six.connected.items > .item { | |
| width: 16.66%; | |
| padding-left: 0.5%; | |
| padding-right: 0.5%; | |
| } | |
| .ui.seven.connected.items > .row > .item, | |
| .ui.seven.connected.items > .item { | |
| width: 14.28%; | |
| padding-left: 0.5%; | |
| padding-right: 0.5%; | |
| } | |
| .ui.eight.connected.items > .row > .item, | |
| .ui.eight.connected.items > .item { | |
| width: 12.5%; | |
| padding-left: 0.25%; | |
| padding-right: 0.25%; | |
| } | |
| .ui.nine.connected.items > .row > .item, | |
| .ui.nine.connected.items > .item { | |
| width: 11.11%; | |
| padding-left: 0.25%; | |
| padding-right: 0.25%; | |
| } | |
| .ui.ten.connected.items > .row > .item, | |
| .ui.ten.connected.items > .item { | |
| width: 10%; | |
| padding-left: 0.2%; | |
| padding-right: 0.2%; | |
| } | |
| .ui.eleven.connected.items > .row > .item, | |
| .ui.eleven.connected.items > .item { | |
| width: 9.09%; | |
| padding-left: 0.2%; | |
| padding-right: 0.2%; | |
| } | |
| .ui.twelve.connected.items > .row > .item, | |
| .ui.twelve.connected.items > .item { | |
| width: 8.3333%; | |
| padding-left: 0.1%; | |
| padding-right: 0.1%; | |
| } | |
| /*------------------- | |
| Responsive | |
| --------------------*/ | |
| @media only screen and (max-width: 768px) { | |
| .ui.stackable.items { | |
| display: block !important; | |
| } | |
| .ui.stackable.items > .item, | |
| .ui.stackable.items > .row > .item { | |
| display: block !important; | |
| height: auto !important; | |
| width: auto !important; | |
| padding: 0% !important; | |
| } | |
| } | |
| /*-------------------- | |
| Horizontal | |
| ---------------------*/ | |
| .ui.horizontal.items > .item, | |
| .ui.items > .horizontal.item { | |
| display: table; | |
| } | |
| .ui.horizontal.items > .item > .image .ui.items > .horizontal.item > .image { | |
| display: table-cell; | |
| width: 50%; | |
| } | |
| .ui.horizontal.items > .item > .image + .content, | |
| .ui.items > .horizontal.item > .image + .content { | |
| width: 50%; | |
| display: table-cell; | |
| } | |
| .ui.horizontal.items > .item > .content, | |
| .ui.items > .horizontal.item > .content { | |
| padding: 1% 1.7% 11% 3%; | |
| vertical-align: top; | |
| } | |
| .ui.horizontal.items > .item > .meta, | |
| .ui.items > .horizontal.item > .meta { | |
| position: absolute; | |
| padding: 0%; | |
| bottom: 7%; | |
| left: 3%; | |
| width: 94%; | |
| } | |
| .ui.horizontal.items > .item > .image + .content + .meta, | |
| .ui.items > .horizontal.item > .image + .content + .meta { | |
| bottom: 7%; | |
| left: 53%; | |
| width: 44%; | |
| } | |
| .ui.horizontal.items > .item .avatar, | |
| .ui.items > .horizontal.item .avatar { | |
| width: 11.5%; | |
| } | |
| .ui.items > .item .avatar { | |
| max-width: 25px; | |
| } | |
| /*-------------- | |
| Item Count | |
| ---------------*/ | |
| .ui.one.items { | |
| margin-left: -2%; | |
| margin-right: -2%; | |
| } | |
| .ui.one.items > .item { | |
| width: 100%; | |
| margin-left: 2%; | |
| margin-right: 2%; | |
| } | |
| .ui.two.items { | |
| margin-left: -1%; | |
| margin-right: -1%; | |
| } | |
| .ui.two.items > .item { | |
| width: 48%; | |
| margin-left: 1%; | |
| margin-right: 1%; | |
| } | |
| .ui.two.items > .item:nth-child(2n+1) { | |
| clear: left; | |
| } | |
| .ui.three.items { | |
| margin-left: -1%; | |
| margin-right: -1%; | |
| } | |
| .ui.three.items > .item { | |
| width: 31.333%; | |
| margin-left: 1%; | |
| margin-right: 1%; | |
| } | |
| .ui.three.items > .item:nth-child(3n+1) { | |
| clear: left; | |
| } | |
| .ui.four.items { | |
| margin-left: -0.5%; | |
| margin-right: -0.5%; | |
| } | |
| .ui.four.items > .item { | |
| width: 24%; | |
| margin-left: 0.5%; | |
| margin-right: 0.5%; | |
| } | |
| .ui.four.items > .item:nth-child(4n+1) { | |
| clear: left; | |
| } | |
| .ui.five.items { | |
| margin-left: -0.5%; | |
| margin-right: -0.5%; | |
| } | |
| .ui.five.items > .item { | |
| width: 19%; | |
| margin-left: 0.5%; | |
| margin-right: 0.5%; | |
| } | |
| .ui.five.items > .item:nth-child(5n+1) { | |
| clear: left; | |
| } | |
| .ui.six.items { | |
| margin-left: -0.5%; | |
| margin-right: -0.5%; | |
| } | |
| .ui.six.items > .item { | |
| width: 15.66%; | |
| margin-left: 0.5%; | |
| margin-right: 0.5%; | |
| } | |
| .ui.six.items > .item:nth-child(6n+1) { | |
| clear: left; | |
| } | |
| .ui.seven.items { | |
| margin-left: -0.5%; | |
| margin-right: -0.5%; | |
| } | |
| .ui.seven.items > .item { | |
| width: 13.28%; | |
| margin-left: 0.5%; | |
| margin-right: 0.5%; | |
| font-size: 11px; | |
| } | |
| .ui.seven.items > .item:nth-child(7n+1) { | |
| clear: left; | |
| } | |
| .ui.eight.items { | |
| margin-left: -0.25%; | |
| margin-right: -0.25%; | |
| } | |
| .ui.eight.items > .item { | |
| width: 12.0%; | |
| margin-left: 0.25%; | |
| margin-right: 0.25%; | |
| font-size: 11px; | |
| } | |
| .ui.eight.items > .item:nth-child(8n+1) { | |
| clear: left; | |
| } | |
| .ui.nine.items { | |
| margin-left: -0.25%; | |
| margin-right: -0.25%; | |
| } | |
| .ui.nine.items > .item { | |
| width: 10.61%; | |
| margin-left: 0.25%; | |
| margin-right: 0.25%; | |
| font-size: 10px; | |
| } | |
| .ui.nine.items > .item:nth-child(9n+1) { | |
| clear: left; | |
| } | |
| .ui.ten.items { | |
| margin-left: -0.2%; | |
| margin-right: -0.2%; | |
| } | |
| .ui.ten.items > .item { | |
| width: 9.6%; | |
| margin-left: 0.2%; | |
| margin-right: 0.2%; | |
| font-size: 10px; | |
| } | |
| .ui.ten.items > .item:nth-child(10n+1) { | |
| clear: left; | |
| } | |
| .ui.eleven.items { | |
| margin-left: -0.2%; | |
| margin-right: -0.2%; | |
| } | |
| .ui.eleven.items > .item { | |
| width: 8.69%; | |
| margin-left: 0.2%; | |
| margin-right: 0.2%; | |
| font-size: 9px; | |
| } | |
| .ui.eleven.items > .item:nth-child(11n+1) { | |
| clear: left; | |
| } | |
| .ui.twelve.items { | |
| margin-left: -0.1%; | |
| margin-right: -0.1%; | |
| } | |
| .ui.twelve.items > .item { | |
| width: 8.1333%; | |
| margin-left: 0.1%; | |
| margin-right: 0.1%; | |
| font-size: 9px; | |
| } | |
| .ui.twelve.items > .item:nth-child(12n+1) { | |
| clear: left; | |
| } | |
| /* | |
| * # Semantic List - Flat | |
| * http://github.com/jlukic/semantic-ui/ | |
| * | |
| * | |
| * Copyright 2013 Contributors | |
| * Released under the MIT license | |
| * http://opensource.org/licenses/MIT | |
| * | |
| * Released: April 26 2013 | |
| */ | |
| /******************************* | |
| List | |
| *******************************/ | |
| ul.ui.list, | |
| ol.ui.list, | |
| .ui.list { | |
| list-style-type: none; | |
| margin: 1em 0em; | |
| padding: 0em; | |
| } | |
| ul.ui.list ul, | |
| ol.ui.list ol, | |
| .ui.list .list { | |
| margin: 0em; | |
| padding: 0.5em 0em 0.5em 1em; | |
| } | |
| ul.ui.list:first-child, | |
| ol.ui.list:first-child, | |
| .ui.list:first-child { | |
| margin-top: 0em; | |
| } | |
| ul.ui.list:last-child, | |
| ol.ui.list:last-child, | |
| .ui.list:last-child { | |
| margin-bottom: 0em; | |
| } | |
| /******************************* | |
| Content | |
| *******************************/ | |
| /* List Item */ | |
| ul.ui.list li, | |
| ol.ui.list li, | |
| .ui.list .item { | |
| display: list-item; | |
| list-style-type: none; | |
| list-style-position: inside; | |
| padding: 0.3em 0em; | |
| line-height: 1.2; | |
| } | |
| .ui.list .item:after { | |
| content: ''; | |
| display: block; | |
| height: 0; | |
| clear: both; | |
| visibility: hidden; | |
| } | |
| /* Icon */ | |
| .ui.list .item > .icon { | |
| display: table-cell; | |
| margin: 0em; | |
| padding: 0.1em 0.5em 0em 0em; | |
| vertical-align: top; | |
| } | |
| .ui.list .item > .icon:only-child { | |
| display: inline-block; | |
| } | |
| .ui.horizontal.list .item > .icon { | |
| padding: 0em 0.25em 0em 0em; | |
| } | |
| /* Image */ | |
| .ui.list .item > img { | |
| display: inline-block; | |
| width: 2em; | |
| margin-right: 0.5em; | |
| vertical-align: middle; | |
| -webkit-border-radius: 0.2em; | |
| -moz-border-radius: 0.2em; | |
| border-radius: 0.2em; | |
| } | |
| /* Content */ | |
| .ui.list .item > .content { | |
| display: inline-block; | |
| vertical-align: middle; | |
| line-height: 1.2; | |
| } | |
| .ui.list .item > .icon + .content { | |
| display: table-cell; | |
| vertical-align: top; | |
| padding-left: 0.5em; | |
| } | |
| /* Link */ | |
| .ui.list a { | |
| cursor: pointer; | |
| } | |
| .ui.list a .icon { | |
| color: rgba(0, 0, 0, 0.6); | |
| -webkit-transition: color 0.2s ease; | |
| -moz-transition: color 0.2s ease; | |
| -o-transition: color 0.2s ease; | |
| -ms-transition: color 0.2s ease; | |
| transition: color 0.2s ease; | |
| } | |
| /* Header */ | |
| .ui.list .header { | |
| font-weight: bold; | |
| } | |
| .ui.list .description { | |
| color: rgba(0, 0, 0, 0.5); | |
| } | |
| /* Floated Content */ | |
| .ui.list .item > .left.floated { | |
| margin-right: 1em; | |
| float: left; | |
| } | |
| .ui.list .item > .right.floated { | |
| margin-left: 1em; | |
| float: right; | |
| } | |
| /******************************* | |
| Types | |
| *******************************/ | |
| /*------------------- | |
| Horizontal | |
| --------------------*/ | |
| .ui.horizontal.list { | |
| display: inline-block; | |
| font-size: 0em; | |
| } | |
| .ui.horizontal.list .item { | |
| display: inline-block; | |
| margin-left: 1em; | |
| font-size: 1rem; | |
| } | |
| .ui.horizontal.list .item:first-child { | |
| margin-left: 0em; | |
| } | |
| /******************************* | |
| States | |
| *******************************/ | |
| /*------------------- | |
| Hover | |
| --------------------*/ | |
| .ui.list a:hover .icon { | |
| color: rgba(0, 0, 0, 0.8); | |
| } | |
| /******************************* | |
| Variations | |
| *******************************/ | |
| /*------------------- | |
| Link | |
| --------------------*/ | |
| .ui.link.list .item { | |
| color: rgba(0, 0, 0, 0.4); | |
| } | |
| .ui.link.list a.item, | |
| .ui.link.list .item a { | |
| color: rgba(0, 0, 0, 0.6); | |
| } | |
| .ui.link.list a.item:hover, | |
| .ui.link.list .item a:hover { | |
| color: rgba(0, 0, 0, 0.8); | |
| } | |
| .ui.link.list a.item:active, | |
| .ui.link.list .item a:active { | |
| color: rgba(0, 0, 0, 0.9); | |
| } | |
| .ui.link.list a.active.item, | |
| .ui.link.list .active.item a { | |
| color: rgba(0, 0, 0, 0.8); | |
| } | |
| /*------------------- | |
| Selection | |
| --------------------*/ | |
| .ui.selection.list .item { | |
| cursor: pointer; | |
| color: rgba(0, 0, 0, 0.4); | |
| padding: 0.5em; | |
| -webkit-transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; | |
| -moz-transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; | |
| -o-transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; | |
| -ms-transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; | |
| transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; | |
| } | |
| .ui.selection.list .item:hover { | |
| background-color: rgba(0, 0, 0, 0.02); | |
| color: rgba(0, 0, 0, 0.7); | |
| } | |
| .ui.selection.list:not(.horizontal, .ordered) .item:hover { | |
| padding-left: 1em; | |
| } | |
| .ui.selection.list:not(.horizontal, .ordered) .item:hover .item:hover { | |
| padding-left: 0.5em; | |
| } | |
| .ui.selection.list .item:active { | |
| background-color: rgba(0, 0, 0, 0.05); | |
| color: rgba(0, 0, 0, 0.7); | |
| } | |
| .ui.selection.list .item.active { | |
| background-color: rgba(0, 0, 0, 0.04); | |
| color: rgba(0, 0, 0, 0.7); | |
| } | |
| /*------------------- | |
| Bulleted | |
| --------------------*/ | |
| ul.ui.list, | |
| .ui.bulleted.list { | |
| margin-left: 1.5em; | |
| } | |
| ul.ui.list li, | |
| .ui.bulleted.list .item { | |
| position: relative; | |
| } | |
| ul.ui.list li:before, | |
| .ui.bulleted.list .item:before { | |
| position: absolute; | |
| left: -1.5em; | |
| content: '•'; | |
| line-height: 1.2rem; | |
| vertical-align: top; | |
| } | |
| ul.ui.list ul, | |
| .ui.bulleted.list .list { | |
| padding-left: 1.5em; | |
| } | |
| /* Horizontal Bulleted */ | |
| ul.ui.horizontal.bulleted.list, | |
| .ui.horizontal.bulleted.list { | |
| margin-left: 0em; | |
| } | |
| ul.ui.horizontal.bulleted.list li, | |
| .ui.horizontal.bulleted.list .item { | |
| margin-left: 1.5em; | |
| } | |
| ul.ui.horizontal.bulleted.list li:before, | |
| .ui.horizontal.bulleted.list .item:before { | |
| left: -0.9em; | |
| } | |
| ul.ui.horizontal.bulleted.list li:first-child, | |
| .ui.horizontal.bulleted.list .item:first-child { | |
| margin-left: 0em; | |
| } | |
| ul.ui.horizontal.bulleted.list li:first-child::before, | |
| .ui.horizontal.bulleted.list .item:first-child::before { | |
| display: none; | |
| } | |
| /*------------------- | |
| Ordered | |
| --------------------*/ | |
| ol.ui.list, | |
| .ui.ordered.list { | |
| counter-reset: ordered; | |
| margin-left: 2em; | |
| list-style-type: none; | |
| } | |
| ol.ui.list li, | |
| .ui.ordered.list .item { | |
| list-style-type: none; | |
| position: relative; | |
| } | |
| ol.ui.list li:before, | |
| .ui.ordered.list .item:before { | |
| position: absolute; | |
| left: -2em; | |
| counter-increment: ordered; | |
| content: counters(ordered, "."); | |
| text-align: right; | |
| vertical-align: top; | |
| opacity: 0.75; | |
| } | |
| ol.ui.list ol, | |
| .ui.ordered.list .list { | |
| counter-reset: ordered; | |
| padding-left: 2.5em; | |
| } | |
| ol.ui.list ol li:before, | |
| .ui.ordered.list .list .item:before { | |
| left: -2.5em; | |
| } | |
| /* Horizontal Ordered */ | |
| ol.ui.horizontal.list, | |
| .ui.ordered.horizontal.list { | |
| margin-left: 0em; | |
| } | |
| ol.ui.horizontal.list li:before, | |
| .ui.ordered.horizontal.list .item:before { | |
| position: static; | |
| margin: 0em 0.5em 0em 0em; | |
| } | |
| /*------------------- | |
| Divided | |
| --------------------*/ | |
| .ui.divided.list > .item, | |
| .ui.divided.list > .list { | |
| border-top: 1px solid rgba(0, 0, 0, 0.1); | |
| padding-left: 0.5em; | |
| padding-right: 0.5em; | |
| } | |
| .ui.divided.list .item .menu .item { | |
| border-width: 0px; | |
| } | |
| .ui.divided.list .item:first-child { | |
| border-top-width: 0px; | |
| } | |
| /* Sub Menu */ | |
| .ui.divided.list .list { | |
| margin-left: -0.5em; | |
| margin-right: -0.5em; | |
| } | |
| .ui.divided.list .list .item { | |
| padding-left: 1em; | |
| padding-right: 1em; | |
| } | |
| .ui.divided.list .list .item:first-child { | |
| border-top-width: 1px; | |
| } | |
| /* Divided bulleted */ | |
| .ui.divided.bulleted.list { | |
| margin-left: 0em; | |
| } | |
| .ui.divided.bulleted.list .item { | |
| padding-left: 1.5em; | |
| } | |
| .ui.divided.bulleted.list .item:before { | |
| left: 0.5em; | |
| } | |
| /* Divided ordered */ | |
| .ui.divided.ordered.list { | |
| margin-left: 0em; | |
| } | |
| .ui.divided.ordered.list > .item { | |
| padding-left: 2em; | |
| padding-right: 2em; | |
| } | |
| .ui.divided.ordered.list > .item:before { | |
| left: 0.5em; | |
| } | |
| .ui.divided.ordered.list .item .list { | |
| margin-left: -2em; | |
| margin-right: -2em; | |
| } | |
| /* Divided horizontal */ | |
| .ui.divided.horizontal.list { | |
| margin-left: 0em; | |
| } | |
| .ui.divided.horizontal.list .item { | |
| border-top: none; | |
| border-left: 1px solid rgba(0, 0, 0, 0.1); | |
| margin: 0em; | |
| padding-left: 0.75em; | |
| padding-right: 0.75em; | |
| line-height: 0.6; | |
| } | |
| .ui.horizontal.divided.list .item:first-child { | |
| border-left: none; | |
| padding-left: 0em; | |
| } | |
| /*------------------- | |
| Celled | |
| --------------------*/ | |
| .ui.celled.list > .item, | |
| .ui.celled.list > .list { | |
| border-top: 1px solid rgba(0, 0, 0, 0.1); | |
| padding-left: 0.5em; | |
| padding-right: 0.5em; | |
| } | |
| .ui.celled.list > .item:last-child { | |
| border-bottom: 1px solid rgba(0, 0, 0, 0.1); | |
| } | |
| /* Sub Menu */ | |
| .ui.celled.list .item .list { | |
| margin-left: -0.5em; | |
| margin-right: -0.5em; | |
| } | |
| .ui.celled.list .item .list .item { | |
| border-width: 0px; | |
| } | |
| .ui.celled.list .list .item:first-child { | |
| border-top-width: 0px; | |
| } | |
| /* Celled Bulleted */ | |
| .ui.celled.bulleted.list { | |
| margin-left: 0em; | |
| } | |
| .ui.celled.bulleted.list > .item { | |
| padding-left: 1.5em; | |
| } | |
| .ui.celled.bulleted.list > .item:before { | |
| left: 0.5em; | |
| } | |
| /* Celled Ordered */ | |
| .ui.celled.ordered.list { | |
| margin-left: 0em; | |
| } | |
| .ui.celled.ordered.list .item { | |
| padding-left: 2em; | |
| padding-right: 2em; | |
| } | |
| .ui.celled.ordered.list .item:before { | |
| left: 0.5em; | |
| } | |
| .ui.celled.ordered.list .item .list { | |
| margin-left: -2em; | |
| margin-right: -2em; | |
| } | |
| /* Celled Horizontal */ | |
| .ui.horizontal.celled.list { | |
| margin-left: 0em; | |
| } | |
| .ui.horizontal.celled.list .item { | |
| border-top: none; | |
| border-left: 1px solid rgba(0, 0, 0, 0.1); | |
| margin: 0em; | |
| padding-left: 0.75em; | |
| padding-right: 0.75em; | |
| line-height: 0.6; | |
| } | |
| .ui.horizontal.celled.list .item:last-child { | |
| border-bottom: none; | |
| border-right: 1px solid rgba(0, 0, 0, 0.1); | |
| } | |
| /*------------------- | |
| Relaxed | |
| --------------------*/ | |
| .ui.relaxed.list:not(.horizontal) .item { | |
| padding-top: 0.5em; | |
| padding-bottom: 0.5em; | |
| } | |
| .ui.horizontal.relaxed.list .item { | |
| padding-left: 1.25em; | |
| padding-right: 1.25em; | |
| } | |
| .ui.very.relaxed.list:not(.horizontal) .item { | |
| padding-top: 1em; | |
| padding-bottom: 1em; | |
| } | |
| .ui.horizontal.very.relaxed.list .item { | |
| padding-left: 2em; | |
| padding-right: 2em; | |
| } | |
| /*------------------- | |
| Sizes | |
| --------------------*/ | |
| .ui.mini.list .item { | |
| font-size: 0.7rem; | |
| } | |
| .ui.tiny.list .item { | |
| font-size: 0.8125rem; | |
| } | |
| .ui.small.list .item { | |
| font-size: 0.875rem; | |
| } | |
| .ui.list .item { | |
| font-size: 1em; | |
| } | |
| .ui.large.list .item { | |
| font-size: 1.125rem; | |
| } | |
| .ui.big.list .item { | |
| font-size: 1.25rem; | |
| } | |
| .ui.huge.list .item { | |
| font-size: 1.375rem; | |
| } | |
| .ui.massive.list .item { | |
| font-size: 1.5rem; | |
| } | |
| /* | |
| * # Statistic | |
| * | |
| * | |
| * Copyright 2013 Contributors | |
| * Released under the MIT license | |
| * http://opensource.org/licenses/MIT | |
| * | |
| * Released: Aug 20, 2013 | |
| */ | |
| /******************************* | |
| Statistic | |
| *******************************/ | |
| .ui.statistic { | |
| text-align: center; | |
| } | |
| /******************************* | |
| Content | |
| *******************************/ | |
| .ui.statistic > .number { | |
| font-size: 4em; | |
| font-weight: bold; | |
| color: rgba(0, 0, 0, 0.7); | |
| } | |
| .ui.statistic > .description { | |
| opacity: 0.8; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment