Sindbad~EG File Manager
// -------------------------
// Personal menu.
// -------------------------
/* stylelint-disable declaration-no-important*/
#snap-pm {
background-color: #eee;
overflow-x: hidden; // Prevent scrollbars.
display: none;
@include media-breakpoint-up(md) {
min-height: 100vh;
}
}
#primary-nav {
display: none;
}
body.snap-pm-open {
background-color: #eee;
}
// -------------------------
// Personal open and close.
// -------------------------
.snap-pm-open {
#snap-pm {
display: block;
}
#page,
#moodle-footer,
#mr-nav,
#newmessageoverlay,
.skiplinks {
display: none;
}
// Animate opening the pm.
#snap-pm-inner {
/* stylelint-disable no-unknown-animations*/
animation-name: snap-drop;
/* stylelint-enable no-unknown-animations*/
animation-iteration-count: once;
animation-timing-function: ease-in-out;
animation-duration: 0.3s;
}
}
// -------------------------
// Personal menu header.
// -------------------------
#snap-pm-header {
padding: 2%;
color: white;
.userpicture {
float: left;
width: 5em;
margin-right: 2%;
}
.userinitials.size-90 {
float: left;
margin-right: 2%;
width: 90px;
height: 90px;
font-size: 2rem;
}
h1,
a {
color: white !important;
padding-top: 0; // No top padding on close icon and links.
}
#snap-pm-header-quicklinks {
a:after {
content: '-';
display: inherit;
margin: 0 .5em;
}
a:last-of-type:after {
content: '';
}
}
}
// -------------------------
// Navigation to previous years courses.
// -------------------------
#snap-pm-courses-nav {
border: none;
// Reset bs styles.
.nav-item {
float: left;
}
.nav-link {
background-color: transparent;
border: none;
padding: .5em;
}
}
// -------------------------
// Personal menu content.
// -------------------------
#snap-pm-content {
padding: 2%;
position: relative;
// Headings for sections including updates.
h2 {
clear: both;
font-size: 1rem;
font-weight: 500;
line-height: 1;
padding: 0.5em 0;
margin: 0.5em 0;
}
#snap-pm-courses {
overflow: hidden;
}
// Tablet and mobile display.
@include media-breakpoint-down(md) {
width: 700vw;
section {
width: 100vw !important;
float: left;
padding: 0 2em;
margin-bottom: 60px; // For the menu.
border-color: transparent !important;
}
}
}
// -------------------------
// Tab content for current and previous courses.
// -------------------------
#snap-pm-courses-content {
.tab-pane {
display: none;
&.active {
display: block;
animation-name: slideFromRight;
animation-iteration-count: once;
animation-timing-function: ease-in-out;
animation-duration: .7s;
}
}
#snap-pm-courses-current.tab-pane.active {
animation-name: slideFromLeft;
}
}
@keyframes slideFromLeft {
0% {
opacity: 0;
transform: translate3d(-1000px, 0, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes slideFromRight {
0% {
opacity: 0;
transform: translate3d(1000px, 0, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
// -------------------------
// Personal menu tablet & mobile navigation.
// -------------------------
#snap-pm-mobilemenu {
display: none;
@include media-breakpoint-down(md) {
position: fixed;
bottom: 0;
left: 0;
z-index: 1;
width: 100%;
height: 60px;
padding: .5em 0;
display: flex;
background-color: white;
border-top: 1px solid $gray-lighter;
a {
flex: 1;
margin: 0 4%;
text-align: center;
outline: none;
@include alakazam();
.svg-icon {
border-radius: 50%;
height: 40px;
width: 40px;
background-color: white;
border: 1px solid $gray-light;
}
&.state-active {
transform: scale(1.5);
margin-top: -.5em;
}
}
}
}
// -------------------------
// Personal menu current courses.
// -------------------------
#snap-pm-courses-current {
#snap-pm-courses-current-cards {
margin-top: 2em;
}
// Hidden courses - always output for js, but hidden unless populated.
#snap-pm-courses-hidden {
display: none;
&.state-visible {
display: block; // Toggled in template and js.
}
}
}
// -------------------------
// Course cards - a card for each course.
// -------------------------
.coursecard {
@include media-breakpoint-up(md) {
width: 30%;
float: left;
height: 250px;
&:hover {
transform: scale(1.05);
box-shadow:
0 8px 17px 0 $gray-light,
0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
}
min-width: 220px; // Smallest possible so that the contacts dont overlaps the course title.
height: 150px;
margin: .5em 3% .5em 0;
border-radius: .3em;
box-shadow: 0 1px 2px 0 #eceeef;
cursor: pointer;
position: relative;
overflow: hidden;
@include bg-cover;
@include alakazam();
// Course card data - below the image.
.coursecard-body {
background-color: white;
position: absolute;
bottom: 0;
width: 100%;
padding: 1.5em .5em 1em .5em;
min-height: 50%;
// Course name.
h3 {
font-size: 1em;
margin: 0;
// Link to course, limited to 2 lines.
a {
overflow: hidden;
line-height: 1.25;
width: 100%;
max-height: 2.5em; // 1em font-size * 1.25 line height * 2 lines to show.
white-space: normal !important;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
}
.coursecard-contacts {
position: absolute;
top: -1em;
left: -1%;
width: 100%;
overflow: hidden;
text-align: center;
.userpicture,
.coursecard-contacts-more {
margin: 0 1%;
width: 35px; // To get same size from "$userpicture->size = 35".
height: 35px;
background-color: white;
padding: 2px;
}
.coursecard-contacts-more {
display: inline-grid;
font-size: initial;
align-items: center;
border-radius: 50%;
padding: 0;
border: 3px solid $gray-lighter;
}
}
.completionstatus,
.coursegrade {
font-size: $font-size-sm;
}
.coursegrade {
display: block;
line-height: 2.5em;
}
.published-status {
clear: both;
float: left;
margin-bottom: -1em;
}
.completionstatus {
border-bottom: .5em solid $gray-lighter;
}
.completion-line {
background-color: $brand-success;
height: .3em;
margin-top: -.4em;
}
/* Course favoriting */
.favoritetoggle {
display: block;
width: 2em;
height: 2em;
padding: 0;
position: absolute;
top: 0;
right: 0;
margin: 0.25em;
z-index: 1;
}
.favoritetoggle:after {
background: url("[[pix:theme|fav_unchecked]]");
background-repeat: none;
content: ' ';
width: 80%;
height: 80%;
display: block;
margin: 0 10% 5%;
}
&.favorited .favoritetoggle:after {
background: url("[[pix:theme|fav_checked]]");
}
}
// -------------------------
// Personal menu updates.
// -------------------------
#snap-pm-updates {
width: unset;
section {
position: relative;
border-bottom: 1px solid $gray-light;
padding-bottom: .5em;
width: 100%;
#snap-personal-menu-messages,
#snap-personal-menu-forumposts {
.userinitials {
float: left;
width: 40px;
height: 40px;
font-size: unset;
margin: 0.3em 1em 0 0.3em;
}
}
}
#snap-personal-menu-feed-deadlines .snap-media-object,
#snap-personal-menu-feed-grading .snap-media-object {
.activityiconcontainer {
width: 35px;
height: 35px;
padding: 0.3rem;
float: left;
margin: 0.3em 1em 0 0.3em;
&.activity-feed[activity-type="Forum"],
&.activity-feed[activity-type="Chat"],
&.activity-feed[activity-type="Open Forum"] {
background-color: transparent;
padding: 0.4rem;
& > img {
filter: none;
}
}
&.activity-feed[activity-type="External tool"] {
background-color: transparent;
padding: 0.4rem;
& > img {
filter: none;
}
}
&.activity-feed[activity-type="Assignment"],
&.activity-feed[activity-type="Assign"],
&.activity-feed[activity-type="Workshop"],
&.activity-feed[activity-type="Journal"],
&.activity-feed[activity-type="Interactive Content"],
&.activity-feed[activity-type="H5P"],
&.activity-feed[activity-type="Attendance"] {
background-color: transparent;
padding: 0.4rem;
& > img {
filter: none;
}
}
&.activity-feed[activity-type="Choice"],
&.activity-feed[activity-type="Feedback"],
&.activity-feed[activity-type="Quiz"],
&.activity-feed[activity-type="Survey"],
&.activity-feed[activity-type="Questionnaire"],
&.activity-feed[activity-type="Lesson"] {
background-color: transparent;
padding: 0.4rem;
& > img {
filter: none;
}
}
&.activity-feed[activity-type="Database"],
&.activity-feed[activity-type="Glossary"],
&.activity-feed[activity-type="Wiki"],
&.activity-feed[activity-type="Group choice"] {
background-color: transparent;
padding: 0.4rem;
& > img {
filter: none;
}
}
&.activity-feed[activity-type="Collaborate"] {
background-color: transparent;
padding: 0.4rem;
& > img {
filter: none;
}
}
&.activity-feed[activity-type="America's Professor Quiz"] {
background-color: transparent;
padding: 0.4rem;
& > img {
filter:none;
}
}
&.activity-feed[activity-type="Checklist"],
&.activity-feed[activity-type="GO1 content item"],
&.activity-feed[activity-type="Course certificate"],
&.activity-feed[activity-type="Adaptive Quiz"],
&.activity-feed[activity-type="Quizventure"],
&.activity-feed[activity-type="Zoom meeting"],
&.activity-feed[activity-type="Dialogue"] {
background-color: transparent;
padding: 0.4rem;
& > img {
filter: none;
}
}
&.activity-feed[activity-type="Questionnaire"],
&.activity-feed[activity-type="Go one"],
&.activity-feed[activity-type="HotPot module"],
&.activity-feed[activity-type="Custom certificate"],
&.activity-feed[activity-type="Certificate"],
&.activity-feed[activity-type="OU WIKI"],
&.activity-feed[activity-type="BigBlueButton"] {
img {
filter: none;
}
}
&.activity-feed[activity-type="File"],
&.activity-feed[activity-type="IMS content package"],
&.activity-feed[activity-type="SCORM package"],
&.activity-feed[activity-type="Folder"],
&.activity-feed[activity-type="Lightbox Gallery"],
&.activity-feed[activity-type="URL"],
&.activity-feed[activity-type="Book"],
&.activity-feed[activity-type="Page"],
&.activity-feed[activity-type="Label"],
&.activity-feed[activity-type="File"] {
background-color: transparent;
padding: 0.4rem;
img {
filter: opacity(0.5);
}
}
}
}
#snap-personal-menu-feed-forumposts,
#snap-personal-menu-feed-messages {
.snap-media-object .activityiconcontainer {
background-color: transparent;
float: left;
margin: 0.3em 1em 0 0.3em;
width: 36px;
display: block;
padding: unset;
> img.userpicture {
filter: none;
}
}
}
}
// -------------------------
// Personal menu links to browse all course, see all messages etc.
// -------------------------
#snap-pm-courses .snap-personal-menu-more {
position: absolute;
top: 0;
right: 0;
}
.snap-personal-menu-more {
display: block;
text-align: right;
.snap-feeds-refresh-icon,
.snap-feeds-more-icon{
display: none;
}
}
.snap-personal-menu-feed-loading {
&:after {
@include ajaxing(inline-block, relative, 20px, 6px);
}
}
.snap-log-in-more {
padding: 1em;
display: block;
text-align: center;
}
.snap-log-in-loading-spinner {
&:after {
@include ajaxingwhite(inline-block, relative, 10em, 2em);
}
}
.snap-login-option {
display: none;
}
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists