Dark theme for usos, WIP, still missing few pieces
Usos dark theme by ArkaNN3
Details
AuthorArkaNN3
LicenseNo License
Categoryusosweb.pbs.edu.pl
Created
Updated
Size9.0 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
/* ==UserStyle==
@name usosweb.pbs.edu.pl - 9/28/2023, 1:21:29 PM
@namespace github.com/openstyles/stylus
@version 1.0.0
@description A new userstyle
@author Me
==/UserStyle== */
@-moz-document domain("usosweb.pbs.edu.pl") {
/* Insert code here... */
:root {
--primary: #232327;
--on-primary: #232327;
--secondary: #232327;
--secondary-variant: #f79d52;
--background: #232327;
--on-background: #d9d9d9;
--background-secondary: #2f2f33;
--on-background-secondary: #fff;
--font-color: #fff;
--grey: #4d4d4d;
--border: #282829;
--ok-status: #438600;
--error: #963030;
--module-link-tile-text-content-line-height: 1;
}
h1 {
color: var(--font-color);
font-size: 1.375rem;
text-align: left;
font-weight: 500;
line-height: 1.15;
margin: 0 0 1.5rem 0;
}
h2 {
color: var(--font-color);
font-size: 1.375rem;
text-align: left;
font-weight: normal;
line-height: 1.15;
margin: 2rem 0 0.75rem 0;
}
:focus {
outline: 1px solid currentColor;
outline-offset: 2px;
}
:focus-visible {
outline: 1px solid currentColor;
outline-offset: 2px;
}
:focus:not(:focus-visible) {
outline: none;
}
menu-top:focus,
menu-left:focus,
[slot="pageBody"]:focus {
outline: none;
}
/* topMenu */
menu-top-item:focus {
outline-offset: -8px;
}
/* leftMenu */
menu-left ul,
menu-left li {
margin: 0;
padding: 0;
list-style: outside none none;
}
menu-left a:focus {
outline-offset: 0;
}
menu-left > ul > li {
margin: 25px 0 0 0;
}
menu-left > ul > li li {
margin: 0 0 0 0
}
menu-left > ul > li li li {
margin: 0 0 0 11px
}
menu-left > ul > li > :is(a, span) {
background: none !important;
padding: 0;
text-transform: uppercase;
}
menu-left li :is(a, span) {
display: inline-block;
padding: 0 0 0 1.25rem;
color: var(--font-color);
text-decoration: none;
text-transform: lowercase;
outline: none;
}
menu-left li li :is(a, span) {
margin-left: 0.5rem;
background-size: 1rem;
}
menu-left li li li :is(a, span) {
background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'><circle%20cx='10'%20cy='10'%20r='3'%20stroke='rgba(166,41,41)'%20stroke- width='0'%20fill='rgba(166,41,41)'></circle></svg>");
}
menu-left li :is(a,
span).dynamic {
text-transform: none;
}
menu-left li a:visited,
menu-left li a:active {
color: var(--font-color);
}
menu-left li a:hover,
menu-left li a:focus {
color: var(--font-color);
text-decoration: underline;
}
menu-left li :is(a,
span).selected {
font-weight: bold;
}
menu-left li :is(a,
span).disabled {
color: var(--font-color);
}
/* icons */
span.icon-inline {
font-size: inherit;
}
span.icon-clickable {
font-size: 24px;
padding: 5px;
cursor: pointer;
}
span.icons-hide-underline {
margin-top: -1px;
margin-bottom: -1px;
overflow: hidden;
}
/* usos-frame */
usos-frame > .hide-borders {
margin: 0;
padding: 0;
}
usos-frame > .hide-borders > * {
width: calc(100% + 2px);
margin: -1px -1px;
}
/** radio button */
input[type=radio] {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
color: inherit;
/* normalize because of chrome */
}
input[type=radio]::after {
display: block;
content: '.';
position: relative;
top: 0.125em;
background-color: var(--primary);
width: 1em;
height: 1em;
}
input[type=radio]:disabled::after {
background-color: #AAAAAA;
}
input[type=radio]:disabled + label,
label > input[type=radio]:disabled ~ * {
color: #AAAAAA;
}
/** checkbox */
input[type=checkbox] {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
position: relative;
width: 1.25em;
height: 1em;
color: inherit;
/* normalize because of chrome */
}
input[type=checkbox]::after {
display: block;
content: '.';
position: absolute;
background-color: currentColor;
width: 1.25em;
height: 1.25em;
}
input[type=checkbox]:disabled::after {
background-color: var(--font-color);
}
input[type=checkbox]:disabled + label,
label > input[type=checkbox]:disabled ~ * {
color: #AAAAAA;
}
/** lists */
ul.no-bullets {
padding: 0;
margin: 0;
list-style: none;
}
ul.inlined-list > li {
display: inline;
}
ul.inlined-list > li:not(:last-child)::after {
display: inline-block;
content: ',\00a0';
}
ul.inlined-list.pipe-separated > li:not(:last-child)::after {
content: '\00a0|\00a0';
}
ul.inlined-list.semicolon-separated > li:not(:last-child)::after {
content: ';\00a0';
}
ul.separated > li {
padding: 1rem;
}
ul.separated > li:not(:last-child) {
border-bottom: 1px solid var(--border);
}
ul.separated > li > :first-child {
margin-top: 0;
}
ul.separated > li > :last-child {
margin-bottom: 0;
}
/** tables */
.autoscroll {
overflow-x: auto;
padding: 1px;
margin-bottom: 1.2rem;
position: relative;
}
.autoscroll > * {
margin-bottom: 0.25rem;
}
.local-home-table {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 1rem;
margin-top: -1.5rem;
background: var(--background-secondary);
}
#layout-c22 {
background: var(--background-secondary);
}
#page-body #layout-c22 {
background: var(--background-secondary);
}
td, th,
tr {
background-color: var(--background-secondary) !important;
color: var(--font-color) !important;
}
.note {
color: var(--font-color) !important;
}
body {
background: none;
}
.selector {
background-color: var(--background-secondary) !important;
}
:host #page-body {
width: 80%;
display: block;
background-color: var(--background-secondary) !important;
}
#text ::slotted(p) {
line-height: var(--module-link-tile-text-content-line-height, 1);
color: var(--font-color) !important;
}
:host, #fancybox-wrap, #fancybox-outer, .uwb-white-content, #user-attrs-id, #user-addresses-id, .ui-dialog-content, .ui-dialog .ui-widget .ui-widget-content .ui-corner-all .ui-front .ua-panic-dialog .ui-draggable #ui-widget-content {
background-color: var(--background-secondary) !important;
}
:host a {
color: var(--font-color) !important;
}
#fancybox-content{
border-width: 0px !important;
}
.usos-ui h1 .block {
color: var(--font-color) !important;
}
div.uprefs-summary {
color: var(--font-color) !important;
}
a, #tooltip-content, .uprefs-title, .uprefs-list-item-summary,
p {
color: var(--font-color) !important;
}
h2 {
color: #dbdada !important;
}
usos-frame a[slot="title"],
usos-frame [slot="title"] a {
text-decoration: underline !important;
color: var(--font-color) !important;
}
:host > div:nth-child(2) {
background: linear-gradient(to right, var(--primary) 50px, #959595 50px) !important;
}
#body > ::slotted(*) {
padding: 0px 1rem;
margin: 1rem 0px;
background-color: var(--background-secondary) !important;
}
#selector {
background-color: #373737 !important;
color: var(--font-color) !important;
}
label,
legend {
color: var(--font-color) !important;
}
#user, b, address{
color: var(--font-color) !important;
}
:host div:nth-child(2) {
color: var(--font-color) !important;
}
#icon {
background: var(--font-color) !important;
}
#content #title ::slotted(*) {
color: var(--font-color) !important;
}
input, .wrtext .greenforms select, defaultSkin .mceListBox .mceText {
color: black !important;
}
.ui-widget-content, .ui-dialog.ua-panic-dialog.ua-panic-dialog-grey {
background: var(--background-secondary);
}
}