MFCalendarPopup / 1.0 / css / mf-calendar-popup.css file last updated : 2024-05-09 |
---|
/*! methodfish package release
Project : MFCalendarPopup
Release : 1.0
Release date : 2024-05-09 18:50:52
License : {{warning}}tba
For more information please refer to https://methodfish.com/Projects/MFCalendarPopup
*/
.mf-calendar-popup {
position: absolute;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
width:365px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
z-index: 1000;out: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}
.mf-calendar-popup .header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.mf-calendar-popup .header > div {
white-space:nowrap;
}
.mf-calendar-popup .selectors {
display: flex;
align-items: center;
}
.mf-calendar-popup .material-icons {
font-family: 'Material Icons';
font-size: 24px;
vertical-align: sub;
cursor: pointer;
}
@media screen and (max-width: 400px) {
.mf-calendar-popup {
padding: 1px;
width:unset;
}
.mf-calendar-popup select {
font-size:15px!important;
width:98px!important;
}
.mf-calendar-popup .day {
padding:7px!important;
}
}
.mf-calendar-popup .hideBtn {
margin-left:-25px;
margin-bottom:30px;
margin-top:0;
float:right;
vertical-align: top;
}
.mf-calendar-popup .prevMonthBtn {
background-color: #efefef;
padding:10px;
}
.mf-calendar-popup .nextMonthBtn {
background-color: #efefef;
padding:10px;
}
.mf-calendar-popup select {
background-color: #f6f5f5;
border:none;
font-size:19px;
padding:13px 10px 10px 10px;
margin-top:30px;
cursor:pointer;
width:140px;
-webkit-appearance: none; /* Remove default arrow for WebKit browsers */
-moz-appearance: none; /* Remove default arrow for Firefox */
appearance: none; /* Remove default arrow for other browsers */
}
.mf-calendar-popup select.month {
text-align:right;
}
.mf-calendar-popup select.year {
text-align:left;
}
.mf-calendar-popup .day-names {
display: flex;
justify-content: space-around;
}
.mf-calendar-popup .day-name {
flex: 1;
text-align: center;
font-weight: bold;
padding:5px;
}
.mf-calendar-popup .days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 1px;
}
.mf-calendar-popup .day {
cursor: pointer;
padding: 15px;
text-align: center;
}
.mf-calendar-popup .day:hover {
background-color: #e0dac2;
}
.mf-calendar-popup .today {
background-color: #e0e0e0;
}
.mf-calendar-popup .weekend {
background-color: #e5e8e7; /* Example background color for weekends */
}
Also see
articles/Implementing-a-Monaco-Editorsquarearticles/iConnectionTestsquarearticles/javascript-camerasquarearticles/list-editsquarearticles/minifierssquarearticles/opayosquarearticles/table-drag-sortersquarearticles/typewatchsquareprojects/MFCalendarPopupsquareprojects/MFChartColumnsquareprojects/MFColorPickersquareprojects/MFColorPickerBasicsquareprojects/MFColumnGradientsquareprojects/MFFloatawayMsgsquareprojects/MFPanelssquareprojects/MFSelectorsquare
Comments
New Comment