web-apps/apps/common/mobile/resources/less/common-material.less

541 lines
14 KiB
Plaintext
Raw Normal View History

2020-10-14 09:00:05 +00:00
2021-11-09 09:44:27 +00:00
.device-android .app-layout {
2020-11-26 16:38:10 +00:00
@tabLinkColor: rgba(255,255,255,.7);
@red: #f44336;
2021-01-20 14:30:52 +00:00
@white: #fff;
@darkGreen: #40865c;
@darkGrey: #757575;
2021-11-10 21:18:55 +00:00
@text-normal: var(--text-normal);
2021-11-12 22:05:39 +00:00
@brand-text-on-brand: var(--brand-text-on-brand);
@touchColor: rgba(255,255,255,0.1);
2020-11-26 16:38:10 +00:00
--f7-navbar-shadow-image: none;
2021-11-04 21:11:52 +00:00
--f7-theme-color: @brandColor;
2021-11-05 17:48:28 +00:00
--f7-navbar-bg-color: @toolbar-background;
2021-11-09 20:33:54 +00:00
--f7-navbar-link-color: @fill-white;
--f7-navbar-text-color: @fill-white;
2021-04-15 09:42:44 +00:00
--f7-navbar-height: 56px;
2022-02-16 13:54:28 +00:00
--f7-list-bg-color: @background-primary;
2021-11-05 17:48:28 +00:00
--f7-subnavbar-bg-color: @toolbar-background;
2021-11-17 21:58:22 +00:00
--f7-subnavbar-link-color: @toolbar-icons;
2021-11-09 20:33:54 +00:00
--f7-subnavbar-text-color: @fill-white;
2021-04-15 09:42:44 +00:00
--f7-subnavbar-height: 56px;
2021-11-04 21:11:52 +00:00
--f7-radio-active-color: @brandColor;
--f7-toggle-active-color: @brandColor;
--f7-range-bar-active-bg-color: @brandColor;
--f7-range-knob-color: @brandColor;
2020-11-26 16:38:10 +00:00
--f7-range-knob-size: 16px;
2022-01-27 14:17:09 +00:00
--f7-list-item-after-text-color: @text-normal;
2020-11-26 16:38:10 +00:00
--f7-link-highlight-color: transparent;
--f7-link-touch-ripple-color: @touchColor;
2021-11-17 21:58:22 +00:00
--f7-actions-bg-color: @background-secondary;
2021-11-19 19:33:38 +00:00
--f7-actions-button-border-color: @background-menu-divider;
2021-11-17 21:58:22 +00:00
--f7-popover-bg-color: @background-secondary;
--f7-dialog-bg-color: @background-secondary;
--f7-dialog-text-color: @text-secondary;
--f7-dialog-title-text-color: @text-normal;
2021-11-19 19:33:38 +00:00
--f7-dialog-button-text-color: @brandColor;
2021-11-17 21:58:22 +00:00
2022-02-18 13:11:14 +00:00
--f7-picker-item-text-color: rgba(var(--text-normal), 0.45);
--f7-picker-item-selected-text-color: @text-normal;
2022-03-03 14:11:15 +00:00
--f7-input-bg-color: @background-primary;
--f7-input-placeholder-color: @text-secondary;
--f7-input-text-color: @text-normal;
.button {
--f7-touch-ripple-color: transparent;
}
2020-11-26 16:38:10 +00:00
2021-09-03 13:20:39 +00:00
.segmented {
.button {
--f7-touch-ripple-color: var(--f7-list-link-pressed-bg-color);
}
}
2021-11-04 21:11:52 +00:00
--f7-input-focused-border-color: @brandColor;
--f7-label-focused-text-color: @brandColor;
.navbar {
2021-07-09 11:44:11 +00:00
--f7-touch-ripple-color: @touchColor;
.sheet-close {
width: 56px;
height: 56px;
display: flex;
justify-content: center;
}
2021-08-20 09:29:31 +00:00
&-inner {
background: var(--f7-navbar-bg-color);
background-image: var(--f7-navbar-bg-image, var(--f7-bars-bg-image));
background-color: var(--f7-navbar-bg-color, var(--f7-bars-bg-color));
}
}
2021-04-15 09:42:44 +00:00
.page.page-with-subnavbar.page-with-logo {
.page-content {
--f7-page-navbar-offset: var(--f7-navbar-height);
}
}
2021-11-10 21:18:55 +00:00
.page {
--f7-text-color: @text-normal;
--f7-list-item-title-text-color: @text-normal;
--f7-list-item-text-text-color: @text-normal;
2021-11-22 13:08:18 +00:00
--f7-list-item-subtitle-text-color: @text-secondary;
2021-11-10 21:18:55 +00:00
--f7-block-title-text-color: @text-secondary;
--f7-label-text-color: @text-normal;
--f7-page-bg-color: @background-tertiary;
--f7-list-item-border-color: @background-menu-divider;
--f7-list-chevron-icon-color: @text-tertiary;
--f7-toggle-inactive-color: @background-menu-divider;
2021-11-18 21:09:53 +00:00
--f7-toggle-border-color: @background-menu-divider;
2021-11-17 21:58:22 +00:00
--f7-actions-button-text-color: @text-normal;
2021-11-18 21:09:53 +00:00
--f7-subnavbar-border-color: @background-menu-divider;
--f7-list-border-color: @background-menu-divider;
2021-11-10 21:18:55 +00:00
}
2021-06-17 15:58:45 +00:00
.add-popup {
2022-04-19 15:17:20 +00:00
.view {
.block-title {
// margin-bottom: 0;
// margin-top: 8px;
2021-06-17 15:58:45 +00:00
}
2021-10-04 12:59:28 +00:00
.add-image, .inputs-list {
2021-10-21 08:33:56 +00:00
ul:after {
2021-06-17 15:58:45 +00:00
display: none;
}
}
}
}
2022-04-19 15:17:20 +00:00
.coauth__sheet {
2021-08-23 14:45:42 +00:00
max-height: 65%;
}
2020-11-26 16:38:10 +00:00
// Buttons
.segmented {
.decrement, .increment {
display: flex;
border: none;
min-width: 40px;
margin-left: 0;
border-radius: 0;
height: 32px;
2021-11-18 14:45:51 +00:00
i.icon-expand-down {
background: @brandColor;
}
2020-11-26 16:38:10 +00:00
}
label {
2021-11-10 21:18:55 +00:00
color: @text-normal;
2020-11-26 16:38:10 +00:00
margin: 0 5px;
line-height: 32px;
}
}
.button {
2021-11-04 21:11:52 +00:00
--f7-button-text-color: @brandColor;
color: @brandColor;
2020-11-26 16:38:10 +00:00
text-align: center;
display: block;
2021-01-20 14:30:52 +00:00
border-radius: 2px;
line-height: 36px;
2020-11-26 16:38:10 +00:00
box-sizing: border-box;
appearance: none;
background: 0 0;
margin: 0;
2021-01-20 14:30:52 +00:00
height: 36px;
2020-11-26 16:38:10 +00:00
white-space: nowrap;
text-overflow: ellipsis;
font-size: 14px;
text-transform: uppercase;
font-family: inherit;
cursor: pointer;
2021-01-20 14:30:52 +00:00
min-width: 64px;
padding: 0 8px;
2020-11-26 16:38:10 +00:00
position: relative;
overflow: hidden;
outline: 0;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
2021-01-20 14:30:52 +00:00
.button-fill {
2021-11-12 22:05:39 +00:00
color: @brand-text-on-brand;
2021-05-30 13:34:15 +00:00
background-color: transparent;
2021-01-20 14:30:52 +00:00
}
.button-raised {
box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
}
.button-red {
2021-11-12 22:05:39 +00:00
color: @brand-text-on-brand;
2021-11-10 21:18:55 +00:00
background-color: @text-error;
2021-01-20 14:30:52 +00:00
}
.buttons-list {
2021-05-30 13:34:15 +00:00
ul {
2021-11-10 21:18:55 +00:00
background-color: @background-tertiary;
2021-05-30 13:34:15 +00:00
&::before, &::after {
display: none;
}
li {
margin: 20px 16px;
2021-11-10 21:18:55 +00:00
color: @fill-white;
2021-05-30 13:34:15 +00:00
border-radius: 2px;
text-transform: uppercase;
height: 36px;
min-height: 36px;
font-size: 14px;
}
2021-01-20 14:30:52 +00:00
}
}
2021-01-17 16:30:57 +00:00
.table-presets {
.button {
min-width: 0;
}
}
2020-11-26 16:38:10 +00:00
.button-fill .list-button {
2021-11-04 21:11:52 +00:00
background-color: @brandColor;
2021-11-12 22:05:39 +00:00
color: @brand-text-on-brand;
2020-11-26 16:38:10 +00:00
height: 36px;
text-align: center;
line-height: 36px;
text-transform: uppercase;
font-size: 14px;
font-weight: 500;
border-radius: 2px;
2021-05-30 13:34:15 +00:00
// margin: 20px 16px;
margin: 0;
2020-11-26 16:38:10 +00:00
}
.button-raised .list-button {
box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
}
.button-red .list-button {
2021-11-10 21:18:55 +00:00
background-color: @text-error;
2020-11-26 16:38:10 +00:00
}
// Tabs
.tab-buttons {
position: relative;
display: flex;
height: 100%;
width: 100%;
justify-content: space-between;
.tab-link {
2020-12-15 12:16:15 +00:00
justify-content: center;
2020-11-26 16:38:10 +00:00
height: 100%;
box-sizing: border-box;
padding-left: 0;
padding-right: 0;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
align-items: center;
color: @tabLinkColor;
2020-12-15 12:16:15 +00:00
i.icon {
opacity: 0.5;
}
2020-11-26 16:38:10 +00:00
&.tab-link-active {
2021-11-10 21:18:55 +00:00
color: @fill-white;
2020-12-15 12:16:15 +00:00
i.icon {
opacity: 1;
2021-11-10 06:39:21 +00:00
background-color: @fill-white;
2020-12-15 12:16:15 +00:00
}
2020-11-26 16:38:10 +00:00
}
}
.tab-link-highlight {
2021-11-09 20:33:54 +00:00
--f7-tabbar-link-active-border-color: @toolbar-icons;
2020-11-26 16:38:10 +00:00
position: absolute;
left: 0;
bottom: 0;
height: 3px;
}
}
// List
.list {
&.inputs-list {
.item-input, .item-link {
2020-11-26 16:38:10 +00:00
.item-inner {
display: block;
.item-title, .item-label {
2020-11-26 16:38:10 +00:00
width: 100%;
font-size: 12px;
}
.item-input-wrap {
margin-left: 0;
}
}
}
}
.buttons {
box-sizing: border-box;
min-height: 48px;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
.item-content {
width: 100%;
.item-inner {
padding-bottom: 0;
padding-top: 0;
.row {
width: 100%;
.button {
flex: 1;
font-size: 17px;
margin-left: 5px;
2021-06-28 11:16:41 +00:00
display: flex;
align-items: center;
justify-content: center;
2020-11-26 16:38:10 +00:00
&:first-child {
margin-left: 0;
}
}
}
}
}
}
.item-content {
.color-preview {
width: 30px;
height: 30px;
2021-09-13 21:07:36 +00:00
border-radius: 4px;
margin-top: -3px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .15) inset;
2022-05-25 09:14:54 +00:00
background-color: @fill-white;
&.auto {
background-color: @autoColor;
}
}
}
}
// Color palette
#color-picker {
.right-block {
.button-round {
2021-11-04 21:11:52 +00:00
background-color: @brandColor;
}
}
}
2021-02-25 17:42:07 +00:00
// Regional Settings
.regional-settings {
.list {
.item-inner {
margin-left: 16px;
}
.item-title-row {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
flex-direction: row-reverse;
.item-title {
white-space: normal;
}
}
}
}
2021-03-11 17:21:05 +00:00
// Find and Replace
.searchbar-inner {
&__center {
flex-wrap: wrap;
}
// &__left {
// padding-top: 4px;
// }
2021-03-11 17:21:05 +00:00
}
.navbar {
.searchbar-input-wrap {
height: 32px;
margin-right: 10px;
margin: 4px 0;
}
&-inner {
overflow: initial;
}
}
.searchbar .input-clear-button {
width: 18px;
height: 18px;
2021-10-14 09:53:14 +00:00
margin-top: -8px;
2021-03-11 17:21:05 +00:00
&:after {
2021-11-10 21:18:55 +00:00
color: @fill-white;
2021-03-11 17:21:05 +00:00
font-size: 19px;
2021-10-14 09:53:14 +00:00
line-height: 19px;
2021-03-11 17:21:05 +00:00
}
}
.searchbar-icon {
&:after {
2021-11-10 21:18:55 +00:00
color: @fill-white;
2021-03-11 17:21:05 +00:00
font-size: 19px;
}
}
2022-03-05 22:36:26 +00:00
.searchbar input {
2021-03-11 17:21:05 +00:00
box-sizing: border-box;
width: 100%;
display: block;
border: none;
appearance: none;
border-radius: 0;
font-family: inherit;
2021-11-10 21:18:55 +00:00
color: @fill-white;
2021-03-11 17:21:05 +00:00
font-size: 16px;
font-weight: 400;
padding: 0;
2021-11-10 21:18:55 +00:00
border-bottom: 1px solid @fill-white;
2021-03-11 17:21:05 +00:00
height: 100%;
padding: 0 36px 0 24px;
background-color: transparent;
background-repeat: no-repeat;
background-position: 0 center;
opacity: 1;
background-size: 24px 24px;
transition-duration: .3s;
2021-11-11 16:22:42 +00:00
.encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" fill="@{white}" height="24" viewBox="0 0 24 24" width="24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
2022-03-18 12:29:00 +00:00
&::placeholder {
color: @fill-white;
}
2021-03-11 17:21:05 +00:00
}
2022-03-18 12:29:00 +00:00
2021-03-11 17:21:05 +00:00
.navbar {
.searchbar-expandable.searchbar-enabled {
top: 0;
// height: 100%;
.searchbar-inner {
height: 100%;
&__center {
flex-direction: column;
}
&__right {
flex-direction: column-reverse;
}
}
&.replace {
height: 96px;
}
}
a.link {
padding: 0 16px;
}
2021-11-19 19:33:38 +00:00
a.link.searchbar-enable {
i.icon-search {
background-color: @toolbar-icons;
}
}
2021-03-11 17:21:05 +00:00
a.icon-only {
width: auto;
2021-04-15 09:42:44 +00:00
height: 56px;
2021-03-11 17:21:05 +00:00
}
.buttons-row-replace a {
2021-11-10 21:18:55 +00:00
color: @fill-white;
padding: 0;
2021-03-11 17:21:05 +00:00
}
.searchbar .buttons-row {
align-self: flex-start;
}
}
@media(max-width: 550px) {
.searchbar-expandable.searchbar-enabled {
.searchbar-inner {
&__left {
margin-right: 33px;
}
}
}
}
.actions-button-text {
cursor: pointer;
line-height: 48px;
font-size: 16px;
2021-11-17 21:58:22 +00:00
// color: rgba(0,0,0,.87);
color: @text-normal;
// color: var(--f7-actions-button-text-color, );
}
@media (min-width: 496px) {
.actions-modal {
width: 100%;
left: auto;
margin-left: 0;
}
}
2021-06-03 13:25:52 +00:00
input.modal-text-input {
box-sizing: border-box;
height: 36px;
background: #fff;
margin: 0;
margin-top: 15px;
padding: 0;
border: none;
width: 100%;
font-size: 16px;
font-family: inherit;
display: block;
box-shadow: none;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
-webkit-transition-duration: .2s;
transition-duration: .2s;
}
.input-field {
.inputs-list {
margin: 15px 0 0;
ul {
2022-03-03 14:11:15 +00:00
background: none;
2021-06-03 13:25:52 +00:00
&::before, &::after {
display: none;
}
}
.item-input, .item-inner {
padding: 0;
}
}
}
2021-08-10 15:00:50 +00:00
// Fonts List
.font-item {
.item-radio:not(.item-radio-icon-end) > .icon-radio {
margin-right: 0;
}
}
// Navbar link settings
.navbar-link-settings {
.navbar-inner {
background: @background-primary;
}
.title, a {
color: @text-normal;
}
}
2020-10-14 09:00:05 +00:00
}