annotate mod_http_oauth2/html/style.css @ 5627:3a5cf8d80089

mod_http_oauth2: Tweak method of centering the UI The percentage here was relative to the viewport width, which on some very wide screens may put the UI slightly outside of the view, requiring scrolling to see. By using a unit relative to the height of the viewport, this is avoided and should work better. But no guarantees, it's still possible to resize the browser or adjust font sizes so that the UI goes out of view.
author Kim Alvefur <zash@zash.se>
date Mon, 31 Jul 2023 07:28:09 +0200
parents e86a1018cdb3
children 429cc52c3ce8
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
5208
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
1 body
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
2 {
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
3 text-align:center;
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
4 background-color:#f8f8f8;
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
5 font-family:sans-serif
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
6 }
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
7
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
8 h1
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
9 {
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
10 font-size:xx-large;
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
11 }
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
12
5270
7acf73d2ebb5 mod_http_oauth2: Use <fieldset> in templates because it looks nice
Kim Alvefur <zash@zash.se>
parents: 5226
diff changeset
13 legend {
7acf73d2ebb5 mod_http_oauth2: Use <fieldset> in templates because it looks nice
Kim Alvefur <zash@zash.se>
parents: 5226
diff changeset
14 font-size:x-large;
7acf73d2ebb5 mod_http_oauth2: Use <fieldset> in templates because it looks nice
Kim Alvefur <zash@zash.se>
parents: 5226
diff changeset
15 }
5208
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
16 p
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
17 {
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
18 font-size:large;
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
19 }
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
20
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
21 .error
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
22 {
5625
e86a1018cdb3 mod_http_oauth2: Present errors in HTML <dialog>
Kim Alvefur <zash@zash.se>
parents: 5624
diff changeset
23 margin: 0.75em auto;
5208
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
24 background-color: #f8d7da;
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
25 color: #842029;
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
26 border: solid 1px #f5c2c7;
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
27 }
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
28
5495
7998b49d6512 mod_http_oauth2: Create proper template for OOB code delivery
Kim Alvefur <zash@zash.se>
parents: 5270
diff changeset
29 .oob
7998b49d6512 mod_http_oauth2: Create proper template for OOB code delivery
Kim Alvefur <zash@zash.se>
parents: 5270
diff changeset
30 {
7998b49d6512 mod_http_oauth2: Create proper template for OOB code delivery
Kim Alvefur <zash@zash.se>
parents: 5270
diff changeset
31 background-color: #d7daf8;
7998b49d6512 mod_http_oauth2: Create proper template for OOB code delivery
Kim Alvefur <zash@zash.se>
parents: 5270
diff changeset
32 border: solid 1px #c2c7f5;
7998b49d6512 mod_http_oauth2: Create proper template for OOB code delivery
Kim Alvefur <zash@zash.se>
parents: 5270
diff changeset
33 color: #202984;
7998b49d6512 mod_http_oauth2: Create proper template for OOB code delivery
Kim Alvefur <zash@zash.se>
parents: 5270
diff changeset
34 margin: 0.75em;
7998b49d6512 mod_http_oauth2: Create proper template for OOB code delivery
Kim Alvefur <zash@zash.se>
parents: 5270
diff changeset
35 }
5515
f5931ce9b6ca mod_http_oauth2: Present OOB code in an input field for easier selection
Kim Alvefur <zash@zash.se>
parents: 5495
diff changeset
36 .oob input {
5495
7998b49d6512 mod_http_oauth2: Create proper template for OOB code delivery
Kim Alvefur <zash@zash.se>
parents: 5270
diff changeset
37 font-size: xx-large;
7998b49d6512 mod_http_oauth2: Create proper template for OOB code delivery
Kim Alvefur <zash@zash.se>
parents: 5270
diff changeset
38 font-family: monospace;
5515
f5931ce9b6ca mod_http_oauth2: Present OOB code in an input field for easier selection
Kim Alvefur <zash@zash.se>
parents: 5495
diff changeset
39 background-color: inherit;
5517
a08abbd1045d mod_http_oauth2: Apply text color to OOB input field
Kim Alvefur <zash@zash.se>
parents: 5515
diff changeset
40 color: inherit;
5515
f5931ce9b6ca mod_http_oauth2: Present OOB code in an input field for easier selection
Kim Alvefur <zash@zash.se>
parents: 5495
diff changeset
41 border: none;
f5931ce9b6ca mod_http_oauth2: Present OOB code in an input field for easier selection
Kim Alvefur <zash@zash.se>
parents: 5495
diff changeset
42 padding: 1ex 2em;
5495
7998b49d6512 mod_http_oauth2: Create proper template for OOB code delivery
Kim Alvefur <zash@zash.se>
parents: 5270
diff changeset
43 }
7998b49d6512 mod_http_oauth2: Create proper template for OOB code delivery
Kim Alvefur <zash@zash.se>
parents: 5270
diff changeset
44
5208
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
45 input {
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
46 margin: 0.3rem;
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
47 padding: 0.2rem;
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
48 line-height: 1.5rem;
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
49 font-size: 110%;
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
50 }
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
51 h1, h2 {
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
52 text-align: left;
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
53 }
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
54
5624
6109496a7ccc mod_http_oauth2: Move site name into <header>
Kim Alvefur <zash@zash.se>
parents: 5517
diff changeset
55 header, main, footer {
5208
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
56 max-width: 600px;
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
57 padding: 0 1.5em 1.5em 1.5em;
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
58 }
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
59
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
60 dt
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
61 {
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
62 font-weight: bold;
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
63 margin: 0.5em 0 0 0;
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
64 }
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
65
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
66 dd
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
67 {
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
68 margin: 0;
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
69 }
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
70
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
71 button, input[type=submit]
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
72 {
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
73 padding: 0.5rem;
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
74 margin: 0.75rem;
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
75 }
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
76
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
77 @media(prefers-color-scheme:dark)
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
78 {
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
79 body
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
80 {
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
81 background-color:#161616;
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
82 color:#eee;
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
83 }
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
84
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
85 .error {
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
86 color: #f8d7da;
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
87 background-color: #842029;
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
88 }
5495
7998b49d6512 mod_http_oauth2: Create proper template for OOB code delivery
Kim Alvefur <zash@zash.se>
parents: 5270
diff changeset
89 .oob {
7998b49d6512 mod_http_oauth2: Create proper template for OOB code delivery
Kim Alvefur <zash@zash.se>
parents: 5270
diff changeset
90 color: #d7daf8;
7998b49d6512 mod_http_oauth2: Create proper template for OOB code delivery
Kim Alvefur <zash@zash.se>
parents: 5270
diff changeset
91 background-color: #202984;
7998b49d6512 mod_http_oauth2: Create proper template for OOB code delivery
Kim Alvefur <zash@zash.se>
parents: 5270
diff changeset
92 }
5208
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
93
5226
1756c0f929f5 mod_http_oauth2: Fix contrast of links on consent page
Kim Alvefur <zash@zash.se>
parents: 5208
diff changeset
94
1756c0f929f5 mod_http_oauth2: Fix contrast of links on consent page
Kim Alvefur <zash@zash.se>
parents: 5208
diff changeset
95 :link
1756c0f929f5 mod_http_oauth2: Fix contrast of links on consent page
Kim Alvefur <zash@zash.se>
parents: 5208
diff changeset
96 {
1756c0f929f5 mod_http_oauth2: Fix contrast of links on consent page
Kim Alvefur <zash@zash.se>
parents: 5208
diff changeset
97 color: #6197df;
1756c0f929f5 mod_http_oauth2: Fix contrast of links on consent page
Kim Alvefur <zash@zash.se>
parents: 5208
diff changeset
98 }
1756c0f929f5 mod_http_oauth2: Fix contrast of links on consent page
Kim Alvefur <zash@zash.se>
parents: 5208
diff changeset
99
1756c0f929f5 mod_http_oauth2: Fix contrast of links on consent page
Kim Alvefur <zash@zash.se>
parents: 5208
diff changeset
100 :visited
1756c0f929f5 mod_http_oauth2: Fix contrast of links on consent page
Kim Alvefur <zash@zash.se>
parents: 5208
diff changeset
101 {
1756c0f929f5 mod_http_oauth2: Fix contrast of links on consent page
Kim Alvefur <zash@zash.se>
parents: 5208
diff changeset
102 color: #9a61df;
1756c0f929f5 mod_http_oauth2: Fix contrast of links on consent page
Kim Alvefur <zash@zash.se>
parents: 5208
diff changeset
103 }
5208
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
104 }
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
105
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
106 @media(min-width: 768px)
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
107 {
5627
3a5cf8d80089 mod_http_oauth2: Tweak method of centering the UI
Kim Alvefur <zash@zash.se>
parents: 5625
diff changeset
108 body {
3a5cf8d80089 mod_http_oauth2: Tweak method of centering the UI
Kim Alvefur <zash@zash.se>
parents: 5625
diff changeset
109 margin-top:14vh;
3a5cf8d80089 mod_http_oauth2: Tweak method of centering the UI
Kim Alvefur <zash@zash.se>
parents: 5625
diff changeset
110 }
5624
6109496a7ccc mod_http_oauth2: Move site name into <header>
Kim Alvefur <zash@zash.se>
parents: 5517
diff changeset
111 header, main, footer
5208
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
112 {
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
113 margin-left: auto;
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
114 margin-right: auto;
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
115 }
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
116
aaa64c647e12 mod_http_oauth2: Add authentication, consent and error pages
Matthew Wild <mwild1@gmail.com>
parents:
diff changeset
117 }