diff --git a/src/app/shared/components/overlay/task-overlay/task-overlay.component.scss b/src/app/shared/components/overlay/task-overlay/task-overlay.component.scss index b33412e..5775d09 100644 --- a/src/app/shared/components/overlay/task-overlay/task-overlay.component.scss +++ b/src/app/shared/components/overlay/task-overlay/task-overlay.component.scss @@ -42,12 +42,16 @@ .headline { font-size: 61px; font-weight: 700; + width: 100%; + word-wrap: break-word; } .description { font-size: 20px; font-weight: 400; margin-top: 32px; + width: 100%; + word-wrap: break-word; } // DATE @@ -239,3 +243,28 @@ } } } + +/*------------- RESPONSIVE -------------*/ + +@media screen and (max-width: 650px) { + .headline { + font-size: 36px; + } + + .description, + .date, + .priority, + .assigned, + .subtasks { + font-size: 16px; + } + + .subtasks, + .assigned, + .date, + .priority { + p { + font-size: 16px; + } + } +} diff --git a/src/styles.scss b/src/styles.scss index e33bf0b..730f912 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -37,18 +37,22 @@ body { /*------------- SCROLLBAR -------------*/ -*::-webkit-scrollbar { - width: 16px; -} - -*::-webkit-scrollbar-track { - background: var(--white); -} - -*::-webkit-scrollbar-thumb { - background-color: var(--light-gray); +::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2); border-radius: 10px; - border: 3px solid var(--white); + background-color: var(--white); +} + +::-webkit-scrollbar { + width: 6px; + height: 6px; + background-color: var(--white); +} + +::-webkit-scrollbar-thumb { + border-radius: 10px; + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2); + background-color: var(--light-gray); } /*------------- FONTS -------------*/