DeltaMath Modern (Kanban View) by freeplay

DeltaMath Modern (Kanban View) screenshot
Homepage Install Get Stylus Write a review

Details

Authorfreeplay

LicenseNo License

Created

Updated

CategoryDeltaMath

Statistics

Learn how we calculate statistics in the FAQ.

Total views143

Total installs29

Weekly installs7

Description

A modern version of DeltaMath, which also happens to be a Kanban view wow what a surprise!

Notes

Userstyle doesn't have notes.

History

Daily snapshots of style statistics.

2022-01-102022-01-172022-01-232022-01-292022-02-042022-02-102022-02-162022-02-222022-02-282022-03-062022-03-122022-03-18Date0.000.380.751.131.501.882.252.633.00Daily countDaily installsDaily updatesDaily views
2022-01-102022-01-172022-01-232022-01-292022-02-042022-02-102022-02-162022-02-222022-02-282022-03-062022-03-122022-03-18Date0.005.7011.3016.9022.5028.2033.8039.4045.00Total countTotal installsTotal views

Source code

/* ==UserStyle==
@name           DeltaMath Modern (Kanban View)
@version        1.0.0
@description    A modern version of DeltaMath, which also happens to be a Kanban view wow what a surprise! 
@preprocessor   stylus

 -- AUTHOR STUFF --
@namespace      Freeplay
@author         Freeplay (https://freeplay.codeberg.page/)
@homepageURL    https://codeberg.org/Freeplay/UserStyles
@supportURL     https://codeberg.org/Freeplay/UserStyles/issues


==/UserStyle== */

