Skip to content

Commit

Permalink
Merge pull request #14 from dilipsuthar1999/Date-Time-Menu
Browse files Browse the repository at this point in the history 
Date Time Menu
#11 Issue Resolved.
Updated styling issue in #14 Pull request.
  • Loading branch information
@anand-3399
anand-3399 committed Oct 15, 2022
1 parent d6c0504 commit 052fae9
Show file tree
Hide file tree
Showing 2 changed files with 113 additions and 108 deletions.
50 changes: 25 additions & 25 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,8 +62,8 @@
<a id="h">12</a>:<a id="m">00</a>
<!-- <a id="s">00</a>: -->
<a id="mi">000</a>
<br/>
<a id="mon">01</a>/<a id="d">1</a>/<a id="y">0</a>
<br />
<a id="d">01</a>/<a id="mon">1</a>/<a id="y">0</a>
</div>
</div>
</div>
Expand Down Expand Up @@ -414,33 +414,33 @@
<!-- Date Time Menu -->
<div class="container-date-time" id="DateTimeMenu">
<div class="notification">
<h1>Notifications</h1>
<h1>Notifications</h1>
</div>
<div class="week-month-date"></div>
<div class="week-month-date"></div>
<div class="calendar">
<div class="month">
<div class="date">
<h1></h1>
<div class="prev-next">
<i class="fas fa-angle-left prev"><b>&#60;</b></i>
<i class="fas fa-angle-right next"><b>&#62;</b></i>
</div>
<div class="month">
<div class="date">
<h1></h1>
<div class="prev-next">
<i class="fas fa-angle-left prev"><b>&#60;</b></i>
<i class="fas fa-angle-right next"><b>&#62;</b></i>
</div>
</div>

</div>

</div>
<div class="weekdays">
<div>Su</div>
<div>Mo</div>
<div>Tue</div>
<div>We</div>
<div>Th</div>
<div>Fr</div>
<div>Sa</div>
</div>
<div class="days"></div>
<div class="weekdays">
<div>Su</div>
<div>Mo</div>
<div>Tue</div>
<div>We</div>
<div>Th</div>
<div>Fr</div>
<div>Sa</div>
</div>
<div class="days"></div>
</div>
</div>
</div>




Expand Down
171 changes: 88 additions & 83 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
box-sizing: border-box;
}

body {
Expand Down Expand Up @@ -48,9 +48,9 @@ body {
}

.taskbar img {
width: 30px;
height: 28px;
padding: 6px;
width: 35px;
height: 35px;
padding: 5px;
}

.taskbar img:hover {
Expand All @@ -71,6 +71,7 @@ body {
height: 85%;
display: flex;
justify-content: flex-end;
align-items: center;
}


Expand Down Expand Up @@ -610,133 +611,137 @@ figure {
flex-direction: column;
}

/* Date Time and Notifications Menu from here */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

#DateTime{
#DateTime {
cursor: context-menu;
font-size: 12px;
}

#DateTime:hover{
#DateTime:hover {
transition: all 0.1s ease-in;
background-color: #d1d1d1;
border-radius: 8px;
}

.container-date-time {
font-family: 'Open Sans', sans-serif;
color: #000;
margin: 10px;
z-index: 1;
position: fixed;
z-index: 1;
bottom: 50px;
right: -500px;
overflow-x: hidden;
transition: all 0.5s ease-in;
cursor: context-menu;
}

.notification{
width: 258px;
border-radius: 8px;
background-color: rgb(240, 243, 250, .8);
backdrop-filter: blur(20px);
height: 150px;
margin-bottom: 10px;
}

.notification h1{
font-size: 13px;
padding: 15px 10px;
background-color: rgb(227, 239, 255, .8);
backdrop-filter: blur(20px);
border-radius: 8px 8px 0px 0px;
}

.week-month-date{
width: 258px;
border-radius: 8px 8px 0px 0px;
font-size: 12px;
background-color: rgb(227, 239, 255, .8);
backdrop-filter: blur(20px);
padding: 15px 10px;
font-weight: 600;
font-family: 'Open Sans', sans-serif;
color: #000;
margin: 10px;
z-index: 1;
position: fixed;
z-index: 1;
bottom: 50px;
right: -500px;
overflow-x: hidden;
transition: all 0.5s ease-in;
cursor: context-menu;
}

.notification {
width: 258px;
border-radius: 8px;
background-color: rgb(240, 243, 250, .8);
backdrop-filter: blur(20px);
height: 150px;
margin-bottom: 10px;
}

.notification h1 {
font-size: 13px;
padding: 15px 10px;
background-color: rgb(227, 239, 255, .8);
backdrop-filter: blur(20px);
border-radius: 8px 8px 0px 0px;
}

.week-month-date {
width: 258px;
border-radius: 8px 8px 0px 0px;
font-size: 12px;
background-color: rgb(227, 239, 255, .8);
backdrop-filter: blur(20px);
padding: 15px 10px;
font-weight: 600;
}

.calendar {
width: 258px;
border-radius: 0px 0px 8px 8px;
padding: 5px;
background-color: rgb(240, 243, 250, .8);
backdrop-filter: blur(20px);
width: 258px;
border-radius: 0px 0px 8px 8px;
padding: 5px;
background-color: rgb(240, 243, 250, .8);
backdrop-filter: blur(20px);
}

.month {
width: 100%;
padding: 7px 3px;
margin: 2px;
width: 100%;
padding: 7px 3px;
margin: 2px;
}

.month .prev-next{
display: inline-block;
width: 25%;
font-size: 14px;
text-align: right;
.month .prev-next {
display: inline-block;
width: 25%;
font-size: 14px;
text-align: right;
}

.month .prev-next i{
.month .prev-next i {
padding: 0px 5px;
background-color: rgb(227, 239, 255, .8);
}

.month h1 {
display: inline-block;
width: 70%;
font-size: 14px;
font-weight: 600;
margin-left: 2px;
display: inline-block;
width: 70%;
font-size: 14px;
font-weight: 600;
margin-left: 2px;
}

.weekdays, .days {
width: 100%;
display: flex;
.weekdays,
.days {
width: 100%;
display: flex;
}

.weekdays {
align-items: center;
align-items: center;
}

.days {
flex-wrap: wrap;
flex-wrap: wrap;
}

.weekdays div, .days div {
font-size: 12px;
width: calc(220px / 7);
display: flex;
justify-content: center;
padding: 9px 3px;
margin: 2px;
.weekdays div,
.days div {
font-size: 12px;
width: calc(220px / 7);
display: flex;
justify-content: center;
padding: 9px 3px;
margin: 2px;
}

.weekdays div {
font-weight: bold;
font-weight: bold;
}

.days div:hover:not(.today) {
background-color: rgba(192, 192, 192, .6);
text-decoration: none;
border-radius: 50%;
background-color: rgba(192, 192, 192, .6);
text-decoration: none;
border-radius: 50%;
}

.prev-date,
.next-date {
opacity: 0.5;
opacity: 0.5;
}

.today {
background-color: rgb(0, 122, 255);
border-radius: 50%;
color: #fff;
background-color: rgb(0, 122, 255);
border-radius: 50%;
color: #fff;
}

0 comments on commit 052fae9

Please sign in to comment.