Dark Mode for Milltime time registration cloud app
Milltime Dark Mode by AndersSahlin
Mirrored from https://raw.githubusercontent.com/AndersSahlin/milltime-dark/main/milltime-dark.user.css
Details
AuthorAndersSahlin
LicenseNo License
Categorymillnet.cloud
Created
Updated
Size14 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Milltime Dark Mode
@namespace github.com/openstyles/stylus
@version 1.0.4
@description Dark Mode for Milltime time registration cloud app
@author AndersRoos
@homepageURL https://github.com/AndersSahlin/milltime-dark/
@supportURL https://github.com/AndersSahlin/milltime-dark/
==/UserStyle== */
@-moz-document domain("millnet.cloud") {
/* Dark Theme colors */
:root {
--main-bg-color: hsl(0, 0%, 15%);
--secondary-bg-color: hsl(0, 0%, 20%);
--muted-bg-color: hsl(0, 0%, 28%);
--muted2-bg-color: hsl(0, 0%, 25%);
--muted3-bg-color: hsl(0, 0%, 36%);
--main-text-color: hsl(210, 9%, 91.5%);
--muted-text-color: hsl(210, 9%, 51.5%);
--highlight-text-color: hsl(0, 0%, 15%);
--danger-color: hsl(1, 75%, 70%);
--success-color: hsl(105, 28%, 40%);
--success2-color: hsl(105, 50%, 28%);
--main-theme-color: hsl(258 75% 70% / 1);
--secondary-theme-color: hsl(257.14deg 63.64% 40.98%);
--muted-theme-color: hsl(256, 35%, 30%);
--muted2-theme-color: hsl(256, 30%, 40%);
--muted3-theme-color: hsl(256, 30%, 50%);
--main-border-color: hsl(0, 0%, 50%);
--secondary-border-color: hsl(0, 0%, 40%);
}
/* Main background */
html,
body,
#root {
background-color: var(--main-bg-color) !important;
}
/* Text */
.MuiTypography-root:not([style*="background-color: rgb(238, 238, 238)"]) {
color: var(--main-text-color) !important;
& [class$='-shortCut'] {
background-color: var(--muted2-theme-color) !important;
}
}
/* highlighted time */
.unfulfilled > :last-of-type {
color: var(--highlight-text-color) !important;
}
/* Buttons */
.MuiButtonBase-root {
color: var(--main-text-color) !important;
&:hover {
background-color: var(--muted-bg-color) !important;
}
&.MuiButton-outlinedPrimary {
color: var(--main-theme-color) !important;
border-color: var(--main-theme-color) !important;
background-color: unset !important;
&:hover {
background-color: var(--main-theme-color) !important;
}
}
&.MuiButton-containedPrimary {
background-color: var(--muted2-theme-color) !important;
&:hover {
background-color: var(--main-theme-color) !important;
}
}
& .MuiSvgIcon-colorPrimary,
& [data-testid="SwapHorizTwoToneIcon"],
& [style*='color: white']{
color: var(--main-theme-color) !important;
}
/* Icons in buttons */
& .MuiSvgIcon-colorAction,
& .MuiListItemIcon-root,
& [class$='timerButton'],
& [class$='listIcon'] {
color: var(--main-text-color) !important;
}
/* Date picker */
&.MuiPickersDay-root {
background-color: var(--muted-bg-color) !important;
&.Mui-selected{
background-color: var(--muted2-theme-color) !important;
}
}
}
/* Slider buttons */
.MuiBox-root:has(>button[data-cy^="Sliderbutton-"]) {
border-color: var(--main-border-color) !important;
}
button[data-cy^="Sliderbutton-"] {
background-color: var(--secondary-bg-color) !important;
/* Active */
&[class*='true'] {
background-color: var(--muted2-theme-color) !important;
border-color: var(--muted2-theme-color) !important;
}
&:hover {
background-color: var(--main-theme-color) !important;
border-color: var(--main-theme-color) !important;
}
}
/* Check icons */
svg[data-testid="CheckIcon"] {
background-color: var(--main-text-color) !important;
color: var(--success-color) !important;
}
/* Button icons with primary color */
.MuiSvgIcon-root[data-testid="CalendarTodayIcon"],
.MuiSvgIcon-root[data-testid="LanguageIcon"] {
color: var(--main-theme-color) !important;
}
/* Unchecked Star icon */
.MuiSvgIcon-root.mui-18rj5x9:not(.Favorite) {
color: transparent !important;
}
.MuiStack-root {
& [class$='-button'] {
background-color: var(--muted-bg-color) !important;
& svg {
color: var(--main-theme-color) !important;
}
}
}
/* Notification lists */
.simplebar-content {
& > .MuiBox-root:hover {
background-color: var(--muted-bg-color) !important;
}
}
/* Inputs and form controls */
.MuiFormControl-root {
& label,
legend {
color: var(--main-text-color) !important;
&.Mui-focused {
color: var(--main-theme-color) !important;
}
&.Mui-disabled {
color: var(--muted-text-color) !important;
}
}
& .MuiRadio-root {
&.Mui-checked {
color: var(--main-theme-color) !important;
}
}
}
.MuiInputBase-root {
color: var(--main-text-color) !important;
&::after {
border-color: var(--main-theme-color) !important;
}
/* Search bar */
&.mui-5mu5w7 {
background-color: var(--muted2-bg-color) !important;
}
& .Mui-disabled {
-webkit-text-fill-color: var(--muted-text-color) !important;
}
}
/* Grid */
.MuiDataGrid-row {
&.Mui-selected {
background-color: var(--muted3-bg-color) !important;
}
&:hover:not(.Mui-selected) {
background-color: var(--muted2-bg-color) !important;
}
}
/* Grid table headers */
.MuiDataGrid-columnHeaderTitle {
color: var(--main-text-color) !important;
}
/* Reset background on certain container elements */
.MuiBox-root[role="tabpanel"],
.MuiBackdrop-root,
.mui-1gmeyyl,
.mui-1jmej02,
.mui-1jdkdd7 {
background-color: unset !important;
}
/* Block elements on Expenses, Drive Log */
.MuiBox-root.mui-eecgk {
background-color: var(--secondary-bg-color) !important;
& .mui-mj6r4u {
background-color: var(--muted-bg-color) !important;
}
}
/* Dialog */
.MuiDialog-paper,
.MuiPaper-root {
background-color: var(--secondary-bg-color) !important;
}
/* Login container */
.mui-1hwtvfg .MuiPaper-root {
background-color: var(--main-bg-color) !important;
}
/* AppBar */
.MuiAppBar-root {
background-color: var(--secondary-bg-color) !important;
}
/* Toolbar with name and sign-out link */
.MuiAppBar-root > .MuiToolbar-root > .MuiBox-root:first-child {
background: unset !important;
background-color: var(--main-bg-color) !important;
}
/* Customer logo */
.MuiStack-root > img {
filter: invert(100%) !important;
}
/* Toolbar buttons */
.MuiBox-root[class*="-menubuttonselected"],
a[class*="-menubuttonselected"] {
background-color: var(--secondary-theme-color) !important;
}
/* My Pages */
/* Name header*/
.mui-1r6vvfm {
background-color: var(--muted-bg-color) !important;
}
/* Buttons */
.mui-pt3im4 {
border-color: var(--main-border-color) !important;
}
/* Tabs */
/* Tab header */
.MuiTabs-root {
background-color: var(--secondary-bg-color) !important;
color: var(--main-text-color) !important;
}
/* Active tab */
.MuiTabs-root .MuiTab-textColorPrimary.Mui-selected {
color: var(--main-theme-color) !important;
background-color: var(--secondary-bg-color) !important;
font-weight: bold !important;
}
.MuiTab-root:hover {
background-color: var(--muted-bg-color) !important;
}
/* Active tab indicator */
.MuiTabs-root .MuiTabs-indicator {
background-color: var(--main-theme-color) !important;
}
/* Divider */
.MuiDivider-root.MuiDivider-fullWidth {
border-color: var(--main-border-color) !important;
}
/* Collapse left panel button */
.MuiIconButton-root[style="float: left; align-self: center; background-color: rgb(255, 255, 255); border: 1px solid rgb(238, 238, 238); left: -6px;"],
.MuiIconButton-root[style="float: right; align-self: center; background-color: rgb(255, 255, 255); border: 1px solid rgb(238, 238, 238);"] {
color: var(--main-text-color) !important;
background-color: var(--muted2-theme-color) !important;
&:hover {
background-color: var(--main-theme-color) !important;
}
}
/* Time Table */
/* Table cells */
td.MuiTableCell-root {
background-color: unset !important;
}
/* Table headers */
.MuiTableRow-head {
background-color: var(--secondary-bg-color) !important;
}
/* Table footers */
.MuiTableFooter-root {
background-color: var(--secondary-bg-color) !important;
}
/* Activity rows (odd and even) */
.MillTableRow.ActivityRow:nth-of-type(2n+1) {
background-color: var(--muted-bg-color) !important;
}
.MillTableRow.ActivityRow:nth-of-type(2n) {
background-color: var(--muted2-bg-color) !important;
}
/* Project row */
.RegTable.WeekPlan {
background-color: var(--secondary-bg-color) !important;
}
/* Locked table cells */
td.MuiTableCell-root.Locked {
background-color: var(--muted3-bg-color) !important;
}
/* Time sheet cell */
.WeekViewCell {
color: var(--main-text-color) !important;
&.registration:hover {
background...