727035a2dc
This functioned fine, but did not have the intended visual appearance when it came to how the text of the auth code wrapped inside the copy button in the manual flow. The new styling behaves correctly on at least Chrome, Firefox, and Safari on macOS. Signed-off-by: Matt Moyer <moyerm@vmware.com>
88 lines
2.7 KiB
CSS
88 lines
2.7 KiB
CSS
/* Copyright 2021 the Pinniped contributors. All Rights Reserved. */
|
|
/* SPDX-License-Identifier: Apache-2.0 */
|
|
|
|
body {
|
|
font-family: "Metropolis-Light", Helvetica, sans-serif;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.state {
|
|
position: absolute;
|
|
top: 100px;
|
|
left: 50%;
|
|
width: 400px;
|
|
height: 80px;
|
|
margin-top: -40px;
|
|
margin-left: -200px;
|
|
font-size: 14px;
|
|
line-height: 24px;
|
|
}
|
|
|
|
button {
|
|
margin: -10px;
|
|
padding: 10px;
|
|
text-align: left;
|
|
width: 100%;
|
|
display: inline;
|
|
border: none;
|
|
background: none;
|
|
cursor: pointer;
|
|
transition: all .1s;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: #eee;
|
|
transform: scale(1.01);
|
|
}
|
|
|
|
button:active {
|
|
background-color: #ddd;
|
|
transform: scale(.99);
|
|
}
|
|
|
|
code {
|
|
display: block;
|
|
word-wrap: break-word;
|
|
word-break: break-all;
|
|
font-size: 12px;
|
|
font-family: monospace;
|
|
color: #333;
|
|
}
|
|
|
|
.copy-icon {
|
|
float: left;
|
|
width: 36px;
|
|
height: 36px;
|
|
margin-top: -3px;
|
|
margin-right: 10px;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
/*
|
|
This is the "copy-to-clipboard-line.svg" icon from Clarity (https://clarity.design/):
|
|
https://github.com/vmware/clarity-assets/blob/master/icons/essential/copy-to-clipboard-line.svg
|
|
*/
|
|
background-image: url("data:image/svg+xml,%3Csvg version='1.1' width='36' height='36' viewBox='0 0 36 36' preserveAspectRatio='xMidYMid meet' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Ecopy-to-clipboard-line%3C/title%3E%3Cpath d='M22.6,4H21.55a3.89,3.89,0,0,0-7.31,0H13.4A2.41,2.41,0,0,0,11,6.4V10H25V6.4A2.41,2.41,0,0,0,22.6,4ZM23,8H13V6.25A.25.25,0,0,1,13.25,6h2.69l.12-1.11A1.24,1.24,0,0,1,16.61,4a2,2,0,0,1,3.15,1.18l.09.84h2.9a.25.25,0,0,1,.25.25Z' class='clr-i-outline clr-i-outline-path-1'%3E%3C/path%3E%3Cpath d='M33.25,18.06H21.33l2.84-2.83a1,1,0,1,0-1.42-1.42L17.5,19.06l5.25,5.25a1,1,0,0,0,.71.29,1,1,0,0,0,.71-1.7l-2.84-2.84H33.25a1,1,0,0,0,0-2Z' class='clr-i-outline clr-i-outline-path-2'%3E%3C/path%3E%3Cpath d='M29,16h2V6.68A1.66,1.66,0,0,0,29.35,5H27.08V7H29Z' class='clr-i-outline clr-i-outline-path-3'%3E%3C/path%3E%3Cpath d='M29,31H7V7H9V5H6.64A1.66,1.66,0,0,0,5,6.67V31.32A1.66,1.66,0,0,0,6.65,33H29.36A1.66,1.66,0,0,0,31,31.33V22.06H29Z' class='clr-i-outline clr-i-outline-path-4'%3E%3C/path%3E%3Crect x='0' y='0' width='36' height='36' fill-opacity='0'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
@keyframes loader {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
#loading {
|
|
content: '';
|
|
box-sizing: border-box;
|
|
width: 80px;
|
|
height: 80px;
|
|
margin-top: -40px;
|
|
margin-left: -40px;
|
|
border-radius: 50%;
|
|
border: 2px solid #fff;
|
|
border-top-color: #1b3951;
|
|
animation: loader .6s linear infinite;
|
|
}
|