catto
/
snotes-deck
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

some css

This commit is contained in:
catto 2024-05-01 22:20:20 +02:00
parent d6700e3066
commit 344c1a033e
2 changed files with 25 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
index.html
View File

@ -19,11 +19,10 @@
</head> </head>
<body> <body>
<div class="menu" id="contextMenu">
<button id="deleteButton">Delete</button>
</div>
<div class="top-bar"> <div class="top-bar">
<div class="menu" id="contextMenu">
<button id="deleteButton">Delete</button>
</div>
<div id="button-row"> <div id="button-row">
<button class="row" id="show-notes-button">Refresh Notes</button> <button class="row" id="show-notes-button">Refresh Notes</button>
<button class="row" type="submit" id="save-button">Save</button> <button class="row" type="submit" id="save-button">Save</button>
@ -53,8 +52,10 @@
<div class="editor"> <div class="editor">
<input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" id="create-tag" <input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" id="create-tag"
placeholder="Tag..." /> placeholder="Tag..." />
<textarea autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" id="create-input" <textarea autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" id="create-input"
placeholder="Type your note here..."></textarea> placeholder="Type your note here..."></textarea>
<p id="create-msg"></p> <p id="create-msg"></p>
<p style="white-space: pre-line" id="notes-list"></p> <p style="white-space: pre-line" id="notes-list"></p>

26
src/styles.css
View File

@ -13,18 +13,22 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
margin-top: 0.5em; margin-top: 0.25em;
overflow-y: hidden; overflow-y: hidden;
} }
.top-bar {
margin: 0;
}
#button-row { #button-row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-flow: wrap;
justify-content: space-evenly; justify-content: space-evenly;
margin: 0; margin: 0;
} }
.container { .container {
@ -47,6 +51,8 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
} }
.row { .row {
@ -84,15 +90,19 @@ button {
button { button {
cursor: pointer; cursor: pointer;
box-sizing: border-box;
} }
button:hover { button:hover {
border-color: #396cd8; border-color: #c539d8;
box-shadow: 0 0 5px #c539d8, 0 0 10px #c539d8, 0 0 15px #c539d8, 0 0 20px #c539d8;
box-sizing: border-box;
} }
button:active { button:active {
border-color: #396cd8; border-color: #ab39d8;
background-color: #e8e8e8; background-color: #44003e;
} }
#create-tag { #create-tag {
@ -151,7 +161,7 @@ button {
.sidebar { .sidebar {
background-color: #0f0f0f; background-color: #0f0f0f;
width: 35%; width: 35%;
padding: 20px; padding: 0 20px;
} }
.note-sidebar-container { .note-sidebar-container {
@ -199,6 +209,8 @@ button {
z-index: 999; z-index: 999;
border: 1px solid #ccc; border: 1px solid #ccc;
padding: 5px; padding: 5px;
background-color: #252525;
} }
.menu button { .menu button {
@ -227,6 +239,8 @@ button {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
outline: none; outline: none;
font-size: 16px; font-size: 16px;
line-height: 1.5;
margin: 0 -0.6em;
background-color: #252525; background-color: #252525;
color: #f6f6f6; color: #f6f6f6;