From 546ccd63f7eaf5f16c974868bb25aa076088a602 Mon Sep 17 00:00:00 2001 From: daria Date: Wed, 10 Jul 2024 16:58:27 +0300 Subject: [PATCH] Revert "change focus style for inputs on calendar modals #1506" This reverts commit 7c57db6420b40b9daa27ed3b45cdd5a9df262f4f. --- customize.dist/src/less2/include/forms.less | 3 - www/calendar/app-calendar.less | 740 ++++++++++++++++++++ 2 files changed, 740 insertions(+), 3 deletions(-) create mode 100644 www/calendar/app-calendar.less diff --git a/customize.dist/src/less2/include/forms.less b/customize.dist/src/less2/include/forms.less index 5d8b242f1..065b9db1d 100644 --- a/customize.dist/src/less2/include/forms.less +++ b/customize.dist/src/less2/include/forms.less @@ -28,9 +28,6 @@ } &.tui-full-calendar-content { font-size: @colortheme_app-font-size; - &:focus { - outline: @cryptpad_color_brand solid 2px; - } } &[readonly] { //margin-top:1rem; diff --git a/www/calendar/app-calendar.less b/www/calendar/app-calendar.less new file mode 100644 index 000000000..bdf59fb6d --- /dev/null +++ b/www/calendar/app-calendar.less @@ -0,0 +1,740 @@ +/* + * SPDX-FileCopyrightText: 2023 XWiki CryptPad Team and contributors + * + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +@import (reference) '../../customize/src/less2/include/framework.less'; +@import (reference) '../../customize/src/less2/include/sidebar-layout.less'; +@import (reference) '../../customize/src/less2/include/tools.less'; +@import (reference) '../../customize/src/less2/include/avatar.less'; +@import (reference) '../../customize/src/less2/include/variables.less'; + +&.cp-app-calendar { + + .framework_min_main(); + .sidebar-layout_main(); + + display: flex; + flex-flow: column; + + .cp-toolbar-bottom-mid > div { + color: @cryptpad_text_col; + .cp-small { display: none; } + } + + .flatpickr-calendar { + z-index: 100001 !important; // Alertify is 100000 + } + #cp-sidebarlayout-container #cp-sidebarlayout-rightside { + padding: 0; + & > div { + margin: 0; + } + + .cp-forcehide { + display: none !important; + } + + + .tui-full-calendar-confirm { + span, i { + padding: 0.5rem; + } + span { + padding-left: 0; + } + width: unset; + } + + .tui-full-calendar-layout { + background-color: @cp_sidebar-right-bg !important; + color: @cryptpad_text_col; + display: flex; + flex-flow: column; + .tui-full-calendar-week-container { + min-height: 0; + display: flex; + flex-flow: column; + .tui-full-calendar-vlayout-area { + display: flex; + flex-flow: column; + flex: 1; + min-height: 0; + & > div:last-child { + flex: 1; + min-height: 0; + } + } + } + .tui-full-calendar-weekday-filled { + background-color: @cp_dropdown-bg-hover !important; + } + + .tui-full-calendar-timegrid-hourmarker-time { + color: @cp_calendar-now !important; + } + .tui-full-calendar-timegrid-hourmarker-line-left, .tui-full-calendar-timegrid-hourmarker-line-today { + border-color: @cp_calendar-now !important; + } + .tui-full-calendar-timegrid-todaymarker { + background-color: @cp_calendar-now !important; + } + + .tui-full-calendar-month { + display: flex; + flex-flow: column; + & > div:last-child { + display: flex; + flex-flow: column; + flex: 1; + min-height: 0; + overflow: hidden; + } + .tui-full-calendar-today .tui-full-calendar-weekday-grid-date-decorator { + background-color: @cp_calendar-now !important; + color: @cp_calendar-now-fg !important; + } + .tui-full-calendar-weekday-schedule-time .tui-full-calendar-weekday-schedule-title { + color: @cryptpad_text_col !important; + } + .tui-full-calendar-extra-date { + .tui-full-calendar-weekday-grid-date { + color: @cp_sidebar-hint !important; + opacity: 0.5; + } + } + .tui-full-calendar-weekday-grid-date { + color: @cryptpad_text_col !important; + } + .tui-full-calendar-month-dayname-item span { + color: @cryptpad_text_col !important; + } + } + .tui-full-calendar-dayname * { + color: @cryptpad_text_col !important; + } + .tui-full-calendar-month-more { + background-color: @cp_sidebar-right-bg !important; + color: @cryptpad_text_col; + span { + color: @cryptpad_text_col !important; + } + } + + .tui-full-calendar-floating-layer.cp-calendar-popup-flex { + top: 0 !important; + left: 0 !important; + right: 0 !important; + bottom: 0 !important; + justify-content: center !important; + align-items: center !important; + .tui-full-calendar-popup { + width: 540px; + max-width: 100%; + max-height: 100%; + } + } + #tui-full-calendar-popup-arrow { + display: none !important; + } + } + .tui-full-calendar-timegrid-timezone { + background-color: @cp_sidebar-right-bg !important; + .tui-full-calendar-timegrid-hour { + color: @cryptpad_text_col !important; + } + color: @cryptpad_text_col; + } + .tui-full-calendar-timegrid-gridline, .tui-full-calendar-time-date { + border-color: @cp_calendar-border !important; + } + .tui-full-calendar-splitter, .tui-full-calendar-left, .tui-full-calendar-dayname-container, .tui-full-calendar-weekday-grid-line { + border-color: @cp_calendar-border !important; + + } + .tui-full-calendar-popup { + border-radius: @variables_radius_L; + } + .tui-full-calendar-popup-container { + min-width: 100%; + background: @cp_flatpickr-bg; + color: @cryptpad_text_col; + border-radius: @variables_radius_L; + font-weight: normal; + .tui-full-calendar-icon:not(.tui-full-calendar-calendar-dot):not(.tui-full-calendar-dropdown-arrow):not(.tui-full-calendar-ic-checkbox):not(.fa-map-marker) { + display: none; + } + .tui-full-calendar-icon { + text-align:center; + } + .tui-full-calendar-popup-detail-item { + a { + color: @cryptpad_color_link; + text-decoration: underline; + } + } + .tui-full-calendar-section-button-save { + height: 40px; + .btn-primary { // Update button + margin-right: 0px; + } + } + + } + li.tui-full-calendar-popup-section-item { + padding: 0 6px; + height: 32px; + } + .tui-full-calendar-popup-section-item { + height: auto; + margin: 0; + &:not(li):not(button) { + padding: 0; + margin-top: 5px; + } + #tui-full-calendar-schedule-calendar { + width: 179px; + top: 0; + } + &:not(button) { + border: none; + display: inline-flex; + align-items: center; + &:hover { + background-color: @cp_dropdown-bg-hover; + } + .tui-full-calendar-content { + text-overflow: ellipsis; + font: @colortheme_app-font; + padding: 0 10px; + } + input { flex: 1; } + } + } + .tui-full-calendar-section-date-dash { + height: auto; + } + .tui-full-calendar-section-title, .tui-full-calendar-section-location, .tui-full-calendar-section-body { + width: 100%; + } + .tui-full-calendar-dropdown-menu { + top: 38px; + width: 221px; // same as button + background-color: @cp_dropdown-bg; + color: @cp_dropdown-fg; + } + .tui-full-calendar-section-state, #tui-full-calendar-schedule-private { + display: none !important; + } + + .tui-full-calendar-popup:not(.tui-full-calendar-popup-detail) { + .tui-full-calendar-section-calendar { + width: 221px; // 50% + } + .tui-full-calendar-popup-section { + display: flex; + align-items: center; + flex-wrap: wrap; + .tui-full-calendar-section-start-date, .tui-full-calendar-section-end-date { + flex: 1; + } + .tui-full-calendar-section-allday { + width: 100%; + height: 32px; + border-radius: @variables_radius; + input[type="checkbox"].tui-full-calendar-checkbox-square:checked + span { + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAABbmlDQ1BpY2MAACiRdZHNK0RRGMZ/Zoh8NIqFNItZDFmMEiVLxsJmkgZlsLn3zpe6c93uvZNkq2wspizExtfCf8BW2VJKkZKs/AG+Npqu97hqJM7t3PfXc87zds5zIJQyjZJbPwAly3PSE8nYXGY+1vhEMy20EyaqGa49NjWV4t/xfkOdqtf9qtf/+/4cLdmca0Bdk/CwYTue8KhwasWzFW8KdxpFLSu8L5xw5IDCF0rXA35UXAj4VbEzkx6HkOoZK/xg/QcbRack3CccL5ll4/s86iatOWt2Wmq3zCguaSZIEkOnzBImHv1SLcnsb9/Al2+SZfEY8rdZxRFHgaJ4E6KWpWtOal70nHwmqyr333m6+aHBoHtrEhoefP+lBxq3oFrx/Y8D368eQvgezqyaf1lyGnkTvVLT4nsQWYeT85qmb8PpBnTd2ZqjfUlhmaF8Hp6PoS0DHVfQvBBk9b3O0S3MrMkTXcLOLvTK/sjiJ6CLZ94KREMsAAAACXBIWXMAAAsSAAALEgHS3X78AAABHUlEQVQoFWNkaP//n4EMwESGHrAW6mtkZvz3G2g03BsBagz/nRUQ7sNp49//TJ+Byv6BlMbrMjCsC2Jg3BbKwOAgB9GMolGAg4GBESIOIrmA+A9I03xvFHGwCrhGkDOe5TAw9LvAFbEn6jEwwTT9BtodvJ7h/4FHYH0MLBCKgaHTgYGBE8jLN2FgYAJae+4FA8NcLwZWkAtAmoLWMTBsuYNwECMsHrVEGBj2RzEwiIEciATANgE1bb6DJAgMNLhTr71hYHBcxsDw+htCAQ5NIAU/4RpBPKjmf2++MfwHaQpZD7cJyEMB3+BORRL+rybE8FOEk4Hj2FO4KMgdrFAMitun2DTCVSMxYAkBFFYg9j94qCIpwsZEil5wyDIDAAXIUsnSKmq7AAAAAElFTkSuQmCC); + } + .tui-full-calendar-ic-checkbox { + margin-left: 5px; + border-radius: 2px; + } + } + .CodeMirror { + margin-top: 5px; + background: @cp_forms-bg !important; + color: @cryptpad_text_col; + border: 1px solid @cp_forms-border; + border-radius: @variables_radius; + width: 100%; + height: 80px; + font: @colortheme_app-font; + font-size: 16px; + line-height: initial; + padding-left: 0.3rem; + pre { + margin: 0; + font-family: inherit; + font-size: inherit; + line-height: inherit; + } + } + .CodeMirror-placeholder { + color: @cp_forms-placeholder; + } + } + } + .tui-full-calendar-popup-detail { + font: @colortheme_app-font; + color: @cryptpad_text_col; + box-shadow: @cryptpad_ui_shadow; + .tui-full-calendar-popup-container { + padding-bottom: 17px; + } + .tui-full-calendar-popup-detail-date { + font-size: 14px; + } + .tui-full-calendar-section-button { + margin-top: 10px; + border: 0; + display: flex; + align-items: start; + button { + flex: 1; + margin: 0; + } + } + .tui-full-calendar-popup-top-line { + border-radius: 10px 10px 0px 0px; + height: 10px; + } + .tui-full-calendar-popup-vertical-line { + visibility: hidden; + width: 10px; + } + } + + .cp-recurrence-label, .cp-notif-label { + color: @cryptpad_text_col; + margin-right: 1rem; + i { + margin-right: 0.5rem; + } + } + + .cp-calendar-recurrence-container { + margin-top: 1rem; + .cp-calendar-rec-translated-str { + margin-top: 0.5rem; + } + } + + .cp-calendar-add-notif { + flex-flow: column; + align-items: baseline !important; + margin: 1rem 0; + * { + font-size: @colortheme_app-font-size; + font-weight: normal; + } + & > div { + display: flex; + } + .cp-calendar-notif-list-container { + width: 100%; + margin-bottom: 10px; + .cp-notif-label { + margin-top: 0.5em; + } + } + .cp-calendar-notif-list { + display: flex; + flex-flow: column; + flex: 1; + min-width: 150px; + &:empty { + display: none; + } + .cp-notif-entry { + display: flex; + margin-bottom: 2px; + border-radius: @variables_radius; + background-color: fade(@cryptpad_text_col, 10%); + padding: 0.25rem; + .cp-notif-value { + width: 75%; + display: inline-flex; + line-height: 30px; + vertical-align: middle; + flex-grow: 1; + .cp-before { + flex: 1; + min-width: 0; + } + } + span:not(:last-child) { + margin: 0; + margin-right: 0.3rem; + } + span:first-child { + margin-left: 0.3rem; + } + .btn-danger-outline { + display: block; + margin-right: 0px !important; + background-color: transparent; + color: @cryptpad_text_col; + border-color: @cryptpad_text_col; + &:hover { + color: @cp_buttons-red-color; + background-color: @cp_buttons-red; + border-color: @cp_buttons-red; + } + } + } + } + .cp-notif-empty { + display: none; + margin-bottom: 2px; + border-radius: @variables_radius; + background-color: fade(@cryptpad_text_col, 10%); + padding: 0.25rem 0.5rem; + line-height: 30px; + } + .cp-calendar-notif-list:empty ~ .cp-notif-empty { + display: block; + } + .cp-calendar-notif-form { + align-items: center; + .cp-calendar-notif-form-buttons { + display: inline-flex; + align-items: center; + & > input { + height: 40px; + } + } + // margin-bottom: 20px; + input { + width: 80px; + margin-right: 0.3rem; + } + .fa-plus{ + margin-left:0.3rem; + } + } + } + + .cp-calendar-close { + top: 17px; + right: 17px; + height: auto; + margin-right: 0px; + line-height: initial; + border: 1px solid; + &:not(:hover) { + background: transparent; + } + } + + } + + .cp-calendar-rec-inline, .cp-calendar-rec-block { + &:not(:last-child) { + margin-bottom: 10px; + } + } + .cp-calendar-rec-inline { + display: flex; + flex-flow: row; + align-items: center; + & > *:not(:first-child) { margin-left: 5px; } + .cp-dropdown-container { + position: unset; + } + input[type="number"] { + width: 80px !important; + margin-bottom: 0 !important; + } + .cp-checkmark { + margin-right: 0.5rem; + } + } + .cp-calendar-rec-block { + .cp-calendar-rec-block-title { + margin-bottom: 0.5rem !important; + } + .cp-radio { + margin-bottom: 0.5rem; + } + input[type="radio"]:not(:checked) ~ .cp-checkmark-label { + input { + filter: grayscale(1); + } + } + .cp-checkmark-label { + & > *:not(:first-child) { margin-left: 5px; } + width: 100%; + //height: 26px; + display: flex; + align-items: center; + & > input { + margin-bottom: 0 !important; + } + input { + display: inline; + height: 24px !important; + padding: 0 5px !important; + } + input[type="text"] { + width: 200px !important; + } + input[type="number"] { + width: 80px !important; + margin-bottom: 0 !important; + } + } + } + #cp-calendar-rec-monthly-pick ~ .cp-checkmark-label { + display: flex; + align-items: center; + & > span { + margin-right: 20px; + } + } + button.cp-calendar-pick-el { + display: flex; + align-items: center; + justify-content: center; + &:not(:last-child) { + margin-right: 5px; + } + } + div.cp-calendar-weekly-pick { + button { + width: 50px; + } + } + div.cp-calendar-monthly-pick { + display: flex; + flex-flow: column; + & > div { + display: flex; + &:not(:last-child) { + margin-bottom: 5px; + } + button { + height: 25px; + width: 25px; + &.lastday { + width: 115px; + } + } + } + } + + .tui-full-calendar-ic-repeat-b { + display: none; + & ~ * { + display: none; + } + } + + #cp-toolbar .cp-calendar-browse { + display: flex; + align-items: center; + button { + color: @cp_toolbar-fg; + border-color: @cp_toolbar-fg; + &:hover { + background-color: fade(@cp_toolbar-fg, 50%); + cursor: pointer; + } + } + } + + .cp-calendar-newevent { + &:hover { + cursor: pointer; + } + } + + .cp-toolbar-bottom-right button, .cp-toolbar-user button { + &:hover { + cursor: pointer; + } + } + + #cp-sidebarlayout-leftside { + & > div { + padding: 10px + } + .cp-calendar-new { + display: flex; + align-items: center; + justify-content: space-between; + } + .cp-calendar-list { + overflow-y: auto; + .cp-calendar-team { + height: 30px; + .avatar_main(30px); + .cp-avatar { + margin-right: 10px; + } + .cp-name { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + display: flex; + align-items: center; + justify-content: center; + margin: 5px 0 10px 0; + &:not(:first-child) { + margin-top: 30px; + } + } + .cp-calendar-entry { + display: flex; + align-items: center; + justify-content: space-between; + padding: 5px; + border-radius: @variables_radius; + background-color: @cp_sidebar-left-bg; + &:not(.cp-unclickable) { + cursor: pointer; + } + .cp-dropdown-container { + position: initial; + + .cp-dropdown-content{ + @media screen and (max-width: 600px) + { + left: 50%; + min-width: 45%; + } + } + } + button.cp-calendar-actions { + background-color: transparent; + &:hover { + background-color: @cp_sidebar-left-bg; + } + } + &.cp-ghost { + padding: 0; + button { + .tools_unselectable(); + cursor: pointer; + width: 100%; + display: flex; + justify-content: space-between; + background: transparent; + border: 1px solid @cryptpad_text_col; + border-radius: @variables_radius; + padding: 5px; + height: 36px; + font: @colortheme_app-font; + align-items: center; + color: @cryptpad_text_col; + &:hover { + background-color: @cp_sidebar-left-active; + color: @cp_sidebar-left-active-fg; + border: 0px; + } + i { + margin-left: 5px; + } + } + } + &:not(:last-child) { + margin-bottom: 10px; + } + &:hover { + background: @cp_sidebar-left-item-bg; + } + &.cp-restricted { + color: @cp_drive-header-fg; + } + .cp-calendar-icon { + width: 30px; + display: inline-flex; + height: 30px; + align-items: center; + justify-content: center; + border-radius: @variables_radius; + flex-shrink: 0; + } + &.cp-active { + background-color: @cp_sidebar-left-item-bg; + .cp-calendar-inactive { + display: none; + } + } + &:not(.cp-active) { + .cp-calendar-icon { + background: transparent !important; + } + .cp-calendar-active { + display: none; + } + } + .tools_unselectable(); + .cp-calendar-color { + display: inline-block; + border-radius: 50%; + width: 15px; + height: 15px; + flex-shrink: 0; + } + .cp-calendar-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + padding: 0 5px; + } + } + } + } + .cp-calendar-colorpicker { + width: 100px; + height: 25px; + cursor: pointer; + border: 1px solid @cp_forms-border; + } + + @media (max-width: @browser_media-medium-screen) { + .cp-calendar-notif-list-container, .cp-calendar-notif-form { + flex-direction: column; + align-items: unset !important; + } + .cp-calendar-newevent { + i { + margin: 0 !important; + } + span { + display: none; + } + } + .tui-full-calendar-dayname-leftmargin, .tui-full-calendar-timegrid-right { + margin-left: 40px !important; + } + .tui-full-calendar-allday-left, .tui-full-calendar-timegrid-left { + width: 40px !important; + } + .tui-full-calendar-dayname > span { + display: flex; + flex-flow: column; + line-height: 0; + justify-content: center; + align-items: center; + height: 100%; + } + .tui-full-calendar-dayname * { + font-size: 11px; + line-height: initial; + height: auto; + } + .cp-toolbar-bottom-mid > div { + :not(:first-child) { + display: none; + } + :first-child { + display: inline-block; + } + } + } + +} +