Andreas/wekan
1
0
Fork 0
mirror of https://github.com/wekan/wekan.git synced 2025-12-18 08:20:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Text and icons from fixed sizes to scaleable sizes. Thanks to xet7.

Browse source
This commit is contained in:
Lauri Ojansivu 2025-10-09 02:06:16 +03:00
parent 2f5670e830
commit 20e9cf1144
18 changed files with 315 additions and 315 deletions
Download patch file Download diff file Expand all files Collapse all files

28
client/components/activities/activities.css
View file

@ -1,16 +1,16 @@
.activity-title { .activity-title {
margin: 0 0.5em 0.8em; margin: 0 0.7vw 1vh;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.reactions-popup .add-comment-reaction { .reactions-popup .add-comment-reaction {
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
border-radius: 5px; border-radius: 0.7vw;
font-size: 22px; font-size: clamp(18px, 4vw, 22px);
text-align: center; text-align: center;
line-height: 30px; line-height: 1.3;
width: 40px; width: 5vw;
} }
.reactions-popup .add-comment-reaction:hover { .reactions-popup .add-comment-reaction:hover {
background-color: #b0c4de; background-color: #b0c4de;
@ -19,13 +19,13 @@
clear: both; clear: both;
} }
.activities .activity { .activities .activity {
margin: 0.5px 0; margin: 0.1vh 0;
padding: 6px 0; padding: 0.8vh 0;
display: flex; display: flex;
} }
.activities .activity .member { .activities .activity .member {
width: 32px; width: 4vw;
height: 32px; height: 4vw;
} }
.activities .activity .activity-member { .activities .activity .activity-member {
font-weight: 700; font-weight: 700;
@ -36,18 +36,18 @@
flex: 1; flex: 1;
align-self: center; align-self: center;
margin: 0; margin: 0;
margin-left: 3px; margin-left: 0.4vw;
overflow: hidden; overflow: hidden;
word-break: break-word; word-break: break-word;
} }
.activities .activity .activity-desc .activity-comment { .activities .activity .activity-desc .activity-comment {
display: block; display: block;
border-radius: 3px; border-radius: 0.4vw;
background: #fff; background: #fff;
text-decoration: none; text-decoration: none;
box-shadow: 0 1px 2px rgba(0,0,0,0.2); box-shadow: 0 0.2vh 0.3vh rgba(0,0,0,0.2);
margin-top: 5px; margin-top: 0.7vh;
padding: 5px; padding: 0.7vh 0.7vw;
} }
.activities .activity .activity-desc .activity-checklist { .activities .activity .activity-desc .activity-checklist {
display: block; display: block;

14
client/components/boards/boardHeader.css
View file

@ -1,5 +1,5 @@
.integration-form { .integration-form {
padding: 5px; padding: 0.7vh 0.7vw;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
} }
.flex, .flex,
@ -12,12 +12,12 @@
display: flex; display: flex;
} }
.option { .option {
-webkit-border-radius: 3px; -webkit-border-radius: 0.4vw;
border-radius: 3px; border-radius: 0.4vw;
background: #fff; background: #fff;
text-decoration: none; text-decoration: none;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0.2vh 0.3vh rgba(0,0,0,0.2);
box-shadow: 0 1px 2px rgba(0,0,0,0.2); box-shadow: 0 0.2vh 0.3vh rgba(0,0,0,0.2);
margin-top: 5px; margin-top: 0.7vh;
padding: 5px; padding: 0.7vh 0.7vw;
} }

28
client/components/cards/cardDetails.css
View file

@ -1,11 +1,11 @@
.assignee { .assignee {
border-radius: 3px; border-radius: 0.4vw;
display: block; display: block;
position: relative; position: relative;
float: left; float: left;
height: 30px; height: 4vw;
width: 30px; width: 4vw;
margin: .3vh; margin: 0.4vh;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
z-index: 1; z-index: 1;
@ -34,11 +34,11 @@
background-color: #b3b3b3; background-color: #b3b3b3;
border: 1px solid #fff; border: 1px solid #fff;
border-radius: 50%; border-radius: 50%;
height: 7px; height: 1vw;
width: 7px; width: 1vw;
position: absolute; position: absolute;
right: -1px; right: -0.1vw;
bottom: -1px; bottom: -0.1vw;
border: 1px solid #fff; border: 1px solid #fff;
z-index: 15; z-index: 15;
} }
@ -70,23 +70,23 @@
} }
.copied-tooltip { .copied-tooltip {
display: none; display: none;
padding: 0px 10px; padding: 0 1.3vw;
background-color: rgba(0,0,0,0.875); background-color: rgba(0,0,0,0.875);
color: #fff; color: #fff;
border-radius: 5px; border-radius: 0.7vw;
} }
.card-details { .card-details {
padding: 0; padding: 0;
flex-shrink: 0; flex-shrink: 0;
flex-basis: 600px; flex-basis: min(600px, 80vw);
will-change: flex-basis; will-change: flex-basis;
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
background: #f7f7f7; background: #f7f7f7;
border-radius: bottom 3px; border-radius: bottom 0.4vw;
z-index: 30; z-index: 30;
animation: flexGrowIn 0.1s; animation: flexGrowIn 0.1s;
box-shadow: 0 0 7px 0 #b3b3b3; box-shadow: 0 0 0.9vh 0 #b3b3b3;
transition: flex-basis 0.1s; transition: flex-basis 0.1s;
box-sizing: border-box; box-sizing: border-box;
} }
@ -95,7 +95,7 @@
} }
.card-details .card-details-canvas { .card-details .card-details-canvas {
width: auto; width: auto;
padding: 0 20px; padding: 0 2.5vw;
} }
.card-details .card-details-header { .card-details .card-details-header {
margin: 0 -20px 5px; margin: 0 -20px 5px;

120
client/components/cards/minicard.css
View file

@ -3,11 +3,11 @@
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 9px; margin-bottom: 1.2vh;
} }
.minicard-wrapper.placeholder { .minicard-wrapper.placeholder {
background: #ccc; background: #ccc;
border-radius: 9px; border-radius: 1.2vw;
} }
.minicard-wrapper.ui-sortable-helper { .minicard-wrapper.ui-sortable-helper {
cursor: grabbing; cursor: grabbing;
@ -16,28 +16,28 @@
} }
.minicard-wrapper.ui-sortable-helper .and-n-other { .minicard-wrapper.ui-sortable-helper .and-n-other {
width: 100%; width: 100%;
height: 16px; height: 2.5vh;
padding: 4px; padding: 0.5vh;
background-color: #f2f2f2; background-color: #f2f2f2;
text-align: center; text-align: center;
border-radius: 3px; border-radius: 0.4vw;
} }
.minicard-wrapper.ui-sortable-helper .multi-selection-checkbox { .minicard-wrapper.ui-sortable-helper .multi-selection-checkbox {
display: none; display: none;
} }
.minicard-wrapper .multi-selection-checkbox + .minicard { .minicard-wrapper .multi-selection-checkbox + .minicard {
margin-left: 8px; margin-left: 1vw;
} }
@media only screen { @media only screen {
.minicard { .minicard {
padding: 6px 8px 2px; padding: 0.8vh 1vw 0.3vh;
position: relative; position: relative;
flex: 1; flex: 1;
flex-wrap: wrap; flex-wrap: wrap;
background-color: #fff; background-color: #fff;
min-height: 20px; min-height: 2.5vh;
box-shadow: 0 1px 2px rgba(0,0,0,0.15); box-shadow: 0 0.2vh 0.3vh rgba(0,0,0,0.15);
border-radius: 2px; border-radius: 0.3vw;
color: #4d4d4d; color: #4d4d4d;
overflow: hidden; overflow: hidden;
transition: transform 0.2s, border-radius 0.2s; transition: transform 0.2s, border-radius 0.2s;
@ -45,14 +45,14 @@
} }
.minicard-details-menu-with-handle { .minicard-details-menu-with-handle {
float: right; float: right;
font-size: 18px; font-size: clamp(14px, 3vw, 18px);
padding-right: 30px; padding-right: 4vw;
padding-left: 5px; padding-left: 0.7vw;
} }
.minicard-details-menu { .minicard-details-menu {
float: right; float: right;
font-size: 18px; font-size: clamp(14px, 3vw, 18px);
padding-left: 5px; padding-left: 0.7vw;
} }
@media print { @media print {
.minicard-details-menu, .minicard-details-menu,
@ -63,7 +63,7 @@
.minicard.linked-board .linked-icon, .minicard.linked-board .linked-icon,
.minicard.linked-card .linked-icon { .minicard.linked-card .linked-icon {
display: inline-block; display: inline-block;
margin-right: 11px; margin-right: 1.5vw;
vertical-align: baseline; vertical-align: baseline;
font-size: 0.9em; font-size: 0.9em;
} }
@ -72,11 +72,11 @@
color: #937760; color: #937760;
} }
.is-selected .minicard { .is-selected .minicard {
transform: translateX(11px); transform: translateX(1.5vw);
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
z-index: 25; z-index: 25;
box-shadow: -2px 1px 2px rgba(0,0,0,0.2); box-shadow: -0.3vw 0.2vh 0.3vh rgba(0,0,0,0.2);
} }
.minicard:hover:not(.minicard-composer), .minicard:hover:not(.minicard-composer),
.is-selected .minicard, .is-selected .minicard,
@ -90,20 +90,20 @@
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
height: 145px; height: 20vh;
user-select: none; user-select: none;
margin: 6px -8px 6px -8px; margin: 0.8vh -1vw 0.8vh -1vw;
border-radius: top 2px; border-radius: top 0.3vw;
} }
.minicard .minicard-labels { .minicard .minicard-labels {
float: none; float: none;
} }
.minicard .minicard-labels .minicard-label { .minicard .minicard-labels .minicard-label {
width: 11px; width: 1.5vw;
height: 11px; height: 1.5vw;
border-radius: 2px; border-radius: 0.3vw;
margin-right: 3px; margin-right: 0.4vw;
margin-bottom: 3px; margin-bottom: 0.4vh;
} }
.minicard .minicard-labels-no-text { .minicard .minicard-labels-no-text {
display: flex; display: flex;
@ -119,22 +119,22 @@
flex-grow: 1; flex-grow: 1;
display: block; display: block;
word-wrap: break-word; word-wrap: break-word;
max-width: 100px; max-width: 13vw;
margin-right: 4px; margin-right: 0.5vw;
} }
.minicard .minicard-custom-field-item-fullwidth { .minicard .minicard-custom-field-item-fullwidth {
flex-grow: 1; flex-grow: 1;
display: block; display: block;
word-wrap: break-word; word-wrap: break-word;
max-width: 100%; max-width: 100%;
margin-right: 4px; margin-right: 0.5vw;
} }
.minicard .handle { .minicard .handle {
width: 20px; width: 2.5vw;
height: 20px; height: 2.5vw;
position: absolute; position: absolute;
right: 5px; right: 0.7vw;
top: 5px; top: 0.7vh;
display: none; display: none;
} }
@media only screen { @media only screen {
@ -143,13 +143,13 @@
} }
} }
.minicard .handle .fa-arrows { .minicard .handle .fa-arrows {
font-size: 20px; font-size: clamp(16px, 3vw, 20px);
color: #ccc; color: #ccc;
} }
.minicard .minicard-title .card-number { .minicard .minicard-title .card-number {
color: #b3b3b3; color: #b3b3b3;
display: inline-block; display: inline-block;
margin-right: 5px; margin-right: 0.7vw;
} }
@media only screen { @media only screen {
.minicard .minicard-title p:last-child { .minicard .minicard-title p:last-child {
@ -166,11 +166,11 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
.minicard .date { .minicard .date {
margin-right: 3px; margin-right: 0.4vw;
} }
.minicard .badges { .minicard .badges {
float: left; float: left;
margin-top: 7px; margin-top: 1vh;
color: #808080; color: #808080;
} }
.minicard .badges:empty { .minicard .badges:empty {
@ -178,14 +178,14 @@
} }
.minicard .badges .badge { .minicard .badges .badge {
float: left; float: left;
margin-right: 11px; margin-right: 1.5vw;
margin-bottom: 3px; margin-bottom: 0.4vh;
font-size: 0.9em; font-size: 0.9em;
} }
.minicard .badges .badge.is-finished { .minicard .badges .badge.is-finished {
background: #3cb500; background: #3cb500;
padding: 0px 3px; padding: 0 0.4vw;
border-radius: 3px; border-radius: 0.4vw;
color: #fff; color: #fff;
} }
.minicard .badges .badge:last-of-type { .minicard .badges .badge:last-of-type {
@ -201,41 +201,41 @@
} }
.minicard .badges .badge .badge-text { .minicard .badges .badge .badge-text {
font-size: 0.9em; font-size: 0.9em;
padding-left: 2px; padding-left: 0.3vw;
line-height: 14px; line-height: 1.2;
} }
.minicard .badges .badge .check-list-text { .minicard .badges .badge .check-list-text {
padding-left: 0px; padding-left: 0px;
line-height: 12px; line-height: 1.1;
} }
.minicard .minicard-members, .minicard .minicard-members,
.minicard .minicard-assignees, .minicard .minicard-assignees,
.minicard .minicard-creator { .minicard .minicard-creator {
float: right; float: right;
margin-left: 5px; margin-left: 0.7vw;
margin-bottom: 4px; margin-bottom: 0.5vh;
} }
.minicard .minicard-members .member, .minicard .minicard-members .member,
.minicard .minicard-assignees .member, .minicard .minicard-assignees .member,
.minicard .minicard-creator .member { .minicard .minicard-creator .member {
float: right; float: right;
border-radius: 50%; border-radius: 50%;
height: 28px; height: 3.5vw;
width: 28px; width: 3.5vw;
margin-bottom: 4px; margin-bottom: 0.5vh;
} }
.minicard .minicard-members .assignee, .minicard .minicard-members .assignee,
.minicard .minicard-assignees .assignee, .minicard .minicard-assignees .assignee,
.minicard .minicard-creator .assignee { .minicard .minicard-creator .assignee {
float: right; float: right;
border-radius: 50%; border-radius: 50%;
height: 28px; height: 3.5vw;
width: 28px; width: 3.5vw;
} }
.minicard .minicard-members + .badges, .minicard .minicard-members + .badges,
.minicard .minicard-assignees + .badges, .minicard .minicard-assignees + .badges,
.minicard .minicard-creator + .badges { .minicard .minicard-creator + .badges {
margin-top: 5px; margin-top: 0.7vh;
} }
.minicard .minicard-assignees { .minicard .minicard-assignees {
border-bottom: 1px solid #f00; border-bottom: 1px solid #f00;
@ -248,13 +248,13 @@
display: none; display: none;
} }
.minicard .minicard-description { .minicard .minicard-description {
padding: 6px 0 0 8px; padding: 0.8vh 0 0 1vw;
color: #000; color: #000;
background-color: #eee; background-color: #eee;
width: 100%; width: 100%;
margin-bottom: 2px; margin-bottom: 0.3vh;
margin-left: -4px; margin-left: -0.5vw;
border-radius: 3px; border-radius: 0.4vw;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
@ -262,7 +262,7 @@
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
.minicard.minicard-composer { .minicard.minicard-composer {
margin-bottom: 10px; margin-bottom: 1.3vh;
} }
.minicard.minicard-composer textarea.minicard-composer-textarea, .minicard.minicard-composer textarea.minicard-composer-textarea,
.minicard.minicard-composer textarea.minicard-composer-textarea:focus { .minicard.minicard-composer textarea.minicard-composer-textarea:focus {
@ -273,9 +273,9 @@
height: auto; height: auto;
margin: 0; margin: 0;
padding: 0; padding: 0;
max-height: 162px; max-height: 22vh;
min-height: 36px; min-height: 5vh;
margin-bottom: 20px; margin-bottom: 2.5vh;
overflow-y: auto; overflow-y: auto;
} }
.parent-prefix { .parent-prefix {

58
client/components/forms/forms.css
View file

@ -5,11 +5,11 @@ button {
box-sizing: border-box; box-sizing: border-box;
background-color: #ebebeb; background-color: #ebebeb;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 3px; border-radius: 0.4vw;
display: block; display: block;
margin-bottom: 12px; margin-bottom: 1.5vh;
min-height: 34px; min-height: 4.5vh;
padding: 7px; padding: 1vh 1vw;
} }
select.full, select.full,
textarea.full, textarea.full,
@ -31,7 +31,7 @@ button:focus {
outline: 0; outline: 0;
} }
input[type="file"] { input[type="file"] {
margin-bottom: 16px; margin-bottom: 2vh;
} }
input[type="radio"] { input[type="radio"] {
-webkit-appearance: radio; -webkit-appearance: radio;
@ -42,7 +42,7 @@ input[type="text"],
input[type="password"], input[type="password"],
input[type="email"] { input[type="email"] {
transition: background 85ms ease-in, border-color 85ms ease-in; transition: background 85ms ease-in, border-color 85ms ease-in;
width: 250px; width: min(250px, 30vw);
} }
input[type="text"].inline-input, input[type="text"].inline-input,
input[type="password"].inline-input, input[type="password"].inline-input,
@ -50,10 +50,10 @@ input[type="email"].inline-input {
background: none; background: none;
border: 0; border: 0;
margin: 0; margin: 0;
padding: 2px; padding: 0.3vh;
min-height: 0; min-height: 0;
height: 18px; height: 2.5vh;
width: 200px; width: min(200px, 25vw);
} }
input[type="text"].full-line, input[type="text"].full-line,
input[type="password"].full-line, input[type="password"].full-line,
@ -103,9 +103,9 @@ textarea:disabled {
user-select: none; user-select: none;
} }
select { select {
max-height: 300px; max-height: 40vh;
width: 256px; width: min(256px, 32vw);
margin-bottom: 8px; margin-bottom: 1vh;
} }
select.inline { select.inline {
width: 100%; width: 100%;
@ -114,14 +114,14 @@ option[disabled] {
color: #222; color: #222;
} }
textarea { textarea {
height: 150px; height: 20vh;
transition: background 85ms ease-in, border-color 85ms ease-in; transition: background 85ms ease-in, border-color 85ms ease-in;
resize: vertical; resize: vertical;
width: 100%; width: 100%;
} }
textarea.editor { textarea.editor {
resize: none; resize: none;
padding-bottom: 22px; padding-bottom: 3vh;
} }
.button { .button {
border-radius: 3px; border-radius: 3px;
@ -136,14 +136,14 @@ button {
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
font-weight: 700; font-weight: 700;
line-height: 22px; line-height: 1.3;
padding: 7px 20px; padding: 1vh 2.5vw;
text-align: center; text-align: center;
} }
input[type="submit"] .wide, input[type="submit"] .wide,
button .wide { button .wide {
padding-left: 30px; padding-left: 4vw;
padding-right: 30px; padding-right: 4vw;
} }
input[type="submit"]:hover, input[type="submit"]:hover,
button:hover, button:hover,
@ -224,8 +224,8 @@ button.disabled:active,
} }
fieldset { fieldset {
border: 1px solid #bfbfbf; border: 1px solid #bfbfbf;
padding: 15px; padding: 2vh 2vw;
margin-bottom: 15px; margin-bottom: 2vh;
} }
input[type="hidden"] { input[type="hidden"] {
display: none; display: none;
@ -233,18 +233,18 @@ input[type="hidden"] {
.radio-div, .radio-div,
.check-div { .check-div {
display: block; display: block;
margin: 0 0 4px 20px; margin: 0 0 0.5vh 2.5vw;
min-height: 20px; min-height: 2.5vh;
position: relative; position: relative;
} }
.radio-div input, .radio-div input,
.check-div input { .check-div input {
left: -18px; left: -2.5vw;
min-height: 0; min-height: 0;
margin: 0; margin: 0;
padding: 0; padding: 0;
position: absolute; position: absolute;
top: 2px; top: 0.3vh;
} }
.radio-div label, .radio-div label,
.check-div label { .check-div label {
@ -253,7 +253,7 @@ input[type="hidden"] {
label { label {
display: block; display: block;
font-weight: 700; font-weight: 700;
margin-bottom: 4px; margin-bottom: 0.5vh;
} }
label.form-error { label.form-error {
color: #d32f2f; color: #d32f2f;
@ -269,7 +269,7 @@ textarea::-moz-placeholder {
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: 0px; margin-top: 0px;
margin-bottom: 12px; margin-bottom: 1.5vh;
} }
@media print { @media print {
.add-controls { .add-controls {
@ -281,13 +281,13 @@ textarea::-moz-placeholder {
.edit-controls input[type=button], .edit-controls input[type=button],
.add-controls input[type=button] { .add-controls input[type=button] {
float: left; float: left;
height: 32px; height: 4.5vh;
margin-bottom: 0px; margin-bottom: 0px;
} }
.edit-controls .fa-times-thin, .edit-controls .fa-times-thin,
.add-controls .fa-times-thin { .add-controls .fa-times-thin {
font-size: 26px; font-size: clamp(20px, 4vw, 26px);
margin: 3px 10px; margin: 0.5vh 1.5vw;
} }
[type="checkbox"]:not(:checked), [type="checkbox"]:not(:checked),
[type="checkbox"]:checked { [type="checkbox"]:checked {

16
client/components/import/import.css vendored
View file

@ -5,17 +5,17 @@
.map-members .mapping-list { .map-members .mapping-list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin: 0 -4px; margin: 0 -0.5vw;
} }
.map-members .mapping-list .mapping-item { .map-members .mapping-list .mapping-item {
max-width: 300px; max-width: min(300px, 40vw);
min-width: 200px; min-width: min(200px, 26vw);
padding: 6px; padding: 0.8vh 0.8vw;
margin: 5px; margin: 0.7vh;
flex: 1; flex: 1;
background: #fff; background: #fff;
border-radius: 3px; border-radius: 0.4vw;
box-shadow: 0 1px 2px rgba(0,0,0,0.15); box-shadow: 0 0.2vh 0.3vh rgba(0,0,0,0.15);
} }
.map-members .mapping-list .mapping-item:hover { .map-members .mapping-list .mapping-item:hover {
background: #f2f2f2; background: #f2f2f2;
@ -37,7 +37,7 @@
} }
.map-members .mapping-list .wekan { .map-members .mapping-list .wekan {
display: inline-block; display: inline-block;
width: 35px; width: 4.5vw;
} }
.map-members .mapping-list .wekan .member { .map-members .mapping-list .wekan .member {
float: none; float: none;

34
client/components/lists/list.css
View file

@ -9,7 +9,7 @@
float: left; float: left;
} }
[id^="swimlane-"] .list:first-child { [id^="swimlane-"] .list:first-child {
min-width: 20px; min-width: 2.5vw;
} }
.list.list-auto-width { .list.list-auto-width {
flex: 1; flex: 1;
@ -33,7 +33,7 @@
background-color: rgba(0,0,0,0.2); background-color: rgba(0,0,0,0.2);
border-color: transparent; border-color: transparent;
box-shadow: none; box-shadow: none;
height: 100px; height: 15vh;
} }
.list.list-collapsed { .list.list-collapsed {
flex: none; flex: none;
@ -45,24 +45,24 @@
.list.list-composer .list-name-input, .list.list-composer .list-name-input,
.list .list-composer .list-name-input { .list .list-composer .list-name-input {
background: #fff; background: #fff;
margin: -3px 0 8px; margin: -0.4vh 0 1vh;
} }
.list-header-add { .list-header-add {
flex: 0 0 auto; flex: 0 0 auto;
padding: 12px; padding: 1.5vh 1.5vw;
position: relative; position: relative;
min-height: 20px; min-height: 2.5vh;
} }
.list-header { .list-header {
flex: 0 0 auto; flex: 0 0 auto;
padding: 20px 12px 4px; padding: 2.5vh 1.5vw 0.5vh;
position: relative; position: relative;
min-height: 20px; min-height: 2.5vh;
background-color: #e4e4e4; background-color: #e4e4e4;
border-bottom: 6px solid #e4e4e4; border-bottom: 0.8vh solid #e4e4e4;
} }
.list-header.list-header-card-count { .list-header.list-header-card-count {
min-height: 35px; min-height: 4.5vh;
height: auto; height: auto;
} }
.list-header.ui-sortable-handle { .list-header.ui-sortable-handle {
@ -73,21 +73,21 @@
} }
.list-header .list-header-name { .list-header .list-header-name {
display: inline; display: inline;
font-size: 16px; font-size: clamp(14px, 3vw, 18px);
line-height: 17px; line-height: 1.2;
margin: 0; margin: 0;
font-weight: bold; font-weight: bold;
min-height: 9px; min-height: 1.2vh;
min-width: 30px; min-width: 4vw;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
word-wrap: break-word; word-wrap: break-word;
} }
.list-rotated { .list-rotated {
width: 10px; width: 1.3vw;
height: 250px; height: 35vh;
margin-top: -90px; margin-top: -12vh;
margin-left: -110px; margin-left: -14vw;
margin-right: 0; margin-right: 0;
transform: rotate(90deg); transform: rotate(90deg);
position: relative; position: relative;

36
client/components/main/accessibility.css
View file

@ -1,27 +1,27 @@
.my-cards-board-wrapper { .my-cards-board-wrapper {
border-radius: 0 0 4px 4px; border-radius: 0 0 0.5vw 0.5vw;
min-width: 400px; min-width: min(400px, 52vw);
margin-bottom: 2rem; margin-bottom: 2.5vh;
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
border-width: 2px; border-width: 0.3vw;
border-style: solid; border-style: solid;
border-color: #a2a2a2; border-color: #a2a2a2;
} }
.my-cards-board-title { .my-cards-board-title {
font-size: 1.4rem; font-size: clamp(1.2rem, 3vw, 1.6rem);
font-weight: bold; font-weight: bold;
padding: 0.5rem; padding: 0.7vh 0.7vw;
background-color: #808080; background-color: #808080;
color: #fff; color: #fff;
} }
.my-cards-swimlane-title { .my-cards-swimlane-title {
font-size: 1.1rem; font-size: clamp(1rem, 2.5vw, 1.3rem);
font-weight: bold; font-weight: bold;
padding: 0.5rem; padding: 0.7vh 0.7vw;
padding-bottom: 0.4rem; padding-bottom: 0.5vh;
margin-top: 0; margin-top: 0;
margin-bottom: 0.5rem; margin-bottom: 0.7vh;
text-align: center; text-align: center;
} }
.swimlane-default-color { .swimlane-default-color {
@ -29,23 +29,23 @@
} }
.my-cards-list-title { .my-cards-list-title {
font-weight: bold; font-weight: bold;
font-size: 1.1rem; font-size: clamp(1rem, 2.5vw, 1.3rem);
text-align: center; text-align: center;
margin-bottom: 0.7rem; margin-bottom: 0.9vh;
} }
.my-cards-list-wrapper { .my-cards-list-wrapper {
margin: 1rem; margin: 1.3vh 1.3vw;
border-radius: 5px; border-radius: 0.7vw;
display: inline-grid; display: inline-grid;
min-width: 250px; min-width: min(250px, 32vw);
max-width: 350px; max-width: min(350px, 45vw);
} }
.my-cards-card-wrapper { .my-cards-card-wrapper {
margin-top: 0; margin-top: 0;
margin-bottom: 10px; margin-bottom: 1.3vh;
} }
.my-cards-dueat-list-wrapper { .my-cards-dueat-list-wrapper {
max-width: 500px; max-width: min(500px, 65vw);
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
} }

10
client/components/main/brokenCards.css
View file

@ -1,15 +1,15 @@
.broken-cards-card-wrapper { .broken-cards-card-wrapper {
margin-top: 0; margin-top: 0;
margin-bottom: 10px; margin-bottom: 1.3vh;
border-width: 3px !important; border-width: 0.4vw !important;
border-color: #808080 !important; border-color: #808080 !important;
border-style: solid; border-style: solid;
border-radius: 5px; border-radius: 0.7vw;
padding: 1.5rem; padding: 2vh 2vw;
background-color: #fff; background-color: #fff;
} }
.broken-cards-wrapper { .broken-cards-wrapper {
max-width: 500px; max-width: min(500px, 65vw);
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
} }

2
client/components/main/dueCards.css
View file

@ -1,5 +1,5 @@
.due-cards-dueat-list-wrapper { .due-cards-dueat-list-wrapper {
max-width: 500px; max-width: min(500px, 65vw);
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
} }

106
client/components/main/layouts.css
View file

@ -52,8 +52,8 @@ input,
select, select,
textarea, textarea,
button { button {
font: 14px Roboto, Poppins, "Helvetica Neue", Arial, Helvetica, sans-serif; font: clamp(12px, 2.5vw, 16px) Roboto, Poppins, "Helvetica Neue", Arial, Helvetica, sans-serif;
line-height: 18px; line-height: 1.3;
color: #4d4d4d; color: #4d4d4d;
} }
html { html {
@ -85,8 +85,8 @@ body {
margin-top: 30vh; margin-top: 30vh;
} }
#content > .wrapper { #content > .wrapper {
margin-top: 10px; margin-top: 1vh;
padding: 15px; padding: 2vh 2vw;
} }
#modal { #modal {
position: absolute; position: absolute;
@ -99,56 +99,56 @@ body {
overflow-y: auto; overflow-y: auto;
} }
#modal .modal-content { #modal .modal-content {
width: 500px; width: min(500px, 90vw);
min-height: 160px; min-height: 20vh;
margin: 42px auto; margin: 5vh auto;
padding: 12px; padding: 2vh 2vw;
border-radius: 4px; border-radius: 0.5vw;
background: #dedede; background: #dedede;
z-index: 110; z-index: 110;
} }
#modal .modal-content h2 { #modal .modal-content h2 {
margin-bottom: 25px; margin-bottom: 3vh;
} }
#modal .modal-content .modal-close-btn { #modal .modal-content .modal-close-btn {
display: block; display: block;
float: right; float: right;
font-size: 24px; font-size: clamp(18px, 4vw, 24px);
} }
#modal .modal-content-wide { #modal .modal-content-wide {
width: 800px; width: min(800px, 95vw);
min-height: 0px; min-height: 0px;
margin: 42px auto; margin: 5vh auto;
padding: 12px; padding: 2vh 2vw;
border-radius: 4px; border-radius: 0.5vw;
background: #dedede; background: #dedede;
z-index: 110; z-index: 110;
} }
#modal .modal-content-wide h2 { #modal .modal-content-wide h2 {
margin-bottom: 25px; margin-bottom: 3vh;
} }
#modal .modal-content-wide .modal-close-btn { #modal .modal-content-wide .modal-close-btn {
display: block; display: block;
float: right; float: right;
font-size: 24px; font-size: clamp(18px, 4vw, 24px);
} }
h1 { h1 {
font-size: 22px; font-size: clamp(18px, 4vw, 24px);
line-height: 1.2em; line-height: 1.2em;
margin: 0 0 10px; margin: 0 0 1vh;
} }
h2 { h2 {
font-size: 18px; font-size: clamp(16px, 3.5vw, 20px);
line-height: 1.2em; line-height: 1.2em;
margin: 0 0 9px; margin: 0 0 0.8vh;
} }
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
font-size: 16px; font-size: clamp(14px, 3vw, 18px);
line-height: 1.25em; line-height: 1.25em;
margin: 0 0 6px; margin: 0 0 0.6vh;
} }
.quiet, .quiet,
.quiet a { .quiet a {
@ -160,14 +160,14 @@ h6 {
} }
.no-items-message { .no-items-message {
color: #666; color: #666;
margin: 30px 0; margin: 4vh 0;
text-align: center; text-align: center;
} }
.warning { .warning {
background: #f0ecdb; background: #f0ecdb;
border-radius: 3px; border-radius: 0.4vw;
color: #aa8f09; color: #aa8f09;
padding: 6px 8px; padding: 1vh 1.2vw;
} }
.warning a { .warning a {
color: #aa8f09; color: #aa8f09;
@ -194,7 +194,7 @@ strong {
p { p {
-webkit-user-select: text; -webkit-user-select: text;
user-select: text; user-select: text;
} }
p a { p a {
@ -203,12 +203,12 @@ p a {
} }
table, table,
p { p {
margin-bottom: 8px; margin-bottom: 1vh;
} }
pre { pre {
margin: 15px 0; margin: 2vh 0;
white-space: pre; white-space: pre;
max-height: 516px; max-height: 60vh;
} }
pre, pre,
code, code,
@ -217,10 +217,10 @@ tt {
line-height: 1.3em; line-height: 1.3em;
} }
blockquote { blockquote {
margin: 8px 0 8px 8px; margin: 1vh 0 1vh 1vw;
border-left: 1px solid #ccc; border-left: 1px solid #ccc;
color: #666; color: #666;
padding: 0 0 0 8px; padding: 0 0 0 1vw;
} }
hr { hr {
height: 1px; height: 1px;
@ -229,7 +229,7 @@ hr {
width: 100%; width: 100%;
background: #dbdbdb; background: #dbdbdb;
color: #dbdbdb; color: #dbdbdb;
margin: 15px 0; margin: 2vh 0;
padding: 0; padding: 0;
} }
table, table,
@ -241,7 +241,7 @@ th {
} }
td, td,
th { th {
padding: 5px; padding: 0.8vh 0.8vw;
border-right: 1px solid #ccc; border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
} }
@ -257,20 +257,20 @@ tbody {
} }
dl, dl,
dt { dt {
margin-bottom: 8px; margin-bottom: 1vh;
} }
dd { dd {
margin: 0 0 16px 24px; margin: 0 0 2vh 3vw;
} }
kbd { kbd {
padding: 1px 3px; padding: 0.2vh 0.5vw;
margin: 3px; margin: 0.5vh;
font-weight: bold; font-weight: bold;
background: #fafafa; background: #fafafa;
border-radius: 3px; border-radius: 0.4vw;
border: 1px solid #e6e6e6; border: 1px solid #e6e6e6;
color: unset; color: unset;
box-shadow: 0px 2px 3px rgba(0,0,0,0.15); box-shadow: 0px 0.3vh 0.5vh rgba(0,0,0,0.15);
} }
.clear { .clear {
clear: both; clear: both;
@ -310,7 +310,7 @@ kbd {
padding-bottom: 0; padding-bottom: 0;
} }
.wrapper { .wrapper {
width: calc(100% - 20px); width: calc(100% - 2vw);
margin: 0 auto; margin: 0 auto;
} }
.relative { .relative {
@ -401,23 +401,23 @@ a:not(.disabled).is-active i.fa {
} }
.big-message { .big-message {
display: block; display: block;
margin: 75px auto; margin: 10vh auto;
text-align: center; text-align: center;
max-width: 600px; max-width: min(600px, 90vw);
} }
.big-message h1 { .big-message h1 {
font-size: 26px; font-size: clamp(20px, 5vw, 28px);
margin-bottom: 24px; margin-bottom: 3vh;
} }
.big-message p { .big-message p {
font-size: 18px; font-size: clamp(16px, 3.5vw, 20px);
line-height: 22px; line-height: 1.3;
} }
.gutter { .gutter {
margin-left: 38px; margin-left: 5vw;
} }
.viewer { .viewer {
min-height: 18px; min-height: 2.5vh;
display: block; display: block;
word-wrap: break-word; word-wrap: break-word;
} }
@ -427,13 +427,13 @@ a:not(.disabled).is-active i.fa {
} }
.viewer ol { .viewer ol {
list-style-type: decimal; list-style-type: decimal;
padding-left: 20px; padding-left: 3vw;
padding-bottom: 10px; padding-bottom: 1.5vh;
} }
.viewer ul { .viewer ul {
list-style-type: initial; list-style-type: initial;
padding-left: 20px; padding-left: 3vw;
padding-bottom: 10px; padding-bottom: 1.5vh;
} }
.viewer em { .viewer em {
font-style: italic; font-style: italic;

36
client/components/main/myCards.css
View file

@ -1,27 +1,27 @@
.my-cards-board-wrapper { .my-cards-board-wrapper {
border-radius: 0 0 4px 4px; border-radius: 0 0 0.5vw 0.5vw;
min-width: 400px; min-width: min(400px, 52vw);
margin-bottom: 2rem; margin-bottom: 2.5vh;
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
border-width: 2px; border-width: 0.3vw;
border-style: solid; border-style: solid;
border-color: #a2a2a2; border-color: #a2a2a2;
} }
.my-cards-board-title { .my-cards-board-title {
font-size: 1.4rem; font-size: clamp(1.2rem, 3vw, 1.6rem);
font-weight: bold; font-weight: bold;
padding: 0.5rem; padding: 0.7vh 0.7vw;
background-color: #808080; background-color: #808080;
color: #fff; color: #fff;
} }
.my-cards-swimlane-title { .my-cards-swimlane-title {
font-size: 1.1rem; font-size: clamp(1rem, 2.5vw, 1.3rem);
font-weight: bold; font-weight: bold;
padding: 0.5rem; padding: 0.7vh 0.7vw;
padding-bottom: 0.4rem; padding-bottom: 0.5vh;
margin-top: 0; margin-top: 0;
margin-bottom: 0.5rem; margin-bottom: 0.7vh;
text-align: center; text-align: center;
} }
.swimlane-default-color { .swimlane-default-color {
@ -29,23 +29,23 @@
} }
.my-cards-list-title { .my-cards-list-title {
font-weight: bold; font-weight: bold;
font-size: 1.1rem; font-size: clamp(1rem, 2.5vw, 1.3rem);
text-align: center; text-align: center;
margin-bottom: 0.7rem; margin-bottom: 0.9vh;
} }
.my-cards-list-wrapper { .my-cards-list-wrapper {
margin: 1rem; margin: 1.3vh 1.3vw;
border-radius: 5px; border-radius: 0.7vw;
display: inline-grid; display: inline-grid;
min-width: 250px; min-width: min(250px, 32vw);
max-width: 350px; max-width: min(350px, 45vw);
} }
.my-cards-card-wrapper { .my-cards-card-wrapper {
margin-top: 0; margin-top: 0;
margin-bottom: 10px; margin-bottom: 1.3vh;
} }
.my-cards-dueat-list-wrapper { .my-cards-dueat-list-wrapper {
max-width: 500px; max-width: min(500px, 65vw);
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
} }

44
client/components/main/popup.css
View file

@ -1,16 +1,16 @@
.pop-over { .pop-over {
background: #fff; background: #fff;
border-radius: 3px; border-radius: 0.4vw;
border: 1px solid #dbdbdb; border: 1px solid #dbdbdb;
border-bottom-color: #c2c2c2; border-bottom-color: #c2c2c2;
box-shadow: 0 1px 6px rgba(0,0,0,0.3); box-shadow: 0 0.2vh 0.8vh rgba(0,0,0,0.3);
position: absolute; position: absolute;
width: 300px; width: min(300px, 40vw);
z-index: 99999; z-index: 99999;
margin-top: 5px; margin-top: 0.7vh;
} }
.pop-over hr { .pop-over hr {
margin: 4px 0px; margin: 0.5vh 0px;
} }
.pop-over p, .pop-over p,
.pop-over textarea, .pop-over textarea,
@ -22,27 +22,27 @@
} }
.pop-over select { .pop-over select {
width: 100%; width: 100%;
margin-bottom: 14px; margin-bottom: 1.8vh;
} }
.pop-over textarea { .pop-over textarea {
height: 72px; height: 9vh;
} }
.pop-over form a span { .pop-over form a span {
padding: 0 0.5rem; padding: 0 0.7vw;
} }
.pop-over .header { .pop-over .header {
height: 36px; height: 4.5vh;
position: relative; position: relative;
margin-bottom: 8px; margin-bottom: 1vh;
background: #f7f7f7; background: #f7f7f7;
border-bottom: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc;
color: #666; color: #666;
} }
.pop-over .header .header-title { .pop-over .header .header-title {
display: block; display: block;
line-height: 32px; line-height: 4vh;
padding-top: 4px; padding-top: 0.5vh;
margin: 0 10px; margin: 0 1.3vw;
font-weight: bold; font-weight: bold;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -51,18 +51,18 @@
.pop-over .header .back-btn { .pop-over .header .back-btn {
float: left; float: left;
overflow: hidden; overflow: hidden;
width: 30px; width: 4vw;
transition: width 0.2s; transition: width 0.2s;
} }
.pop-over .header .back-btn i.fa { .pop-over .header .back-btn i.fa {
margin: 10px; margin: 1.3vw;
margin-top: 12px; margin-top: 1.5vh;
} }
.pop-over .header .back-btn.is-hidden { .pop-over .header .back-btn.is-hidden {
width: 0; width: 0;
} }
.pop-over .header .close-btn { .pop-over .header .close-btn {
padding: 10px 10px 10px 4px; padding: 1.3vh 1.3vw 1.3vh 0.5vw;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@ -76,23 +76,23 @@
} }
.pop-over .content-container { .pop-over .content-container {
width: 5000px; width: 5000px;
max-height: 550px; max-height: 70vh;
transition: transform 0.2s; transition: transform 0.2s;
} }
.pop-over .content-container .content { .pop-over .content-container .content {
width: 280px; width: min(280px, 37vw);
padding: 0 10px 10px; padding: 0 1.3vw 1.3vh;
float: left; float: left;
} }
.pop-over .content-container .content.no-height { .pop-over .content-container .content.no-height {
height: 20px; height: 2.5vh;
} }
.pop-over .quiet { .pop-over .quiet {
/* padding: 6px 6px 4px;*/ /* padding: 6px 6px 4px;*/
} }
.pop-over.search-over { .pop-over.search-over {
background: #f0f0f0; background: #f0f0f0;
min-height: 114px; min-height: 14vh;
} }
.pop-over.search-over .header { .pop-over.search-over .header {
display: none; display: none;

30
client/components/notifications/notification.css
View file

@ -4,7 +4,7 @@
#notifications-drawer .notification { #notifications-drawer .notification {
display: flex; display: flex;
float: none; float: none;
padding: 15px 8px 8px; padding: 2vh 1vw 1vh;
color: #000; color: #000;
border-bottom: 1px solid #dbdbdb; border-bottom: 1px solid #dbdbdb;
} }
@ -12,18 +12,18 @@
display: none; display: none;
} }
#notifications-drawer .notification .read-status { #notifications-drawer .notification .read-status {
width: 30px; width: 4vw;
padding: 0px 10px 0px 0px; padding: 0 1.3vw 0 0;
} }
#notifications-drawer .notification .read-status input { #notifications-drawer .notification .read-status input {
width: 24px; width: 3vw;
height: 24px; height: 3vw;
} }
#notifications-drawer .notification .read-status .activity-type { #notifications-drawer .notification .read-status .activity-type {
margin: 16px 0 0; margin: 2vh 0 0;
width: 17px; width: 2.2vw;
height: 17px; height: 2.2vw;
font-size: 17px; font-size: clamp(14px, 2.5vw, 17px);
display: block; display: block;
color: #bbb; color: #bbb;
} }
@ -32,20 +32,20 @@
padding: 0px; padding: 0px;
} }
#notifications-drawer .notification .details .activity a.member svg { #notifications-drawer .notification .details .activity a.member svg {
padding: 3px; padding: 0.4vw;
} }
#notifications-drawer .notification .details .activity .activity-desc { #notifications-drawer .notification .details .activity .activity-desc {
margin: 0px 0px 0px 5px; margin: 0 0 0 0.7vw;
} }
#notifications-drawer .notification .details .activity .activity-comment { #notifications-drawer .notification .details .activity .activity-comment {
display: block; display: block;
width: 100%; width: 100%;
border-radius: 3px; border-radius: 0.4vw;
background: #fff; background: #fff;
text-decoration: none; text-decoration: none;
box-shadow: 0 1px 2px rgba(0,0,0,0.2); box-shadow: 0 0.2vh 0.3vh rgba(0,0,0,0.2);
margin-top: 5px; margin-top: 0.7vh;
padding: 5px; padding: 0.7vh 0.7vw;
} }
#notifications-drawer .notification .details .activity .activity-meta { #notifications-drawer .notification .details .activity .activity-meta {
display: block; display: block;

