web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Update the lag icon

Browse Source
This commit is contained in:
yflory
2017-03-20 16:39:33 +01:00
parent 26edb77cf0
commit 29174b2922
3 changed files with 158 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
customize.dist/src/less/toolbar.less
View File

@@ -88,6 +88,73 @@
margin: auto;
}
}
.clag () {
background: transparent;
}
#newLag {
height: 20px;
width: 23px;
background: transparent;
display: inline-block;
padding: 3px;
margin: 3px;
vertical-align: top;
box-sizing: content-box;
span {
display: inline-block;
width: 4px;
margin: 0;
margin-right: 1px;
background: black;
vertical-align: bottom;
box-sizing: border-box;
border: 1px solid black;
transition: background 1s, border 1s;
&:last-child {
margin-right: 0;
}
&.bar1 { height: 5px; }
&.bar2 { height: 10px; }
&.bar3 { height: 15px; }
&.bar4 { height: 20px; }
}
&.lag0 {
span {
.clag();
border-color: red;
}
}
&.lag1 {
.bar2, .bar3, .bar4 { .clag(); }
span {
background-color: orange;
border-color: orange;
}
}
&.lag2 {
.bar3, .bar4 { .clag(); }
span {
background-color: orange;
border-color: orange;
}
}
&.lag3 {
.bar4 { .clag(); }
span {
background-color: green;
border-color: green;
}
}
&.lag4 {
span {
background-color: green;
border-color: green;
}
}
}
div {
white-space: normal;
&.cryptpad-back {

68
customize.dist/toolbar.css
View File

@@ -161,6 +161,74 @@
.cryptpad-toolbar .cryptpad-lag div {
margin: auto;
}
.cryptpad-toolbar #newLag {
height: 20px;
width: 23px;
background: transparent;
display: inline-block;
padding: 3px;
margin: 3px;
vertical-align: top;
box-sizing: content-box;
}
.cryptpad-toolbar #newLag span {
display: inline-block;
width: 4px;
margin: 0;
margin-right: 1px;
background: black;
vertical-align: bottom;
box-sizing: border-box;
border: 1px solid black;
transition: background 1s, border 1s;
}
.cryptpad-toolbar #newLag span:last-child {
margin-right: 0;
}
.cryptpad-toolbar #newLag span.bar1 {
height: 5px;
}
.cryptpad-toolbar #newLag span.bar2 {
height: 10px;
}
.cryptpad-toolbar #newLag span.bar3 {
height: 15px;
}
.cryptpad-toolbar #newLag span.bar4 {
height: 20px;
}
.cryptpad-toolbar #newLag.lag0 span {
background: transparent;
border-color: red;
}
.cryptpad-toolbar #newLag.lag1 .bar2,
.cryptpad-toolbar #newLag.lag1 .bar3,
.cryptpad-toolbar #newLag.lag1 .bar4 {
background: transparent;
}
.cryptpad-toolbar #newLag.lag1 span {
background-color: orange;
border-color: orange;
}
.cryptpad-toolbar #newLag.lag2 .bar3,
.cryptpad-toolbar #newLag.lag2 .bar4 {
background: transparent;
}
.cryptpad-toolbar #newLag.lag2 span {
background-color: orange;
border-color: orange;
}
.cryptpad-toolbar #newLag.lag3 .bar4 {
background: transparent;
}
.cryptpad-toolbar #newLag.lag3 span {
background-color: green;
border-color: green;
}
.cryptpad-toolbar #newLag.lag4 span {
background-color: green;
border-color: green;
}
.cryptpad-toolbar div {
white-space: normal;
}