CanvasRefined/css/content.css
2026-10-15 16:41:11 -07:00

551 lines
40 KiB
CSS

.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: 50px; 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) 66px 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) 58px 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);}
}