.notes-button {
display: flex;
align-items: center;
gap: 8px;
position: fixed;
top: 17px;
right: 275px;
z-index: 3201;
background: transparent;
border: transparent;
padding: 10px;
cursor: pointer;
border-radius: 6px;
pointer-events: auto;
color: #f0f0f0;
}
.notes-button svg {
display: block;
width: 22px;
height: 22px;
}
.notes-overlay {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 95vw;
max-width: 900px;
height: 85vh;
background-color: rgba(18, 18, 18, 0.95);
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.1);
z-index: 1000;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
display: flex;
flex-direction: column;
user-select: auto;
}
.notes-overlay.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.notes-overlay ::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.notes-overlay ::-webkit-scrollbar-track {
background: transparent;
}
.notes-overlay ::-webkit-scrollbar-thumb {
background-color: rgba(120, 120, 120, 0.5);
border-radius: 10px;
border: 2px solid transparent;
background-clip: padding-box;
}
.notes-overlay ::-webkit-scrollbar-thumb:hover {
background-color: rgba(160, 160, 160, 0.7);
}
.notes-header {
display: flex;
justify-content: center;
align-items: center;
padding: 8px 15px;
border-bottom: 1px solid rgba(255,255,255,0.1);
position: relative;
flex-shrink: 0;
z-index: 10;
}
.notes-close-button {
background: none;
border: none;
color: #f0f0f0;
font-size: 28px;
line-height: 1;
cursor: pointer;
padding: 0 5px;
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
}
.notes-content-area {
padding: 15px;
padding-top: 5px;
flex-grow: 1;
overflow: hidden;
overflow-x: hidden;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
min-height: 0;
}
.notes-view, .notes-builds-view, .notes-videos-view {
grid-area: 1 / 1;
display: none;
flex-direction: column;
gap: 15px;
min-height: 0;
overflow: hidden;
}
.view-active-notes .notes-view {
display: flex;
}
.view-active-builds .notes-builds-view {
display: flex;
}
.view-active-videos .notes-videos-view {
display: flex;
}
.notes-tabs-container {
display: flex;
align-items: center;
gap: 5px;
border-bottom: 1px solid #3a3a3a;
flex-shrink: 0;
}
.notes-tabs-list {
display: flex;
flex-grow: 1;
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 8px;
margin-bottom: -8px;
align-items: center;
}
.note-tab {
padding: 8px 12px;
cursor: pointer;
border: 1px solid transparent;
border-bottom: none;
border-radius: 4px 4px 0 0;
position: relative;
bottom: -1px;
color: #ccc;
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
flex-shrink: 0;
}
.note-tab:hover {
background-color: rgba(255, 255, 255, 0.05);
}
.note-tab.active {
background-color: #282828;
border-color: #3a3a3a;
color: #fff;
}
.note-tab-close {
background: none;
border: none;
color: #aaa;
cursor: pointer;
font-size: 16px;
padding: 0;
line-height: 1;
}
.note-tab-close:hover {
color: #fff;
}
.tab-rename-input {
background: #333;
border: 1px solid #555;
color: white;
padding: 2px 4px;
border-radius: 2px;
width: 100px;
}
.notes-add-tab-btn:hover {
background-color: #444;
}
.notes-editor-container {
display: flex;
flex-direction: column;
flex-grow: 1;
min-height: 0;
background-color: #282828;
border-radius: 4px;
}
.notes-toolbar {
padding: 8px;
border-bottom: 1px solid #3a3a3a;
flex-shrink: 0;
display: flex;
gap: 8px;
align-items: center;
}
.notes-toolbar button, .notes-toolbar select {
background: #333;
border: 1px solid #555;
color: #fff;
padding: 4px 8px;
border-radius: 3px;
cursor: pointer;
transition: background-color 0.2s;
font-family: sans-serif;
}
.notes-toolbar button:hover, .notes-toolbar select:hover {
background-color: #444;
}
.notes-toolbar button:active {
background-color: #555;
transform: translateY(1px);
}
.notes-toolbar select {
height: 28px;
}
.toolbar-icon-btn {
padding: 4px;
}
.toolbar-icon-btn svg {
width: 18px;
height: 18px;
stroke: #fff;
stroke-width: 1.5;
fill: none;
}
#notes-editor {
flex-grow: 1;
padding: 12px;
overflow-y: auto;
color: rgb(224, 224, 224);
font-family: sans-serif;
font-size: 14px;
line-height: 1.5;
outline: none;
width: 100%;
box-sizing: border-box;
user-select: text;
text-align: left;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
}
#notes-editor h1 {
font-size: 1.5em;
margin: 0.5em 0;
color: #fff;
}
.videos-list-container, .builds-list-container {
flex-grow: 1;
overflow-y: auto;
padding-right: 5px;
}
.videos-list, .builds-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.list-item, .build-item {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #282828;
padding: 8px 12px;
border-radius: 4px;
}
.list-item a, .build-item a {
color: #ffe082;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.list-item a:hover, .build-item a:hover {
text-decoration: underline;
}
.item-delete-btn, .build-delete-btn {
background: #333;
border-radius: 4px;
border: none;
color: white;
width: 28px;
height: 28px;
min-width: 28px;
min-height: 28px;
cursor: pointer;
font-size: 20px;
margin-left: 5px;
display: grid;
place-items: center;
font-family: Arial, sans-serif;
}
.add-video-form-container, .add-build-form-container {
flex-shrink: 0;
margin-top: auto;
padding-top: 10px;
}
.show-add-video-form-btn, .show-add-build-form-btn, .add-video-form button, .add-build-form button {
width: 100%;
padding: 8px;
background-color: #333;
border: 1px solid #555;
color: #fff;
border-radius: 4px;
cursor: pointer;
font-family: 'FontinSmallCaps', sans-serif;
}
.add-video-form, .add-build-form {
display: flex;
flex-direction: column;
gap: 8px;
}
.add-video-form input, .add-build-form input {
width: 100%;
padding: 8px;
background-color: #1e1e1e;
border: 1px solid #555;
color: #fff;
border-radius: 4px;
box-sizing: border-box;
}
.add-video-form-actions, .add-build-form-actions {
display: flex;
gap: 8px;
}
.add-video-form button[type="submit"], .add-build-form button[type="submit"] {
background-color: #444;
}
.add-video-form button[type="button"], .add-build-form button[type="button"] {
background-color: #333;
}
.hidden {
display: none;
}
.notes-view-switcher {
display: flex;
gap: 18px;
}
.notes-view-tab {
background: none;
border: none;
color: #bdbdbd;
font-family: 'FontinSmallCaps';
font-size: 1em;
padding: 8px 0 6px 0;
cursor: pointer;
position: relative;
outline: none;
}
.notes-view-tab.active {
color: #ffe082;
font-weight: 700;
}
#notes-widget-container {
position: fixed;
top: 10px;
right: 15px;
z-index: 3201;
display: flex;
align-items: center;
gap: 8px;
pointer-events: none;
}
.notes-title-desktop {
display: none;
font-family: 'FontinSmallCaps', sans-serif;
font-size: 1em;
}
.video-item-enhanced {
display: flex;
align-items: center;
gap: 12px;
}
.video-thumbnail {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
background-color: #111;
border-radius: 5px 5px 0 0;
margin: 0;
border-bottom: 1px solid #333;
}
.video-text-content {
padding: 10px 12px;
min-height: 52px;
display: flex;
flex-direction: column;
justify-content: center;
flex-grow: 1;
}
.video-title {
font-size: 14px;
font-weight: 500;
line-height: 1.4;
color: #e0e0e0;
margin-bottom: 4px;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.video-title:hover {
text-decoration: underline;
}
.video-channel {
font-size: 12px;
color: #999;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.add-build-form input:focus,
.add-video-form input:focus {
outline: none;
border-color: #ffe082;
}
.empty-list-message {
text-align: center;
padding: 40px 20px;
color: #888;
font-style: italic;
font-family: 'FontinSmallCaps', sans-serif;
}
.hidden {
display: none !important;
}
.builds-list .list-item {
border-bottom: 1px solid #333;
display: flex;
align-items: center;
gap: 12px;
}
.builds-list .list-item:last-child {
border-bottom: none;
}
.build-item-favicon {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.builds-list .list-item a {
flex-grow: 1;
}
.item-copy-btn {
background: none;
border: none;
color: #999;
cursor: pointer;
padding: 4px;
border-radius: 4px;
transition: color 0.2s;
}
.item-copy-btn svg {
width: 16px;
height: 16px;
display: block;
}
.item-copy-btn:hover {
color: #fff;
background-color: #444;
}
.videos-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 15px;
padding: 0;
margin: 0;
list-style: none;
}
.videos-list .list-item {
padding: 0;
background: none;
min-width: 0;
}
.video-item-link {
display: flex;
flex-direction: column;
background-color: #282828;
border-radius: 5px;
text-decoration: none;
color: inherit;
overflow: hidden;
height: 100%;
}
@media (max-width: 960px) {
.notes-overlay {
width: 100dvw;
height: 100dvh;
max-height: 100dvh;
max-width: 100dvw;
top: 0;
left: 0;
transform: none;
border-radius: 0;
border: none;
}
body.notes-active .notes-button {
display: none;
}
.notes-button {
top: 10px;
right: 14px;
}
.notes-header {
padding-top: 50px;
justify-content: center;
}
.notes-close-button {
top: 15px;
right: 20px;
transform: none;
}
}
@media (min-width: 961px) {
.notes-overlay {
width: calc(100vw - 640px);
max-width: 1100px;
}
.notes-title-desktop {
display: inline;
}
}
.notes-add-tab-btn {
background: #333;
border: none;
color: white;
width: 28px;
height: 28px;
min-width: 28px;
min-height: 28px;
border-radius: 4px;
cursor: pointer;
font-size: 20px;
margin-left: 5px;
display: grid;
place-items: center;
font-family: Arial, sans-serif;
}