/* Stylesheet for COMP466 TMA1 part 4 by JD Lien */

/* Enable dark theme support for modern browsers. */
:root {
	color-scheme: light dark;
}

* {
	box-sizing: border-box;
}

body {
	font-family: "Helvetica", sans-serif;
	margin:0;
	padding:0;
}

header {
	position:relative;
	background-color: #1B365D;
	background-color: #8888;
	padding:8px;
	box-shadow: 0 0 15px 2px black;
}

ul li+li {
	margin-top:12px;
}

input {
	/* 16px is good for responsive designs so iPhones don't auto-zoom in when interacted with */
	font-size:16px;
	border:1px inset rgba(127,127,127,0.6);
	padding:4px;
	border-radius:6px;
}


/* Remove the stupid spinners on numeric input types as I only use them to get the numeric keyboard on mobile devices */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* Apparently some margin are still there even though it's hidden */
}
input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}


select {
	font-size:16px;
}



/* The button/link to show the menu on smaller screens */
#menuCheckbox {
    display: none;
}

/* Checkbox hack to hide/show menu for mobile */
input[type='checkbox']:checked ~ nav
{
    display: block;
}

#menu {
    display: none;
    width: 70px;
    text-align: center;
}

input[type='checkbox'] ~ #menu:after {
	content:"⇩";
}

input[type='checkbox']:checked ~ #menu:after {
	content:"⇧";
}

nav {
	border: 1px solid rgba(127,127,127,0.4);
}

nav ul {
	margin-top:5px;
	margin-bottom:5px;
	padding:0px;
	text-align: center;
}

nav li {
	display: inline-block;
	margin: 1px 6px;
	padding:0;
}

nav a {
	border-radius:5px;
	padding: 3px;
}

nav a.selected {
	text-decoration: none;
	background-color:rgba(127,127,127,0.2);
	color:inherit;
}

main {
	padding:5px 12px;
}

p {
	margin-top:2px;
}

/* Styles for headings in the header */
header h1,
header h2,
header h3 {
	text-align: center;
	margin-top:2px;
}

header h1 {
	margin:0;
}

footer {
	text-align: center;
	margin:20px;
	opacity:0.7;
}

h2, h3 {
	margin:10px 0;
}

h3+ul {
	margin-top:0px;
}

h3 {
	margin-top:30px;
}



/* Styles that give a nice layout for forms with many fields */
.form > label, .form > .formItem {
	display: block;
	width: 350px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom:10px;
}

/* Default an input in formitem to 100%. This will need to be overridden if there is more than one */
.formItem input,
.formItem select {
	width:100%;
}

.form > .formItem .formGroup,
.form > label input,
.form > label select {
	width:190px;
	position:relative;
}

/* classes of inputs that have special labels */
.inputSymbol {
	color:gray;
	position:absolute;
	left:4px;
	top:20%;
}
.inputSymbol+input {
	padding-left:15px;
}

.inputSymbol.post {
	left:initial;
	right:4px;
}
.inputSymbol.post+input {
	padding-right:20px;
	padding-left :0;
}

input.percent {
	text-align: right;
}

/* Allow space for the "years" placeholder */
#amortization {
	text-align: right;
	padding-right:50px;
	padding-left:15px;
}

/* style common to single buttons and elements of .buttons */
.button,
.buttons li:not(.buttonsLabel),
.ui-button.ui-corner-all.ui-widget {
    font-size: 14px;

    margin: 8px 8px 0 4px;
    padding: 6px;

    cursor: pointer;
    text-align: center;
    text-decoration: none;

    color: black;
    border: 1px solid #999;
    border-radius: 4px;
    background-color: #ddd;
    background-image: linear-gradient(to top,  #ccc, #f7f7f7);
    /*font-family: Helvetica, Arial, sans-serif;*/
}

#mainConvert {
	text-align: center;
}

