Skip to content

Instantly share code, notes, and snippets.

@jrr6

jrr6/PiazzaDarker.user.js

Last active August 25, 2021 13:02
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jrr6/34c70486271a1d34c8553e1c7c1d8153 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jrr6/34c70486271a1d34c8553e1c7c1d8153 to your computer and use it in GitHub Desktop.
Download ZIP
Modified version of the Piazza Darker user style theme.
Raw
PiazzaDarker.user.js
// ==UserScript==
// @name Piazza Darker
// @namespace http://userstyles.org
// @description Dark theme for piazza.com
// @author originally by enovid, updated by jrr6
// @homepage https://userstyles.org/styles/142015
// @include http://piazza.com/*
// @include https://piazza.com/*
// @include http://*.piazza.com/*
// @include https://*.piazza.com/*
// @run-at document-start
// @version 0.20200130025227.1
// @downloadURL https://gist.github.com/jrr6/34c70486271a1d34c8553e1c7c1d8153/raw/a1ad20ee35e42c7d63d3b91944819109b2de4980/PiazzaDarker.user.js
// @updateURL https://gist.github.com/jrr6/34c70486271a1d34c8553e1c7c1d8153/raw/a1ad20ee35e42c7d63d3b91944819109b2de4980/PiazzaDarker.user.js
// ==/UserScript==
(function() {
const css =`
:root {
--text-bg: #36393E;
--text-color: #CCCCCC;
--feed-post-title: #80BBFF;
--page-bg: #1E2124;
--box-accent: #282B30;
--feed-selected: #1E2124;
--updates-icon-text: #ccc;
--comment-top: #2E3136;
--input-label: #A3A3A3;
--comment-compose: #111111;
--updates-icon: #555555;
--instructor-note: #C78626;
--student-icon: #557E54;
--unresolved-color: #ff5c5c;
--icon-width: 16px;
--icon-radius: 3px;
}
body {
font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.page_feed {
background: var(--page-bg);
}
/* Search tips */
.page_feed_filter_feed {
background: var(--page-bg);
border-bottom: 0px;
}
.search_tips table tr:nth-child(2n) {
background: var(--text-bg);
}
/* Main page */
body {
font-size: 15px;
}
#page_main {
top: 32px;
}
#page_main .views {
background: var(--page-bg) !important;
color: var(--updates-icon-text) !important;
}
.homescreen .homescreen_box {
background: #373737 !important;
color: var(--updates-icon-text) !important;
}
.homescreen .homescreen_section_header {
text-shadow: None;
}
/* ADDED FROM HERE TO BEFORE BTN-PRIMARY */
.homescreen .homescreen_section_header i {
color: var(--text-color) !important;
}
.homescreen .caag_notification:link, .homescreen .caag_notification:hover, .homescreen .caag_notification:active, .homescreen .caag_notification:visited {
color: var(--text-color) !important;
}
.btn-primary {
background: var(--box-accent) !important;
color: var(--text-color);
}
.btn {
border-bottom-color: rgba(0, 0, 0, 0.25) !important; /* ADDED */
}
/* Navbar */
.top_bar {
background: var(--page-bg) !important;
color: var(--page-bg);
}
.top_bar .navbar-inner {
background: var(--page-bg) !important;
}
.top_bar .nav.dark_nav {
background: var(--page-bg);
border-right: var(--page-bg);
}
.top_bar .nav > li > a {
text-shadow: None;
color: #777;
}
/* MODIFIED: Why did whoever wrote this want to delete features? */
.top_bar .nav > li .job_link {
/* color: transparent;
visibility: hidden; */
}
.top_bar .nav > li .my_name_wrapper.has_job_link {
margin-top: 0;
}
.top_bar .my_pic .white_border {
border-color: #000;
box-shadow: None;
}
#splitbar {
background: var(--page-bg);
}
/* ADDED FROM HERE TO MAIN CONTENT */
.top_bar_dropdown_wrapper .top_bar_dropdown_menu {
background-color: var(--box-accent) !important;
}
.top_bar_dropdown_wrapper .top_bar_dropdown_menu ul li, .top_bar_dropdown_wrapper .top_bar_dropdown_menu ul li a, .top_bar_dropdown_wrapper .top_bar_dropdown_menu .top_bar_dropdown_actions_wrapper .top_bar_dropdown_actions {
color: var(--text-color) !important;
}
.top_bar_dropdown_wrapper .top_bar_dropdown_menu .top_bar_dropdown_actions_wrapper {
background-color: var(--page-bg) !important;
}
#my_class_menu > div:first-of-type {
background: var(--box-accent) !important;
}
.post_region_box .post_region_arrow_dropdown .dropdown-menu {
background: var(--box-accent) !important;
}
.post_region_box .post_region_arrow_dropdown .dropdown-menu li, .post_region_box .post_region_arrow_dropdown .dropdown-menu li a {
color: var(--text-color) !important;
}
/* Main content post*/
.post_region_box {
background-color: var(--text-bg) !important; /* Post body bg color */
box-shadow: None;
margin: 10px;
}
.post_region_box .post_region_content .post_region_text {
color: var(--text-color) !important; /* Post body text color */
}
.post_region_box .post_region_header .post_icon {
visibility: hidden; /* Note Icon*/
}
.post_region_box .post_region_header .post_title {
color: #aaa !important;
}
.download_on_app_store_popup_container { /* ADDED */
background: none !important;
}
/* Discussions */
.post_region_box .post_region_content .clarifying_discussion {
background-color: var(--comment-top) !important;
}
.post_region_box .discussion_replies {
background-color: var(--text-bg) !important;
}
.post_region_box .post_region_actions {
background-color: var(--box-accent) !important;
border-top: None;
}
.post_region_box .post_region_content .compose_answer {
border: 1px solid var(--comment-top);
padding: 5px 10px;
color: #bbb;
background: var(--comment-top);
}
.post_region_box .post_region_actions .post_action.btn-primary {
color: var(--updates-icon-text);
}
.post_region_box .resolve_unresolve_actions {
background: var(--text-bg);
color: var(--text-color);
}
.page_feed .feed_item.has_unresolved_followups .content .messages .unresolved_followups {
color: var(--unresolved-color);
}
.post_region_box .post_region_header {
background: var(--box-accent);
border-bottom: None;
}
.post_region_box .post_region_header .post_view_count {
color: var(--text-color);
}
.post_region_box .compose_reply {
color: var(--input-label);
border: 1px solid var(--page-bg);
background: var(--text-bg);
}
.post_region_box .compose_discussion {
color: var(--input-label);
border: 1px solid var(--box-accent);
background: var(--comment-compose);
}
.post_region_box .post_region_content .clarifying_discussion .account_image_container .white_border {
border-color: #000;
box-shadow: None;
}
.post_region_box .post_region_content h1,
.post_region_box .post_region_content h2,
.post_region_box .post_region_content h3,
.post_region_box .post_region_content h4,
.post_region_box .post_region_content h5,
.post_region_box .post_region_content h6,
.post_region_box .post_region_content h7 {
color: var(--text-color) !important;
}
.special_mentions_visibility {
background: var(--box-accent);
border: 1px solid var(--box-accent);
}
/* ADDED from here to histoy slider */
.page_feed .feed_item .feed_item_dropdown_selector ul {
background: var(--box-accent) !important;
color: var(--text-color) !important;
}
.page_feed .feed_item .feed_item_dropdown_selector li.disabled {
background: var(--text-bg) !important;
border-bottom: 2px double var(--input-label) !important;
}
.page_feed .feed_item .feed_item_dropdown_selector li {
border-bottom: 1px solid var(--input-label) !important;
}
.page_feed .feed_item .feed_item_dropdown_selector li:hover {
background: var(--comment-compose) !important;
}
.page_feed .feed_item:hover .feed_item_dropdown_selector .feed_item_dropdown_arrow, .page_feed .feed_item:hover .feed_item_dropdown_selector .feed_item_dropdown_arrow:hover {
background: #5a96c1 !important;
text-shadow: none !important;
}
/* History Slider */
/* CHANGED: The theme inexplicably hides history slider—removed this */
#history_slider #question_history_slider_wrapper {
border-bottom: 1px solid var(--box-accent);
}
#history_slider #question_history_slider_wrapper .question_history_slider_label {
color: var(--text-color); /* FIXED */
}
#history_slider #question_history_slider_wrapper .question_history_slider_label {
text-shadow: None;
}
.slider-tick {
background-color: transparent;
border-right: None;
}
/* ADDED to user name */
#history_slider .slider_wrapper .slider-selection, .slider.slider-horizontal .slider-track {
background: var(--comment-top) !important;
}
#history_slider .slider_wrapper .slider-handle, .slider.slider-horizontal .slider-handle {
background: var(--input-label) !important;
}
/* user name */
.post_region_box .post_region_content .clarifying_discussion .discussion_content .discussion_poster {
color: var(--input-label) !important;
}
/* Header */
.dropdown {
opacity: 0.75 !important; /* MODIFIED */
}
.dropdown:hover {
opacity: 1.0 !important;
}
.top_bar .career_notification, .top_bar .top_bar_notification {
opacity: 0.4 !important;
}
/* ADDED to loading */
.top_bar .nav li.dropdown > .dropdown-toggle .caret {
border-top-color: #777;
border-bottom-color: #777;
opacity: 0.75 !important;
transition: 0.4s;
}
.top_bar .nav li.dropdown:hover > .dropdown-toggle .caret {
opacity: 1.0;
border-top-color: white;
border-bottom-color: white;
}
/* Loading */
.blockUI {
background-color: var(--text-bg) !important;
opacity: 0.7 !important;
}
/* Sidebar */
.page_feed {
border-right: 1px solid var(--page-bg);
}
.page_feed .page_feed_tool_bar {
color: #707d8d;
box-shadow: inset 0 1px 0 var(--page-bg);
border-bottom: 1px solid var(--page-bg);
}
/* ADDED */
.page_feed .page_feed_tool_bar .page_feed_options {
background: transparent url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20width%3D%2214%22%20height%3D%2214%22%3E%20%3Cdefs%3E%3Cpath%20id%3D%22a%22%20d%3D%22m14%2C9.3l0%2C-2.57l-1.575%2C-0.264c-0.117%2C-0.44%20-0.292%2C-0.848%20-0.496%2C-1.2l0.93%2C-1.285l-1.81%2C-1.84l-1.31%2C0.908c-0.38%2C-0.205%20-0.79%2C-0.38%20-1.196%2C-0.497l-0.259%2C-1.552l-2.568%2C0l-0.263%2C1.578c-0.437%2C0.117%20-0.816%2C0.293%20-1.196%2C0.497l-1.282%2C-0.905l-1.838%2C1.81l0.934%2C1.287c-0.2%2C0.38%20-0.376%2C0.79%20-0.493%2C1.228l-1.578%2C0.235l0%2C2.57l1.575%2C0.264c0.117%2C0.438%200.292%2C0.818%200.496%2C1.198l-0.93%2C1.315l1.809%2C1.813l1.312%2C-0.938c0.38%2C0.205%200.787%2C0.38%201.224%2C0.497l0.26%2C1.551l2.566%2C0l0.263%2C-1.578c0.408%2C-0.117%200.817%2C-0.293%201.196%2C-0.497l1.315%2C0.935l1.81%2C-1.812l-0.935%2C-1.315c0.203%2C-0.38%200.38%2C-0.76%200.495%2C-1.2l1.544%2C-0.23l0%2C-0.003zm-7%2C1.407c-1.488%2C0%20-2.683%2C-1.2%20-2.683%2C-2.69s1.225%2C-2.69%202.683%2C-2.69c1.458%2C0%202.683%2C1.198%202.683%2C2.69c0%2C1.49%20-1.195%2C2.688%20-2.683%2C2.688l0%2C0.002z%22/%3E%20%3C/defs%3E%20%3Cg%3E%3Ctitle%3ELayer%201%3C/title%3E%3Cuse%20x%3D%220%22%20y%3D%22-0.93333%22%20id%3D%22svg_1%22%20fill%3D%22%23707d8d%22%20xlink%3Ahref%3D%22%23a%22/%3E%20%3C/g%3E%3C/svg%3E') no-repeat center !important;
}
.page_feed .feed_item {
background-color: var(--text-bg);
border-bottom: 1px solid #171F29 !important;
}
.page_feed .feed_item.unanswered {
background-color: #321313;
box-shadow: none !important;
text-shadow: none !important;
border-bottom: 1px solid #2A2A2A !important;
}
.page_feed .feed_item.selected, .page_feed .feed_item.unanswered.selected { /* MODIFIED to include .unanswered.selected */
background-color: var(--feed-selected);
}
.page_feed .page_feed_bucket_header {
background: var(--page-bg) !important;
box-shadow: none !important;
text-shadow: none !important;
color: #777 !important;
border-bottom: 1px solid #2A2A2A !important;
}
.page_feed .feed_item .content .title {
color: var(--feed-post-title) !important;
}
.page_feed .feed_item .metadata .icons .feed_icon {
background: None;
}
.page_feed .feed_item .content .private_icon {
background: var(--box-accent);
color: var(--updates-icon-text);
}
.page_feed .feed_item .content .private_icon .private_icon_indicator.inst_note {
background: var(--instructor-note);
}
.page_feed .feed_item.unread .unread_indicator { /* ADDED */
height: 10px !important;
width: 10px !important;
background: var(--feed-post-title) !important;
border-radius: 100%;
margin: auto;
margin-left: 6px;
}
.homescreen .homescreen_box .stat, .fixed_50 { /* ADDED */
color: var(--updates-icon-text) !important;
}
/* Instructor note icon */
.page_feed .feed_item.has_ir .metadata .icons .ir_icon {
background-color: var(--instructor-note);
border-radius: var(--icon-radius);
width: var(--icon-width);
}
/* Note icon */
.page_feed .feed_item.note .metadata .icons .note {
background: var(--updates-icon);
border-radius: var(--icon-radius);
width: var(--icon-width);
}
/* Student response icon */
.page_feed .feed_item.has_sr .metadata .icons .sr_icon {
background: var(--student-icon);
border-radius: var(--icon-radius);
width: var(--icon-width);
}
/* Endorsed SR icon (ADDED) */
.page_feed .feed_item.has_sr.instructor_endorsed_sr .metadata .icons .sr_icon {
/* <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path style="fill:#ccc" d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></svg> */
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBzdHlsZT0iZmlsbDojY2NjIiBkPSJNMjAuMjg1IDJsLTExLjI4NSAxMS41NjctNS4yODYtNS4wMTEtMy43MTQgMy43MTYgOSA4LjcyOCAxNS0xNS4yODV6Ii8+PC9zdmc+Cg==);
background-position: center;
background-size: contain;
}
.page_feed .page_feed_search_wrapper {
background-color: var(--page-bg) !important;
}
/* Searchbar */
.page_feed .page_feed_search_wrapper .search_bar {
box-shadow: none !important;
background: var(--text-bg) !important;
border: none;
}
.page_feed .page_feed_search_wrapper .search_bar input[type="text"] {
background: var(--text-bg);
color: var(--text-color);
}
.page_feed .feed_item .metadata .icons .new_activity_icon {
background: var(--updates-icon);
color: var(--updates-icon-text);
}
/* Footer */
.dashboard_toolbar {
background: var(--page-bg);
box-shadow: inset 0 1px 0 var(--page-bg);
text-shadow: none !important;
}
#special_mentions .stats_item .content {
box-shadow: none !important;
background: #282828 !important;
color: #666 !important;
text-shadow: none !important;
}
#special_mentions h3 {
text-shadow: none !important;
}
#popular_tags_bar .popular_tag_number {
background: var(--updates-icon);
color: var(--updates-icon-text);
}
#popular_tags_bar {
height: 26px;
}
#popular_tags_bar .folder_icon { /* ADDED */
/* TODO: make SVG fill color change based on var(--feed-post-title) (could use a -webkit-mask-image and background-color?) */
background: transparent url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22m4.5%2034.74c-2.4852%200.000248-4.4998%202.0148-4.5%204.5v177.53c0.00024848%202.4852%202.0148%204.4998%204.5%204.5l247-0.002c2.4852-0.00025%204.4998-2.0148%204.5-4.5v-160.27c-0.00025-2.4852-2.0148-4.4998-4.5-4.5h-150.23l-9.8164-15.197c-0.82878-1.2831-2.2518-2.0582-3.7793-2.0586h-83.172z%22%20fill-rule%3D%22evenodd%22%20fill%3D%22%2372a7cf%22/%3E%3C/svg%3E') left top no-repeat !important;
}
/* Trash icon */
.icon.icon-trash.trash-button {
filter: brightness(2);
}
/* "Show All" button */
.UIMessage {
background: var(--text-bg);
color: var(--text-color);
border: none;
}
/* User editing answer text */
.post_region_box .post_region_message_wrapper .post_region_message.warning {
color: var(--unresolved-color);
}
`
if (typeof GM_addStyle !== 'undefined') {
GM_addStyle(css);
} else if (typeof PRO_addStyle !== 'undefined') {
PRO_addStyle(css);
} else if (typeof addStyle !== 'undefined') {
addStyle(css);
} else {
let node = document.createElement('style')
node.type = 'text/css'
node.appendChild(document.createTextNode(css))
let heads = document.getElementsByTagName('head')
if (heads.length > 0) {
heads[0].appendChild(node)
} else {
// no head yet, stick it wherever
document.documentElement.appendChild(node)
}
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment