cahier-de-bridge/css/menu.css

Gestion d'un éditeur de mains de bridge

.menu {
	width: 100%;
	height: 48px;
	background-color: lightgray;
	display: flex;
	flex-direction: row;
	border-radius: 5px;
	justify-content: flex-start;
	align-items: center;
	padding-right: 0.5em;
}

.menu2 {
	position: relative;
	display: flex;
	flex-direction: row;
	z-index: 20;
	height: 100%;
}

.menuC {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.menuD {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	align-self: flex-end;
}
.menuD button {
	border-radius: 25%;
	margin: 5px;
	cursor: pointer;
}

.menu button:disabled {
	opacity: 0.3;
	cursor: default;
}

.level0 {
	position: relative;
	width: 50px;
	background-repeat: no-repeat;
	background-position: center center;
	background-color: inherit;
	cursor: pointer;
}

.level0:hover {
	background-color: rgb(209, 197, 183);
	z-index: 20;
}
.level1 {
	display: none;
	position: absolute;
	flex-direction: column;
	justify-content: flex-start;
	top: 100%;
	padding: 8px 5px;
	border: 1px black solid;
	width: max-content;
	align-items: flex-start;
	border-radius: 8px;
	z-index: 20;
	background-color: antiquewhite;
}

.level1 li {
	width: 100%;
}
.level1 li ul {
	margin-top: 4px;
}

.itmh {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	white-space: nowrap;
	background-color: inherit;
	box-sizing: border-box;
}

button.itmh {
	color: black;
	border: none;
	font-size: 1em;
}
button.itmh img {
	margin-right: 5px;
	width: 32px;
}
button.itmh:hover:not(:disabled) {
	font-weight: bolder;
	cursor: pointer;
}

label.itmh {
	color: black;
	border: none;
	font-size: 1em;
}
label.itmh img {
	margin-right: 5px;
	width: 32px;
}
label.itmh:hover:not(:disabled) {
	font-weight: bolder;
	cursor: pointer;
}

select.itmh {
	width: max-content;
}
.itmh input[type="number"] {
	max-width: 4em;
}

.spa {
	justify-content: space-around;
}
.spe {
	justify-content: space-evenly;
}
.cbx_fonts {
	overflow: visible;
}

.itmh input[type="number"] {
	max-width: 4em;
	margin-right: 5px;
}

.level0.open .level1 {
	display: flex;
}

.glowchk {
	/* Pas de case à cocher */
	display: none;
}
.glowchk + label {
	position: relative;
	cursor: pointer;
	transition: color 0.3s ease;
	border-radius: 5px;
}
.glowchk:not(:checked):hover + label {
	color: rgb(0, 47, 255);
}
.glowchk:checked + label {
	color: antiquewhite;
	background-color: black;
}
ul.ff_btns {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-content: center;
}
ul.ff_btns input:not([type="number"]) {
	display: none;
}
.ff_btns label {
	cursor: pointer;
	font-size: 24px;
	margin-right: 8px;
}
.ff_btns label:hover {
	color: blue;
	background-color: aliceblue;
}
.ff_btns input:checked + label {
	border-bottom: 3px blue solid;
	color: blue;
}
/* summary */
.level1 summary {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
}
/* Pour aligner le contenu, on utilise ::before au lieu de ::marker, car inline-flex */
.level1 summary::before {
	content: "\25B6\0020";
	font-size: 1.3em;
}
.level1 [open] summary::before {
	content: "\25BC\0020";
}
.level1 details button,
.level1 details label {
	margin-left: 8px;
}
.level1 details img {
	width: auto;
	height: auto;
}

/* Style the caret/arrow */
.caret {
	cursor: pointer;
	user-select: none; /* Prevent text selection */
}

/* Create the caret/arrow with a unicode, and style it */
.caret::before {
	content: "\25B6";
	color: black;
	display: inline-block;
	margin-right: 6px;
}

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.caret-down::before {
	transform: rotate(90deg);
}

/* Hide the  list */
.nested {
	display: none;
	padding-left: 1em;
	padding-bottom: 1em;
}
.nested .jolichk {
	margin-left: 0;
}

/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.active {
	display: block;
}

@media (width <= 900px) {
	.menu2 {
		position: absolute;
		flex-direction: column;
		top: 50px;
		transform: translate(-120%);
		transition: none;
		height: max-content;
		transition: transform 0.3s ease-out;
		background-color: inherit;
		z-index: 1;
	}

	.level0 {
		height: 50px;
	}
	.level1 {
		top: 0;
		left: 100%;
		flex-direction: column;
		align-items: flex-start;
	}

	.menu2.open {
		transform: translate(0%);
	}
}