Correct and add styles v3

This commit is contained in:
ShimaginAndrey 2021-11-21 17:50:37 +03:00
parent 739cf52862
commit 4bd582fc0d
6 changed files with 30 additions and 26 deletions

View file

@ -6,6 +6,7 @@
--background-secondary: #333; --background-secondary: #333;
--background-tertiary: #131313; --background-tertiary: #131313;
--background-menu-divider: fade(#545458, 65%); --background-menu-divider: fade(#545458, 65%);
--background-button: #333333;
--text-normal: fade(#FFF, 87%); --text-normal: fade(#FFF, 87%);
--text-secondary: fade(#FFF, 60%); --text-secondary: fade(#FFF, 60%);

View file

@ -11,6 +11,7 @@
--background-secondary: #FFF; --background-secondary: #FFF;
--background-tertiary: #EFF0F5; --background-tertiary: #EFF0F5;
--background-menu-divider: fade(#3C3C43, 36%); --background-menu-divider: fade(#3C3C43, 36%);
--background-button: #EFF0F5;
--text-normal: #000000; --text-normal: #000000;
--text-secondary: fade(#000, 60%); --text-secondary: fade(#000, 60%);
@ -43,6 +44,7 @@
@background-secondary: var(--background-secondary); @background-secondary: var(--background-secondary);
@background-tertiary: var(--background-tertiary); @background-tertiary: var(--background-tertiary);
@background-menu-divider: var(--background-menu-divider); @background-menu-divider: var(--background-menu-divider);
@background-button: var(--background-button);
@text-normal: var(--text-normal); @text-normal: var(--text-normal);
@text-secondary: var(--text-secondary); @text-secondary: var(--text-secondary);

View file

@ -117,7 +117,7 @@
} }
#view-comment-sheet { #view-comment-sheet {
background-color: @white; background-color: @fill-white;
border-top-left-radius: 4px; border-top-left-radius: 4px;
border-top-right-radius: 4px; border-top-right-radius: 4px;
height: 45%; height: 45%;
@ -136,7 +136,7 @@
margin-top: 8px; margin-top: 8px;
width: 40px; width: 40px;
height: 4px; height: 4px;
background: @swipe-icon; background: @background-menu-divider;
border-radius: 2px; border-radius: 2px;
} }
} }
@ -170,7 +170,7 @@
} }
#view-comment-popover { #view-comment-popover {
background-color: @white; background-color: @fill-white;
.pages { .pages {
position: absolute; position: absolute;
} }

View file

