krz/palettes

  1@import url(https://use.fontawesome.com/releases/v5.0.10/css/all.css);
  2
  3body {
  4	background: white;
  5	transition: all 0.3s ease-in-out;
  6	-moz-transition: all 0.3s ease-in-out;
  7	-webkit-transition: all 0.3s ease-in-out;
  8	-o-transition: all 0.3s ease-in-out;
  9}
 10
 11.custom-bg {
 12	background-color: #161616;
 13}
 14
 15.nav-link:focus {
 16	outline: none;
 17}
 18
 19.far.fa-moon,
 20.fas.fa-sun {
 21	color: gold;
 22}
 23
 24.container-fluid {
 25	align-items: center;
 26	display: flex;
 27	height: 100vh;
 28	justify-content: center;
 29	width: 100%;
 30}
 31
 32.row {
 33	height: 75%;
 34	width: 75%;
 35}
 36
 37.col-lg-2 {
 38	align-items: center;
 39	color: black;
 40	display: flex;
 41	flex-direction: column;
 42	justify-content: center;
 43}
 44
 45.color-column-toolbar {
 46	font-size: 0.8rem;
 47	position: absolute;
 48	top: 0;
 49	right: 0;
 50	left: 0;
 51	padding: 0.5rem;
 52	background-color: rgba(0, 0, 0, 0.5);
 53}
 54
 55.color-column-toolbar a {
 56	color: white;
 57	text-decoration: none;
 58	padding: 0 7px;
 59}
 60
 61.color-column-toolbar a:hover,
 62.color-column-toolbar a:focus {
 63	color: rgba(255, 255, 255, 0.7);
 64}
 65
 66.color-rgb,
 67.color-hex,
 68.color-rgb-label,
 69.color-hex-label {
 70	padding-bottom: 1.5rem;
 71}
 72
 73.color-rgb:hover,
 74.color-hex:hover,
 75.color-cmyk:hover {
 76	cursor: pointer;
 77}
 78
 79.color-rgb:active,
 80.color-hex:active,
 81.color-cmyk:active {
 82	opacity: 0.5;
 83}
 84
 85.toast-alert {
 86	bottom: 0;
 87	margin: 0 auto 2rem auto;
 88	position: fixed;
 89	width: 75%;
 90}
 91
 92.navbar-dark .navbar-nav .nav-link {
 93	color: lightgray;
 94}
 95
 96.nav-link {
 97	opacity: 0.8;
 98}
 99
100.nav-link:hover {
101	opacity: 1;
102}
103
104.col-lg-2 {
105	cursor: default;
106}
107
108.color-value,
109.color-rgb-label,
110.color-hex-label,
111.color-cmyk-label {
112	font-size: 1.5rem;
113}
114
115.palette-image {
116	width: 100%;
117}
118
119.modal-header,
120.modal-footer {
121	border-color: #5b5b5b;
122}
123
124.modal-content {
125	background-color: #202020;
126	color: #fff;
127}
128
129.modal-content span,
130.modal-content span:hover {
131	color: #fff;
132}
133
134.modal-content .form-control {
135	background-color: #3b3b3b;
136	border: 1px solid #5b5b5b;
137	color: white;
138}
139
140#inputColor,
141#inputColumn,
142#inputColumn:active {
143	background-color: #202020;
144	color: #fff;
145}
146
147#inputHelp {
148	color: gold;
149}
150
151@media (max-width: 768px) {
152	.row {
153		width: 100%;
154	}
155
156	.toast-alert {
157		margin: auto;
158		width: 100%;
159	}
160
161	.color-value,
162	.color-rgb-label,
163	.color-hex-label,
164	.color-cmyk-label {
165		font-size: 1.25rem;
166	}
167}
168
169@media (max-width: 576px) {
170	.color-value,
171	.color-rgb-label,
172	.color-hex-label,
173	.color-cmyk-label {
174		font-size: 1rem;
175	}
176}