10
client/components/rules/rules.css
View file

@ -1,8 +1,8 @@
.rules-list { .rules-list {
overflow: hidden; overflow: hidden;
overflow-y: scroll; overflow-y: scroll;
max-height: 400px; max-height: 50vh;
padding-right: 5px; padding-right: 0.7vw;
} }
.rules-lists-item { .rules-lists-item {
display: block; display: block;
@ -33,14 +33,14 @@
.rules-add { .rules-add {
display: block; display: block;
overflow: auto; overflow: auto;
margin-top: 15px; margin-top: 2vh;
margin-bottom: 5px; margin-bottom: 0.7vh;
} }
.rules-add input { .rules-add input {
display: inline-block; display: inline-block;
float: right; float: right;
margin: auto; margin: auto;
margin-right: 10px; margin-right: 1.3vw;
} }
.rules-add button { .rules-add button {
display: inline-block; display: inline-block;

20
client/components/settings/settingBody.css
View file

@ -17,34 +17,34 @@
position: absolute; position: absolute;
} }
.setting-content .content-title { .setting-content .content-title {
font-size: 20px; font-size: clamp(16px, 3.5vw, 22px);
} }
.setting-content .content-body { .setting-content .content-body {
display: flex; display: flex;
padding-top: 15px; padding-top: 2vh;
height: 100%; height: 100%;
gap: 10px; gap: 1.3vw;
} }
.setting-content .content-body .side-menu { .setting-content .content-body .side-menu {
background-color: #f7f7f7; background-color: #f7f7f7;
border: 1px solid #f0f0f0; border: 1px solid #f0f0f0;
border-radius: 4px; border-radius: 0.5vw;
width: 250px; width: min(250px, 32vw);
box-shadow: inset -1px -1px 3px rgba(0,0,0,0.05); box-shadow: inset -0.2vh -0.2vh 0.4vh rgba(0,0,0,0.05);
} }
.setting-content .content-body .side-menu ul li { .setting-content .content-body .side-menu ul li {
margin: 0.1rem 0.2rem; margin: 0.2vh 0.3vw;
} }
.setting-content .content-body .side-menu ul li.active { .setting-content .content-body .side-menu ul li.active {
background: #fff; background: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.15); box-shadow: 0 0.2vh 0.3vh rgba(0,0,0,0.15);
} }
.setting-content .content-body .side-menu ul li:hover { .setting-content .content-body .side-menu ul li:hover {
background: #fff; background: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.15); box-shadow: 0 0.2vh 0.3vh rgba(0,0,0,0.15);
} }
.setting-content .content-body .side-menu ul li a { .setting-content .content-body .side-menu ul li a {
padding: 1rem 0 1rem 1rem; padding: 1.3vh 0 1.3vh 1.3vw;
width: 95%; width: 95%;
} }
.setting-content .content-body .side-menu ul li a span { .setting-content .content-body .side-menu ul li a span {

12
client/components/swimlanes/swimlanes.css
View file

@ -13,15 +13,15 @@
font-size: 50%; font-size: 50%;
color: #a6a6a6; color: #a6a6a6;
position: absolute; position: absolute;
top: 5px; top: 0.7vh;
left: 100px; left: 13vw;
} }
.swimlane-header-menu .swimlane-header-collapse-up { .swimlane-header-menu .swimlane-header-collapse-up {
font-size: 50%; font-size: 50%;
color: #a6a6a6; color: #a6a6a6;
position: absolute; position: absolute;
bottom: 5px; bottom: 0.7vh;
left: 100px; left: 13vw;
} }
.swimlane-header-menu .swimlane-header-uncollapse-up { .swimlane-header-menu .swimlane-header-uncollapse-up {
font-size: 50%; font-size: 50%;
@ -35,10 +35,10 @@
background-color: rgba(0,0,0,0.2); background-color: rgba(0,0,0,0.2);
border-color: transparent; border-color: transparent;
box-shadow: none; box-shadow: none;
height: 100px; height: 15vh;
} }
.swimlane.ui-sortable-helper { .swimlane.ui-sortable-helper {
box-shadow: -2px 2px 8px rgba(0,0,0,0.3), 0 0 1px rgba(0,0,0,0.5); box-shadow: -0.3vw 0.3vh 1vh rgba(0,0,0,0.3), 0 0 0.1vw rgba(0,0,0,0.5);
transform: rotate(2deg); transform: rotate(2deg);
cursor: grabbing; cursor: grabbing;
} }

26
client/components/users/userForm.css
View file

@ -1,25 +1,25 @@
.auth-layout .at-form-landing-logo { .auth-layout .at-form-landing-logo {
width: 249px; width: min(249px, 32vw);
margin: auto; margin: auto;
margin-top: 50px; margin-top: 6vh;
margin-bottom: 20px; margin-bottom: 2.5vh;
} }
.auth-layout .auth-dialog { .auth-layout .auth-dialog {
width: 275px; width: min(275px, 36vw);
padding: 25px; padding: 3vh 3vw;
margin: auto; margin: auto;
margin-bottom: 20px; margin-bottom: 2.5vh;
background: #fff; background: #fff;
border-radius: 3px; border-radius: 0.4vw;
border: 1px solid #dbdbdb; border: 1px solid #dbdbdb;
border-bottom-color: #c2c2c2; border-bottom-color: #c2c2c2;
box-shadow: 0 1px 6px rgba(0,0,0,0.3); box-shadow: 0 0.2vh 0.8vh rgba(0,0,0,0.3);
} }
.auth-layout .auth-dialog .at-form .at-link { .auth-layout .auth-dialog .at-form .at-link {
color: #17683a; color: #17683a;
} }
.auth-layout .auth-dialog .at-form label { .auth-layout .auth-dialog .at-form label {
margin-bottom: 3px; margin-bottom: 0.4vh;
} }
.auth-layout .auth-dialog .at-form input { .auth-layout .auth-dialog .at-form input {
width: 100%; width: 100%;
@ -31,9 +31,9 @@
} }
.auth-layout .auth-dialog .at-form .at-title { .auth-layout .auth-dialog .at-form .at-title {
background: #f7f7f7; background: #f7f7f7;
margin: -25px; margin: -3vh -3vw;
padding: 15px 25px 5px; padding: 2vh 3vw 0.7vh;
margin-bottom: 20px; margin-bottom: 2.5vh;
border-bottom: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc;
color: #4d4d4d; color: #4d4d4d;
font-weight: bold; font-weight: bold;
@ -42,7 +42,7 @@
.auth-layout .auth-dialog .at-form .at-signin-link, .auth-layout .auth-dialog .at-form .at-signin-link,
.auth-layout .auth-dialog .at-form .at-forgotPwd { .auth-layout .auth-dialog .at-form .at-forgotPwd {
font-size: 0.9em; font-size: 0.9em;
margin-top: 15px; margin-top: 2vh;
color: #4d4d4d; color: #4d4d4d;
} }
.auth-layout .auth-dialog .at-form .at-signup-link .at-signUp, .auth-layout .auth-dialog .at-form .at-signup-link .at-signUp,