label[for="convertFrom"], #convertToLabel {
	font-size: 18px;
	font-weight: bold;
	display:block;
	margin-bottom:8px;
}

#convertToLabel {
	margin-top:20px;
	padding-top:10px;
	border-top:1px solid rgba(127,127,127,0.5);
}

/* The main input box */
#convertFrom {
	margin:0 auto;
	text-align: center;
	width:300px;
}

#fromUnitSelect {
	font-size:16px;
	display:block;
	margin:12px auto;
}

#typeTabs {
	display:flex;
	justify-content: center;
	margin-top:6px;
	padding-top:10px;
}

.tab {
	background-color: #888;
	padding:8px;
	margin: 0 8px;
	box-shadow: 0 0 4px rgba(0,0,0,0.5);
	color:#DDD;
	text-decoration: none;
	border-top-left-radius:8px;
	border-top-right-radius:8px;
	min-width:60px;
	text-align: center;
}

#mainResult {
	font-size:18px;
	font-weight:bold;
}

#extraInfo h3 {
	margin-bottom:0;
}

.tab:hover {
	color:white;
	background-color: #2f4f7d
}

.tab.selected {
	background-color: #71abff;
	color: black;
	box-shadow: none;
}

.tabContents {
	display:none;
}

.tabContents table {
	margin:0 auto;
	min-width:200px;
}

.tabContents th {
	background-color:var(--athBlue);
	color:white;

}

td.selection {
	text-align: center;
}

.tabContents tbody tr:nth-child(even) {
	background-color:rgba(127,127,127,0.1);
}

.tabContents tbody tr:nth-child(odd) {
	background-color:rgba(127,127,127,0.2);
}

.tabContents tr td {
	padding:2px 6px;
}

.tabContents tr td:last-child {
	text-align: right;
}

/* Media query to set colors for dark themes */
@media (prefers-color-scheme: dark) {
	body {
		background-color: #171717;
		color:lightgray;
	}

	a {
		color: lightblue;
	}

	input {
		background-color: rgb(30, 30, 30);
		color: white;
	}

	.button,
	.buttons li:not(.buttonsLabel) {
	    color: white;
	    border-color: #444;
	    border-radius: 4px;
	    background-color: #888;
	    background-image: linear-gradient(to bottom,  #777, #000);
	}

} /* end dark styles */

/* Media query for narrow screens */
@media (max-width: 700px) {


    #menu {
        display: block;
    }

    nav {
        display: none;
        /*legacy width support*/

        width: 100%;
        width: calc(100% - 10px);
        margin: 0 auto;
        margin-top: 4px;

        border-radius: 4px;
        -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.60);
           -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,.60);
                box-shadow: 0 0 10px 0 rgba(0,0,0,.60);
    }

	nav ul {
		margin: 0;
	}
    nav li {
        display: block;
        text-align: left;
        margin: 0px 0;
		padding-top: 3px;
		padding-bottom: 3px;
    }

    nav li a {
    	padding-left: 5px;
    }

    nav li + li:before {
        font-weight: normal;

        margin: 0;

        content: '';
    }


    nav li:nth-child(odd) {
        background-color: rgba(127,127,127,0.2);
    }

    nav li:nth-child(even) {
        background-color: transparent;
    }

    nav a:hover {
        color: #006300;
        background-color: #ccc;
    }

}

/* Reponsive form for mortgage calculator */

@media (max-width: 400px) {
	.form > label, .form > .formItem {
		width:100%;
		flex-basis:100%;
		flex-wrap:wrap;
	}

	.form > .formItem .formGroup,
	.form > label input,
	.form > label select {
		width:100%;
		flex-basis:100%;
	}

	.form > .formItem label {
		width:100%;
	}

}


/* CSS for Color Converter
 **************************/

#mainColor {
	text-align: center;
	position:relative;
}

.sliderFill {
	width:100%;
	height:100%;
	margin:0 auto;
	cursor:crosshair;
}

