Account-Chooser-Extension/styles.css at master · agoldstein03/Account-Chooser-Extension · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
html {
    overflow: hidden;
}

body {
    overflow: hidden;
    margin: 0;
}

/* Parts of the following code comes (mostly) directly from Google's own calculated (not source) styles, for hopeful consistency, with some removed bloat and the exclusion of copyrighted resources like Google Sans. I then adjusted the styles to use new flex-box positioning to solve some issues with resizing. */

.topA {
    font: 13px/27px Roboto, RobotoDraft, Arial, sans-serif;
    line-height: normal;
    font-family: "Segoe UI", "Roboto", arial, sans-serif;
    outline-offset: -2px;
    white-space: nowrap;
    color: inherit;
    border: none;
    cursor: pointer;
    height: 35px;
    outline: 0;
    padding: 12px;
    border-top: 0;
    display: flex;
    flex-direction: row;
}

.img {
    border-radius: 50%;
    overflow: hidden;
    border: none;
    vertical-align: top;
    height: 32px;
    width: 32px;
    flex-shrink: 0;
}

.top {
    margin: 0 0 0 12px;
    display: flex;
    flex-direction: column;
    flex-shrink: 1;

    min-width: 0;
}
/*
.name .email {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

}
*/
.name {
    color: #3c4043;
    font: 500 14px/18px Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
    letter-spacing: 0.25px;
}

.email {
    color: #5f6368;
    font: 400 12px / 16px Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
}

.corner {
    color: #5d6369;
    font: italic 400 12px/14px Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
    padding: 2px 0 0 5px; /*2px 0 0 20px;*/
    text-align: right;
    font-family: Roboto, Arial, sans-serif !important;
    flex-grow: 1;
}

.topA:active, .topA:focus:active {
    background-color: #e8e8e9;
}

.topA:focus, .topA:hover:focus {
    background-color: #f4f4f4;
}

.topA:hover {
    background-color: #f7f8f8;
}