first commit

css/style.css

@@ -0,0 +1,262 @@
+.action-item {
+	position: relative;
+}
+
+a {
+	color          : #337ab7;
+	text-decoration: none;
+}
+
+a:hover,
+a:focus {
+	color          : #23527c;
+	text-decoration: underline;
+}
+
+a:focus {
+	outline       : 5px auto -webkit-focus-ring-color;
+	outline-offset: -2px;
+}
+
+#ncdownloader-form-wrapper input {
+	display: block;
+}
+
+div .number {
+	background   : none repeat scroll 0 0 #5f5853;
+	border-radius: 999px;
+	color        : #FFFFFF;
+	display      : inline-block;
+	font-size    : 15px;
+	font-style   : italic;
+	height       : 20px;
+	line-height  : 20px;
+	margin-right : 10px;
+	padding      : 0 8px;
+}
+
+#ncdownloader-form-wrapper input[type=text] {
+	padding: 0px 5px;
+	width  : 100%;
+}
+
+#ncdownloader-table-data .table-cell {
+	padding-left: 4px;
+}
+
+.icon-power {
+	background-image: url('../img/power.svg');
+}
+
+.icon-purge {
+	background-image: url('../img/trash.svg');
+}
+.icon-unpause {
+	background-image: url('../img/play.svg');
+}
+#ncdownloader-action-links-container {
+	position: relative;
+}
+
+#ncdownloader-action-links-container ul {
+	background-color: #ededed;
+}
+
+#ncdownloader-action-links-container .action-link-item a:hover {
+	background-color: #c2afaf;
+}
+
+#ncdownloader-message-banner.success,
+.message-banner.success {
+	color           : #3c763d;
+	background-color: #dff0d8;
+	border-color    : #d6e9c6;
+	width           : fit-content;
+}
+
+#ncdownloader-message-banner.error,
+.message-banner.error {
+	color           : #a94442;
+	background-color: #f2dede;
+	border-color    : #ebccd1;
+	width           : fit-content;
+}
+
+
+
+.action-links {
+	/*visibility: hidden;*/
+	display         : none;
+	position        : absolute;
+	background-color: #f1f1f1;
+	min-width       : 60px;
+	box-shadow      : 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+	z-index         : 9999;
+}
+
+.action-link-item a {
+	color          : black;
+	padding        : 6px 6px;
+	text-decoration: none;
+	display        : block;
+}
+
+.app-ncdownloader,
+#ncdownloader-content {
+	width: 100%;
+}
+
+.ncdownloader-content-wrapper {
+	width      : 100%;
+	padding-top: 0.3em;
+}
+
+#ncdownloader-form-wrapper {
+	width: 100%;
+}
+
+
+#ncdownloader-table-content {
+	width: 100%;
+}
+
+.app-ncdownloader #app-content #app-content-wrapper {
+	flex-wrap: wrap;
+}
+
+#app-content-wrapper #ncdownloader-table-content thead>tr {
+	height          : 30px;
+	background-color: #eee;
+}
+
+#app-content-wrapper #ncdownloader-table-content thead>tr>th {
+	font-style   : italic;
+	font-weight  : bold;
+	padding      : 2px 0 2px 5px;
+	border-bottom: 1px solid #ddd;
+	text-align   : left;
+}
+
+#ncdownloader-table-content thead.table-heading th {
+	border-left: 1px solid rgb(216, 202, 202);
+}
+
+#app-content-wrapper #ncdownloader-table-content .table-cell {
+	border-bottom: 1px solid #9d9595;
+	border-left  : 1px solid #eee;
+
+}
+
+.app-navigation-entry-bullet {
+	background-color: rgb(80, 80, 173);
+}
+
+.notinstalled {
+	color: red;
+}
+
+@media only screen and (min-width: 800px) {}
+
+@media only screen and (max-width: 1024px) {
+	#ncdownloader-form-wrapper {
+		position  : relative;
+		margin-top: 2em;
+	}
+}
+
+
+/* from bootstrap */
+.visually-hidden,
+.visually-hidden-focusable:not(:focus):not(:focus-within) {
+	position   : absolute !important;
+	width      : 1px !important;
+	height     : 1px !important;
+	padding    : 0 !important;
+	margin     : -1px !important;
+	overflow   : hidden !important;
+	clip       : rect(0, 0, 0, 0) !important;
+	white-space: nowrap !important;
+	border     : 0 !important;
+}
+
+@-webkit-keyframes spinner-border {
+	to {
+		transform: rotate(360deg)
+			/* rtl  :ignore */
+		;
+	}
+}
+
+@keyframes spinner-border {
+	to {
+		transform: rotate(360deg)
+			/* rtl  :ignore */
+		;
+	}
+}
+
+.spinner-border {
+	display           : inline-block;
+	width             : 2rem;
+	height            : 2rem;
+	vertical-align    : -0.125em;
+	border            : 0.25em solid currentColor;
+	border-right-color: transparent;
+	border-radius     : 50%;
+	-webkit-animation : 0.75s linear infinite spinner-border;
+	animation         : 0.75s linear infinite spinner-border;
+}
+
+.spinner-border-sm {
+	width       : 1rem;
+	height      : 1rem;
+	border-width: 0.2em;
+}
+
+@-webkit-keyframes spinner-grow {
+	0% {
+		transform: scale(0);
+	}
+
+	50% {
+		opacity  : 1;
+		transform: none;
+	}
+}
+
+@keyframes spinner-grow {
+	0% {
+		transform: scale(0);
+	}
+
+	50% {
+		opacity  : 1;
+		transform: none;
+	}
+}
+
+.spinner-grow {
+	display          : inline-block;
+	width            : 2rem;
+	height           : 2rem;
+	vertical-align   : -0.125em;
+	background-color : currentColor;
+	border-radius    : 50%;
+	opacity          : 0;
+	-webkit-animation: 0.75s linear infinite spinner-grow;
+	animation        : 0.75s linear infinite spinner-grow;
+}
+
+.spinner-grow-sm {
+	width : 1rem;
+	height: 1rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+
+	.spinner-border,
+	.spinner-grow {
+		-webkit-animation-duration: 1.5s;
+		animation-duration        : 1.5s;
+	}
+}