#saturation, #alpha {
	height:100%;
}


.slider, .matrix {
	position:relative;
	max-width:600px;
	margin: 0 auto;		
	height:30px;
	margin-top:10px;
}

#colorSelector {
	height:120px;
}


#colorPointer {
	position:absolute;
	/* This will center it */
	top:10%;
	top:50%;
	left:50%;
	left:50%;

	border-radius:50px;
	width:12px;
	height:12px;
	border:2px solid white;
	opacity:0.85;
	box-shadow:0 0 1px black;
	pointer-events: none;
}

.sliderPointer {
	position:absolute;
	right:0;
	top:0;
	width:7px;
	height:100%;
	border: 2px solid white;
	border-radius:2px;
	opacity:0.85;
	box-shadow:0 0 1px black;
	pointer-events: none;
}


.slider label {
	color: white;
	opacity:85%;
	position:absolute;
	top:7px;
	left:50%;
	transform: translate(-50%, 0);
	text-align: center;
	text-shadow: 0 0 3px black;
	pointer-events: none;
}


.swatches {
	display:flex;
	max-width:600px;
	margin:10px auto;
	justify-content: space-between;
}

.swatchBack,.swatch {
	width:100px;
	height:60px;
	max-width:100%;
	margin:0;
	background-color:white;
	/* This is the default when the page loads*/
}

#colorSwatchBackgroundBlack,
#colorSwatchBackgroundBlackTrans {
	background-color:black;
}

.swatch {
	background-color: rgb(0, 127, 127);
	display:flex;
	justify-content: center;
	align-items: center;
	color:black;
	/*text-shadow: 0 0 3px white;*/
}

#colorSwatchBlack,
#colorSwatchBlackTrans {
	color:white;
	/*text-shadow: 0 0 3px black;*/
}

#colorSwatchTrans {
	color: rgba(0,0,0,0.5);
	text-shadow: 0 0 3px white;
}

#inputArea {
	margin: 0 auto;
	max-width:600px;
	margin-top:20px;
	display:flex;
	flex-wrap:wrap;
	justify-content: space-around;
	align-items: center;
}

#inputArea input {
	height:30px;
}

label[for="colorInput"] {
	text-align: center;
}

/* This uses a complex gradient to create a checkered pattern so you can see the transparency */
.checkered, .slider {
	background-color:rgba(255,255,255,0.5);
	background-image: linear-gradient(45deg, rgba(0,0,0,0.5) 25%, transparent 25%), linear-gradient(-45deg, rgba(0,0,0,0.5) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(0,0,0,0.5) 75%), linear-gradient(-45deg, transparent 75%, rgba(0,0,0,0.5) 75%);
	background-size: 20px 20px;
	background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

#colorValues {
	margin-top:20px;
}

#colorValues td,
#alphaColorValues td {
	background-color: rgba(127,127,127,0.2);
	height:20px;
	text-align: center;
	padding:0 5px;
	width:220px;
}

#colorValues th,
#alphaColorValues th {
	background-color: rgba(127,127,127,0.5);
	padding:0 5px;
}


/* Utility Classes */
.hidden {display:none;}

.text-center {text-align: center;}

.opacity-30 {opacity:0.3;}
.opacity-40 {opacity:0.4;}
.opacity-50 {opacity:0.5;}
.opacity-60 {opacity:0.6;}
.opacity-70 {opacity:0.7;}
.opacity-80 {opacity:0.8;}


.glow {text-shadow:0 0 10px white;}

.rounded-none {border-radius: 0px;}
.rounded-sm	{border-radius: 0.125rem;}
.rounded {border-radius: 0.25rem;}
.rounded-md {border-radius: 0.375rem;}
.rounded-lg {border-radius: 0.5rem;}
.rounded-xl {border-radius: 0.75rem;}
.rounded-2xl {border-radius: 1rem;}