Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Correct and add styles v2

Browse source
This commit is contained in:
ShimaginAndrey 2021-11-18 17:45:51 +03:00
parent c83d0f548a
commit 581b7f690f
9 changed files with 51 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
apps/common/mobile/resources/less/comments.less
View file

@ -1,5 +1,5 @@
@comment-date: #6d6d72;
@swipe-icon: rgba(0, 0, 0, 0.12);
@swipe-icon: #E5E5E5;
@import './ios/comments';
@import './material/comments';
@ -131,6 +131,7 @@
display: flex;
justify-content: center;
height: 40px;
background-color: @background-primary;
.icon-swipe {
margin-top: 8px;
width: 40px;
@ -144,7 +145,7 @@
#view-comment-popover, #view-comment-sheet {
.toolbar {
position: fixed;
background-color: @white;
background-color: @background-primary;
box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2), 0px 4px 5px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14);
.link {
--f7-toolbar-link-color: @brandColor;
@ -198,7 +199,7 @@
.page-current-comment {
position: relative;
.page-content {
background-color: @white;
background-color: @background-primary;
}
.comment-list {
ul {

21
apps/common/mobile/resources/less/common-ios.less
View file

@ -24,7 +24,11 @@
--f7-list-button-text-color: @brandColor;
--f7-dialog-bg-color-rgb: @background-secondary;
--f7-dialog-title-text-color: @text-normal;
--f7-dialog-text-color: @text-normal;
--f7-dialog-button-text-color: @brandColor;
--f7-dialog-border-divider-color: @background-menu-divider;
// Main Toolbar
#editor-navbar.navbar .right a + a,
@ -290,6 +294,7 @@
align-items: center;
justify-content: center;
&.active {
color: @brandColor;
background-color: var(--button-active-opacity);
}
}
@ -377,13 +382,13 @@
}
.button-fill {
color: @brandColor;
background-color: @fill-white;
color: @text-normal;
background-color: @background-primary;
}
.button-red {
color: @text-error;
background-color: @fill-white;
background-color: @background-primary;
}
.buttons-list {
@ -427,7 +432,7 @@
}
.dialog {
background-color: rgba(var(--f7-dialog-bg-color-rgb), 1);
background-color: var(--f7-dialog-bg-color-rgb);
}
#color-picker {
@ -512,10 +517,14 @@
font-size: 14px;
font-weight: 400;
padding: 0 8px;
background-color: @fill-white;
background-color: @background-primary;
padding: 0 28px;
}
.searchbar input[type=search]::placeholder {
color: @text-tertiary;
}
.searchbar-inner {
&__left {
margin-right: 10px;
@ -586,7 +595,7 @@
height: 57px;
line-height: 57px;
font-size: 20px;
// color: @brandColor;
color: @text-normal;
white-space: normal;
text-overflow: ellipsis;
}

25
apps/common/mobile/resources/less/common-material.less
View file

@ -32,6 +32,16 @@
--f7-link-highlight-color: transparent;
--f7-link-touch-ripple-color: @touchColor;
--f7-actions-bg-color: @background-secondary;
--f7-actions-button-border-color: @background-menu-divider;
--f7-popover-bg-color: @background-secondary;
--f7-dialog-bg-color: @background-secondary;
--f7-dialog-title-text-color: @text-normal;
--f7-dialog-text-color: @text-secondary;
--f7-dialog-button-text-color: @brandColor;
.button {
--f7-touch-ripple-color: transparent;
}
@ -45,8 +55,6 @@
--f7-input-focused-border-color: @brandColor;
--f7-label-focused-text-color: @brandColor;
--f7-dialog-button-text-color: @brandColor;
.navbar {
--f7-touch-ripple-color: @touchColor;
.sheet-close {
@ -114,6 +122,9 @@
margin-left: 0;
border-radius: 0;
height: 32px;
i.icon-expand-down {
background: @brandColor;
}
}
label {
color: @text-normal;
@ -151,7 +162,6 @@
}
.button-fill {
color: @brand-text-on-brand;
// background-color: @brandColor;
background-color: transparent;
}
@ -302,7 +312,7 @@
margin-left: 0;
}
&.active {
// color: @white;
color: @brandColor;
background-color: var(--button-active-opacity);
// i.icon {
// background-color: @white;
@ -514,6 +524,11 @@
a.link {
padding: 0 16px;
}
a.link.searchbar-enable {
i.icon-search {
background-color: @toolbar-icons;
}
}
a.icon-only {
width: auto;
height: 56px;
@ -541,7 +556,7 @@
cursor: pointer;
line-height: 48px;
font-size: 16px;
color: rgba(0,0,0,.87);
color: @text-normal;
}
@media (min-width: 496px) {

6
apps/common/mobile/resources/less/icons.less
View file

@ -5,17 +5,17 @@ i.icon {
&.icon-paste {
width: 24px;
height: 24px;
.encoded-svg-uncolored-mask('<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 2H0V20H9V24H24V7H19V2H14V3H18V7H9V19H1V3H5V2ZM10 8H23V23H10V8Z" /><path d="M5 0H14V5H5V0Z" /><path fill-rule="evenodd" clip-rule="evenodd" d="M21 12H12V11H21V12Z" /><path fill-rule="evenodd" clip-rule="evenodd" d="M21 16H12V15H21V16Z" /><path fill-rule="evenodd" clip-rule="evenodd" d="M21 20H12V19H21V20Z" /></svg>');
.encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 2H0V20H9V24H24V7H19V2H14V3H18V7H9V19H1V3H5V2ZM10 8H23V23H10V8Z" /><path d="M5 0H14V5H5V0Z" /><path fill-rule="evenodd" clip-rule="evenodd" d="M21 12H12V11H21V12Z" /><path fill-rule="evenodd" clip-rule="evenodd" d="M21 16H12V15H21V16Z" /><path fill-rule="evenodd" clip-rule="evenodd" d="M21 20H12V19H21V20Z" /></svg>', @text-normal);
}
&.icon-copy {
width: 24px;
height: 24px;
.encoded-svg-uncolored-mask('<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M1 1H15V7H16V0H0V17H8V16H1V1Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M23 8H9V23H23V8ZM8 7V24H24V7H8Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M13 5H3V4H13V5Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8 9H3V8H8V9Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8 13H3V12H8V13Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M21 12H11V11H21V12Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M21 16H11V15H21V16Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M21 20H11V19H21V20Z"/></svg>');
.encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M1 1H15V7H16V0H0V17H8V16H1V1Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M23 8H9V23H23V8ZM8 7V24H24V7H8Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M13 5H3V4H13V5Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8 9H3V8H8V9Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8 13H3V12H8V13Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M21 12H11V11H21V12Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M21 16H11V15H21V16Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M21 20H11V19H21V20Z"/></svg>', @text-normal);
}
&.icon-cut {
width: 24px;
height: 24px;
.encoded-svg-uncolored-mask('<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#cut)"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.22427 22.2702C4.51527 23.1269 6.52738 22.7183 7.6592 21.0127C8.79101 19.3071 8.38572 17.2943 7.09472 16.4376C5.80372 15.5809 3.79161 15.9896 2.65979 17.6952C1.52798 19.4008 1.93328 21.4136 3.22427 22.2702ZM2.67135 23.1035C4.51208 24.325 7.11827 23.6364 8.49243 21.5656C9.8666 19.4948 9.48837 16.8259 7.64764 15.6044C5.80691 14.3829 3.20072 15.0714 1.82656 17.1422C0.452398 19.2131 0.830625 21.882 2.67135 23.1035Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M20.9158 22.2702C19.6248 23.1269 17.6127 22.7183 16.4809 21.0127C15.349 19.3071 15.7543 17.2943 17.0453 16.4376C18.3363 15.5809 20.3484 15.9896 21.4803 17.6952C22.6121 19.4008 22.2068 21.4136 20.9158 22.2702ZM21.4687 23.1035C19.628 24.325 17.0218 23.6364 15.6476 21.5656C14.2735 19.4948 14.6517 16.8259 16.4924 15.6044C18.3331 14.3829 20.9393 15.0714 22.3135 17.1422C23.6877 19.2131 23.3094 21.882 21.4687 23.1035Z"/><path d="M16.4924 15.6044L13.9037 12.4737L19.9552 0.675715C20.0693 0.446914 19.9552 0.172352 19.727 0.0808313C19.4416 -0.0106892 19.0993 0.0808312 18.9851 0.263872L12.0233 11.4212L5.17562 0.263872C5.06149 0.035071 4.71911 -0.0564496 4.43379 0.035071C4.14847 0.126592 4.03434 0.401153 4.14847 0.629955L10.2001 12.4279L7.64761 15.6044L9.2292 18L12.0233 13.4804L14.9108 18L16.4924 15.6044Z"/></g><defs><clipPath id="cut"><rect width="24" height="24"/></clipPath></defs></svg>');
.encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#cut)"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.22427 22.2702C4.51527 23.1269 6.52738 22.7183 7.6592 21.0127C8.79101 19.3071 8.38572 17.2943 7.09472 16.4376C5.80372 15.5809 3.79161 15.9896 2.65979 17.6952C1.52798 19.4008 1.93328 21.4136 3.22427 22.2702ZM2.67135 23.1035C4.51208 24.325 7.11827 23.6364 8.49243 21.5656C9.8666 19.4948 9.48837 16.8259 7.64764 15.6044C5.80691 14.3829 3.20072 15.0714 1.82656 17.1422C0.452398 19.2131 0.830625 21.882 2.67135 23.1035Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M20.9158 22.2702C19.6248 23.1269 17.6127 22.7183 16.4809 21.0127C15.349 19.3071 15.7543 17.2943 17.0453 16.4376C18.3363 15.5809 20.3484 15.9896 21.4803 17.6952C22.6121 19.4008 22.2068 21.4136 20.9158 22.2702ZM21.4687 23.1035C19.628 24.325 17.0218 23.6364 15.6476 21.5656C14.2735 19.4948 14.6517 16.8259 16.4924 15.6044C18.3331 14.3829 20.9393 15.0714 22.3135 17.1422C23.6877 19.2131 23.3094 21.882 21.4687 23.1035Z"/><path d="M16.4924 15.6044L13.9037 12.4737L19.9552 0.675715C20.0693 0.446914 19.9552 0.172352 19.727 0.0808313C19.4416 -0.0106892 19.0993 0.0808312 18.9851 0.263872L12.0233 11.4212L5.17562 0.263872C5.06149 0.035071 4.71911 -0.0564496 4.43379 0.035071C4.14847 0.126592 4.03434 0.401153 4.14847 0.629955L10.2001 12.4279L7.64761 15.6044L9.2292 18L12.0233 13.4804L14.9108 18L16.4924 15.6044Z"/></g><defs><clipPath id="cut"><rect width="24" height="24"/></clipPath></defs></svg>', @text-normal);
}
&.icon-prev:after, &.icon-next:after {
content: none;

2
apps/common/mobile/resources/less/material/contextmenu.less
View file

@ -19,7 +19,7 @@
}
.list-button {
color: #212121;
color: @text-normal;
}
//.item-link {

2
apps/common/mobile/resources/less/material/icons.less
View file

@ -3,7 +3,7 @@
.device-android {
i.icon {
&.icon_mask {
background-color: black;
background-color: @text-normal;
}
&.icon-logo {
width: 100px;

8
apps/documenteditor/mobile/src/less/app.less
View file

@ -65,7 +65,7 @@
.page-review {
--f7-toolbar-link-color: @brandColor;
.toolbar {
// background-color: @white;
background-color: @background-secondary;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
position: absolute;
#btn-reject-change {
@ -91,18 +91,18 @@
.user-name {
font-size: 17px;
line-height: 22px;
color: @black;
color: @text-normal;
margin: 0;
}
.date-change {
font-size: 14px;
line-height: 18px;
color: @darkGray;
color: @text-secondary;
margin: 0;
margin-top: 3px;
}
.text {
color: @black;
color: @text-normal;
font-size: 15px;
line-height: 20px;
margin: 0;

4
apps/documenteditor/mobile/src/less/icons-ios.less
View file

@ -129,13 +129,13 @@
&.icon-format-dotx {
width: 30px;
height: 30px;
.encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 33 33"><defs><style>.cls-1{fill:#446995;}.cls-2{fill:#fff;}.cls-3{fill:#446995;}</style></defs><g><rect id="Rectangle_20" data-name="Rectangle 20" width="33" height="33" fill="none"/><path id="Path_38" data-name="Path 38" d="M12.223,119.714c1.251-.066,2.5-.115,3.752-.177.875,4.123,1.771,8.239,2.718,12.343.744-4.239,1.567-8.464,2.363-12.7,1.317-.042,2.633-.109,3.944-.183-1.488,5.917-2.792,11.886-4.417,17.767-1.1.531-2.745-.026-4.049.06-.876-4.042-1.9-8.061-2.679-12.123-.77,3.945-1.771,7.854-2.653,11.775-1.264-.06-2.535-.134-3.805-.213C6.3,130.892,5.02,125.553,4,120.167c1.125-.049,2.258-.093,3.384-.129.678,3.889,1.448,7.762,2.041,11.659C10.353,127.7,11.3,123.708,12.223,119.714Z" transform="translate(-2 -117)" class="cls-1" fill="@{brandColor}"/><g id="Group_5" data-name="Group 5" transform="translate(16 16)"><path id="Path_44" data-name="Path 44" d="M1.011,0H13.989A1.011,1.011,0,0,1,15,1.011V13.989A1.011,1.011,0,0,1,13.989,15H1.011A1.011,1.011,0,0,1,0,13.989V1.011A1.011,1.011,0,0,1,1.011,0Z" class="cls-1" fill="@{brandColor}"/><path id="Path_39" data-name="Path 39" d="M5.794,13.25V3.911H9.258V2.25h-9V3.911H3.729V13.25Z" transform="translate(2.742 -0.25)" class="cls-2" fill="#fff" /></g></g></svg>')
.encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" width="21" height="19" viewBox="0 0 21 19" fill="#000"><path fill-rule="evenodd" d="M10.9985 9c-.5522 0-.99996.44772-.99996 1v8c0 .5523.44776 1 .99996 1h9c.5523 0 1-.4477 1-1v-8c0-.55228-.4477-1-1-1h-9zm4 8v-5h-2v-1h5v1h-2v5h-1z"/><path d="M7.97326.40492L6.48043.47623 5.38941 5.15309l-.77467 3.31162-.87852-5.09363L3.25428.69187.99854.77754l1.29895 6.21515.96522 4.51801 2.53697.1427.61204-2.63941L7.5681 3.8027l1.09681 5.03141.33363 1.45299V10c0-.99111.72092-1.81383 1.66696-1.9724L8.98193.35832l-1.00867.0466zM10.8976 8.0025L10.9985 8h2.0571l.8934-3.68759L14.9985 0l-2.6289.12215-.4155 2.19607-1.0565 5.68428z"/></svg>')
}
&.icon-format-ott {
width: 30px;
height: 30px;
.encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 33 33"><defs><clipPath id="clip-ott"><rect width="33" height="33"/></clipPath><style>.cls-1{fill:#446995;}</style></defs><g id="ott" clip-path="url(#clip-ott)"><rect id="Rectangle_20" data-name="Rectangle 20" width="33" height="33" fill="none"/><path id="Path_33" data-name="Path 33" d="M125.173,121h0c-.046-.03-.093-.059-.141-.088a6.133,6.133,0,0,0-2.467-.869,6.014,6.014,0,0,0-4.309,1.188,6.223,6.223,0,0,0-2.892-1.147,5.965,5.965,0,0,0-4.039,1l-.036.024a.176.176,0,0,0-.049.125.145.145,0,0,0,.126.158l.019,0a.019.019,0,0,0,.009,0,5.781,5.781,0,0,1,2.005-.111,6.41,6.41,0,0,1,4.782,2.669c.06.081.115.076.178,0a6.288,6.288,0,0,1,6.194-2.735c.136.017.27.038.4.064.047.009.119.024.161.03.08.011.123-.071.123-.159A.155.155,0,0,0,125.173,121Z" transform="translate(-94.24 -116)" class="cls-1" fill="@{brandColor}"/><path id="Path_34" data-name="Path 34" d="M126.894,125.978a.175.175,0,0,0-.022-.011,11.686,11.686,0,0,0-4.905-1.082,11.924,11.924,0,0,0-7.444,2.647,11.725,11.725,0,0,0-5.251-1.245,11.884,11.884,0,0,0-7.176,2.441.229.229,0,0,0-.022.016.217.217,0,0,0-.073.167.2.2,0,0,0,.191.211.167.167,0,0,0,.037,0,.118.118,0,0,0,.023-.008,11.679,11.679,0,0,1,3.71-.608c3.429,0,6.486.9,8.787,3.315a.093.093,0,0,1,.016.016.172.172,0,0,0,.123.052.18.18,0,0,0,.147-.078s.075-.115.111-.171a12.1,12.1,0,0,1,10.479-5.315c.306,0,.611.014.912.037l.273.022a.2.2,0,0,0,.191-.211A.211.211,0,0,0,126.894,125.978Z" transform="translate(-100 -115.885)" class="cls-1" fill="@{brandColor}"/><g id="Group_5" data-name="Group 5" transform="translate(16 16)"><path id="Path_44" data-name="Path 44" d="M1.011,0H13.989A1.011,1.011,0,0,1,15,1.011V13.989A1.011,1.011,0,0,1,13.989,15H1.011A1.011,1.011,0,0,1,0,13.989V1.011A1.011,1.011,0,0,1,1.011,0Z" class="cls-1" fill="@{brandColor}"/><path id="Path_39" data-name="Path 39" d="M5.794,13.25V3.911H9.258V2.25h-9V3.911H3.729V13.25Z" transform="translate(2.742 -0.25)" fill="#fff"/></g></g></svg>')
.encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" width="22" height="18" viewBox="0 0 22 18" fill="none"><path fill-rule="evenodd" d="M18.9524.65678l-.0785-.04649-.0201-.0117c-.5256-.30277-1.1045-.50192-1.7196-.57134-1.0875-.12282-2.1267.17515-3.0048.78185-.6015-.40708-1.2825-.67215-2.0156-.75492-1.0105-.11403-1.9792.13581-2.81586.65904l-.01038.00672-.01425.00908c-.02031.01897-.03405.04847-.03405.0816 0 .0576.03846.1042.08723.1042.00451 0 .00893-.00082.01364-.00199s.00253-.0006.00375-.00103l.00223-.00072c.45-.09928.91919-.12738 1.39759-.07341 1.3427.15138 2.5128.6464 3.3337 1.75747.0429.05327.0807.05.1242-.00281 1.0326-1.42836 2.6162-1.99279 4.3181-1.8009l.2817.04156.0281.00521.083.01434c.0562.00738.0864-.04648.0864-.10432-.0005-.0391-.0146-.07259-.0465-.09144zM11.9985 8c-.5522 0-1 .44772-1 1v8c0 .5523.4477 1 1 1h9c.5523 0 1-.4477 1-1V9c0-.55228-.4477-1-1-1h-9zm4 8v-5h-2v-1h5v1h-2v5h-1zm.9693-10.32247l.0118.00606c.043.02436.0729.07716.0726.13898 0 .0857-.0584.15489-.1298.15489-.0028 0-.1275-.01136-.1866-.01686l-.6219-.02634c-2.9255 0-5.5537 1.2826-7.14778 3.88374l-.04596.07604-.02989.04912c-.02395.03488-.05947.05694-.09989.05694-.03268 0-.06192-.0141-.08468-.0381-.00393-.00456-.00717-.00889-.01089-.01217C7.12513 8.18814 5.0403 7.52852 2.70144 7.52852c-.87978 0-1.73011.1563-2.53139.44385-.00487.00226-.00932.00362-.01442.00519l-.00138.00043c-.00834.00199-.01697.00351-.02541.00351-.07173 0-.12982-.06955-.12982-.1549 0-.05034.02012-.09413.04994-.12152l.00484-.00414.00978-.00804c1.39796-1.1263 3.08205-1.78393 4.89586-1.78393 1.2755 0 2.48742.32583 3.58111.91041C9.97345 5.60211 11.726 4.88477 13.6191 4.88477c1.1847 0 2.3134.28192 3.3454.79121l.0033.00155z" fill="#000"/></svg>')
}

2
apps/documenteditor/mobile/src/less/icons-material.less
View file

@ -73,7 +73,7 @@
&.icon-plus {
width: 24px;
height: 24px;
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{toolbar-icons}"><g><path d="M21,12h-9v9h-2v-9H1v-2h9V1h2v9h9V12z"/></g></svg>', @toolbar-icons);
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{fill-white}"><g><path d="M21,12h-9v9h-2v-9H1v-2h9V1h2v9h9V12z"/></g></svg>', @fill-white);
}
&.icon-expand-down {
width: 17px;