Nextcloud GitHub custom CSS

nextcloud.css

.theme--dark {
  --color-main-background: rgb(13, 17, 23);
  --color-main-background-translucent: rgb(13, 17, 23);
  --color-background-dark: rgb(13, 17, 23);
  --color-background-hover: #21262c;
  --color-primary-light: #21262c;
  --color-border: #21262d;
  --input-form-background: #010409;
  --btn-primary: #238636;
  --btn-primary-hover: #1b6e2b;
  --menu-background: #161b22;
  --text-color: #e6e6e6;
  --svg-invert: 100%;
}

.theme--light {
  --color-border: #d8d8d8;
  --input-form-background: #ffffff;
  --btn-primary: #46ba61;
  --btn-primary-hover: #50d36e;
  --menu-background: #ffffff;
  --text-color: #21262d;
  --svg-invert: 0%;
}

:root {
  --color-primary-element: #58a6ff;
  --color-primary-element-light: #75b5ff;
  --gradient-main-background: var(--color-main-background);
  --recommendation-height: 100px;
}

/* App navigation */
#app-navigation,
#app-navigation-vue {
  border: 0 !important;
  width: 340px !important;
  overflow: visible !important;
}

#app-navigation ul,
#app-navigation-vue ul {
  width: 340px !important;
  padding: 20px !important;
}

#app-navigation > ul > li.active,
#app-navigation > ul > li.active > a,
#app-navigation > ul > li:hover,
#app-navigation > ul > li > a:hover,
#app-navigation > ul > li,
#app-navigation > ul > li > a,
#app-navigation-vue > ul > li.active,
#app-navigation-vue > ul > li.active > a,
#app-navigation-vue > ul > li:hover,
#app-navigation-vue > ul > li > a:hover,
#app-navigation-vue > ul > li,
#app-navigation-vue > ul > li > a {
  border-radius: 8px !important;
  width: 300px !important;
  height: min-content !important;
  font-size: 14px !important;
}

#app-navigation > ul > li.active::after,
#app-navigation > ul > li a.active::after,
#app-navigation-vue > ul > li.active::after,
#app-navigation-vue > ul > li a.active::after {
  position: absolute;
  top: calc(50% - 15px);
  left: -9px;
  width: 4px;
  height: 30px;
  content: "";
  background: var(--color-primary-element);
  border-radius: 6px;
}

.app-navigation--close {
  margin-left: -340px !important;
}

.app-navigation-toggle {
  margin-right: -45px !important;
}

/* Shift the app content to the right to make room for the navigation margin */
#app-navigation:not(.hidden) + #app-content {
  margin-left: 340px !important;
}
#app-navigation-vue:not(.close) + .app-content {
  margin-left: 50px !important;
}
@media only screen and (max-width: 1024px) {
  #app-navigation:not(.hidden) + #app-content {
    margin-left: 0 !important;
  }
}

/* App navigation - share list */
#sublist-shareoverview > li {
  padding-left: 0 !important;
}

#sublist-shareoverview > li > a,
#sublist-shareoverview > li:hover {
  border-radius: 6px !important;
}

/* General styling */

input:not([type="range"]):not([type="button"]):not([type="submit"]),
textarea {
  background-color: var(--input-form-background) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 6px !important;
}

textarea {
  padding: 10px !important;
}

button,
input[type="submit"],
input[type="button"],
select,
.button,
.link-button {
  color: var(--text-color) !important;
  background-color: var(--input-form-background) !important;
  border-radius: 6px !important;
}

button.primary,
.button.primary {
  background-color: var(--btn-primary) !important;
  color: white !important;
  border: none !important;
}

button.primary:hover,
.button.primary:hover {
  background-color: var(--btn-primary-hover) !important;
}

/* Pop ups */
.settings,
.menu,
.header-menu__content,
.unified-search__input-wrapper,
#rightClickMenu,
.popovermenu {
  border-radius: 6px !important;
  background-color: var(--menu-background) !important;
}

.header-menu__carret,
.menu::after,
.popovermenu::after {
  border-bottom-color: var(--menu-background) !important;
}

/* Side menu */
.side-menu-apps-list {
  top: 170px;
}

/* File explorer */

#app-content-files,
#app-content-recent,
#app-content-favorites,
#app-content-sharingout,
#app-content-sharingin,
#app-content-sharinglinks,
#app-content-deletedshares,
#app-content-pendingshares,
#app-content-shareoverview,
#app-content-systemtagsfilter,
#app-content-trashbin {
  padding: 0 40px !important;
}

#controls {
  height: 70px !important;
  padding: 10px 0 !important;
}

.view-grid > tbody {
  padding: 10px !important;
}

table th#headerName {
  width: 9999px !important;
}

#filestable > thead > tr > th {
  border-top: 1px solid var(--color-border) !important;
}

#filestable > thead > tr > th:first-child {
  border-left: 1px solid var(--color-border) !important;
  border-radius: 6px 0 0 0 !important;
}

