styles.css

/* @settings

name: Tokei
id: tokei
settings:
    -
        id: tokei-background
        title: Background Color
        description: Set the color of the timezone block background
        type: variable-themed-color
        opacity: true
        format: hex
        default-light: '#d7dff0'
        default-dark: '#1c2732'

    -
        id: tokei-main-text
        title: Main Text Color
        description: Set the color of the main text 
        type: variable-themed-color
        opacity: true
        format: hex
        default-dark: '#aabed8'
        default-light: '#497fa0'
    -
        id: tokei-secondary-text
        title: Secondary Text Color
        description: Set the color of the secondary text 
        type: variable-themed-color
        opacity: true
        format: hex
        default-dark: '#7b96b3'
        default-light: '#9fabb3'

    -
        id: tokei-highlight
        title: Highlight Color
        description: Set the highlight color
        type: variable-themed-color
        opacity: true
        format: hex
        default-dark: '#6a85a3'
        default-light: '#6a85a3'

    -
        id: tokei-border
        title: Border Color
        description: Set the border color 
        type: variable-themed-color
        opacity: true
        format: hex
        default-dark: '#3a4e58'
        default-light: '#88a0b9'

*/

.theme-dark {
	--tokei-background: #1c2732; 
	--tokei-main-text: #aabed8; 
	--tokei-secondary-text: #7b96b3; 
	--tokei-highlight: #427bbf; 
	--tokei-border: #3a4e58; 
}

.theme-light {
	--tokei-background: #d7dff0;
	--tokei-main-text: #497fa0; 
	--tokei-secondary-text: #9fabb3; 
	--tokei-highlight: #6a85a3; 
	--tokei-border: #88a0b9; 
}

.small-hint {
    font-family: sans-serif;
    font-size: 0.8em;
    color: var(--tokei-highlight);
}

/* This the the top level container */
.clock-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  /* This is the time and date container */
  .timedate-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  
  .time {
    margin: 0;
    padding: 0;
    font-size: 4em;
    font-weight: 900;
    line-height: 1;
    text-shadow: 2px 2px 4px var(--tokei-secondary-text);
    color: var(--tokei-main-text);
  }
  
  .date-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }
  
  .date {
    padding: 0;
    margin: 0;
    font-size: 2em;
    color: var(--tokei-secondary-text);
  }
  
  /* Week and Quarter Container */
  .week-quarter-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 0.7em;
  }

  .quarter {
    color: var(--tokei-main-text);
    margin-bottom: -2px;
  }

  .week {
    color: var(--tokei-main-text);
  }


  /* Timezone Blocks */
.timezone-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px;
    min-width: 300px;
}

.timezone-pair {
  display: flex;
  flex-direction: column; 
  align-items: center;
  border: 2px solid var(--tokei-border); 
  max-width: 25%;
  background-color: var(--tokei-background); 
  border-radius: 5px;
  backdrop-filter: blur(10px);
}

.timezone-name {
  color: var(--tokei-highlight); 
  font-weight: bold;
}

.timezone-time {
    overflow-wrap: anywhere;
    text-align: center;
    padding: 2px 2px 2px 2px;
    color: var(--tokei-main-text); 
    font-size: 1em;
}



/* Styles for the settings dialog */

.custom-input-width {
  width: 7em;
  box-sizing: border-box;
  line-height: 1em;
}

.addButtonClass,
.deleteButtonClass {
  width: 1.8em;
  line-height: 1em;
  color: var(--tokei-main-text);
  border: 1px solid var(--tokei-border);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.4em;
  font-weight: bold;
  padding: 0;
  margin: 0;
}

.addButtonClass:hover,
.deleteButtonClass:hover {
  background-color: var(--tokei-highlight);
  border: 2px solid var(--tokei-main-text);
  color: var(--tokei-background);
}

.twoButtonsClass {
  display: flex;
  justify-content: flex-start;
  gap: 0.3em;
  
}

/* Donation Styling */
.recent-files-donation {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.donate-text {
  text-align: center;
  margin-bottom: 5px; 
}

.donate-img {
  width: 163px;
  height: 45px;
  border-radius: 10px;
}

.donate-img:hover {
  border: 2px solid red;
  border-radius: 10px;
}

.time-format-settings {
  border-top: none;
  border-bottom: none;
}

.show-date-settings {
  border-bottom: none;
  font-weight: bold;
}

.date-format-settings {
  border-top: none;
  border-bottom: none;
  margin-left: 20px;
}

.week-quarter-settings {
  margin-left: 20px;
  border-bottom: none;
  font-weight: bold;
}

.week-start-settings {
  border-top: none;
  margin-left: 40px;
}

.year-start-settings {
  border-top: none;
  margin-left: 40px;
}

.show-timezones-settings {
  font-weight: bold;
  border-bottom: none;
}

.timezone-format-settings {
  border-top: none;
  margin-left: 20px;
}

.timezone-pairs-settings {
  margin-left: 20px;
}