From ea3ddb38a66896e271724fe3f59552a71acf5b2f Mon Sep 17 00:00:00 2001 From: Neerholt Date: Thu, 13 Aug 2020 10:02:56 +0200 Subject: [PATCH] v0.9.5 - css stuff compile --- skolehjem/public/css/webapp.css | 78 ++++++++++++++++++++++++-- skolehjem/public/css/webappdark.css | 85 ++++++++++++++++++++++++++--- 2 files changed, 149 insertions(+), 14 deletions(-) diff --git a/skolehjem/public/css/webapp.css b/skolehjem/public/css/webapp.css index f9c6a0b..48bd4a0 100644 --- a/skolehjem/public/css/webapp.css +++ b/skolehjem/public/css/webapp.css @@ -1,19 +1,23 @@ @charset "UTF-8"; + @font-face { font-family: "Titillium Web"; src: url("/fonts/TitilliumWeb-Regular.ttf"); font-weight: normal; } + @font-face { font-family: "Titillium Web"; src: url("/fonts/TitilliumWeb-SemiBold.ttf"); font-weight: 600; } + @font-face { font-family: "Titillium Web"; src: url("/fonts/TitilliumWeb-Bold.ttf"); font-weight: 700; } + form { max-width: 100%; padding: 0 0.45rem 0 0.45rem; @@ -66,7 +70,8 @@ input[type=file] { display: inline-flex; } -input, select { +input, +select { border: grey solid 2px; border-radius: 4px; background-color: transparent; @@ -284,7 +289,8 @@ span.toggle__text.sde-blue { font-family: "Titillium Web"; } -html, body { +html, +body { width: 100%; margin: 0; padding: 0; @@ -532,6 +538,7 @@ a { * Font Awesome Free 5.13.1 by @fontawesome - https://fontawesome.com * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) */ + .fa, .fas, .far, @@ -611,6 +618,7 @@ a { margin-left: 2.5em; padding-left: 0; } + .fa-ul > li { position: relative; } @@ -644,6 +652,7 @@ a { .fab.fa-pull-left { margin-right: 0.3em; } + .fa.fa-pull-right, .fas.fa-pull-right, .far.fa-pull-right, @@ -666,6 +675,7 @@ a { 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } @@ -675,10 +685,12 @@ a { 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } } + .fa-rotate-90 { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; transform: rotate(90deg); @@ -704,7 +716,8 @@ a { transform: scale(1, -1); } -.fa-flip-both, .fa-flip-horizontal.fa-flip-vertical { +.fa-flip-both, +.fa-flip-horizontal.fa-flip-vertical { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"; transform: scale(-1, -1); } @@ -750,6 +763,7 @@ a { /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen readers do not read off random characters that represent icons */ + .fa-500px:before { content: "\F26E"; } @@ -6553,7 +6567,8 @@ readers do not read off random characters that represent icons */ width: 1px; } -.sr-only-focusable:active, .sr-only-focusable:focus { +.sr-only-focusable:active, +.sr-only-focusable:focus { clip: auto; height: auto; margin: 0; @@ -6566,6 +6581,7 @@ readers do not read off random characters that represent icons */ * Font Awesome Free 5.13.1 by @fontawesome - https://fontawesome.com * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) */ + @font-face { font-family: "Font Awesome 5 Free"; font-style: normal; @@ -6574,6 +6590,7 @@ readers do not read off random characters that represent icons */ src: url("/webfonts/fa-solid-900.eot"); src: url("/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("/webfonts/fa-solid-900.woff2") format("woff2"), url("/webfonts/fa-solid-900.woff") format("woff"), url("/webfonts/fa-solid-900.ttf") format("truetype"), url("/webfonts/fa-solid-900.svg#fontawesome") format("svg"); } + .fa, .fas { font-family: "Font Awesome 5 Free"; @@ -6612,7 +6629,8 @@ main { margin: 7rem 0 5rem 0; } - header, #menu { + header, + #menu { padding: 1.25rem 1.75rem 0 1.75rem; } @@ -6662,9 +6680,11 @@ main { justify-content: center; } } + .mock-up-link { display: none; } + @media (min-width: 768px) { .mock-up-link { display: block; @@ -6678,6 +6698,7 @@ main { max-width: 414px; overflow-y: auto; } + @media (min-width: 415px) { .main-container-wrapper { box-shadow: 0px 32px 47px rgba(32, 23, 23, 0.09); @@ -6697,14 +6718,17 @@ main { top: -25px; width: 80px; } + .header__btn .icon { display: inline-block; } + .header__btn--left { left: -25px; padding-left: 38px; text-align: left; } + .header__btn--right { padding-right: 32px; right: -25px; @@ -6716,10 +6740,12 @@ main { padding: 16px; margin-bottom: 24px; } + .calendar-container__header { display: flex; justify-content: space-between; } + .calendar-container__btn { background: transparent; border: 0; @@ -6728,6 +6754,7 @@ main { outline: none; color: #E9E8E8; } + .calendar-container__title { color: #222741; font-size: 20px; @@ -6742,6 +6769,7 @@ main { margin-top: 12px; width: 100%; } + .calendar-table__item { border-radius: 50%; color: #424588; @@ -6754,17 +6782,21 @@ main { justify-content: center; cursor: pointer; } + .calendar-table__item:hover > span { color: white; } + .calendar-table__row { display: flex; justify-content: center; } + .calendar-table__header { border-bottom: 2px solid #F2F6F8; margin-bottom: 4px; } + .calendar-table__header .calendar-table__col { display: inline-block; color: #99A4AE; @@ -6776,95 +6808,115 @@ main { width: 40px; height: 18px; } + @media (min-width: 350px) { .calendar-table__header .calendar-table__col { width: 46px; height: 20.7px; } } + @media (min-width: 390px) { .calendar-table__header .calendar-table__col { width: 56px; height: 25.2px; } } + .calendar-table__body .calendar-table__col { width: 40px; height: 40px; border-radius: 50%; } + @media (min-width: 350px) { .calendar-table__body .calendar-table__col { width: 46px; height: 46px; } } + @media (min-width: 390px) { .calendar-table__body .calendar-table__col { width: 56px; height: 56px; } } + @media (min-width: 410px) { .calendar-table__body .calendar-table__col { width: 56px; height: 56px; } } + @media (min-width: 460px) { .calendar-table__body .calendar-table__col { width: 61px; height: 61px; } } + .calendar-table__body .calendar-table__col.selected { background: #00788a; transition: all 0.3s ease-in; outline: none; } + .calendar-table__today .calendar-table__item { border-color: #FEFEFE; background-color: #00788a; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1); } + .calendar-table__event .calendar-table__item { background-color: #00788a; border-color: #FEFEFE; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1); color: #fff; } + .calendar-table__event--long { overflow-x: hidden; } + .calendar-table__event--long .calendar-table__item { border-radius: 0; } + .calendar-table__event--start .calendar-table__item { border-left: 2px solid #fff; border-radius: 50% 0 0 50%; } + .calendar-table__event--start.calendar-table__col:last-child .calendar-table__item { border-width: 2px; } + .calendar-table__event--end .calendar-table__item { border-right: 2px solid #fff; border-radius: 0 50% 50% 0; } + .calendar-table__event--end.calendar-table__col:first-child .calendar-table__item { border-width: 2px; } + .calendar-table__inactive .calendar-table__item { color: #DCDCE3; cursor: default; } + .calendar-table__inactive .calendar-table__item:hover { background: transparent; box-shadow: none; } + .calendar-table__inactive.calendar-table__event .calendar-table__item { color: #fff; opacity: 0.25; } + .calendar-table__inactive.calendar-table__event .calendar-table__item:hover { background: #00788a; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1); @@ -6888,6 +6940,7 @@ main { font-weight: 600; margin-bottom: 16px; } + .events__tag { background: #00788a; border: 2px solid #FEFEFE; @@ -6901,9 +6954,11 @@ main { padding: 5px 2px; text-align: center; } + .events__tag--highlighted { background: #FDCA40; } + .events__item { background: #fff; border-left: 8px solid #00788a; @@ -6915,9 +6970,11 @@ main { align-items: center; margin-bottom: 16px; } + .events__item--left { width: calc(100% - 76px); } + .events__name { font-size: 12px; font-weight: 700; @@ -6925,6 +6982,7 @@ main { display: block; margin-bottom: 6px; } + .events__date { font-size: 12px; color: #9FAAB7; @@ -6976,38 +7034,46 @@ main { bottom: 0; opacity: 0; } + to { bottom: 30px; opacity: 1; } } + @keyframes fadein { from { bottom: 0; opacity: 0; } + to { bottom: 30px; opacity: 1; } } + @-webkit-keyframes fadeout { from { bottom: 30px; opacity: 1; } + to { bottom: 0; opacity: 0; } } + @keyframes fadeout { from { bottom: 30px; opacity: 1; } + to { bottom: 0; opacity: 0; } -} \ No newline at end of file +} + diff --git a/skolehjem/public/css/webappdark.css b/skolehjem/public/css/webappdark.css index 44a4e43..238bd99 100644 --- a/skolehjem/public/css/webappdark.css +++ b/skolehjem/public/css/webappdark.css @@ -1,19 +1,23 @@ @charset "UTF-8"; + @font-face { font-family: "Titillium Web"; src: url("/fonts/TitilliumWeb-Regular.ttf"); font-weight: normal; } + @font-face { font-family: "Titillium Web"; src: url("/fonts/TitilliumWeb-SemiBold.ttf"); font-weight: 600; } + @font-face { font-family: "Titillium Web"; src: url("/fonts/TitilliumWeb-Bold.ttf"); font-weight: 700; } + form { max-width: 100%; padding: 0 0.45rem 0 0.45rem; @@ -66,7 +70,8 @@ input[type=file] { display: inline-flex; } -input, select { +input, +select { border: grey solid 2px; border-radius: 4px; background-color: transparent; @@ -284,7 +289,8 @@ span.toggle__text.sde-blue { font-family: "Titillium Web"; } -html, body { +html, +body { width: 100%; margin: 0; padding: 0; @@ -532,6 +538,7 @@ a { * Font Awesome Free 5.13.1 by @fontawesome - https://fontawesome.com * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) */ + .fa, .fas, .far, @@ -611,6 +618,7 @@ a { margin-left: 2.5em; padding-left: 0; } + .fa-ul > li { position: relative; } @@ -644,6 +652,7 @@ a { .fab.fa-pull-left { margin-right: 0.3em; } + .fa.fa-pull-right, .fas.fa-pull-right, .far.fa-pull-right, @@ -666,6 +675,7 @@ a { 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } @@ -675,10 +685,12 @@ a { 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } } + .fa-rotate-90 { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; transform: rotate(90deg); @@ -704,7 +716,8 @@ a { transform: scale(1, -1); } -.fa-flip-both, .fa-flip-horizontal.fa-flip-vertical { +.fa-flip-both, +.fa-flip-horizontal.fa-flip-vertical { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"; transform: scale(-1, -1); } @@ -750,6 +763,7 @@ a { /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen readers do not read off random characters that represent icons */ + .fa-500px:before { content: "\F26E"; } @@ -6553,7 +6567,8 @@ readers do not read off random characters that represent icons */ width: 1px; } -.sr-only-focusable:active, .sr-only-focusable:focus { +.sr-only-focusable:active, +.sr-only-focusable:focus { clip: auto; height: auto; margin: 0; @@ -6566,6 +6581,7 @@ readers do not read off random characters that represent icons */ * Font Awesome Free 5.13.1 by @fontawesome - https://fontawesome.com * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) */ + @font-face { font-family: "Font Awesome 5 Free"; font-style: normal; @@ -6574,6 +6590,7 @@ readers do not read off random characters that represent icons */ src: url("/webfonts/fa-solid-900.eot"); src: url("/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("/webfonts/fa-solid-900.woff2") format("woff2"), url("/webfonts/fa-solid-900.woff") format("woff"), url("/webfonts/fa-solid-900.ttf") format("truetype"), url("/webfonts/fa-solid-900.svg#fontawesome") format("svg"); } + .fa, .fas { font-family: "Font Awesome 5 Free"; @@ -6612,7 +6629,8 @@ main { margin: 7rem 0 5rem 0; } - header, #menu { + header, + #menu { padding: 1.25rem 1.75rem 0 1.75rem; } @@ -6662,9 +6680,11 @@ main { justify-content: center; } } + .mock-up-link { display: none; } + @media (min-width: 768px) { .mock-up-link { display: block; @@ -6678,6 +6698,7 @@ main { max-width: 414px; overflow-y: auto; } + @media (min-width: 415px) { .main-container-wrapper { box-shadow: 0px 32px 47px rgba(32, 23, 23, 0.09); @@ -6697,14 +6718,17 @@ main { top: -25px; width: 80px; } + .header__btn .icon { display: inline-block; } + .header__btn--left { left: -25px; padding-left: 38px; text-align: left; } + .header__btn--right { padding-right: 32px; right: -25px; @@ -6716,10 +6740,12 @@ main { padding: 16px; margin-bottom: 24px; } + .calendar-container__header { display: flex; justify-content: space-between; } + .calendar-container__btn { background: transparent; border: 0; @@ -6728,6 +6754,7 @@ main { outline: none; color: #E9E8E8; } + .calendar-container__title { color: #222741; font-size: 20px; @@ -6742,6 +6769,7 @@ main { margin-top: 12px; width: 100%; } + .calendar-table__item { border-radius: 50%; color: #424588; @@ -6754,17 +6782,21 @@ main { justify-content: center; cursor: pointer; } + .calendar-table__item:hover > span { color: white; } + .calendar-table__row { display: flex; justify-content: center; } + .calendar-table__header { border-bottom: 2px solid #F2F6F8; margin-bottom: 4px; } + .calendar-table__header .calendar-table__col { display: inline-block; color: #99A4AE; @@ -6776,95 +6808,115 @@ main { width: 40px; height: 18px; } + @media (min-width: 350px) { .calendar-table__header .calendar-table__col { width: 46px; height: 20.7px; } } + @media (min-width: 390px) { .calendar-table__header .calendar-table__col { width: 56px; height: 25.2px; } } + .calendar-table__body .calendar-table__col { width: 40px; height: 40px; border-radius: 50%; } + @media (min-width: 350px) { .calendar-table__body .calendar-table__col { width: 46px; height: 46px; } } + @media (min-width: 390px) { .calendar-table__body .calendar-table__col { width: 56px; height: 56px; } } + @media (min-width: 410px) { .calendar-table__body .calendar-table__col { width: 56px; height: 56px; } } + @media (min-width: 460px) { .calendar-table__body .calendar-table__col { width: 61px; height: 61px; } } + .calendar-table__body .calendar-table__col.selected { background: #00788a; transition: all 0.3s ease-in; outline: none; } + .calendar-table__today .calendar-table__item { border-color: #FEFEFE; background-color: #00788a; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1); } + .calendar-table__event .calendar-table__item { background-color: #00788a; border-color: #FEFEFE; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1); color: #fff; } + .calendar-table__event--long { overflow-x: hidden; } + .calendar-table__event--long .calendar-table__item { border-radius: 0; } + .calendar-table__event--start .calendar-table__item { border-left: 2px solid #fff; border-radius: 50% 0 0 50%; } + .calendar-table__event--start.calendar-table__col:last-child .calendar-table__item { border-width: 2px; } + .calendar-table__event--end .calendar-table__item { border-right: 2px solid #fff; border-radius: 0 50% 50% 0; } + .calendar-table__event--end.calendar-table__col:first-child .calendar-table__item { border-width: 2px; } + .calendar-table__inactive .calendar-table__item { color: #DCDCE3; cursor: default; } + .calendar-table__inactive .calendar-table__item:hover { background: transparent; box-shadow: none; } + .calendar-table__inactive.calendar-table__event .calendar-table__item { color: #fff; opacity: 0.25; } + .calendar-table__inactive.calendar-table__event .calendar-table__item:hover { background: #00788a; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1); @@ -6888,6 +6940,7 @@ main { font-weight: 600; margin-bottom: 16px; } + .events__tag { background: #00788a; border: 2px solid #FEFEFE; @@ -6901,9 +6954,11 @@ main { padding: 5px 2px; text-align: center; } + .events__tag--highlighted { background: #FDCA40; } + .events__item { background: #fff; border-left: 8px solid #00788a; @@ -6915,9 +6970,11 @@ main { align-items: center; margin-bottom: 16px; } + .events__item--left { width: calc(100% - 76px); } + .events__name { font-size: 12px; font-weight: 700; @@ -6925,6 +6982,7 @@ main { display: block; margin-bottom: 6px; } + .events__date { font-size: 12px; color: #9FAAB7; @@ -6976,42 +7034,51 @@ main { bottom: 0; opacity: 0; } + to { bottom: 30px; opacity: 1; } } + @keyframes fadein { from { bottom: 0; opacity: 0; } + to { bottom: 30px; opacity: 1; } } + @-webkit-keyframes fadeout { from { bottom: 30px; opacity: 1; } + to { bottom: 0; opacity: 0; } } + @keyframes fadeout { from { bottom: 30px; opacity: 1; } + to { bottom: 0; opacity: 0; } } -html, body { + +html, +body { background-color: #666666; } @@ -7027,7 +7094,8 @@ main { color: white; } -input, select { +input, +select { border-color: white; } @@ -7054,4 +7122,5 @@ input::placeholder { .ql-align-center > strong { color: #ffffff; -} \ No newline at end of file +} +