.extension-gpa{font-size:1.8em;font-weight:700;padding-top:8px;border-style:none!important;} .extension-weight_select{display:inline-block;margin:0;} .hypodivcalc span {font-weight: bold} .hypodivcalc{display: flex;min-width:calc(33.33% - 50px);box-shadow: #9da5ab80 0px 2px 5px;align-items:center;background-color:#eee;border-radius:7px;margin:10px 5px 0;padding:20px;width:calc(33.33% - 50px);} #grade-summary-content ~ .extension-calcgpa{font-size:1.2em;font-weight:700;} .hypocalcform span{font-weight:700;min-width:50%;} .ic-DashboardCard__header_hero {border:0!important} .canvasrefined-completed{text-decoration:line-through;} .canvasrefined-completed a{text-decoration:line-through;} .extension-embed-hidden {display: none!important} .extension-linkpreview {background-color:#eee;border:none;border-radius:7px;padding:5px 15px;color:#6C757C;font-weight:bold;box-shadow: #9da5ab80 0px 2px 5px;margin: 5px 2px} .extension-linkpreview:hover {background-color:#e6e6e6;} .extension-linkpreview:focus {outline: none} .hypocalcform-collector {display: flex;flex-wrap:wrap;} .extension-aldue ~ .extension-al{font-size: 40px;background-color: red;} .gpachanger-percentage {margin: 0 8px 0 4px;font-size:1.2em;font-weight: bold} .extension-update {box-shadow: 0 2px 5px rgb(0 0 0 / 30%);opacity: .9;border-radius: 3px;color: #000;padding: 20px;z-index:100;position: absolute;width: 360px; height: 192px; background-color: #fff;top: 0; bottom: 0; left: 0; right: 0; margin: auto;} .extension-updateclose {position:absolute;top:5px;right:5px;border:none;background:none;color: #000!important;font-size: 32px;padding: 5px;} .extension-skeleton {height:36px;display:flex;align-items:center;margin-bottom:5px;} .extension-skeleton-text {margin-left: 18px;background: #ededed;width: 160px;height: 16px;animation: blink .5s infinite;} .extension-gpaOptions {display:flex;align-items:center;margin:21px 0;} .canvasrefined-export-output {position: fixed;height:100vh;width:100vw;top:0;left:0;z-index:10000;background:#000000c7;display:flex;align-items:center;justify-content:center} .canvasrefined-export-copy { font-size:12px;white-space: pre-wrap;max-height:80vh;overflow:auto;padding:8px} .canvasrefined-export-output-inner {width: 50%;background:#000;color:#fff;} .canvasrefined-dashboard-notes {width:100%;box-sizing:border-box;margin:18px 0 14px;border:1px solid var(--bcborders,#c7cdd1);border-radius:4px;overflow:hidden;background:var(--bcbackground-1,#fff);} .canvasrefined-card-container {padding-bottom: 4px;} .canvasrefined-assignment-container {margin: 0;padding:0;color: var(--ic-brand-font-color-dark-lightened-30);display: flex;justify-content:space-between;font-size:14px;align-items: center;transition:.2s all;} .canvasrefined-card-header-container {align-items: center;display: flex;justify-content: space-between;padding: 0 18px;color:var(--ic-brand-font-color-dark-lightened-30);font-size:16px;font-weight:700;margin: 0;} .canvasrefined-card-header-container h3, .canvasrefined-card-header-container a{font-size: 16px;font-weight: bold;} .canvasrefined-card-header {color: var(--ic-brand-font-color-dark-lightened-30);margin-block:0;} .canvasrefined-card-grade {position: absolute;top: 15px;left: 15px;background: #161616;padding: 2px 9px;border-radius: 200px;color: var(--ic-brand-font-color-dark-lightened-30);background: #fff;transition:.2s opacity;} .canvasrefined-card-grade.canvasrefined-hover-only {opacity: 0%;} .ic-DashboardCard:hover .canvasrefined-card-grade.canvasrefined-hover-only {opacity: 100%} .canvasrefined-assignment-container:hover {background: #eee;cursor: pointer;color: var(--ic-brand-font-color-dark-lightened-30);} .canvasrefined-assignment-link {flex: 1;text-decoration:none;margin: 0;padding:8px 18px;word-break: break-word;color:var(--ic-brand-font-color-dark-lightened-30)} .canvasrefined-assignment-dueat {padding: 4px 8px;margin-right: 10px;border-radius: 4px;} .canvasrefined-assignment-dueat:hover {box-shadow: 0 1px 4px #000!important} .canvasrefined-skeleton-text {background: #ededed;width: 160px;height: 16px;animation: blink .5s infinite;margin-left: 18px;margin-bottom: 12px;margin-top: 8px;} .canvasrefined-gpa { overflow: hidden; display: none; margin: 36px; box-sizing: border-box; border-radius: 4px; font-size: 13px; padding: 18px; box-shadow: 0 1px 5px #000!important; } .canvasrefined-add-assignment {max-height: 0; overflow:hidden;transition: .3s max-height;} .canvasrefined-custom-open {max-height: 250px} #better-todo-add-task-menu.canvasrefined-custom-open {max-height: 520px;} .canvasrefined-custom-input {box-sizing: border-box!important; width: 100%!important; height: 32px!important} #better-todo-new-task-date, #better-todo-new-task-time { flex: 1 1 0; min-width: 0; width: auto !important; font-size: 12px; padding-inline: 6px; } /* The native date/time picker icons are themed in dark mode only via color-scheme (see DARKMODE_CSS in css/darkmodecss.js); light mode keeps the default dark glyphs on the light surface. */ .canvasrefined-custom-btn {background: #f5f5f5; border: 1px solid #c7cdd1; border-radius:6px; padding: 2px 8px;} /* Better sidebar buttons sit on the --bcsidebar surface and use --bcsidebar-text for labels/icons, so drop the light button chrome and use a subtle hover tint. */ .better-sidebar-btn {background: transparent !important; border-color: transparent !important;} .better-sidebar-btn:hover {background: color-mix(in srgb, var(--bcsidebar-text) 14%, transparent) !important;} .canvasrefined-viewmore-btn {display: block;margin:0 auto;margin-top: 8px;} .canvasrefined-course-percent, .canvasrefined-course-credit {border: 1px solid #ccc; color: var(--ic-brand-font-color-dark)} .canvasrefined-course-percent, .canvasrefined-course-weight, .canvasrefined-course-credit { height: 22px; text-align: center;border-radius: 3px;width: 150px; font-size: 13px; padding: 0; } .canvasrefined-course-weight { width: 120px; } .canvasrefined-gpa-letter-grade { width: 24px; margin-left: 6px; font-weight: bold; font-size: 16px; } .canvasrefined-gpa-output { display: flex; gap: 12px; font-size: 16px; } .canvasrefined-course-weight {margin: 0; width: min-content} .canvasrefined-course-weights, .canvasrefined-gpa-percent-container {margin: 0; margin-right: 10px} .canvasrefined-course-percent-sign{margin-left: 4px;} .canvasrefined-gpa-name {margin: 0;width: 120px;} .canvasrefined-gpa-course, #canvasrefined-cumulative-gpa {padding:6px;display:flex; align-items: center;border-bottom:1px solid #c7cdd1;border-bottom:none!important;} #canvasrefined-cumulative-gpa { font-weight: 16px;} #canvasrefined-cumulative-gpa .canvasrefined-gpa-name {font-weight: bold;} .canvasrefined-gpa-open {text-align:center} .canvasrefined-gpa-open:hover {cursor: pointer} .canvasrefined-gpa-courses {min-width:600px;width:max-content;} .canvasrefined-gpa-course-top, .canvasrefined-gpa-course-bottom {display: flex;} .canvasrefined-gpa-header {font-weight:700;font-size:16px;margin-top:0;margin-bottom:6px;padding-bottom:6px;} .canvasrefined-notes-editor {box-sizing:border-box;width:100%;min-height:140px;border:none;background:transparent;resize:vertical;outline:none;font-family:inherit;font-size:14px;line-height:1.5;padding:12px 16px;color:var(--bctext-0,var(--ic-brand-font-color-dark-lightened-30,#2d3b45));} .canvasrefined-todosidebar, #canvasrefined-todo-list, #canvasrefined-announcement-list {margin: 0} .canvasrefined-todo-container {display: flex; margin-top: 14px;position: relative;transition: .2s all;} .canvasrefined-removing {max-height: 0;margin-top: 0} #canvasrefined-todo-list, #canvasrefined-announcement-list {font-size: 12px} .canvasrefined-todo-container, .canvasrefined-todo-container:hover {color:#777} .canvasrefined-todo-container p {margin: 0!important;} .canvasrefined-todo-icon svg {height: 18px; width: 18px;margin:0} .canvasrefined-todoitem-course {overflow: hidden; text-overflow: ellipsis;white-space: nowrap;} .canvasrefined-todoitem-title {font-size: 14px;font-weight:bold;display:inline;margin-top:2px;} .canvasrefined-todoitem-date {font-weight: bold} .canvasrefined-todo-item-completed {text-decoration: line-through;} .canvasrefined-todo-item {overflow: hidden;margin-left: 12px;} .canvasrefined-todo-item {width:100%;margin-left: 12px;color: #777} .canvasrefined-todo-item:hover {text-decoration: underline;cursor: pointer;color: #777;} .canvasrefined-customurl-setup {font-size: 18px;max-width: 400px;position: fixed; top: 40px; left: 40px; z-index: 10000; padding: 24px; background: #fff; border-radius: 6px; border: 1px solid #c7cdd1;box-shadow: 0 2px 5px rgb(0 0 0 / 30%)} .canvasrefined-customurl-setup p {margin: 0;} .canvasrefined-customurl-confirm {width: 100%; box-sizing: border-box;margin-top:20px;padding: 12px;border:none;background: #161616;border-radius:6px;color: #f5f5f5;font-size: 16px;} .canvasrefined-todo-complete-btn {padding: 0;height: 28px; width: 28px; border-radius: 3px; display: none; right: 0; top: 0; position:absolute;z-index: 100;background: #fff; border: none;} .canvasrefined-todo-complete-btn:hover {background:#eaebec} .canvasrefined-todo-container .canvasrefined-todo-complete-btn {display: none} .canvasrefined-todo-container:hover .canvasrefined-todo-complete-btn {display: block} #canvasrefined-announcement-list {margin-bottom:1.0625rem;} .canvasrefined-todo-item-loader {margin-top: 18px;} .canvasrefined-todo-item-loader .canvasrefined-skeleton-text {height:12px;margin-top: 8px;margin-bottom:0;margin-left:25px} .canvasrefined-hover-preview {position: absolute;top: -6px;left: -400px;display: none; background: var(--bcbackground-0, #fff); color: var(--bctext-0, #000); max-height: 300%; width: 350px; padding:12px;border-radius:5px; overflow: hidden;box-shadow: 0 2px 5px rgba(0,0,0,.3)} .canvasrefined-preview-text {text-overflow: ellipsis;color: var(--bctext-0, #000);} .canvasrefined-preview-title {font-weight:bold;font-size:14px;color: var(--bctext-0, #000);} .canvasrefined-hover-preview::after {content:'';position:absolute;width:100%;height: 18px;bottom:0;left:0;background:linear-gradient(0deg, var(--bcbackground-0, #fff) 50%, transparent)} .canvasrefined-link-image {height: 21px; width: 21px;padding: 0px} .canvasrefined-link-image:hover {filter: brightness(66%)} .canvasrefined-gpa-header {font-size:16px;font-weight: bold;padding: 0;margin: 0;} .canvasrefined-gpa-card {width: 262px; box-shadow: 0 2px 5px rgba(0,0,0,.3);border-radius:4px;margin: 36px 0 0 36px;display: inline-block;padding: 18px;box-sizing: border-box;vertical-align: top;} .canvasrefined-gpa-card p {margin: 0;} #cumulative-gpa .canvasrefined-gpa-name {font-weight:bold;} #canvasrefined-gpa-unweighted, #canvasrefined-gpa-weighted, #canvasrefined-gpa-cumulative {font-size: 24px; font-weight: bold;margin-top: 10px} .canvasrefined-gpa-edit-btn {background: #f5f5f5; border: 1px solid #c7cdd1; border-radius:6px; width: 100%; padding: 5px 0px; color: #000;margin-top: 10px} .canvasrefined-due-soon {background: #db3754; padding: 1px 4px; color: #fff; border-radius: 4px;display:inline-block} .canvasrefined-assignment-overdue { background: #db3754!important;color:#fff!important;} .canvasrefined-gpa-course-header {display: flex;} .canvasrefined-course-customgr {margin: 0 10px;} .canvasrefined-course-customgr-label {margin-left: 5px;} .canvasrefined-course-credits {margin-right: 20px;} .canvasrefined-todo-label-btn {display:inline-block;margin:0px 2px 2px 0;background: #f5f5f5;border:1px solid #c7cdd1;padding: 2px;border-radius:4px;} .canvasrefined-todo-label {background: var(--ic-link-color);color:#fff;padding:2px 4px;border-radius:3px;display:inline;height:100%;margin-right:5px;} .canvasrefined-todo-action {border-radius: 5px;} .canvasrefined-todo-actions {position: absolute; top: 0; right: 0; background: #fff;width:110px;font-weight:bold; color:#000;display:none;z-index:1000;border-radius:3px;border: 1px solid #c7cdd1;padding:10px} .canvasrefined-todo-actions-btn { border:1px solid transparent; height: 20px;width: 20px;background: none;padding: 0;margin: 0;border-radius:3px;} /*.canvasrefined-dots-icon {display: block!important;} .canvasrefined-todo-actions-btn:hover {background: #f5f5f5; border:1px solid #c7cdd1;}*/ .canvasrefined-todo-action, .canvasrefined-todo-action-tag { padding: 4px; margin: -2px 0;display:flex;justify-content: space-between;align-items:center;} .canvasrefined-todo-action:hover {background: #f5f5f5;cursor:pointer} .canvasrefined-todo-input {width: 100%!important;box-sizing: border-box!important;border-radius: 5px!important;height: 24px!important;padding:4px!important;margin:0!important;font-size:12px!important} .canvasrefined-todo-header:hover {cursor:pointer;text-decoration:underline} .canvasrefined-todo-actions svg {height: 18px; width:18px;} .canvasrefined-todo-item-header {max-height:80px;overflow:hidden;} .canvasrefined-todo-svg {fill:#2d3b45!important} #canvasrefined-update-msg {margin-top: 5px; display: flex; justify-content: space-between; font-size:15px;background: linear-gradient(115deg, rgb(255, 53, 88, .9), rgb(255, 131, 73, .9), rgb(255, 103, 187, .9)); color: #fff; border-radius:4px; padding: 20px;white-space: pre-line;} /* Detected-canvas prompt — centered modal with backdrop so it can't be missed */ #canvasrefined-domain-prompt-backdrop {position: fixed!important;inset: 0!important;width: 100%!important;height: 100%!important;background: rgb(0 0 0 / 60%)!important;z-index: 2147483647!important;display: flex!important;align-items: center!important;justify-content: center!important;} #canvasrefined-domain-prompt {background: #fff!important;border-radius: 14px!important;padding: 24px 28px!important;max-width: 460px!important;width: 90%!important;box-sizing: border-box!important;box-shadow: 0 12px 48px rgb(0 0 0 / 45%)!important;animation: .25s ease canvasrefined-pop;} @keyframes canvasrefined-pop {0% {transform: scale(.9);opacity: 0} 100% {transform: scale(1);opacity: 1}} #canvasrefined-domain-prompt h3 {margin: 0 0 10px!important;font-size: 19px!important;font-weight: 700!important;color: #2d3b45!important;font-family: inherit!important;} #canvasrefined-domain-prompt p {margin: 0 0 18px!important;font-size: 14px!important;color: #4a5460!important;line-height: 1.5!important;font-family: inherit!important;} .canvasrefined-domain-host {font-weight: 700!important;color: #2d3b45!important;word-break: break-all!important;} .canvasrefined-domain-prompt-actions {display: flex!important;gap: 10px!important;} .canvasrefined-domain-prompt-actions button {flex: 1!important;border: none!important;border-radius: 8px!important;padding: 11px 16px!important;font-size: 14px!important;font-weight: 600!important;cursor: pointer!important;font-family: inherit!important;} .canvasrefined-domain-yes {background: #2d3b45!important;color: #fff!important;} .canvasrefined-domain-yes:hover {background: #3b4d61!important;} .canvasrefined-domain-no {background: #eceef0!important;color: #2d3b45!important;} .canvasrefined-domain-no:hover {background: #dfe2e5!important;} #canvasrefined-update-msg p {margin: 0;color:#fff!important;} #canvasrefined-update-close { background: #2f2f2f59; padding: 3px 6px; border-radius: 3px; height:100%; border:none; color: #fff!important;} #canvasrefined-reminders {animation: .4s ease slide; margin:20px!important;position: fixed!important; bottom: 0!important;right: 0;z-index:10000000000!important;flex-direction: column!important; gap:10px!important;} .canvasrefined-reminder-wrapper {overflow:hidden!important;position:relative!important;display: flex!important;justify-content:space-between!important;gap:10px!important;align-items:center!important;background: #fff!important;border-radius:12px!important;min-width:320px!important;max-width:320px!important;box-shadow: 0 2px 5px rgb(0 0 0 / 30%)!important;opacity: .94!important;} .canvasrefined-reminder-container {display:flex!important;gap:10px!important;padding: 22px 16px!important;} .canvasrefined-reminder-title { font-weight:bold!important;font-size: 16px!important;color: #000!important;margin:0!important;line-height:16px!important;} .canvasrefined-reminder-due {font-size:12px!important;margin:0!important;margin-top:5px!important;line-height:12px!important;color:#676767!important;} .canvasrefined-reminder-hide {color:#000!important;padding: 0px!important; font-size:14px!important;height:22px!important;min-width:22px!important;width:22px!important;margin: 10px!important;border-radius:6px!important;cursor:pointer;display:flex!important;align-self:stretch!important;align-items:center!important;justify-content:center!important;align-items:center!important;background: #e9e9e9!important;} .canvasrefined-reminder-content {text-decoration:none!important;} @keyframes slide { 0% { right: -320px; } 100% { right: 0; } } @keyframes blink { 50% { opacity: .5; } } /* ===== Dashboard notes (Markdown) ===== */ .canvasrefined-notes-toolbar {display:flex;flex-wrap:wrap;gap:2px;padding:6px 8px;align-items:center;background:var(--bcbackground-2,#f5f7f8);border-bottom:1px solid var(--bcborders,#c7cdd1);} .cr-fmt {border:1px solid transparent;background:transparent;color:var(--bctext-1,#5b6770);font:inherit;font-size:13px;line-height:1;padding:5px 7px;border-radius:4px;cursor:pointer;} .cr-fmt:hover {background:var(--bcbackground-1,rgba(0,0,0,.06));color:var(--bctext-0,#2d3b45);} .cr-fmt:active {background:var(--bcbackground-1,rgba(0,0,0,.12));} .cr-fmt code {font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;} .cr-fmt-sep {width:1px;height:18px;align-self:center;background:var(--bcborders,#c7cdd1);margin:0 3px;} .canvasrefined-notes-surface {position:relative;background:var(--bcbackground-1,#fff);} .canvasrefined-notes-rendered {box-sizing:border-box;width:100%;min-height:140px;padding:12px 16px;font-size:14px;line-height:1.5;color:var(--bctext-0,var(--ic-brand-font-color-dark-lightened-30,#2d3b45));overflow-wrap:break-word;cursor:text;outline:none;border-radius:0 0 4px 4px;} .canvasrefined-notes-rendered:hover {background:var(--bcbackground-2,rgba(0,0,0,.02));} .canvasrefined-notes-rendered:empty::before {content:"Click to add a note…";color:var(--bctext-2,#9aa3ab);font-style:italic;} .canvasrefined-notes-rendered > :first-child {margin-top:0;} .canvasrefined-notes-rendered > :last-child {margin-bottom:0;} .canvasrefined-notes-rendered h1,.canvasrefined-notes-rendered h2,.canvasrefined-notes-rendered h3,.canvasrefined-notes-rendered h4,.canvasrefined-notes-rendered h5,.canvasrefined-notes-rendered h6 {margin:14px 0 6px;font-weight:600;line-height:1.3;color:var(--bctext-0,#1f2d35);} .canvasrefined-notes-rendered h1 {font-size:1.5em;} .canvasrefined-notes-rendered h2 {font-size:1.3em;} .canvasrefined-notes-rendered h3 {font-size:1.15em;} .canvasrefined-notes-rendered h4 {font-size:1em;} .canvasrefined-notes-rendered p {margin:8px 0;} .canvasrefined-notes-rendered ul,.canvasrefined-notes-rendered ol {margin:8px 0;padding-left:24px;} .canvasrefined-notes-rendered li {margin:3px 0;} .canvasrefined-notes-rendered li.cr-task {list-style:none;margin-left:-18px;display:flex;align-items:flex-start;gap:6px;} .canvasrefined-notes-rendered li.cr-task input {margin-top:4px;cursor:pointer;} .canvasrefined-notes-rendered blockquote {margin:8px 0;padding:4px 12px;border-left:3px solid var(--bcborders,#c7cdd1);color:var(--bctext-1,#5b6770);background:var(--bcbackground-2,rgba(0,0,0,.03));} .canvasrefined-notes-rendered code {font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;background:var(--bcbackground-2,#f1f3f5);padding:1px 5px;border-radius:3px;} .canvasrefined-notes-rendered pre {margin:10px 0;padding:10px 12px;background:var(--bcbackground-2,#f1f3f5);border:1px solid var(--bcborders,#e2e6e8);border-radius:4px;overflow:auto;} .canvasrefined-notes-rendered pre code {background:transparent;padding:0;} .canvasrefined-notes-rendered a {color:var(--bclinks,var(--ic-link-color,#0072b5));text-decoration:underline;} .canvasrefined-notes-rendered a:hover {text-decoration:none;} .canvasrefined-notes-rendered img {max-width:100%;height:auto;border-radius:3px;} .canvasrefined-notes-rendered hr {border:none;border-top:1px solid var(--bcborders,#c7cdd1);margin:14px 0;} .canvasrefined-notes-rendered strong {font-weight:600;} .canvasrefined-notes-rendered del {color:var(--bctext-2,#9aa3ab);} .canvasrefined-notes-editor::placeholder {color:var(--bctext-2,#9aa3ab);} .canvasrefined-dashboard-notes:not(.is-editing) .canvasrefined-notes-toolbar {display:none;} .canvasrefined-dashboard-notes.is-editing .canvasrefined-notes-rendered {display:none;} .canvasrefined-dashboard-notes:not(.is-editing) .canvasrefined-notes-editor {display:none;} /* Quiz safe mode banner (pre-quiz pages) */ .canvasrefined-quiz-safe-banner { box-sizing: border-box; margin: 16px 0; padding: 14px 16px; border: 1px solid #d4a017; border-left: 4px solid #d4a017; border-radius: 6px; background: #fff8e1; color: #333; font-family: inherit; font-size: 14px; line-height: 1.45; max-width: 760px; } .canvasrefined-quiz-safe-title { font-weight: 700; font-size: 15px; margin-bottom: 6px; color: #7a5a00; } .canvasrefined-quiz-safe-info { margin: 0 0 10px; } .canvasrefined-quiz-safe-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .canvasrefined-quiz-safe-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; } .canvasrefined-quiz-safe-toggle input { width: 16px; height: 16px; cursor: pointer; } .canvasrefined-quiz-safe-toggle-label { font-weight: 600; } .canvasrefined-quiz-safe-dismiss { margin-left: auto; background: #f5f5f5; border: 1px solid #c7cdd1; border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 13px; color: #000 !important; } .canvasrefined-quiz-safe-dismiss:hover { background: #ececec; } /* ===== Global Canvas Search ===== */ /* Native global-nav search item — matches Canvas' own nav links. */ .canvasrefined-gs-nav-item { list-style: none; } .canvasrefined-gs-nav-item .ic-app-header__menu-list-link { cursor: pointer; } .canvasrefined-gs-nav-item .menu-item-icon-container svg { width: 26px; height: 26px; } .canvasrefined-gs-nav-item:hover .ic-app-header__menu-list-link { background: #0000004f !important; } .canvasrefined-gs-nav-item .menu-item__text { font-size: 12px; } /* Dashboard header trigger — sits just left of the \u22ee options button. */ .canvasrefined-gs-header-btn { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; padding: 6px 12px; border: 1px solid var(--bcborders, #c7cdd1); border-radius: 6px; background: var(--bcbackground-2, #f5f7f8); color: var(--bctext-1, #5b6770); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; line-height: 1; white-space: nowrap; transition: background .12s ease, border-color .12s ease; } .canvasrefined-gs-header-btn:hover { background: var(--bcbackground-1, #ececec); border-color: var(--bctext-2, #9aa3ab); } .canvasrefined-gs-header-btn:active { transform: translateY(1px); } .canvasrefined-gs-header-btn-label { line-height: 1; } @media (max-width: 768px) { .canvasrefined-gs-header-btn-label { display: none; } } .canvasrefined-gs-modal { position: fixed; inset: 0; z-index: 2147483100; background: rgba(0,0,0,.42); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; animation: canvasrefined-gs-fade .12s ease; } @keyframes canvasrefined-gs-fade { from { opacity: 0; } to { opacity: 1; } } .canvasrefined-gs-card { width: min(640px, 92vw); max-height: 70vh; display: flex; flex-direction: column; background: var(--bcbackground-0, #fff); color: var(--bctext-0, #2d3b45); border: 1px solid var(--bcborders, #c7cdd1); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.35); overflow: hidden; } .canvasrefined-gs-input-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--bcborders, #e2e6e8); background: var(--bcbackground-1, #fff); } .canvasrefined-gs-input-icon { color: var(--bctext-2, #9aa3ab); flex-shrink: 0; } .canvasrefined-gs-input { flex: 1; border: none; outline: none; background: transparent; font: inherit; font-size: 16px; color: var(--bctext-0, #2d3b45); } .canvasrefined-gs-input::placeholder { color: var(--bctext-2, #9aa3ab); } .canvasrefined-gs-close { border: 1px solid var(--bcborders, #c7cdd1); border-radius: 6px; background: var(--bcbackground-2, #f5f7f8); color: var(--bctext-1, #5b6770); font: inherit; font-size: 12px; font-weight: 600; padding: 3px 8px; cursor: pointer; } .canvasrefined-gs-close:hover { background: var(--bcbackground-2, #ececec); } .canvasrefined-gs-results { flex: 1; overflow-y: auto; padding: 6px; } .canvasrefined-gs-hint, .canvasrefined-gs-loading { padding: 18px 14px; text-align: center; color: var(--bctext-2, #9aa3ab); font-size: 14px; } .canvasrefined-gs-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; } .canvasrefined-gs-row:hover { background: var(--bcbackground-2, rgba(0,0,0,.04)); } .canvasrefined-gs-row.canvasrefined-gs-selected { background: color-mix(in srgb, var(--bclinks, #0072b5) 16%, transparent); border-color: color-mix(in srgb, var(--bclinks, #0072b5) 40%, transparent); } .canvasrefined-gs-row-main { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; } .canvasrefined-gs-title { font-size: 14px; font-weight: 600; color: var(--bctext-0, #2d3b45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .canvasrefined-gs-course { font-size: 12px; color: var(--bctext-2, #9aa3ab); white-space: nowrap; flex-shrink: 0; max-width: 38%; overflow: hidden; text-overflow: ellipsis; } .canvasrefined-gs-type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 7px; border-radius: 6px; flex-shrink: 0; background: var(--bcbackground-2, #eef0f2); color: var(--bctext-1, #5b6770); border: 1px solid var(--bcborders, #dde1e3); } .canvasrefined-gs-type-assignment { background: #e3f1fb; color: #0b5d8c; border-color: #b9d9ef; } .canvasrefined-gs-type-quiz { background: #fde9d9; color: #9a5300; border-color: #f6cdac; } .canvasrefined-gs-type-discussion { background: #e6f4ea; color: #1a7a3c; border-color: #c5e6cf; } .canvasrefined-gs-type-module { background: #efe7fb; color: #5b2a9e; border-color: #d8c6f1; } .canvasrefined-gs-type-page { background: #f1f3f5; color: #444; border-color: #dde1e3; } .canvasrefined-gs-type-file { background: #f1f3f5; color: #444; border-color: #dde1e3; } .canvasrefined-gs-type-link, .canvasrefined-gs-type-external-tool { background: #fff4d6; color: #7a5b00; border-color: #f1dfab; } .canvasrefined-gs-type-course { background: #dff3f3; color: #0b6e6e; border-color: #b3dede; } .canvasrefined-gs-type-grades { background: #e8eefc; color: #1d4ed8; border-color: #c3d2f5; } .canvasrefined-gs-footer { display: flex; flex-wrap: wrap; gap: 12px; padding: 8px 14px; font-size: 12px; color: var(--bctext-2, #9aa3ab); border-top: 1px solid var(--bcborders, #e2e6e8); background: var(--bcbackground-1, #fff); } .canvasrefined-gs-footer kbd { font: inherit; font-size: 11px; background: var(--bcbackground-2, #eef0f2); border: 1px solid var(--bcborders, #c7cdd1); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; color: var(--bctext-1, #5b6770); } /* ===== Grades table: scale down with narrow windows ===== Canvas lays out #grades_summary with content-driven auto sizing plus hard min-widths (title 150px, details 80px) and nowrap cells (due, score, details), giving it a ~780px floor below which the whole table overflows the page instead of shrinking. Switch it to fixed layout with percentage column widths (set on the header row, which drives fixed layout) and let tight cells wrap, so the header, body and rows all scale with the viewport. #assignments scrolls horizontally as a last resort (e.g. while a what-if score input is open). */ #grades_summary { table-layout: fixed; width: 100%; } #grades_summary thead th:nth-child(1) { width: 30%; } /* Name */ #grades_summary thead th:nth-child(2) { width: 12%; } /* Due */ #grades_summary thead th:nth-child(3) { width: 10%; } /* Submitted */ #grades_summary thead th:nth-child(4) { width: 7%; } /* Status */ #grades_summary thead th:nth-child(5) { width: 11%; } /* Score */ #grades_summary thead th:nth-child(6) { width: 3%; } /* asset processors */ #grades_summary thead th:nth-child(7) { width: 15%; } /* Details */ #grades_summary thead th:nth-child(8) { width: 3%; } /* progress */ #grades_summary td.due, #grades_summary td.assignment_score, #grades_summary td.details { white-space: normal; } #assignments { overflow-x: auto; } /* Big strikethrough on checked-off tasks (dashboard list view). Canvas keeps completed planner items looking identical to unfinished ones — the only cue is the checkbox itself — so when a task's checkbox is checked, strike its title through with a thick line and dim the row. :has() matches the checkbox state reactively, so this also applies live at the moment a task is checked, before Canvas collapses it into the completed-items section. */ .planner-item:has(input[data-testid="planner-item-completed-checkbox"]:checked) { opacity: 0.7; } .planner-item:has(input[data-testid="planner-item-completed-checkbox"]:checked) .PlannerItem-styles__details a, .planner-item:has(input[data-testid="planner-item-completed-checkbox"]:checked) .PlannerItem-styles__title a, .planner-item:has(input[data-testid="planner-item-completed-checkbox"]:checked) .PlannerItem-styles__title button { text-decoration: line-through !important; text-decoration-thickness: 2.5px !important; } /* InstUI View (emotion hash css-fkmnqn-view) ships a bottom margin that leaves a stray gap below the discussion/announcement header card. Hashed classes can shift between Canvas releases; an unmatched selector here is simply inert. */ .css-fkmnqn-view { margin-bottom: 0 !important; } /* Shared widget container ("Top"/"Bottom" positions): a full-width flex row holding one slot per widget; slot widths are the % set in the Widgets tab. Row margins mirror the notes container's original 18/14 spacing. */ .canvasrefined-widget-row {display:flex;align-items:stretch;width:100%;box-sizing:border-box;margin:18px 0 14px;column-gap:14px;} .canvasrefined-widget-slot {min-width:0;box-sizing:border-box;display:flex;flex-direction:column;} .canvasrefined-widget-slot > * {width:100%;} /* Equal height across widgets in the shared container: every slot stretches to the row height and its widget content fills it top-to-bottom. */ .canvasrefined-widget-slot .canvasrefined-dashboard-notes {width:100%;margin:0;height:100%;display:flex;flex-direction:column;} .canvasrefined-widget-slot .canvasrefined-dashboard-notes .canvasrefined-notes-surface {flex:1;display:flex;flex-direction:column;} .canvasrefined-widget-slot .canvasrefined-dashboard-notes .canvasrefined-notes-editor, .canvasrefined-widget-slot .canvasrefined-dashboard-notes .canvasrefined-notes-rendered {flex:1;overflow:auto;} .canvasrefined-widget-slot .canvasrefined-gpa-card {width:100%;margin:0;box-sizing:border-box;display:block;flex:1 1 auto;min-height:0;} .canvasrefined-widget-slot .canvasrefined-gpa {margin:0;flex:1 1 auto;min-height:0;overflow:auto;} /* GPA calculator in container mode ("Top"/"Bottom" positions): the elements are moved outside the card grid, so the collapsed GPA card becomes a wide container-style card and the expanded calculator keeps full width. */ .canvasrefined-gpa-card.container-mode {width:100%;box-sizing:border-box;margin:0 0 4px;display:block;} .canvasrefined-gpa.container-mode {margin:0 0 18px;} /* Dashboard notes placed inside the card grid (before/after cards): styled exactly like the GPA card / Canvas course cards — 262px wide, rounded, card shadow, and the same 36px gutters so it aligns in the grid. */ .canvasrefined-dashboard-notes.in-cards { width: 262px; min-height: 260px; box-sizing: border-box; margin: 36px 0 0 36px; border: none; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,.3); display: inline-flex; flex-direction: column; vertical-align: top; } .canvasrefined-dashboard-notes.in-cards .canvasrefined-notes-surface {flex: 1; display: flex; flex-direction: column;} .canvasrefined-dashboard-notes.in-cards .canvasrefined-notes-editor, .canvasrefined-dashboard-notes.in-cards .canvasrefined-notes-rendered {flex: 1; resize: none; border: none; outline: none; background: transparent;} /* Notes placed in the shared widget row get their margins from the row (see .canvasrefined-widget-slot rules above). */ /* GPA calculator modal (Edit Calculator button): combines the course calculator with the grade-scale editor, styled like the global search modal. */ /* ===== GPA calculator modal (rebuilt) ===== */ #canvasrefined-gpa-modal { --cr-gpa-course-cols: 30px minmax(0,1fr) 80px 58px 118px 16px minmax(88px,auto); --cr-gpa-accent: var(--ic-brand-primary,#0374b5); position:fixed;inset:0;z-index:2147483100;background:rgba(15,25,40,.5);backdrop-filter:blur(3px); display:flex;align-items:flex-start;justify-content:center;padding:7vh 16px 16px; } .cr-gpa-modal {width:min(1080px,96vw);max-height:86vh;display:flex;flex-direction:column;background:var(--bcbackground-0,#fff);color:var(--bctext-0,#2d3b45);border:1px solid var(--bcborders,#c7cdd1);border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.4);overflow:hidden;font-size:13px;} /* Header: title on the left, live GPA tiles on the right */ .cr-gpa-head {display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid var(--bcborders,#c7cdd1);} .cr-gpa-head-titles {display:flex;flex-direction:column;gap:2px;margin-right:auto;min-width:140px;} .cr-gpa-title {font-size:17px;font-weight:700;} .cr-gpa-subtitle {font-size:12px;color:var(--bctext-2,#9aa3ab);} .cr-gpa-results {display:flex;gap:10px;align-items:stretch;} .cr-gpa-result {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:76px;padding:6px 12px;border-radius:12px;background:color-mix(in srgb, var(--bctext-0,#2d3b45) 6%, transparent);} .cr-gpa-result-value {font-size:20px;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums;} .cr-gpa-result-label {font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--bctext-2,#9aa3ab);} .cr-gpa-close {display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;border:none;background:transparent;color:inherit;border-radius:8px;cursor:pointer;} .cr-gpa-close:hover {background:rgba(127,127,127,.15);} /* Body: courses on the left, grade scale on the right; panes scroll alone */ .cr-gpa-body {display:grid;grid-template-columns:minmax(0,2.2fr) minmax(210px,1fr);flex:1;min-height:0;} .cr-gpa-pane {min-width:0;overflow-y:auto;padding:14px 20px 20px;} .cr-gpa-pane-scale {border-left:1px solid var(--bcborders,#c7cdd1);padding-left:14px;} .cr-gpa-pane-head {font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bctext-2,#9aa3ab);margin:0 0 10px;} /* Calculator body moved into the modal: neutralize panel chrome */ .cr-gpa-modal .canvasrefined-gpa {display:block!important;margin:0;padding:0;border:none;box-shadow:none!important;overflow:visible;position:static;background:transparent!important;border-radius:0;} .cr-gpa-modal .canvasrefined-gpa .canvasrefined-gpa-header {display:none;} .cr-gpa-modal .canvasrefined-gpa-courses-container {margin:0;width:100%;overflow:visible;} .cr-gpa-modal .canvasrefined-gpa-courses {display:flex;flex-direction:column;min-width:0;width:100%;} /* Course rows: shared grid so the column headers line up with the rows */ .cr-gpa-colhead, .cr-gpa-modal .canvasrefined-gpa-course, .cr-gpa-modal #canvasrefined-cumulative-gpa {display:grid;grid-template-columns:var(--cr-gpa-course-cols);column-gap:10px;align-items:center;} .cr-gpa-colhead {padding:0 8px 6px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--bctext-2,#9aa3ab);} .cr-gpa-colhead .cr-gpa-colhead-custom {grid-column:6 / span 2;} .cr-gpa-modal .canvasrefined-gpa-course {padding:7px 8px;border-radius:10px;} .cr-gpa-modal .canvasrefined-gpa-course:hover {background:color-mix(in srgb, var(--bctext-0,#2d3b45) 5%, transparent);} /* Letter badge: color-coded pill driven by data-grade-letter (set in calculateGPA2) */ .cr-gpa-modal .canvasrefined-gpa-letter-grade {width:auto;margin:0;display:flex;align-items:center;justify-content:center;min-height:26px;padding:0 2px;border-radius:8px;font-size:12px;font-weight:700;background:transparent;color:var(--bctext-0,#2d3b45);} .cr-gpa-modal [data-grade-letter] .canvasrefined-gpa-letter-grade {background:transparent;color:var(--bctext-0,#2d3b45);} .cr-gpa-modal .canvasrefined-gpa-name {margin:0;width:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:500;} .cr-gpa-modal .canvasrefined-gpa-percent-container, .cr-gpa-modal .canvasrefined-course-credits {margin:0;display:flex;align-items:center;gap:4px;} .cr-gpa-modal .canvasrefined-course-percent, .cr-gpa-modal .canvasrefined-course-credit {height:30px;width:100%;font-size:14px;border-radius:8px;padding:0 8px;box-sizing:border-box;border:1px solid var(--bcborders,#c7cdd1);background:transparent;color:var(--bctext-0,#2d3b45);text-align:right;} .cr-gpa-modal .canvasrefined-course-percent-sign {color:var(--bctext-2,#9aa3ab);font-size:12px;} .cr-gpa-modal .canvasrefined-course-weights {margin:0;} .cr-gpa-modal .canvasrefined-course-weight {height:30px;width:100%;min-width:0;margin:0;font-size:13px;border-radius:8px;padding:0 6px;box-sizing:border-box;border:1px solid var(--bcborders,#c7cdd1);background:transparent;color:var(--bctext-0,#2d3b45);} .cr-gpa-modal .canvasrefined-course-percent:focus, .cr-gpa-modal .canvasrefined-course-credit:focus, .cr-gpa-modal .canvasrefined-course-weight:focus {outline:none;border-color:var(--cr-gpa-accent);} .cr-gpa-modal .canvasrefined-course-customgr {margin:0;width:16px;height:16px;accent-color:var(--cr-gpa-accent);cursor:pointer;} .cr-gpa-modal .canvasrefined-course-customgr-label {margin:0;font-size:12px;color:var(--bctext-2,#9aa3ab);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} /* Cumulative row: pulled to the bottom as an emphasized summary row */ .cr-gpa-modal #canvasrefined-cumulative-gpa {order:100;margin-top:10px;padding:12px 8px 4px;border-top:1px dashed var(--bcborders,#c7cdd1);} .cr-gpa-modal #canvasrefined-cumulative-gpa .canvasrefined-gpa-name {font-weight:700;} /* Grade scale pane */ .cr-gpa-seg {display:flex;gap:8px;padding:0;background:transparent;margin:0 0 14px;} .cr-gpa-preset {flex:1;border:1px solid var(--bcborders,#c7cdd1);background:transparent;color:var(--bctext-2,#9aa3ab);border-radius:8px;padding:7px 10px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;} .cr-gpa-preset:hover {color:var(--bctext-0,#2d3b45);} .cr-gpa-preset.active {background:var(--bcbackground-0,#fff);color:var(--bctext-0,#2d3b45);border-color:var(--bctext-2,#9aa3ab);} /* Grade scale rows: letter chip + compact "value + unit" fields */ .cr-gpa-scale-head {display:grid;grid-template-columns:40px 1fr 1fr;gap:8px;padding:0 2px 4px;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--bctext-2,#9aa3ab);} .cr-gpa-row {display:grid;grid-template-columns:40px 1fr 1fr;gap:8px;align-items:center;padding:2px 0;} .cr-gpa-row:hover {background:color-mix(in srgb, var(--bctext-0,#2d3b45) 4%, transparent);border-radius:8px;} .cr-gpa-chip {display:flex;align-items:center;justify-content:center;height:24px;border-radius:7px;background:color-mix(in srgb, var(--bctext-0,#2d3b45) 7%, transparent);font-weight:700;font-size:12px;} .cr-gpa-field {display:flex;align-items:center;min-width:0;border:1px solid var(--bcborders,#c7cdd1);border-radius:8px;height:28px;background:transparent;overflow:hidden;} .cr-gpa-field:focus-within {border-color:var(--cr-gpa-accent,var(--ic-brand-primary,#0374b5));box-shadow:0 0 0 2px color-mix(in srgb, var(--cr-gpa-accent,var(--ic-brand-primary,#0374b5)) 22%, transparent);} .cr-gpa-input {width:100%;min-width:0;border:none;background:transparent;color:inherit;height:100%;padding:0 4px 0 8px;font:inherit;font-size:13px;text-align:right;box-sizing:border-box;} .cr-gpa-input:focus {outline:none;box-shadow:none;} .cr-gpa-suffix {flex:none;padding:0 8px 0 2px;font-size:11px;color:var(--bctext-2,#9aa3ab);} .cr-gpa-note {color:var(--bctext-2,#9aa3ab);font-size:12px;line-height:1.5;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--bcborders,#c7cdd1);} @media (max-width:720px) { #canvasrefined-gpa-modal {--cr-gpa-course-cols:26px minmax(0,1fr) 72px 52px 108px 15px 88px;padding:4vh 8px 8px;} .cr-gpa-body {grid-template-columns:1fr;} .cr-gpa-pane-scale {border-left:none;border-top:1px solid var(--bcborders,#c7cdd1);} } /* ===== Generic dashboard widgets: Focus Timer, Breathing, Quotes ===== Shared shell follows the same card look as Notes/GPA: 262px grid cell with the 36px Canvas gutter when placed before/after the course cards, and a full-width flowing card when placed in the top/bottom container row. */ .canvasrefined-widget-card { width: 262px; min-height: 200px; box-sizing: border-box; background: var(--bcbackground-1,#fff); color: var(--bctext-0,#2d3b45); border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,.3); display: flex; flex-direction: column; overflow: hidden; font-size: 13px; } .canvasrefined-widget-card.in-cards { margin: 36px 0 0 36px; display: inline-flex; vertical-align: top; } .canvasrefined-widget-card.container-mode { width: 100%; height: 100%; margin: 0; min-height: 0; } .canvasrefined-widget-slot .canvasrefined-widget-card {width:100%;margin:0;height:100%;} .cr-widget-head {display:flex;align-items:center;justify-content:space-between;padding:12px 14px 10px;border-bottom:1px solid var(--bcborders,#c7cdd1);} .cr-widget-title {font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--bctext-2,#9aa3ab);} .cr-widget-btn {flex:1;border:none;border-radius:8px;padding:9px 12px;font:inherit;font-weight:600;font-size:13px;cursor:pointer;background:var(--ic-brand-primary,#0374b5);color:#fff;} .cr-widget-btn:hover {filter:brightness(1.07);} .cr-widget-btn-ghost {background:transparent;color:var(--bctext-0,#2d3b45);border:1px solid var(--bcborders,#c7cdd1);} /* Timer engine (Focus Timer + Breathing Breaks) */ .cr-time-box {position:relative;margin:14px 14px 0;border-radius:12px;background:color-mix(in srgb, var(--bctext-0,#2d3b45) 6%, transparent);border:1px solid var(--bcborders,#c7cdd1);overflow:hidden;} /* The whole time rectangle is the progress bar, tinted with the dark-mode link color so it matches the active theme in both light and dark mode. */ .cr-time-box .cr-timer-progress-bar {position:absolute;left:0;top:0;bottom:0;width:0;background:color-mix(in srgb, var(--bclinks,#0374b5) 32%, transparent);border-right:2px solid color-mix(in srgb, var(--bclinks,#0374b5) 80%, transparent);} .cr-timer-time {position:relative;z-index:1;font-size:44px;font-weight:700;text-align:center;letter-spacing:.02em;font-variant-numeric:tabular-nums;padding:22px 14px;line-height:1;color:var(--bctext-0,#2d3b45);} .cr-breath-display {padding:12px 14px 6px;} .cr-timer-presets {display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 14px 0;} .cr-timer-preset {border:1px solid var(--bcborders,#c7cdd1);background:transparent;color:var(--bctext-0,#2d3b45);border-radius:8px;padding:8px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;} .cr-timer-preset:hover {border-color:var(--bctext-2,#9aa3ab);} .cr-timer-preset.active {background:color-mix(in srgb, var(--bclinks,#0374b5) 18%, transparent);border-color:var(--bclinks,#0374b5);color:var(--bclinks,#0374b5);} .cr-timer-custom-row {display:flex;gap:8px;padding:10px 14px 0;align-items:center;} .cr-timer-custom-row[hidden] {display:none;} /* Compact clock entry: 0 : 00 : 00, click a segment to edit it. */ .cr-time-input {display:flex;align-items:center;justify-content:center;gap:1px;flex:1;min-width:0;border:1px solid var(--bcborders,#c7cdd1);border-radius:8px;padding:4px 8px;background:color-mix(in srgb, var(--bctext-0,#2d3b45) 5%, transparent);} .cr-time-input:focus-within {border-color:var(--bclinks,#0374b5);box-shadow:0 0 0 2px color-mix(in srgb, var(--bclinks,#0374b5) 22%, transparent);} .cr-tf {width:2.4ch;min-width:0;border:none;background:transparent;color:var(--bctext-0,#2d3b45);font:inherit;font-size:15px;font-weight:700;line-height:1.2;text-align:center;padding:0;border-radius:4px;} .cr-tf:focus {outline:none;background:color-mix(in srgb, var(--bclinks,#0374b5) 20%, transparent);} .cr-tf::placeholder {color:var(--bctext-2,#9aa3ab);} .cr-tf-colon {font-size:15px;font-weight:700;color:var(--bctext-2,#9aa3ab);padding-bottom:1px;} .cr-timer-custom-row .cr-widget-btn {flex:none;padding:7px 13px;} .cr-timer-controls {display:flex;gap:8px;padding:12px 14px 14px;} /* Breathing Breaks: 4s in / 6s out, colour shifts green -> blue when exhaling */ .canvasrefined-breathing {background:linear-gradient(160deg, color-mix(in srgb, #6ea8ff 14%, var(--bcbackground-1,#fff)), var(--bcbackground-1,#fff));} .cr-breath-stage {display:flex;align-items:center;justify-content:center;padding:20px 14px 6px;} .cr-breath-circle {position:relative;width:112px;height:112px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%, #74e3c4, #2fb595);box-shadow:0 0 18px 2px rgba(65,209,175,.4);} .cr-breath-circle::before {content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 40%, #93a8ff, #536ee0);opacity:0;box-shadow:0 0 26px 5px rgba(101,124,255,.45);} .canvasrefined-breathing.is-running .cr-breath-circle {animation: cr-breath-pulse 10s ease-in-out infinite, cr-breath-glow 10s ease-in-out infinite;} .canvasrefined-breathing.is-running .cr-breath-circle::before {animation: cr-breath-tint 10s ease-in-out infinite;} @keyframes cr-breath-pulse { 0% {transform:scale(.68);} 40% {transform:scale(1);} 100% {transform:scale(.68);} } @keyframes cr-breath-glow { 0% {box-shadow:0 0 16px 2px rgba(65,209,175,.35);} 40% {box-shadow:0 0 36px 9px rgba(65,209,175,.65);} 100% {box-shadow:0 0 16px 2px rgba(65,209,175,.35);} } @keyframes cr-breath-tint { 0%,38% {opacity:0;} 60% {opacity:.95;} 100% {opacity:0;} } .cr-breath-phase,.cr-breath-idle {position:absolute;z-index:1;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.32);} .cr-breath-phase {opacity:0;} .cr-breath-idle {opacity:1;} .canvasrefined-breathing.is-running .cr-breath-idle {opacity:0;} .canvasrefined-breathing.is-running .cr-breath-phase-in {animation: cr-breath-in-label 10s ease-in-out infinite;} .canvasrefined-breathing.is-running .cr-breath-phase-out {animation: cr-breath-out-label 10s ease-in-out infinite;} @keyframes cr-breath-in-label {0%{opacity:1;}38%{opacity:1;}44%{opacity:0;}100%{opacity:0;}} @keyframes cr-breath-out-label {0%{opacity:0;}38%{opacity:0;}44%{opacity:1;}94%{opacity:1;}100%{opacity:0;}} /* Breathing layout: circle + time stacked above the controls (card mode), and circle + time on the left with the controls on the right in Top/Bottom rows. */ .cr-breath-layout {display:flex;flex-direction:column;flex:1;min-height:0;} .cr-breath-left {display:flex;flex-direction:column;align-items:center;justify-content:center;} .cr-breath-right {display:flex;flex-direction:column;justify-content:center;} .canvasrefined-breathing.container-mode .cr-breath-layout {flex-direction:row;align-items:center;gap:26px;} .canvasrefined-breathing.container-mode .cr-breath-left {flex:0 0 40%;width:40%;max-width:40%;} .canvasrefined-breathing.container-mode .cr-breath-right {flex:1;min-width:0;} .canvasrefined-breathing.container-mode .cr-breath-stage {padding:8px 0;} .canvasrefined-breathing.container-mode .cr-timer-presets {padding-top:0;} .canvasrefined-breathing.container-mode .cr-timer-controls {padding-bottom:0;} /* Daily Quote: text scales with the widget's own width (small grid cell vs. full-width container row), using container-query units. */ .canvasrefined-quotes {container-type:inline-size;background:linear-gradient(150deg, color-mix(in srgb, #b98cff 14%, var(--bcbackground-1,#fff)), var(--bcbackground-1,#fff));} .cr-quote-body {padding:clamp(12px,4.5cqw,26px);display:flex;flex-direction:column;gap:clamp(4px,1.6cqw,12px);flex:1;justify-content:center;} .cr-quote-mark {font-size:clamp(20px,11cqw,44px);line-height:.5;font-weight:800;color:color-mix(in srgb, var(--bclinks,#0374b5) 55%, transparent);} .cr-quote-text {margin:0;font-size:clamp(14px,7.5cqw,26px);line-height:1.45;font-style:italic;color:var(--bctext-0,#2d3b45);} .cr-quote-author {font-size:clamp(11px,3.6cqw,17px);font-weight:600;color:var(--bctext-2,#9aa3ab);align-self:flex-end;}