infra-sk/themes.scss - buildbot - Git at Google

 /*

 //infra-sk/themes.scss is a common theme to be used across all Skia
 infrastructure applications so that we have a consistent look and feel.

 This file consists of several different layers of styling that can be opted
 into.


 # Layer 1

 The first layer is a consistent styling of all buttons, select controls, and
 tables, that are applied globally. You get this just by including the
 themes.scss file.


 # Layer 2

 The second layer is applied by adding the `body-sk` class to the <body> element
 of a page. This layer adds a large number of semantic CSS variables, whose names
 come from Material Design, that are to be used for styling elements. For
 example, if you have a panel that should look like a surface then it can be
 styled as:

     my-panel {
       background: var(--surface);
       color: var(--on-surface);
     }

 These semantic colors are supplied in two sets, one for light mode and another
 for dark mode. Dark mode is turned on by adding the `darkmode` class to an
 element, which triggers that element and all of its children to move to
 darkmode.

 The darkmode/lightmode is usually controlled via the `theme-chooser-sk` control
 which toggles the `darkmode` class on the body element and persists the user's
 choice in local storage.

 The `body-sk` class also adds more styling to many common elements such as
 buttons, links, and other elements-sk elements.

 # Layer 3

 The third layer is applied by adding the `font-sk` class to the body element of
 a page. This layer sets consistent font styling for a page, and adds `--font`
 and `--mono-font` CSS variables.

 To see all of the semantic names and their values working, along with and
 example elements in both dark and light mode, run:

     $ ./demopage.sh infra-sk/modules/theme-chooser-sk/

 You can use the theme-chooser-sk element on that demo page to toggle between
 dark and light modes.

 Most applications should use `app-sk` as their base element, so you can also run

    $ ./demopage.sh infra-sk/modules/app-sk/

 to see how these styles apply to title bars and sidebars.

 */

 @import '~elements-sk/themes/themes';
 @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Roboto+Mono:400,500|Material+Icons');

 @import '~elements-sk/styles/buttons/buttons.scss';
 @import '~elements-sk/styles/select/select.scss';
 @import '~elements-sk/styles/table/table.scss';

 .body-sk {
   &.font-sk,
   & .font-sk {
     /* Typography */
     --font: Roboto, Arial, 'Bitstream Vera Sans', sans-serif;
     --mono-font: Roboto Mono, monospace;

     * {
       font-size: 12px;
       font-family: var(--font);
       box-sizing: border-box;
     }

     h1 {
       font-size: 20px;
       margin: 16px 0;
     }

     h2 {
       font-size: 18px;
       margin: 14px 0;
     }

     h3 {
       font-size: 16px;
       margin: 12px 0;
     }

     h4 {
       font-size: 14px;
       margin: 10px 0;
     }

     h5 {
       font-size: 12px;
       margin: 8px 0;
     }

     code,
     pre {
       font-family: var(--mono-font);
     }
   }

   /* Semantic colors defined by elements-sk. */
   --background: var(--grey-50);
   --disabled: var(--grey-500);
   --error: var(--red-900);
   --on-background: var(--black);
   --on-disabled: var(--grey-700);
   --on-error: var(--white);
   --on-primary-variant: var(--black);
   --on-primary: var(--white);
   --on-secondary: var(--white);
   --on-surface: var(--black);
   --primary-variant: var(--light-blue-600);
   --primary: var(--blue-800);
   --secondary: var(--green-500);
   --surface-1dp: var(--grey-200);
   --surface-2dp: var(--grey-400);
   --surface: var(--white);
   --transparent-overlay: rgba(0, 0, 0, 0.5);

   /* Additional semantic colors. */
   --primary-highlight: var(--light-blue-100);
   --secondary-highlight: var(--green-100);
   --on-hightlight: var(--black);

   --failure-alpha: rgba(217, 95, 2, 0.8);
   --failure: rgb(217, 95, 2);
   --on-failure: var(--black);
   --on-success: var(--black);
   --on-warning: var(--black);
   --success-alpha: rgba(102, 166, 30, 0.3);
   --success: rgb(102, 166, 30);
   --warning-alpha: rgb(255, 171, 64, 0.8);
   --warning: rgb(255, 167, 38);
   --unexpected: rgb(117, 112, 179);
   --unexpected-alpha: rgba(117, 112, 179, 1);

   --positive: var(--green-500);
   --negative: var(--red-500);
   --untriaged: var(--brown-400);

   &.darkmode,
   & .darkmode {
     /* Semantic colors defined by elements-sk. */
     --background: #121212;
     --disabled: var(--grey-600);
     --error: var(--pink-400);
     --on-background: #cccccc;
     --on-disabled: var(--grey-300);
     --on-error: var(--black);
     --on-primary-variant: var(--surface);
     --on-primary: var(--surface);
     --on-secondary: var(--background);
     --on-surface: #dddddd;
     --primary-variant: var(--light-blue-100);
     --primary: var(--blue-200);
     --secondary: var(--green-200);
     --surface-1dp: var(--grey-800);
     --surface-2dp: var(--grey-700);
     --surface: var(--grey-900);
     --transparent-overlay: rgba(255, 255, 255, 0.5);

     /* Additional semantic colors. */
     --primary-highlight: var(--light-blue-900);
     --secondary-highlight: var(--green-900);
     --on-hightlight: var(--grey-100);

     --failure-alpha: rgba(217, 95, 2, 0.5);
     --on-failure: var(--on-secondary);
     --on-success: var(--on-secondary);
     --on-warning: var(--on-secondary);
     --warning-alpha: rgb(255, 171, 64, 0.5);

     --positive: var(--green-500);
     --negative: var(--red-500);
     --untriaged: var(--brown-400);
   }

   a:active,
   a:visited,
   a:link {
     color: var(--primary);
   }

   a:hover {
     /* Distinguish hovering over links. */
     color: var(--primary-variant);
   }

   .input-like,
   input {
     border: solid 1px var(--on-surface);
     color: solid 1px var(--on-surface);
     background: solid 1px var(--surface);
     display: inline-block;
   }

   .button-like,
   button {
     min-width: auto;
     text-align: center;
     text-transform: none;
     padding: 4px;
     height: fit-content;
     margin: 8px 2px;
     outline: none;
     border: solid 1px var(--on-surface);

     box-shadow: 2px 2px 0px 0px var(--surface-2dp);
   }

   .button-like.icon,
   button.icon {
     border: none;
     box-shadow: none;
   }

   .button-like.action,
   button.action {
     box-shadow: 2px 2px 0px 0px var(--surface-2dp);
     border: none;
   }

   .button-like:active,
   button:active {
     box-shadow: none;
     transition: box-shadow 0.2s ease-in;
   }

   .button-like:disabled,
   button:disabled {
     opacity: 0.5;
     background: var(--on-disabled);
     color: var(--disabled);
     fill: var(--disabled);
   }

   multi-select-sk:focus,
   select-sk:focus,
   button:focus {
     outline: dashed 1px var(--on-surface);
     outline-offset: -4px;
   }

   multi-select-sk {
     border: solid 1px var(--on-surface);
     background-color: var(--surface);
     color: var(--on-surface);
   }

   multi-select-sk > * {
     background-color: var(--surface);
     border: solid 1px var(--surface);
   }

   multi-select-sk > [selected] {
     background: var(--surface-1dp);
   }

   multi-select-sk > :hover {
     border: var(--surface-1dp) solid 1px;
   }

   select-sk,
   select-sk > * {
     background-color: var(--surface);
     color: var(--on-surface);
   }

   select-sk > [selected] {
     background: var(--surface-1dp);
   }

   select-sk > * {
     border: var(--surface) solid 1px;
   }

   select-sk > :hover {
     border: var(--surface-1dp) solid 1px;
   }

   select-sk > :focus {
     background-color: var(--surface-1dp);
     transition: background-color 0.1s cubic-bezier(0.4, 0, 0.2, 1);
   }

   select-sk > [selected] {
     background-color: var(--surface-1dp);
   }

   error-toast-sk {
     padding: 8px;
   }

   error-toast-sk button {
     margin: 0 0 0 8px;
     padding: 4px;
   }

   button:focus {
     outline: dashed 1px var(--on-surface);
     outline-offset: -4px;
   }

   tabs-sk {
     > button {
       border: none;
       border-bottom: solid 4px var(--on-surface);
       box-shadow: none;
     }
     > button.selected {
       border-bottom: solid 4px var(--primary);
     }
   }

   /*
   This styling makes the `summary` element in a `details` element look like a
   button. If `button` styles are updated then this styling should also be
   updated to match.
   */
   details {
     summary {
       display: inline-block;
       padding: 4px;
       background: var(--surface);
       color: var(--on-surface);
       border: solid 1px var(--on-surface);
       cursor: pointer;
       list-style: none;
       margin: 8px 4px 8px 0;
       box-shadow: 2px 2px 0px 0px var(--surface-2dp);
     }

     summary:focus {
       outline: dashed 1px var(--on-surface);
       outline-offset: -4px;
     }

     summary::-webkit-details-marker {
       display: none;
     }

     summary:active {
       box-shadow: none;
       transition: box-shadow 0.2s ease-in;
     }
   }

   details[open] {
     border: solid 1px var(--on-surface);
     padding: 0 8px 16px 8px;
     background: var(--surface);
     margin: 8px 8px 8px 0;

     summary {
       margin-top: 8px;
       margin-bottom: 8px;
     }
   }

   /*
      The following styles are for scrollbars. There are some non-standard
      looking styles because it is 2020 and there's still no standard way to
      style scrollbars on a web page.

      https://caniuse.com/#feat=css-scrollbar

      There is currently an editor's draft for styling scrollbars:
      https://drafts.csswg.org/css-scrollbars-1/, but it is only supported by
      FireFox. So set that first.
   */

   * {
     scrollbar-color: var(--surface-1dp) var(--background);
   }

   /* Turn on a 13x13 scrollbar */
   ::-webkit-scrollbar {
     width: 13px;
     height: 13px;
   }

   /* Turn off single button up on top and down on bottom */
   ::-webkit-scrollbar-button:start:decrement,
   ::-webkit-scrollbar-button:end:increment,
   ::-webkit-scrollbar-button:vertical:start:increment,
   ::-webkit-scrollbar-button:vertical:end:decrement {
     display: none;
   }

   /* Track below and above */
   ::-webkit-scrollbar-track-piece {
     background-color: var(--background);
     border: solid 1px var(--surface-2dp);
   }

   /* The thumb itself */
   ::-webkit-scrollbar-thumb {
     border: solid 1px var(--on-surface);
     background: var(--surface-1dp);
   }

   /* Handle on hover */
   ::-webkit-scrollbar-thumb:hover {
     background: var(--surface);
   }

   td {
     font-size: 100%;
   }

   th {
     font-size: 100%;
   }
 }
	/*

	//infra-sk/themes.scss is a common theme to be used across all Skia
	infrastructure applications so that we have a consistent look and feel.

	This file consists of several different layers of styling that can be opted
	into.


	# Layer 1

	The first layer is a consistent styling of all buttons, select controls, and
	tables, that are applied globally. You get this just by including the
	themes.scss file.


	# Layer 2

	The second layer is applied by adding the `body-sk` class to the <body> element
	of a page. This layer adds a large number of semantic CSS variables, whose names
	come from Material Design, that are to be used for styling elements. For
	example, if you have a panel that should look like a surface then it can be
	styled as:

	my-panel {
	background: var(--surface);
	color: var(--on-surface);
	}

	These semantic colors are supplied in two sets, one for light mode and another
	for dark mode. Dark mode is turned on by adding the `darkmode` class to an
	element, which triggers that element and all of its children to move to
	darkmode.

	The darkmode/lightmode is usually controlled via the `theme-chooser-sk` control
	which toggles the `darkmode` class on the body element and persists the user's
	choice in local storage.

	The `body-sk` class also adds more styling to many common elements such as
	buttons, links, and other elements-sk elements.

	# Layer 3

	The third layer is applied by adding the `font-sk` class to the body element of
	a page. This layer sets consistent font styling for a page, and adds `--font`
	and `--mono-font` CSS variables.

	To see all of the semantic names and their values working, along with and
	example elements in both dark and light mode, run:

	$ ./demopage.sh infra-sk/modules/theme-chooser-sk/

	You can use the theme-chooser-sk element on that demo page to toggle between
	dark and light modes.

	Most applications should use `app-sk` as their base element, so you can also run

	$ ./demopage.sh infra-sk/modules/app-sk/

	to see how these styles apply to title bars and sidebars.

	*/

	@import '~elements-sk/themes/themes';
	@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic\|Roboto+Mono:400,500\|Material+Icons');

	@import '~elements-sk/styles/buttons/buttons.scss';
	@import '~elements-sk/styles/select/select.scss';
	@import '~elements-sk/styles/table/table.scss';

	.body-sk {
	&.font-sk,
	& .font-sk {
	/* Typography */
	--font: Roboto, Arial, 'Bitstream Vera Sans', sans-serif;
	--mono-font: Roboto Mono, monospace;

	* {
	font-size: 12px;
	font-family: var(--font);
	box-sizing: border-box;
	}

	h1 {
	font-size: 20px;
	margin: 16px 0;
	}

	h2 {
	font-size: 18px;
	margin: 14px 0;
	}

	h3 {
	font-size: 16px;
	margin: 12px 0;
	}

	h4 {
	font-size: 14px;
	margin: 10px 0;
	}

	h5 {
	font-size: 12px;
	margin: 8px 0;
	}

	code,
	pre {
	font-family: var(--mono-font);
	}
	}

	/* Semantic colors defined by elements-sk. */
	--background: var(--grey-50);
	--disabled: var(--grey-500);
	--error: var(--red-900);
	--on-background: var(--black);
	--on-disabled: var(--grey-700);
	--on-error: var(--white);
	--on-primary-variant: var(--black);
	--on-primary: var(--white);
	--on-secondary: var(--white);
	--on-surface: var(--black);
	--primary-variant: var(--light-blue-600);
	--primary: var(--blue-800);
	--secondary: var(--green-500);
	--surface-1dp: var(--grey-200);
	--surface-2dp: var(--grey-400);
	--surface: var(--white);
	--transparent-overlay: rgba(0, 0, 0, 0.5);

	/* Additional semantic colors. */
	--primary-highlight: var(--light-blue-100);
	--secondary-highlight: var(--green-100);
	--on-hightlight: var(--black);

	--failure-alpha: rgba(217, 95, 2, 0.8);
	--failure: rgb(217, 95, 2);
	--on-failure: var(--black);
	--on-success: var(--black);
	--on-warning: var(--black);
	--success-alpha: rgba(102, 166, 30, 0.3);
	--success: rgb(102, 166, 30);
	--warning-alpha: rgb(255, 171, 64, 0.8);
	--warning: rgb(255, 167, 38);
	--unexpected: rgb(117, 112, 179);
	--unexpected-alpha: rgba(117, 112, 179, 1);

	--positive: var(--green-500);
	--negative: var(--red-500);
	--untriaged: var(--brown-400);

	&.darkmode,
	& .darkmode {
	/* Semantic colors defined by elements-sk. */
	--background: #121212;
	--disabled: var(--grey-600);
	--error: var(--pink-400);
	--on-background: #cccccc;
	--on-disabled: var(--grey-300);
	--on-error: var(--black);
	--on-primary-variant: var(--surface);
	--on-primary: var(--surface);
	--on-secondary: var(--background);
	--on-surface: #dddddd;
	--primary-variant: var(--light-blue-100);
	--primary: var(--blue-200);
	--secondary: var(--green-200);
	--surface-1dp: var(--grey-800);
	--surface-2dp: var(--grey-700);
	--surface: var(--grey-900);
	--transparent-overlay: rgba(255, 255, 255, 0.5);

	/* Additional semantic colors. */
	--primary-highlight: var(--light-blue-900);
	--secondary-highlight: var(--green-900);
	--on-hightlight: var(--grey-100);

	--failure-alpha: rgba(217, 95, 2, 0.5);
	--on-failure: var(--on-secondary);
	--on-success: var(--on-secondary);
	--on-warning: var(--on-secondary);
	--warning-alpha: rgb(255, 171, 64, 0.5);

	--positive: var(--green-500);
	--negative: var(--red-500);
	--untriaged: var(--brown-400);
	}

	a:active,
	a:visited,
	a:link {
	color: var(--primary);
	}

	a:hover {
	/* Distinguish hovering over links. */
	color: var(--primary-variant);
	}

	.input-like,
	input {
	border: solid 1px var(--on-surface);
	color: solid 1px var(--on-surface);
	background: solid 1px var(--surface);
	display: inline-block;
	}

	.button-like,
	button {
	min-width: auto;
	text-align: center;
	text-transform: none;
	padding: 4px;
	height: fit-content;
	margin: 8px 2px;
	outline: none;
	border: solid 1px var(--on-surface);

	box-shadow: 2px 2px 0px 0px var(--surface-2dp);
	}

	.button-like.icon,
	button.icon {
	border: none;
	box-shadow: none;
	}

	.button-like.action,
	button.action {
	box-shadow: 2px 2px 0px 0px var(--surface-2dp);
	border: none;
	}

	.button-like:active,
	button:active {
	box-shadow: none;
	transition: box-shadow 0.2s ease-in;
	}

	.button-like:disabled,
	button:disabled {
	opacity: 0.5;
	background: var(--on-disabled);
	color: var(--disabled);
	fill: var(--disabled);
	}

	multi-select-sk:focus,
	select-sk:focus,
	button:focus {
	outline: dashed 1px var(--on-surface);
	outline-offset: -4px;
	}

	multi-select-sk {
	border: solid 1px var(--on-surface);
	background-color: var(--surface);
	color: var(--on-surface);
	}

	multi-select-sk > * {
	background-color: var(--surface);
	border: solid 1px var(--surface);
	}

	multi-select-sk > [selected] {
	background: var(--surface-1dp);
	}

	multi-select-sk > :hover {
	border: var(--surface-1dp) solid 1px;
	}

	select-sk,
	select-sk > * {
	background-color: var(--surface);
	color: var(--on-surface);
	}

	select-sk > [selected] {
	background: var(--surface-1dp);
	}

	select-sk > * {
	border: var(--surface) solid 1px;
	}

	select-sk > :hover {
	border: var(--surface-1dp) solid 1px;
	}

	select-sk > :focus {
	background-color: var(--surface-1dp);
	transition: background-color 0.1s cubic-bezier(0.4, 0, 0.2, 1);
	}

	select-sk > [selected] {
	background-color: var(--surface-1dp);
	}

	error-toast-sk {
	padding: 8px;
	}

	error-toast-sk button {
	margin: 0 0 0 8px;
	padding: 4px;
	}

	button:focus {
	outline: dashed 1px var(--on-surface);
	outline-offset: -4px;
	}

	tabs-sk {
	> button {
	border: none;
	border-bottom: solid 4px var(--on-surface);
	box-shadow: none;
	}
	> button.selected {
	border-bottom: solid 4px var(--primary);
	}
	}

	/*
	This styling makes the `summary` element in a `details` element look like a
	button. If `button` styles are updated then this styling should also be
	updated to match.
	*/
	details {
	summary {
	display: inline-block;
	padding: 4px;
	background: var(--surface);
	color: var(--on-surface);
	border: solid 1px var(--on-surface);
	cursor: pointer;
	list-style: none;
	margin: 8px 4px 8px 0;
	box-shadow: 2px 2px 0px 0px var(--surface-2dp);
	}

	summary:focus {
	outline: dashed 1px var(--on-surface);
	outline-offset: -4px;
	}

	summary::-webkit-details-marker {
	display: none;
	}

	summary:active {
	box-shadow: none;
	transition: box-shadow 0.2s ease-in;
	}
	}

	details[open] {
	border: solid 1px var(--on-surface);
	padding: 0 8px 16px 8px;
	background: var(--surface);
	margin: 8px 8px 8px 0;

	summary {
	margin-top: 8px;
	margin-bottom: 8px;
	}
	}

	/*
	The following styles are for scrollbars. There are some non-standard
	looking styles because it is 2020 and there's still no standard way to
	style scrollbars on a web page.

	https://caniuse.com/#feat=css-scrollbar

	There is currently an editor's draft for styling scrollbars:
	https://drafts.csswg.org/css-scrollbars-1/, but it is only supported by
	FireFox. So set that first.
	*/

	* {
	scrollbar-color: var(--surface-1dp) var(--background);
	}

	/* Turn on a 13x13 scrollbar */
	::-webkit-scrollbar {
	width: 13px;
	height: 13px;
	}

	/* Turn off single button up on top and down on bottom */
	::-webkit-scrollbar-button:start:decrement,
	::-webkit-scrollbar-button:end:increment,
	::-webkit-scrollbar-button:vertical:start:increment,
	::-webkit-scrollbar-button:vertical:end:decrement {
	display: none;
	}

	/* Track below and above */
	::-webkit-scrollbar-track-piece {
	background-color: var(--background);
	border: solid 1px var(--surface-2dp);
	}

	/* The thumb itself */
	::-webkit-scrollbar-thumb {
	border: solid 1px var(--on-surface);
	background: var(--surface-1dp);
	}

	/* Handle on hover */
	::-webkit-scrollbar-thumb:hover {
	background: var(--surface);
	}

	td {
	font-size: 100%;
	}

	th {
	font-size: 100%;
	}
	}