style.css

/* Set the font family and size for the whole document */
* {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-thumb {
  background-color: #666;
  border-radius: 10px;
}

::-webkit-scrollbar-track {
  background-color: #f0f0f0;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

/* Set the margin and padding to zero for the whole document */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* NO TEXT EXCEPT FOR THE NOTE CONTENT AND TITLE SHOULD BE SELECTABLE */
body *:not(#note-content):not(#note-title) {
  user-select: none;
}

body {
  transform: scale(1);
  transition:all cubic-bezier(1, 0, 0, 1) 0.3s;
}

/* Set the background color and height for the title bar */
#title-bar {
  background-color: #333;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

/* Set the color, font size and margin for the title bar icon */
#title-bar i {
  color: white;
  font-size: 20px;
  margin-right: 10px;
  margin-left: 10px;
  z-index: inherit;
}

/* Set the color and font weight for the title bar text */
#title-bar span {
  color: white;
  font-weight: bold;
  z-index: inherit;
}

/* Set the height and display for the main container */
#main-container {
  height: calc(100vh - 90px);
  display: flex;
}

/* Set the width, background color, overflow and border for the note list */
#note-list {
  width: 200px;
  background-color: #f0f0f0;
  overflow-y: auto;
  border-right: 1px solid #ccc;
  list-style: none;
}

/* Set the padding, cursor and border for the note items */
.note-item {
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #ccc;
  transition: all 0.3s ease-in-out;
  border-left: none;
}

/* Set the font weight and margin for the note title */
.note-title {
  font-weight: bold;
  margin-bottom: 5px;
}

/* Set the color and font size for the note date */
.note-date {
  color: #999;
  font-size: 14px;
}

/* Set the background color for the selected note item */
.note-item.selected {
  background-color: #ddd;
  border-left: 5px solid #333;
}

/* Set the flex, padding, overflow, and order for the edit area */
#edit-area {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
  order: 1; /* Change the order to move it below the toolbar */
}

/* Set the width, padding, border, outline and margin for the note title input */
#note-title {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  outline: none;
  margin-bottom: 10px;
}

/* Set the width, height, padding, border, outline, and resize for the note content div */
#note-content {
  width: 100%;
  height: calc(100vh - 210px); /* Adjusted height considering the reduced toolbar height */
  padding: 10px;
  border: 1px solid #ccc;
  outline: none;
  resize: none;
  background-color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* I've defined a custom attribute called "state" that is supposed to set the color of the note content div text (inside the contenteditable div) */
#note-content[state="disabled"] h4 {
  color: #999;
}

/* Set the color and font style for the placeholder text */
#note-content:empty:before {
  content: attr(placeholder);
  color: #999;
  font-style: italic;
}

/* Set the height, background color and display for the button bar */
#button-bar {
  height: 60px;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

/* Set the padding, border, background color, color, cursor and outline for the buttons */
button {
  padding: 10px 20px;
  border: none;
  background-color: #333;
  color: white;
  cursor: pointer;
  outline: none;
  transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Set the font size and margin for the button icons */
button i {
  font-size: 20px;
}

/* Set the background color and cursor for the disabled buttons */
button:disabled {
  background-color: #999;
  cursor: not-allowed;
}

/* Set the height, background color, border, and display for the toolbar */
#toolbar {
  height: 30px; /* Reduced height */
  background-color: #f0f0f0;
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

/* Set the padding, border, background color, color, cursor, and outline for the toolbar buttons */
#toolbar button {
  padding: 5px 10px; /* Reduced padding */
  border: none;
  background: none;
  color: rgb(26, 26, 26);
  cursor: pointer;
  outline: none;
  transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Set the font size for the toolbar button icons */
#toolbar button i {
  font-size: 16px; /* Reduced font size */
}

.window-controls {
  /* Move the window controls to the right */
  margin-left: auto;
}

/* Set the styles for the window controls */
#min-button,
#max-button,
#close-button,
#theme-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  margin-right: 5px;
  color: white;
  transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

#min-button i,
#max-button i,
#close-button i,
#theme-button i{
  font-size: 12px;
}

/* Change color on hover for the window controls */
#min-button:hover,
#max-button:hover,
#close-button:hover,
#theme-button:hover {
  background-color: #555;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.draggable {
  /* Make the window draggable */
  -webkit-app-region: drag;
  flex: 1;
}

/* Add hover effect for note items */
.note-item:hover {
  background-color: #ddd;
}

/* Add hover effect for buttons */
button:hover {
  background-color: #555;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Add hover effect for toolbar buttons */
#toolbar button:hover {
  background-color: #ccc;
}

/* The help button should be on the bottom-right corner (absolute position) */
#help-button {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: #333;
  color: white;
  border-radius: 30px;
  width: 50px;
  height: 50px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

/* Set the font size for the help button icon */
#help-button i {
  font-size: 20px;
  justify-content: center;
  align-items: center;
  display: flex;
}

/* Add hover effect for the help button */
#help-button:hover {
  background-color: #555;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Set the styles for the context menu */
.context-menu {
  position: fixed;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  z-index: 3;
  transition: transform 0.3s ease-in-out, opacity 0.9s ease-in-out,
    box-shadow 0.3s ease-in-out;
  opacity: 1;
  pointer-events: all;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  /* Position the context menu in the center of the screen */
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  transform: scaleY(1);
}