#filestable > thead > tr > th:last-child {
  border-right: 1px solid var(--color-border) !important;
  border-radius: 0 6px 0 0 !important;
}

@media only screen and (max-width: 988px) and (min-width: 1025px),
  only screen and (max-width: 688px) {
  #headerName {
    border-right: 1px solid var(--color-border) !important;
    border-radius: 0 6px 0 0 !important;
  }
}

#filestable > thead > tr {
  background-color: var(--menu-background) !important;
  border-bottom: 0 !important;
}

#filestable > thead {
  top: 50px;
  padding-top: 70px;
}

#fileList {
  margin: 0 !important;
  border-radius: 0 0 6px 6px !important;
  border: 1px solid var(--color-border) !important;
}

#fileList > tr:last-child > td {
  border-bottom: none !important;
}

/* Music player */
.plyr__controls {
  background-color: var(--color-main-background) !important;
  border-radius: 6px !important;
}

/* File explorer - recomendations */
#recommendations {
  max-height: none !important;
  height: fit-content !important;
  display: flex !important;
  align-items: flex-start !important;
}

.recommendation {
  border-radius: 6px !important;
  border: 1px solid var(--color-border) !important;
  position: relative;
  padding-right: 10px !important;
  margin: 5px !important;
  flex-grow: unset !important;
  overflow: hidden;
}

#headerSelection,
#headerName,
#headerSize,
#headerDate {
  border: 0;
}

#header[role="banner"] {
  background-color: rgb(22, 27, 34) !important;
  color: white;
}

#body-login > div > div > header,
#body-login {
  background-color: var(--color-main-background) !important;
  color: white;
}

#body-login a,
#body-login label,
#body-login p {
  color: var(--text-color) !important;
}

#user,
#password,
.groupofone > #email {
  margin: 5px 0 !important;
  background-color: var(--color-main-background) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 5px !important;
  color: white !important;
  width: 95% !important;
  font-size: 15px !important;
  box-sizing: border-box !important;
}

#user:focus,
#password:focus,
.groupofone > #email:focus {
  border: 1px solid var(--color-primary-element) !important;
}

.groupofone > #email {
  margin: 15px 0 !important;
}

form[name="login"],
.lost-password-container {
  margin-top: 40px;
  margin-bottom: 10px;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background-color: var(--menu-background);
  width: 300px;
  align-items: center;
  padding: 10px 0 0 0 !important;
}

#submit-form,
#reset-password-submit,
#submit {
  display: block !important;
  width: 100%;
  text-align: center !important;
  color: white;
  background-color: #238636 !important;
  background-image: none !important;
  border-radius: 6px !important;
  border: 0 !important;
  font-size: 15px !important;
  padding: 0 !important;
  height: 35px;
}

#submit-form:hover,
#reset-password-submit:hover,
#submit:hover {
  background-color: #1b6e2b !important;
}

.alternative-logins > a,
#alternative-logins.alternative-logins .button.register-button {
  display: block !important;
  color: var(--text-color) !important;
  text-align: center !important;
  background-color: rgba(177, 186, 196, 0.05) !important;
  border-radius: 6px !important;
  border: 1px solid var(--color-border) !important;
  font-size: 15px !important;
  padding: 5px !important;
  height: 35px !important;
}

.alternative-logins > a {
  width: 100%;
}

#lost-password {
  margin: 0;
  color: var(--text-color) !important;
  padding-bottom: 10px;
}

.submit-icon {
  display: none;
}

#email-icon,
img[alt="Toggle password visibility"] {
  filter: invert(var(--svg-invert));
  vertical-align: baseline;
  top: 24px;
  left: 16px;
}

::-webkit-resizer,
::-webkit-scrollbar-corner {
  background-color: rgba(0, 0, 0, 0);
}

Update to anyone using this snippet of code: the 25.0.1 upgrade breaks this configuration completely, I would not advise using this anymore, anyone willing to maintain this is welcome to do so, but I will not be spending more time on it. Peace ✌

Is this theme still under development? ^^

Hi, not really at this point. The latest nextcloud UI revamp (nextcloud 3 if I'm not mistaken) made these styles obsolete, and I'm pretty much out of free time to work on this. You are however free to fork the gist and maintain it at any time, I'd be happy to give you some pointers concerning any details you might find confusing.

…

On Thu, 8 Jun 2023, 01:59 LeonMtn05, ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ Is this theme still under development? ^^ — Reply to this email directly, view it on GitHub <https://gist.github.com/BSoDium/7012dc7ced7829189aedd85bb8c4ffeb#gistcomment-4592918> or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALFSREYPMBXSHJHQMXKV5ETXKEIWPBFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFQKSXMYLMOVS2I5DSOVS2I3TBNVS3W5DIOJSWCZC7OBQXE5DJMNUXAYLOORPWCY3UNF3GS5DZVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVEYTCNRVGQYTGNZXU52HE2LHM5SXFJTDOJSWC5DF> . You are receiving this email because you authored the thread. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> .