balmet.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

style-dark-mode-rtl.css (2737B)

      1 /* OS dark theme preference */
      2 @media only screen {
      3 
      4 	.is-dark-theme.is-dark-theme {
      5 		--global--color-background: var(--global--color-dark-gray);
      6 		--global--color-primary: var(--global--color-light-gray);
      7 		--global--color-secondary: var(--global--color-light-gray);
      8 		--button--color-text: var(--global--color-background);
      9 		--button--color-text-hover: var(--global--color-secondary);
     10 		--button--color-text-active: var(--global--color-secondary);
     11 		--button--color-background: var(--global--color-secondary);
     12 		--button--color-background-active: var(--global--color-background);
     13 		--global--color-border: #9ea1a7;
     14 
     15 		/* Block: Table */
     16 		--table--stripes-border-color: rgba(240, 240, 240, 0.15);
     17 		--table--stripes-background-color: rgba(240, 240, 240, 0.15);
     18 	}
     19 
     20 	.is-dark-theme img {
     21 		filter: brightness(0.85) contrast(1.1);
     22 	}
     23 
     24 	.respect-color-scheme-preference.is-dark-theme body {
     25 		background-color: var(--global--color-background);
     26 	}
     27 
     28 	#dark-mode-toggler {
     29 		cursor: pointer;
     30 		display: flex;
     31 		align-items: center;
     32 		justify-content: center;
     33 		font-size: var(--global--font-size-xs);
     34 		padding: 0.5em;
     35 		min-height: 44px;
     36 		min-width: max-content;
     37 		border: 2px solid currentColor;
     38 		box-shadow: none;
     39 		background: var(--button--color-text);
     40 		color: var(--button--color-background);
     41 		z-index: 9998;
     42 	}
     43 
     44 	.no-js #dark-mode-toggler {
     45 		display: none;
     46 	}
     47 
     48 	#dark-mode-toggler.fixed-bottom {
     49 		position: fixed;
     50 		bottom: 5px;
     51 		left: 5px;
     52 		transition: bottom 0.5s;
     53 	}
     54 
     55 	#dark-mode-toggler.fixed-bottom.hide:not(:focus) {
     56 		bottom: -80px;
     57 	}
     58 
     59 	#dark-mode-toggler.relative {
     60 		position: absolute;
     61 		height: 44px;
     62 		top: calc(2.4 * var(--global--spacing-vertical) - 44px);
     63 		left: calc(50vw - var(--responsive--alignwide-width) / 2 - 0.5em);
     64 	}
     65 
     66 	.admin-bar #dark-mode-toggler.relative {
     67 		top: calc(2.4 * var(--global--spacing-vertical) - 44px + 32px);
     68 	}
     69 }
     70 @media only screen and (max-width: 782px) {
     71 
     72 	.admin-bar #dark-mode-toggler.relative {
     73 		top: calc(2.4 * var(--global--spacing-vertical) - 44px + 46px);
     74 	}
     75 }
     76 @media only screen and (max-width: 481px) {
     77 
     78 	.admin-bar #dark-mode-toggler.relative {
     79 		top: calc(2.4 * var(--global--spacing-vertical) - 44px + 26px);
     80 	}
     81 }
     82 @media only screen and (max-width: 481px) {
     83 
     84 	body:not(.primary-navigation-open) #dark-mode-toggler.relative ~ nav {
     85 		top: calc(44px + 44px);
     86 	}
     87 }
     88 @media only screen {
     89 
     90 	.primary-navigation-open #dark-mode-toggler {
     91 		display: none;
     92 	}
     93 }
     94 @media only screen {
     95 
     96 	#dark-mode-toggler:hover,
     97 	#dark-mode-toggler:focus {
     98 		color: var(--button--color-background-active);
     99 		border: 2px solid var(--button--color-text-active);
    100 		background-color: var(--button--color-text-active);
    101 	}
    102 }
    103 @media only screen {
    104 
    105 	.is-IE #dark-mode-toggler {
    106 		display: none;
    107 	}
    108 }