X-Git-Url: https://git.josue.xyz/?p=VSoRC%2F.git;a=blobdiff_plain;f=styles%2Fcards.css;fp=styles%2Fcards.css;h=405579cbfb1a3b870042a8d4f6684400af8d5c8d;hp=0000000000000000000000000000000000000000;hb=4ff4cfab60fd88f431c88603d57612fc489dc62f;hpb=ea20f018c05bcc4e56b2dfa3eee30af0d6ffabf3

diff --git a/styles/cards.css b/styles/cards.css
new file mode 100644
index 0000000..405579c
--- /dev/null
+++ b/styles/cards.css
@@ -0,0 +1,151 @@
+/*
+    Copyright (c) Maen Artimy, 2018
+*/
+
+.card {
+	background-color: transparent;
+	float: left;
+    /*box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);*/
+    transition: 0.3s;
+    width: 430px;
+    font-size: 14px;
+    margin: 0px 10px 20px 10px;
+}
+
+.card:nth-of-type(even) {
+    clear: right;
+ }
+
+.card .header {
+    border-style: solid;
+    border-color: var(--scolor-3);
+    border-width: 2px 0 2px 0;
+	padding: 0px 16px;
+}
+
+.container {
+    overflow-x: auto;
+}
+
+.card .container {
+	width: 100%;
+	transition: 1s;
+	/*overflow: auto;*/
+
+	height: 150px;
+    padding: 8px 16px;
+}
+
+.card.bar {
+    padding: 0px 16px;
+}
+
+.card.bar button {
+	margin: 2px 8px;
+}
+
+.card.wide {
+	float: none;
+    width: 1100px; /*needs to be fixed*/
+}
+
+.card.wide .container{
+    height: auto;
+    padding: 8px 16px;
+}
+
+.card:hover {
+    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
+}
+
+.card .header button {
+    background-color: transparent;
+    color: black;
+    cursor: pointer;
+    padding: 18px;
+    width: 100%;
+    border: none;
+    text-align: left;
+    outline: none;
+    font-size: 15px;
+    transition: 0.4s;
+}
+
+.card .header button::after {
+    content: '\002B';
+    color: black;
+    font-weight: bold;
+    float: right;
+    margin-left: 5px;
+}
+
+.card .header button.active::after {
+    content: "\2212";
+}
+
+.card .header h1 {
+	color: var(--scolor-4);
+	float: left;
+	font-size: 16px;
+	display: block;
+}
+
+/*temp*/
+.card.wide .header h1 {
+    /*float: none;*/
+    float: left;
+}
+
+.card ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+.card li {
+    padding: 2px;
+    margin-bottom: 2px;
+	border-bottom: 1px solid lightgray;
+}
+.card li::before {
+	content: "# ";
+}
+.card li.selected::before{
+	content: "#>";
+}
+
+.card li:hover {
+    background-color: #EEE;
+}
+
+.card .footing {
+    padding-bottom: 5px;
+    color: red;
+}
+/*
+Card top navigation
+probably not all are used.
+*/
+
+/* Add a black background color to the top navigation */
+.topnav {
+    /*background-color: #333;*/
+    background-color: transparent;
+    overflow: hidden;
+}
+
+/* Style the links inside the navigation bar */
+.topnav a {
+    float: right;
+    /*display: inline-block;*/
+    color: var(--scolor-3);
+    text-align: center;
+    padding: 12px 8px;
+    text-decoration: none;
+	font-size: 16px;
+}
+
+/* Add a color to the active/current link */
+.topnav a.active {
+    background-color: #4CAF50;
+    color: var(--scolor-3);
+}