/* Global reset */
/* Asterik stands for all html elements */
* {
/* Remove default margins and padding. Does not work on the body rule */
margin: 0;
padding: 0;
/* The box-sizing property tells the browser what the sizing properties (width and height) should include.
With border-box the width and height properties include content, padding and border, but not the margin.
The width and height of an element are exactly what we define.
*/
box-sizing: border-box;
}
/*
Custom Properties (aka CSS variables).
Use: background: var(--background-color);
Declare at the root of the html document (the html tag)
*/
:root {
/*
Color Picker
https://htmlcolorcodes.com/color-picker/
Hex Colors
documentation\hexidecimal color codes.png
Color Wheel
https://www.canva.com/colors/color-wheel/
Color Combinations:
Complementary
Monochromatic
Analogous
Triadic
Tetradic
Primary, secondary and tertiary colors
Warm and cool colors
Shades, tints and tones
Hue, Saturation and Luminance
Color meanings and color schemes
5 Creative Color Schemes Inspired By The Color Wheel
https://www.mymove.com/home-inspiration/decoration-design-ideas/creative-color-schemes-inspired-by-the-color-wheel/#:~:text=A%20split%20complementary%20scheme%20involves,would%20be%20red%20and%20orange.
There are five basic color schemes:
Monochromatic
Analogous
Complementary
Split Complementary
Triad Complementary
The Ultimate Color Combinations Cheat Sheet
https://brightside.me/article/the-ultimate-color-combinations-cheat-sheet-92405/
Color Schemes:
Scheme №1: A complementary combination
Scheme №2: The triad - a combination of three colors
Scheme №3: An analogous combination
Scheme №4: The split complementary combination
Scheme №5: The tetrad - a combination of four colors
Scheme №6: The square
Combinations of individual colours:
White: combines with everything, especially blue, red and black.
Beige: combines with blue, brown, emerald, black, red, white.
Gray: combines with fuchsia, red, violet, pink, blue.
Pink: combines with brown, white, mint green, olive, gray, turquoise, light blue.
Fuchsia (dark pink): combines with gray, yellow-brown, lime, mint green, brown.
Red: combines with yellow, white, fulvous, green, blue, black.
Tomato-red: combines with cyan, mint green, sand, creamy-white, gray.
Cherry-red: combines with azure, gray, light-orange, sandy, pale-yellow, beige.
Raspberry-red: combines with white, black, damask rose.
Brown: combines with bright-cyan, cream, pink, fawn, green, beige.
Light-brown: combines with pale-yellow, cream-white, blue, green, purple, red.
Dark-brown: combines with lime-yellow, cyan, mint green, purple-pink, lime.
Reddish-brown: combines with pink, dark-brown, blue, green, purple.
Orange: combines with cyan, blue, lilac, violet, white, black.
Light-orange: combines with gray, brown, olive.
Dark-orange: combines with pale-yellow, olive, brown, cherry.
Yellow: combines with blue, lilac, light-cyan, violet, gray, black.
Lemon-yellow: combines with cherry-red, brown, blue, gray.
Pale-yellow: combines with fuchsia, gray, brown, shades of red, yellowish brown, blue, purple.
Golden yellow: combines with gray, brown, azure, red, black.
Olive: combines with orange, light-brown, brown.
Green: combines with golden-brown, orange, salad green, yellow, brown, gray, cream, black, creamy-white.
Salad green: combines with brown, yellowish-brown, fawn, gray, dark-blue, red, gray.
Turquoise: combines with fuchsia, cherry-red, yellow, brown, cream, dark-violet.
Electric colors: combines with golden-yellow, brown, light brown, gray, or silver.
Cyan: combines with red, gray, brown, orange, pink, white, yellow.
Dark-blue: combines with light-lilac, cyan, yellowish-green, brown, gray, pale-yellow, orange, green, red, white.
Lilac: combines with orange, pink, dark-violet, olive, gray, yellow, white.
Dark-violet: combines with golden-brown, pale-yellow, gray, turquoise, mint green, light-orange.
Black is a universal colour - it looks elegant in any combination, especially with orange, pink, salad green, white, red, mauvish, or yellow.
The Sessions College Color Calculator
https://www.sessions.edu/color-calculator/
Split Complementary (3 complementary colors) Color Theme: #33BDEF #EF9D33 #EF3F33
A split complementary scheme involves the use of three colors. Start with one color,
find its complement and then use the two colors on either side of it.
For example, the complement of blue-green is red-orange and the split complement of blue-green
would be red and orange.
*/
/* Base Colors */
--flex-left-background-color: #33BDEF;
--flex-right-background-color: #EF9D33;
--flex-left-scroll-bar-background-color: #EF3F33;
--flex-right-scroll-bar-background-color: #EF3F33;
--flex-left-scroll-bar-hover-color: #EB1404;
--flex-right-scroll-bar-hover-color: #EB1404;
--button-background-color: #4C33EF;
--button-background-gradient-color: #412DC0;
--button-border-color: #2707F8;
--contact-color: #4C33EF;
--contact-hover-color: #EF3F33;
--contact-icon-color: #4C33EF;
--contact-disabled-color: #616060;
/* Generic Colors */
--scrollbar-track-shadow-color: #808080;
--button-box-shadow: #F0F7FA;
--button-text-shadow-color: #5B6178;
--button-color: #FFFFFF;
--cancel-button-color: #F71504;
/* Split Complementary 1 Color Theme: overrides Base Colors */
--split-complementary-1-flex-left-background-color: #33BDEF;
--split-complementary-1-flex-right-background-color: #EF9D33;
--split-complementary-1-flex-left-scroll-bar-background-color: #EF3F33;
--split-complementary-1-flex-right-scroll-bar-background-color: #EF3F33;
--split-complementary-1-flex-left-scroll-bar-hover-color: #EB1404;
--split-complementary-1-flex-right-scroll-bar-hover-color: #EB1404;
--split-complementary-1-button-background-color: #4C33EF;
--split-complementary-1-button-background-gradient-color: #412DC0;
--split-complementary-1-button-border-color: #2707F8;
--split-complementary-1-contact-color: #4C33EF;
--split-complementary-1-contact-hover-color: #EF3F33;
--split-complementary-1-contact-icon-color: #4C33EF;
--split-complementary-1-contact-disabled-color: #616060;
/* Analogous 1 Color Theme: overrides Base Colors */
--analogous-1-flex-left-background-color: #33BDEF;
--analogous-1-flex-right-background-color: #33EF65;
--analogous-1-flex-left-scroll-bar-background-color: #4C33EF;
--analogous-1-flex-right-scroll-bar-background-color: #4C33EF;
--analogous-1-flex-left-scroll-bar-hover-color: #412DC0;
--analogous-1-flex-right-scroll-bar-hover-color: #412DC0;
--analogous-1-button-background-color: #4C33EF;
--analogous-1-button-background-gradient-color: #412DC0;
--analogous-1-button-border-color: #2707F8;
--analogous-1-contact-color: #4C33EF;
--analogous-1-contact-hover-color: #EF3F33;
--analogous-1-contact-icon-color: #4C33EF;
--analogous-1-contact-disabled-color: #616060;
/* Triadic 1 Color Theme: overrides Base Colors */
--triadic-1-flex-left-background-color: #33BDEF;
--triadic-1-flex-right-background-color: #EFCC33;
--triadic-1-flex-left-scroll-bar-background-color: #EF3378;
--triadic-1-flex-right-scroll-bar-background-color: #EF3378;
--triadic-1-flex-left-scroll-bar-hover-color: #F5065D;
--triadic-1-flex-right-scroll-bar-hover-color: #F5065D;
--triadic-1-button-background-color: #4C33EF;
--triadic-1-button-background-gradient-color: #412DC0;
--triadic-1-button-border-color: #2707F8;
--triadic-1-contact-color: #4C33EF;
--triadic-1-contact-hover-color: #EF3F33;
--triadic-1-contact-icon-color: #4C33EF;
--triadic-1-contact-disabled-color: #474747;
/* Tetradic 1 Color Theme: overrides Base Colors */
--tetradic-1-flex-left-background-color: #496645;
--tetradic-1-flex-right-background-color: #664549;
--tetradic-1-flex-left-scroll-bar-background-color: #464C59;
--tetradic-1-flex-right-scroll-bar-background-color: #464C59;
--tetradic-1-flex-left-scroll-bar-hover-color: #282C33;
--tetradic-1-flex-right-scroll-bar-hover-color: #282C33;
--tetradic-1-button-color: #282C33;
--tetradic-1-button-background-color: #473A49;
--tetradic-1-button-background-gradient-color: #382E3A;
--tetradic-1-button-border-color: #5F3A64;
--tetradic-1-contact-color: #0F1013;
--tetradic-1-contact-hover-color: #ffffff;
--tetradic-1-contact-icon-color: #0F1013;
--tetradic-1-contact-disabled-color: #474747;
}
/* Specifying these defaults at the html document root (html tag)
may allow the Semantic UI body rules to override us.
Use of rem units will inherit from document root, or
default to browser defaults, perphaps changed by the
user. Body rules should inherit from html tag. */
html {
/* Allows the page to be infinitely downsized (see Chrome Developer Tools - Responsive)
Amazon website uses min-height: 100% only. */
min-width: 100vw;
min-height: 100vh;
/* While expanding the window (e.g., Chrome Developer Tools - Responsive)
the background will not be white */
background-color: var(--flex-right-background-color);
/* Specificity: Semantic UI button, input, textarea {) rule overrides the same body-tag rules
because the Semantic rules is more specific to buttons, inputs, etc. However, the body tag rules
here override the Semantic UI body tag rules.
/* Default font-family and font-size. Specified here for the sake of inheritance.
Must be inherited by parent child elements. Helvetica not available on Google Fonts. */
/* https://fonts.google.com/ */
font-family: 'Lato', helvetica, sans-serif;
/* Root element font size (default) */
font-size: 16px;
}
body {
font-family: inherit;
/* Root element font size (default) */
font-size: inherit;
}
/*
Scroll bar
*/
::-webkit-scrollbar {
width: 15px;
}
/* Track */
::-webkit-scrollbar-track {
/* Grey on the edges of the track for a 3D track look */
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
.flex-left::-webkit-scrollbar-corner {
background: var(--flex-left-background-color);
}
.flex-right::-webkit-scrollbar-corner {
background: var(--flex-right-background-color);
}
/* Handle */
.flex-left::-webkit-scrollbar-thumb {
background: var(--flex-left-scroll-bar-background-color);
border-radius: 10px;
}
.flex-right::-webkit-scrollbar-thumb {
background-color: var(--flex-left-scroll-bar-background-color);
}
/* Handle on hover */
/* No hover on mobile */
/* Developer Tools: NO HOVERING! */
.flex-left::-webkit-scrollbar-thumb:hover {
background: var(--flex-left-scroll-bar-hover-color);
}
.flex-right::-webkit-scrollbar-thumb:hover {
background: var(--flex-right-scroll-bar-hover-color);
}
/* Specificity: Semantic UI button, input, textarea {) rule
is overriden by the same tag rules
(see Chrome Developer Tools Computed Styles)
*/
button, input, textarea {
font-family: inherit;
font-size: inherit;
}
.error-msg {
color: red;
font-weight: bold;
/* Span is an inline element, does not know about top/bottom padding or margin.
Switching to a div.
*/
/* position: relative;
top: 5px; */
margin: 5px 0;
}
/* Specificity: Semantic UI button, input, textarea {) rule overrides same class rules
because class rule is not specify enough (div). But .flex-container, button, input {} would be. */
.flex-container {
display: flex;
width: 100vw;
height: 100vh;
/* Default font-family and font-size. Must be inherited by parent child elements. */
/* Inherits from our body tag */
font-family: inherit;
font-size: inherit;
}
.flex-left {
/* Add horizontal & vertical scroll bars as needed. Overflow is scrollabled.
Will not prevent elements from becoming too small to be useful. Must handle in media queries. */
overflow-x: scroll;
overflow-y: scroll;
scroll-behavior: auto;
/* When applying a margin to .flex-left items, the margin's background will not be white */
background-color: var(--flex-left-background-color);
}
/* Class button container needed in order to vertically and horizontally center each button */
/* Class contact-container is needed for the button wrapper in a flexbox container
to be able to display contacts vertically and horizontally centered on small devices.*/
.flex-left .button-container,
.flex-left .contact-container {
/* Needed in order to vertically and horizontally center each button */
display: flex;
}
.flex-left .button-container {
/* Buttons should display at the top of page when vertically scrolling */
position: sticky;
/* Buttons should appear over other elements on the page */
z-index: 2;
}
.flex-left .ui.selection.dropdown,
.flex-left .add-button,
.flex-right .ui.selection.dropdown {
/* Element is sized according to its width and height properties */
flex: 1;
/* Remove Semantic padding to make this dropdown and the Add button same width and height */
padding: 0;
background: var(--button-background-color);
/* Adds texture to the dropdown */
background-image: linear-gradient(top, var(--button-background-color), var(--button-background-gradient-color));
color: var(--button-color);
border: solid var(--button-border-color) 1px;
font-weight: 600;
cursor: pointer;
}
.flex-left .ui.selection.dropdown,
.flex-left .add-button {
/* Pill Button */
border-radius: 28px;
box-shadow: 1px 1px 1px 0 #000000;
text-shadow: 1px 1px 20px #a89a9a;
}
/* Gives the buttons a little jiggle when selected */
.flex-left .ui.selection.dropdown:active,
.flex-left .add-button:active {
position: relative;
top: 1px;
}
.flex-left .ui.selection.dropdown:hover,
.flex-left .add-button:hover {
background: var(--button-background-gradient-color);
background-image: linear-gradient(top, var(--button-background-gradient-color), var(--button-background-color));
}
.flex-left .ui.selection.dropdown .default.text,
.flex-left .ui.selection.dropdown .text {
color: var(--button-color);
/* Remove Semantic padding to align the default text/text to the dropdown */
padding: 0;
width: 100%;
/* Horizontally align text */
text-align: center;
/* Vertically align text div within the Semantic UI dropdown div */
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.flex-left .ui.selection.dropdown .text .theme-color {
display: inline-block;
}
.flex-left .ui.selection.dropdown .menu {
/* Force the Sematic UI Dropdown Menu to scroll */
max-height: 50vh;
/* Color the background so that margins do not display over the default white */
background: var(--button-background-color);
}
.flex-left .ui.selection.dropdown .menu>.item {
background: var(--button-background-color);
color: var(--button-color);
}
.flex-left .ui.selection.dropdown .menu>.item:hover {
background: var(--button-background-gradient-color);
background-image: linear-gradient(top, var(--button-background-gradient-color), var(--button-background-color));
}
.flex-left .ui.selection.dropdown .menu .item .theme-color-container,
.flex-left .ui.selection.dropdown .menu .item .theme-color {
display: inline-block;
}
/* The button is the image and text container */
.flex-left .contact-container .contact-button {
background: none;
border: none;
color: var(--contact-color);
/* Buttons need pointer specified */
cursor: pointer;
}
.flex-left .contact-container .contact-button:hover {
color: var(--contact-hover-color);
}
.flex-left .contact-container .contact-button .contact-image {
/* Round image */
border-radius: 50%;
}
.flex-left .contact-container .contact-button .contact-text {
/* Capitalized for display-only in CSS via text-transform: capitalize;
value and default-value properties still lowercase as in the array/database. */
text-transform: capitalize;
}
.flex-right {
/* Add horizontal & vertical scroll bars as needed. Overflow is scrollabled.
Will not prevent elements from becoming too small to be useful. Must handle in media queries. */
overflow-x: scroll;
overflow-y: scroll;
scroll-behavior: auto;
/* When applying a margin to .flex-left items, the margin's background will not be white */
background-color: var(--flex-right-background-color);
}
.flex-right .button-container {
/* Buttons should display at the top of page when vertically scrolling */
position: sticky;
/* Buttons should appear over other elements on the page */
z-index: 2;
}
.flex-right .cancel-edit-button {
/* Prevent the centered Save Button from shifting left */
position: absolute;
}
/*
Contact Form
*/
.flex-right form {
display: flex;
flex-direction: column;
width: 100%;
}
.flex-right .edit-button,
.flex-right .save-button {
/* Horizontally center the button */
margin: 0 auto;
display: block;
background: var(--button-background-color);
background-image: linear-gradient(top, var(--button-background-color), var(--button-background-gradient-color));
color: var(--button-color);
border: solid var(--button-border-color) 1px;
border-radius: 28px; /****/
font-family: Arial, Helvetica, sans-serif;
font-weight: 100;
padding: 5px 20px; /****/
margin-top: 2px; /****/
box-shadow: 1px 1px 1px 0 #000000;
text-shadow: 1px 1px 20px #000000;
text-decoration: none;
text-align: center;
cursor: pointer;
}
/* No hover on mobile */
.flex-right .edit-button:hover,
.flex-right .save-button:hover {
background: var(--button-background-gradient-color);
background-image: linear-gradient(top, var(--button-background-gradient-color), var(--button-background-color));
/* border-radius: 28px; /****/
/* text-decoration: none; ** */
}
.flex-right .contact-row {
display: flex;
/* Vertical alignment of flex items in flex container */
align-items: center;
margin-bottom: 10px;
}
.flex-right .contact-icon-col {
float: left;
width: 10%;
}
.flex-right .contact-col {
float: left;
width: 80%;
}
/* Remove border */
.flex-right fieldset {
border: 0;
}
/* Style inputs, select elements and textareas */
.flex-right input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
resize: vertical;
font-weight: 600;
}
.flex-right .fas,
.flex-right .far {
color: var(--contact-icon-color);
font-weight: 900;
}
/* Currently not used.
How to display a blank icon
.icon-sign-blank {
padding: 0 20px 0 0;
font-size: 1.2em;
}
/* Responsive Design - Additive CSS - All changeable properties are defined in Media Queries
browserstack.com
https://www.browserstack.com/guide/what-are-css-and-media-query-breakpoints
/* Extra small devices (phones, 600px and down)
@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up)
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up)
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up)
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up)
@media only screen and (min-width: 1200px) {...}
Bootstrap 4 breakpoints
https://getbootstrap.com/docs/5.0/layout/breakpoints/
Extra small devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap because it is "mobile first"
Small devices (landscape phones, 576px and up)
@media (min-width: 576px) {...}
Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint
@media (min-width: 768px) {...}
Large devices (desktops, 992px and up)
@media (min-width: 992px) {...}
Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {...}
*/
/* Device breakpoints */
/* All small devices less than or equal to 360px. At 360px the browser
overrides this max-width with min-width: 360px.
/* Display contact list vertically */
@media only screen and (max-width: 360px) {
.flex-left {
/* Below 359px, only part of the frame is
visible but the entire frame is rendered.
The rest becomes visible by horizontally scrolling. */
/* 30vw at 359px widh is approx. 108px */
/* width: 30vw; */
width: clamp(108px, 108px, 108px);
/* Fixed text */
/* Approx. 10px at 359px width using 3vw */
/* clamp params: minimum, preferred, maximum */
font-size: clamp(75%, 75%, 100%);
}
.flex-right {
/* Below 359px, only part of the frame is
visible but the entire frame is rendered.
The rest becomes visible by horizontally scrolling. */
/* 70vw at 359px widh is approx. 251px */
/* width: 70vw; */
width: clamp(251px, 251px, 251px);
/* Fixed text */
/* Approx. 10px at 359px width using 3vw */
/* clamp params: minimum, preferred, maximum */
font-size: clamp(75%, 75%, 100%);
}
.flex-left .button-container {
flex-direction: column;
margin: 2vw 1vw 4vw 1vw;
}
.flex-left .ui.selection.dropdown {
/* Use min-width and min-height to override Semantic UI Drowdown size */
/* min-width: 15vw; */
/* min-height: 2vh; */
/* Using fixed size lets the dropdown overflow, requiring horizontal scrolling */
/* min-width: 85px;
min-height: 20px; */
margin: 0 0 2vw 0;
/* Using px units at the lowest resolutions
is more precise. */
/* min-width: clamp(11vw, 11vw, 11vw);
min-height: clamp(3vh, 3vh, 3vh); */
min-width: clamp(85px, 85px, 85px);
min-height: clamp(20px, 20px, 20px);
}
.flex-left .ui.selection.dropdown .dropdown.icon {
/* Vertically align icon */
margin: 0;
padding: 0;
line-height: 0;
}
.flex-left .ui.selection.dropdown .text .theme-color {
/* Width x 2 colors */
width: 28%;
height: 1vh;
}
.flex-left .ui.selection.dropdown .menu::-webkit-scrollbar {
/* Limit the width of the menu vertical scrollbar on small devices */
max-width: 2vw;
}
.flex-left .ui.selection.dropdown .menu>.item {
width: 100%;
/* Twice the height of the menu colors for better color separation */
height: 4vh;
/* Override Semantic UI Dropdown */ /* REMOVE */
/* padding: 0 !important; */
/* margin: 0 0 2vw 0; */
/* Remove Semantic UI Dropdown top border (white) */
/* border: none; */
}
.flex-left .ui.selection.dropdown .menu .item .theme-color-container {
width: 100%;
height: 2vh;
text-align: center;
/* Vertically align the theme color within its menu item */
/* Semantic UI Dropdown menu item has position relative, makes it work. */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.flex-left .ui.selection.dropdown .menu .item .theme-color-container .theme-color {
width: 40%;
/* Should be less or equal to the menu item's color container height for best color separation */
/* Height: 100% (of parent container item) does not work. Height is 0. */
height: 2vh;
}
.flex-left .add-button {
/* Use same min-width and min-height to size button to Semantic UI Dropdown size */
/* Using fixed size lets the dropdown overflow, requiring horizontal scrolling */
/* min-width: 85px;
min-height: 20px; */
/* Using px units at the lowest resolutions
is more precise. */
/* Use same min-width and min-height to size button to Semantic UI Dropdown size */
/* min-width: 15vw; */
/* min-height: 2vh; */
/* min-width: clamp(11vw, 11vw, 11vw);
min-height: clamp(3vh, 3vh, 3vh); */
min-width: clamp(85px, 85px, 85px);
min-height: clamp(20px, 20px, 20px);
}
.flex-left .contact-container {
margin: 0 0 2vw 0;
}
.flex-left .contact-container .contact-button {
display: flex;
flex-direction: column;
/* For multi-line flex containers */
align-content: center;
flex-wrap: wrap;
/* Vertically align the image!!! */
align-items: center;
/* Set the size of all contact buttons to left size */
/* width: 30vw; */
/* Using fixed size lets the button overflow, enabling horizontal scrolling */
min-width: 85px;
}
.flex-left .contact-container .contact-button .contact-image {
/* Using vw units allows image to shrink below min-width: 6vw */
/* Approx 21px at 359px width using 6vw */
/* width: 32px;
height: 32px; */
width: clamp(32px, 32px, 32px);
height: clamp(32px, 32px, 32px);
/* Using vw units allows image to shrink below min-width: 6vw */
/* Approx 21px at 359px width using 6vw */
/* min-width: 32px; */
/* min-width: clamp(32px, 32px, 32px); */
/*height: 6vw; */ /* Approx 21px at 359px width */
/*width: 6vw; */ /* Approx 21px at 359px width */
/* Will not prevents scaling down any smaller! */
/*min-width: 6vw; */ /* Approx 21px at 359px width */
}
.flex-left .contact-container .contact-button .contact-text {
flex: 1;
/* Minimum (0.75rem - approx. 10px fixed font size), preferred (approx. 14px fixed font size), maximum */
/* font-size: clamp(0.75rem, 1.2rem, 2rem); */
font-size: 12px;
/* Center the text */
text-align: center;
}
.flex-right .edit-button,
.flex-right .save-button {
/* Use same min-width and min-height to size button to Semantic UI Dropdown and Add Button size */
/* Using fixed size lets the dropdown overflow, requiring horizontal scrolling */
min-width: 90px;
min-height: 20px;
/* width: 18%; */
/* font-size: 1.2em; */
/* font-size: 3vw; */
}
.flex-right .icon,
.flex-right .blank-icon {
font-size: 0.8em;
}
}
@media only screen and (min-width: 360px) and (max-width: 600px) {
.flex-left {
width: 30vw;
/* Responsive text */
/* Approx. 10px at 359px width */
font-size: 3vw;
}
.flex-right {
width: 70vw;
/* Responsive text */
/* Approx. 10px at 359px width */
font-size: 3vw;
}
.flex-left .button-container {
flex-direction: column;
margin: 2vw 2vw 4vw 2vw;
}
.flex-left .ui.selection.dropdown {
/* Use min-width and min-height to override Semantic UI Drowdown size */
min-width: 15vw;
min-height: 3vh;
margin: 0 0 2vw 0;
}
.flex-left .ui.selection.dropdown .dropdown.icon {
/* Vertically align icon */
margin: 0;
padding: 0;
line-height: 0;
}
.flex-left .ui.selection.dropdown .text .theme-color {
/* Width x 2 colors */
width: 30%;
height: 1vh;
}
.flex-left .ui.selection.dropdown .menu::-webkit-scrollbar {
/* Limit the width of the menu vertical scrollbar on small devices */
max-width: 2vw;
}
.flex-left .ui.selection.dropdown .menu>.item {
width: 100%;
height: 3vh;
/* Override Semantic UI Dropdown */
padding: 0 !important;
/* margin: 0 0 2vw 0; */
/* Remove Semantic UI Dropdown top border (white) */
/* border: none; */
}
.flex-left .ui.selection.dropdown .menu .item .theme-color-container {
width: 100%;
height: 2vh;
text-align: center;
/* Vertically align the theme color within its menu item */
/* Semantic UI Dropdown menu item has position relative, makes it work. */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.flex-left .ui.selection.dropdown .menu .item .theme-color-container .theme-color {
width: 40%;
/* Must be same as menu item height to prevent overflow */
height: 2vh;
}
.flex-left .add-button {
/* Use same min-width and min-height to size button to Semantic UI Dropdown size */
min-width: 15vw;
min-height: 3vh;
}
.flex-left .contact-container {
margin: 0 0 2vw 0;
}
.flex-left .contact-container .contact-button {
display: flex;
flex-direction: column;
/* For multi-line flex containers */
align-content: center;
flex-wrap: wrap;
/* Vertically align the image!!! */
align-items: center;
/* Set the size of all contact buttons to left size */
width: 30vw;
}
.flex-left .contact-container .contact-button .contact-image {
height: 6vw; /* Approx 21px at 359px width */
width: 6vw; /* Approx 21px at 359px width */
/* Will not prevents scaling down any smaller! */
min-width: 6vw; /* Approx 21px at 359px width */
}
.flex-left .contact-container .contact-button .contact-text {
flex: 1;
/* Center the text */
text-align: center;
}
.flex-right .edit-button,
.flex-right .save-button {
/* width: 18%; */
/* font-size: 1.2em; */
font-size: 3vw;
}
.flex-right .icon,
.flex-right .blank-icon {
font-size: 0.8em;
}
}
/* All devices greater or equal to 600px. At 600px the browser overrides max-width: 600px. */
@media only screen and (min-width: 600px) {
.flex-left {
width: 40vw;
}
.flex-right {
width: 60vw;
}
.flex-left .ui.selection.dropdown {
margin: 5px 0 5px 0;
}
/* Remove previous display contact vertically to display horizontally now */
/* .flex-left .contact-container {
justify-content: inherit;
} */
.flex-left .contact-container .contact-button .contact-text {
flex: 1;
/* Center the text */
text-align: center;
}
.flex-left .contact-container .contact-button .contact-image {
height: 35px;
width: 35px;
min-width: 35px;
}
.flex-right .icon,
.flex-right .blank-icon {
font-size: 1em;
}
}
/* Medium size device (landscape, tablets 768px wide and up */
@media only screen and (min-width: 768px) {
.flex-left {
width: 45vw;
/*
The Responsive Website Font Size Guidelines
https://learnui.design/blog/mobile-desktop-website-font-size-guidelines.html
Body fonts should be about 16px.
*/
/* Responsive text */
font-size: 12px;
}
.flex-right {
width: 55vw;
/* Responsive text */
/* Approx. 16px at 768px width */
/* font-size: 2.1vw; */
font-size: 12px;
}
.flex-left .button-container {
flex-direction: row;
margin: 2vw;
}
.flex-left .ui.selection.dropdown {
/* Use min-width and min-height to override Semantic UI Drowdown size */
min-width: 10vw;
min-height: 3vh;
margin: 0 2vw 0 0;
}
.flex-left .ui.selection.dropdown .dropdown.icon {
/* Vertically align icon */
margin: 0;
padding: 0;
line-height: 0;
}
.flex-left .ui.selection.dropdown .text .theme-color {
/* Width x 2 colors */
width: 35%;
height: 1vh;
}
.flex-left .ui.selection.dropdown .menu::-webkit-scrollbar {
/* Limit the width of the menu vertical scrollbar on small devices */
max-width: 2vw;
}
.flex-left .ui.selection.dropdown .menu>.item {
width: 100%;
/* Twice the height of the menu colors for better color separation */
height: 4vh;
/* Override Semantic UI Dropdown */
/* padding: 0 !important; */
/* Remove Semantic UI Dropdown top border (white) */
/* border: none; */
}
/* Need a container for the menu item colors (2 divs) to be able to vertically and horizontally center */
.flex-left .ui.selection.dropdown .menu .item .theme-color-container {
width: 100%;
height: 2vh;
/* Vertically align the theme color within its menu item */
/* Semantic UI Dropdown menu item has position relative, makes it work. */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.flex-left .ui.selection.dropdown .menu .item .theme-color-container .theme-color {
width: 40%;
/* Should be less or equal the menu item's color container height for best color separation */
/* Height: 100% (of parent container item) does not work. Height is 0. */
height: 2vh;
}
.flex-left .add-button {
/* Use same min-width and min-height to size button to Semantic UI Dropdown size */
min-width: 10vw;
min-height: 3vh;
}
.flex-left .contact-container {
margin: 2vw 2vw;
}
.flex-left .contact-container .contact-button {
/* Display button image and text side by side */
display: flex;
flex-direction: row;
/* For multi-line flex containers */
align-content: flex-start;
flex-wrap: wrap;
/* Vertically align the image!!! */
align-items: center;
/* Set the size of all contact buttons to left size */
width: 45vw;
}
.flex-left .contact-container .contact-button .contact-image {
height: 6vw; /* Approx 21px at 359px width */
width: 6vw; /* Approx 21px at 359px width */
/* Prevents scaling down any smaller */
min-width: 6vw; /* Approx 21px at 359px width */
margin: 0 1vw 0 0;
}
.flex-left .contact-container .contact-button .contact-text {
flex: 1;
/* Left-justify the text. Wrap text around itelf, not under the image */
text-align: left;
}
.flex-right .button-container {
text-align: center;
margin: 2vw 0;
}
.flex-right .edit-button,
.flex-right .save-button {
/* For responsive elements use vw units */
/* Must increase min-width from 10vw to approx. 18vw to size same width as left side buttons. */
/* No longer needed. Width now set in displayContact() */
/* min-width: 18.75vw; */
/* The min-width property defines the minimum width of an element. If the content is smaller
than the minimum width, the minimum width will be applied. If the content is larger than
the minimum width, the min-width property has no effect. */
/* Set here same as add button. Actual width now set in displayContact() */
min-width: 10vw;
min-height: 3vh;
}
.flex-right .icon {
font-size: 1.2em;
}
.flex-right .icon-sign-blank {
font-size: 1.2em;
}
}
/* Larger devices 992px wide and up */
@media only screen and (min-width: 992px) {
.flex-left {
width: 30vw;
/*
The Responsive Website Font Size Guidelines
https://learnui.design/blog/mobile-desktop-website-font-size-guidelines.html
Body fonts should be about 16px.
*/
font-size: 12px;
}
.flex-right {
width: 70vw;
/* Responsive text */
font-size: 12px;
}
.flex-left .button-container {
flex-direction: row;
margin: 2vw;
}
.flex-left .ui.selection.dropdown {
/* Use min-width and min-height to override Semantic UI Drowdown size */
min-width: 10vw;
min-height: 3vh;
margin: 0 2vw 0 0;
}
.flex-left .ui.selection.dropdown .dropdown.icon {
/* Vertically align icon */
margin: 0;
padding: 0;
line-height: 0;
}
.flex-left .ui.selection.dropdown .text .theme-color {
/* Width x 2 colors */
width: 30%;
height: 1vh;
}
.flex-left .ui.selection.dropdown .menu::-webkit-scrollbar {
/* Limit the width of the menu vertical scrollbar on small devices */
max-width: 2vw;
}
.flex-left .ui.selection.dropdown .menu>.item {
width: 100%;
/* Twice the height of the menu colors for better color separation */
height: 4vh;
/* Override Semantic UI Dropdown */
/* padding: 0 !important; */
/* Remove Semantic UI Dropdown top border (white) */
/* border: none; */
}
/* Need a container for the menu item colors (2 divs) to be able to vertically and horizontally center */
.flex-left .ui.selection.dropdown .menu .item .theme-color-container {
width: 100%;
height: 2vh;
/* Vertically align the theme color within its menu item */
/* Semantic UI Dropdown menu item has position relative, makes it work. */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.flex-left .ui.selection.dropdown .menu .item .theme-color-container .theme-color {
width: 40%;
/* Should be less or equal the menu item's color container height for best color separation */
/* Height: 100% (of parent container item) does not work. Height is 0. */
height: 2vh;
}
.flex-left .add-button {
/* Use same min-width and min-height to size button to Semantic UI Dropdown size */
min-width: 10vw;
min-height: 3vh;
}
.flex-left .contact-container {
margin: 2vw 2vw;
}
.flex-left .contact-container .contact-button {
/* Display button image and text side by side */
display: flex;
flex-direction: row;
/* For multi-line flex containers */
align-content: flex-start;
flex-wrap: wrap;
/* Vertically align the image!!! */
align-items: center;
/* Set the size of all contact buttons to left size */
width: 30vw;
}
.flex-left .contact-container .contact-button .contact-image {
height: 6vw; /* Approx 21px at 359px width */
width: 6vw; /* Approx 21px at 359px width */
/* Prevents scaling down any smaller */
min-width: 6vw; /* Approx 21px at 359px width */
margin: 0 1vw 0 0;
}
.flex-left .contact-container .contact-button .contact-text {
flex: 1;
/* Left-justify the text. Wrap text around itelf, not under the image */
text-align: left;
}
/*c*/
.flex-right .button-container {
text-align: center;
margin: 2vw 0;
}
/*c*/
.flex-right .edit-button,
.flex-right .save-button {
/* For responsive elements use vw units */
/* Must increase min-width from 10vw to approx. 11vw to size same width as left side buttons. */
/* No longer needed. Width now set in displayContact() */
/* min-width: 11.5vw; */
/* The min-width property defines the minimum width of an element. If the content is smaller
than the minimum width, the minimum width will be applied. If the content is larger than
the minimum width, the min-width property has no effect. */
/* Set here same as add button. Actual width now set in displayContact() */
min-width: 10vw;
min-height: 3vh;
}
/*c*/
.flex-right .icon,
.flex-right .icon-sign-blank {
font-size: 1.4em;
}
}
/* Large devices 1200px wide and up */
@media only screen and (min-width: 1200px) {
.flex-left {
width: 30vw;
/*
The Responsive Website Font Size Guidelines
https://learnui.design/blog/mobile-desktop-website-font-size-guidelines.html
Body fonts should be about 16px. Viewable at 1920x1080 and 1536x731 (my 4K laptop).
*/
/* Responsive text */
/* Approx. 16px at 1200px width */
/* clamp params: minimum, preferred, maximum */
font-size: clamp(100%, 100%, 130%);
/* Displays approx. 16px at 1200, but grows significantly larger after 1200! */
/* font-size: 1.35vw; */
}
.flex-right {
width: 70vw;
/* Responsive text */
/* Approx. 16px at 1200px width */
font-size: clamp(100%, 100%, 130%);
}
.flex-left .button-container {
flex-direction: row;
margin: 2vw;
}
.flex-left .ui.selection.dropdown {
/* Use min-width and min-height to override Semantic UI Drowdown size */
min-width: 10vw;
min-height: 3vh;
margin: 0 2vw 0 0;
}
.flex-left .ui.selection.dropdown .dropdown.icon {
/* Vertically align icon */
margin: 0;
padding: 0;
line-height: 0;
}
.flex-left .ui.selection.dropdown .text .theme-color {
/* Width x 2 colors */
width: 30%;
height: 1vh;
}
.flex-left .ui.selection.dropdown .menu::-webkit-scrollbar {
/* Limit the width of the menu vertical scrollbar on small devices */
max-width: 2vw;
}
.flex-left .ui.selection.dropdown .menu>.item {
width: 100%;
/* Twice the height of the menu colors for better color separation */
height: 4vh;
/* Override Semantic UI Dropdown */
/* padding: 0 !important; */
/* Remove Semantic UI Dropdown top border (white) */
/* border: none; */
}
/* Need a container for the menu item colors (2 divs) to be able to vertically and horizontally center */
.flex-left .ui.selection.dropdown .menu .item .theme-color-container {
width: 100%;
height: 2vh;
/* Vertically align the theme color within its menu item */
/* Semantic UI Dropdown menu item has position relative, makes it work. */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.flex-left .ui.selection.dropdown .menu .item .theme-color-container .theme-color {
width: 40%;
/* Should be less or equal the menu item's color container height for best color separation */
/* Height: 100% (of parent container item) does not work. Height is 0. */
height: 2vh;
}
.flex-left .add-button {
/* Use same min-width and min-height to size button to Semantic UI Dropdown size */
min-width: 10vw;
min-height: 3vh;
}
.flex-left .contact-container {
margin: 1vw 1vw;
}
.flex-left .contact-container .contact-button {
/* Display button image and text side by side */
display: flex;
flex-direction: row;
/* For multi-line flex containers */
align-content: flex-start;
flex-wrap: wrap;
/* Vertically align the image!!! */
align-items: center;
/* Set the size of all contact buttons to left size */
width: 30vw;
}
.flex-left .contact-container .contact-button .contact-image {
height: 3vw; /* Approx 21px at 359px width */
width: 3vw; /* Approx 21px at 359px width */
/* Prevents scaling down any smaller */
min-width: 3vw; /* Approx 21px at 359px width */
margin: 0 1vw 0 0;
}
.flex-left .contact-container .contact-button .contact-text {
flex: 1;
/* Left-justify the text. Wrap text around itelf, not under the image */
text-align: left;
}
.flex-right .button-container {
text-align: center;
margin: 2vw 0;
}
.flex-right .edit-button,
.flex-right .save-button {
/* For responsive elements use vw units */
/* Must increase min-width from 10vw to approx. 11vw to size same width as left side buttons. */
/* No longer needed. Width now set in displayContact() */
/* min-width: 11.6vw; */
/* The min-width property defines the minimum width of an element. If the content is smaller
than the minimum width, the minimum width will be applied. If the content is larger than
the minimum width, the min-width property has no effect. */
/* Set here same as add button. Actual width now set in displayContact() */
min-width: 10vw;
min-height: 3vh;
}
/* RESIZE IN RESPONSIVE UNITS OR CLAMP() */
.flex-right .icon,
.flex-right .icon-sign-blank {
font-size: 1.6em;
}
}