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);
}

I'm having some trouble getting this to work. I just copy pasted the new version, but my dropdowns are still transparent and my save button is white. It's also not set to dark when my system is.

This is very weird. Everything works just fine with the same configuration on my instance.

I need some more info to understand the source of the problem:

• what version of Nextcloud are you running ? (I'm still on 23.0.5 as many apps have not been upgraded yet)
• what are the apps installed on your instance ?
• how did you get the theme to sync with the system's (I didn't know this was a thing)
  Just for the record, this custom css basically modifies the default dark and light theme so the switching process should at no point be influenced.

Okay, this is weird. It seems to have fixed itself after enabling dark theme. If I toggle dark theme off again, it's still fixed. Thanks!

Nice, glad to hear that 👌

Thanks 🙂. I'm also noticing some weirdness in the Task sidebar on 24.0.1.

I'll be tackling this issue shortly, thanks for reporting.

Sure! Thank you!

Hello!

Nice theme, thanks for your effort!

I noticed an issue with

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

It leads to the following empty space over files list:

I changed it to padding-top: 10px;.

Also, I have to comment out background-color: var(--menu-background) !important; in

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

because it causes the menu to look like:

As well as I had to comment this out as well:

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

because it makes Save button in Admin > Theming > Custom CSS invisible.

Nextcloud 24.0.1, custom theming-related apps: AppOrder 0.15.0, Splash 1.2.5

Looking awesome!

News app left bar layout gets flipped tho. On mobile and desktop. See attachment.

Noted, thanks, I'll keep you updated when I find some time to fix this.

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> .