Gitiles
Code Review Sign In
git.clicks.codes / Clicks / clicks.codes / 17f69015fa30c76454432b431f2e10958d17af15 / . / styles / card.module.css
blob: 603d0514c7c0e5693307ab4a02781c95bcc066c6 [file] [log] [blame]
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]1.backgroundImage {
2 position: absolute;
3 bottom: -1px;
4 left: -1px;
5 width: calc(100% + 5px);
6 height: auto;
7 scale: stretch;
8 border-radius: 0;
9 filter: var(--card-overlay-filter);
Samuel Shuert016ea022021-09-01 16:17:24 -0500[diff] [blame]10}
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]11
12.card {
13 border-radius: 17px;
14 width: 100%;
15 height: 204px;
pineafan17f69012021-10-25 20:57:44 +0100[diff] [blame^]16 padding-inline: 5px;
17 padding-bottom: 5px;
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]18 position: relative;
19 overflow: hidden;
20 margin: 100px;
21 filter: var(--card-overlay-filter);
22}
23
24
25.panel {
26 position: absolute;
pineafan17f69012021-10-25 20:57:44 +0100[diff] [blame^]27 overflow-x: hidden;
28 overflow-y: auto;
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]29 width: 88%;
30 height: 76%;
31 top: 12%;
32 left: 6%;
pineafan17f69012021-10-25 20:57:44 +0100[diff] [blame^]33 padding-top: 10px;
34 padding-bottom: 10px;
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]35 border-radius: 17px;
36 background-color: var(--card-background-color);
37 backdrop-filter: blur(7px);
38 filter: var(--card-filter);
39}
40
41.titleContainer {
Samuel Shuert016ea022021-09-01 16:17:24 -0500[diff] [blame]42 display: flex;
43 flex-direction: row;
44 justify-content: center;
45 align-items: center;
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]46 width: 100%;
47 height: 32px;
pineafan17f69012021-10-25 20:57:44 +0100[diff] [blame^]48 padding-inline: 10px;
49 margin-top: 10px;
Samuel Shuert016ea022021-09-01 16:17:24 -0500[diff] [blame]50}
51
52.title {
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]53 font-weight: 100;
54 font-size: 30px;
55 margin-left: 1vw;
Samuel Shuert016ea022021-09-01 16:17:24 -0500[diff] [blame]56 line-height: 24px;
pineafan939ee982021-10-25 12:44:40 +0100[diff] [blame]57 max-lines: 2;
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]58 color: var(--card-text-color);
Samuel Shuert016ea022021-09-01 16:17:24 -0500[diff] [blame]59}
60
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]61.image {
62 height: 50px;
63 width: 50px;
64}
65
66.subtext {
67 width: 100%;
pineafan939ee982021-10-25 12:44:40 +0100[diff] [blame]68 padding-inline: 10px;
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]69 text-align: center;
70 color: var(--card-text-color);
71}
72
73
Samuel Shuert016ea022021-09-01 16:17:24 -0500[diff] [blame]74.buttonLayout {
75 display: flex;
76 flex-direction: row;
77 justify-content: flex-end;
78 align-items: center;
Samuel Shuert604e31d2021-09-02 16:06:20 -0500[diff] [blame]79 flex-wrap: wrap;
Samuel Shuert016ea022021-09-01 16:17:24 -0500[diff] [blame]80 padding: 0px;
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]81 position: absolute;
82 bottom: 5px;
83 right: 5px;
Samuel Shuert016ea022021-09-01 16:17:24 -0500[diff] [blame]84}
85
86.button {
87 display: flex;
88 flex-direction: row;
89 align-items: flex-start;
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]90 justify-content: right;
91 position: static;
Samuel Shuert016ea022021-09-01 16:17:24 -0500[diff] [blame]92 flex: none;
93 order: 1;
94 flex-grow: 0;
Samuel Shuert016ea022021-09-01 16:17:24 -0500[diff] [blame]95
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]96 margin: 5px;
97 padding: 5px 10px;
98 border-radius: 8px;
Samuel Shuert016ea022021-09-01 16:17:24 -0500[diff] [blame]99}