mirror of
https://github.com/wekan/wekan.git
synced 2026-02-09 17:54:21 +01:00
Reverted New UI Design of WeKan v8.29 and added more fixes and performance improvements.
Thanks to xet7 !
This commit is contained in:
Lauri Ojansivu
parent
d152d8fc1b
commit
1b8b8d2eef
196 changed files with 17659 additions and 10028 deletions
|
|
@ -1,16 +1,3 @@
|
|||
select, button, input {
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
form {
|
||||
/* 🛑 remove me if it causes a significant issue.
|
||||
this can be overidden and otherwise allow forms to
|
||||
scale with their parent. */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
select,
|
||||
textarea,
|
||||
input:not([type=file]),
|
||||
|
|
@ -20,8 +7,9 @@ button {
|
|||
border: 1px solid #ccc;
|
||||
border-radius: 0.4vw;
|
||||
display: block;
|
||||
padding: 0.3lh 1ch;
|
||||
max-width: clamp(30vw, 100%, 800px);
|
||||
margin-bottom: 1.5vh;
|
||||
min-height: 4.5vh;
|
||||
padding: 1vh 1vw;
|
||||
}
|
||||
select.full,
|
||||
textarea.full,
|
||||
|
|
@ -54,6 +42,18 @@ input[type="text"],
|
|||
input[type="password"],
|
||||
input[type="email"] {
|
||||
transition: background 85ms ease-in, border-color 85ms ease-in;
|
||||
width: min(250px, 30vw);
|
||||
}
|
||||
input[type="text"].inline-input,
|
||||
input[type="password"].inline-input,
|
||||
input[type="email"].inline-input {
|
||||
background: none;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0.3vh;
|
||||
min-height: 0;
|
||||
height: 2.5vh;
|
||||
width: min(200px, 25vw);
|
||||
}
|
||||
input[type="text"].full-line,
|
||||
input[type="password"].full-line,
|
||||
|
|
@ -102,6 +102,11 @@ textarea:disabled {
|
|||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
select {
|
||||
max-height: 40vh;
|
||||
width: min(256px, 32vw);
|
||||
margin-bottom: 1vh;
|
||||
}
|
||||
select.inline {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -109,11 +114,14 @@ option[disabled] {
|
|||
color: #222;
|
||||
}
|
||||
textarea {
|
||||
height: 20vh;
|
||||
transition: background 85ms ease-in, border-color 85ms ease-in;
|
||||
resize: vertical;
|
||||
width: auto;
|
||||
font-size: 0.9em;
|
||||
min-height: 3lh;
|
||||
width: 100%;
|
||||
}
|
||||
textarea.editor {
|
||||
resize: none;
|
||||
padding-bottom: 3vh;
|
||||
}
|
||||
.button {
|
||||
border-radius: 3px;
|
||||
|
|
@ -129,16 +137,9 @@ button {
|
|||
display: inline-block;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
/* in flex layouts, padding often disturbs computations. rather rarely have
|
||||
two lines, so setting relative-unit min-height works better */
|
||||
min-height: 1.8lh;
|
||||
padding: 0 2ch;
|
||||
padding: 1vh 2.5vw;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
z-index: 1;
|
||||
:not(.password-toggle-btn) {
|
||||
margin-top: 0.1lh;
|
||||
}
|
||||
}
|
||||
input[type="submit"] .wide,
|
||||
button .wide {
|
||||
|
|
@ -240,9 +241,9 @@ input[type="hidden"] {
|
|||
}
|
||||
.radio-div,
|
||||
.check-div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.2lh;
|
||||
display: block;
|
||||
margin: 0 0 0.5vh 2.5vw;
|
||||
min-height: 2.5vh;
|
||||
position: relative;
|
||||
}
|
||||
.radio-div input,
|
||||
|
|
@ -259,10 +260,9 @@ input[type="hidden"] {
|
|||
font-weight: 400;
|
||||
}
|
||||
label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5vh;
|
||||
}
|
||||
label.form-error {
|
||||
color: #d32f2f;
|
||||
|
|
@ -274,32 +274,11 @@ textarea::-moz-placeholder {
|
|||
color: #333 !important;
|
||||
}
|
||||
.edit-controls,
|
||||
.add-controls,
|
||||
.links-controls {
|
||||
.add-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1ch;
|
||||
button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-controls {
|
||||
grid-area: main-controls;
|
||||
}
|
||||
|
||||
.add-controls {
|
||||
grid-area: main-controls;
|
||||
}
|
||||
|
||||
.links-controls {
|
||||
grid-area: links-controls
|
||||
}
|
||||
|
||||
.links-controls span.quiet {
|
||||
margin: auto;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 1.5vh;
|
||||
}
|
||||
@media print {
|
||||
.add-controls {
|
||||
|
|
@ -310,7 +289,14 @@ textarea::-moz-placeholder {
|
|||
.add-controls button[type=submit],
|
||||
.edit-controls input[type=button],
|
||||
.add-controls input[type=button] {
|
||||
margin: 0;
|
||||
float: left;
|
||||
height: 4.5vh;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.edit-controls .fa-times-thin,
|
||||
.add-controls .fa-times-thin {
|
||||
font-size: clamp(20px, 4vw, 26px);
|
||||
margin: 0.5vh 1.5vw;
|
||||
}
|
||||
[type="checkbox"]:not(:checked),
|
||||
[type="checkbox"]:checked {
|
||||
|
|
@ -320,18 +306,6 @@ textarea::-moz-placeholder {
|
|||
display: none;
|
||||
}
|
||||
.materialCheckBox {
|
||||
position: relative;
|
||||
width: 0.5lh;
|
||||
height: 0.5lh;
|
||||
z-index: 0;
|
||||
border: 0.2ch solid #5a5a5a;
|
||||
border-radius: 1px;
|
||||
transition: 0.2s;
|
||||
margin: 0;
|
||||
margin-left: 0px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.materialCheckBox:is(.active) {
|
||||
position: relative;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
|
|
@ -343,33 +317,19 @@ textarea::-moz-placeholder {
|
|||
cursor: pointer;
|
||||
}
|
||||
.materialCheckBox.is-checked {
|
||||
top: 0.3lh;
|
||||
left: 0.25lh;
|
||||
width: 0.25lh;
|
||||
height: 0.5lh;
|
||||
margin-right: 0.6lh;
|
||||
border-top: 0 solid transparent;
|
||||
border-left: 0 solid transparent;
|
||||
border-bottom: 0.3ch solid #3cb500;
|
||||
border-right: 0.3ch solid #3cb500;
|
||||
top: -4px;
|
||||
left: -3px;
|
||||
width: 7px;
|
||||
height: 15px;
|
||||
margin-right: 6px;
|
||||
border-top: 2px solid transparent;
|
||||
border-left: 2px solid transparent;
|
||||
border-bottom: 2px solid #3cb500;
|
||||
border-right: 2px solid #3cb500;
|
||||
transform: rotate(40deg);
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
transform: rotate(50deg);
|
||||
backface-visibility: hidden;
|
||||
transform-origin: 0.5lh 0;
|
||||
}
|
||||
|
||||
form .form-buttons {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-self: stretch;
|
||||
justify-content: stretch;
|
||||
gap: 0.5ch;
|
||||
&>button {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
transform-origin: 100% 100%;
|
||||
}
|
||||
/* Grey checkmarks when grey icons setting is enabled */
|
||||
body.grey-icons-enabled .materialCheckBox.is-checked {
|
||||
|
|
@ -402,7 +362,7 @@ body.grey-icons-enabled .materialCheckBox.is-checked {
|
|||
border-radius: 3px;
|
||||
color: #fff;
|
||||
display: none;
|
||||
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
height: 17px;
|
||||
line-height: 17px;
|
||||
|
|
@ -459,7 +419,7 @@ body.grey-icons-enabled .materialCheckBox.is-checked {
|
|||
.button-link.setting .label {
|
||||
color: #222;
|
||||
display: block;
|
||||
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
@ -468,7 +428,7 @@ body.grey-icons-enabled .materialCheckBox.is-checked {
|
|||
}
|
||||
.button-link.setting .value {
|
||||
display: block;
|
||||
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -612,7 +572,7 @@ button.loud-text-button:hover {
|
|||
padding: 11px;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.big-link .text {
|
||||
|
|
@ -655,7 +615,7 @@ button.loud-text-button:hover {
|
|||
width: 40px;
|
||||
}
|
||||
.big-link.avatar-changer .member .member-initials {
|
||||
|
||||
font-size: 16px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
max-height: 40px;
|
||||
|
|
@ -695,7 +655,7 @@ button.loud-text-button:hover {
|
|||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
|
||||
font-size: 23px;
|
||||
}
|
||||
.uploader .realfile input[type="file"] {
|
||||
cursor: pointer;
|
||||
|
|
@ -706,7 +666,7 @@ button.loud-text-button:hover {
|
|||
padding: 0;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
|
||||
font-size: 23px;
|
||||
}
|
||||
.uploader:hover .fakefile {
|
||||
background: #318ec4;
|
||||
|
|
@ -745,13 +705,13 @@ button.loud-text-button:hover {
|
|||
color: #fff;
|
||||
}
|
||||
.material-toggle-switch {
|
||||
padding: 0.2rlh 1ch;
|
||||
align-self: center;
|
||||
display: flex;
|
||||
}
|
||||
.toggle-label {
|
||||
height: 0.6rlh;
|
||||
width: 1.3rlh;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 20px;
|
||||
width: 44px;
|
||||
background-color: #a6a6a6;
|
||||
border-radius: 100px;
|
||||
cursor: pointer;
|
||||
|
|
@ -759,13 +719,11 @@ button.loud-text-button:hover {
|
|||
}
|
||||
.toggle-label:after {
|
||||
position: absolute;
|
||||
/* ensure vertical centering */
|
||||
margin: auto;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: -0.2rlh;
|
||||
width: .8rlh;
|
||||
height: .8rlh;
|
||||
left: -2px;
|
||||
top: -3px;
|
||||
display: block;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 100px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 3px 3px rgba(0,0,0,0.05);
|
||||
|
|
@ -779,7 +737,7 @@ button.loud-text-button:hover {
|
|||
background-color: #6fbeb5;
|
||||
}
|
||||
.toggle-switch:checked ~ .toggle-label:after {
|
||||
left: 1.5ch;
|
||||
left: 20px;
|
||||
background-color: #179588;
|
||||
}
|
||||
.toggle-switch:checked:disabled ~ .toggle-label {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue