Skip to content

Smartschool modern by Zendard

Screenshot of Smartschool modern

Details

AuthorZendard

LicenseGNU Public License

Categorysmartschool.be

Created

Updated

Size13 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Custom Smartschool style
with easily editable colors

Notes

To change colors, go inside the document and change the variables in :root

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name           Smartschool modern
@namespace      smartschool.be
@version        1.2.1
@description    Custom Smartschool style
@author         Zendard
==/UserStyle== */
@-moz-document domain("smartschool.be") {
	:root {
		--text: #ffffff;
		--background: #141010;
		--primary: #bc5024;
		--secondary: #431a09;
		--accent: #ff7d4b;
	}

	body,
	#smscMain,
	body.modern-ui,
	.smsc-topnav .notification:hover,
	.smsc-topnav .notification:hover .notification__btn {
		background-color: var(--background);
		color: var(--text);
	}
	
	body,html{
		overflow: auto;
		height: 100%;
		position: relative;
	}

	a,
	.ssLink,
	.news__feed__button__content {
		color: var(--accent);
	}

	a:hover,
	.ssLink:hover,
	.news__feed__button__content:hover {
		color: var(--primary);
	}

	.smsc-topnav .topnav__menu {
		background-color: var(--secondary);
		color: var(--text);
		border: none;
		border-radius: 1.5rem;
	}

	.smsc-topnav .topnav__menuitem,
	.smsc-topnav [data-notifs] .notification__btn,
	.smsc-topnav [data-search] .form-search__filter legend {
		color: var(--text);
		border-radius: 1.5rem;
		border: none;
	}

	.smsc-topnav :not(.topnav__menuitem--no-hover).topnav__menuitem:hover {
		background-color: var(--primary);
	}

	.modern-ui .smsc-topnav input[type="search"].input-search,
	.smsc-topnav input[type="search"].input-search,
	.modern-ui .smsc-topnav input[type="search"].input-search:focus,
	.modern-ui .smsc-topnav select:focus:not(.focus-ring),
	.smsc-topnav input[type="search"].input-search:focus,
	.smsc-topnav select:focus:not(.focus-ring),
	.input-search .focus-visible,
	.smsc-topnav [data-courses] .course-btnbar [type="radio"]:checked + label,
	.smsc-topnav [data-courses] .course-btnbar {
		background-color: var(--background);
		border: none;
		box-shadow: none;
	}

	input {
		background-color: var(--background);
		color: var(--text);
	}

	/*Agenda*/
	
	.gradient_window{
		background: var(--primary);
		border-radius: 2rem;
	}
	
	.wborder.wleftxy,.wborder.wrightxy,.wborder.wbleft,.wborder.wbright{
		display: none;
	}
	
	.gridBlock .agendaGridBlockContentStatus,
	.gridBlockListView .agendaGridBlockContentStatus {
		color: black;
		border-radius: 2rem;
		padding-left: 1.5rem
	}

	.infoContainer {
		background-color: var(--primary);
	}

	.wborder.wcenterxy_r {
		background-color: var(--primary);
	}

	#infoContainerNoteContent {
		background-color: var(--secondary);
		padding: 2rem;
	}

	#infoFormWindow_titlebar {
		background-color: var(--primary);
		background-image: none;
		border-radius: 2rem;
		padding: 1rem;
	}
	
	.tabs,.wborder.wcentery.wbottomy{
		background-image: none;
	}
	
	.smscButton{
		background: blue;
		color: var(--text);
		border-radius: 1rem;
		border: none;
	}
	
	.infoContainerBlock.studentEven,.infoContainerBlock{
		background-color: var(--secondary);
		border-radius: 2rem;
		padding: 2rem;
		background-position: 1rem 1rem;
		margin-bottom: 1rem;
	}
	
	.tabs li{
		background: var(--secondary);
		border-radius: 1rem 1rem 0.1rem 0.1rem;
	}
	.tabs span, .tabs .current span{
		background: none
	}
	
	.tabs li.current{
		background: var(--primary);
		outline: solid 2px var(--secondary);
	}
	
	.gradient_window_content{
		color: var(--text);
	}

	.color_snow_white {
		background-color: var(--secondary);
	}

	.border,
	.border.centery.topy,
	.border.centerxy {
		background-image: none;
	}

	.border.centerxy {
		background-color: var(--secondary);
		border-radius: 3rem;
		padding-top: 2rem;
		border-right: none;
	}

	.navigationContainer .navTitle {
		color: var(--text);
	}

	button,
	input,
	select,
	textarea {
		color: var(--text);
		border-radius: 3rem;
	}
	
	.gridBlock .agendaGridBlockContentLeft .agendaGridBlockContentLeftSubject, .gridBlockListView .agendaGridBlockContentLeft .agendaGridBlockContentLeftSubject{
		text-overflow: ellipsis;
	}

	.navNextInput,
	.navPrevInput {
		background-color: var(--primary);
		margin: 0px;
		padding: 0.3rem;
	}

	.navigationContainer .navPrev,
	.navigationContainer .navNext {
		background-size: 1.4rem;
		margin: 0px;
		margin-right: 0.3rem;
	}

	.navigationContainer .navPrev {
		background-image: url(https://cdn-icons-png.flaticon.com/512/892/892646.png);
	}

	.navigationContainer .navNext {
		background-image: url(https://cdn-icons-png.flaticon.com/512/892/892662.png);
	}

	td[align="left"] {
		display: flex;
		align-items: center;
	}

	.agenda_grid_main .agenda_grid_content .agenda_grid_days .agenda_grid_day_column .gridBlock {
		border-radius: 2rem;
		border: none;
	}

	#agenda_main {
		background-color: var(--background);
	}

	.agendaGridBlockContentLeft {
		margin-left: 1rem;
		width: 100%;
		overflow: hidden;
	}

	.agenda_grid_main .agenda_grid_content .agenda_grid_days .agenda_grid_day_column .gridBlock {
		padding-top: 2px;
		padding-left: 1rem;
	}
	
	.cf{
		position: relative;
	}

	.agendaGridBlockContentRight {
		right: 0px;
		top: 10px;
		position: absolute;
	}

	.agenda_grid_main .agenda_grid_days_header .agenda_grid_header_days .agenda_grid_header_day {
		color: var(--text);
	}

	.border.centery.bottomy {
		background-color: var(--background);
		border: none;
	}

	#menuContainer {
		margin-top: 10vh;
	}

	#menuContainerTotal {
		border-radius: 2rem 0rem 0rem 2rem;
	}

	/*Home*/
	body.modern-ui .homepage__block__top__title h2,
	#homeAgenda .datepicker__navigation__label > h2,
	.student-support-block__item.icon-label .icon-label__text {
		color: var(--text);
	}

	#homeAgenda .datepicker__cell__content:not(.datepicker--bold):hover {
		background-color: var(--secondary);
	}

	/*Berichten*/
    
    svg{
        fill:var(--text) !important;
    }
    
    .tox-tbtn__select-label{
        color:var(--text) !important;
    }
    
    .tox .tox-toolbar, .tox .tox-toolbar__overflow, .tox .tox-toolbar__primary{
        background-color: var(--background) !important;
        padding:0.5rem 1rem !important;
    }
    .tox .tox-menubar + .tox-toolbar, .tox .tox-menubar + .tox-toolbar-overlord .tox-toolbar__primary{
        border-top:none;
    }
    
    .tox:not([dir="rtl"]) .tox-toolbar__group:not(:last-of-type){
        border-right:none;
    }
    
    .tox .tox-mbtn__select-label{
        background:none;
    }
    
    .tox .tox-collection__item-label,.tox .tox-collection__item-accessory{
        color:var(--text);
    }
    
    .tox-collection__item--active{
        border:solid 2px var(--accent) !important;
        border-radius:2rem !important;
        background-color:transparent !important;
    }
    
    .tox .tox-men{
        max-height:60dvh !important;
    }
    
    .tox .tox-sidebar-wrap,.tox .tox-editor-container,.tox .tox-edit-area__iframe{
        background-color:var(--secondary);
    }
    
    .tox .tox-toolbar, .tox .tox-toolbar__overflow, .tox .tox-toolbar__primary{
        background-image:none !important;
    }
    
    .msg_button:hover{
        color:var(--text);
        text-decoration:underline;
    }
    
    .tabmain,.attachtab{
        background-color:var(--secondary);
        border:none;
        border-radius:2rem;
    }
    
    .tabmain{
        padding:1rem;
    }
    
    .smsc-dropzone{
        background-color:var(--primary);
    }
    
    .smsc-dropzone__drag-here{
        color:var(--text);
    }
    
	#folders_parent_td {
		background-color: var(--background);
	}

	.postbox > .postbox_name > .postbox_link:hover,
	.postboxsub > .postbox_name > .postbox_link:hover,
	.postbox_selected > .postbox_name > .postbox_link:hover,
	.postbox > .postbox_name_nodrop > .postbox_link:hover,
	tree-add button.messages__tree__add-button.smsc-linkbutton:hover {
		color: var(--text);
	}

	.postbox_link,
	.postbox_linkh,
	.modern-ui .smsc-title--1,
	.modern-ui .modern-message:not(.modern-message--new):not(.modern-message--selected),
	.msg_button {
		color: var(--text);
	}

	.modern-ui .modern-message:hover,
	.modern-ui .modern-message--selected,
	.modern-ui .modern-message--selected:hover {
		background-color: var(--secondary);
		border-radius: 2rem;
	}

	.modern-ui .modern-message__actions {
		background-color: var(--background);
		box-shadow: none;
		border-radius: 3rem
	}

	.modern-ui .smscButton {
		box-sizing: initial;
		background-color: var(--secondary);
		color: var(--text);
		border: var(--background) solid;
		border-radius: 2rem;
		padding: 8px;
	}

	.modern-ui .smscButton:hover:not([disabled]) {
		box-sizing: initial;
		border: var(--accent) solid;
		background-color: var(--background);
	}

	.toolbar {
		background-color: var(--background);
	}

	#msgcell,
	.msgContent {
		background-color: var(--background);
	}

	.modern-ui .msgHeaderVal--sender,
	.attachmentList__list .attachment__title__label {
		color: var(--text);
	}

	.attachmentList__list .attachment {
		background-color: var(--secondary);
		border-radius: 2rem;
		padding: 1rem;
	}

	.msg_topleft,
	.msg_topright,
	.msg_top,
	.msg_left,
	.msg_right,
	.msg_bottomleft,
	.msg_bottom,
	.msg_bottomright,
	.tox-statusbar {
		visibility: hidden;
	}

	.accswitchco {
		background-image: none;
		color: var(--text);
		background-color: var(--secondary);
		border-radius: 0.5rem 2rem 0rem 0rem;
	}

	.accswitchmain {
		background-image: none;
		color: var(--text);
		background-color: var(--secondary);
		border-radius: 2rem 0.5rem 0rem 0rem;
	}

	.mbselected {
		background-color: var(--accent);
	}

	.btn.btn--primary,
	.btn.btn {
		background-color: var(--primary);
		border: none;
		border-radius: 2rem;
	}

	.msg_bg,
	.searchInputField,
	.compose_editor,
	.tox-tinymce,
	.tox .tox-menubar,
	.tox-editor-header,
	.tox-editor-container,
	.tox-tinymce,
	.tox .tox-toolbar,
	.tox .tox-toolbar__overflow,
	.tox .tox-toolbar__primary,
	.tox:not(.tox-tinymce-inline) .tox-editor-header {
		background-image: none;
		background-color: var(--secondary);
		border-radius: 2rem;
		padding: 1rem;
		color: var(--text);
		border: none;
	}

	.composeUsers,
	.compose_subject,
	.subjectInput {
		background-color: var(--background);
		color: var(--text);
		border: none;
		border-radius: 2rem;
	}

	.comp_to...

Reviews

No reviews yet.