license and readme
[VSoRC/.git] / styles / cards.css
1 /*\r
2     Copyright (c) Maen Artimy, 2018\r
3 */\r
4 \r
5 .card {\r
6         background-color: transparent;\r
7         float: left;\r
8     /*box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);*/\r
9     transition: 0.3s;\r
10     width: 430px;\r
11     font-size: 14px;\r
12     margin: 0px 10px 20px 10px;\r
13 }\r
14 \r
15 .card:nth-of-type(even) {\r
16     clear: right;\r
17  }\r
18 \r
19 .card .header {\r
20     border-style: solid;\r
21     border-color: var(--scolor-3);\r
22     border-width: 2px 0 2px 0;\r
23         padding: 0px 16px;\r
24 }\r
25 \r
26 .container {\r
27     overflow-x: auto;\r
28 }\r
29 \r
30 .card .container {\r
31         width: 100%;\r
32         transition: 1s;\r
33         /*overflow: auto;*/\r
34 \r
35         height: 150px;\r
36     padding: 8px 16px;\r
37 }\r
38 \r
39 .card.bar {\r
40     padding: 0px 16px;\r
41 }\r
42 \r
43 .card.bar button {\r
44         margin: 2px 8px;\r
45 }\r
46 \r
47 .card.wide {\r
48         float: none;\r
49     width: 1100px; /*needs to be fixed*/\r
50 }\r
51 \r
52 .card.wide .container{\r
53     height: auto;\r
54     padding: 8px 16px;\r
55 }\r
56 \r
57 .card:hover {\r
58     box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);\r
59 }\r
60 \r
61 .card .header button {\r
62     background-color: transparent;\r
63     color: black;\r
64     cursor: pointer;\r
65     padding: 18px;\r
66     width: 100%;\r
67     border: none;\r
68     text-align: left;\r
69     outline: none;\r
70     font-size: 15px;\r
71     transition: 0.4s;\r
72 }\r
73 \r
74 .card .header button::after {\r
75     content: '\002B';\r
76     color: black;\r
77     font-weight: bold;\r
78     float: right;\r
79     margin-left: 5px;\r
80 }\r
81 \r
82 .card .header button.active::after {\r
83     content: "\2212";\r
84 }\r
85 \r
86 .card .header h1 {\r
87         color: var(--scolor-4);\r
88         float: left;\r
89         font-size: 16px;\r
90         display: block;\r
91 }\r
92 \r
93 /*temp*/\r
94 .card.wide .header h1 {\r
95     /*float: none;*/\r
96     float: left;\r
97 }\r
98 \r
99 .card ul {\r
100     list-style-type: none;\r
101     margin: 0;\r
102     padding: 0;\r
103 }\r
104 .card li {\r
105     padding: 2px;\r
106     margin-bottom: 2px;\r
107         border-bottom: 1px solid lightgray;\r
108 }\r
109 .card li::before {\r
110         content: "# ";\r
111 }\r
112 .card li.selected::before{\r
113         content: "#>";\r
114 }\r
115 \r
116 .card li:hover {\r
117     background-color: #EEE;\r
118 }\r
119 \r
120 .card .footing {\r
121     padding-bottom: 5px;\r
122     color: red;\r
123 }\r
124 /*\r
125 Card top navigation\r
126 probably not all are used.\r
127 */\r
128 \r
129 /* Add a black background color to the top navigation */\r
130 .topnav {\r
131     /*background-color: #333;*/\r
132     background-color: transparent;\r
133     overflow: hidden;\r
134 }\r
135 \r
136 /* Style the links inside the navigation bar */\r
137 .topnav a {\r
138     float: right;\r
139     /*display: inline-block;*/\r
140     color: var(--scolor-3);\r
141     text-align: center;\r
142     padding: 12px 8px;\r
143     text-decoration: none;\r
144         font-size: 16px;\r
145 }\r
146 \r
147 /* Add a color to the active/current link */\r
148 .topnav a.active {\r
149     background-color: #4CAF50;\r
150     color: var(--scolor-3);\r
151 }\r