@ -141,6 +141,8 @@
--f7-list-item-text-text-color: @text-secondary; --f7-list-item-text-text-color: @text-secondary;
--f7-list-item-subtitle-text-color: @text-secondary; --f7-list-item-subtitle-text-color: @text-secondary;
--f7-searchbar-search-icon-color: @text-tertiary;
--f7-searchbar-input-clear-button-color: @text-tertiary;
--f7-list-chevron-icon-color: @text-tertiary; --f7-list-chevron-icon-color: @text-tertiary;
--f7-toggle-inactive-color: @background-menu-divider; --f7-toggle-inactive-color: @background-menu-divider;
@ -513,16 +515,15 @@
appearance: none; appearance: none;
border-radius: 5px; border-radius: 5px;
font-family: inherit; font-family: inherit;
color: @fill-black; color: @text-normal;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
padding: 0 8px; padding: 0 8px;
background-color: @background-primary; background-color: @background-button;
padding: 0 28px; padding: 0 28px;
} &::placeholder {
color: @text-tertiary;
.searchbar input[type=search]::placeholder { }
color: @text-tertiary;
} }
.searchbar-inner { .searchbar-inner {

View file

@ -1,7 +1,7 @@
.page-change { .page-change {
background-color: #FFFFFF; background-color: @fill-white;
.block-description { .block-description {
background-color: #fff; background-color: @fill-white;
padding-top: 15px; padding-top: 15px;
padding-bottom: 15px; padding-bottom: 15px;
margin: 0; margin: 0;
@ -11,18 +11,18 @@
#user-name { #user-name {
font-size: 17px; font-size: 17px;
line-height: 22px; line-height: 22px;
color: #000000; color: @fill-black;
margin: 0; margin: 0;
} }
#date-change { #date-change {
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 18px;
color: #6d6d72; color: @text-tertiary;
margin: 0; margin: 0;
margin-top: 3px; margin-top: 3px;
} }
#text-change { #text-change {
color: #000000; color: @fill-black;
font-size: 15px; font-size: 15px;
line-height: 20px; line-height: 20px;
margin: 0; margin: 0;
@ -155,7 +155,7 @@
.user-name { .user-name {
font-size: 17px; font-size: 17px;
line-height: 22px; line-height: 22px;
color: #000000; color: @fill-black;
margin: 0; margin: 0;
font-weight: bold; font-weight: bold;
} }
@ -167,7 +167,7 @@
margin-top: 0px; margin-top: 0px;
} }
.comment-text, .reply-text { .comment-text, .reply-text {
color: #000000; color: @fill-black;
font-size: 15px; font-size: 15px;
line-height: 25px; line-height: 25px;
margin: 0; margin: 0;
@ -233,7 +233,7 @@
.container-edit-comment { .container-edit-comment {
.page { .page {
background-color: #FFFFFF; background-color: @fill-white;
} }
} }
@ -383,7 +383,7 @@
color: @brandColor; color: @brandColor;
} }
.page-add-comment { .page-add-comment {
background-color: #FFFFFF; background-color: @fill-white;
.wrap-comment, .wrap-reply { .wrap-comment, .wrap-reply {
padding: 16px 24px 0 16px; padding: 16px 24px 0 16px;
.header-comment { .header-comment {

View file

@ -1,6 +1,6 @@
.page-change { .page-change {
.block-description { .block-description {
background-color: #fff; background-color: @fill-white;
padding-top: 15px; padding-top: 15px;
padding-bottom: 15px; padding-bottom: 15px;
margin: 0; margin: 0;
@ -10,18 +10,18 @@
#user-name { #user-name {
font-size: 16px; font-size: 16px;
line-height: 22px; line-height: 22px;
color: #000000; color: @fill-black;
margin: 0; margin: 0;
} }
#date-change { #date-change {
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 18px;
color: #6d6d72; color: @text-tertiary;
margin: 0; margin: 0;
margin-top: 3px; margin-top: 3px;
} }
#text-change { #text-change {
color: #000000; color: @fill-black;
font-size: 15px; font-size: 15px;
line-height: 20px; line-height: 20px;
margin: 0; margin: 0;
@ -152,7 +152,7 @@
.user-name { .user-name {
font-size: 16px; font-size: 16px;
line-height: 22px; line-height: 22px;
color: #000000; color: @fill-black;
margin: 0; margin: 0;
} }
.comment-date, .reply-date { .comment-date, .reply-date {
@ -163,7 +163,7 @@
margin-top: 0px; margin-top: 0px;
} }
.comment-text, .reply-text { .comment-text, .reply-text {
color: #000000; color: @fill-black;
font-size: 15px; font-size: 15px;
line-height: 25px; line-height: 25px;
margin: 0; margin: 0;
@ -471,7 +471,7 @@
} }
} }
.page-add-comment { .page-add-comment {
background-color: #FFFFFF; background-color: @fill-white;
} }
.header-comment { .header-comment {
justify-content: flex-start; justify-content: flex-start;
@ -483,7 +483,7 @@
} }
.page-edit-comment, .page-add-reply, .page-edit-reply { .page-edit-comment, .page-add-reply, .page-edit-reply {
background-color: #FFFFFF; background-color: @fill-white;
.header-comment { .header-comment {
justify-content: flex-start; justify-content: flex-start;
} }