Merge branch 'tippy-prune' into staging

This commit is contained in:
David Benqué
2019-11-08 14:49:06 +00:00
8 changed files with 50 additions and 32 deletions

View File

@@ -1,5 +1,6 @@
@colortheme_font: 'Open Sans', 'Helvetica Neue', sans-serif;
@colortheme_app-font-size: 16px;
@colortheme_app-font-size-small: 13px;
@colortheme_app-font: @colortheme_app-font-size @colortheme_font;
@colortheme_logo-1: #326599;
@@ -167,6 +168,7 @@
@cryptpad_color_blue: #4591C4;
@cryptpad_color_grey: #999999;
@cryptpad_color_light_grey: #e0e0e0;
@cryptpad_header_col: #1E1F1F;
@cryptpad_text_col: #3F4141;
@cryptpad_color_light_blue: #00b7d8;

View File

@@ -7,27 +7,25 @@
.cp-limit-container {
@colortheme_green: #5cb85c;
display: inline-flex;
flex-flow: column-reverse;
flex-flow: column;
width: 100%;
margin-top: 20px;
margin: 20px 0px;
.cp-limit-bar {
display: inline-flex;
justify-content: center;
align-items: center;
max-width: 100%;
margin: 3px;
margin: 5px;
box-sizing: border-box;
border-top: 1px solid #999;
border-radius: 3px;
background: white;
position: relative;
text-align: center;
width: ~"calc(100% - 6px)";
height: 35px;
line-height: 25px;
width: ~"calc(100% - 10px)";
height: 10px;
overflow: hidden;
.cp-limit-usage {
height: 100%;
height: 10px;
display: inline-block;
background: blue;
position: absolute;
@@ -44,15 +42,15 @@
background: red;
}
}
.cp-limit-usage-text {
position: relative;
color: grey;
text-shadow: 1px 0 2px white, 0 1px 2px white, -1px 0 2px white, 0 -1px 2px white;
z-index: 2; // .usageText
font-size: @colortheme_app-font-size;
font-weight: bold;
}
}
.cp-limit-usage-text {
color: @cryptpad_text_col;
margin-left: 5px;
z-index: 2; // .usageText
font-size: @colortheme_app-font-size-small;
}
.cp-limit-buttons {
display: flex;
flex-wrap: wrap;
@@ -62,7 +60,8 @@
height: 25px;
display: inline-flex;
align-items: center;
min-width: 200px;
min-width: 150px;
margin: 3px 5px;
width: 50%;
padding-top: 0;
padding-bottom: 0;

View File

@@ -6,13 +6,29 @@
& {
.tippy-tooltip.cryptpad-theme {
/* Your styling here. Example: */
background-color: white;
box-shadow: 2px 2px 10px #000;
font-weight: bold;
background-color: @cryptpad_color_light_grey;
border-radius: 0px;
// box-shadow: 2px 2px 10px #000;
// font-weight: bold;
color: #333;
overflow-wrap: break-word;
[x-circle] {
background-color: unset;
}
}
.tippy-popper {
@arrow-color:@cryptpad_color_light_grey;
&[x-placement^='top'] .tippy-arrow {
border-top-color: @arrow-color;
}
&[x-placement^='bottom'] .tippy-arrow {
border-bottom-color: @arrow-color;
}
&[x-placement^='left'] .tippy-arrow {
border-left-color: @arrow-color;
}
&[x-placement^='right'] .tippy-arrow {
border-right-color: @arrow-color;
}
}
}