mirror of
https://github.com/LinkStackOrg/LinkStack.git
synced 2025-01-09 16:53:22 +01:00
62c9baba23
Added the long planned button editor. This solution does not look optimal, but works... mostly. This solution is implemented with JavaScript and the current versions code is very unorganized mostly uncommented and the HTML is still mostly done with inline code. I hope I will fix this in future revisions. To learn more about the new button editor, read: https://littlelink-custom.com/blog/upcoming-features/ https://littlelink-custom.com/blog/progress-of-the-new-button-editor/
479 lines
10 KiB
CSS
Vendored
479 lines
10 KiB
CSS
Vendored
|
|
/*CSS RESET*/
|
|
html, body, div, span, applet, object, iframe,
|
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
|
a, abbr, acronym, address, big, cite, code,
|
|
del, dfn, em, font, img, ins, kbd, q, s, samp,
|
|
small, strike, strong, sub, sup, tt, var,
|
|
dl, dt, dd, ol, ul, li,
|
|
fieldset, form, label, legend,
|
|
table, caption, tbody, tfoot, thead, tr, th, td {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
outline: 0;
|
|
font-weight: inherit;
|
|
font-style: inherit;
|
|
font-size: 100%;
|
|
vertical-align: baseline;
|
|
|
|
}
|
|
|
|
/***********************/
|
|
|
|
body {
|
|
|
|
|
|
|
|
}
|
|
|
|
.wrap {
|
|
position:relative;
|
|
margin:0 auto;
|
|
width:900px;
|
|
color: white;
|
|
opacity: 1;
|
|
font-family: Arial,Verdana,sans-serif;
|
|
|
|
|
|
|
|
}
|
|
|
|
#main-header{
|
|
width:100%;
|
|
float:left;
|
|
padding:15px 0;
|
|
padding-left:0px;
|
|
padding-top:30px;
|
|
/*background:rgba(7,164,249,0.84);*/
|
|
background: rgba(21,15,15,0.83);
|
|
padding-left: 20px;
|
|
padding-bottom: 15px;
|
|
box-shadow: 2px 6px 8px 6px black;
|
|
/*border: 1px solid rgba(255, 255, 255, 0.1);*/
|
|
margin-bottom: 30px;
|
|
height:40px;
|
|
margin-top:0px;
|
|
border-bottom:thin solid #0c84ec;
|
|
|
|
}
|
|
|
|
#left{
|
|
|
|
float:left;
|
|
margin-top:0px;
|
|
margin-left:-75px;
|
|
}
|
|
|
|
#info {
|
|
right:0px;
|
|
position: absolute;
|
|
margin-top: -15px;
|
|
|
|
}
|
|
|
|
#info section {
|
|
|
|
float:left;
|
|
}
|
|
#cogs {
|
|
|
|
margin-left:50px;
|
|
margin-top:-5px;
|
|
}
|
|
|
|
#download {
|
|
|
|
margin-left:10px;
|
|
margin-top:-5px;
|
|
}
|
|
|
|
|
|
#user {
|
|
float: left;
|
|
margin-right:10px;
|
|
}
|
|
#mybutton {
|
|
|
|
margin-top:-5px;
|
|
float:left;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
|
background: url('../images/texture.jpg');
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
[draggable] {
|
|
-moz-user-select: none;
|
|
-khtml-user-select: none;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
#toolbar {
|
|
|
|
|
|
float:left;
|
|
width: 140px;
|
|
margin-left: 8px;
|
|
margin-right:-10px;
|
|
|
|
}
|
|
|
|
#surface {
|
|
|
|
margin-left:5px;
|
|
|
|
border: 0px solid black;
|
|
|
|
width:863px;
|
|
height: 710px;
|
|
display: inline-block;
|
|
|
|
/*float: left;*/
|
|
box-shadow: 13px 10px 12px black;
|
|
|
|
|
|
|
|
|
|
|
|
border: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 0;
|
|
-webkit-background-origin: border-box;
|
|
-moz-background-origin: border;
|
|
background-origin: border-box;
|
|
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, .15)), to(rgba(0, 0, 0, .25))), -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, .15)), color-stop(0.501, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0)));
|
|
background: -moz-linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .25)), -moz-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
|
|
background: linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .25)), linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
#trash {
|
|
|
|
|
|
top:525px;
|
|
margin-left:10px;
|
|
position: absolute;
|
|
|
|
}
|
|
|
|
#trash img {
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
|
|
|
|
#tool-bar {
|
|
|
|
padding:10px;
|
|
margin-left: 10px;
|
|
|
|
}
|
|
#toolbar-icon img{
|
|
|
|
width:100px;
|
|
height: 100px;
|
|
|
|
|
|
}
|
|
|
|
#vertical-list {
|
|
display: none;
|
|
|
|
}
|
|
|
|
.button-set {
|
|
|
|
padding-top:5px;
|
|
padding-bottom: 5px;
|
|
clear: both;
|
|
height: 58px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.button, .button:before, .button:after {
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
border-radius: 35px;
|
|
}
|
|
|
|
.button {
|
|
font-family: 'pictos';
|
|
font-size: 16px;
|
|
line-height: 20px;
|
|
padding-right:5px;
|
|
color: rgba(0,0,0,0.5);
|
|
text-shadow: rgba(0,0,0,0.1) 0px -2px 1px, rgb(255,255,255) 0px 1px 2px;
|
|
|
|
width: 43px;
|
|
height: 43px;
|
|
padding: 10px;
|
|
text-indent: -2px;
|
|
margin: 10px auto;
|
|
|
|
position: static;
|
|
z-index: 50;
|
|
cursor: pointer;
|
|
margin-top: 10px;
|
|
|
|
background-color: transparent;
|
|
border: rgba(0,0,0,0.3) 1px solid;
|
|
border-top-color: rgba(0,0,0,0.1);
|
|
border-left-color: rgba(0,0,0,0.2);
|
|
border-right-color: rgba(0,0,0,0.2);
|
|
border-bottom-color: rgba(0,0,0,0.3);
|
|
box-shadow: inset rgba(255,255,255,0.3) -5px -30px 10px,
|
|
inset rgba(255,255,255,0.3) 0px 30px 10px,
|
|
inset rgba(255,255,255,1) 0px 2px 1px,
|
|
rgba(0,0,0,0.4) 0px 10px 15px;
|
|
-webkit-transition: -webkit-box-shadow 0s ease-in-out;
|
|
-khtml-transition: -khtml-box-shadow 0s ease-in-out;
|
|
-moz-transition: -moz-box-shadow 0s ease-in-out;
|
|
-o-transition: -o-box-shadow 0s ease-in-out;
|
|
transition: box-shadow 0s ease-in-out;
|
|
|
|
background-image: -webkit-radial-gradient( 50% 0%, 8% 50%, hsla(0,0%,100%,.2) 0%, hsla(0,0%,100%,0) 100%),
|
|
-webkit-radial-gradient( 50% 100%, 12% 50%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 100%),
|
|
-webkit-radial-gradient( 0% 50%, 50% 7%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 100%),
|
|
-webkit-radial-gradient( 100% 50%, 50% 5%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 100%),
|
|
|
|
-webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%, 0%,0) 0%, hsla(0,0%, 0%,0) 3%, hsla(0,0%, 0%,.1) 3.5%),
|
|
-webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%,.1) 7.5%),
|
|
-webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,0) 2.2%);
|
|
|
|
|
|
margin-left:5px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.button:before, .button:after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
}
|
|
|
|
.button:before {
|
|
z-index: -50;
|
|
width: 43px;
|
|
height: 47px;
|
|
|
|
margin-top: -15px;
|
|
margin-left: -11px;
|
|
|
|
background: #666666;
|
|
background: -moz-linear-gradient(left, #666666 0%, #bbbbbb 50%, #666666 100%);
|
|
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#666666), color-stop(50%,#bbbbbb), color-stop(100%,#666666));
|
|
background: -webkit-linear-gradient(left, #666666 0%,#bbbbbb 50%,#666666 100%);
|
|
background: -o-linear-gradient(left, #666666 0%,#bbbbbb 50%,#666666 100%);
|
|
background: -ms-linear-gradient(left, #666666 0%,#bbbbbb 50%,#666666 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#666666',GradientType=1 );
|
|
background: linear-gradient(left, #666666 0%,#bbbbbb 50%,#666666 100%);
|
|
|
|
box-shadow: #000 0px 0px 2px;
|
|
}
|
|
.button:after {
|
|
z-index: -100;
|
|
width: 53px;
|
|
height: 53px;
|
|
margin-top: -34px;
|
|
margin-left: -16px;
|
|
background: rgba(0,0,0,0.1);
|
|
|
|
box-shadow: inset rgba(255,255,255,0.1) 0px -5px 5px,
|
|
rgba(0,0,0,0.1) 0px 3px 3px,
|
|
rgba(255,255,255,0.05) 0px -3px 3px;
|
|
}
|
|
.button:hover {
|
|
color: rgba(183,15,15,0.97);
|
|
text-shadow: #c16262 0px 0px 4px;
|
|
box-shadow: inset rgba(255,255,255,0.4) 0px -30px 15px,
|
|
inset rgba(255,255,255,0.2) -25px 25px 10px,
|
|
inset rgba(255,255,255,1) 0px 2px 1px,
|
|
rgba(0,0,0,0.4) 0px 10px 15px;
|
|
|
|
}
|
|
.button:active {
|
|
margin-top: 6px;
|
|
color: #fff;
|
|
box-shadow: inset rgba(255,255,255,0.4) 0px -30px 15px,
|
|
inset rgba(255,255,255,0.2) -25px 25px 10px,
|
|
inset rgba(255,255,255,1) 0px 2px 1px,
|
|
rgba(0,0,0,0.4) 0px 2px 3px;
|
|
}
|
|
.button:active:before {
|
|
height: 43px;
|
|
margin-top: -13px;
|
|
}
|
|
.button:active:after {
|
|
margin-top: -39px;
|
|
}
|
|
|
|
|
|
|
|
#mybutton {
|
|
|
|
|
|
display: inline-block;
|
|
padding: 5px 10px 6px;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
line-height: 1;
|
|
-moz-border-radius: 5px;
|
|
-webkit-border-radius: 5px;
|
|
|
|
position: relative;
|
|
cursor: pointer;
|
|
|
|
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
|
|
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
|
|
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
|
|
|
|
background-color: #ff5c00;
|
|
border-color: black;
|
|
|
|
|
|
}
|
|
|
|
#page-footer {
|
|
|
|
display: block;
|
|
clear:both;
|
|
margin-top: 100px;
|
|
border-top:2px solid rgba(167,167,167,0.71);
|
|
color: rgba(194,191,191,0.78);
|
|
font-family: Helvetica;
|
|
padding:20px;
|
|
width:70%;
|
|
margin-left:auto;
|
|
margin-right: auto;
|
|
|
|
|
|
|
|
}
|
|
|
|
#page-footer section {
|
|
text-align: center;
|
|
text-shadow: 5px 4px 10px black;
|
|
|
|
}
|
|
#page-footer ul {
|
|
margin-left:30%;
|
|
}
|
|
#page-footer li {
|
|
margin-right: 8px;
|
|
margin-left:auto;
|
|
display: inline;
|
|
}
|
|
|
|
|
|
|
|
#dim {
|
|
|
|
position:absolute;
|
|
top:0;
|
|
left:0;
|
|
width:100%;
|
|
height: 100%;
|
|
z-index:9999;
|
|
background:url('../images/pattern.gif');
|
|
}
|
|
|
|
.circle {
|
|
background-color: rgba(0,0,0,0);
|
|
border:5px solid rgba(0,183,229,0.9);
|
|
opacity:.9;
|
|
border-right:5px solid rgba(0,0,0,0);
|
|
border-left:5px solid rgba(0,0,0,0);
|
|
border-radius:50px;
|
|
box-shadow: 0 0 35px #2187e7;
|
|
width:50px;
|
|
height:50px;
|
|
margin:0 auto;
|
|
|
|
-moz-animation:spinPulse 1s infinite ease-in-out;
|
|
-webkit-animation:spinPulse 1s infinite linear;
|
|
z-index:10000;
|
|
}
|
|
.circle1 {
|
|
background-color: rgba(0,0,0,0);
|
|
border:5px solid rgba(0,183,229,0.9);
|
|
opacity:.9;
|
|
border-left:5px solid rgba(0,0,0,0);
|
|
border-right:5px solid rgba(0,0,0,0);
|
|
border-radius:50px;
|
|
box-shadow: 0 0 15px #2187e7;
|
|
width:30px;
|
|
height:30px;
|
|
margin:0 auto;
|
|
position:relative;
|
|
top:-50px;
|
|
|
|
-moz-animation:spinoffPulse 1s infinite linear;
|
|
-webkit-animation:spinoffPulse 1s infinite linear;
|
|
z-index:10000;
|
|
}
|
|
@-moz-keyframes spinPulse {
|
|
0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7;}
|
|
50% { -moz-transform:rotate(145deg); opacity:1; }
|
|
100% { -moz-transform:rotate(-320deg); opacity:0; }
|
|
}
|
|
@-moz-keyframes spinoffPulse {
|
|
0% { -moz-transform:rotate(0deg); }
|
|
100% { -moz-transform:rotate(360deg); }
|
|
}
|
|
@-webkit-keyframes spinPulse {
|
|
0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; }
|
|
50% { -webkit-transform:rotate(145deg); opacity:1;}
|
|
100% { -webkit-transform:rotate(-320deg); opacity:0; }
|
|
}
|
|
@-webkit-keyframes spinoffPulse {
|
|
0% { -webkit-transform:rotate(0deg); }
|
|
100% { -webkit-transform:rotate(360deg); }
|
|
}
|
|
|
|
|
|
#v-align {
|
|
|
|
|
|
top:50%;
|
|
left:50%;
|
|
position:absolute;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|