[scaling] repaired style for some components
This commit is contained in:
Maxim Kadushkin
parent
f07b04f0de
commit
ed7f30f957
|
|
@ -119,6 +119,14 @@ Common.Utils = _.extend(new(function() {
|
|||
isMobile = /android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od|ad)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent || navigator.vendor || window.opera),
|
||||
me = this,
|
||||
checkSize = function() {
|
||||
var str_mq_150 = "screen and (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9), " +
|
||||
"screen and (min-resolution: 1.5dppx) and (max-resolution: 1.9dppx)";
|
||||
if ( window.matchMedia(str_mq_150).matches ) {
|
||||
$(document.body).addClass('pixel-ratio__1_5');
|
||||
} else {
|
||||
$(document.body).removeClass('pixel-ratio__1_5');
|
||||
}
|
||||
|
||||
me.zoom = 1;
|
||||
if (false && isChrome && !isOpera && !isMobile && document && document.firstElementChild && document.body) {
|
||||
// делаем простую проверку
|
||||
|
|
|
|||
|
|
@ -85,6 +85,12 @@
|
|||
*/
|
||||
:root {
|
||||
--bgX: 0px;
|
||||
|
||||
--pixel-ratio-factor: 1;
|
||||
|
||||
.pixel-ratio__1_5 {
|
||||
--pixel-ratio-factor: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.button-normal-icon(@icon-class, @index, @icon-size) {
|
||||
|
|
@ -330,3 +336,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.get-scaled-value(@v) {
|
||||
@scaledvalue: calc(@v / var(--pixel-ratio-factor));
|
||||
}
|
||||
|
|
@ -22,11 +22,13 @@
|
|||
margin: 4px;
|
||||
cursor: pointer;
|
||||
|
||||
.box-shadow(0 0 0 1px @gray);
|
||||
.get-scaled-value(1px);
|
||||
.box-shadow(0 0 0 @scaledvalue @gray);
|
||||
|
||||
&:hover,
|
||||
&.selected {
|
||||
.box-shadow(0 0 0 2px @primary);
|
||||
.get-scaled-value(2px);
|
||||
.box-shadow(0 0 0 @scaledvalue @primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -58,11 +60,13 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.box-shadow(0 0 0 1px @gray);
|
||||
.get-scaled-value(1px);
|
||||
.box-shadow(0 0 0 @scaledvalue @gray);
|
||||
|
||||
&:hover:not(.disabled),
|
||||
&.selected:not(.disabled) {
|
||||
.box-shadow(0 0 0 2px @primary);
|
||||
.get-scaled-value(2px);
|
||||
.box-shadow(0 0 0 @scaledvalue @primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -109,4 +109,8 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: calc(1px / @pixel-ratio-factor);
|
||||
}
|
||||
}
|
||||
|
|
@ -529,3 +529,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.item-equation {
|
||||
.get-scaled-value(1px);
|
||||
border: @scaledvalue solid @gray;
|
||||
.background-ximage-v2('toolbar/math.png', 1500px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
//
|
||||
// Global values
|
||||
// --------------------------------------------------
|
||||
@pixel-ratio-factor: var(--pixel-ratio-factor);
|
||||
|
||||
// Paths
|
||||
// -------------------------
|
||||
|
|
|
|||
|
|
@ -49,11 +49,13 @@
|
|||
width: 246px;
|
||||
height: @contents-menu-item-height;
|
||||
|
||||
.box-shadow(0 0 0 1px @gray);
|
||||
.get-scaled-value(1px);
|
||||
.box-shadow(0 0 0 @scaledvalue @gray);
|
||||
|
||||
&:hover,
|
||||
&.selected {
|
||||
.box-shadow(0 0 0 2px @primary);
|
||||
.get-scaled-value(2px);
|
||||
.box-shadow(0 0 0 @scaledvalue @primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -61,7 +63,8 @@
|
|||
background-color: transparent;
|
||||
|
||||
div {
|
||||
.box-shadow(0 0 0 2px @primary);
|
||||
.get-scaled-value(2px);
|
||||
.box-shadow(0 0 0 @scaledvalue @primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -91,7 +94,9 @@
|
|||
width: 12px;
|
||||
height: 12px;
|
||||
margin-right: 2px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
|
||||
.get-scaled-value(1px);
|
||||
border: @scaledvalue solid rgba(0, 0, 0, 0.2);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
|
@ -125,7 +130,8 @@
|
|||
opacity: 0.5;
|
||||
|
||||
&:hover {
|
||||
.box-shadow(0 0 0 1px @gray);
|
||||
.get-scaled-value(1px);
|
||||
.box-shadow(0 0 0 @scaledvalue @gray);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -175,22 +181,20 @@
|
|||
#control-settings-system-color > a.selected,
|
||||
#control-settings-system-color > a:hover {
|
||||
span {
|
||||
outline: 1px solid #000;
|
||||
border: 1px solid #fff;
|
||||
.get-scaled-value(1px);
|
||||
outline: @scaledvalue solid #000;
|
||||
border: @scaledvalue solid #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.item-equation {
|
||||
border: 1px solid @gray;
|
||||
.background-ximage-v2('toolbar/math.png', 1500px, @commonimage: true);
|
||||
}
|
||||
|
||||
.save-style-container {
|
||||
cursor: default;
|
||||
position: relative;
|
||||
padding: 14px 11px;
|
||||
border-left: 1px solid @gray;
|
||||
border-top: 1px solid @gray;
|
||||
|
||||
.get-scaled-value(1px);
|
||||
border-left: @scaledvalue solid @gray;
|
||||
border-top: @scaledvalue solid @gray;
|
||||
}
|
||||
|
||||
.save-style-link {
|
||||
|
|
@ -239,5 +243,7 @@
|
|||
position: absolute;
|
||||
z-index: @zindex-dropdown - 20;
|
||||
background-color: @gray-light;
|
||||
border: 1px solid @gray;
|
||||
|
||||
.get-scaled-value(1px);
|
||||
border: @scaledvalue solid @gray;
|
||||
}
|
||||
|
|
@ -117,11 +117,6 @@
|
|||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.item-equation {
|
||||
border: 1px solid @gray;
|
||||
.background-ximage-v2('toolbar/math.png', 1500px);
|
||||
}
|
||||
|
||||
#plugins-panel {
|
||||
.separator:first-child {
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -135,11 +135,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.item-equation {
|
||||
border: 1px solid @gray;
|
||||
.background-ximage-v2('toolbar/math.png', 1500px);
|
||||
}
|
||||
|
||||
#special-paste-container,
|
||||
#autocorrect-paste-container {
|
||||
position: absolute;
|
||||
|
|
|
|||
Loading…
Reference in a new issue