1+ /* Presentational demo styles */
2+
3+ body {
4+ font-family : sans-serif;
5+ padding : 2rem 1rem ;
6+ line-height : 1.4 ;
7+ display : grid;
8+ width : 100px ;
9+ height : 75px ;
10+ place-items : center;
11+ }
12+
13+ h1 {
14+ font-size : 2.5rem ;
15+ line-height : 1.1 ;
16+ }
17+
18+ p {
19+ font-size : 1.2rem ;
20+ opacity : 0.9 ;
21+ }
22+
23+ code {
24+ font-weight : 700 ;
25+ font-size : 1.3em ;
26+ white-space : pre;
27+ }
28+
29+ .visually-hidden {
30+ display : block;
31+ height : 1px ;
32+ width : 1px ;
33+ overflow : hidden;
34+ clip : rect (1px , 1px , 1px , 1px );
35+ clip-path : inset (1px );
36+ white-space : nowrap;
37+ position : absolute;
38+ }
39+
40+ .app_ttl {
41+ margin : 1.5em 0 0 ;
42+ border-bottom : 1px solid # fff ;
43+ font-weight : 200 ;
44+ height : 75px ;
45+ margin-right : 50% ;
46+ }
47+
48+ button {
49+ display : block;
50+ position : relative;
51+ width : 36px ;
52+ height : 36px ;
53+ margin : 0 auto;
54+ padding : 3px ;
55+ border-radius : 50% ;
56+ color : lightgrey;
57+ border : 1.5px outset darkorange;
58+ background : # 434343 ;
59+ -webkit-border-radius : 50% ;
60+ -moz-border-radius : 50% ;
61+ -ms-border-radius : 50% ;
62+ -o-border-radius : 50% ;
63+ }
64+
65+ button : hover {
66+ background : # 232323 ;
67+ border : 2px solid slategrey;
68+ transition-property : all;
69+ transition-duration : 100ms ;
70+ -webkit-transition-property : border;
71+ }
72+
73+ .app_ttl .version {
74+ opacity : 0.7 ;
75+ font-weight : 100 ;
76+ font-size : 15px ;
77+ margin-left : 0.5em ;
78+ }
79+
80+ .h5 {
81+ color : orange;
82+ border-radius : 25% ;
83+ border : 1px whitesmoke solid;
84+ }
85+
86+ : root {
87+ --color-mode : "light" ;
88+ --color-dark : # 141414 ;
89+ --color-dark-alpha : rgba (0 , 0 , 0 , 0.1 );
90+ --color-light : # efefef ;
91+ --color-light-alpha : rgba (255 , 255 , 255 , 0.9 );
92+ --icon-moon-filter : invert (0.75 );
93+ --background : # efefef ;
94+ --text-color : # 141414 ;
95+ --button-icon : var (--icon-moon );
96+ --button-icon-filter : var (--icon-moon-filter );
97+ --button-background : var (--color-dark );
98+ --button-color : var (--color-light );
99+ }
100+
101+ body {
102+ background : var (--background );
103+ color : var (--text-color );
104+ transition : background 500ms ease-in-out, color 200ms ease;
105+ }
106+
107+ @media (prefers-color-scheme : dark) {
108+ : root {
109+ --color-mode : "dark" ;
110+ }
111+ : root : not ([data-user-color-scheme ]) {
112+ --background : var (--color-dark );
113+ --text-color : var (--color-light );
114+ --button-icon : var (--icon-sun );
115+ --button-icon-filter : var (--icon-sun-filter );
116+ --button-background : var (--color-light );
117+ --button-color : var (--color-dark );
118+ --border-color : var (--color-light-alpha );
119+ }
120+ }
121+
122+ [data-user-color-scheme = "dark" ] {
123+ --background : var (--color-dark );
124+ --text-color : var (--color-light );
125+ --button-icon : var (--icon-sun );
126+ --button-icon-filter : var (--icon-sun-filter );
127+ --button-background : var (--color-light-alpha );
128+ --button-color : var (--color-dark );
129+ --border-color : var (--color-light-alpha );
130+ }
131+
132+ .no-js .user-toggle {
133+ display : none;
134+ }
135+
136+ .user-toggle {
137+ max-width : 20rem ;
138+ border-top : 1px solid var (--border-color );
139+ text-align : center;
140+ }
141+
142+ .toggle-button {
143+ display : inline-flex;
144+ background : var (--button-background );
145+ color : var (--button-color );
146+ font : inherit;
147+ padding : 24px ;
148+ font-size : 0.5rem ;
149+ transition : background 500ms ease-in-out, color 200ms ease;
150+ }
151+
152+ .toggle-button__icon {
153+ background : var (--button-icon );
154+ width : 20px ;
155+ height : 20px ;
156+ margin : 0.5em ;
157+ filter : var (--button-icon-filter );
158+ transform : translateY (1px );
159+ /*Opticaladjustment*/
160+ transition : filter 500ms ease-in-out;
161+ -webkit-filter : var (--button-icon-filter );
162+ }
163+
164+ .toggle-button : focus {
165+ background : # 232323 ;
166+ outline : none;
167+ border : 4px solid slategrey;
168+ padding : 36px ;
169+ transition-property : border;
170+ transition-duration : 100ms ;
171+ -webkit-transition-property : border;
172+ }
173+
174+
175+ /* .dark {
176+ background: darkslategray;
177+ color: whitesmoke;
178+ }
179+
180+ .light {
181+ color:darkslategrey;
182+ background: whitesmoke;
183+ } */
184+
185+ .yell {
186+ background : yellow;
187+ color : black;
188+ }
0 commit comments