@-moz-document domain("deltamath.com") {
	:root {
		--easo-out: cubic-bezier(0, 0.99, 0, 1);
	}
	@keyframes fadeUp {
		from { transform: translateY(10px); filter: opacity(0) }
	}
	@keyframes fadeUpBig {
		from { transform: translateY(100px); filter: opacity(0) }
	}
	@keyframes slideLeft {
		from { transform: translateX(20px); filter: opacity(0) }
	}
	@keyframes fadeIn {
		from { opacity: 0 }
	}
	@keyframes fadeOut {
		to { opacity: 0 }
	}
	body {
		// margin: 0 !important;
		// overflow-y: scroll;
		scrollbar-width: thin;
		&::after {
			content: unset !important;
		}
	}
	student-navbar {
		display: block;
		margin-bottom: 0 !important;
		max-height: 72px !important;
		overflow: hidden;
	}

	.navbar {
		border-radius: 0;
		padding-left: 10px;
		min-height: 50px;
		max-height: 60px;
		background: none !important;
		html:not([data-darkreader-mode="dynamic"]) & {			
			* {
				color: #333 !important;
				// border: 0 !important;
				border-radius: 8px !important;
				transition: border .2s;
				&:not(.caret) {
					// border-color: rgba(100,100,100,1) !important;
					border: 0 !important;
				}
				
			}
			.fa-calculator {
				transform: scale(.9);
			}
			.calculator-brand {
				transform: translateY(0%);
				// transform: none !important;
			}
		}
		
		box-shadow: 0 0 12px rgba(0,0,0,0.1);
		// border-bottom: 1px solid rgba(0,0,0,0.1);
		z-index: 10;
		
		.btn-primary {
			background: none !important;
		}
		.navbar-right, .navbar-brand {
			display: flex;
			height: 48px;
			padding-top: 0;
			padding-bottom: 0;
			align-items: center;
		}
		li {
			display: flex;
			align-items: center;
			padding: 0 !important;
			margin-left: 0px !important;
			a {
				padding: 0;
				height: 100%;
				display: flex;
				align-items: center;
				top: unset !important;
			}
			& > a {
				padding: 0 15px !important;
			}
			& > span {
				margin: 0 15px !important;
			}
		}
		.calculator-switch {
			height: 40px;
		}
		.hidden-xs {
			min-height: 100% !important;
			display: flex;
			align-items: center;
			span {
				top: unset;
			}
		}
		#logout-anchor {
			padding-right: 30px !important;
			i {
				top: unset;
				margin: 0 !important;
			}
		}
		
	}
	.main {
		padding-right: 0;
		padding-left: 0;
	}
    app-root, student, .container-fluid, student-main {
        background-color: inherit;
    }
	student-main {
		height: calc(100vh - 60px);
	}
	#student-assignments {
		display: flex;
		overflow-x: auto;
		overflow-y: hidden;
		margin-top: -20px;
		margin-bottom: -100px;
		// padding: 0 20px;
		max-height: calc(100vh - 52px);
        height: calc(100vh - 52px);
		box-sizing: border-box !important;
        background-color: inherit;
		width: max-content !important;
		max-width: 100%;
		// margin-left: auto;
		// margin-right: auto;
		@media only screen and (max-width: 1000px) {
			scroll-behavior: smooth;
			scroll-snap-type: x mandatory;
			&::before, &::after {
				content: "";
				display: block;
				min-width: 50vw;
			}
			.student-page-div {
				padding: 0 20px !important;
				box-sizing: border-box !important;
			}
		}
		@media only screen and (min-width: 1000px) {
			.student-page-div {
				&:hover, &:focus-within {
					scrollbar-color: rgba(100,100,100,0.5) transparent;
				}
				&:first-child {
					padding-left: 28px;
				}
				&:last-child {
					padding-right: 28px;
				}
			}
		}
		
		.student-page-div {
			max-width: 100vw !important;
			flex: 999999 0 425px;
			padding: 0 8px;
			height: calc(100vh - 40px);
            height: 100%;
            max-height: 100%;
			overflow: hidden scroll;
            scrollbar-width: thin;
			scrollbar-color: transparent transparent;
			box-sizing: content-box;
			background-color: inherit;
			scroll-snap-align: center;
			display: flex;
			flex-direction: column;
			
			transition: scrollbar-color .2s;
			
			for row in (1..5) {
				&:nth-child({row}) {
					animation: slideLeft var(--easo-out) 1s .04s * row backwards;
				}
			}
			
			&::before {
				content: "";
				position: sticky;
				min-height: 20px;
				margin-top: -40px;
				margin-bottom: 20px;
				top: 20px;
				box-shadow: 0 6px 12px -8px black;
				z-index: 4;
			}
			h3 {
                position: sticky;
                top: 0px;
				order: -1;
                z-index: 5;
                background-color: inherit;
				border: 0;
                margin: 0 -10px !important;
                // margin-bottom: 20px !important;
				margin-top: 10px !important;
				padding: 14px 20px !important;
				padding-bottom: 6px !important;
                font-size: 1.2em;
                font-weight: 600;
				// transform: translateY(-20px);
                // &::before {
                //     content: "";
                //     position: absolute;
                //     inset: 0 12px;
                //     border-bottom: dashed 1px;
                //     box-shadow: 0 8px 8px -8px currentColor;
                //     opacity: .2;
                // }
				// &::before {
				// 	content: "";
				// 	min-height: 20px;
				// 	display: block;
				// 	margin-top: -20px;
				// 	box-shadow: 0 0 8px rgba(0,0,0,0.2);
				// 	position: sticky;
				// 	top: 30px;
				// }
			}
			.row {
				margin: 0;
				.col-sm-10 {
					width: 100%;
					margin: 0;
					padding: 0 10px;
					min-height: unset !important;
					float: unset !important;
                }
				.panel-heading, .list-group-item {
                    display: flex;
				}
				&:last-child {
					min-height: 40px !important;
				}
			}
            .panel {
                border-radius: 8px !important;
                overflow: hidden;
				// border: 0;
				box-shadow: 0 8px 24px rgba(0,0,0,0.1);
				transition: box-shadow .2s, transform .2s;
				.panel-heading {
					z-index: 2;
					&::after {
						content: "";
						position: absolute;
						inset: 0;
						background: linear-gradient(25deg, transparent, rgba(0,0,255,.3));
						// z-index: -1;
						transition: opacity .2s;
					}
					span {
						z-index: 2;
					}
				}
				@keyframes zoom {
					// from { filter: opacity(.8); transform: translateY(-40px) }

				}
				.panel-body {
					animation zoom .4s;
					
				}
				&:hover, &:focus-within, &:focus {
					box-shadow: 0 8px 24px rgba(0,0,0,0.2);
					transform: translateY(-1px);
					.panel-heading::after {
						opacity: .5;
					}

				}
				&:active {
					transform: none !important;
				}
				
				.list-group-item {
					.fa {
						width: 15px;
						left: -4px;
						margin-right: -2px;
					}
					& > span:first-child {
						z-index: 2;
					}
					a {
						text-decoration: none;
						&::before {
							content: "";
							position: absolute;
							inset: -1px;
							z-index: 2;
							transition: background-color .1s;
						}
						&:hover:before, &:focus:before {
							background-color: rgba(100,100,100,0.07);
						}
					}
				}
				
            }
		}
	}
	
	// Assignment page
	.btn {
		border: 1px solid rgba(100,100,100,.1);
		border-radius: 8px;
		padding: 6px 14px;
		// border: none;
		// box-shadow: 0 0 8px rgba(0,0,0,0.05);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		.glyphicon {
			top: unset;
			&:first-child {
				margin-right: 8px;
			}
			&:last-child:not(:first-child) {
				margin-left: 8px;
			}
		}
	}
	@keyframes scaleIn {
		from { transform: scale(.98); opacity: 0; filter: opacity(0) }
	}
	// @keyframes shadow {
	// 	from { box-shadow: 0 0 24px transparent }
	// 	to { box-shadow: 0 0 24px rgba(0,0,0,0.1) }
	// }
	.paper-shadow {
		box-shadow: 0 0 24px rgba(0,0,0,0.1);
		border: 0 !important;
		border-radius: 4px;
		padding: 20px 40px !important;
		padding-bottom: 40px !important;
		margin-top: 10px;
		animation: fadeUpBig 1s .04s backwards var(--easo-out);
		&.student-progress {
			padding: 15px 40px !important;
			padding-bottom: 19px !important;
			margin-top: 10px;
			margin-bottom: -14px !important;
			animation-delay: 0s;
		}
		.answerArea {
			background: none;
			border-radius: 12px;
			padding-inline: 35px;
			.problem-attempts {
				bottom: 10px;
				right: 10px;
			}
			.mathquill-editable {
				border-radius: 12px;
			}
		}
	}
	.paper-shadow::after, .paper-shadow::before {
		content: unset;
		opacity: .2 !important;
	}
	problem, .main.container-fluid:first-of-type {
		&::after {
			all: unset;
			content: "";
			position: absolute;
			inset: 0;
			top: 50px;
			background-color: rgba(0,0,0,0.02);
			// background-color: rgba(0,0,0,0.5);
			animation: fadeIn .4s;
			pointer-events: none;
			
			z-index: -1;
		}
		&.main::after {
			animation: fadeOut .4s forwards;
			z-index: 10;
		}
	}
	.loading-spinner {
		animation: fadeIn 2s backwards;
	}
	
	.keyboard-footer {
		min-width: 550px !important;
		width: auto !important;
		right: 0;
		margin: 20px;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 4px 18px rgba(0,0,0,0.1);
		padding-bottom: 8px;
		* {
			border-color: rgba(100,100,100,0.1) !important;
		}
		.dm-keyboard-background {
			background-color: white;
		}
		button {
			
		}
	}
	footer {
		// display: none;
	}
}


@-moz-document url-prefix("https://www.deltamath.com/app/student") {
	footer.footer {
		display: none !important;
	}
	
}

Reviews

No reviews yet.