From 117d7fff1bbf53e38b522cf88bf8b4f56deb4df8 Mon Sep 17 00:00:00 2001 From: Vince Linise <32978709+ecnivtwelve@users.noreply.github.com> Date: Sat, 17 Sep 2022 14:45:23 +0200 Subject: [PATCH] refactor style.css --- css/{main.css => style.css} | 3224 +++++++++++++++++------------------ index.html | 2 +- papillonWorker.js | 2 +- papillonWorkerDev.js | 71 - 4 files changed, 1614 insertions(+), 1685 deletions(-) rename css/{main.css => style.css} (94%) delete mode 100644 papillonWorkerDev.js diff --git a/css/main.css b/css/style.css similarity index 94% rename from css/main.css rename to css/style.css index d8c1a26..11603f2 100644 --- a/css/main.css +++ b/css/style.css @@ -1,1613 +1,1613 @@ -@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;1,700&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=DynaPuff:wght@400;500;600;700&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;400;500;600;700&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&display=swap'); -body { - background: #F1F1F3; - margin: 0; - --font: system-ui; - overflow: visible; -} - -input[type="date"]::-webkit-inner-spin-button, -input[type="date"]::-webkit-calendar-picker-indicator { - display: none; - -webkit-appearance: none; -} - -body * { - font-family: var(--font); - -webkit-user-select: none; - user-select: none; - -webkit-touch-callout: none; -} - -:root { - --safe-space: env(safe-area-inset-bottom); - --safe-space-top: 10px; - --theme-color: #FFFFFF; - --bg: #00000010; -} - -@media only screen and (min-device-width: 414px) and (min-device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait), -only screen and (min-device-width: 375px) and (min-device-height: 812px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait), -only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3), -only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2), -only screen and (device-width: 390px) and (device-height: 844px), -only screen and (device-width: 390px) and (device-height: 844px), -only screen and (device-width: 428px) and (device-height: 926px) { - :root { - --safe-space-top: 0px; - } - .time { - margin-bottom: calc(env(safe-area-inset-bottom) + 8px) !important; - } - - #appContent { - height: calc(100vh - 61px - var(--safe-space) - 56px - 42px) !important; - } - - .useless #appContent { - height: calc(100vh - 61px - var(--safe-space) - 42px) !important; - } -} - -#navContent { - display: flex; - height: 52px !important; - background-color: #FFFFFF; - align-items: center; - justify-content: center; - box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.04); - position: fixed; - z-index: 99999999; - width: 100vw; - top: 0; - left: 0; - right: 0; - overflow: hidden; -} - -#appContent { - top: 56px; - height: calc(100vh - 56px - var(--safe-space) - 56px); - overflow-y: scroll; - z-index: 9; - margin-top: 52px; -} - -.useless #appContent { - height: calc(100vh - 56px - var(--safe-space)); -} - -#menuContent { - height: 56px; - display: flex; - align-items: center; - justify-content: center; - background: #FFFFFF; - box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.04); - padding-bottom: calc(var(--safe-space) + 4px); - padding-left: 20px; - position: fixed; - bottom: 0; - left: 0; - right: 0; - z-index: 999999999; - animation: not-useless 0.3s ease-out forwards; -} - -@keyframes not-useless { - 0% { - transform: translateY(100px); - } - 100% { - transform: translateY(0px); - } -} - -.useless #menuContent { - animation: useless 0.3s ease-out forwards; -} - -@keyframes useless { - 0% { - transform: translateY(0px); - } - 100% { - transform: translateY(100px); - } -} - -.daysRoll { - display: flex; - align-items: center; - justify-content: center; - margin-left: -24px; -} - -.daysRollTmrw { - animation: daysRollTmrwStart 0.3s cubic-bezier(1,0,1,0), daysRollTmrwEnd 0.3s 0.3s cubic-bezier(0,1,0,1); -} - -@keyframes daysRollTmrwStart { - 0% { - transform: translateX(0px); - opacity: 1; - } - 100% { - transform: translateX(-80px); - opacity: 0; - } -} - -@keyframes daysRollTmrwEnd { - 0% { - transform: translateX(80px); - opacity: 0; - } - 100% { - transform: translateX(-0px); - opacity: 1; - } -} - -.daysRollYstrdy { - animation: daysRollYstrdyStart 0.3s cubic-bezier(1,0,1,0), daysRollYstrdyEnd 0.3s 0.3s cubic-bezier(0,1,0,1); -} - -@keyframes daysRollYstrdyStart { - 0% { - transform: translateX(0px); - opacity: 1; - } - 100% { - transform: translateX(80px); - opacity: 0; - } -} - -@keyframes daysRollYstrdyEnd { - 0% { - transform: translateX(-80px); - opacity: 0; - } - 100% { - transform: translateX(-0px); - opacity: 1; - } -} - -.dayName:not(.today) { - width: 70px; - overflow: hidden; - display: flex; - text-overflow: clip; - white-space: nowrap; -} - -.tomorrow { - text-align: left; - align-items: flex-start; - justify-content: flex-start; - opacity: 0.2; - mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), transparent); -} - -.yesterday { - text-align: right; - align-items: flex-end; - justify-content: flex-end; - opacity: 0.2; - mask-image: linear-gradient(to left, rgba(0, 0, 0, 1), transparent); -} - -.today { - margin: 0px 20px; - font-weight: 600; -} - -#rn { - -webkit-appearance: none; - width: 0.001px; - font-size: 0.001px; - padding: 0.001px; - color: transparent; - background: transparent; - border: none; -} - -#rnPrev { - position: absolute; - left: 24px; - z-index: 9999; -} - -#rnNext { - position: absolute; - right: 24px; - z-index: 9999; -} - -.naviBtn { - box-shadow: 0px 0px 10px #fff; -} - -body.menuOpen #menuContent, -body.menuOpen #appContent { - margin-left: 90vw !important; -} - -#progressBar { - width: 100vw; - height: 2px; - z-index: 99999999; - margin-top: -2px; - position: absolute; - top: 0; - left: 0; -} - -#progressBarFill { - width: 0%; - height: 100%; - background-color: #0066ff; - opacity: 0%; - transition: width 0.5s ease-in-out, opacity 0.25s ease-in-out; - border-radius: 5px; -} - -.material-symbols-outlined { - font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48 -} - -.menuIcon { - height: 24px; - width: 24px; - margin-left: 20px; - margin-right: 18px; -} - -.menu-btn { - user-select: none !important; - padding: 10px; - position: absolute; - left: 12px; -} - -#profileAvatar { - position: absolute; - right: 24px; - width: 32px; - height: 32px; - border-radius: 300px; - object-fit: cover; -} - -.menu-btn:active { - opacity: 50%; -} - -.menu-btn-back { - display: none; -} - -#menuTabName { - font-weight: 700; - font-size: 15.3px; -} - -.aboutto { - animation: aboutto 0.2s forwards cubic-bezier(1, 0, 1, 1) !important; -} - -@keyframes aboutto { - from { - transform: translateY(0px); - opacity: 1; - } - to { - transform: translateY(-5px); - opacity: 0; - } -} - -@keyframes menuTabName { - from { - transform: translateY(5px); - opacity: 0; - } -} - -#menuData * { - margin: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - display: flex; - flex-direction: column; - align-items: center; - text-align: center; -} - -#menuData { - width: calc(100% - 175px); -} - -#menuTabContent { - opacity: 0.5; - font-weight: 400; - font-size: 15.3px; - animation: menuTabContent 0.2s forwards ease-out !important; -} - -@keyframes menuTabContent { - from { - margin-bottom: -18px; - opacity: 0; - } - to { - opacity: 0.5; - margin-bottom: 0px; - } -} - -#menu { - position: fixed; - display: flex; - top: 0; - left: 0; - width: 100vw; - height: calc(100vh - var(--safe-space)); - background-color: #00000000; - z-index: 9999; - display: flex; - flex-direction: column; - justify-content: flex-end; - align-items: center; - padding-bottom: var(--safe-space); - z-index: 9999999999999999999999; - display: none; - animation: menu 0.1s forwards cubic-bezier(0, 0, 0, 1); -} - -#menu.close { - animation: menuClose 0.05s forwards cubic-bezier(1, 0, 0, 1); -} - -#pronoteIdent { - width: 90vw; - position: absolute; - top: 0; - left: 0; - background-color: #fff; - height: 52px; - display: flex; - align-items: center; - box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.04); -} - -#pronoteIdent img { - height: 22px; - margin-left: 24px; -} - -#menuTabs { - width: 90vw; - position: absolute; - top: 0; - left: 0; - height: 100%; - background: #F1F1F3; - animation: menuTabs 0.3s forwards cubic-bezier(0, 0, 0, 1); - pointer-events: all; -} - -#menuTabs * { - animation: none; - border-radius: 0; -} - -@keyframes menu { - 0% { - background-color: #00000000; - } - 100% { - background-color: #00000052; - } -} - -#menu.close #menuTabs { - animation: menuTabsClose 0.2s forwards; -} - -@keyframes menuTabs { - 0% { - left: -90vw; - } - 100% { - left: 0vw; - } -} - -@keyframes menuTabsClose { - 0% { - left: 0vw; - } - 100% { - left: -90vw; - } -} - -@keyframes menuClose { - 0% { - background-color: #00000052; - } - 100% { - background-color: #00000000; - } -} - -.modal { - background: #F1F1F3; - border-radius: 15px; - width: 90vw; - animation: modal 0.3s forwards cubic-bezier(0, 0, 0, 1); -} - -@keyframes modal { - 0% { - transform: translateY(50px); - } - 100% { - transform: translateY(0px); - } -} - -.linkList { - display: block; - margin-top: 52px; - - height: calc(100% - 232px); - overflow: scroll; - padding-bottom: 10px; -} - -.tabLink { - display: flex; - align-items: center; - /* border-bottom: 1px solid #00000020; */ - border-radius: 0px; - padding: 13px 0px; - margin: 0px 0px; - margin-bottom: 0px; - border-left: 2px solid #00000000; -} - -.tabLink.active { - background-color: #0066ff20; - color: #0066ff !important; - border-left: 2px solid #0066ff !important; -} - -.tabLink:active { - background-color: #0066ff10 !important; -} - -.tabLink.active .material-symbols-outlined { - font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48 -} - -.tabLink span { - margin-left: 24px; - margin-right: 24px; -} - -.tabLink p { - font-weight: 500; - font-size: 16px; - margin: 0; -} - -.time { - width: calc(90vw - (25px * 2) - 10px); - margin-left: 10px; - padding: 10px 20px; - border-radius: 10px !important; - display: flex; - align-items: center; - background-color: #0066ff22; - position: absolute; - bottom: calc(env(safe-area-inset-bottom) + 30px); -} - -.time .change .btn span { - font-size: 24px; -} - -#dateString { - font-size: 14px; - font-weight: 500; - opacity: 50%; - width: 42vw !important; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; -} - -.change { - display: flex; - align-items: center; - position: absolute; - right: 20px; -} - -.change .btn { - display: flex; - align-items: center; - justify-content: center; - border-radius: 300px; - margin-left: 15px; - width: 32px; - height: 32px; -} - -.change .btn span { - font-size: 28px; - width: 14px; -} - -#currentDate { - font-weight: 500; -} - -.user { - margin-bottom: 14px; - width: 90vw; - background-position: top !important; - background-size: cover !important; - background-repeat: no-repeat !important; -} - -#userModalOver { - display: flex; - flex-direction: column; - padding-top: var(--safe-space-top); - padding-bottom: 18px; - padding-right: 10px; - align-items: flex-start; - background-color: #00000077; - border-radius: 0px; - backdrop-filter: blur(24px); - -webkit-backdrop-filter: blur(24px); - width: calc(90vw - 35px); - overflow: hidden; - padding-left: 25px; -} - -#userAvatar { - background-color: #555; - margin-top: 18px; - width: 48px; - min-width: 48px !important; - height: 48px; - border-radius: 100px; - object-fit: cover; - margin-bottom: 10px; -} - -.user * { - margin: 0; - color: #fff; -} - -.userInfo { - /* margin-left: 15px; */ - width: calc(90vw - 30px - 60px); -} - -#userName { - font-size: 20px; - font-weight: 500; -} - -#userClass { - opacity: 50%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - width: 100%; -} - -#closePan { - height: 100%; - width: 100%; -} - -.liste { - padding: 0px 15px; - padding-top: 5px; -} - -@keyframes show { - from { - opacity: 0; - transform: translateY(-10px); - } - to { - opacity: 1; - transform: translateY(0px); - } -} - -.cours { - background: #fff !important; - box-shadow: 0px 1px 2px #00000010; - width: 100%; - border-radius: 10px; - display: flex; - margin: 10px 0px; - position: relative; - overflow: hidden !important; - opacity: 0; - animation: show 0.3s var(--off) forwards cubic-bezier(0, 0, 0, 1); -} - -.cours.colored { - background: linear-gradient(180deg, #ffffffcc 0%, #FFFFFFcc 100%), var(--bg); -} - -.courseEmoji { - position: absolute; - right: -15px; - top: -70px; - font-size: 72px; - line-height: 10px; - text-align: right; - opacity: 20%; - filter: blur(1px); -} - -.cours.done { - background-color: #0066ff20; - color: #0066ff !important; -} - -.coursleftBar { - background: var(--bg); - width: 5px; - height: 100%; - position: absolute; - top: 0; - bottom: 0; - left: 0; - border-top-left-radius: 8px; - border-bottom-left-radius: 8px; -} - -@keyframes coursLeftBar { - from { - height: 0%; - } - to { - height: 100%; - } -} - -.cours_data { - margin-left: 12px; - padding: 10px; - width: 100%; -} - -.cours_data *, -.courd * { - margin: 0; -} - -.courd h3 { - font-size: 18px; - font-weight: 700; -} - -.cours .teacher { - font-size: 15px; - font-weight: 500; -} - -.cours_btmData { - margin-top: 15px; - display: flex !important; - width: calc(100% - 0px); - justify-content: space-between; - flex-shrink: shrink; -} - -.cours_topData p { - font-size: 16px; - opacity: 50%; -} - -.cours_topData .hwContent { - width: 90%; - overflow: hidden; - overflow-wrap: break-word; - margin-top: 5px; -} - -.teacher { - opacity: 40% !important; -} - -.status { - font-size: 14px; - font-weight: 500; - background: #0066ff20; - color: #0066ff !important; - padding: 2px 10px; - border-radius: 300px; - margin-left: 5px; - width: fit-content; - opacity: 100% !important; -} - -@media screen and (prefers-color-scheme: dark) { - .status { - background: #0066ff20; - color: #fff; - } -} - -.cours_btmData p { - font-size: 14px; - font-weight: 500; - margin-right: 10px; - text-overflow: ellipsis; - white-space: nowrap; - min-width: 0; -} - -.realCours .cours_btmData p:not(.when) { - max-width: 30vw; - overflow: hidden; -} - -.when { - /* position: absolute; */ - right: 20px; - font-weight: 400; - min-width: fit-content !important; -} - -.when * { - opacity: 50%; -} - -.hrdeb { - opacity: 100%; - background-color: #00000015; - color: #000; - padding: 1px 8px; - border-radius: 300px; -} - -.subject { - background-color: #fff; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.20); - width: 100%; - border-radius: 8px; - margin: px 0px; - position: relative; - overflow: hidden; - padding-bottom: 5px; - opacity: 0; - animation: show 0.3s var(--off) forwards cubic-bezier(0, 0, 0, 1); -} - -.subject * { - margin: 0; -} - -.subjectName { - background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%), var(--bg); - width: 100%; - padding: 12.5px 20px; - display: flex; - margin-bottom: 5px; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.20); -} - -.subjectName p { - font-weight: 600; - font-size: 16px; - color: #fff; - opacity: 100%; - letter-spacing: 0.2px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - width: 65% !important; -} - -.subjectName p2 { - color: #fff; - position: absolute; - right: 20px; -} - -.subjectName p2:not(small) { - font-weight: 600; -} - -.markName { - width: 70% !important; -} - -.mark { - display: flex; - padding: 10px 20px; - background: #f9f9f9; - /* border-bottom: 1px solid #00000011; */ -} - -.mark.even { - background: transparent; -} - -.markName p { - font-weight: 600; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.markName .p2 { - font-weight: 400; - opacity: 50%; - white-space: nowrap; - overflow: hidden !important; - text-overflow: ellipsis; - max-width: 100%; -} - -.markValue { - position: absolute; - right: 20px; -} - -.markValue:not(small) { - font-weight: 500; -} - -.markValue small { - font-weight: 400; -} - -.file * { - margin: 0; -} - -.file { - padding: 10px 15px; - width: calc(100% - 30px); -} - -.file span { - margin-right: 10px; -} - -.file p { - width: 75vw; - white-space: nowrap; - overflow: hidden !important; - text-overflow: ellipsis; -} - -.file small { - font-weight: 500; - opacity: 50%; -} - -a { - color: inherit; - text-decoration: inherit; -} - -#infoText { - display: block; - padding: 10px; - width: calc(90vw - 20px); -} - -#infoText * { - font-family: sans-serif; -} - -a:focus { - -webkit-tap-highlight-color: transparent; -} - -a:active { - opacity: 50%; -} - - -/* dark mode */ - -@media screen and (prefers-color-scheme: dark) { - body { - background: #000; - } - #loading { - border: 3px solid #6da7ff10; - border-top-color: #6da7ff; - } - #iOS-cover { - background: #15192055; - } - #navContent { - background: #19191A; - color: #fff; - } - #pronoteIdent { - background-color: #19191A; - } - #menuContent { - background: #19191A; - color: #fff; - } - #menuTabs { - background: #19191A; - } - .time { - background-color: #6da7ff15 !important; - } - .changeInMenu { - border-color: #ffffff22 !important; - } - .changeInMenu a { - color: #fff !important; - } - .hrdeb { - background-color: #ffffff15; - color: #fff; - } - .time span, - .time input { - color: #6da7ff !important; - } - :root { - --theme-color: #19191A; - --bg: #ffffff99; - } - .profileOver { - background: linear-gradient(180deg, #00000090, #000000) !important; - color: #fff; - } - .cours { - background: #19191A !important; - box-shadow: 0px 1px 3px #00000050; - color: #fff; - } - .cours.colored { - background: linear-gradient(180deg, #111111da 0%, #111111da 100%), var(--bg); - } - .naviBtn { - box-shadow: none !important; - } - .cours.done { - background-color: #6da7ff10; - color: #6da7ff !important; - } - .subject { - background-color: #1C212B; - color: #fff; - } - .modal { - background: #151515; - color: #fff; - } - .tabLink { - /* border-bottom: 1px solid #ffffff10; */ - } - .tabLink.active { - background: #6da7ff10 !important; - color: #6da7ff !important; - border-color: #6da7ff !important; - } - .part { - color: #ffffff55 !important; - } - .mark { - background: #181d25; - color: #fff; - } -} - -.last { - border-bottom: none; -} - -.compValue { - overflow: hidden; - width: 30%; - display: flex; - justify-content: flex-end; - flex-wrap: nowrap; -} - -.compValue img { - height: 24px; -} - -.part { - color: #00000055; - margin-top: 30px; - padding-left: 50px; - font-weight: 500; - font-size: 14px; - letter-spacing: 1px; - animation: show 0.3s forwards cubic-bezier(0, 0, 0, 1); -} - -.frprt { - margin-top: 10px; -} - -.pad { - padding: 15px 20px !important; -} - -.updateHeader { - flex-direction: column; - align-items: center; - justify-content: center; - text-align: center; -} - -.updateHeader img { - width: 100%; - height: 200px; - object-fit: contain; -} - -.updateHeader h1 { - margin-top: -14px; - font-size: 32px; - line-height: 30px; - color: #0066ff; -} - -.feature p { - text-overflow: unset; - white-space: unset; - line-height: 18px; -} - -.settings { - position: absolute; - right: 25px; - top: calc(20px + var(--safe-space-top)); - opacity: 0.5; -} - -.settings:active { - opacity: 0.2; -} - -.welcome { - text-align: center; - flex-direction: column; - align-items: center; - justify-content: center; - width: calc(100% - 20px); - padding: 15px 10px; -} - -.welcome * { - margin: 0; - padding: 0; -} - -.welcome #pfp { - width: 62px; - height: 62px; - border-radius: 50%; - object-fit: cover; -} - -.welcome h2 { - margin-top: 10px; -} - -.welcome p { - opacity: 50%; -} - - -/* loading */ - -#loadingContainer { - width: 100vw; - height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; -} - -#loading { - display: inline-block; - width: 32px; - height: 32px; - margin-top: -10vh; - border: 3px solid #0066ff22; - border-radius: 50%; - border-top-color: #0066ff; - animation: spin 1s ease-in-out infinite; - -webkit-animation: spin 1s ease-in-out infinite; -} - -@keyframes spin { - to { - -webkit-transform: rotate(360deg); - } -} - -@-webkit-keyframes spin { - to { - -webkit-transform: rotate(360deg); - } -} - -#average { - position: fixed; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - background-color: #000; - display: flex; - align-items: center; - justify-content: center; - color: #fff; - z-index: 99999999999999999999999999999999999999999999999999999; - display: none; -} - -#average * { - margin: 0; - padding: 0; - text-align: center; -} - -#averageCanvas { - width: 100vw; - height: 100vh; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#average .close { - position: absolute; - top: 20px; - right: 20px; - padding: 7px; - background-color: #ffffff11; - border-radius: 300px; -} - -#average .close span { - color: #fff; -} - -#average .text { - margin-top: -200px; - width: 80vw; -} - -#average .mainMoyenne p { - font-size: 16px; - letter-spacing: 3px; - font-weight: 200; - text-transform: uppercase; - background: linear-gradient(0deg, rgba(255, 255, 255, 0.29735644257703087) 0%, rgba(212, 229, 255, 1) 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; -} - -#average .mainMoyenne h3 { - font-size: 72px; - letter-spacing: -0.5px; - background: linear-gradient(0deg, rgba(255, 255, 255, 0.29735644257703087) 0%, rgba(212, 229, 255, 1) 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - text-shadow: 0px 0px 10px rgba(212, 229, 255, 0.8), 0px 0px 60px rgba(212, 229, 255, 1); - margin-top: 0px; -} - -#average .mainMoyenne h3 sm { - font-size: 30px; - font-weight: 400; -} - -#average .text hr { - border-color: rgba(212, 229, 255); - box-shadow: 0px 0px 10px rgba(212, 229, 255, 0.8); - margin-top: 0px; - width: 0; - opacity: 0; - animation: averageHR 1s 3s ease-in-out forwards; -} - -@keyframes averageHR { - 0% { - opacity: 1; - width: 0px; - margin-left: 40vw; - margin-top: 0px; - } - 100% { - opacity: 1; - width: 80vw; - margin-left: 0px; - margin-top: 20px; - } -} - -#average .other { - margin-top: 0px; - opacity: 0%; - display: flex; - justify-content: center; - width: 90%; - margin-left: 5%; - animation: averageOther 1s 4s forwards ease-out; -} - -@keyframes averageOther { - 0% { - margin-top: 0px; - opacity: 0%; - } - 100% { - margin-top: 20px; - opacity: 100%; - } -} - -#average .otherInner { - margin: 0 15px; -} - -#average .otherInner p { - font-size: 14px; - letter-spacing: 2px; - font-weight: 300; - text-transform: uppercase; - background: linear-gradient(0deg, rgba(255, 255, 255, 0.29735644257703087) 0%, rgba(212, 229, 255, 1) 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; -} - -#average .otherInner h4 { - font-size: 24px; - letter-spacing: -0.5px; - font-weight: 300; - text-transform: uppercase; - margin-top: 0px; - background: linear-gradient(0deg, rgba(255, 255, 255, 0.29735644257703087) 0%, rgba(212, 229, 255, 1) 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; -} - -#average .otherInner h4 sm { - font-size: 18px; -} - -#average .text { - animation: averageText 3s ease-out forwards; -} - -@keyframes averageText { - 0% { - opacity: 0; - transform: scale(0.2) rotate(20deg); - } - 100% { - opacity: 1; - transform: scale(1); - } -} - -.statusCancelled { - background-color: #ff505022; - color: #ff5050 !important; -} - -.ptr--ptr { - box-shadow: none !important; - transform: translateY(60px) !important; -} - -@media screen and (prefers-color-scheme: dark) { - .ptr--ptr * { - color: #ffffff55 !important; - } -} - - -/* .toasty { - box-shadow: 0px 1px 2px #00000022 !important; - border-radius: 7px !important; - width: calc(90vw - 36px) !important; - min-width: calc(90vw - 36px) !important; - max-width: calc(90vw - 36px) !important; - padding: 10px 18px !important; -} */ - -.toasty { - box-shadow: 0px 1px 2px #00000022 !important; - border-radius: 18px !important; - padding: 8px 18px !important; - width: fit-content !important; - max-width: calc(90vw - 36px) !important; -} - -.length { - font-weight: 400; - margin-left: 15px; - opacity: 25%; -} - -.coursLong .courd { - margin-bottom: 50px; -} - -.coursEcart { - margin-top: 30px; -} - -.changeInMenu { - margin-top: 8px; - height: 40px; - right: 3vw; - position: absolute; - display: flex; - align-items: center; - top: 0; - border-radius: 300px; - border: 1px solid #00000022; -} - -.changeInMenu a { - margin: 10px; - color: #000000; -} - -/* desktop */ - -@media only screen and (min-width: 800px) { - #menu, #menu * { - animation: none !important; - } - - #menu { - display: block !important; - width: 400px !important; - box-shadow: 1px 0px 2px #00000032; - } - - #menuTabs { - width: 400px !important; - } - - .modal { - width: 400px !important; - } - - #userModalOver { - width: calc(400px - 35px) !important; - } - - #timeModal { - width: calc(400px - 65px) !important; - } - - #appContent, #menuContent { - width: calc(100% - 400px) !important; - margin-left: 400px !important; - } - - #menu-btn { - display: none !important; - } - - #menuData { - margin-left: 0 !important; - } - - .changeInMenu { - display: none !important; - } - - #menuContent { - top: 0; - bottom: auto; - border-top: none !important; - box-shadow: 0px 1px 2px #00000032; - } - - #appContent { - margin-top: 60px; - } - - .cours:hover { - opacity: 70% !important; - } - - .tabLink:hover { - background: #00000011; - cursor: pointer; - } - - @media screen and (prefers-color-scheme: dark) { - .tabLink:hover { - background: #ffffff11; - } - } -} - -.devoirDay { - margin-top: 40px; - margin-bottom: 15px; - font-size: 14px; - letter-spacing: 2px; - font-weight: 500; - opacity: 50%; - text-transform: uppercase; - background-color: #00000011; - width: fit-content; - padding: 5px 10px; - border-radius: 300px; -} - -.devoirDay.fst { - margin-top: 10px !important; -} - -@media screen and (prefers-color-scheme: dark) { - .devoirDay { - color: #fff !important; - background-color: #ffffff11 !important; - } -} - -.edtSkeleton { - height: 99px; - display: block; - opacity: 1 !important; - - background: linear-gradient(45deg, #00000010 35%, #00000005 50%, #00000010 65%); - background-size: 600% 600%; - - opacity: 0; - - animation: skeleton 1.5s var(--posDel) infinite; -} - -@media screen and (prefers-color-scheme: dark) { - .edtSkeleton { - background: linear-gradient(45deg, #ffffff15 35%, #ffffff25 50%, #ffffff15 65%); - background-size: 600% 600%; - } -} - -@keyframes skeleton { - 0% { - background-position:0% 0%; - } - 100% { - background-position:100% 100%; - } -} - -.profile { - width: 100vw; - background-size: 200%; - background-repeat: no-repeat; -} - -.profileOver { - background: linear-gradient(180deg, #F1F1F390, #F1F1F3); - backdrop-filter: blur(100px); - -webkit-backdrop-filter: blur(100px); - padding: 20px; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; -} - -.profileOver * { - margin: 0; -} - -#profileAvatarInner { - width: 72px; - height: 72px; - border-radius: 300px; - object-fit: cover; - margin-top: 5px; -} - -#profileUserName { - font-weight: 700; - font-size: 24px; - line-height: 29px; - text-align: center; - margin-top: 7px; - max-width: 90vw; -} - -#profileUserClass { - font-weight: 500; - font-size: 16px; - line-height: 19px; - text-align: center; - margin-top: 2px; - opacity: 50%; - max-width: 90vw; -} - -.loadingCours { - --bg: #0066ff; -} - -.loadingCoursBar { - width: 100%; - height: 4px; - border-radius: 0px; - background: #00000011; - margin-top: 10px; - overflow: hidden !important; -} - -.loadingCoursBarFill { - width: 10%; - height: 100%; - background-color: #0066ff; - border-radius: 0px; - - animation: loadingCoursBarFill 1s infinite; -} - -@keyframes loadingCoursBarFill { - 0% { - width: 10%; - transform: translateX(-90vw); - } - 50% { - width: 80%; - } - 100% { - width: 50%; - transform: translateX(90vw); - } -} - -@media screen and (prefers-color-scheme: dark) { - .loadingCours { - --bg: #6da7ff; - } - .loadingCoursBar { - background: #ffffff11; - } - .loadingCoursBarFill { - background-color: #6da7ff; - } +@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;1,700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=DynaPuff:wght@400;500;600;700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;400;500;600;700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&display=swap'); +body { + background: #F1F1F3; + margin: 0; + --font: system-ui; + overflow: visible; +} + +input[type="date"]::-webkit-inner-spin-button, +input[type="date"]::-webkit-calendar-picker-indicator { + display: none; + -webkit-appearance: none; +} + +body * { + font-family: var(--font); + -webkit-user-select: none; + user-select: none; + -webkit-touch-callout: none; +} + +:root { + --safe-space: env(safe-area-inset-bottom); + --safe-space-top: 10px; + --theme-color: #FFFFFF; + --bg: #00000010; +} + +@media only screen and (min-device-width: 414px) and (min-device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait), +only screen and (min-device-width: 375px) and (min-device-height: 812px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait), +only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3), +only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2), +only screen and (device-width: 390px) and (device-height: 844px), +only screen and (device-width: 390px) and (device-height: 844px), +only screen and (device-width: 428px) and (device-height: 926px) { + :root { + --safe-space-top: 0px; + } + .time { + margin-bottom: calc(env(safe-area-inset-bottom) + 8px) !important; + } + + #appContent { + height: calc(100vh - 61px - var(--safe-space) - 56px - 42px) !important; + } + + .useless #appContent { + height: calc(100vh - 61px - var(--safe-space) - 42px) !important; + } +} + +#navContent { + display: flex; + height: 52px !important; + background-color: #FFFFFF; + align-items: center; + justify-content: center; + box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.04); + position: fixed; + z-index: 99999999; + width: 100vw; + top: 0; + left: 0; + right: 0; + overflow: hidden; +} + +#appContent { + top: 56px; + height: calc(100vh - 56px - var(--safe-space) - 56px); + overflow-y: scroll; + z-index: 9; + margin-top: 52px; +} + +.useless #appContent { + height: calc(100vh - 56px - var(--safe-space)); +} + +#menuContent { + height: 56px; + display: flex; + align-items: center; + justify-content: center; + background: #FFFFFF; + box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.04); + padding-bottom: calc(var(--safe-space) + 4px); + padding-left: 20px; + position: fixed; + bottom: 0; + left: 0; + right: 0; + z-index: 999999999; + animation: not-useless 0.3s ease-out forwards; +} + +@keyframes not-useless { + 0% { + transform: translateY(100px); + } + 100% { + transform: translateY(0px); + } +} + +.useless #menuContent { + animation: useless 0.3s ease-out forwards; +} + +@keyframes useless { + 0% { + transform: translateY(0px); + } + 100% { + transform: translateY(100px); + } +} + +.daysRoll { + display: flex; + align-items: center; + justify-content: center; + margin-left: -24px; +} + +.daysRollTmrw { + animation: daysRollTmrwStart 0.3s cubic-bezier(1,0,1,0), daysRollTmrwEnd 0.3s 0.3s cubic-bezier(0,1,0,1); +} + +@keyframes daysRollTmrwStart { + 0% { + transform: translateX(0px); + opacity: 1; + } + 100% { + transform: translateX(-80px); + opacity: 0; + } +} + +@keyframes daysRollTmrwEnd { + 0% { + transform: translateX(80px); + opacity: 0; + } + 100% { + transform: translateX(-0px); + opacity: 1; + } +} + +.daysRollYstrdy { + animation: daysRollYstrdyStart 0.3s cubic-bezier(1,0,1,0), daysRollYstrdyEnd 0.3s 0.3s cubic-bezier(0,1,0,1); +} + +@keyframes daysRollYstrdyStart { + 0% { + transform: translateX(0px); + opacity: 1; + } + 100% { + transform: translateX(80px); + opacity: 0; + } +} + +@keyframes daysRollYstrdyEnd { + 0% { + transform: translateX(-80px); + opacity: 0; + } + 100% { + transform: translateX(-0px); + opacity: 1; + } +} + +.dayName:not(.today) { + width: 70px; + overflow: hidden; + display: flex; + text-overflow: clip; + white-space: nowrap; +} + +.tomorrow { + text-align: left; + align-items: flex-start; + justify-content: flex-start; + opacity: 0.2; + mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), transparent); +} + +.yesterday { + text-align: right; + align-items: flex-end; + justify-content: flex-end; + opacity: 0.2; + mask-image: linear-gradient(to left, rgba(0, 0, 0, 1), transparent); +} + +.today { + margin: 0px 20px; + font-weight: 600; +} + +#rn { + -webkit-appearance: none; + width: 0.001px; + font-size: 0.001px; + padding: 0.001px; + color: transparent; + background: transparent; + border: none; +} + +#rnPrev { + position: absolute; + left: 24px; + z-index: 9999; +} + +#rnNext { + position: absolute; + right: 24px; + z-index: 9999; +} + +.naviBtn { + box-shadow: 0px 0px 10px #fff; +} + +body.menuOpen #menuContent, +body.menuOpen #appContent { + margin-left: 90vw !important; +} + +#progressBar { + width: 100vw; + height: 2px; + z-index: 99999999; + margin-top: -2px; + position: absolute; + top: 0; + left: 0; +} + +#progressBarFill { + width: 0%; + height: 100%; + background-color: #0066ff; + opacity: 0%; + transition: width 0.5s ease-in-out, opacity 0.25s ease-in-out; + border-radius: 5px; +} + +.material-symbols-outlined { + font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48 +} + +.menuIcon { + height: 24px; + width: 24px; + margin-left: 20px; + margin-right: 18px; +} + +.menu-btn { + user-select: none !important; + padding: 10px; + position: absolute; + left: 12px; +} + +#profileAvatar { + position: absolute; + right: 24px; + width: 32px; + height: 32px; + border-radius: 300px; + object-fit: cover; +} + +.menu-btn:active { + opacity: 50%; +} + +.menu-btn-back { + display: none; +} + +#menuTabName { + font-weight: 700; + font-size: 15.3px; +} + +.aboutto { + animation: aboutto 0.2s forwards cubic-bezier(1, 0, 1, 1) !important; +} + +@keyframes aboutto { + from { + transform: translateY(0px); + opacity: 1; + } + to { + transform: translateY(-5px); + opacity: 0; + } +} + +@keyframes menuTabName { + from { + transform: translateY(5px); + opacity: 0; + } +} + +#menuData * { + margin: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; +} + +#menuData { + width: calc(100% - 175px); +} + +#menuTabContent { + opacity: 0.5; + font-weight: 400; + font-size: 15.3px; + animation: menuTabContent 0.2s forwards ease-out !important; +} + +@keyframes menuTabContent { + from { + margin-bottom: -18px; + opacity: 0; + } + to { + opacity: 0.5; + margin-bottom: 0px; + } +} + +#menu { + position: fixed; + display: flex; + top: 0; + left: 0; + width: 100vw; + height: calc(100vh - var(--safe-space)); + background-color: #00000000; + z-index: 9999; + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: center; + padding-bottom: var(--safe-space); + z-index: 9999999999999999999999; + display: none; + animation: menu 0.1s forwards cubic-bezier(0, 0, 0, 1); +} + +#menu.close { + animation: menuClose 0.05s forwards cubic-bezier(1, 0, 0, 1); +} + +#pronoteIdent { + width: 90vw; + position: absolute; + top: 0; + left: 0; + background-color: #fff; + height: 52px; + display: flex; + align-items: center; + box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.04); +} + +#pronoteIdent img { + height: 22px; + margin-left: 24px; +} + +#menuTabs { + width: 90vw; + position: absolute; + top: 0; + left: 0; + height: 100%; + background: #F1F1F3; + animation: menuTabs 0.3s forwards cubic-bezier(0, 0, 0, 1); + pointer-events: all; +} + +#menuTabs * { + animation: none; + border-radius: 0; +} + +@keyframes menu { + 0% { + background-color: #00000000; + } + 100% { + background-color: #00000052; + } +} + +#menu.close #menuTabs { + animation: menuTabsClose 0.2s forwards; +} + +@keyframes menuTabs { + 0% { + left: -90vw; + } + 100% { + left: 0vw; + } +} + +@keyframes menuTabsClose { + 0% { + left: 0vw; + } + 100% { + left: -90vw; + } +} + +@keyframes menuClose { + 0% { + background-color: #00000052; + } + 100% { + background-color: #00000000; + } +} + +.modal { + background: #F1F1F3; + border-radius: 15px; + width: 90vw; + animation: modal 0.3s forwards cubic-bezier(0, 0, 0, 1); +} + +@keyframes modal { + 0% { + transform: translateY(50px); + } + 100% { + transform: translateY(0px); + } +} + +.linkList { + display: block; + margin-top: 52px; + + height: calc(100% - 232px); + overflow: scroll; + padding-bottom: 10px; +} + +.tabLink { + display: flex; + align-items: center; + /* border-bottom: 1px solid #00000020; */ + border-radius: 0px; + padding: 13px 0px; + margin: 0px 0px; + margin-bottom: 0px; + border-left: 2px solid #00000000; +} + +.tabLink.active { + background-color: #0066ff20; + color: #0066ff !important; + border-left: 2px solid #0066ff !important; +} + +.tabLink:active { + background-color: #0066ff10 !important; +} + +.tabLink.active .material-symbols-outlined { + font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48 +} + +.tabLink span { + margin-left: 24px; + margin-right: 24px; +} + +.tabLink p { + font-weight: 500; + font-size: 16px; + margin: 0; +} + +.time { + width: calc(90vw - (25px * 2) - 10px); + margin-left: 10px; + padding: 10px 20px; + border-radius: 10px !important; + display: flex; + align-items: center; + background-color: #0066ff22; + position: absolute; + bottom: calc(env(safe-area-inset-bottom) + 30px); +} + +.time .change .btn span { + font-size: 24px; +} + +#dateString { + font-size: 14px; + font-weight: 500; + opacity: 50%; + width: 42vw !important; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} + +.change { + display: flex; + align-items: center; + position: absolute; + right: 20px; +} + +.change .btn { + display: flex; + align-items: center; + justify-content: center; + border-radius: 300px; + margin-left: 15px; + width: 32px; + height: 32px; +} + +.change .btn span { + font-size: 28px; + width: 14px; +} + +#currentDate { + font-weight: 500; +} + +.user { + margin-bottom: 14px; + width: 90vw; + background-position: top !important; + background-size: cover !important; + background-repeat: no-repeat !important; +} + +#userModalOver { + display: flex; + flex-direction: column; + padding-top: var(--safe-space-top); + padding-bottom: 18px; + padding-right: 10px; + align-items: flex-start; + background-color: #00000077; + border-radius: 0px; + backdrop-filter: blur(24px); + -webkit-backdrop-filter: blur(24px); + width: calc(90vw - 35px); + overflow: hidden; + padding-left: 25px; +} + +#userAvatar { + background-color: #555; + margin-top: 18px; + width: 48px; + min-width: 48px !important; + height: 48px; + border-radius: 100px; + object-fit: cover; + margin-bottom: 10px; +} + +.user * { + margin: 0; + color: #fff; +} + +.userInfo { + /* margin-left: 15px; */ + width: calc(90vw - 30px - 60px); +} + +#userName { + font-size: 20px; + font-weight: 500; +} + +#userClass { + opacity: 50%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: 100%; +} + +#closePan { + height: 100%; + width: 100%; +} + +.liste { + padding: 0px 15px; + padding-top: 5px; +} + +@keyframes show { + from { + opacity: 0; + transform: translateY(-10px); + } + to { + opacity: 1; + transform: translateY(0px); + } +} + +.cours { + background: #fff !important; + box-shadow: 0px 1px 2px #00000010; + width: 100%; + border-radius: 10px; + display: flex; + margin: 10px 0px; + position: relative; + overflow: hidden !important; + opacity: 0; + animation: show 0.3s var(--off) forwards cubic-bezier(0, 0, 0, 1); +} + +.cours.colored { + background: linear-gradient(180deg, #ffffffcc 0%, #FFFFFFcc 100%), var(--bg); +} + +.courseEmoji { + position: absolute; + right: -15px; + top: -70px; + font-size: 72px; + line-height: 10px; + text-align: right; + opacity: 20%; + filter: blur(1px); +} + +.cours.done { + background-color: #0066ff20; + color: #0066ff !important; +} + +.coursleftBar { + background: var(--bg); + width: 5px; + height: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + border-top-left-radius: 8px; + border-bottom-left-radius: 8px; +} + +@keyframes coursLeftBar { + from { + height: 0%; + } + to { + height: 100%; + } +} + +.cours_data { + margin-left: 12px; + padding: 10px; + width: 100%; +} + +.cours_data *, +.courd * { + margin: 0; +} + +.courd h3 { + font-size: 18px; + font-weight: 700; +} + +.cours .teacher { + font-size: 15px; + font-weight: 500; +} + +.cours_btmData { + margin-top: 15px; + display: flex !important; + width: calc(100% - 0px); + justify-content: space-between; + flex-shrink: shrink; +} + +.cours_topData p { + font-size: 16px; + opacity: 50%; +} + +.cours_topData .hwContent { + width: 90%; + overflow: hidden; + overflow-wrap: break-word; + margin-top: 5px; +} + +.teacher { + opacity: 40% !important; +} + +.status { + font-size: 14px; + font-weight: 500; + background: #0066ff20; + color: #0066ff !important; + padding: 2px 10px; + border-radius: 300px; + margin-left: 5px; + width: fit-content; + opacity: 100% !important; +} + +@media screen and (prefers-color-scheme: dark) { + .status { + background: #0066ff20; + color: #fff; + } +} + +.cours_btmData p { + font-size: 14px; + font-weight: 500; + margin-right: 10px; + text-overflow: ellipsis; + white-space: nowrap; + min-width: 0; +} + +.realCours .cours_btmData p:not(.when) { + max-width: 30vw; + overflow: hidden; +} + +.when { + /* position: absolute; */ + right: 20px; + font-weight: 400; + min-width: fit-content !important; +} + +.when * { + opacity: 50%; +} + +.hrdeb { + opacity: 100%; + background-color: #00000015; + color: #000; + padding: 1px 8px; + border-radius: 300px; +} + +.subject { + background-color: #fff; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.20); + width: 100%; + border-radius: 8px; + margin: px 0px; + position: relative; + overflow: hidden; + padding-bottom: 5px; + opacity: 0; + animation: show 0.3s var(--off) forwards cubic-bezier(0, 0, 0, 1); +} + +.subject * { + margin: 0; +} + +.subjectName { + background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%), var(--bg); + width: 100%; + padding: 12.5px 20px; + display: flex; + margin-bottom: 5px; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.20); +} + +.subjectName p { + font-weight: 600; + font-size: 16px; + color: #fff; + opacity: 100%; + letter-spacing: 0.2px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: 65% !important; +} + +.subjectName p2 { + color: #fff; + position: absolute; + right: 20px; +} + +.subjectName p2:not(small) { + font-weight: 600; +} + +.markName { + width: 70% !important; +} + +.mark { + display: flex; + padding: 10px 20px; + background: #f9f9f9; + /* border-bottom: 1px solid #00000011; */ +} + +.mark.even { + background: transparent; +} + +.markName p { + font-weight: 600; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.markName .p2 { + font-weight: 400; + opacity: 50%; + white-space: nowrap; + overflow: hidden !important; + text-overflow: ellipsis; + max-width: 100%; +} + +.markValue { + position: absolute; + right: 20px; +} + +.markValue:not(small) { + font-weight: 500; +} + +.markValue small { + font-weight: 400; +} + +.file * { + margin: 0; +} + +.file { + padding: 10px 15px; + width: calc(100% - 30px); +} + +.file span { + margin-right: 10px; +} + +.file p { + width: 75vw; + white-space: nowrap; + overflow: hidden !important; + text-overflow: ellipsis; +} + +.file small { + font-weight: 500; + opacity: 50%; +} + +a { + color: inherit; + text-decoration: inherit; +} + +#infoText { + display: block; + padding: 10px; + width: calc(90vw - 20px); +} + +#infoText * { + font-family: sans-serif; +} + +a:focus { + -webkit-tap-highlight-color: transparent; +} + +a:active { + opacity: 50%; +} + + +/* dark mode */ + +@media screen and (prefers-color-scheme: dark) { + body { + background: #000; + } + #loading { + border: 3px solid #6da7ff10; + border-top-color: #6da7ff; + } + #iOS-cover { + background: #15192055; + } + #navContent { + background: #19191A; + color: #fff; + } + #pronoteIdent { + background-color: #19191A; + } + #menuContent { + background: #19191A; + color: #fff; + } + #menuTabs { + background: #19191A; + } + .time { + background-color: #6da7ff15 !important; + } + .changeInMenu { + border-color: #ffffff22 !important; + } + .changeInMenu a { + color: #fff !important; + } + .hrdeb { + background-color: #ffffff15; + color: #fff; + } + .time span, + .time input { + color: #6da7ff !important; + } + :root { + --theme-color: #19191A; + --bg: #ffffff99; + } + .profileOver { + background: linear-gradient(180deg, #00000090, #000000) !important; + color: #fff; + } + .cours { + background: #19191A !important; + box-shadow: 0px 1px 3px #00000050; + color: #fff; + } + .cours.colored { + background: linear-gradient(180deg, #111111da 0%, #111111da 100%), var(--bg); + } + .naviBtn { + box-shadow: none !important; + } + .cours.done { + background-color: #6da7ff10; + color: #6da7ff !important; + } + .subject { + background-color: #1C212B; + color: #fff; + } + .modal { + background: #151515; + color: #fff; + } + .tabLink { + /* border-bottom: 1px solid #ffffff10; */ + } + .tabLink.active { + background: #6da7ff10 !important; + color: #6da7ff !important; + border-color: #6da7ff !important; + } + .part { + color: #ffffff55 !important; + } + .mark { + background: #181d25; + color: #fff; + } +} + +.last { + border-bottom: none; +} + +.compValue { + overflow: hidden; + width: 30%; + display: flex; + justify-content: flex-end; + flex-wrap: nowrap; +} + +.compValue img { + height: 24px; +} + +.part { + color: #00000055; + margin-top: 30px; + padding-left: 50px; + font-weight: 500; + font-size: 14px; + letter-spacing: 1px; + animation: show 0.3s forwards cubic-bezier(0, 0, 0, 1); +} + +.frprt { + margin-top: 10px; +} + +.pad { + padding: 15px 20px !important; +} + +.updateHeader { + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; +} + +.updateHeader img { + width: 100%; + height: 200px; + object-fit: contain; +} + +.updateHeader h1 { + margin-top: -14px; + font-size: 32px; + line-height: 30px; + color: #0066ff; +} + +.feature p { + text-overflow: unset; + white-space: unset; + line-height: 18px; +} + +.settings { + position: absolute; + right: 25px; + top: calc(20px + var(--safe-space-top)); + opacity: 0.5; +} + +.settings:active { + opacity: 0.2; +} + +.welcome { + text-align: center; + flex-direction: column; + align-items: center; + justify-content: center; + width: calc(100% - 20px); + padding: 15px 10px; +} + +.welcome * { + margin: 0; + padding: 0; +} + +.welcome #pfp { + width: 62px; + height: 62px; + border-radius: 50%; + object-fit: cover; +} + +.welcome h2 { + margin-top: 10px; +} + +.welcome p { + opacity: 50%; +} + + +/* loading */ + +#loadingContainer { + width: 100vw; + height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +#loading { + display: inline-block; + width: 32px; + height: 32px; + margin-top: -10vh; + border: 3px solid #0066ff22; + border-radius: 50%; + border-top-color: #0066ff; + animation: spin 1s ease-in-out infinite; + -webkit-animation: spin 1s ease-in-out infinite; +} + +@keyframes spin { + to { + -webkit-transform: rotate(360deg); + } +} + +@-webkit-keyframes spin { + to { + -webkit-transform: rotate(360deg); + } +} + +#average { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: #000; + display: flex; + align-items: center; + justify-content: center; + color: #fff; + z-index: 99999999999999999999999999999999999999999999999999999; + display: none; +} + +#average * { + margin: 0; + padding: 0; + text-align: center; +} + +#averageCanvas { + width: 100vw; + height: 100vh; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#average .close { + position: absolute; + top: 20px; + right: 20px; + padding: 7px; + background-color: #ffffff11; + border-radius: 300px; +} + +#average .close span { + color: #fff; +} + +#average .text { + margin-top: -200px; + width: 80vw; +} + +#average .mainMoyenne p { + font-size: 16px; + letter-spacing: 3px; + font-weight: 200; + text-transform: uppercase; + background: linear-gradient(0deg, rgba(255, 255, 255, 0.29735644257703087) 0%, rgba(212, 229, 255, 1) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +#average .mainMoyenne h3 { + font-size: 72px; + letter-spacing: -0.5px; + background: linear-gradient(0deg, rgba(255, 255, 255, 0.29735644257703087) 0%, rgba(212, 229, 255, 1) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + text-shadow: 0px 0px 10px rgba(212, 229, 255, 0.8), 0px 0px 60px rgba(212, 229, 255, 1); + margin-top: 0px; +} + +#average .mainMoyenne h3 sm { + font-size: 30px; + font-weight: 400; +} + +#average .text hr { + border-color: rgba(212, 229, 255); + box-shadow: 0px 0px 10px rgba(212, 229, 255, 0.8); + margin-top: 0px; + width: 0; + opacity: 0; + animation: averageHR 1s 3s ease-in-out forwards; +} + +@keyframes averageHR { + 0% { + opacity: 1; + width: 0px; + margin-left: 40vw; + margin-top: 0px; + } + 100% { + opacity: 1; + width: 80vw; + margin-left: 0px; + margin-top: 20px; + } +} + +#average .other { + margin-top: 0px; + opacity: 0%; + display: flex; + justify-content: center; + width: 90%; + margin-left: 5%; + animation: averageOther 1s 4s forwards ease-out; +} + +@keyframes averageOther { + 0% { + margin-top: 0px; + opacity: 0%; + } + 100% { + margin-top: 20px; + opacity: 100%; + } +} + +#average .otherInner { + margin: 0 15px; +} + +#average .otherInner p { + font-size: 14px; + letter-spacing: 2px; + font-weight: 300; + text-transform: uppercase; + background: linear-gradient(0deg, rgba(255, 255, 255, 0.29735644257703087) 0%, rgba(212, 229, 255, 1) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +#average .otherInner h4 { + font-size: 24px; + letter-spacing: -0.5px; + font-weight: 300; + text-transform: uppercase; + margin-top: 0px; + background: linear-gradient(0deg, rgba(255, 255, 255, 0.29735644257703087) 0%, rgba(212, 229, 255, 1) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +#average .otherInner h4 sm { + font-size: 18px; +} + +#average .text { + animation: averageText 3s ease-out forwards; +} + +@keyframes averageText { + 0% { + opacity: 0; + transform: scale(0.2) rotate(20deg); + } + 100% { + opacity: 1; + transform: scale(1); + } +} + +.statusCancelled { + background-color: #ff505022; + color: #ff5050 !important; +} + +.ptr--ptr { + box-shadow: none !important; + transform: translateY(60px) !important; +} + +@media screen and (prefers-color-scheme: dark) { + .ptr--ptr * { + color: #ffffff55 !important; + } +} + + +/* .toasty { + box-shadow: 0px 1px 2px #00000022 !important; + border-radius: 7px !important; + width: calc(90vw - 36px) !important; + min-width: calc(90vw - 36px) !important; + max-width: calc(90vw - 36px) !important; + padding: 10px 18px !important; +} */ + +.toasty { + box-shadow: 0px 1px 2px #00000022 !important; + border-radius: 18px !important; + padding: 8px 18px !important; + width: fit-content !important; + max-width: calc(90vw - 36px) !important; +} + +.length { + font-weight: 400; + margin-left: 15px; + opacity: 25%; +} + +.coursLong .courd { + margin-bottom: 50px; +} + +.coursEcart { + margin-top: 30px; +} + +.changeInMenu { + margin-top: 8px; + height: 40px; + right: 3vw; + position: absolute; + display: flex; + align-items: center; + top: 0; + border-radius: 300px; + border: 1px solid #00000022; +} + +.changeInMenu a { + margin: 10px; + color: #000000; +} + +/* desktop */ + +@media only screen and (min-width: 800px) { + #menu, #menu * { + animation: none !important; + } + + #menu { + display: block !important; + width: 400px !important; + box-shadow: 1px 0px 2px #00000032; + } + + #menuTabs { + width: 400px !important; + } + + .modal { + width: 400px !important; + } + + #userModalOver { + width: calc(400px - 35px) !important; + } + + #timeModal { + width: calc(400px - 65px) !important; + } + + #appContent, #menuContent { + width: calc(100% - 400px) !important; + margin-left: 400px !important; + } + + #menu-btn { + display: none !important; + } + + #menuData { + margin-left: 0 !important; + } + + .changeInMenu { + display: none !important; + } + + #menuContent { + top: 0; + bottom: auto; + border-top: none !important; + box-shadow: 0px 1px 2px #00000032; + } + + #appContent { + margin-top: 60px; + } + + .cours:hover { + opacity: 70% !important; + } + + .tabLink:hover { + background: #00000011; + cursor: pointer; + } + + @media screen and (prefers-color-scheme: dark) { + .tabLink:hover { + background: #ffffff11; + } + } +} + +.devoirDay { + margin-top: 40px; + margin-bottom: 15px; + font-size: 14px; + letter-spacing: 2px; + font-weight: 500; + opacity: 50%; + text-transform: uppercase; + background-color: #00000011; + width: fit-content; + padding: 5px 10px; + border-radius: 300px; +} + +.devoirDay.fst { + margin-top: 10px !important; +} + +@media screen and (prefers-color-scheme: dark) { + .devoirDay { + color: #fff !important; + background-color: #ffffff11 !important; + } +} + +.edtSkeleton { + height: 99px; + display: block; + opacity: 1 !important; + + background: linear-gradient(45deg, #00000010 35%, #00000005 50%, #00000010 65%); + background-size: 600% 600%; + + opacity: 0; + + animation: skeleton 1.5s var(--posDel) infinite; +} + +@media screen and (prefers-color-scheme: dark) { + .edtSkeleton { + background: linear-gradient(45deg, #ffffff15 35%, #ffffff25 50%, #ffffff15 65%); + background-size: 600% 600%; + } +} + +@keyframes skeleton { + 0% { + background-position:0% 0%; + } + 100% { + background-position:100% 100%; + } +} + +.profile { + width: 100vw; + background-size: 200%; + background-repeat: no-repeat; +} + +.profileOver { + background: linear-gradient(180deg, #F1F1F390, #F1F1F3); + backdrop-filter: blur(100px); + -webkit-backdrop-filter: blur(100px); + padding: 20px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +.profileOver * { + margin: 0; +} + +#profileAvatarInner { + width: 72px; + height: 72px; + border-radius: 300px; + object-fit: cover; + margin-top: 5px; +} + +#profileUserName { + font-weight: 700; + font-size: 24px; + line-height: 29px; + text-align: center; + margin-top: 7px; + max-width: 90vw; +} + +#profileUserClass { + font-weight: 500; + font-size: 16px; + line-height: 19px; + text-align: center; + margin-top: 2px; + opacity: 50%; + max-width: 90vw; +} + +.loadingCours { + --bg: #0066ff; +} + +.loadingCoursBar { + width: 100%; + height: 4px; + border-radius: 0px; + background: #00000011; + margin-top: 10px; + overflow: hidden !important; +} + +.loadingCoursBarFill { + width: 10%; + height: 100%; + background-color: #0066ff; + border-radius: 0px; + + animation: loadingCoursBarFill 1s infinite; +} + +@keyframes loadingCoursBarFill { + 0% { + width: 10%; + transform: translateX(-90vw); + } + 50% { + width: 80%; + } + 100% { + width: 50%; + transform: translateX(90vw); + } +} + +@media screen and (prefers-color-scheme: dark) { + .loadingCours { + --bg: #6da7ff; + } + .loadingCoursBar { + background: #ffffff11; + } + .loadingCoursBarFill { + background-color: #6da7ff; + } } \ No newline at end of file diff --git a/index.html b/index.html index a4c2070..9970f52 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - + diff --git a/papillonWorker.js b/papillonWorker.js index 83cf44c..8808420 100644 --- a/papillonWorker.js +++ b/papillonWorker.js @@ -21,7 +21,7 @@ const RUNTIME = 'runtime'; const PRECACHE_URLS = [ 'index.html', '/', - '/css/main.css', + '/css/style.css', '/js/app.js', 'papillonWorker.js', '/views/about.html', diff --git a/papillonWorkerDev.js b/papillonWorkerDev.js deleted file mode 100644 index e3e5b92..0000000 --- a/papillonWorkerDev.js +++ /dev/null @@ -1,71 +0,0 @@ -/* - Copyright 2016 Google Inc. All Rights Reserved. - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - http://www.apache.org/licenses/LICENSE-2.0 - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. - */ - -// Names of the two caches used in this version of the service worker. -// Change to v2, etc. when you update any of the local resources, which will -// in turn trigger the install event again. -const PRECACHE = 'precache-v1'; -const RUNTIME = 'runtime'; - -// A list of local resources we always want to be cached. -const PRECACHE_URLS = [ - -]; - -// The install handler takes care of precaching the resources we always need. -self.addEventListener('install', event => { - event.waitUntil( - caches.open(PRECACHE) - .then(cache => cache.addAll(PRECACHE_URLS)) - .then(self.skipWaiting()) - ); -}); - -// The activate handler takes care of cleaning up old caches. -self.addEventListener('activate', event => { - const currentCaches = [PRECACHE, RUNTIME]; - event.waitUntil( - caches.keys().then(cacheNames => { - return cacheNames.filter(cacheName => !currentCaches.includes(cacheName)); - }).then(cachesToDelete => { - return Promise.all(cachesToDelete.map(cacheToDelete => { - return caches.delete(cacheToDelete); - })); - }).then(() => self.clients.claim()) - ); -}); - -// The fetch handler serves responses for same-origin resources from a cache. -// If no response is found, it populates the runtime cache with the response -// from the network before returning it to the page. -self.addEventListener('fetch', event => { - // Skip cross-origin requests, like those for Google Analytics. - if (1 == 1) { - event.respondWith( - caches.match(event.request).then(cachedResponse => { - if (cachedResponse) { - return cachedResponse; - } - - return caches.open(RUNTIME).then(cache => { - return fetch(event.request).then(response => { - // Put a copy of the response in the runtime cache. - return cache.put(event.request, response.clone()).then(() => { - return response; - }); - }); - }); - }) - ); - } -}); \ No newline at end of file