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