ss14_chemistry_site/assets/style.css

/* Общая характеристика */
body {
	background-color: #242829;
}

/* Заморочная настройка переключателей */
.Select {
	background-color: rgb(27, 29, 30);
	color: #fff;
	font-family: 'Mulish', sans-serif;
	font-size: 2vh;
}
.Select-input > input {
	color: #fff;
}
.Select .Select-value {
	background-color: rgb(27, 29, 30);
}
.Select-control {
  background-color: rgb(25, 25, 25) !important;
	color: #fff;
	font-family: 'Mulish', sans-serif;
	font-size: 2vh;
}
.Select-menu-outer {
	background-color: rgb(27, 29, 30);
	color: #fff;
	border-radius: 10;
}
.has-value.Select--single>.Select-control .Select-value .Select-value-label, .has-value.is-pseudo-focused.Select--single>.Select-control .Select-value .Select-value-label{
	color: white;
}

.Select-value {
	font-family: 'Mulish', sans-serif;
	font-size: 2vh;
}
.Select-placeholder {
	font-family: 'Mulish', sans-serif;
	font-size: 2vh;
}

.Select-clear {
	font-size: 30px;
}


/* Верхняя панель */
.panel {
	background-color: #161819;
	margin: -8px;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}

.logo {
	padding: 10px;
	width: 4vh;0
}
.git_logo {
	width: 3.2vh;
}
.soc_logo {
	width: 3.2vh;
	filter: brightness(0) invert(1);
}

.react_vol_out {
	padding-top: 10vh;
	width: 80vh;
}

.react_vol {
	display: flex;
	flexDirection: row;
}
.vol {
	flex: 1;
	padding-left: 25px;
	min-width: 100px;
}

/* Иконка + текст слева в панели */
.img_text_panel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	flex: 1;
}

/* Кнопки социалок */
.soc_buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	flex: 1;
	justify-content: center;
	gap: 10px;
}


/* Div для социалок */
.socials {
  background-color: #2e4ebf;
  border-radius: 15px;
  display: flex;
  flex-direction: row;
  padding-left: 1%;
  padding-right: 4%;
	align-items: center;
/*	height: 60%; */
	height: 4vh;
	max-height: 35px;
}
/* Текст социалок */
.soc_text {
  color: white;
  padding-left: 8%;
	font-size: 1.6vh;
	font-family: 'Mulish', sans-serif;
}

.empty_box {
	flex: 1;
}

/* Отключить декорацию всего (сделано для убирания подчёркивания ссылок) */
a {
	text-decoration: none;
}


/* Действия при разрешении телефона */
@media (max-width: 900px) {

	.empty_box {
		flex: 0;
	}
	.soc_buttons {
		justify-content: right;
	}

}
/* Сверхузкие телефоны */
@media (max-width: 400px) {
	.react_vol {
		flex-direction: column;
	}
	.vol {
		padding-top: 8px;
}