:root { --widget-color-1: rgb(3,252,171); --reminder-color-1: yellow; --reminder-color-2: orange; --reminder-color-3: red; --reminder-color-4: brown; --reminder-color-5: slateblue; } noscript { display: block; position: fixed; width: 100%; top: 200px; text-align: center; /* left: 50%; */ /* -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); */ } body { display: block; background-color: rgb(35, 35, 35); /* color: #bbb; */ /*rgb(175,175,175);*/ /* font-family: 'Roboto', 'Open Sans', 'Poiret One'; font-weight: 200; */ margin: 0; padding: 0; width: 100vw; /* width: calc(100% + 17px); */ overflow-x: hidden; overflow-y: scroll; } /* to allow overflow properties to work everywhere as they do not work on on mobile */ #body-wrapper { display: block; background-color: rgb(35, 35, 35); color: #bbb; /*rgb(175,175,175);*/ font-family: 'Roboto', 'Open Sans', 'Poiret One'; font-weight: 200; margin: 0; padding: 0; width: 100 vw; min-height: 100 vh; /* width: calc(100vw + 17px); */ overflow: hidden; /* overflow-y: scroll; */ } nav { position: fixed; z-index: 5; top: 0; /* width: 100vw; */ width: calc(100vw - 17px); height: 60px; margin: 0 0 auto 0; background-color: rgba(25, 25, 25, 0.8); color: #80ff80; /*#FFA33E;*/ box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.19), 0 6px 20px 2px rgba(0, 0, 0, 0.20); border-bottom: 1px solid black; } .h1-main { margin-top: 16px; /* centered vertically in nav bar */ } h1, p { text-align: center; } .h1-desktop { display: inherit; } .h1-mobile-1200max { display: none; } .h1-mobile-600max { display: none; } /* #welcomeInstance { margin-top: 70px; } */ #todayDateInstance { font-size: 0.9em; } #session-time-vue-component, #tempOttawa { font-size: 0.8em; } /* #session-time-vue-component { position: absolute; width: 230px; margin: 0; top: 10px; right: 5px; } */ #session-time-vue-component { position: fixed; z-index: 3; width: 230px; margin: 0; top: -40px; /* height minus 10px */ /* top: 10px; */ right: 12px; color: #80ff80; -webkit-transition: -webkit-transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; -o-transition: transform 0.3s ease; transition: transform 0.3s ease; } #session-time-btn-svg-used { position: absolute; bottom: 11px; right: 12px; } #session-time-btn-svg-used:hover { cursor: pointer; } #session-history-btn-svg-used { position: absolute; bottom: 13px; right: 212px; } #session-history-btn-svg-used:hover { cursor: pointer; } main { display: flex; flex-direction: row; /*align-items: center;*/ justify-content: center; align-items: center; } #to-do-instance { position: relative; /* overflow: hidden; */ right: -100vw; display: flex; flex-direction: column; align-items: center; justify-content: space-around; margin: 75px 0 0 0; background-color: rgb(25, 25, 25); border: 1px solid black; width: 65%; /*max-height: 70%;*/ box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.19), 0 6px 20px 2px rgba(0, 0, 0, 0.20); /*overflow-y:auto;*/ zoom: 1.0; /* IE8 and older, works in Chrome */ /* -webkit-transform: scale(1.3); Chrome, Safari, Opera */ /* -moz-transform: scale(1.3); Firefox */ /* -ms-transform: scale(1.3); IE 9 */ /* -o-transform: scale(1.3); Opera */ /* transform: scale(1.3); */ -webkit-transform-origin: top center; -moz-transform-origin: top center; -ms-transform-origin: top center; -o-transform-origin: top center; transform-origin: top center; } #to-do-instance p { margin-top: 10px; } form { align-self: center; } input { background-color: #bbb; font-family: 'Roboto', 'Open Sans', 'Poiret One'; width: 210px; box-sizing: border-box; } #addToList:invalid { background-color: #e06565; } button { background-color: #80ff80; /*#FFA33E;*/ border: solid 1px black; border-radius: 0.25em; font-family: 'Roboto', 'Open Sans', 'Poiret One'; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .up, .down, .del { margin: 0 0 2px 5px; width: 23px; /*19px;*/ height: 23px; /*19px;*/ padding: 0; font-size: 0.8em; } button:hover, .crossout:hover { cursor: pointer; } ul.todo-list { list-style-type: disc; /*does not work with Flex!*/ font-family: 'Rubik'; margin: 10px 5px 15px 5px; padding: 0; position: relative; /*left: -11px;*/ /*background-color: blue;*/ width: 90%; overflow-x: hidden; } li:first-child .up { visibility: hidden; } li:last-child .down { visibility: hidden; } li > span:first-child { cursor: grab; } ul.todo-list li { display: flex; position: relative; left: 110%; justify-content: space-between; align-items: stretch; line-height: 1.5em; font-size: 1.15em; margin: 3px 0 1px 0; padding: 0; border-bottom: 1px solid #353535; color: #ddd; -webkit-transition: -webkit-transform 500ms ease; -moz-transition: transform 500ms ease; -ms-transition: transform 500ms ease; -o-transition: transform 500ms ease; transition: transform 500ms ease; } ul.todo-list li span:nth-child(1) { width: 70%; padding: 0 2px 0 0; outline: none; } ul.todo-list li span:nth-child(2) { width: 180px; /* 160px */ padding: 0; margin-right: 0; position: relative; left: 20px; } .crossout { /* display: inline; */ width: 17px; height: 17px; position: relative; top: 4px; margin: 0; padding: 0; } #logo1 { background-color: none; position: fixed; top: 80px; left: 40px; width: 130px; } #logo1:hover { cursor: pointer; } a { color: #707ac0; text-decoration-color: none; margin-left: 10px; } #restore-items, #clear-items { color: black; margin-bottom: 7px; font-size: .7em; cursor: default; } #restore-items:disabled { background-color: #777; } #clear-items:disabled { background-color: #777; } .dynamicCSS { font-weight: bold; letter-spacing: 1px; } #list-length { font-size: .7em; margin-bottom: 7px; } #color-picker-wrapper { position: absolute; top: 60px; right: 20px; width: 50px; height: 50px; margin: 0; padding: 0; font-size: 1.8em; /* color: #80ff80; */ background-color: transparent; /* #80ff80; #FFA33E; */ border-style: none; outline: none; /* transform: scale(1.1); */ border: none; /* 1px solid white; */ cursor: pointer; } #color-picker-btn-svg-used { position: absolute; bottom: 11px; right: 62px; margin: 0; padding: 0; cursor: pointer; } #pick-color { position: absolute; top: 60px; right: 20px; width: 50px; height: 50px; margin: 0; padding: 0; opacity: 0; cursor: pointer; } #tempOttawa { position: fixed; top: 10px; left: 300px; } #scroller1 { display: block; position: fixed; margin: 0; padding: 0; color: #bbb; font-size: .9em; bottom: 50px; left: 50px; } #scroller2 { display: block; position: fixed; margin: 0; padding: 0; color: #bbb; font-size: .9em; bottom: 30px; left: 50px; transform-origin: left center; } #scroller1:hover, #scroller2:hover { cursor: pointer; } #weatherOttawa { color: var(--widget-color-1); /*rgb(3,252,171);*/ font-size: 0.8em; display: inline; position: fixed; padding: 5px 10px 10px 10px; border: 2px solid; border-radius: 10%; top: 80px; right: 20px; line-height: 1.3em; } #weatherOttawa:first-line { text-align: center; font-size: 1.1em; } #weatherOttawa p:last-child { text-align: center; font-size: 0.8em; } pre { font-family: 'Roboto', 'Open Sans', 'Poiret One'; } #windDir { font-size: 0.8em; } .timeStamp { text-align: left; padding-top: 0.2em; font-size: 0.6em; font-weight: normal; width: 70px; /*60px;*/ color: #80ff80; /*#FFA33E;*/ float: left; } .active { color: yellow; font-weight: bold; } #sort-buttons { margin-top: 7px; display: flex; flex-direction: row; } #sort-alpha { margin-right: 2px; font-size: .7em; } #sort-new-old { margin: 0 2px 0 2px; font-size: .7em; } #sort-old-new { margin-left: 2px; font-size: .7em; } /* .navDynamicCSS { color: #707ac0; } .buttonDynamicCSS { background-color: #707ac0; } .timeStampDynamicCSS { color: #707ac0; } */ /* AUTHENTICATION */ #sign-in-nav-button { position: absolute; /* display: inline; */ right: 162px; bottom: 15px; width: 31px; height: 31px; margin: 0; padding: 0; /* top: 5px; */ font-size: 1.8em; color: #80ff80; background-color: transparent; border-style: none; outline: none; transform: scale(1.1); } #sign-in-nav-text { position: absolute; display: inline; right: 162px; padding: 0; margin: 0; /* top: 5px; */ bottom: 2px; /* width: 31px; */ /* height: 31px; */ font-size: 0.75em; } #sign-in-nav-button:hover { transform: scale(1.2); cursor: pointer; } #sign-in-nav-button:disabled { cursor: default; color: #666; } #auth-container { position: fixed; z-index: 4; display: flex; flex-direction: column; justify-content: space-between; align-items: center; top: -340px; /* height minus 10px */ /* top: 100px; */ right: 280px; /* min-height: 300px; */ width: 250px; height: 330px; color: var(--widget-color-1); /*rgb(3,252,171);*/ background-color: rgba(25, 25, 25); border: 2px solid; border-radius: 10px; -webkit-transition: -webkit-transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; -o-transition: transform 0.3s ease; transition: transform 0.3s ease; } #auth-container-heading { display: flex; flex-direction: column; /* justify-items: center; */ align-items: center; margin: 0 0 10px 0; padding: 0; width: 100%; height: 50px; /* text-align: center; */ } #auth-container-body { display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; width: 100%; height: 280px; margin: 0; } #auth-container form { /* display: inline-block; */ width: 190px; } #auth-container label { font-size: 0.9em; } .credentials { width: 190px; height: 20px; margin-bottom: 10px; } /* #login-btn, #guest-btn { */ #auth-container button { border: 1px solid black; width: 70px; height: 35px; margin-top: 10px; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; } #sign-up-link, #reset-password-link { text-decoration: underline; font-size: .9em; margin-bottom: 5px; cursor: pointer; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE/Edge */ -o-user-select: none; /* Opera */ user-select: none; /* prevents text selection */ } /* #sign-up-link:hover { transform: scale(1.2); } */ [data-text-color='1'] { color: var(--reminder-color-1); } [data-text-color='2'] { color: var(--reminder-color-2); } [data-text-color='3'] { color: var(--reminder-color-3); } [data-text-color='4'] { color: var(--reminder-color-4); } [data-text-color='5'] { color: var(--reminder-color-5); } /************************************** Vue Component: reminder-box.Vue.js **************************************/ #reminder-box, #reminder-popup { position: fixed; z-index: 7; /* width: 200px; height: 225px; */ background-color: black; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.19), 0 6px 20px 2px rgba(0, 0, 0, 0.20); border: 1px solid black; text-align: center; padding: 15px 0 0 0; /* opacity: 1; */ } #reminder-box { width: 200px; height: 225px; border-radius: 0.5em; border: 2px solid var(--widget-color-1); } #reminder-box > form { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; /* background-color: #777; */ /* border: 1px solid red; */ } .reminder-container { display: flex; flex-direction: row; align-items: center; justify-content: space-around; width: 100%; height: 30%; /* background-color: #555; */ /* border: 1px solid yellow; */ } #reminder-time-input { width: 100px; height: 25px; } /* #reminder-colors { align-items: center; display: flex; flex-direction: row; justify-content: space-around; width: 150px; } */ /* #reminder-colors > button { width: 25px; height: 25px; } */ /* radio inputs */ #reminder-colors input { width: 20px; height: 20px; margin: 0; cursor: pointer; /* Hide the default radio button */ opacity: 0; } .radio-container { position: relative; } .radio-container > input { width: 25px; } /* Create a custom radio button */ .checkmark { position: absolute; top: 0; left: 0; height: 20px; width: 20px; margin: 0; border-radius: 50%; /* background-color: #777; */ /* cursor: pointer; */ pointer-events: none; /* opacity: 1; */ } .checkmark[data-text-color='1'] { background-color: var(--reminder-color-1); } .checkmark[data-text-color='2'] { background-color: var(--reminder-color-2); } .checkmark[data-text-color='3'] { background-color: var(--reminder-color-3); } .checkmark[data-text-color='4'] { background-color: var(--reminder-color-4); } .checkmark[data-text-color='5'] { background-color: var(--reminder-color-5); } /* Create the indicator (the dot/circle - hidden when not checked) */ .checkmark:after { content: ""; position: absolute; display: none; } /* Show the indicator (dot/circle) when checked */ .radio-container input:checked ~ .checkmark:after { display: block; } /* Add border to checkmark when checked */ .radio-container input:checked ~ .checkmark { border: 2px solid white; top: -2px; left: -2px; } /* Style the indicator (dot/circle) */ .radio-container .checkmark:after { top: 6px; left: 6px; width: 9px; height: 9px; border-radius: 50%; background: black; } #reminder-box-btn { width: 60px; height: 35px; } .close-btn { position: absolute; bottom: 10px; right: 10px; width: 20px; height: 20px; padding: 0; font-size: 0.9em; color: #ccc; background-color: transparent; border-style: none; outline: none; cursor: pointer; } #reminder-body-fader { position: fixed; z-index: 6; top: 0; left: 0; width: 100vw; height: 100vh; opacity: 0.7; background-color: black; /* background-image: url('assets/images/black_background.png'); background-repeat: repeat; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); */ } #reminder-popup { width: 600px; max-width: 80vw; min-height: 400px; max-height: 80vh; border-radius: 0.5em; border: 1px solid var(--widget-color-1); } #reminder-popup p:nth-of-type(odd) { margin: 0; } #reminder-popup p:nth-of-type(even) { font-size: 1.3em; margin: 0 0 20px 0; /* font-weight: bold; */ } /************************************** Vue Component: stock_quotes.Vue.js **************************************/ #stock-quotes, #session-history { position: fixed; z-index: 3; /* display: flex; */ /*using class instead*/ flex-direction: column; align-items: center; justify-content: top; width: 400px; top: -410px; /* height minus 10px */ /* top: 50%; */ left: 50%; /* left: -550px; */ min-height: 400px; background-color: black; border-radius: 10px; /* 0.5em; */ border: 2px solid var(--widget-color-1); /* transform: translate(-50%, -50%); */ /* transform: translateX(-50%); */ /* -webkit-transform: translate(-50%, -50%); */ /* -webkit-transform: translateX(-50%); */ box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.19), 0 6px 20px 2px rgba(0, 0, 0, 0.20); -webkit-transition: -webkit-transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; -o-transition: transform 0.3s ease; transition: transform 0.3s ease; } /* currently table instead of list */ /* #stock-quotes p { align-items: center; justify-content: center; } */ /* #stock-quotes ul { list-style-type: none; padding-left: 0; } */ #stocks-btn-svg-used { position: absolute; bottom: 11px; right: 112px; } #stocks-btn-svg-used:hover { cursor: pointer; } #stocks-container { flex-direction: column; align-items: center; justify-content: top; } #stock-quotes table { position: relative; width: 370px; margin-top: 50px; border-collapse: collapse; border-spacing: none; table-layout: fixed; /* left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); */ /* border: 1px solid #999; */ /* box-sizing: border-box; */ } #stock-quotes table caption { visibility: hidden; } #stock-quotes thead th { width: 100px; text-align: right; } #stock-quotes thead th:first-child { width: 80px; } #stock-quotes thead th:nth-child(2) { width: 80px; } #stock-quotes tbody td { width: 100px; text-align: right; /* padding-right: 5px; */ } #stock-quotes tbody td:first-child { width: 80px; } #stock-quotes tbody td:nth-child(2) { width: 80px; } #stock-quotes tfoot { text-align: right; font-weight: bold; border-collapse: separate; } #stock-quotes tfoot td:first-of-type { /* width: 290px; */ padding-top: 10px; } #stock-quotes tfoot td:nth-of-type(2) { /* width: 110px; */ padding-top: 10px; } /* #stock-quotes tfoot div { width: 105px; padding-top: 8px; padding-right: 5px; } */ /************************************** CLASSES ADDED/REMOVED WITH JS **************************************/ .translateY-slider-login { -webkit-transform: translateY(420px); /* Chrome, Safari, Opera */ -moz-transform: translateY(420px); /* Firefox */ -ms-transform: translateY(420px); /* IE/Edge */ -o-transform: translateY(420px); /* Opera */ transform: translateY(420px); } .translateX-slider-items { -webkit-transform: translateX(calc(-100vw)); -moz-transform: translateX(calc(-100vw)); -ms-transform: translateX(calc(-100vw)); -o-transform: translateX(calc(-100vw)); transform: translateX(calc(-100vw)); } .rotateY-slider-login { -webkit-transform: translateY(420px) rotateY(90deg); -moz-transform: translateY(420px) rotateY(90deg); -ms-transform: translateY(420px) rotateY(90deg); -o-transform: translateY(420px) rotateY(90deg); transform: translateY(420px) rotateY(90deg); } .items-container-transitions-on { -webkit-transition: -webkit-transform 300ms ease; -moz-transition: transform 300ms ease; -ms-transition: transform 300ms ease; -o-transition: transform 300ms ease; transition: transform 300ms ease; } .items-container-transitions-off { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } .translateX-slider-li { -webkit-transform: translateX(-110%); -moz-transform: translateX(-110%); -ms-transform: translateX(-110%); -o-transform: translateX(-110%); transform: translateX(-110%); } .translateY-slider-stocks { -webkit-transform: translate(-50%, 490px); -moz-transform: translate(-50%, 490px); -ms-transform: translate(-50%, 490px); -o-transform: translate(-50%, 490px); transform: translate(-50%, 490px); } .translateY-slider-session-time { -webkit-transform: translateY(120px); -moz-transform: translateY(120px); -ms-transform: translateY(120px); -o-transform: translateY(120px); transform: translateY(120px); } .translateX-50-percent-left { -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .display-flex { display: flex; } .opacity-zero { opacity: 0; -webkit-transition: opacity 0.5s ease; -moz-transition: opacity 0.5s ease; -ms-transition: opacity 0.5s ease; -o-transition: opacity 0.5s ease; transition: opacity 0.5s ease; } .display-none { display: none; } /******************************************** MEDIA QUERIES: ********************************************/ @media (orientation: landscape) { } @media (max-width: 1220px) { /* #weatherOttawa { display: none; } */ } @media (max-width: 1200px) { #to-do-instance { width: 70%; } #logo1 { top: 80px; left: 5px; height: 100px; } .h1-desktop { display: none; } .h1-mobile-1200max { display: inherit; /* unset undoes margin & text-align */ } .h1-mobile-600max { display: none; } } @media (max-width: 970px) { /* nav { width: 100vw; } */ #to-do-instance { width: 100vw; /* 76.9%; /* 100% at 1.3 scale */ } /* nav { width: calc(100vw * 1.15 - 17px); } */ /* body { width: 130vw; } */ #to-do-instance p:first-child { margin-top: 0; font-size: 95%; } #text-link, #logo1 { display: none; } } @media (max-width: 900px) { #todayDateInstance { display: none; } .h1-main { text-align: left; margin-left: 15px; /* font-size: 1em; */ } } @media (max-height: 500px), (max-width: 770px) { body { background-color: rgb(35, 35, 35); } /* #welcomeInstance { display: none; } */ #to-do-instance p:first-child { display: none; } #to-do-instance { display: flex; margin-top: 63px; align-items: center; width: 90.9%; /* 100% at 1.1 scale */ /* zoom: 1.0; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); */ -webkit-transform-origin: top center; -moz-transform-origin: top center; -ms-transform-origin: top center; -o-transform-origin: top center; transform-origin: top center; } .container { margin-top: 0; margin-bottom: 0; background-color: rgb(25, 25, 25); } /* #to-do-instance p:first-child { color: #80ff80; font-weight: bold; margin-top: 0; font-size: 90%; } */ ul.todo-list { position: relative; z-index: 1; /*top: 55px;*/ width: 95%; margin: 10px 0 10px 0; /* 10px 0 105px 0; */ background-color: rgb(25, 25, 25); } ul.todo-list li span:nth-child(1) { width: 66%; } #restore-items { margin-bottom: 9px; height: 20px; } #clear-items { height: 20px; } } @media (max-width: 600px) { .h1-desktop { display: none; } .h1-mobile-1200max { display: none; } .h1-mobile-600max { display: inherit; /* unset undoes margin & text-align */ } #to-do-instance { /* margin-top: 0; */ align-items: center; width: 100%; /* zoom: 1.0; -webkit-transform: scale(1.0); -moz-transform: scale(1.0); -ms-transform: scale(1.0); -o-transform: scale(1.0); transform: scale(1.0); */ -webkit-transform-origin: top center; -moz-transform-origin: top center; -ms-transform-origin: top center; -o-transform-origin: top center; transform-origin: top center; } .top, .bottom { display: none; } ul.todo-list li span:nth-child(1) { width: 72%; } ul.todo-list li span:nth-child(2) { width: 124px; /*110px;*/ /* instead of 160px */ } li { font-size: .9em; } #auth-container { right: 50%; } .translateY-slider-login { -webkit-transform: translate(50%, 420px); /* Chrome, Safari, Opera */ -moz-transform: translate(50%, 420px); /* Firefox */ -ms-transform: translate(50%, 420px); /* IE 9 */ -o-transform: translate(50%, 420px); /* Opera */ transform: translate(50%, 420px); } } @media (max-width: 430px) { /* #welcomeInstance { display: none; } */ input { width: 190px; } #to-do-instance { /* margin-top: 0; */ align-items: center; width: 100%; /*position: relative; left: 5px; */ } ul.todo-list { position: relative; /*top: 65px;*/ width: 99%; margin: 10px 0 10px 0; /* 10px 0 85px 0; */ } ul.todo-list li span:nth-child(1) { width: 61%; } } /* @media (max-width: 770px) { #session-time-vue-component, #todayDateInstance { display: none; } } */