.context-menu[state="hidden"] {
  opacity: 0;
  pointer-events: none;
  transform: scaleY(0);
}

/* Set the styles for the context menu buttons */
.context-menu button {
  background: none;
  border: none;
  padding: 5px;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  transition: all 0.3s ease-in-out;
  color:rgb(65, 65, 65);
}

/* Set the styles for the context menu button icons */
.context-menu button i {
  font-size: 16px;
  margin-right: 5px;
}

/* Add hover effect for the context menu buttons */
.context-menu button:hover {
  background-color: #ddd;
}

/* Add hover effect for the context menu button icons */
.context-menu button:hover i {
  color: #333;
}

.ctmn-bg {
  /* Set the styles for the context menu background */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.747);
  z-index: 2;
}

.ctmn-bg[state="hidden"] {
  /* Hide the context menu background */
  display: none;
}


/* Set the background color and height for the title bar in dark mode */
#title-bar[colorstate="dark"] {
  background-color: #222;
}

/* Set the color, font size, and margin for the title bar icon in dark mode */
#title-bar[colorstate="dark"] i {
  color: #fff;
}

/* Set the color and font weight for the title bar text in dark mode */
#title-bar[colorstate="dark"] span {
  color: #fff;
}

/* Set the background color and overflow for the note list in dark mode */
#note-list[colorstate="dark"] {
  background-color: #222;
  border-right: 1px solid #444;
}

/* Set the color, border, and background for the note items in dark mode */
.note-item[colorstate="dark"] {
  border-bottom: 1px solid #444;
  background-color: #333;
}

/* Set the font weight and margin for the note title in dark mode */
.note-title[colorstate="dark"] {
  font-weight: bold;
  margin-bottom: 5px;
  color: #fff;
}

/* Set the color for the note date in dark mode */
.note-date[colorstate="dark"] {
  color: #999;
}

/* Set the background color for the selected note item in dark mode */
.note-item.selected[colorstate="dark"] {
  background-color: #292929;
  border-left: 5px solid #ffffff;
}

/* Set the background color for the main container in dark mode */
#main-container[colorstate="dark"] {
  background-color: #222;
}

/* Set the background color and border for the note content in dark mode */
#note-content[colorstate="dark"] {
  background-color: #333;
  border: 1px solid #444;
  transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  color: white;
}

/* Set the color for disabled state in dark mode */
#note-content[state="disabled"][colorstate="dark"] h4 {
  color: #999;
}

/* Set the color for the placeholder text in dark mode */
#note-content[colorstate="dark"]:empty:before {
  color: #999;
}

/* Set the background color for the button bar in dark mode */
#button-bar[colorstate="dark"] {
  background-color: #222;
}

/* Set the background color for buttons in dark mode */
button[colorstate="dark"] {
  background-color: #444;
}

/* Set the color for buttons in dark mode */
button[colorstate="dark"]:not(:disabled) {
  color: #fff;
}

/* Set the background color for the toolbar in dark mode */
#toolbar[colorstate="dark"] {
  background-color: #222;
}

/* Set the color for toolbar buttons in dark mode */
#toolbar button[colorstate="dark"] {
  color: #fff;
}

/* Set the background color for the window controls in dark mode */
#min-button[colorstate="dark"],
#max-button[colorstate="dark"],
#close-button[colorstate="dark"],
#theme-button[colorstate="dark"] {
  background: none;
}

/* Change color on hover for the window controls in dark mode */
#min-button[colorstate="dark"]:hover,
#max-button[colorstate="dark"]:hover,
#close-button[colorstate="dark"]:hover,
#theme-button[colorstate="dark"]:hover {
  background-color: #333;
  box-shadow: 0 2px 5px rgba(255, 255, 255, 0.2);
}

/* Set the background color for the help button in dark mode */
#help-button[colorstate="dark"] {
  background-color: #222;
}

/* Set the color for the help button icon in dark mode */
#help-button[colorstate="dark"] i {
  color: #fff;
}

/* Add hover effect for the help button in dark mode */
#help-button[colorstate="dark"]:hover {
  background-color: #333;
  box-shadow: 0 2px 5px rgba(255, 255, 255, 0.2);
}

/* Set the background color for the context menu in dark mode */
.context-menu[colorstate="dark"] {
  background-color: #333;
  border: 1px solid #444;
}

/* Set the color for context menu buttons in dark mode */
.context-menu button[colorstate="dark"] {
  color: #fff;
}

/* Add hover effect for the context menu buttons in dark mode */
.context-menu button[colorstate="dark"]:hover {
  background-color: #444;
}

/* Add hover effect for the context menu button icons in dark mode */
.context-menu button[colorstate="dark"]:hover i {
  color: #fff;
}

/* Set the background color for the context menu background in dark mode */
.ctmn-bg[colorstate="dark"] {
  background-color: rgba(0, 0, 0, 0.747);
}

#note-title[colorstate="dark"] {
  border: 1px solid #444;
  background-color: #333;
  color: white;
}

#note-title[colorstate="dark"]:focus {
  border: 1px solid #444;
  background-color: #333;
  color: white;
}

#note-title[colorstate="dark"]::placeholder {
  color: #999;
}

#note-title[colorstate="dark"]:disabled {
  background-color: #333;
  color: #999;
}