Adds background instead of a blank white.
Standardized design on course pages.
Rounded Corners.
Moving card background in the dashboard (list view).
DARK MODE.
and much more!
Authormavgician
LicenseNo License
CategoryCanvas, Instructure
Created
Updated
Size56 kB
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Adds background instead of a blank white.
Standardized design on course pages.
Rounded Corners.
Moving card background in the dashboard (list view).
DARK MODE.
and much more!
Based on the stylish user style from Pyro1g (BCPS).
/* ==UserStyle==
@name Canvas/Instructure Enhanced Dark Mode (TIP PH)
@version 20211029.07.00
@namespace userstyles.world/user/mavgician
@description Adds background instead of a blank white.
Standardized design on course pages.
Rounded Corners.
Moving card background in the dashboard (list view).
DARK MODE.
and much more!
@author mavgician
@license No License
==/UserStyle== */
@-moz-document domain("instructure.com"), domain("tip.instructure.com") {
#breadcrumbs {
background-color: transparent;
}
#breadcrumbs> ul {
margin: 0;
padding: 4px 15px;
list-style: none
}
#breadcrumbs>ul>li+li:last-of-type a {
color: #eee;
}
.btn, .Button {
background: #575d94 !important;
color: white !important;
border-radius: 100px !important;
}
.header-bar {
border-bottom: 0px solid #242424;
min-height: 33px;
padding-top: 15px;
padding-bottom: 15px;
}
.header-bar:before, .header-bar:after {
display: table;
content:"";
line-height: 0
}
.header-bar:after {
clear: both
}
.header-bar.pinned {
position: fixed;
top: 0;
width: 1071px;
background-color: white;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
margin-left: -12px;
padding: 15px;
z-index: 100
}
.react-select-box-label {
color: #2D3B45
}
.react-select-box-click-outside-layer {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2
}
.react-select-box-clear {
position: absolute;
top: 15px;
right: 0;
width: 35px;
height: 20px;
background-color: #fff;
text-indent: -9999em;
z-index: 3;
border: none
}
.react-select-box-clear:before {
content:'Ã';
position: absolute;
top: 2px;
left: 10px;
z-index: 1;
background-color: #73818C;
border-radius: 100%;
font-size: 13px;
font-size: .8125rem;
color: #fff;
line-height: 1;
width: 15px;
height: 15px;
text-indent: 0;
text-align: center
}
.react-select-box-clear:hover:before, .react-select-box-clear:focus:before {
background-color: var(--ic-brand-primary)
}
.react-select-box-hidden {
display: none
}
.react-select-box-options {
margin: 2px 0 0;
position: absolute;
padding: 10px 0;
width: 240px;
top: 100%;
left: 0;
z-index: 4;
background-color: #fff;
border-radius: 4px
}
.ic-badge.ic-badge--neutral {
background: #EBEDEE;
color: #2D3B45
}
.ic-badge.ic-badge--success {
background: #00AC18
}
.ic-badge.ic-badge--alert {
background: #FC5E13
}
.ic-badge.ic-badge--danger {
background: #EE0612
}
body {
min-height: 100vh;
background: #161616;
}
body:not(.is-inside-submission-frame):not(.embedded) {
min-width: 768px
}
body.no-headers #header, body.no-headers #topbar, body.no-headers #left-side, body.no-headers #breadcrumbs, body.embedded #header, body.embedded #topbar, body.embedded #left-side, body.embedded #breadcrumbs {
display: none !important
}
.ic-app-footer {
box-sizing: border-box;
padding: 12px 0;
margin: 0 24px;
border-top: 1px solid #242424;
}
#right-side .events_list .todo-details, #right-side .to-do-list .todo-details {
padding-right: 30px;
}
#right-side .events_list .todo-details:after, #right-side .to-do-list .todo-details:after {
width: 0px;
background: linear-gradient();
}
#right-side .events_list .event-details:after, #right-side .events_list .todo-details:after, #right-side .to-do-list .event-details:after, #right-side .to-do-list .todo-details:after {
/* content:""; */
position: absolute;
top: 0;
right: 0;
height: 0%;
width: 0px;
background: linear-gradient();
}
.ic-DashboardCard {
box-sizing: border-box;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
border-radius: 0px;
overflow: hidden;
width: 262px;
display: inline-block;
vertical-align: top;
margin: 0 36px 36px 0;
}
.ic-Dashboard-header__layout {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
padding: 0 0 9px;
border-bottom: 1px solid #242424;
background: #262626;
}
.ic-Dashboard-Activity {
padding: 12px
}
.ic-Dashboard-header__title {
margin-top: 0;
margin-bottom: 0;
-webkit-flex: 1;
flex: 1;
padding-right: 12px;
box-sizing: border-box
}
.ic-Dashboard-header__actions {
box-sizing: border-box;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: flex-end;
justify-content: flex-end
}
#right-side .placeholder {
height: 200px
}
.recent-activity-header {
margin: 0;
border-bottom: 1px solid #C7CDD1;
line-height: 1.2;
padding-bottom: 12px;
font-size: 1.5em
}
.recent_activity>li {
position: relative;
border-bottom: 1px solid #242424
}
.recent_activity>li .title {
font-weight: normal
}
.recent_activity>li .links {
font-size: 11px;
font-size: .6875rem
}
.recent_activity>li .unread-count {
display: block;
background: var(--ic-brand-primary);
border-radius: 15px;
width: 10px;
height: 10px;
position: absolute;
left: 3px;
top: 22px;
padding: 0
}
.recent_activity>li .accessibly-hidden {
position: absolute;
left: -9999px
}
.recent_activity>li .unread {
width: 10px;
height: 10px;
margin-left: -15px;
background-color: var(--ic-brand-primary);
border-radius: 5px
}
.stream_header {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: -webkit-flex;
display: flex;
padding: 12px
}
.stream_header .image-block {
-webkit-flex: 1;
flex: 1;
-webkit-align-items: center;
align-items: center
}
.stream_header .toggle-details {
text-transform: uppercase;
font-size: 11px;
font-size: .6875rem
}
.stream_header:hover {
background: rgba(90,90,90,0.6);
transition: 0.1s;
}
.stream_header {
background: transparent;
transition: 0.1s;
}
.stream_header:hover .toggle-details {
text-indent: 0;
text-align: right
}
.stream-details tr {
border-top: 1px solid #242424;
}
.stream-details tr:hover {
background: #333;
}
.header-right-side {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: flex-end;
justify-content: flex-end
}
.profile_table .data_description {
font-size: 0.8em;
color: #aaa
}
h1, h2, h3, h4, h5, h6 {
margin: 6px 0;
font-family:"LatoWeb", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
line-height: 1.5;
text-rendering: optimizelegibility;
}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
font-weight: normal;
line-height: 3;
color: #4b6373
}
h1 {
font-size: 38px;
}
h2 {
font-size: 32px
}
h3 {
font-size: 24px
}
h4 {
font-size: 18px
}
h5 {
font-size: 16px
}
h6 {
font-size: 12px
}
h1 small {
font-size: 24px
}
h2 small {
font-size: 18px
}
h3 small {
font-size: 16px
}
h4 small {
font-size: 16px
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-weight: normal;
}
h1, h2, .h1, .h2 {
font-size: 1.8em;
line-height: 1.5;
color: #b1b1b1;
}
h3, .h3 {
font-size: 1.5em
}
.page-header {
padding-bottom: 6px;
margin: 20px 0 30px;
border-bottom: 1px solid #C7CDD1
}
a {
color: #007ec5;
text-decoration: none;
}
a:focus {
color: #aaa;
}
a:hover {
color: #eee;
}
a:focus, a:hover {
text-decoration: none;
}
body {
font-size: 16px;
font-size: 1rem;
font-weight: normal;
margin: 0;
line-height: 1.5;
color: #aaa;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.list-view>ul>li>a, .list-view>nav>ul>li>a {
color: #aaa;
border-radius: 0px;
}
.pages.show .course-title {
color: #eee;
}
.submission-details-header {
margin-bottom: 30px;
}
.submission-details-comments .comments {
background-color: #161616;
border-left: 0px solid #242424;
}
#questions.assessment_results .question .answers .answer.wrong_answer {
border-radius: 0px;
}
.module-sequence-footer .module-sequence-footer-content {
background: #161616;
}
.conversations .panel {
background: #161616;
border-bottom: 1px solid #242424;
}
.message-list-scroller {
border-right: 1px solid #242424;
}
.item-group-container {
background: #101010;
border: 0px solid #242424;
}
.ig-header .name {
color: #eee;
text-shadow: 0px 0px 0 rgba(0, 0, 0, 0)
}
body.primary-nav-expanded .ReactTray__Content {
background: #161616 !important;
}
.feature-flags {
color: #aaa;
border: 1px solid #242424;
}
.feature-flag {
border-bottom: 1px solid #242424;
}
thead th, table.summary, table.summary tbody th, table.summary tbody td {
background: transparent !important;
color: var(--fdyuz-textColor);
}
.table th, .table td {
border-top: 1px solid #242424;
}
.table-bordered th, .table-bordered td {
border-left: 1px solid #242424;
}
.table-bordered {
border: 1px solid #242424;
}
.table-bordered:last-of-type {
border-bottom: 1px solid #242424;
}
.ic-app-nav-toggle-and-crumbs {
border-bottom: 1px solid #242424;
}
.ic-NavMenu__header {
border-bottom: 1px solid #242424;
}
.Underline-All-Links__enabled a:not(.Button):not(.ui-button):not(.btn):not(.ui-button) {
text-decoration: none;
}
.Underline-All-Links__enabled a:not(.Button):not(.ui-button):not(.btn):not(.ui-button):not(.ui-tabs-anchor) {
text-decoration: none;
}
.Underline-All-Links__enabled a:not(.Button):not(.ui-button):not(.btn):not(.ui-button):focus {
outline-color: transparent;
}
.ic-app-header__menu-list-item.ic-app-header__menu-list-item--active .ic-app-header__menu-list-link {
background: #333;
}
.ic-app-header__menu-list-item.ic-app-header__menu-list-item--active .ic-icon-svg {
fill: var(-...