Skip to content

Instantly share code, notes, and snippets.

@plasticmind

plasticmind/better-lats.css

Last active November 21, 2024 14:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save plasticmind/1f28d5ccec6abf5bfbc15dd8cb94e6a4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save plasticmind/1f28d5ccec6abf5bfbc15dd8cb94e6a4 to your computer and use it in GitHub Desktop.
Download ZIP
Better LATS
Raw
better-lats.css
:root {
/* NYS Primary Blue Ramp (*700) */
--nys-blue-100: #E5EDED;
--nys-blue-200: #AEC0CF;
--nys-blue-300: #7F9BB2;
--nys-blue-400: #5F829F;
--nys-blue-500: #376487;
--nys-blue-600: #1B4E77;
--nys-blue-700: #154973; /* Primary */
--nys-blue-800: #103756;
--nys-blue-900: #0A2134;
/* Error Red */
--red-100: #faebe9;
--red-200: #EFC2BD;
--red-300: #E9AEA8;
--red-400: #D2726A;
--red-500: #BF4641;
--red-600: #B52C2C;
--red-700: #861E1E;
--red-800: #6F1717;
--red-900: #300505;
/* Information Blue */
--blue-100: #E6EEFD;
--blue-200: #B5CCF6;
--blue-300: #9CBBF2;
--blue-400: #3D75DE;
--blue-500: #004DD1;
--blue-600: #003EA7;
--blue-700: #002E7D;
--blue-800: #001F54;
--blue-900: #000F2A;
/* Warn Yellow */
--yellow-100: #FEF0B3;
--yellow-200: #FCE266;
--yellow-300: #FBD833;
--yellow-400: #FACE00;
--yellow-500: #E1B900;
--yellow-600: #C8A500;
--yellow-700: #967C00;
--yellow-800: #645200;
--yellow-900: #322900;
/* Success Green */
--green-100: #E9F1E9;
--green-200: #D2E3D5;
--green-300: #A5C8AB;
--green-400: #78AC82;
--green-500: #4B9158;
--green-600: #1B6929;
--green-700: #155220;
--green-800: #0F3B17;
--green-900: #09230E;
/* Neutral Color Ramp Variables */
--white: #fff;
--neutral-50: #f5f5f5;
--neutral-100: #ededed;
--neutral-200: #c6c6c6;
--neutral-300: #ababab;
--neutral-400: #919191;
--neutral-500: #777777;
--neutral-600: #5e5e5e;
--neutral-700: #474747;
--neutral-800: #303030;
--neutral-900: #1b1b1b;
--black: #000;
--font-size-2xs: 0.75rem; /* 12px */
--font-size-xs: 0.875rem; /* 14px */
--font-size-sm: 1rem; /* 16px */
--font-size-md: 1.125rem;
--font-size-lg: 1.25rem;
--font-size-xl: 1.5rem;
--font-size-2xl: 1.875rem;
--font-size-3xl: 2.25rem;
--font-size-4xl: 3rem;
/* Semantic */
/* For alerts, badges, and other intent-related UI components */
--color-neutral: var(--neutral-100);
--color-neutral-weak: var(--neutral-200);
--color-info: var(--blue-500);
--color-info-weak: var(--blue-200);
--color-warning: var(--yellow-400);
--color-warning-weak: var(--yellow-100);
--color-success: var(--green-500);
--color-success-weak: var(--green-200);
--color-danger: var(--red-500);
--color-danger-weak: var(--red-200);
/* Default NYS brand color, used for buttons. */
--theme-color: var(--nys-blue-700);
--theme-color-weak: var(--nys-blue-100);
--theme-color-accent: var(--yellow-400);
/* Default text color. */
--color-text: var(--neutral-700);
/* Default text color on theme or dark color */
--color-text-on-theme: var(--white);
/* Default text color for hyperlinks. */
--color-text-link: var(--blue-500);
--color-surface: #fff;
}
body {
background: var(--color-surface) !important;
padding-top: 0 !important;
}
.MissingTimeError:not(.k-header){
background: var(--color-warning-weak) !important;
padding: 1.5rem !important;
color: var(--color-text) !important;
text-align: left !important;
}
.k-header {
background: var(--theme-color-weak) !important;
border-radius: 0 !important;
color: var(--color-text) !important;
}
.k-button {
color: var(--color-text-on-theme) !important;
background: var(--theme-color) !important;
border: 0 !important;
border-radius: 4px !important;
}
input[value="Print"] {
display: none !important;
}
.k-button:hover {
background: var(--nys-blue-900) !important;
}
.k-header,
.k-header input {
border: 0 !important;
}
.k-header img {
width: 12px;
height: 12px;
}
.k-grid {
border: 0 !important;
}
.k-widget {
border: 0 !important;
}
.k-grid td {
border: 0 !important;
font-family: monospace;
font-size: var(--font-size-lg) !important;
}
.TimesheetSubTab {
background-color: var(--neutral-50) !important;
color: var(--color-text) !important;
}
.nav-tabs {
border: 0 !important;
border-radius: 0 !important;
}
.nav-tabs > li > a {
border: 0 !important;
border-radius: 0 !important;
}
.nav-tabs > li.active > a {
background-color: var(--theme-color) !important;
color: var(--color-text-on-theme) !important;
font-weight: bold;
}
.
#timesheetTable {
background-color: white !important;
}
.timesheetCell {
font-family: monospace !important;
border-bottom: solid 1px var(--neutral-50) !important;
background: white !important;
}
.timesheetCell > input {
border: solid 1px white !important;
font-size: var(--font-size-lg) !important;
color: var(--color-text) !important;
}
.timesheetCell > input[value="0"]{
color: var(--neutral-400) !important;
}
.k-picker-solid {
background: var(--theme-color-weak) !important;
margin-left: 8px !important;
}
.k-datepicker {
border: 0 !important;
width: auto !important;
max-width: 100px !important;
}
#pickTimesheet button {
font-size: var(--font-size-md) !important;
}
#pickTimesheetDate {
font-family: monospace !important;
font-size: var(--font-size-md) !important;
font-weight: bold !important;
text-align: center !important;
background: var(--theme-color-accent) !important;
color: var(--color-text) !important;
}
td[id^="totalRow"] {
background: white !important;
font-size: var(--font-size-xl) !important;
color: var(--color-danger) !important;
}
.footer {
position: relative !important;
bottom: 0 !important;
background-color: transparent !important;
}
[summary="TDS\ Data"] {
font-family: monospace !important;
}
[summary="TDS\ Data"] [style="background-color\:\#C6E2EE\;"] [colspan="\31 4"] [href="\#"] {
color: var(--theme-color) !important;
font-weight: bold;
display: block;
font-size: 2rem !important;
text-decoration: none !important;
padding: 0 0 0 !important;
}
tr[style^="background-color\:\#C6E2EE\;"] {
background: var(--theme-color-weak) !important;
}
tr[style="background-color\:\#C6E2EE\;"] {
color: var(--nys-blue-400) !important;
font-size: var(--font-size-md);
font-weight: normal !important;
background: #fff !important;
}
tr[style="background-color\:\#C6E2EE\;"] td:first-child {
padding: 3rem 0 0 0 !important;
opacity: 0.5;
}
.k-textbox {
font-family: monospace !important;
background: white !important;
height: 30px !important;
}
[id="ctl00_ContentPlaceHolder1_HeaderDisplay"] tr td:nth-child(4),
[id="ctl00_ContentPlaceHolder1_HeaderDisplay"] tr td:nth-child(5),
[id="ctl00_ContentPlaceHolder1_HeaderDisplay"] tr td:nth-child(11),
[id="ctl00_ContentPlaceHolder1_HeaderDisplay"] tr td:nth-child(12) {
opacity: 0.2 !important;
}
[summary="TDS\ Data"] tr td:nth-child(4) > input,
[summary="TDS\ Data"] tr td:nth-child(5) > input,
[summary="TDS\ Data"] tr td:nth-child(11) > input,
[summary="TDS\ Data"] tr td:nth-child(12) > input {
opacity: 0.2;
}
[id="ctl00_ContentPlaceHolder1_FooterDisplay"] td[align="right"] {
font-family: monospace !important;
font-size: var(--font-size-xl) !important;
color: var(--color-info) !important;
}
.container #frmUpdateTimesheet .col-xs-12 #btnSubmitTimesheet_1 {
border: none !important;
background: var(--color-success) !important;
margin-left: 2rem !important;
}
.ltm-UserMenuDropDown {
font-variant: normal !important;
font-weight: normal !important;
font-size: var(--font-size-lg) !important;
}
.ltm-UserMenuDropDown strong {
font-weight: normal !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment